1<!DOCTYPE html> 2<html lang="en-US"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="preconnect" href="https://fonts.googleapis.com"> 7 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 8 <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> 9 <style> 10/* HOT Landing Pages â Shared Styles */ 11/* Font loaded via <link> in template, not @import */ 12 13*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 14html { scroll-behavior: smooth; overflow-x: clip; } 15html body { overflow-x: clip; } 16body.single-hot_course, 17body.single-hot_product, 18body.post-type-archive-hot_course, 19body.post-type-archive-hot_product { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: #444; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; } 20body.single-hot_course img, 21body.single-hot_product img, 22body.post-type-archive-hot_course img, 23body.post-type-archive-hot_product img { max-width: 100%; height: auto; display: block; } 24body.single-hot_course a, 25body.single-hot_product a, 26body.post-type-archive-hot_course a, 27body.post-type-archive-hot_product a { text-decoration: none; color: inherit; } 28body.single-hot_course ul, 29body.single-hot_product ul, 30body.post-type-archive-hot_course ul, 31body.post-type-archive-hot_product ul { list-style: none; } 32/* Container widths â !important needed because Bootstrap 5.3 is hardcoded in 33 wp_head on prod (can't be dequeued) and sets smaller max-widths at every 34 breakpoint, which would narrow the hero content to ~960px on wide screens 35 and visually push the centered hero-inner off the viewport center. */ 36body.single-hot_course .container, 37body.single-hot_product .container, 38body.post-type-archive-hot_product .container, 39body.post-type-archive-hot_course .container { 40 width: 92% !important; 41 max-width: 1200px !important; 42 margin-left: auto !important; 43 margin-right: auto !important; 44 padding-left: 0 !important; 45 padding-right: 0 !important; 46} 47@media (max-width: 768px) { 48 body.single-hot_course .container, 49 body.single-hot_product .container, 50 body.post-type-archive-hot_course .container, 51 body.post-type-archive-hot_product .container { 52 width: 94% !important; 53 } 54} 55 56/* ===== ANIMATIONS ===== */ 57.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } 58.reveal.visible { opacity: 1; transform: none; } 59.reveal-item { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } 60.reveal-item.visible { opacity: 1; transform: none; } 61.reveal-item.visible:nth-child(2) { transition-delay: 0.1s; } 62.reveal-item.visible:nth-child(3) { transition-delay: 0.2s; } 63.reveal-item.visible:nth-child(4) { transition-delay: 0.3s; } 64.reveal-item.visible:nth-child(5) { transition-delay: 0.35s; } 65.reveal-item.visible:nth-child(6) { transition-delay: 0.4s; } 66 67/* ===== TOP BAR ===== */ 68/* Phase 11.3 (5/8 owner): the bestseller offer now lives INSIDE the 69 top-bar (left slot) alongside contact + social â one consolidated 70 black row, no second stacked strip below. The .top-bar-deal slot is 71 empty on non-landing surfaces (archives etc.) and the layout still 72 flexes correctly. */ 73.top-bar { background: #1a1a1a; color: #fff; font-size: 14px; padding: 8px 0; font-weight: 500; } 74.top-bar-inner { 75 display: flex; 76 align-items: center; 77 justify-content: space-between; 78 gap: 24px; 79 flex-wrap: wrap; 80} 81.top-bar a { color: #fff; transition: opacity 0.2s; } 82.top-bar a:hover { opacity: 0.85; } 83.top-bar-deal { 84 display: flex; 85 align-items: center; 86 flex-wrap: wrap; 87 gap: 8px; 88 flex: 1 1 auto; 89 min-width: 0; 90} 91.top-bar-deal:empty { display: none; } 92.top-bar-contact { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; } 93.top-bar-item { display: flex; align-items: center; gap: 8px; } 94.top-bar-social { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } 95.top-bar-social a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(255,255,255,0.12); border-radius: 50%; transition: background 0.2s; } 96.top-bar-social a:hover { background: rgba(255,255,255,0.28); } 97@media (max-width: 900px) { 98 .top-bar-inner { gap: 14px; } 99 .top-bar-contact { gap: 16px; font-size: 13px; } 100} 101@media (max-width: 640px) { 102 .top-bar-contact .top-bar-item:first-child { display: none; } /* drop email â keep phone */ 103 .top-bar-social { display: none; } 104} 105@media (max-width: 480px) { 106 .top-bar-contact { display: none; } /* deal carries the row alone */ 107} 108 109/* ===== NAV ===== */ 110.site-nav { background: #fff; border-bottom: 1px solid #e7e7e7; position: sticky; top: 0; z-index: 1000; } 111.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } 112.nav-logo img { height: 40px; width: auto; } 113.nav-links { display: flex; align-items: center; gap: 22px; } 114.nav-link, 115.nav-links a { font-size: 15px; font-weight: 500; color: #333; transition: color 0.2s; background: transparent; border: 0; cursor: pointer; padding: 0; font-family: inherit; } 116.nav-link:hover, 117.nav-link--active, 118.nav-links a:hover { color: #E8590C; } 119.nav-link--active { font-weight: 600; } 120/* Phase 11.7 (5/10 owner): nav CTA picks up the home-demo .hlh-btn 121 shape â 12px rounded rect, gradient, 14px 800 weight. Tighter 122 padding so it still fits the 72px nav row. */ 123.nav-links .nav-cta, 124.nav-cta { 125 display: inline-flex; 126 align-items: center; 127 gap: 6px; 128 background-image: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 129 background-size: 200% 100%; 130 background-position: 0% 50%; 131 color: #fff !important; 132 padding: 9px 18px; 133 border-radius: 12px; 134 font-weight: 800; 135 font-size: 14px; 136 letter-spacing: 0.01em; 137 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 138 transition: background-position 0.35s ease, transform 0.15s ease; 139} 140.nav-links .nav-cta:hover { background-position: 100% 50%; color: #fff !important; transform: translateY(-1px); } 141.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } 142.nav-toggle span { display: block; width: 24px; height: 2px; background: #333; margin: 5px 0; transition: 0.3s; } 143.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } 144.nav-toggle.active span:nth-child(2) { opacity: 0; } 145.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } 146 147/* Services megamenu â mirrors the live homeoftraining.com nav structure. 148 Hover-open on desktop, tap-to-expand on mobile (handled in landing-page.js). 149 Three-column grid: Compliance Training / Licensing / Guidebooks-SCORM. */ 150.nav-item { position: relative; } 151.nav-item--has-mega .nav-link--mega { display: inline-flex; align-items: center; gap: 6px; } 152.nav-caret { transition: transform 0.18s ease; } 153.nav-item--has-mega.is-open .nav-link--mega .nav-caret, 154.nav-item--has-mega:hover .nav-link--mega .nav-caret { transform: rotate(180deg); color: #E8590C; } 155.nav-mega { 156 position: absolute; 157 top: calc(100% + 14px); 158 left: 50%; 159 transform: translateX(-50%) translateY(-6px); 160 min-width: 720px; 161 background: #fff; 162 border: 1px solid #eee; 163 border-radius: 12px; 164 box-shadow: 0 18px 48px rgba(0,0,0,0.12); 165 padding: 24px 28px; 166 opacity: 0; 167 visibility: hidden; 168 pointer-events: none; 169 transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; 170 z-index: 1001; 171} 172/* Invisible hover bridge â covers the gap between nav button and panel 173 so the hover doesn't drop when the cursor crosses it. */ 174.nav-mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } 175.nav-item--has-mega:hover .nav-mega, 176.nav-item--has-mega:focus-within .nav-mega, 177.nav-item--has-mega.is-open .nav-mega { 178 opacity: 1; 179 visibility: visible; 180 pointer-events: auto; 181 transform: translateX(-50%) translateY(0); 182} 183.nav-mega-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } 184.nav-mega-col h4.nav-mega-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin: 0 0 12px; padding-bottom: 8px;
184 border-bottom: 1px solid #f0f0f0; } 185.nav-mega-col h4.nav-mega-heading a { color: inherit; } 186.nav-mega-col h4.nav-mega-heading a:hover { color: #E8590C; } 187.nav-mega-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } 188.nav-mega-col ul li a { display: block; font-size: 14px; font-weight: 500; color: #333; padding: 6px 8px; border-radius: 6px; transition: background-color 0.15s, color 0.15s; } 189.nav-mega-col ul li a:hover { background: #fff5ec; color: #E8590C; } 190 191@media (max-width: 1024px) { 192 .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 16px 20px 24px; gap: 4px; border-top: 1px solid #e7e7e7; box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-height: calc(100vh - 72px); overflow-y: auto; } 193 .nav-links.open { display: flex; } 194 .nav-toggle { display: block; } 195 196 /* Top-level rows â Services toggle + flat links share one size/weight. */ 197 .nav-link, 198 .nav-links > a, 199 .nav-item--has-mega .nav-link--mega { 200 padding: 12px 4px; 201 font-size: 16px; 202 font-weight: 600; 203 line-height: 1.35; 204 border-bottom: 1px solid #f4f4f4; 205 } 206 .nav-links .nav-cta { 207 margin-top: 12px; 208 padding: 13px 22px; 209 font-size: 15px; 210 font-weight: 800; 211 text-align: center; 212 border: 0; 213 border-radius: 12px; 214 justify-content: center; 215 } 216 217 /* Mobile: collapse mega into an accordion under the Services row */ 218 .nav-item--has-mega .nav-link--mega { width: 100%; justify-content: space-between; } 219 .nav-mega { 220 position: static; 221 left: auto; 222 transform: none; 223 min-width: 0; 224 width: 100%; 225 opacity: 1; 226 visibility: hidden; 227 pointer-events: none; 228 max-height: 0; 229 padding: 0; 230 border: 0; 231 box-shadow: none; 232 border-radius: 0; 233 overflow: hidden; 234 transition: max-height 0.25s ease, padding 0.2s ease, visibility 0s linear 0.25s; 235 } 236 .nav-mega::before { display: none; } 237 .nav-item--has-mega.is-open .nav-mega, 238 .nav-item--has-mega:hover .nav-mega, 239 .nav-item--has-mega:focus-within .nav-mega { 240 transform: none; 241 left: auto; 242 } 243 .nav-item--has-mega.is-open .nav-mega { 244 visibility: visible; 245 pointer-events: auto; 246 max-height: 1200px; 247 padding: 4px 0 12px; 248 transition: max-height 0.3s ease, padding 0.2s ease, visibility 0s linear 0s; 249 } 250 .nav-mega-inner { grid-template-columns: 1fr; gap: 0; width: 100%; } 251 .nav-mega-col { width: 100%; min-width: 0; padding: 0; } 252 253 /* Section labels â smaller uppercase captions, clearly not links. */ 254 .nav-mega-col h4.nav-mega-heading { 255 margin: 16px 0 2px; 256 padding: 0 4px 8px; 257 font-size: 12px; 258 font-weight: 700; 259 letter-spacing: 0.08em; 260 line-height: 1.25; 261 text-transform: uppercase; 262 color: #888; 263 border-bottom: 1px solid #f0f0f0; 264 } 265 .nav-mega-col:first-child h4.nav-mega-heading { margin-top: 6px; } 266 .nav-mega-col h4.nav-mega-heading a { 267 font-size: inherit; 268 font-weight: inherit; 269 letter-spacing: inherit; 270 text-transform: inherit; 271 color: inherit; 272 padding: 0; 273 border-bottom: 0; 274 } 275 .nav-mega-col h4.nav-mega-heading a:hover { color: #E8590C; background: transparent; } 276 277 /* Submenu links â same 16px as top-level rows, indented + lighter weight. */ 278 .nav-mega-col ul { gap: 0; } 279 .nav-mega-col ul li a { 280 display: block; 281 padding: 10px 4px 10px 14px; 282 font-size: 16px; 283 font-weight: 500; 284 line-height: 1.35; 285 color: #333; 286 border-bottom: 0; 287 border-radius: 6px; 288 } 289 .nav-mega-col ul li a:hover { background: #fff5ec; color: #E8590C; } 290} 291 292/* ===== HERO BASE ===== */ 293/* Embedded homepage left panel inside landing-page hero grid. */ 294.hero-content--left-hero { 295 min-width: 0; 296 position: relative; 297 z-index: 2; 298 overflow: visible; 299} 300.hero-content--left-hero .hot-left-hero--embed { 301 max-width: 100%; 302} 303.hero-inner .hero-content--left-hero { 304 max-width: 640px; 305 margin: 0 auto; 306 text-align: left; 307} 308.hero--grid-dark .hero-content--left-hero .hot-left-hero--embed, 309.hero--certified-dark .hero-content--left-hero .hot-left-hero--embed { 310 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08); 311} 312.hero--certified-dark .hero-grid { text-align: left; }
313.hero--certified-dark .hero-mini-compliance-label { color: rgba(255,255,255,0.45); } 314.hero--certified-dark .hero-mini-compliance-row img { opacity: 0.92; filter: none; } 315.hero--certified-dark .hero-mini-compliance-row img:hover { opacity: 1; filter: none; } 316 317/* Phase 11.8 (5/10 owner): hero padding tightened so the CTA stays 318 above the fold on common laptop viewports (1366Ã768, 1440Ã900). 319 Was 32/44 on the base, 64/72 on grid variants, 96/120 on product â 320 collapsed to a uniform tighter scale. The short-viewport media 321 query below trims further for cramped laptop heights. */ 322.hero { padding: 20px 0 28px; position: relative; overflow: hidden; } 323.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; } 324.hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; text-align: center; } 325.hero-inner .subtext { margin-left: auto; margin-right: auto; max-width: 640px; font-size: 15px; line-height: 1.5; margin-bottom: 12px; } 326/* Length-aware subtext sizing â applied by template based on char count. 327 Longer copy shrinks so the CTA always clears the fold. */ 328.subtext--md { font-size: 17px !important; line-height: 1.55 !important; } 329.subtext--sm { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 14px !important; } 330.subtext--xs { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; } 331.hero-inner h1 { font-size: clamp(1.7rem, 3.6vw, 2.25rem); margin-bottom: 8px; } 332.hero-inner .hero-icon { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 14px; } 333.hero-inner .hero-icon img { max-width: 100%; max-height: 100%; } 334.hero-inner .hero-badge { margin-bottom: 8px; } 335.hero-inner .hero-price-row { justify-content: center; margin-bottom: 12px; } 336.hero-inner .hero-price { font-size: 40px; } 337.hero-inner .hero-ctas { justify-content: center; } 338.hero-inner .hero-trust { justify-content: center; margin-top: 18px; } 339.hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; position: relative; z-index: 1; } 340.hero-icon { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } 341.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 60px; margin-bottom: 10px; letter-spacing: 0.05em; text-transform: uppercase; } 342.hero-badge svg { flex-shrink: 0; } 343.hero h1 { font-size: clamp(1.85rem, 3.8vw, 2.45rem); font-weight: 800; line-height: 1.12; margin-bottom: 10px; letter-spacing: -0.02em; } 344.hero h1 span { font-style: normal; } 345.hero .subtext { font-size: 16px; margin-bottom: 14px; line-height: 1.5; max-width: 520px; } 346.hero-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } 347.hero-price { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } 348.hero-price-info { font-size: 15px; } 349.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } 350/* !important needed: body.single-hot_course a { color: inherit } has higher 351 specificity (0,2,1) than .btn-primary (0,1,0), so inherit wins and button 352 text renders dark gray. Force white here. Same pattern for .btn-white. */ 353/* Phase 11.6 (5/9 owner): CTAs picked up the home-demo treatment â 354 diagonal gradient that slides on hover, slightly bolder text, and 355 an arrow icon that nudges right on hover. Pill radius preserved 356 (it's the brand) but background is now a 200%-wide gradient so the 357 hover-slide reads as warm fire energy instead of a flat color flip. */ 358/* Phase 11.7 (5/10 owner): "use the home-demo CTA design and use the 359 same." Ported directly from home-demo `.hlh-btn` â 12px rounded 360 rectangle (NOT the old pill), 14.5px 800 weight, tighter 13px 22px 361 padding, same 3-color warm gradient that slides on hover. The fire 362 halo (rules below) attaches to this same selector list so every 363 glowing CTA gets the matching home-demo treatment. */ 364.btn-primary { 365 display: inline-flex; 366 align-items: center; 367 justify-content: center; 368 gap: 8px; 369 background-image: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 370 background-size: 200% 100%; 371 background-position: 0% 50%; 372 color: #fff !important; 373 font-size: 14.5px; 374 font-weight: 800; 375 letter-spacing: 0.01em; 376 padding: 13px 22px; 377 border-radius: 12px; 378 border: 0; 379 transition: background-position 0.35s ease, transform 0.15s ease; 380 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 381 text-decoration: none; 382} 383.btn-primary:hover { 384 background-position: 100% 50%; 385 transform: translateY(-1px); 386 color: #fff !important; 387} 388.btn-primary:active { transform: translateY(0); } 389.btn-primary svg { width: 16px; height: 16px; transition: transform 0.2s ease; } 390.btn-primary:hover svg { transform: translateX(3px); } 391.btn-ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 14px 24px; border: 2px solid #ddd; border-radius: 12px; transition: all 0.2s; } 392.hero-trust { display: flex; align-items: center; gap: 20px; margin-top: 22px; flex-wrap: wrap; } 393.hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } 394/* Accent stripe for dark variants */ 395.accent-stripe { height: 4px; } 396 397/* Hero visual elements */ 398.hero-visual { position: relative; } 399.hero-card { border-radius: 20px; padding: 40px 32px; text-align: center; transform: rotate(-1.5deg); } 400.hero-card .card-icon { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } 401.hero-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; } 402.hero-card p { font-size: 13px; font-weight: 600; } 403.hero-card .card-detail { margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } 404.cert-mockup { background: #fff; border-radius: 16px; padding: 40px 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #eee; text-align: center; position: relative; transform: rotate(2deg); } 405.cert-mockup::before { content: ''; position: absolute; inset: 6px; border: 2px solid #e8ddd5; border-radius: 12px; pointer-events: none; } 406.cert-seal { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #E8590C; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 16px; background: linear-gradient(135deg, #fff9f5, #fff); box-shadow: 0 4px 12px rgba(232,89,12,0.15), inset 0 0 0 2px rgba(232,89,12,0.08); } 407.cert-seal svg { color: #E8590C; } 408.cert-seal-text { font-size: 8px; text-transform: uppercase; letter-spacing: 1.5px; color: #E8590C; font-weight: 700; margin-top: 2px; } 409.cert-title { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #999; font-weight: 600; margin-bottom: 8px; } 410.cert-name { font-size: 22px; font-weight: 800; color: #111; margin-bottom: 4px; } 411.cert-course { font-size: 14px; color: #E8590C; font-weight: 600; margin-bottom: 16px; } 412.cert-details { font-size: 12px; color: #999; } 413.cert-float-badge { position: absolute; background: #fff; border-radius: 10px; padding: 7px 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #333; white-space: nowrap; } 414.cert-float-1 { top: 2%; left: -52px; transform: rotate(-2deg); z-index: 3; } 415.cert-float-2 { top: 38%; right: -56px; transform: rotate(2deg); z-index: 3; } 416.cert-float-3 { top: 74%; left: -44px; transform: rotate(-1deg); z-index: 3; } 417.cert-float-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 418.cert-float-icon.green { background: #e6f9ee; } 419.cert-float-icon.blue { background: #e8f0fe; } 420.cert-float-icon.orange { background: #fef2e8; } 421 422/* Mini compliance strip â lives under the hero video on grid variants */
423.hero-mini-compliance { margin: 20px auto 0; max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 8px; } 424.hero-mini-compliance-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); } 425.hero--grid-light .hero-mini-compliance-label { color: rgba(0,0,0,0.42); } 426.hero--product .hero-mini-compliance-label { color: rgba(0,0,0,0.42); } 427.hero-mini-compliance-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; width: 100%; } 428/* Phase 11 (5/6 UAT): bumped size +30% and reduced transparency so 429 compliance/security badges read as confident trust signals â owner 430 said the prior 38px @ 0.78 opacity was easy to miss in the hero. */ 431.hero-mini-compliance-row img { 432 height: 50px !important; 433 width: auto !important; 434 max-width: 114px !important; 435 object-fit: contain; 436 opacity: 0.95; 437 filter: none; 438 transition: opacity 0.25s; 439} 440.hero-mini-compliance-row img:hover { opacity: 1; } 441.hero--grid-light .hero-mini-compliance-row img, 442.hero--grid-dark .hero-mini-compliance-row img, 443.hero--product .hero-mini-compliance-row img { opacity: 0.92; filter: none; } 444.hero--grid-light .hero-mini-compliance-row img:hover, 445.hero--grid-dark .hero-mini-compliance-row img:hover, 446.hero--product .hero-mini-compliance-row img:hover { opacity: 1; filter: none; } 447@media (max-width: 900px) { 448 .hero-mini-compliance-row { gap: 18px; } 449 .hero-mini-compliance-row img { height: 40px !important; max-width: 92px !important; } 450} 451@media (max-width: 560px) { 452 .hero-mini-compliance-row { gap: 14px; } 453 .hero-mini-compliance-row img { height: 34px !important; max-width: 78px !important; } 454} 455 456/* ===== NEW DETERMINISTIC HERO VARIANTS (v1.1.0) ===== 457 Three variants selected per-slug (not random): 458 - certified-dark: dark centered hero, accreditation badge on top (ANSI PNG or category SVG) 459 - grid-light: light warm grid, video + pills on right 460 - grid-dark: dark grid, video + pills on right 461*/ 462 463/* â Certified Dark (food manager, florida/texas/national food handler) â */ 464.hero--certified-dark { background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 40%, #111 100%); text-align: center; } 465.hero--certified-dark::before { background: radial-gradient(ellipse at 50% 20%, rgba(232,89,12,0.14), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(232,89,12,0.07), transparent 50%); } 466.hero--certified-dark .accent-stripe { background: linear-gradient(90deg, #E8590C, rgba(232,89,12,0.5), #E8590C); } 467.hero--certified-dark .hero-icon { width: 120px; height: 120px; border-radius: 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 16px; color: #fff; } 468.hero--certified-dark .hero-icon--png { background: #fff; padding: 10px; } 469.hero--certified-dark .hero-icon img { width: 100%; height: 100%; object-fit: contain; } 470.hero--certified-dark .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(232,89,12,0.3); } 471.hero--certified-dark h1 { color: #fff; } 472.hero--certified-dark h1 span { color: #E8590C; } 473.hero--certified-dark .subtext { color: rgba(255,255,255,0.7); } 474.hero--certified-dark .hero-price { color: #fff; } 475.hero--certified-dark .hero-price-info { color: rgba(255,255,255,0.5); } 476.hero--certified-dark .btn-ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); } 477.hero--certified-dark .btn-ghost:hover { border-color: #E8590C; color: #E8590C; } 478.hero--certified-dark .hero-trust-item { color: rgba(255,255,255,0.5); } 479 480/* â Grid Light (most courses) â */ 481.hero--grid-light { padding: 28px 0 36px; background: linear-gradient(160deg, #fafafa 0%, #f4f0ed 40%, #fff7f0 100%); } 482.hero--grid-light::before { background: radial-gradient(ellipse at 78% 28%, rgba(232,89,12,0.08), transparent 60%); } 483.hero--grid-light .hero-badge { background: #E8590C; color: #fff; } 484.hero--grid-light h1 { color: #111; } 485.hero--grid-light h1 span { color: #E8590C; } 486.hero--grid-light .subtext { color: #555; } 487.hero--grid-light .hero-price { color: #E8590C; } 488.hero--grid-light .hero-price-info { color: #888; } 489.hero--grid-light .btn-ghost { color: #555; border-color: #ddd; } 490.hero--grid-light .btn-ghost:hover { border-color: #E8590C; color: #E8590C; } 491.hero--grid-light .hero-trust-item { color: #777; } 492 493/* â Grid Dark (alcohol, security, serious compliance) â */ 494.hero--grid-dark { padding: 28px 0 36px; background: linear-gradient(160deg, #111 0%, #1a1a1a 50%, #0f0f0f 100%); } 495.hero--grid-dark::before { background: radial-gradient(ellipse at 25% 40%, rgba(204,34,0,0.12), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(232,89,12,0.08), transparent 50%); } 496.hero--grid-dark .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(232,89,12,0.35); } 497.hero--grid-dark h1 { color: #fff; } 498.hero--grid-dark h1 span { color: #E8590C; } 499.hero--grid-dark .subtext { color: rgba(255,255,255,0.7); } 500.hero--grid-dark .hero-price { color: #fff; } 501.hero--grid-dark .hero-price-info { color: rgba(255,255,255,0.5); } 502.hero--grid-dark .btn-ghost { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); } 503.hero--grid-dark .btn-ghost:hover { border-color: #E8590C; color: #E8590C; } 504.hero--grid-dark .hero-trust-item { color: rgba(255,255,255,0.5); } 505 506/* â Shared grid hero video treatment â */ 507.hero-video-wrap { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.08); background: #111; aspect-ratio: 16 / 9; width: 100%; max-width: 680px; margin: 0 auto; } 508.hero-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #111; } 509.hero-video--vimeo { position: absolute; inset: 0; border: 0; pointer-events: none; object-fit: cover; } 510.hero--grid-dark .hero-video-wrap { box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); } 511 512 513/* ===== HERO VARIANT 1: Light warm + grid + cert mockup (original Florida Food Handler style) ===== */ 514.hero--v1 { background: linear-gradient(160deg, #fafafa 0%, #f4f0ed 40%, #faf7f5 100%); } 515.hero--v1::before { background: radial-gradient(ellipse at 70% 30%, rgba(232,89,12,0.06), transparent 60%); } 516.hero--v1 .hero-badge { background: #E8590C; color: #fff; } 517.hero--v1 h1 { color: #111; } 518.hero--v1 h1 span { color: #E8590C; } 519.hero--v1 .subtext { color: #555; } 520.hero--v1 .hero-price { color: #E8590C; } 521.hero--v1 .hero-price-info { color: #888; } 522.hero--v1 .btn-ghost { color: #555; border-color: #ddd; } 523.hero--v1 .btn-ghost:hover { border-color: #E8590C; color: #E8590C; } 524.hero--v1 .hero-trust-item { color: #777; } 525 526/* ===== HERO VARIANT 2: Dark charcoal + centered + HOT orange accent ===== */ 527.hero--v2 { background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 40%, #111 100%); text-align: center; } 528.hero--v2::before { background: radial-gradient(ellipse at 70% 20%, rgba(232,89,12,0.12), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(232,89,12,0.08), transparent 50%); } 529.hero--v2 .accent-stripe { background: linear-gradient(90deg, #E8590C, rgba(232,89,12,0.5), #E8590C); } 530.hero--v2 .hero-icon { background: rgba(255,255,255,0.08); } 531.hero--v2 .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(232,89,12,0.3); } 532.hero--v2 h1 { color: #fff; } 533.hero--v2 h1 span { color: #E8590C; } 534.hero--v2 .subtext { color: rgba(255,255,255,0.65); } 535.hero--v2 .hero-price { color: #fff; } 536.hero--v2 .hero-price-info { color: rgba(255,255,255,0.45); } 537.hero--v2 .hero-ctas { justify-content: center; } 538.hero--v2 .hero-price-row { justify-content: center; } 539.hero--v2 .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } 540.hero--v2 .btn-ghost:hover { border-color: #E8590C; color: #E8590C; } 541.hero--v2 .hero-trust { justify-content: center; } 542.hero--v2 .hero-trust-item { color: rgba(255,255,255,0.45); } 543
544/* ===== HERO VARIANT 3: Light orange + grid + card visual (Customer Service style) ===== */ 545.hero--v3 { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 25%, #fff 60%); } 546.hero--v3::before { background: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(249,115,22,0.04) 14px, rgba(249,115,22,0.04) 15px); } 547.hero--v3 .hero-badge { background: #f97316; color: #fff; } 548.hero--v3 h1 { color: #111; } 549.hero--v3 h1 span { color: #f97316; } 550.hero--v3 .subtext { color: #555; } 551.hero--v3 .hero-price { color: #f97316; } 552.hero--v3 .hero-price-info { color: #777; } 553.hero--v3 .hero-card { background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.08); border: 2px solid rgba(249,115,22,0.27); border-top: 4px solid #f97316; } 554.hero--v3 .hero-card .card-icon { background: linear-gradient(135deg, #f97316, rgba(249,115,22,0.8)); box-shadow: 0 8px 24px rgba(249,115,22,0.2); } 555.hero--v3 .hero-card h4 { color: #111; } 556.hero--v3 .hero-card p { color: #f97316; } 557.hero--v3 .hero-card .card-detail { color: #999; } 558.hero--v3 .btn-ghost { color: #555; border-color: #ddd; } 559.hero--v3 .btn-ghost:hover { border-color: #f97316; color: #f97316; } 560.hero--v3 .hero-trust-item { color: #777; } 561 562/* ===== HERO VARIANT 4: Dark crimson + centered ===== */ 563.hero--v4 { background: linear-gradient(170deg, #1a0000 0%, #2d0a0a 40%, #1a1a1a 100%); text-align: center; } 564.hero--v4::before { background: radial-gradient(ellipse at 60% 30%, rgba(204,34,0,0.15), transparent 50%); } 565.hero--v4 .accent-stripe { background: linear-gradient(90deg, #CC2200, rgba(204,34,0,0.5), #CC2200); } 566.hero--v4 .hero-icon { background: rgba(255,255,255,0.08); } 567.hero--v4 .hero-badge { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(204,34,0,0.4); } 568.hero--v4 h1 { color: #fff; } 569.hero--v4 h1 span { color: #ef4444; } 570.hero--v4 .subtext { color: rgba(255,255,255,0.65); } 571.hero--v4 .hero-price { color: #fff; } 572.hero--v4 .hero-price-info { color: rgba(255,255,255,0.45); } 573.hero--v4 .hero-ctas { justify-content: center; } 574.hero--v4 .hero-price-row { justify-content: center; } 575.hero--v4 .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } 576.hero--v4 .btn-ghost:hover { border-color: #ef4444; color: #ef4444; } 577.hero--v4 .hero-trust { justify-content: center; } 578.hero--v4 .hero-trust-item { color: rgba(255,255,255,0.45); } 579 580/* ===== HERO VARIANT 5: Light copper/warm + centered ===== */ 581.hero--v5 { background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 15%, #fff 40%); text-align: center; } 582.hero--v5::before { background: radial-gradient(ellipse at 50% 20%, rgba(220,38,38,0.06), transparent 60%); } 583.hero--v5 .hero-icon { background: rgba(220,38,38,0.07); border-radius: 50%; } 584.hero--v5 .hero-badge { background: #dc2626; color: #fff; } 585.hero--v5 h1 { color: #111; } 586.hero--v5 h1 span { color: #dc2626; } 587.hero--v5 .subtext { color: #555; } 588.hero--v5 .hero-price { color: #dc2626; } 589.hero--v5 .hero-price-info { color: #888; } 590.hero--v5 .hero-ctas { justify-content: center; } 591.hero--v5 .hero-price-row { justify-content: center; } 592.hero--v5 .btn-primary { background: #dc2626; color: #fff !important; box-shadow: 0 6px 24px rgba(220,38,38,0.3); } 593.hero--v5 .btn-primary:hover { background: #b91c1c; color: #fff !important; box-shadow: 0 10px 32px rgba(220,38,38,0.35); } 594.hero--v5 .btn-ghost { color: #555; border-color: #ddd; } 595.hero--v5 .btn-ghost:hover { border-color: #dc2626; color: #dc2626; } 596.hero--v5 .hero-trust { justify-content: center; } 597.hero--v5 .hero-trust-item { color: #777; } 598 599/* ===== HERO VARIANT 6: Dark slate + grid + card + HOT red accent ===== */ 600.hero--v6 { background: linear-gradient(160deg, #111 0%, #1a1a1a 50%, #0f0f0f 100%); } 601.hero--v6::before { background: radial-gradient(ellipse at 30% 40%, rgba(204,34,0,0.1), transparent 50%); } 602.hero--v6 .hero-badge { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(204,34,0,0.35); } 603.hero--v6 h1 { color: #fff; } 604.hero--v6 h1 span { color: #f97316; } 605.hero--v6 .subtext { color: rgba(255,255,255,0.6); } 606.hero--v6 .hero-price { color: #fff; } 607.hero--v6 .hero-price-info { color: rgba(255,255,255,0.4); } 608.hero--v6 .hero-card { background: rgba(255,255,255,0.05); box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-left: 4px solid #CC2200; } 609.hero--v6 .hero-card .card-icon { background: linear-gradient(135deg, #E8590C, #CC2200); box-shadow: 0 8px 24px rgba(232,89,12,0.25); } 610.hero--v6 .hero-card h4 { color: #fff; } 611.hero--v6 .hero-card p { color: #f97316; } 612.hero--v6 .hero-card .card-detail { color: rgba(255,255,255,0.4); } 613.hero--v6 .btn-ghost { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } 614.hero--v6 .btn-ghost:hover { border-color: #f97316; color: #f97316; } 615.hero--v6 .hero-trust-item { color: rgba(255,255,255,0.45); } 616 617/* ===== HERO â PRODUCT VARIANT (hot_product CPT) ===== */ 618.hero--product { background: linear-gradient(160deg, #fff 0%, #fff8f3 45%, #fefefe 100%); position: relative; overflow: hidden; padding: 32px 0 44px; } 619.hero--product::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 80% 20%, rgba(232,89,12,0.10), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(232,89,12,0.06), transparent 50%); pointer-events: none; } 620.hero--product .hero-badge { background: #E8590C; color: #fff; } 621.hero--product h1 { color: #111; } 622.hero--product h1 span { color: #E8590C; } 623.hero--product .subtext { color: #555; } 624.hero--product .hero-price { color: #E8590C; } 625.hero--product .hero-price-info { color: #888; } 626.hero--product .btn-ghost { color: #555; border-color: #ddd; } 627.hero--product .btn-ghost:hover { border-color: #E8590C; color: #E8590C; } 628.hero--product .hero-trust-item { color: #777; } 629 630/* Quick Start dropdown extends below the embed card â do not clip it inside 631 the hero, and stack above the logos / trust sections that follow. */ 632.hero:has(.hot-left-hero) { 633 overflow: visible; 634 z-index: 5; 635} 636.hero:has(.hot-left-hero) .hero-grid, 637.hero:has(.hot-left-hero) .hero-inner { 638 overflow: visible; 639} 640body.hlh-qs-dropdown-open .hero:has(.hot-left-hero) { 641 z-index: 999997; 642} 643body.hlh-qs-dropdown-open .logos-bar, 644body.hlh-qs-dropdown-open .trust-row { 645 z-index: 0; 646 position: relative; 647} 648
649/* Dashboard Mockup (product hero visual) */ 650.dashboard-mockup { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #eee; overflow: hidden; transform: rotate(-1.2deg); position: relative; z-index: 2; } 651.dashboard-header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: #f8f7f5; border-bottom: 1px solid #efeeec; } 652.dashboard-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } 653.dashboard-dot.red { background: #ff6157; } 654.dashboard-dot.yellow { background: #ffc130; } 655.dashboard-dot.green { background: #28cd41; } 656.dashboard-title { margin-left: 14px; font-size: 11px; color: #999; font-weight: 600; letter-spacing: 0.3px; } 657.dashboard-body { padding: 28px 24px 24px; } 658.dashboard-org { margin-bottom: 22px; } 659.dashboard-org-name { font-size: 17px; font-weight: 800; color: #111; margin-bottom: 3px; letter-spacing: -0.01em; } 660.dashboard-org-sub { font-size: 12px; color: #888; font-weight: 500; } 661.dashboard-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 24px; padding: 18px 14px; background: linear-gradient(135deg, #fff6ef 0%, #fdede0 100%); border-radius: 12px; } 662.dash-stat { text-align: center; } 663.dash-stat-num { font-size: 24px; font-weight: 800; color: #E8590C; line-height: 1; margin-bottom: 5px; letter-spacing: -0.02em; } 664.dash-stat-pct { font-size: 14px; font-weight: 700; } 665.dash-stat-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; } 666.dashboard-courses { display: flex; flex-direction: column; gap: 13px; } 667.dash-course { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; gap: 12px; align-items: center; } 668.dash-course-name { color: #333; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 669.dash-course-bar { height: 7px; background: #f0efec; border-radius: 10px; overflow: hidden; } 670.dash-course-bar > div { height: 100%; background: linear-gradient(90deg, #E8590C, #f97316); border-radius: 10px; } 671.dash-course-pct { font-size: 11px; color: #E8590C; font-weight: 700; text-align: right; } 672 673@media (max-width: 900px) { 674 .hero--product { padding: 24px 0 32px; } 675 .dashboard-mockup { transform: none; max-width: 480px; margin: 0 auto; } 676} 677 678@media (max-width: 900px) { 679 .hero { padding: 48px 0 40px; } 680 .hero-grid { grid-template-columns: 1fr; gap: 40px; } 681 .hero-visual { max-width: 380px; margin: 0 auto; } 682 .cert-mockup { transform: none; } 683 .hero-card { transform: none; } 684 .hero-video-wrap { max-width: 400px; aspect-ratio: 16 / 9; } 685 .cert-float-1 { left: -36px; top: 4%; } 686 .cert-float-2 { right: -40px; top: 40%; } 687 .cert-float-3 { left: -30px; top: 74%; bottom: auto; } 688 .hero--certified-dark .hero-icon { width: 88px; height: 88px; } 689} 690@media (max-width: 560px) { 691 .cert-float-1 { left: -14px; top: 4%; font-size: 10px; padding: 5px 10px; } 692 .cert-float-2 { right: -16px; top: 42%; font-size: 10px; padding: 5px 10px; } 693 .cert-float-3 { left: -10px; top: 76%; bottom: auto; font-size: 10px; padding: 5px 10px; } 694 .cert-float-icon { width: 18px; height: 18px; } 695} 696 697/* ===== DASHBOARD SHOWCASE (product page, relocated from hero) ===== */ 698.dashboard-showcase { background: linear-gradient(180deg, #fff 0%, #fff8f2 100%); padding: 96px 0; border-top: 1px solid #f2ece4; border-bottom: 1px solid #f2ece4; } 699.dashboard-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } 700.dashboard-showcase-copy .section-title { margin-bottom: 18px; } 701.dashboard-showcase-lead { font-size: 18px; color: #555; line-height: 1.7; margin-bottom: 28px; } 702.dashboard-showcase-features { list-style: none; padding: 0; margin: 0; } 703.dashboard-showcase-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: #333; } 704.dashboard-showcase-features li .pricing-check { margin-top: 4px; } 705.dashboard-showcase-visual .dashboard-mockup { transform: rotate(1deg); max-width: 480px; margin: 0 auto; } 706@media (max-width: 900px) { 707 .dashboard-showcase { padding: 64px 0; } 708 .dashboard-showcase-grid { grid-template-columns: 1fr; gap: 40px; } 709 .dashboard-showcase-copy .section-title { text-align: center !important; } 710 .dashboard-showcase-lead { text-align: center; } 711 .dashboard-showcase-features li { justify-content: flex-start; } 712 .dashboard-showcase-visual .dashboard-mockup { transform: none; } 713} 714 715/* ===== COMPLIANCE CERTIFICATIONS CAROUSEL (full-width, every landing page) ===== */
716.compliance-bar { background: linear-gradient(180deg, #fafafa 0%, #fff 100%); padding: 72px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } 717.compliance-eyebrow { display: block; text-align: center; font-size: 12px; font-weight: 700; color: #E8590C; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; } 718.compliance-label { text-align: center; font-size: 30px; font-weight: 800; color: #111; letter-spacing: -0.02em; margin: 0 0 12px; } 719.compliance-sublabel { text-align: center; font-size: 15px; color: #666; margin: 0 auto 40px; max-width: 560px; line-height: 1.55; } 720.compliance-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; max-width: 1160px; margin: 0 auto; padding: 0 24px; align-items: center; } 721.compliance-tile { display: flex; align-items: center; justify-content: center; padding: 28px 18px; background: #fff; border: 1px solid #eee; border-radius: 16px; min-height: 180px; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } 722.compliance-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); border-color: #e0e0e0; } 723.compliance-tile img { 724 height: 130px !important; 725 width: auto !important; 726 max-width: 100% !important; 727 object-fit: contain; 728 opacity: 1; 729} 730@media (max-width: 900px) { 731 .compliance-bar { padding: 56px 0; } 732 .compliance-label { font-size: 26px; } 733 .compliance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } 734 .compliance-tile { min-height: 140px; padding: 20px 12px; } 735 .compliance-tile img { height: 92px !important; } 736} 737@media (max-width: 560px) { 738 .compliance-bar { padding: 44px 0; } 739 .compliance-label { font-size: 22px; } 740 .compliance-sublabel { font-size: 14px; margin-bottom: 28px; } 741 .compliance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px; } 742 .compliance-tile { min-height: 120px; padding: 16px 10px; border-radius: 12px; } 743 .compliance-tile img { height: 76px !important; } 744} 745 746/* ===== ANAB/ANSI ACCREDITATION BAR (food-safety courses only) ===== */ 747.anab-bar { background: #fff; padding: 48px 0; border-bottom: 1px solid #eee; } 748.anab-inner { display: flex; align-items: center; justify-content: center; gap: 36px; max-width: 820px; margin: 0 auto; padding: 0 24px; } 749.anab-logo { flex-shrink: 0; width: 150px; height: auto; max-width: 150px; } 750.anab-copy { flex: 1; } 751.anab-eyebrow { display: inline-block; background: #fff4ed; color: #E8590C; font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 60px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } 752.anab-text { font-size: 15px; line-height: 1.65; color: #444; margin: 0; } 753.anab-text strong { color: #111; font-weight: 700; } 754.anab-text--link { margin-top: 10px; } 755.anab-text--link a { color: #E8590C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } 756.anab-text--link a:hover { color: #CC2200; } 757.fh-disclosures-notice { background: #fff9f5; border: 1px solid #f0d8c8; border-left: 4px solid #E8590C; padding: 20px 24px; margin: 0 auto 32px; max-width: 820px; border-radius: 12px; } 758.fh-disclosures-notice p { margin: 0; font-size: 14px; line-height: 1.65; color: #444; } 759.fh-disclosures-notice a { color: #E8590C; font-weight: 700; } 760.fh-disclosures-notice a:hover { color: #CC2200; } 761@media (max-width: 640px) { .anab-inner { flex-direction: column; gap: 20px; text-align: center; } .anab-logo { width: 120px; } .fh-disclosures-notice { margin-left: 16px; margin-right: 16px; } } 762 763/* ===== LOGOS BAR ===== */ 764/* Phase 11.1 (5/8 owner): logos bar gets more breathing room above + below 765 so the trust-row doesn't kiss it. */ 766.logos-bar { background: #fff; padding: 72px 0 64px; border-bottom: 1px solid #eee; overflow: hidden; } 767.logos-label { text-align: center; font-size: 13px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 32px; } 768.logos-viewport { position: relative; overflow: hidden; width: 100%; max-width: 1080px; margin: 0 auto; mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } 769.logos-track { display: flex !important; align-items: center; gap: 80px; width: max-content; animation: logos-scroll 28s linear infinite; } 770.logos-track img { height: 70px !important; width: auto !important; max-width: none !important; object-fit: contain; flex-shrink: 0; opacity: 0.95; } 771@keyframes logos-scroll { 772 from { transform: translateX(0); } 773 to { transform: translateX(calc(-50% - 40px)); } 774} 775@media (max-width: 900px) { 776 .logos-track { gap: 56px; animation-duration: 22s; } 777 .logos-track img { height: 52px !important; } 778} 779@media (max-width: 560px) { 780 .logos-track { gap: 40px; animation-duration: 18s; } 781 .logos-track img { height: 40px !important; } 782} 783 784/* ===== SECTIONS ===== */ 785section { padding: 88px 0; } 786/* Embedded left-hero tab panels are <section> â exclude from content spacing. */ 787section.hlh-panel { padding: 0; } 788@media (max-width: 768px) { 789 section { padding: 64px 0; } 790 section.hlh-panel { padding: 0; } 791 .section-subtitle { margin-bottom: 40px; } 792} 793 794/* Phase 11.1 (5/8 owner): more space ABOVE the eyebrow so it doesn't kiss 795 the preceding trust-row / logos-bar. */ 796.section-label { display: inline-block; background: #fff4ed; color: #E8590C; font-size: 11px; font-weight: 700; padding: 6px 16px; border-radius: 60px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; margin-bottom: 16px; } 797.hot-gutenberg-content { padding-top: 48px; } 798.section-title { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; color: #111; text-align: center; margin-bottom: 14px; letter-spacing: -0.01em; } 799.section-subtitle { font-size: 17px; color: #777; text-align: center; max-width: 560px; margin: 0 auto 56px; line-height: 1.7; } 800 801/* ===== WHAT YOU'LL LEARN ===== */ 802.learn-section { background: #fff; } 803.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; } 804.learn-item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid #ebe8e5; border-radius: 14px; transition: all 0.3s; } 805.learn-item:hover { border-color: #E8590C; box-shadow: 0 8px 24px rgba(232,89,12,0.08); transform: translateY(-3px); } 806.learn-icon { flex-shrink: 0; width: 48px; height: 48px; background: linear-gradient(135deg, #fff4ed, #ffe8d6); border-radius: 12px; display: flex; align-items: center; justify-content: center; } 807.learn-item h3 { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 4px; } 808.learn-item p { font-size: 14px; color: #777; line-height: 1.55; } 809@media (max-width: 640px) { .learn-grid { grid-template-columns: 1fr; } } 810 811/* ===== WAVE DIVIDERS ===== */ 812.wave-divider { height: 60px; width: 100%; position: relative; overflow: hidden; } 813.wave-divider.gray-to-white { background: #f7f7f7; } 814.wave-divider.gray-to-white::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } 815.wave-divider.white-to-gray { background: #fff; } 816.wave-divider.white-to-gray::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #f7f7f7; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } 817 818/* ===== HOW IT WORKS ===== */ 819.steps-section { background: #f7f7f7; } 820.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; position: relative; } 821.steps-row::before { content: ''; position: absolute; top: 52px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, #ddd 0, #ddd 8px, transparent 8px, transparent 16px); z-index: 0; } 822.step { text-align: center; padding: 40px 24px; background: #fff; border-radius: 20px; border: 1px solid #eee; transition: all 0.3s; position: relative; z-index: 1; } 823.step:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.07); transform: translateY(-4px); } 824.step-number { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: linear-gradient(135deg, #E8590C, #CC2200); color: #fff; font-size: 22px; font-weight: 800; border-radius: 50%; margin-bottom: 20px; box-shadow: 0 6px 16px rgba(232,89,12,0.25); } 825.step h3 { font-size: 19px; font-weight: 700; color: #111; margin-bottom: 10px; } 826.step p { font-size: 14px; color: #777; line-height: 1.65; } 827@media (max-width: 640px) { .steps-row { grid-template-columns: 1fr; } .steps-row::before { display: none; } } 828 829/* ===== PRICING CARD ===== */ 830.pricing-section { background: #fff; } 831.pricing-card { max-width: 520px; margin: 0 auto; background: #fff; border: 2px solid #E8590C; border-radius: 20px; padding: 0; overflow: hidden; box-shadow: 0 12px 40px rgba(232,89,12,0.1); position: relative; } 832.pricing-header { background: linear-gradient(135deg, #E8590C, #CC2200); padding: 32px; text-align: center; color: #fff; } 833.pricing-header h3 { font-size: 18px; font-weight: 600; opacity: 0.9; margin-bottom: 8px; } 834.pricing-amount { font-size: 56px; font-weight: 800; line-height: 1; } 835.pricing-amount sup { font-size: 28px; vertical-align: super; } 836.pricing-period { font-size: 15px; opacity: 0.8; margin-top: 4px; } 837.pricing-body { padding: 32px; } 838.pricing-features { margin-bottom: 28px; } 839.pricing-features li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: #444; border-bottom: 1px solid #f5f3f1; } 840.pricing-features li:last-child { border-bottom: none; } 841.pricing-check { flex-shrink: 0; width: 22px; height: 22px; background: #28a745; border-radius: 50%; display: flex; align-items: center; justify-content: center;
841 margin-top: 1px; } 842.pricing-cta { text-align: center; } 843.pricing-cta .btn-primary { width: 100%; justify-content: center; padding: 18px; font-size: 18px; } 844.pricing-guarantee { text-align: center; margin-top: 16px; font-size: 13px; color: #999; display: flex; align-items: center; justify-content: center; gap: 6px; } 845.pricing-popular { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.2); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 60px; text-transform: uppercase; letter-spacing: 0.05em; } 846 847/* ===== WHY HOT ===== */ 848.why-section { background: #f7f7f7; } 849.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; } 850.why-item { text-align: center; padding: 40px 24px; background: #fff; border-radius: 20px; border: 1px solid #eee; transition: all 0.3s; } 851.why-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-3px); } 852.why-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #E8590C, #CC2200); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 6px 16px rgba(232,89,12,0.2); } 853.why-item h3 { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 8px; } 854.why-item p { font-size: 14px; color: #777; line-height: 1.65; } 855@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } } 856 857/* ===== TESTIMONIALS ===== */ 858.testimonials-section { background: #fff; } 859.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; } 860.testimonial-card { background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 32px; transition: all 0.3s; position: relative; } 861.testimonial-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.06); } 862.testimonial-card::before { content: '\201C'; font-size: 5rem; color: rgba(232,89,12,0.08); position: absolute; top: 8px; left: 24px; line-height: 1; font-family: Georgia, serif; } 863.testimonial-stars { color: #f59e0b; font-size: 16px; margin-bottom: 16px; letter-spacing: 2px; } 864.testimonial-text { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 24px; position: relative; z-index: 1; } 865.testimonial-author-row { display: flex; align-items: center; gap: 12px; } 866.testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #E8590C, #CC2200); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; } 867.testimonial-name { font-size: 14px; font-weight: 700; color: #111; } 868.testimonial-role { font-size: 13px; color: #999; } 869@media (max-width: 640px) { .testimonials-grid { grid-template-columns: 1fr; } } 870 871/* ===== FAQ ===== */ 872.faq-section { background: #f7f7f7; } 873.faq-list { max-width: 720px; margin: 0 auto; } 874.faq-item { border: 1px solid #e5e2df; border-radius: 14px; margin-bottom: 12px; background: #fff; overflow: hidden; transition: all 0.2s; } 875.faq-item:hover { border-color: #ccc; } 876.faq-item.open { border-color: #E8590C; box-shadow: 0 4px 16px rgba(232,89,12,0.06); } 877.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; font-size: 16px; font-weight: 600; color: #222; background: none; border: none; width: 100%; text-align: left; font-family: inherit; transition: color 0.2s; } 878.faq-question:hover { color: #E8590C; } 879.faq-chevron { transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; width: 28px; height: 28px; background: #f5f3f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; } 880.faq-item.open .faq-chevron { transform: rotate(180deg); background: #fff4ed; } 881.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } 882.faq-answer-inner { padding: 0 24px 20px; font-size: 15px; color: #666; line-height: 1.7; } 883 884/* ===== FINAL CTA ===== */ 885.final-cta { background: linear-gradient(135deg, #E8590C 0%, #CC2200 50%, #a01b00 100%); padding: 88px 0; text-align: center; color: #fff; position: relative; overflow: hidden; } 886.final-cta::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); top: -200px; right: -150px; } 887.final-cta::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%); bottom: -150px; left: -100px; } 888.final-cta .container { position: relative; z-index: 1; } 889.final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 24px; } 890.final-cta p { font-size: 18px; opacity: 0.9; margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.7; } 891.btn-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #E8590C !important; font-size: 18px; font-weight: 700; padding: 18px 48px; border-radius: 60px; transition: all 0.25s; box-shadow: 0 8px 28px rgba(0,0,0,0.15); } 892.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.2); color: #E8590C !important; } 893.final-secondary { display: block; margin-top: 16px; font-size: 15px; opacity: 0.8; } 894.final-secondary a { color: #fff; text-decoration: underline; } 895 896/* ===== FOOTER ===== */ 897.site-footer { background: #fff; color: #444; padding: 64px 0 0; border-top: 1px solid #eee; } 898.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; } 899.footer-brand p { font-size: 14px; line-height: 1.7; color: #777; margin-top: 16px; } 900.footer-logo { height: 36px; width: auto; } 901.footer-col h4 { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.08em; } 902.footer-col ul li { margin-bottom: 12px; } 903.footer-col a { font-size: 14px; color: #888; transition: color 0.2s; } 904.footer-col a:hover { color: #E8590C; } 905.footer-bottom { background: #111; padding: 20px 0; } 906.footer-bottom p { font-size: 13px; color: #999; } 907.footer-bottom-links { display: flex; gap: 24px; } 908.footer-bottom-links a { font-size: 13px; color: #999; transition: color 0.2s; } 909.footer-bottom-links a:hover { color: #ccc; } 910@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } 911@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom .container { flex-direction: column; text-align: center; } } 912 913/* ===== HIDE MAIN SITE CHAT WIDGET ON LANDING PAGES ===== 914 The LandPress theme injects .chat-btn (floating button), .chat-comment, 915 #chat, plus various .chatbox-* elements. Hide them all on every 916 hot_course + hot_product page. */ 917body.single-hot_course .chatbox, 918body.single-hot_course .chatbox-first, 919body.single-hot_course .chatbox-form, 920body.single-hot_course .offline-chat, 921body.single-hot_course .chatcomment-box, 922body.single-hot_course .chat-comment, 923body.single-hot_course .chat-btn, 924body.single-hot_course #chat, 925body.single-hot_product .chatbox, 926body.single-hot_product .chatbox-first, 927body.single-hot_product .chatbox-form, 928body.single-hot_product .offline-chat, 929body.single-hot_product .chatcomment-box, 930body.single-hot_product .chat-comment, 931body.single-hot_product .chat-btn, 932body.single-hot_product #chat, 933body.post-type-archive-hot_course .chatbox, 934body.post-type-archive-hot_course .chatbox-first, 935body.post-type-archive-hot_course .chatbox-form, 936body.post-type-archive-hot_course .offline-chat, 937body.post-type-archive-hot_course .chatcomment-box, 938body.post-type-archive-hot_course .chat-comment, 939body.post-type-archive-hot_course .chat-btn, 940body.post-type-archive-hot_course #chat, 941body.post-type-archive-hot_product .chatbox, 942body.post-type-archive-hot_product .chatbox-first, 943body.post-type-archive-hot_product .chatbox-form, 944body.post-type-archive-hot_product .offline-chat, 945body.post-type-archive-hot_product .chatcomment-box, 946body.post-type-archive-hot_product .chat-comment, 947body.post-type-archive-hot_product .chat-btn, 948body.post-type-archive-hot_product #chat { display: none !important; } 949 950/* ===== STICKY MOBILE CTA ===== */ 951.mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 999999; } 952.mobile-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 600px; margin: 0 auto; } 953.mobile-sticky-price { font-size: 24px; font-weight: 800; color: #E8590C; } 954.mobile-sticky .btn-primary { padding: 14px 28px; font-size: 15px; flex-shrink: 0; } 955@media (max-width: 768px) { .mobile-sticky { display: block; } body.single-hot_course { padding-bottom: 140px; } } 956 957/* âââ Phase 3+4 (Track B): Trust badges + price prefix ââââââââââââââââ */ 958 959/* Trust badges (hero) â owner-locked: Mobile Friendly · 100,000+ learners · 960 Start in 60s · Instant certificate (conditional). Subtle pill pattern; 961 no fire-glow (Phase 7 reserves that treatment for primary CTAs only). */ 962.hot-trust-badges { 963 list-style: none; 964 margin: 0.85rem 0 1.25rem; 965 padding: 0; 966 display: flex; 967 flex-wrap: wrap; 968 gap: 0.6rem;
969 align-items: center; 970} 971 972.hot-trust-badge { 973 display: inline-flex; 974 align-items: center; 975 gap: 0.4rem; 976 padding: 0.4rem 0.85rem; 977 font-size: 0.875rem; 978 font-weight: 500; 979 line-height: 1.2; 980 color: #2d3748; 981 background: rgba(255, 255, 255, 0.9); 982 border: 1px solid rgba(204, 34, 0, 0.18); 983 border-radius: 999px; 984 -webkit-backdrop-filter: blur(4px); 985 backdrop-filter: blur(4px); 986 white-space: nowrap; 987} 988 989/* Dark hero variants need lighter pill chrome so badges read on dark bg */ 990.hero--certified-dark .hot-trust-badge, 991.hero--grid-dark .hot-trust-badge { 992 color: #f7fafc; 993 background: rgba(255, 255, 255, 0.08); 994 border-color: rgba(255, 255, 255, 0.18); 995} 996 997.hot-trust-icon { 998 font-size: 1rem; 999 line-height: 1; 1000 display: inline-block; 1001} 1002 1003/* Tablet â slightly tighter gap so 4 badges still fit on one line */ 1004@media (max-width: 768px) { 1005 .hot-trust-badges { 1006 gap: 0.5rem; 1007 margin: 0.75rem 0 1rem; 1008 } 1009 .hot-trust-badge { 1010 font-size: 0.8125rem; 1011 padding: 0.35rem 0.75rem; 1012 } 1013} 1014 1015/* Mobile (â¤600px) â wrap cleanly; no horizontal overflow at 320px */ 1016@media (max-width: 600px) { 1017 .hot-trust-badges { 1018 gap: 0.4rem; 1019 justify-content: flex-start; 1020 } 1021 .hot-trust-badge { 1022 font-size: 0.78125rem; 1023 padding: 0.3rem 0.65rem; 1024 white-space: normal; 1025 } 1026 .hot-trust-icon { 1027 font-size: 0.9rem; 1028 } 1029} 1030 1031/* Narrow mobile (â¤360px) â last guard for 320px viewports */ 1032@media (max-width: 360px) { 1033 .hot-trust-badge { 1034 font-size: 0.75rem; 1035 padding: 0.28rem 0.6rem; 1036 } 1037} 1038 1039/* Phase 4 â "Starting at" price prefix. 1040 Used inline before the dollar amount in section titles so the prefix 1041 reads as a softer modifier rather than competing with the price color. */ 1042.hot-price-prefix { 1043 font-weight: 600; 1044 color: #4a5568; 1045 margin-right: 0.25rem; 1046} 1047 1048/* âââ End of Phase 3+4 (Track B) additions ââââââââââââââââââââââââââââ */ 1049 1050/* âââ Phase 11.3 (5/8 owner): Bestseller, inline inside .top-bar âââââ 1051 The standalone .hot-bestseller-strip <aside> is gone. The pieces below 1052 are the same span/CTA primitives the renderer always emitted, but they 1053 sit in the .top-bar-deal slot now, so they inherit the topbar's 1054 background, padding, and breakpoints rather than carrying their own. 1055 Legacy `.hot-bestseller-strip` selectors were removed; the renderer 1056 no longer emits that wrapper. */ 1057 1058/* No-op shim so any stray `.hot-bestseller-strip` markup left in cached 1059 prod assets renders harmlessly until cache refresh. */ 1060.hot-bestseller-strip { display: contents; } 1061 1062.hot-bestseller-flame { 1063 font-size: 0.98rem; 1064 line-height: 1; 1065} 1066.hot-bestseller-headline { 1067 font-weight: 700; 1068 color: #ffaa55; 1069 text-transform: uppercase; 1070 letter-spacing: 0.05em; 1071 font-size: 0.78rem; 1072 white-space: nowrap; 1073} 1074.hot-bestseller-course { 1075 font-weight: 600; 1076 color: #fff; 1077 white-space: nowrap; 1078} 1079.hot-bestseller-price { 1080 color: #ffaa55; 1081 font-weight: 700; 1082 white-space: nowrap; 1083} 1084/* Phase 11.7 (5/10 owner): bestseller pill restyled to match the 1085 home-demo CTA shape â 8px rounded rect (smaller radius for compact 1086 inline use), gradient, 800 weight. Sized down vs the main .btn-primary 1087 because it lives inside the top-bar slot and can't dominate the row. */ 1088.hot-bestseller-cta { 1089 display: inline-block; 1090 padding: 5px 12px; 1091 margin-left: 4px; 1092 font-size: 0.78rem; 1093 font-weight: 800; 1094 line-height: 1.2; 1095 letter-spacing: 0.01em; 1096 text-decoration: none; 1097 white-space: nowrap; 1098 color: #fff; 1099 background-image: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 1100 background-size: 200% 100%; 1101 background-position: 0% 50%; 1102 border-radius: 8px; 1103 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 1104 transition: background-position 0.35s ease, transform 0.15s ease; 1105} 1106.hot-bestseller-cta:hover, 1107.hot-bestseller-cta:focus { 1108 background-position: 100% 50%; 1109 color: #fff; 1110 text-decoration: none; 1111 transform: translateY(-1px); 1112} 1113 1114@media (max-width: 768px) { 1115 .hot-bestseller-headline { font-size: 0.72rem; } 1116 .hot-bestseller-cta { padding: 3px 10px; font-size: 0.74rem; } 1117} 1118@media (max-width: 480px) { 1119 /* On tight viewports, shed the long course-name copy so the price + 1120 CTA stay readable. */ 1121 .hot-bestseller-course { display: none; } 1122 .hot-bestseller-headline { font-size: 0.7rem; } 1123} 1124 1125/* âââ End of Phase 5 (Track C) additions ââââââââââââââââââââââââââââââ */ 1126
1127/* âââ Phase 6 (Track D): Quickbuy shortcode âââââââââââââââââââââââââââ */ 1128 1129/* Section frame */ 1130.hot-quickbuy { 1131 padding: 3rem 1rem; 1132 background: linear-gradient(180deg, #ffffff 0%, #fff5f0 100%); 1133} 1134.hot-quickbuy-inner { 1135 max-width: 1200px; 1136 margin: 0 auto; 1137 text-align: center; 1138} 1139.hot-quickbuy-title { 1140 font-size: clamp(1.5rem, 4vw, 2.25rem); 1141 font-weight: 800; 1142 color: #1a1a1a; 1143 margin: 0 0 0.5rem; 1144 line-height: 1.15; 1145} 1146.hot-quickbuy-subtitle { 1147 color: #555; 1148 font-size: 1.05rem; 1149 line-height: 1.5; 1150 margin: 0 auto 2rem; 1151 max-width: 620px; 1152} 1153 1154/* Grid â mobile-first: 1 col @ 320px, 2 col @ 375px+, 3 col @ 768px+ */ 1155.hot-quickbuy-grid { 1156 display: grid; 1157 grid-template-columns: 1fr; 1158 gap: 1rem; 1159} 1160@media (min-width: 375px) { 1161 .hot-quickbuy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } 1162} 1163@media (min-width: 768px) { 1164 .hot-quickbuy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } 1165} 1166 1167/* Tile */ 1168.hot-quickbuy-tile { 1169 position: relative; 1170 background: #ffffff; 1171 border: 1px solid rgba(204, 34, 0, 0.12); 1172 border-radius: 14px; 1173 padding: 1.5rem 1.25rem 1.25rem; 1174 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); 1175 display: flex; 1176 flex-direction: column; 1177 text-align: left; 1178 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 1179 min-height: 100%; 1180} 1181.hot-quickbuy-tile:hover { 1182 transform: translateY(-2px); 1183 box-shadow: 0 6px 20px rgba(204, 34, 0, 0.10); 1184 border-color: rgba(204, 34, 0, 0.28); 1185} 1186.hot-quickbuy-tile:focus-within { 1187 outline: 2px solid #cc2200; 1188 outline-offset: 2px; 1189} 1190 1191/* Badge */ 1192.hot-quickbuy-tile-badge { 1193 position: absolute; 1194 top: -10px; 1195 right: 16px; 1196 background: linear-gradient(180deg, #ff6b1a, #cc2200); 1197 color: #ffffff; 1198 font-size: 0.7rem; 1199 font-weight: 700; 1200 padding: 0.25rem 0.65rem; 1201 border-radius: 4px; 1202 text-transform: uppercase; 1203 letter-spacing: 0.05em; 1204 box-shadow: 0 2px 6px rgba(204, 34, 0, 0.25); 1205} 1206 1207/* Body */ 1208.hot-quickbuy-tile-body { flex: 1; } 1209.hot-quickbuy-tile-name { 1210 font-size: 1.15rem; 1211 font-weight: 700; 1212 line-height: 1.3; 1213 margin: 0 0 0.5rem; 1214 color: #1a1a1a; 1215} 1216.hot-quickbuy-tile-meta { 1217 display: flex; 1218 align-items: center; 1219 gap: 0.4rem; 1220 color: #555; 1221 font-size: 0.9rem; 1222 margin-bottom: 1rem; 1223} 1224.hot-quickbuy-tile-icon { 1225 font-size: 1rem; 1226 line-height: 1; 1227} 1228.hot-quickbuy-tile-price { 1229 font-size: 1.85rem; 1230 font-weight: 800; 1231 line-height: 1; 1232 color: #cc2200; 1233 margin: 0 0 1rem; 1234} 1235 1236/* CTA â keeps .btn-primary base styles (Phase 7 fire-glow target) */ 1237.hot-quickbuy-tile-cta { 1238 display: inline-flex; 1239 align-items: center; 1240 justify-content: center; 1241 text-align: center; 1242 width: 100%; 1243 padding: 0.75rem 1rem; 1244 text-decoration: none; 1245 font-weight: 700; 1246 border-radius: 8px; 1247} 1248 1249/* âââ Phase 11.6 (5/9 owner) â multi-select Quick Start ââââââââââââââ 1250 Replaces the per-tile single-CTA layout with a selectable card list + 1251 persistent footer CTA. Owner saw the home-demo's quick-start flow, 1252 liked the concept, asked for the obvious UX win: don't make me close 1253 a dropdown then click a separate button. Cards are always visible, 1254 tap-anywhere toggles selection, footer count + total update live, 1255 the Start Training Now CTA stays in view at the bottom of the 1256 section. JS in includes/quickbuy-shortcode.php handles the click 1257 wiring and the single-vs-multi handoff (single â /go/?course=⦠1258 single-course flow; multi â LMS pricing with comma-joined ?courses=). */ 1259 1260.hot-quickbuy-header { text-align: center; margin-bottom: 1.6rem; } 1261.hot-quickbuy-list { 1262 list-style: none; 1263 margin: 0 auto 1.4rem; 1264 padding: 0; 1265 max-width: 760px; 1266 display: flex; 1267 flex-direction: column; 1268 gap: 0.55rem; 1269} 1270.hot-quickbuy-row { margin: 0; } 1271 1272.hot-quickbuy-card { 1273 display: flex; 1274 align-items: center; 1275 gap: 0.9rem; 1276 width: 100%; 1277 background: #ffffff; 1278 border: 1.5px solid #ececec; 1279 border-radius: 14px; 1280 padding: 0.95rem 1.1rem; 1281 text-align: left; 1282 cursor: pointer; 1283 font: inherit; 1284 color: inherit; 1285 transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; 1286} 1287.hot-quickbuy-card:hover { 1288 border-color: rgba(232, 89, 12, 0.35); 1289 box-shadow: 0 6px 18px rgba(232, 89, 12, 0.08); 1290 transform: translateY(-1px); 1291} 1292.hot-quickbuy-card:focus-visible { 1293 outline: 2px solid #E8590C; 1294 outline-offset: 2px; 1295} 1296.hot-quickbuy-card.is-selected { 1297 border-color: #E8590C; 1298 background: linear-gradient(180deg, #fff7f0 0%, #ffffff 100%); 1299 box-shadow: 0 4px 14px rgba(232, 89, 12, 0.15); 1300} 1301 1302.hot-quickbuy-check { 1303 flex-shrink: 0; 1304 width: 24px; 1305 height: 24px; 1306 border-radius: 7px; 1307 border: 2px solid #d1d5db; 1308 background: #fff; 1309 color: #fff; 1310 display: inline-flex; 1311 align-items: center; 1312 justify-content: center; 1313 transition: background-color 0.18s ease, border-color 0.18s ease; 1314} 1315.hot-quickbuy-check svg { opacity: 0; transition: opacity 0.15s ease; } 1316.hot-quickbuy-card.is-selected .hot-quickbuy-check { 1317 background: #E8590C; 1318 border-color: #E8590C; 1319} 1320.hot-quickbuy-card.is-selected .hot-quickbuy-check svg { opacity: 1; } 1321 1322.hot-quickbuy-card-main { 1323 flex: 1; 1324 display: flex; 1325 flex-direction: column; 1326 gap: 0.25rem; 1327 min-width: 0; 1328} 1329.hot-quickbuy-card-name { 1330 font-size: 1.02rem; 1331 font-weight: 700; 1332 color: #1a1a1a; 1333 line-height: 1.25; 1334} 1335.hot-quickbuy-card-meta { 1336 display: flex; 1337 align-items: center; 1338 flex-wrap: wrap; 1339 gap: 0.5rem 0.85rem; 1340 font-size: 0.83rem; 1341 color: #6b7280; 1342} 1343.hot-quickbuy-meta-item { 1344 display: inline-flex; 1345 align-items: center; 1346 gap: 0.3rem; 1347 line-height: 1; 1348} 1349.hot-quickbuy-meta-item svg { color: #9ca3af; flex-shrink: 0; } 1350.hot-quickbuy-meta-badge { 1351 display: inline-flex; 1352 align-items: center; 1353 background: #fff5ec; 1354 color: #b54708; 1355 font-size: 0.7rem; 1356 font-weight: 700; 1357 padding: 0.2rem 0.55rem; 1358 border-radius: 999px; 1359 text-transform: uppercase; 1360 letter-spacing: 0.04em; 1361} 1362.hot-quickbuy-card-price { 1363 flex-shrink: 0; 1364 font-size: 1.15rem; 1365 font-weight: 800; 1366 color: #111827; 1367 line-height: 1; 1368 margin-left: 0.5rem; 1369} 1370 1371/* Persistent footer â count + total + Start Training Now */ 1372.hot-quickbuy-footer { 1373 max-width: 760px; 1374 margin: 1rem auto 0; 1375 padding: 1rem 1.1rem; 1376 background: #ffffff; 1377 border: 1.5px solid #ececec; 1378 border-radius: 14px; 1379 display: flex; 1380 align-items: center; 1381 justify-content: space-between; 1382 gap: 1rem; 1383 flex-wrap: wrap; 1384 transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; 1385} 1386.hot-quickbuy-footer.is-active { 1387 border-color: rgba(232, 89, 12, 0.4); 1388 background: #fff9f5; 1389 box-shadow: 0 8px 24px rgba(232, 89, 12, 0.10); 1390} 1391.hot-quickbuy-summary { 1392 display: flex; 1393 align-items: baseline; 1394 gap: 0.85rem; 1395 color: #4b5563; 1396 font-size: 0.95rem; 1397} 1398.hot-quickbuy-count { font-weight: 600; } 1399.hot-quickbuy-total { 1400 font-size: 1.4rem; 1401 font-weight: 800; 1402 color: #111827; 1403 letter-spacing: -0.01em; 1404} 1405/* Inherits btn-primary geometry (12px, gradient, 14.5px 800) â only 1406 override what's specific to the footer slot (gap + transition). */ 1407.hot-quickbuy-cta { 1408 display: inline-flex; 1409 align-items: center; 1410 gap: 0.5rem; 1411 text-decoration: none; 1412} 1413.hot-quickbuy-cta.is-disabled { 1414 pointer-events: none; 1415 opacity: 0.45; 1416 filter: grayscale(0.5); 1417 /* No fire-glow / hover energy when there's nothing to start. The 1418 animation pulses, the box-shadow flashes â both read as bait 1419 when the button can't actually be pressed. */ 1420 animation: none !important; 1421 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important; 1422 transform: none !important; 1423} 1424.hot-quickbuy-fineprint { 1425 max-width: 760px; 1426 margin: 0.85rem auto 0; 1427 text-align: center; 1428 color: #6b7280; 1429 font-size: 0.82rem; 1430} 1431 1432@media (max-width: 560px) { 1433 .hot-quickbuy-card { padding: 0.8rem 0.9rem; gap: 0.7rem; } 1434 .hot-quickbuy-card-name { font-size: 0.96rem; } 1435 .hot-quickbuy-card-price { font-size: 1.02rem; } 1436 .hot-quickbuy-footer { padding: 0.85rem 0.95rem; } 1437 .hot-quickbuy-cta { width: 100%; justify-content: center; padding: 0.95rem 1rem; } 1438 .hot-quickbuy-summary { width: 100%; justify-content: space-between; } 1439} 1440
1441/* âââ End of Phase 6 (Track D) additions ââââââââââââââââââââââââââââââ */ 1442 1443/* âââ Phase 7 (Track E): Fire CTA effect âââââââââââââââââââââââââââââ 1444 Phase 11.6 (5/9 owner): asymmetric "heat rises" box-shadow stack 1445 reads as too punchy / too literal next to the home-demo's softer 1446 atmospheric halo. Rebuilt to mirror the home-demo `.hlh-btn--fire` 1447 approach â gentle pulsing box-shadow on the button itself, plus two 1448 blurred pseudo-elements behind it (::before with the warm gradient 1449 blurred 14px, ::after a radial flame-orange falloff blurred 16px). 1450 The pseudos sit at z-index -1 so they create a real halo around the 1451 button instead of just shadow underneath. Pill radius preserved 1452 (it's the brand) â the pseudo-elements inherit the radius so the 1453 halo follows the button shape. */ 1454 1455@keyframes hot-fire-glow { 1456 0%, 100% { 1457 box-shadow: 1458 0 0 0 0 rgba(234, 42, 41, 0.22), 1459 0 6px 18px rgba(229, 145, 57, 0.22), 1460 0 10px 28px rgba(234, 102, 41, 0.18); 1461 } 1462 50% { 1463 box-shadow: 1464 0 0 0 2px rgba(234, 42, 41, 0.30), 1465 0 8px 24px rgba(229, 145, 57, 0.34), 1466 0 14px 38px rgba(234, 102, 41, 0.32); 1467 } 1468} 1469 1470@keyframes hot-fire-flicker { 1471 0%, 100% { opacity: 0.35; transform: scale(1); } 1472 40% { opacity: 0.55; transform: scale(1.02); } 1473 60% { opacity: 0.42; transform: scale(0.99); } 1474} 1475 1476.btn-primary, 1477.nav-cta, 1478.hero-cta-primary, 1479.hot-bestseller-cta, 1480.hot-quickbuy-cta, 1481.hot-quickbuy-tile-cta { 1482 position: relative; 1483 animation: hot-fire-glow 2.6s ease-in-out infinite; 1484 will-change: box-shadow; 1485 isolation: isolate; 1486} 1487 1488/* The actual halo â two blurred layers sit behind the button (z-index 1489 -1) to create soft warm light bleeding past the edges. Inherits 1490 border-radius so a pill button gets a pill-shaped halo. */ 1491.btn-primary::before, 1492.nav-cta::before, 1493.hero-cta-primary::before, 1494.hot-bestseller-cta::before, 1495.hot-quickbuy-cta::before, 1496.hot-quickbuy-tile-cta::before, 1497.btn-primary::after, 1498.nav-cta::after, 1499.hero-cta-primary::after, 1500.hot-bestseller-cta::after, 1501.hot-quickbuy-cta::after, 1502.hot-quickbuy-tile-cta::after { 1503 content: ""; 1504 position: absolute; 1505 border-radius: inherit; 1506 pointer-events: none; 1507 z-index: -1; 1508} 1509.btn-primary::before, 1510.nav-cta::before, 1511.hero-cta-primary::before, 1512.hot-bestseller-cta::before, 1513.hot-quickbuy-cta::before, 1514.hot-quickbuy-tile-cta::before { 1515 inset: -2px; 1516 background: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 1517 filter: blur(14px); 1518 opacity: 0.55; 1519 animation: hot-fire-flicker 3.2s ease-in-out infinite; 1520} 1521.btn-primary::after, 1522.nav-cta::after, 1523.hero-cta-primary::after, 1524.hot-bestseller-cta::after, 1525.hot-quickbuy-cta::after, 1526.hot-quickbuy-tile-cta::after { 1527 inset: -6px; 1528 background: radial-gradient(closest-side, rgba(234, 102, 41, 0.45), transparent 70%); 1529 filter: blur(16px); 1530 opacity: 0.35; 1531 animation: hot-fire-flicker 4.5s ease-in-out infinite reverse; 1532} 1533 1534.btn-primary:hover, 1535.nav-cta:hover, 1536.hero-cta-primary:hover, 1537.hot-bestseller-cta:hover, 1538.hot-quickbuy-cta:not(.is-disabled):hover, 1539.hot-quickbuy-tile-cta:hover { 1540 box-shadow: 1541 0 0 0 2px rgba(234, 42, 41, 0.40), 1542 0 10px 28px rgba(229, 145, 57, 0.42), 1543 0 18px 44px rgba(234, 102, 41, 0.40); 1544} 1545.btn-primary:hover::before, 1546.nav-cta:hover::before, 1547.hero-cta-primary:hover::before, 1548.hot-bestseller-cta:hover::before, 1549.hot-quickbuy-cta:not(.is-disabled):hover::before, 1550.hot-quickbuy-tile-cta:hover::before { opacity: 0.78; } 1551.btn-primary:hover::after, 1552.nav-cta:hover::after, 1553.hero-cta-primary:hover::after, 1554.hot-bestseller-cta:hover::after, 1555.hot-quickbuy-cta:not(.is-disabled):hover::after, 1556.hot-quickbuy-tile-cta:hover::after { opacity: 0.55; } 1557 1558/* The disabled multi-select CTA still sits in the layout â kill the 1559 halo + flicker so the page doesn't pulse a button the user can't use. */ 1560.hot-quickbuy-cta.is-disabled::before, 1561.hot-quickbuy-cta.is-disabled::after { display: none; } 1562 1563@media (prefers-reduced-motion: reduce) { 1564 .btn-primary, 1565 .nav-cta, 1566 .hero-cta-primary, 1567 .hot-bestseller-cta, 1568 .hot-quickbuy-cta, 1569 .hot-quickbuy-tile-cta { 1570 animation: none; 1571 box-shadow: 1572 0 6px 18px rgba(229, 145, 57, 0.22), 1573 0 10px 28px rgba(234, 102, 41, 0.18); 1574 } 1575 .btn-primary::before, 1576 .btn-primary::after, 1577 .nav-cta::before, 1578 .nav-cta::after, 1579 .hero-cta-primary::before, 1580 .hero-cta-primary::after, 1581 .hot-bestseller-cta::before, 1582 .hot-bestseller-cta::after, 1583 .hot-quickbuy-cta::before, 1584 .hot-quickbuy-cta::after, 1585 .hot-quickbuy-tile-cta::before, 1586 .hot-quickbuy-tile-cta::after { animation: none; } 1587} 1588 1589/* âââ End of Phase 7 (Track E) additions ââââââââââââââââââââââââââââââ */ 1590 1591/* âââ Phase 10 (Block C) â archive page polish ââââââââââââââââââââââââ */ 1592 1593/* Bestseller "Most Popular" corner badge on the archive course card. 1594 Reuses the visual language of the singular-page .hot-bestseller-headline 1595 pill â tomato-red gradient, uppercase, letterspaced â so the bestseller 1596 identity reads consistently across surfaces. Positioned absolute inside 1597 the .course-card (which is already position: relative). */ 1598.course-card.hot-archive-card--bestseller { 1599 /* Tomato-tint ring so the bestseller card is recognizable even 1600 before the eye lands on the badge. Border thickens on hover via 1601 the base .course-card:hover rule (no override needed). */ 1602 border-color: rgba(232, 89, 12, 0.45); 1603 box-shadow: 0 4px 18px rgba(232, 89, 12, 0.08); 1604} 1605 1606.hot-archive-bestseller-badge { 1607 position: absolute; 1608 top: 12px; 1609 right: 12px; 1610 z-index: 2; 1611 display: inline-flex; 1612 align-items: center; 1613 gap: 4px; 1614 padding: 4px 9px; 1615 border-radius: 100px; 1616 background: linear-gradient(135deg, #E8590C 0%, #CC2200 100%); 1617 color: #fff; 1618 text-transform: uppercase; 1619 letter-spacing: 0.06em; 1620 font-size: 0.7rem; 1621 font-weight: 800; 1622 line-height: 1; 1623 box-shadow: 0 2px 8px rgba(204, 34, 0, 0.3); 1624 pointer-events: none; 1625} 1626 1627.hot-archive-bestseller-badge-flame {
1628 font-size: 0.85rem; 1629 line-height: 1; 1630} 1631 1632.hot-archive-bestseller-badge-text { 1633 white-space: nowrap; 1634} 1635 1636/* Mobile: 480px-and-down â slightly smaller pill so it doesn't 1637 collide with the green .course-card-badge on narrow cards. */ 1638@media (max-width: 480px) { 1639 .hot-archive-bestseller-badge { 1640 top: 10px; 1641 right: 10px; 1642 padding: 3px 8px; 1643 font-size: 0.65rem; 1644 letter-spacing: 0.05em; 1645 } 1646 .hot-archive-bestseller-badge-flame { 1647 font-size: 0.78rem; 1648 } 1649} 1650 1651/* Tiny phone: 380px-and-down â drop the flame to keep the pill tight. */ 1652@media (max-width: 380px) { 1653 .hot-archive-bestseller-badge-flame { 1654 display: none; 1655 } 1656} 1657 1658/* âââ End of Phase 10 (Block C) additions ââââââââ */ 1659 1660/* âââ Phase 10 (Block D) â variant picker modal âââââââââââââââââââââââ 1661 Lightweight modal shown when a user clicks a parent-slug CTA whose 1662 course param matches a registered variant group. Mobile-first, uses 1663 .btn-primary on the option buttons so the fire-glow animation applies 1664 for free. Namespaced .hot-variant-* â collision-safe. 1665 âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1666 1667.hot-variant-picker[hidden] { 1668 display: none; 1669} 1670 1671.hot-variant-picker { 1672 position: fixed; 1673 inset: 0; 1674 z-index: 100000; /* above WP admin bar (~99999) and theme nav */ 1675 display: flex; 1676 align-items: center; 1677 justify-content: center; 1678 padding: 16px; 1679 box-sizing: border-box; 1680} 1681 1682.hot-variant-picker-backdrop { 1683 position: absolute; 1684 inset: 0; 1685 background: rgba(12, 12, 14, 0.72); 1686 backdrop-filter: blur(2px); 1687 -webkit-backdrop-filter: blur(2px); 1688 cursor: pointer; 1689} 1690 1691.hot-variant-picker-card { 1692 position: relative; 1693 z-index: 1; 1694 width: 100%; 1695 max-width: 440px; 1696 background: #ffffff; 1697 color: #1a1a1a; 1698 border-radius: 14px; 1699 box-shadow: 1700 0 16px 48px rgba(0, 0, 0, 0.32), 1701 0 4px 12px rgba(0, 0, 0, 0.18); 1702 padding: 26px 22px 22px; 1703 box-sizing: border-box; 1704 /* No transform/transition â sub-200ms instant open per spec. */ 1705} 1706 1707.hot-variant-picker-close { 1708 position: absolute; 1709 top: 8px; 1710 right: 10px; 1711 width: 36px; 1712 height: 36px; 1713 border: 0; 1714 background: transparent; 1715 color: #666; 1716 font-size: 26px; 1717 line-height: 1; 1718 cursor: pointer; 1719 border-radius: 8px; 1720 padding: 0; 1721} 1722.hot-variant-picker-close:hover, 1723.hot-variant-picker-close:focus-visible { 1724 color: #111; 1725 background: rgba(0, 0, 0, 0.06); 1726 outline: none; 1727} 1728 1729.hot-variant-picker-title { 1730 margin: 0 32px 6px 0; 1731 font-size: 1.25rem; 1732 line-height: 1.25; 1733 font-weight: 700; 1734 color: #111; 1735} 1736 1737.hot-variant-picker-sub { 1738 margin: 0 0 18px; 1739 font-size: 0.92rem; 1740 line-height: 1.45; 1741 color: #555; 1742} 1743 1744.hot-variant-picker-options { 1745 display: flex; 1746 flex-direction: column; 1747 gap: 10px; 1748} 1749 1750/* Phase 11.1 (5/8 owner): variant-picker rows ported to the /pricing 1751 black-and-white aesthetic (hot-fix VariantPickerModal.vue.phd-variant-row). 1752 Default-pick shows a subtle warm aura without a "Recommended" badge â 1753 highlight does the same job. The .btn-primary class still rides on 1754 each row for keyboard / focus parity, but every brand-red surface is 1755 overridden so the modal reads neutral. */ 1756/* Phase 11.7 (5/10 owner): variant-picker rows MUST stay black-and- 1757 white like the /pricing modal â even though they ride on .btn-primary 1758 for keyboard parity. After the v1.5.7/1.5.8 .btn-primary rebuild 1759 (warm gradient, white text, fire halo, text-shadow), each !important 1760 on btn-primary started bleeding through here and the rows turned 1761 orange-glowy. Override every brand-red surface explicitly: 1762 background-image, gradient, color, text-shadow, and the ::before / 1763 ::after fire-halo pseudos. */ 1764.hot-variant-picker .hot-variant-option { 1765 width: 100%; 1766 display: grid; 1767 grid-template-columns: 1fr auto; 1768 align-items: center; 1769 gap: 14px; 1770 padding: 12px 14px; 1771 font-size: 0.95rem; 1772 font-weight: 600; 1773 letter-spacing: normal; 1774 text-align: left; 1775 border: 1px solid rgba(37, 37, 37, 0.10); 1776 border-radius: 10px; 1777 background: #ffffff !important; 1778 background-image: none !important; 1779 color: #1a1a1a !important; 1780 text-shadow: none !important; 1781 cursor: pointer; 1782 transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; 1783 box-shadow: none !important; 1784 animation: none !important; 1785 transform: none !important; 1786} 1787.hot-variant-picker .hot-variant-option::before, 1788.hot-variant-picker .hot-variant-option::after { 1789 /* No fire halo on the modal options â they're a neutral chooser, 1790 not a CTA. Keeps the modal reading like the pricing-page picker. */ 1791 display: none !important; 1792} 1793.hot-variant-picker .hot-variant-option:hover { 1794 border-color: rgba(37, 37, 37, 0.28); 1795 background: #fafafa !important; 1796 color: #1a1a1a !important; 1797 box-shadow: none !important; 1798} 1799.hot-variant-picker .hot-variant-option.is-recommended { 1800 border-color: rgba(254, 103, 44, 0.55); 1801 background: linear-gradient(180deg, #fff8f4 0%, #ffffff 100%); 1802 box-shadow: 0 0 0 3px rgba(254, 103, 44, 0.10), 0 4px 10px rgba(254, 103, 44, 0.18); 1803} 1804 1805.hot-variant-picker .hot-variant-option-label { 1806 flex: 1 1 auto; 1807 min-width: 0; 1808 font-weight: 700; 1809 font-size: 0.95rem; 1810 line-height: 1.2; 1811 color: #1a1a1a; 1812} 1813 1814/* Badge slot is hidden â the warm aura on .is-recommended carries the 1815 same signal without any editorial label. Kept the rule available for 1816 per-variant meta lines (state, jurisdiction). */ 1817.hot-variant-picker .hot-variant-option-badge { 1818 display: inline-block; 1819 padding: 0; 1820 margin: 0; 1821 background: transparent; 1822 border: 0; 1823 border-radius: 0; 1824 font-size: 0.78rem; 1825 font-weight: 600; 1826 text-transform: none; 1827 letter-spacing: 0; 1828 color: #777; 1829 white-space: nowrap; 1830} 1831 1832/* Lock background scroll while modal is open. */ 1833body.hot-variant-picker-open { 1834 overflow: hidden; 1835} 1836 1837/* Tablet+: a hair more breathing room. */ 1838@media (min-width: 480px) { 1839 .hot-variant-picker-card { 1840 padding: 30px 28px 26px; 1841 } 1842 .hot-variant-picker-title { 1843 font-size: 1.4rem; 1844 } 1845} 1846 1847/* Reduced motion: card already has no entry animation, but disable 1848 any inherited fire-glow flicker on the options for users who opted 1849 out. They still see the recommendation badge + brand color. */ 1850@media (prefers-reduced-motion: reduce) { 1851 .hot-variant-picker .hot-variant-option { 1852 animation: none; 1853 } 1854} 1855 1856/* âââ End of Phase 10 (Block D) additions ââââââââ */ 1857 1858 1859/* âââ Phase 11 (5/4 + 5/6 UAT) additions ââââââââââââââââââââââââââââââ 1860 - .trust-row: relocated trust badges to live below the logos bar 1861 instead of inside the hero. Keeps social proof intact but clears 1862 the hero CTA so it lands above the fold on common laptop sizes. 1863 - .hot-trust-badge--lang: globe-emoji multilingual line owner asked 1864 for. Same pill styling so it sits naturally with the rest of the 1865 row. 1866 - .hot-account-toggle: Individual / Company segmented control that 1867 mirrors the /pricing tab pattern. Drives data-account on <body> 1868 so price prefix + CTA URL params react without a server round-trip. 1869 - .hero-price-row.is-company: shows the bulk-tier "Starting at" 1870 price; .is-individual: drops the prefix and shows fixed price. */ 1871 1872/* Phase 11.1 (5/8 owner): trust-row was too tight at 22px; owner asked 1873 for proper section margin/padding so it reads as its own band. */ 1874.trust-row { 1875 background: #f8f9fa; 1876 padding: 56px 0; 1877 border-bottom: 1px solid #eee; 1878} 1879.trust-row .container { display: flex; justify-content: center; } 1880.trust-row-badges { 1881 margin: 0 !important; 1882 flex-wrap: wrap; 1883 justify-content: center; 1884 gap: 10px 14px; 1885} 1886.hot-trust-badge--lang { 1887 background: rgba(232, 89, 12, 0.08) !important; 1888 border-color: rgba(232, 89, 12, 0.30) !important; 1889 color: #b34812 !important; 1890 font-weight: 600 !important; 1891} 1892@media (max-width: 560px) { 1893 .trust-row { padding: 16px 0; } 1894 .trust-row-badges { gap: 8px 10px; } 1895 .trust-row-badges .hot-trust-badge { font-size: 0.78rem; padding: 0.32rem 0.7rem; } 1896} 1897 1898/* Account toggle (Individual / Company) âââââââââââââââââââââââââââââââ */ 1899/* Phase 11.8 (5/10 owner): toggle pulled INTO the hero â the standalone 1900 band below the nav was eating ~44px of above-the-fold space and 1901 reading as a separate section. Now the toggle sits as the first 1902 element inside the hero content (mirrors the home-demo .hlh-switch 1903 placement above the H1) so the CTA stays above the fold on common 1904 laptop sizes. The .hero-toggle-wrap controls placement; the 1905 .hot-account-toggle pill itself keeps its v1.5.6 dark-sliding- 1906 indicator design. The legacy .hot-account-toggle-band selector is 1907 retained as display:none so old caches that still emit the band 1908 markup collapse silently. */ 1909.hot-account-toggle-band, 1910.hot-account-toggle-band-inner, 1911.hot-account-toggle-prefix { display: none !important; } 1912 1913.hero-toggle-wrap { 1914 margin: 0 0 14px; 1915 display: flex; 1916 align-items: center; 1917} 1918.hero--certified-dark .hero-toggle-wrap, 1919.hero-inner .hero-toggle-wrap { justify-content: center; }
1920/* Color the toggle rail for the dark hero so it doesn't read white-on- 1921 black bonded onto the wrong palette. */ 1922.hero--certified-dark .hot-account-toggle, 1923.hero--grid-dark .hot-account-toggle { 1924 background: rgba(255, 255, 255, 0.08); 1925 border-color: rgba(255, 255, 255, 0.16); 1926} 1927.hero--certified-dark .hot-account-toggle-btn, 1928.hero--grid-dark .hot-account-toggle-btn { color: rgba(255, 255, 255, 0.65); } 1929.hero--certified-dark .hot-account-toggle-btn:hover, 1930.hero--grid-dark .hot-account-toggle-btn:hover { color: #fff; } 1931/* Phase 11.6 (5/9 owner): toggle restyled to match the home-demo 1932 .hlh-switch â dark sliding indicator on a light gray pill rail. 1933 Reads as a deliberate segmented control instead of an active-button 1934 highlight; matches the visual weight of the rest of the home-demo 1935 page so landing-page hero feels in-family with the new homepage. */ 1936.hot-account-toggle { 1937 position: relative; 1938 display: inline-flex; 1939 background: #f3f4f6; 1940 border: 1px solid #e5e7eb; 1941 border-radius: 999px; 1942 padding: 4px; 1943 gap: 0; 1944 isolation: isolate; 1945} 1946.hot-account-toggle::before { 1947 content: ""; 1948 position: absolute; 1949 top: 4px; 1950 bottom: 4px; 1951 left: 4px; 1952 width: calc(50% - 4px); 1953 background: #0f1115; 1954 border-radius: 999px; 1955 box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45); 1956 transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); 1957 z-index: 0; 1958} 1959body[data-account="company"] .hot-account-toggle::before { 1960 transform: translateX(100%); 1961} 1962.hot-account-toggle-btn { 1963 position: relative; 1964 z-index: 1; 1965 appearance: none; 1966 border: 0; 1967 background: transparent; 1968 cursor: pointer; 1969 font: inherit; 1970 font-weight: 700; 1971 font-size: 0.8125rem; 1972 color: #525866; 1973 padding: 0.5rem 1.1rem; 1974 border-radius: 999px; 1975 transition: color 0.18s ease; 1976 line-height: 1.1; 1977 min-width: 96px; 1978 text-align: center; 1979} 1980.hot-account-toggle-btn:hover { color: #111; } 1981.hot-account-toggle-btn[aria-pressed="true"] { 1982 color: #fff; 1983} 1984.hot-account-toggle-btn:focus-visible { 1985 outline: 2px solid #E8590C; 1986 outline-offset: 4px; 1987} 1988@media (max-width: 560px) { 1989 .hero-toggle-wrap { margin-bottom: 10px; } 1990 .hot-account-toggle-btn { font-size: 0.78rem; padding: 0.45rem 0.85rem; min-width: 84px; } 1991} 1992 1993/* Hide the company-only price prefix until JS flips data-account. 1994 Default state mirrors what the server rendered (Individual = fixed). */ 1995body[data-account="individual"] .hot-price-prefix { display: none; } 1996body[data-account="company"] .hot-price-prefix { display: inline; } 1997body[data-account="company"] .hero-price::before { content: "Starting at "; font-size: 0.55em; font-weight: 600; opacity: 0.72; margin-right: 0.35rem; vertical-align: 0.2em; } 1998 1999/* Per-toggle H1 copy (Phase 11.1, 5/8 owner). Both spans render server- 2000 side; CSS hides the inactive one. JS toggle handler updates the 2001 aria-hidden attribute alongside the data-account flip so screen 2002 readers only ever announce the active variant. */ 2003.hero-h1-individual, 2004.hero-h1-company { display: inline; } 2005body[data-account="individual"] .hero-h1-company { display: none; } 2006body[data-account="company"] .hero-h1-individual { display: none; } 2007 2008/* âââ End of Phase 11 additions ââââââââââââââââââââââââââââââââââââ */ 2009 2010/* âââ Phase 12 â audience-aware hero copy ââââââââââââââââââââââââââââ 2011 Eric feedback 2026-05-11 pt.2. Hero pill, subtext, CTA label, and 2012 price all swap with the Individual / Company toggle. Both spans 2013 render server-side; CSS hides the inactive variant via 2014 body[data-account]. Toggle JS updates aria-hidden in lockstep so 2015 screen readers only announce the active variant. 2016 2017 The hero pill is also the "secondary breadcrumb" Eric called out â it 2018 no longer surfaces stale state-approval labels like NY ATAP APPROVED. 2019 Instead, defaults to a duration + instant-cert pill for individuals 2020 and an audit-ready oversight pill for companies. */ 2021 2022/* Pill */ 2023.hero-badge-individual, 2024.hero-badge-company { display: inline-flex; align-items: center; gap: 8px; } 2025body[data-account="individual"] .hero-badge-company { display: none; } 2026body[data-account="company"] .hero-badge-individual { display: none; } 2027 2028/* Subtext */ 2029.subtext-individual, 2030.subtext-company { display: inline; } 2031body[data-account="individual"] .subtext-company { display: none; } 2032body[data-account="company"] .subtext-individual { display: none; } 2033 2034/* CTA label */ 2035.cta-label-individual, 2036.cta-label-company { display: inline; } 2037body[data-account="individual"] .cta-label-company { display: none; } 2038body[data-account="company"] .cta-label-individual { display: none; } 2039 2040/* Price â only swap if the page actually rendered a company price span. 2041 Courses without a company price keep showing the individual figure on 2042 both modes (safe fallback). */ 2043.hero-price-individual, 2044.hero-price-company { display: inline; } 2045body[data-account="individual"] .hero-price-company { display: none; } 2046body[data-account="company"] .hero-price-individual { display: none; } 2047/* Company-mode "Starting at " prefix (existing behaviour from Phase 11) 2048 still applies via .hero-price::before â see the rule earlier in this 2049 file. The /mo suffix sits next to the dollar value. */ 2050.hero-price-company-suffix { 2051 font-size: 0.4em; 2052 font-weight: 600; 2053 opacity: 0.72; 2054 margin-left: 0.25rem; 2055 vertical-align: 0.2em; 2056} 2057 2058/* âââ Phase 12 â pre-checkout modal (both modes) âââââââââââââââââââââ 2059 Fires on any primary /go/ CTA click. Company mode shows all three
2060 sections (employees + locations, LMS or license-our-content, 2061 this-course-only or 1-of-3 bundles). Individual mode shows only the 2062 bundle section â others are hidden via [data-precheckout-mode="company"] 2063 below. Modal posts choices to /go/?... so the LMS pricing page can 2064 auto-fill. */ 2065body[data-account="individual"] .hot-precheckout-section[data-precheckout-mode="company"] { display: none; } 2066body[data-account="individual"] .hot-precheckout-title-company, 2067body[data-account="individual"] .hot-precheckout-lead-company, 2068body[data-account="individual"] .hot-precheckout-section-title-company { display: none; } 2069body[data-account="company"] .hot-precheckout-title-individual, 2070body[data-account="company"] .hot-precheckout-lead-individual, 2071body[data-account="company"] .hot-precheckout-section-title-individual { display: none; } 2072 2073.hot-precheckout-backdrop { 2074 position: fixed; inset: 0; 2075 background: rgba(15, 15, 20, 0.72); 2076 z-index: 9000; 2077 display: none; 2078 align-items: center; justify-content: center; 2079 padding: 16px; 2080} 2081.hot-precheckout-backdrop.is-open { display: flex; } 2082.hot-precheckout-modal { 2083 background: #fff; 2084 border-radius: 16px; 2085 box-shadow: 0 24px 64px rgba(0,0,0,0.32); 2086 width: 100%; max-width: 560px; 2087 max-height: calc(100vh - 32px); 2088 overflow-y: auto; 2089 padding: 28px 28px 22px; 2090 position: relative; 2091} 2092.hot-precheckout-modal h2 { 2093 margin: 0 0 6px; 2094 font-size: 1.35rem; 2095 font-weight: 700; 2096 color: #111; 2097} 2098.hot-precheckout-modal p.hot-precheckout-lead { 2099 margin: 0 0 18px; 2100 color: #555; 2101 font-size: 0.92rem; 2102} 2103.hot-precheckout-close { 2104 position: absolute; top: 14px; right: 14px; 2105 background: transparent; border: 0; cursor: pointer; 2106 width: 32px; height: 32px; 2107 display: inline-flex; align-items: center; justify-content: center; 2108 border-radius: 50%; 2109 color: #666; 2110} 2111.hot-precheckout-close:hover { background: rgba(0,0,0,0.06); color: #111; } 2112 2113.hot-precheckout-section { 2114 margin: 18px 0; 2115 padding: 0 0 16px; 2116 border-bottom: 1px solid #eee; 2117} 2118.hot-precheckout-section:last-of-type { border-bottom: 0; padding-bottom: 0; } 2119.hot-precheckout-section-title { 2120 font-size: 0.78rem; 2121 font-weight: 700; 2122 letter-spacing: 0.06em; 2123 text-transform: uppercase; 2124 color: #666; 2125 margin: 0 0 10px; 2126} 2127 2128.hot-precheckout-fields { 2129 display: grid; 2130 grid-template-columns: 1fr 1fr; 2131 gap: 10px; 2132} 2133.hot-precheckout-field label { 2134 display: block; 2135 font-size: 0.78rem; 2136 color: #444; 2137 margin-bottom: 4px; 2138} 2139.hot-precheckout-field input[type="number"] { 2140 width: 100%; 2141 padding: 10px 12px; 2142 border: 1px solid #d8d8d8; 2143 border-radius: 8px; 2144 font-size: 0.95rem; 2145 font-family: inherit; 2146} 2147.hot-precheckout-field input[type="number"]:focus { 2148 outline: none; 2149 border-color: #CC2200; 2150 box-shadow: 0 0 0 3px rgba(204,34,0,0.12); 2151} 2152 2153.hot-precheckout-choices { 2154 display: grid; gap: 8px; 2155} 2156.hot-precheckout-choice { 2157 border: 1.5px solid #e5e5e5; 2158 border-radius: 10px; 2159 padding: 12px 14px; 2160 cursor: pointer; 2161 transition: border-color 0.12s, background 0.12s; 2162 display: flex; align-items: center; gap: 10px; 2163 background: #fff; 2164} 2165.hot-precheckout-choice:hover { border-color: #bbb; } 2166.hot-precheckout-choice input { margin: 0; accent-color: #CC2200; } 2167.hot-precheckout-choice.is-selected { 2168 border-color: #CC2200; 2169 background: rgba(204,34,0,0.04); 2170} 2171.hot-precheckout-choice-label { font-weight: 600; color: #222; font-size: 0.92rem; } 2172.hot-precheckout-choice-desc { font-size: 0.78rem; color: #666; margin-top: 2px; } 2173.hot-precheckout-choice-body { flex: 1; } 2174 2175.hot-precheckout-footer { 2176 margin-top: 18px; 2177 display: flex; gap: 10px; justify-content: flex-end; 2178 flex-wrap: wrap; 2179} 2180.hot-precheckout-footer .btn-primary, 2181.hot-precheckout-footer .btn-ghost { 2182 /* Inherit existing button styles â no overrides needed. */ 2183} 2184 2185@media (max-width: 600px) { 2186 .hot-precheckout-fields { grid-template-columns: 1fr; } 2187 .hot-precheckout-modal { padding: 22px 18px 16px; border-radius: 12px; } 2188} 2189/* âââ End of Phase 12 additions ââââââââââââââââââââââââââââââââââââ */ 2190 2191 </style> 2192 <!-- Google Ads (gtag.js) -->
vendor: 68 bytes, lines 2192-2193
2192 2193 <script async src="https://www.googletagmanager.com/gtag/js?id=
2193AW-754017760
vendor: 16 bytes, lines 2193-2194
2193"></script> 2194
2194<script>
vendor: 118 bytes, line 2194
2194window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','
2194AW-754017760
vendor: 3 bytes, line 2194
2194');
2194</script>
2194 2195<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> 2196 2197 <!-- This site is optimized with the Yoast SEO plugin v28.5 - https://yoast.com/product/yoast-seo-wordpress/ --> 2198 <title>Alcohol Server Training - Home of Training</title> 2199 <meta name="description" content="Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques." /> 2200 <link rel="canonical" href="https://homeoftraining.com/courses/alcohol-server-training" /> 2201 <meta property="og:locale" content="en_US" /> 2202 <meta property="og:type" content="article" /> 2203 <meta property="og:title" content="Alcohol Server Training - Home of Training" /> 2204 <meta property="og:description" content="Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques." /> 2205 <meta property="og:url" content="https://homeoftraining.com/courses/alcohol-server-training" /> 2206 <meta property="og:site_name" content="Home of Training" /> 2207 <meta property="article:modified_time" content="2026-05-08T11:37:12+00:00" /> 2208 <meta name="twitter:card" content="summary_large_image" /> 2209 <meta name="twitter:description" content="Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques." /> 2210 <meta name="twitter:image" content="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/hot-logo.png" /> 2211 <meta name="twitter:label1" content="Est. reading time" /> 2212 <meta name="twitter:data1" content="2 minutes" /> 2213
2213<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training","url":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training","name":"Alcohol Server Training - Home of Training","isPartOf":{"@id":"https:\/\/homeoftraining.com\/#website"},"datePublished":"2026-04-15T19:26:02+00:00","dateModified":"2026-05-08T11:37:12+00:00","breadcrumb":{"@id":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homeoftraining.com\/courses\/alcohol-server-training"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/homeoftraining.com\/courses\/alcohol-server-training#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/homeoftraining.com\/"},{"@type":"ListItem","position":2,"name":"Courses","item":"https:\/\/homeoftraining.com\/courses"},{"@type":"ListItem","position":3,"name":"Alcohol Server Training"}]},{"@type":"WebSite","@id":"https:\/\/homeoftraining.com\/#website","url":"https:\/\/homeoftraining.com\/","name":"Home of Training","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/homeoftraining.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}</script>
2213 2214 <!-- / Yoast SEO plugin. --> 2215 2216 2217<link rel="alternate" type="application/rss+xml" title="Home of Training » Feed" href="https://homeoftraining.com/feed" /> 2218<link rel="alternate" type="application/rss+xml" title="Home of Training » Comments Feed" href="https://homeoftraining.com/comments/feed" /> 2219<link rel='stylesheet' id='hot-landing-page-css' href='https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/css/landing-page.css?ver=1.7.3' media='all' /> 2220<link rel='stylesheet' id='elementor-gf-plusjakartasans-css' href='https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap' media='all' /> 2221<link rel='stylesheet' id='elementor-gf-inter-css' href='https://fonts.googleapis.com/css?family=Inter:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap' media='all' /> 2222<link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://homeoftraining.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' media='all' /> 2223<link rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://homeoftraining.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=5.15.3' media='all' /> 2224<link rel='stylesheet' id='elementor-icons-ekiticons-css' href='https://homeoftraining.com/wp-content/plugins/elementskit-lite/modules/elementskit-icon-pack/assets/css/ekiticons.css?ver=4.0.6' media='all' /> 2225 <!-- Google Ads (gtag.js) -->
vendor: 67 bytes, lines 2225-2226
2225 2226 <script async src="https://www.googletagmanager.com/gtag/js?id=
2226AW-754017760
vendor: 15 bytes, lines 2226-2227
2226"></script> 2227
2227<script> 2228
vendor: 142 bytes, lines 2228-2231
2228window.dataLayer = window.dataLayer || []; 2229 function gtag(){dataLayer.push(arguments);} 2230 gtag('js', new Date()); 2231 gtag('config', '
2231AW-754017760
vendor: 7 bytes, lines 2231-2232
2231'); 2232
2232</script>
2232<script type="text/javascript"> 2233_linkedin_partner_id = "6620370"; 2234window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; 2235window._linkedin_data_partner_ids.push(_linkedin_partner_id); 2236</script>
2236<script type="text/javascript"> 2237(function(l) { 2238if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; 2239window.lintrk.q=[]} 2240var s = document.getElementsByTagName("script")[0]; 2241var b = document.createElement("script"); 2242b.type = "text/javascript";b.async = true; 2243b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; 2244s.parentNode.insertBefore(b, s);})(window.lintrk); 2245</script>
2245 2246<noscript> 2247<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=6620370&fmt=gif" /> 2248</noscript> 2249 2250 2251<!-- Google tag (gtag.js) -->
vendor: 64 bytes, line 2251
2251 <script async src="https://www.googletagmanager.com/gtag/js?id=
2251AW-16741931865
vendor: 12 bytes, line 2251
2251"></script>
2251<script>
vendor: 127 bytes, line 2251
2251window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '
2251AW-16741931865
vendor: 4 bytes, line 2251
2251');
2251</script>
2251<!-- start Simple Custom CSS and JS -->
2252<script>
vendor: 340 bytes, lines 2252-2257
2252 2253 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 2254 new Date().getTime(),event:'gtm.js'});var 2255 f=d.getElementsByTagName(s)[0], 2256 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 2257 })(window,document,'script','dataLayer','
2257GTM-WKTP8H9V
vendor: 3 bytes, line 2257
2257');
2257</script>
2257 2258<!-- end Simple Custom CSS and JS --> 2259 2260<link rel='stylesheet' id='26189-css' href='//homeoftraining.com/wp-content/uploads/custom-css-js/26189.css?v=5076' media='all' /> 2261<!-- start Simple Custom CSS and JS --> 2262<style> 2263ul.course-list { 2264 list-style: none; 2265 padding: 0; 2266 margin: 0; 2267 display: grid; 2268 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 2269 gap: 10px; 2270 } 2271 2272.search-bar { 2273 margin: 20px 0px; 2274} 2275 2276.no-results-section { 2277 display:none; 2278} 2279.course-section .course-list li { 2280 display: flex; 2281 align-items: center; 2282 gap: 10px; 2283} 2284 .searchable-course-div { 2285 display: flex; 2286 flex-direction: column; 2287 gap: 25px; 2288 } 2289 2290 @media (max-width: 768px) { 2291 .searchable-course-div { 2292 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 2293 } 2294 } 2295 2296 @media (max-width: 480px) { 2297 .searchable-course-div { 2298 grid-template-columns: 1fr; /* 1 item per row on mobile */ 2299 } 2300 } 2301 2302 .single-list-grid-css { 2303 display: grid; 2304 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 2305 gap: 10px; 2306 }</style> 2307<!-- end Simple Custom CSS and JS --> 2308<!-- start Simple Custom CSS and JS --> 2309<style> 2310li#menu-item-25788, li#menu-item-25789 { 2311 display: none; 2312} 2313 2314@media only screen and (max-width: 1000px) { 2315li#menu-item-25788, li#menu-item-25789 { 2316 display: inline-block; 2317 background: black; 2318 border-radius: 5px; 2319 width: max-content; 2320 color: white; 2321 padding-left: 20px; 2322 padding-right: 20px; 2323 padding-top: 5px; 2324 padding-bottom: 5px; 2325} 2326 2327 li#menu-item-25788 a, li#menu-item-25789 a { 2328 color:white; 2329 } 2330} 2331 2332.low-opacity-animation { 2333 opacity:0.3; 2334} 2335 2336.top-bar-animation { 2337 background: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 2338 background-size: 600% 600%; 2339 2340 -webkit-animation: topbaranimation 11s ease infinite; 2341 -moz-animation: topbaranimation 11s ease infinite; 2342 -o-animation: topbaranimation 11s ease infinite; 2343 animation: topbaranimation 11s ease infinite; 2344} 2345 2346@-webkit-keyframes topbaranimation { 2347 0%{background-position:0% 50%} 2348 50%{background-position:100% 50%} 2349 100%{background-position:0% 50%} 2350} 2351@-moz-keyframes topbaranimation { 2352 0%{background-position:0% 50%} 2353 50%{background-position:100% 50%} 2354 100%{background-position:0% 50%} 2355} 2356@-o-keyframes topbaranimation { 2357 0%{background-position:0% 50%} 2358 50%{background-position:100% 50%} 2359 100%{background-position:0% 50%} 2360} 2361@keyframes topbaranimation { 2362 0%{background-position:0% 50%} 2363 50%{background-position:100% 50%} 2364 100%{background-position:0% 50%} 2365} 2366 2367 2368.wpcf7-response-output { 2369 background-color: white !important; 2370} 2371 2372div#demo-videos { 2373 display: grid; 2374 grid-template-columns: repeat(3, 1fr); 2375 gap: 20px; 2376} 2377 2378@media (max-width: 768px) { 2379 /* For tablets */ 2380 div#demo-videos { 2381 grid-template-columns: repeat(2, 1fr); /* 2 items in a row */ 2382 } 2383} 2384 2385@media (max-width: 480px) { 2386 /* For mobile phones */ 2387 div#demo-videos { 2388 grid-template-columns: 1fr; /* 1 item in a row */ 2389 } 2390} 2391 2392.demo-video-box { 2393 background: white; 2394 padding: 10px; 2395 border-radius: 15px; 2396 text-align: center; 2397} 2398 2399.demo-video-box h5 { 2400 margin: 0px; 2401} 2402 2403.grecaptcha-badge { 2404 display:none; 2405} 2406 2407 2408/* --- Compliance Certifications carousel (widget a0bfa80): render full, uncropped 2409 logos at a uniform height. Pairs with the widget Image Size = Medium. 2410 Added 2026-08-20. --- */ 2411.elementor-element-a0bfa80 .elementor-image-carousel-wrapper .swiper-slide { 2412 display: flex; 2413 align-items: center; 2414 justify-content: center; 2415} 2416.elementor-element-a0bfa80 .elementor-image-carousel-wrapper .swiper-slide img { 2417 height: 130px; 2418 width: auto; 2419 max-width: 100%; 2420 object-fit: contain; 2421 margin: 0 auto; 2422} 2423</style> 2424<!-- end Simple Custom CSS and JS -->
2425<script type="application/ld+json">{ 2426 "@context": "https://schema.org", 2427 "@type": "Course", 2428 "name": "Alcohol Server Training", 2429 "description": "Train your staff on responsible alcohol service. Online course covers ID verification, signs of intoxication, legal liability, and refusal techniques.", 2430 "provider": { 2431 "@type": "Organization", 2432 "name": "Home of Training, Inc.", 2433 "url": "https://homeoftraining.com" 2434 }, 2435 "url": "https://homeoftraining.com/courses/alcohol-server-training", 2436 "courseMode": "online", 2437 "offers": { 2438 "@type": "Offer", 2439 "price": 9.95, 2440 "priceCurrency": "USD", 2441 "availability": "https://schema.org/InStock", 2442 "url": "https://homeoftraining.com/courses/alcohol-server-training", 2443 "seller": { 2444 "@type": "Organization", 2445 "name": "Home of Training, Inc." 2446 } 2447 } 2448}</script>
2448 2449
2449<script type="text/javascript"> 2450 var stm_wpcfto_ajaxurl = 'https://homeoftraining.com/wp-admin/admin-ajax.php'; 2451 </script>
2451 2452 2453 <style> 2454 .vue_is_disabled { 2455 display: none; 2456 } 2457 </style> 2458
2458<script> 2459 var stm_wpcfto_nonces = {"wpcfto_save_settings":"e4a6826ba5","get_image_url":"ebcd62323e","wpcfto_upload_file":"a3dee282ea","wpcfto_search_posts":"915d225b0c"}; 2460 </script>
2460 2461 <meta name="generator" content="Elementor 4.2.4; features: additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-swap">
2462<script type="text/javascript">var elementskit_module_parallax_url = "https://homeoftraining.com/wp-content/plugins/elementskit/modules/parallax/";</script>
2462 <style> 2463 .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), 2464 .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { 2465 background-image: none !important; 2466 } 2467 @media screen and (max-height: 1024px) { 2468 .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), 2469 .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { 2470 background-image: none !important; 2471 } 2472 } 2473 @media screen and (max-height: 640px) { 2474 .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), 2475 .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { 2476 background-image: none !important; 2477 } 2478 } 2479 </style> 2480 <link rel="icon" href="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-150x150.png" sizes="32x32" /> 2481<link rel="icon" href="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-300x300.png" sizes="192x192" /> 2482<link rel="apple-touch-icon" href="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-300x300.png" /> 2483<meta name="msapplication-TileImage" content="https://homeoftraining.com/wp-content/uploads/2025/01/svg-icon-300x300.png" /> 2484</head> 2485<body class="wp-singular hot_course-template-default single single-hot_course postid-26938 wp-theme-landpress underline-link-effect flip-button-effect keydesign-elementor-library elementor-default elementor-kit-24414" data-account="individual"> 2486 2487 <!-- Top Bar (Phase 11.3: now hosts the bestseller offer alongside 2488 contact + social â one consolidated black row instead of two 2489 stacked utility rows). The .top-bar-deal wrapper renders only 2490 when the bestseller renderer would emit content; on archives / 2491 non-landing pages the slot is omitted so the layout collapses 2492 to contact + social. --> 2493 <div class="top-bar"><div class="container top-bar-inner"> 2494 <div class="top-bar-deal"> 2495 <span class="hot-bestseller-flame" aria-hidden="true">🔥</span> 2496 <span class="hot-bestseller-headline">Most Popular:</span> 2497 <span class="hot-bestseller-course">Food Handler Certificate Program</span> 2498 <span class="hot-bestseller-price">$10</span> 2499 <a class="hot-bestseller-cta" 2500 href="https://homeoftraining.com/go/?course=food-handler-certificate&autocheckout=1" 2501 data-bestseller-course="food-handler-certificate"> 2502 Start Now → 2503 </a> 2504 </div> 2505 <div class="top-bar-contact"> 2506 <a href="mailto:[email protected]" class="top-bar-item"><svg width="15" height="15" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> [email protected]</a> 2507 <a href="tel:9546767900" class="top-bar-item"><svg width="15" height="15" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.11 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> 954.676.7900</a> 2508 </div> 2509 <div class="top-bar-social"> 2510 <a href="https://www.youtube.com/@homeoftraining" aria-label="YouTube"><svg width="15" height="15" fill="#fff" viewBox="0 0 24 24"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.43z"/><polygon fill="#E8590C" points="9.75,15.02 15.5,11.75 9.75,8.48"/></svg></a> 2511 <a href="https://www.instagram.com/homeoftraining/" aria-label="Instagram"><svg width="15" height="15" fill="none" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" stroke="#fff" stroke-width="2"/><circle cx="12" cy="12" r="5" stroke="#fff" stroke-width="2"/><circle cx="17.5" cy="6.5" r="1.5" fill="#fff"/></svg></a> 2512 <a href="https://www.linkedin.com/company/barwize" aria-label="LinkedIn"><svg width="15" height="15" fill="#fff" viewBox="0 0 24 24">
2512<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a> 2513 </div> 2514 </div></div> 2515 2516 <!-- Nav: full site nav restored â Services megamenu + Course Library / 2517 Pricing / Demos / FAQ / Contact / Login matching homeoftraining.com. 2518 Single source in includes/site-nav.php so all landing-page templates 2519 stay in sync. Create-Account CTA prefills the current course slug so 2520 the LMS pricing page lands on it for this slug. --> 2521 <nav class="site-nav"><div class="container nav-inner"> 2522 <a href="https://homeoftraining.com" class="nav-logo"><img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/hot-logo.png" alt="Home of Training" style="height:40px;width:auto;max-height:40px;"></a> 2523 <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false"><span></span><span></span><span></span></button> 2524 <div class="nav-links"> 2525 <div class="nav-item nav-item--has-mega"> 2526 <button type="button" class="nav-link nav-link--mega" aria-haspopup="true" aria-expanded="false">Services <svg class="nav-caret" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1,1 5,5 9,1"/></svg></button> 2527 <div class="nav-mega" role="menu"> 2528 <div class="nav-mega-inner"> 2529 <div class="nav-mega-col"> 2530 <h4 class="nav-mega-heading">Compliance Training</h4> 2531 <ul> 2532 <li><a href="https://homeoftraining.com/courses/alcohol-server-training/">Alcohol Server Training</a></li> 2533 <li><a href="https://homeoftraining.com/courses/food-handler-certificate/">Food Handler Certificate</a></li> 2534 <li><a href="https://homeoftraining.com/courses/food-manager-certification/">Food Manager Certification</a></li> 2535 <li><a href="https://homeoftraining.com/courses/a-plus-security-host/">A+ Security Host</a></li> 2536 <li><a href="https://homeoftraining.com/courses/human-trafficking-training/">Human Trafficking</a></li> 2537 <li><a href="https://homeoftraining.com/courses/sexual-harassment-training/">Sexual Harassment</a></li> 2538 </ul> 2539 </div> 2540 <div class="nav-mega-col"> 2541 <h4 class="nav-mega-heading"><a href="https://homeoftraining.com/licensing/">Licensing</a></h4> 2542 <ul> 2543 <li><a href="https://homeoftraining.com/human-resources-courses/">Human Resources Courses</a></li> 2544 <li><a href="https://homeoftraining.com/white-labeling/">White Labeling</a></li> 2545 <li><a href="https://homeoftraining.com/upload-your-own-training/">Upload Your Own Training</a></li> 2546 <li><a href="https://homeoftraining.com/live-filming/">Live Filming</a></li> 2547 <li><a href="https://homeoftraining.com/content-creation/">Content Creation</a></li> 2548 </ul> 2549 </div> 2550 <div class="nav-mega-col"> 2551 <h4 class="nav-mega-heading">Guidebooks / SCORM</h4> 2552 <ul> 2553 <li><a href="https://homeoftraining.com/scorm-training/">SCORM Training</a></li> 2554 <li><a href="https://homeoftraining.com/guidebook-training/">Guidebook Training</a></li> 2555 <li><a href="https://homeoftraining.com/your-training-dept/">We'll Be Your Training Dept</a></li> 2556 </ul> 2557 </div> 2558 </div> 2559 </div> 2560 </div> 2561 <a href="https://homeoftraining.com/courses" class="nav-link">Course Library</a> 2562 <a href="https://lms.homeoftraining.com/#/pricing" class="nav-link">Pricing</a> 2563 <a href="https://homeoftraining.com/video-demos/" class="nav-link">Demos</a> 2564 <a href="https://homeoftraining.com/faqs/" class="nav-link">FAQ</a> 2565 <a href="https://homeoftraining.com/contact/" class="nav-link">Contact</a> 2566 <a href="https://lms.homeoftraining.com/#/login" class="nav-link">Login</a> 2567 <a href="https://homeoftraining.com/go/?course=alcohol
2567-server-training" class="nav-cta">Create Account</a> 2568 </div> 2569 </div></nav> 2570 2571 <!-- Hero â left column: homepage Quick Start panel; right: course video --> 2572 <section class="hero hero--grid-dark"> 2573 <div class="container"> 2574 <div class="hero-grid"> 2575 <div class="hero-content hero-content--left-hero"> 2576 <div 2577 class="hot-left-hero hot-left-hero--embed" 2578 id="hot-left-hero-98141" 2579 data-default-mode="individual" 2580 data-sync-account="1" 2581 > 2582 2583 <div class="hlh-switch" role="tablist" aria-label="Training audience switch" data-active="individual"> 2584 <span class="hlh-switch__indicator" aria-hidden="true"></span> 2585 <button type="button" class="hlh-switch__btn is-active" role="tab" data-mode="individual">Individual</button> 2586 <button type="button" class="hlh-switch__btn" role="tab" data-mode="company">Company</button> 2587 </div> 2588 2589 <section class="hlh-panel is-active" data-panel="individual" role="tabpanel"> 2590 <h2 class="hlh-title">Complete Your Training Today!</h2> 2591 2592 <div class="hlh-ticker" aria-live="polite"> 2593 <span class="hlh-ticker__label">Train in:</span> 2594 <span class="hlh-ticker__track"> 2595 <span class="hlh-ticker__item is-active">Food Manager Certification</span> 2596 <span class="hlh-ticker__item">Food Handler Certificate Program</span> 2597 <span class="hlh-ticker__item">Alcohol Server Certification</span> 2598 <span class="hlh-ticker__item">Human Trafficking Awareness</span> 2599 <span class="hlh-ticker__item">Security / Host Training</span> 2600 <span class="hlh-ticker__item">OSHA Workplace Safety</span> 2601 <span class="hlh-ticker__item">Sexual Harassment Prevention</span> 2602 <span class="hlh-ticker__item">Bloodborne Pathogens</span> 2603 </span> 2604 </div> 2605 2606 <div class="hlh-testimonial" aria-live="polite"> 2607 <span class="hlh-stars" aria-hidden="true"> 2608 <svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg> </span> 2609 <span class="hlh-testimonial__track"> 2610 <span class="hlh-testimonial__item is-active">“Completed in 15 mins on my phone.”</span> 2611 <span class="hlh-testimonial__item">“Got my certificate on lunch break.”</span> 2612 <span class="hlh-testimonial__item">“Spanish version is perfect!”</span> 2613 </span> 2614 </div> 2615 2616 <ul class="hlh-feature-row"> 2617 <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Instant access</li> 2618 <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Certificate included</li> 2619 <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Courses from $5</li> 2620 </ul> 2621 2622 <form class="hlh-quick-start" method="post" action=""> 2623 <div class="hlh-dropdown" data-open="false"> 2624 <button type="button" class="hlh-dropdown__trigger" aria-haspopup="listbox" aria-expanded="false">
2625 <span class="hlh-dropdown__icon" aria-hidden="true"> 2626 <svg viewBox="0 0 20 20" fill="none"><path d="M5 4l11 6-11 6V4z" fill="currentColor"/></svg> 2627 </span> 2628 <span class="hlh-dropdown__lead"> 2629 <span class="hlh-dropdown__title">Quick Start</span> 2630 <span class="hlh-dropdown__sublabel">Live within a minute · Pick one or more</span> 2631 </span> 2632 <span class="hlh-dropdown__count" data-empty="true">0 selected</span> 2633 <span class="hlh-dropdown__chevron" aria-hidden="true"> 2634 <svg viewBox="0 0 20 20" fill="none"><path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 2635 </span> 2636 </button> 2637 2638 <div class="hlh-dropdown__panel" role="listbox" aria-multiselectable="true"> 2639 <ul class="hlh-dropdown__list"> 2640 <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-2"> 2641 <label for="hot-left-hero-98141-c-0" class="hlh-dropdown__row"> 2642 <input 2643 id="hot-left-hero-98141-c-0" 2644 type="checkbox" 2645 name="course_lms_ids[]" 2646 value="" 2647 data-type="versioned" 2648 data-family-key="family-2" 2649 data-family-name="Alcohol Safety" 2650 data-lms-id="" 2651 data-slug="" 2652 data-price="0" 2653 data-name="Alcohol Safety" 2654 data-version-label="" 2655 data-versions="[{"id":904,"label":"California \u2014 RBS","name":"California Responsible Beverage Service (RBS) Training","time":"4 hr","price":"$9.95","price_num":9.95},{"id":93,"label":"Florida \u2014 Employee","name":"Alcohol Safety Training - Florida\/Employee","time":"45 min","price":"$9.95","price_num":9.95},{"id":23,"label":"Nationwide \u2014 Employee","name":"Alcohol Safety Training - Nationwide","time":"45 min","price":"$9.95","price_num":9.95},{"id":92,"label":"Florida \u2014 Manager","name":"Alcohol Safety Training - Florida \/ Manager","time":"20 min","price":"$9.95","price_num":9.95},{"id":26,"label":"Nationwide \u2014 Manager","name":"Alcohol Safety Training Nationwide - Manager","time":"20 min","price":"$9.95","price_num":9.95}]" 2656 /> 2657 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
2658 <span class="hlh-dropdown__meta"> 2659 <span class="hlh-dropdown__name">Alcohol Safety</span> 2660 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2661 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version </span> 2662 </span> 2663 <span class="hlh-dropdown__price hlh-dropdown__price--pending">â</span> 2664 </label> 2665 </li> 2666 <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-1"> 2667 <label for="hot-left-hero-98141-c-1" class="hlh-dropdown__row"> 2668 <input 2669 id="hot-left-hero-98141-c-1" 2670 type="checkbox" 2671 name="course_lms_ids[]" 2672 value="" 2673 data-type="versioned" 2674 data-family-key="family-1" 2675 data-family-name="Food Handler" 2676 data-lms-id="" 2677 data-slug="" 2678 data-price="0" 2679 data-name="Food Handler" 2680 data-version-label="" 2681 data-versions="[{"id":70,"label":"Florida","name":"Food Handler Certificate - Florida","time":"60 min","price":"$9.95","price_num":9.95},{"id":122,"label":"ANAB Nationally Accredited","name":"Food Handler Certificate - Nationally Accredited","time":"90 min","price":"$9.95","price_num":9.95}]" 2682 /> 2683 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2684 <span class="hlh-dropdown__meta"> 2685 <span class="hlh-dropdown__name">Food Handler</span> 2686 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2687 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version </span> 2688 </span> 2689 <span class="hlh-dropdown__price hlh-dropdown__price--pending">â</span> 2690 </label> 2691 </li> 2692 <li class="hlh-dropdown__item" data-family-key="family-0"> 2693 <label for="hot-left-hero-98141-c-2" class="hlh-dropdown__row"> 2694 <input 2695 id="hot-left-hero-98141-c-2" 2696 type="checkbox" 2697 name="course_lms_ids[]" 2698 value="123" 2699 data-type="simple" 2700 data-family-key="family-0" 2701 data-family-name="Food Manager Study Session" 2702 data-lms-id="123" 2703 data-slug="" 2704 data-price="199" 2705 data-name="Food Manager Study Session" 2706 data-version-label="" 2707 />
2708 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2709 <span class="hlh-dropdown__meta"> 2710 <span class="hlh-dropdown__name">Food Manager Study Session</span> 2711 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2712 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> 3 hr </span> 2713 </span> 2714 <span class="hlh-dropdown__price hlh-dropdown__price--pending">$199</span> 2715 </label> 2716 </li> 2717 <li class="hlh-dropdown__item" data-family-key="family-3"> 2718 <label for="hot-left-hero-98141-c-3" class="hlh-dropdown__row"> 2719 <input 2720 id="hot-left-hero-98141-c-3" 2721 type="checkbox" 2722 name="course_lms_ids[]" 2723 value="51" 2724 data-type="simple" 2725 data-family-key="family-3" 2726 data-family-name="Human Trafficking Prevention" 2727 data-lms-id="51" 2728 data-slug="" 2729 data-price="15" 2730 data-name="Human Trafficking Prevention" 2731 data-version-label="" 2732 /> 2733 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2734 <span class="hlh-dropdown__meta"> 2735 <span class="hlh-dropdown__name">Human Trafficking Prevention</span> 2736 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2737 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> 15 min </span> 2738 </span> 2739 <span class="hlh-dropdown__price hlh-dropdown__price--pending">$15</span> 2740 </label> 2741 </li> 2742 <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-5"> 2743 <label for="hot-left-hero-98141-c-4" class="hlh-dropdown__row"> 2744 <input 2745 id="hot-left-hero-98141-c-4" 2746 type="checkbox" 2747 name="course_lms_ids[]" 2748 value="" 2749 data-type="versioned" 2750 data-family-key="family-5" 2751 data-family-name="OSHA" 2752 data-lms-id="" 2753 data-slug="" 2754 data-price="0" 2755 data-name="OSHA" 2756 data-version-label="" 2757 data-versions="[{"id":87,"label":"Bloodborne Pathogens","name":"OSHA - Bloodborne Pathogens","time":"15 min","price":"$9","price_num":9},{"id":68,"label":"Slips, Trips and Falls","name":"Slips, Trips and Falls - Employee","time":"8 min","price":"$9","price_num":9},{"id":60,"label":"Fire Prevention","name":"Fire Prevention","time":"12 min","price":"$9","price_num":9}]" 2758 />
2759 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2760 <span class="hlh-dropdown__meta"> 2761 <span class="hlh-dropdown__name">OSHA</span> 2762 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2763 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version </span> 2764 </span> 2765 <span class="hlh-dropdown__price hlh-dropdown__price--pending">â</span> 2766 </label> 2767 </li> 2768 <li class="hlh-dropdown__item" data-family-key="family-4"> 2769 <label for="hot-left-hero-98141-c-5" class="hlh-dropdown__row"> 2770 <input 2771 id="hot-left-hero-98141-c-5" 2772 type="checkbox" 2773 name="course_lms_ids[]" 2774 value="115" 2775 data-type="simple" 2776 data-family-key="family-4" 2777 data-family-name="Security / Doorman / Bouncer" 2778 data-lms-id="115" 2779 data-slug="" 2780 data-price="75" 2781 data-name="Security / Doorman / Bouncer" 2782 data-version-label="" 2783 /> 2784 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2785 <span class="hlh-dropdown__meta"> 2786 <span class="hlh-dropdown__name">Security / Doorman / Bouncer</span> 2787 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2788 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> 2 hr </span> 2789 </span> 2790 <span class="hlh-dropdown__price hlh-dropdown__price--pending">$75</span> 2791 </label> 2792 </li> 2793 <li class="hlh-dropdown__item hlh-dropdown__item--versioned" data-family-key="family-6"> 2794 <label for="hot-left-hero-98141-c-6" class="hlh-dropdown__row"> 2795 <input 2796 id="hot-left-hero-98141-c-6" 2797 type="checkbox" 2798 name="course_lms_ids[]" 2799 value="" 2800 data-type="versioned" 2801 data-family-key="family-6" 2802 data-family-name="Sexual Harassment Prevention" 2803 data-lms-id="" 2804 data-slug="" 2805 data-price="0" 2806 data-name="Sexual Harassment Prevention" 2807 data-version-label="" 2808 data-versions="[{"id":103,"label":"Employee","name":"Sexual Harassment - Employee","time":"30 min","price":"$24","price_num":24},{"id":104,"label":"Manager","name":"Manager","time":"60 min","price":"$24","price_num":24},{"id":101,"label":"Employee (California)","name":"Sexual Harassment - California \/ Employee","time":"60 min","price":"$24","price_num":24},{"id":102,"label":"Manager (California)","name":"Manager (California)","time":"2 hr","price":"$24","price_num":24}]" 2809 />
2810 <span class="hlh-dropdown__check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2811 <span class="hlh-dropdown__meta"> 2812 <span class="hlh-dropdown__name">Sexual Harassment Prevention</span> 2813 <span class="hlh-dropdown__sub hlh-dropdown__sub--hint"> 2814 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.6"/><path d="M10 6v4l2.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> Choose version </span> 2815 </span> 2816 <span class="hlh-dropdown__price hlh-dropdown__price--pending">â</span> 2817 </label> 2818 </li> 2819 </ul> 2820 <div class="hlh-dropdown__foot"> 2821 <span class="hlh-dropdown__foot-count">0 selected</span> 2822 <span class="hlh-dropdown__foot-total">$0</span> 2823 </div> 2824 <div class="hlh-dropdown__action"> 2825 <button type="submit" class="hlh-btn hlh-btn--fire hlh-btn--in-dropdown"> 2826 <span class="hlh-btn__flame" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M11.5 1.5c.4 2.4-.8 3.6-2 4.8-1.4 1.4-3 2.9-3 5.7 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3.5-2.4-5.5-3.6-7.4-.7-1-1.1-2-.9-3.1-1 .3-1.9.9-2.5 1.7-.5-.6-.7-1.2 0-1.7zM10 17c-1.7 0-3-1.3-3-3 0-1.4.8-2.2 1.6-3 .7.8 1.7 1.2 2.4 0 1 .8 2 1.6 2 3 0 1.7-1.3 3-3 3z"/></svg></span> 2827 <span class="hlh-btn__label">Start Training Now</span> 2828 <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2829 </button> 2830 <a href="https://lms.homeoftraining.com/#/pricing" class="hlh-dropdown__see-more" target="_blank" rel="noopener">See More Courses</a> 2831 </div> 2832 </div> 2833 </div> 2834 2835 <div class="hlh-chips" aria-live="polite"></div> 2836 2837 <div class="hlh-version-modal hlh-version-modal--portal" data-hlh-root="hot-left-hero-98141" hidden role="dialog" aria-modal="true" aria-labelledby="hot-left-hero-98141-version-title"> 2838 <div class="hlh-version-modal__backdrop" data-close="1"></div> 2839 <div class="hlh-version-modal__panel"> 2840 <button type="button" class="hlh-version-modal__close" aria-label="Close">×</button> 2841 <h3 class="hlh-version-modal__title" id="hot-left-hero-98141-version-title"></h3> 2842 <p class="hlh-version-modal__lede">Select one version to add to your cart.</p> 2843 <ul class="hlh-version-modal__list"></ul> 2844 </div> 2845 </div> 2846 2847 <div class="hlh-refer-modal hlh-refer-modal--portal" data-hlh-root="hot-left-hero-98141" hidden role="dialog" aria-modal="true" aria-labelledby="hot-left-hero-98141-refer-title"> 2848 <div class="hlh-refer-modal__backdrop" data-refer-close="1"></div> 2849 <div class="hlh-refer-modal__panel"> 2850 <button type="button" class="hlh-refer-modal__close" aria-label="Close">×</button> 2851 <h3 class="hlh-refer-modal__title" id="hot-left-hero-98141-refer-title">Refer a Company & Earn $200</h3> 2852 <p class="hlh-refer-modal__lede">Tell us about the company you’re referring and we’ll take it from there.</p> 2853 <div class="hlh-refer-modal__form"> 2854 <fieldset class="hlh-refer-modal__fieldset"> 2855 <legend class="hlh-refer-modal__legend">Company Being Referred</legend> 2856 <label class="hlh-refer-modal__label">
2857 <span>Company Name <abbr title="required">*</abbr></span> 2858 <input type="text" name="refer_company" class="hlh-refer-modal__input" required> 2859 </label> 2860 <label class="hlh-refer-modal__label"> 2861 <span>Contact Name <abbr title="required">*</abbr></span> 2862 <input type="text" name="refer_contact" class="hlh-refer-modal__input" required> 2863 </label> 2864 <label class="hlh-refer-modal__label"> 2865 <span>Phone Number <abbr title="required">*</abbr></span> 2866 <input type="tel" name="refer_phone" class="hlh-refer-modal__input" required> 2867 </label> 2868 <label class="hlh-refer-modal__label"> 2869 <span>Email Address <abbr title="required">*</abbr></span> 2870 <input type="email" name="refer_email" class="hlh-refer-modal__input" required> 2871 </label> 2872 </fieldset> 2873 <fieldset class="hlh-refer-modal__fieldset"> 2874 <legend class="hlh-refer-modal__legend">Your Information (Referrer)</legend> 2875 <label class="hlh-refer-modal__label"> 2876 <span>Your Name <abbr title="required">*</abbr></span> 2877 <input type="text" name="referrer_name" class="hlh-refer-modal__input" required> 2878 </label> 2879 <label class="hlh-refer-modal__label"> 2880 <span>Your Email <abbr title="required">*</abbr></span> 2881 <input type="email" name="referrer_email" class="hlh-refer-modal__input" required> 2882 </label> 2883 <label class="hlh-refer-modal__label"> 2884 <span>Your Phone Number <abbr title="required">*</abbr></span> 2885 <input type="tel" name="referrer_phone" class="hlh-refer-modal__input" required> 2886 </label> 2887 </fieldset> 2888 <button type="button" class="hlh-btn hlh-btn--fire hlh-refer-modal__submit"> 2889 <span class="hlh-btn__label">Submit Referral</span> 2890 <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2891 </button> 2892 <p class="hlh-refer-modal__success" hidden>Thank you! Your referral has been submitted successfully.</p> 2893 </div> 2894 </div> 2895 </div> 2896 2897 <input type="hidden" name="hot_lp_preload_cart" value="1"> 2898 <input type="hidden" id="hot_lp_nonce" name="hot_lp_nonce" value="598721b2c8" /><input type="hidden" name="_wp_http_referer" value="/courses/alcohol-server-training" /> 2899 <button type="submit" class="hlh-btn hlh-btn--fire"> 2900 <span class="hlh-btn__flame" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M11.5 1.5c.4 2.4-.8 3.6-2 4.8-1.4 1.4-3 2.9-3 5.7 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3.5-2.4-5.5-3.6-7.4-.7-1-1.1-2-.9-3.1-1 .3-1.9.9-2.5 1.7-.5-.6-.7-1.2 0-1.7zM10 17c-1.7 0-3-1.3-3-3 0-1.4.8-2.2 1.6-3 .7.8 1.7 1.2 2.4 0 1 .8 2 1.6 2 3 0 1.7-1.3 3-3 3z"/></svg></span>
2901 <span class="hlh-btn__label">Start Training Now</span> 2902 <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2903 </button> 2904 <button type="button" class="hlh-subline hlh-subline--refer hlh-refer-trigger" aria-label="Open referral form"> 2905 <span class="hlh-subline__refer-lede"> 2906 <span class="hlh-subline__refer-icon" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2907 Refer your company, receive 2908 </span> 2909 <span class="hlh-subline__refer-amount">$200</span> 2910 <span class="hlh-refer-info" tabindex="0" aria-label="Referral program details" role="button"> 2911 <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M8 7v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="5" r=".9" fill="currentColor"/></svg> 2912 <span class="hlh-refer-info__tooltip">Refer us to any location that signs up for any monthly service package and receive $200 after their first payment is made. It’s that simple.</span> 2913 </span> 2914 </button> 2915 </form> 2916 2917 2918 <div class="hlh-cross-link"> 2919 Need training for your team? <a href="#">Switch to Company →</a> 2920 </div> 2921 </section> 2922 2923 <section class="hlh-panel" data-panel="company" role="tabpanel"> 2924 <h2 class="hlh-title hlh-title--company">Train Your Employees. Stay Compliant. All in One Platform, from $0.50 per user, per month</h2> 2925 2926 <div class="hlh-ticker hlh-ticker--lg" aria-live="polite"> 2927 <span class="hlh-ticker__label">Available features:</span> 2928 <span class="hlh-ticker__track"> 2929 <span class="hlh-ticker__item is-active">Custom content</span> 2930 <span class="hlh-ticker__item">White label</span> 2931 <span class="hlh-ticker__item">Live filming</span> 2932 <span class="hlh-ticker__item">API integration</span> 2933 <span class="hlh-ticker__item">Custom Reporting</span> 2934 </span> 2935 </div> 2936 2937 <div class="hlh-testimonial" aria-live="polite"> 2938 <span class="hlh-stars" aria-hidden="true"> 2939 <svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.3 2.7 1-5.8L1.5 7.7l5.9-.9z"/></svg> </span> 2940 <span class="hlh-testimonial__track"> 2941 <span class="hlh-testimonial__item is-active">“Cut onboarding time in half.”</span>
2942 <span class="hlh-testimonial__item">“Compliance is finally automated.”</span> 2943 <span class="hlh-testimonial__item">“Our whole team certified in a week.”</span> 2944 </span> 2945 </div> 2946 2947 <ul class="hlh-feature-row hlh-feature-row--stack"> 2948 <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Employees can pay or your company can</li> 2949 <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Trusted by McDonald’s + 40,000 locations</li> 2950 <li><span class="hlh-tick"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 10.5l3 3 7-7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> SOC 2 / ANAB / HIPAA badges</li> 2951 </ul> 2952 2953 <div class="hlh-btn-row"> 2954 <a class="hlh-btn hlh-btn--fire" href="https://lms.homeoftraining.com/#/pricing?action=trial"> 2955 <span class="hlh-btn__flame" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" d="M11.5 1.5c.4 2.4-.8 3.6-2 4.8-1.4 1.4-3 2.9-3 5.7 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3.5-2.4-5.5-3.6-7.4-.7-1-1.1-2-.9-3.1-1 .3-1.9.9-2.5 1.7-.5-.6-.7-1.2 0-1.7zM10 17c-1.7 0-3-1.3-3-3 0-1.4.8-2.2 1.6-3 .7.8 1.7 1.2 2.4 0 1 .8 2 1.6 2 3 0 1.7-1.3 3-3 3z"/></svg></span> 2956 <span class="hlh-btn__label">Start free trial</span> 2957 <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2958 </a> 2959 <a class="hlh-btn hlh-btn--outline" href="https://lms.homeoftraining.com/#/pricing"> 2960 <span class="hlh-btn__label">Get started now</span> 2961 <span class="hlh-btn__arrow" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 2962 </a> 2963 </div> 2964 <div class="hlh-subline">Setup in minutes · Cancel anytime</div> 2965 2966 <div class="hlh-cross-link">Just need your training: <a href="#">Switch to Individual →</a></div> 2967 </section> 2968 </div> 2969 2970 <style> 2971 #hot-left-hero-98141.hot-left-hero { 2972 --hlh-grad: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 2973 --hlh-grad-soft: linear-gradient(270deg, rgba(229,145,57,.12), rgba(234,42,41,.12), rgba(234,102,41,.12)); 2974 --hlh-orange: #ea6629; 2975 --hlh-red: #ea2a29; 2976 --hlh-amber: #e59139; 2977 --hlh-ink: #0f1115; 2978 --hlh-ink-2: #3a3f48; 2979 --hlh-mute: #6b7280; 2980 --hlh-line: rgba(15,17,21,.08); 2981 --hlh-card: #ffffff; 2982 --hlh-soft: #fafafa; 2983 position: relative; 2984 z-index: 1; 2985 background: 2986 radial-gradient(1200px 400px at -10% -20%, rgba(234,102,41,.08), transparent 55%), 2987 radial-gradient(800px 300px at 110% 110%, rgba(234,42,41,.06), transparent 55%), 2988 #ffffff; 2989 border: 0; 2990 border-radius: 18px; 2991 padding: 18px 18px 16px; 2992 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 2993 color: var(--hlh-ink); 2994 box-shadow: none; 2995 overflow: visible; /* allow the Quick Start dropdown to overlay outside the card */ 2996 } 2997 #hot-left-hero-98141.hot-left-hero--embed { 2998 background: #fff; 2999 border-radius: 18px; 3000 padding: 14px 16px 12px; 3001 box-shadow: 3002 0 8px 32px rgba(15, 17, 21, 0.12), 3003 0 0 0 1px rgba(15, 17, 21, 0.06); 3004 } 3005 #hot-left-hero-98141.hot-left-hero--embed .hlh-switch { 3006 margin-bottom: 4px; 3007 } 3008 #hot-left-hero-98141.hot-left-hero--embed .hlh-title, 3009 #hot-left-hero-98141.hot-left-hero--embed .hlh-title--company { 3010 margin-top: 0; 3011 margin-bottom: 8px; 3012 } 3013 #hot-left-hero-98141.hot-left-hero--embed .hlh-cross-link { 3014 display: none; 3015 } 3016 #hot-left-hero-98141 * { box-sizing: border-box; } 3017 3018 #hot-left-hero-98141 .hlh-switch { 3019 position: relative; 3020 display: inline-flex; 3021 gap: 0; 3022 margin-bottom: 12px; 3023 padding: 4px; 3024 border-radius: 999px; 3025 background: #f3f4f6; 3026 border: 1px solid var(--hlh-line); 3027 } 3028 #hot-left-hero-98141 .hlh-switch__indicator { 3029 position: absolute; top: 4px; bottom: 4px; left: 4px; 3030 width: calc(50% - 4px); 3031 background: #0f1115; 3032 border-radius: 999px; 3033 transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s ease; 3034 box-shadow: 0 6px 14px -4px rgba(0,0,0,.45); 3035 z-index: 0; 3036 } 3037 #hot-left-hero-98141 .hlh-switch[data-active="company"] .hlh-switch__indicator { 3038 transform: translateX(100%); 3039 } 3040 #hot-left-hero-98141 .hlh-switch__btn { 3041 position: relative; z-index: 1; 3042 border: 0; 3043 padding: 8px 18px; 3044 border-radius: 999px; 3045 background: transparent; 3046 cursor: pointer; 3047 font-size: 13px; 3048 font-weight: 700; 3049 color: #525866; 3050 transition: color .2s ease; 3051 font-family: inherit; 3052 } 3053 #hot-left-hero-98141 .hlh-switch__btn.is-active { color: #fff; } 3054 3055 #hot-left-hero-98141 .hlh-panel { 3056 display: none; 3057 animation: hlhFadeIn .35s ease both; 3058 } 3059 #hot-left-hero-98141 .hlh-panel.is-active { display: block; } 3060 @keyframes hlhFadeIn { 3061 from { opacity: 0; transform: translateY(4px); } 3062 to { opacity: 1; transform: translateY(0); } 3063 } 3064 3065 #hot-left-hero-98141 .hlh-title { 3066 font-size: clamp(1.35rem, 1.85vw, 1.6rem); 3067 line-height: 1.22; 3068 margin: 0 0 10px; 3069 letter-spacing: -0.02em; 3070 color: var(--hlh-ink); 3071 font-weight: 800; 3072 } 3073 #hot-left-hero-98141 .hlh-title--company { 3074 font-size: clamp(1.05rem, 1.45vw, 1.28rem); 3075 line-height: 1.32; 3076 margin: 0 0 14px; 3077 } 3078 #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-ticker--lg { 3079 margin-bottom: 14px; 3080 } 3081 #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-testimonial { 3082 margin-bottom: 14px; 3083 } 3084 #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-feature-row--stack { 3085 gap: 10px; 3086 margin-bottom: 20px; 3087 } 3088 #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-btn-row { 3089 gap: 10px; 3090 padding-bottom: 4px; 3091 } 3092 #hot-left-hero-98141 .hlh-panel[data-panel="company"] .hlh-cross-link { 3093 margin-top: 14px; 3094 } 3095 #hot-left-hero-98141 .hlh-lede { 3096 font-size: clamp(0.72rem, 0.88vw, 0.8rem); 3097 line-height: 1.42; 3098 margin: 0 0 12px; 3099 color: var(--hlh-mute); 3100 letter-spacing: -0.01em; 3101 } 3102 /* Catalog line runs long â nudge smaller so one line fits typical card widths */ 3103 #hot-left-hero-98141 .hlh-panel[data-panel="individual"] .hlh-lede { 3104 font-size: clamp(0.65rem, 0.78vw, 0.72rem); 3105 letter-spacing: -0.02em; 3106 line-height: 1.35; 3107 } 3108 #hot-left-hero-98141 .hlh-lede strong { 3109 background: linear-gradient(180deg, transparent 70%, rgba(234,102,41,.25) 0); 3110 padding: 0 2px; 3111 } 3112 3113 #hot-left-hero-98141 .hlh-feature-row { 3114 display: flex; flex-wrap: wrap; gap: 8px 14px; 3115 list-style: none; margin: 0 0 16px; padding: 0; 3116 font-size: 12.5px; color: var(--hlh-ink); font-weight: 600; 3117 } 3118 #hot-left-hero-98141 .hlh-feature-row li { 3119 display: inline-flex; align-items: center; gap: 6px; 3120 } 3121 #hot-left-hero-98141 .hlh-feature-row--stack { 3122 flex-direction: column; 3123 align-items: flex-start; 3124 flex-wrap: nowrap; 3125 gap: 8px; 3126 margin: 0 0 18px; 3127 } 3128 #hot-left-hero-98141 .hlh-panel[data-panel="individual"] .hlh-quick-start { 3129 margin-top: 0; 3130 } 3131 #hot-left-hero-98141 .hlh-tick { 3132 display: inline-flex; align-items: center; justify-content: center; 3133 width: 18px; height: 18px; border-radius: 50%; 3134 background: rgba(34,197,94,.12); color: #14823f; 3135 } 3136 #hot-left-hero-98141 .hlh-tick svg { width: 12px; height: 12px; } 3137 3138 #hot-left-hero-98141 .hlh-testimonial { 3139 display: flex; align-items: center; gap: 10px; 3140 padding: 4px 0 4px 12px; margin-bottom: 12px; 3141 background: transparent; 3142 border: 0; 3143 border-left: 3px solid var(--hlh-orange); 3144 border-radius: 0; 3145 } 3146 #hot-left-hero-98141 .hlh-stars { 3147 display: inline-flex; gap: 2px; color: #f59e0b; flex: 0 0 auto; 3148 } 3149 #hot-left-hero-98141 .hlh-stars svg { width: 13px; height: 13px; } 3150 #hot-left-hero-98141 .hlh-testimonial__track { 3151 position: relative; min-height: 18px; font-size: 12.5px; color: var(--hlh-ink-2); font-style: italic; 3152 flex: 1 1 auto; 3153 } 3154 #hot-left-hero-98141 .hlh-testimonial__item { 3155 position: absolute; inset: 0; 3156 opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; 3157 } 3158 #hot-left-hero-98141 .hlh-testimonial__item.is-active { 3159 opacity: 1; transform: translateY(0); position: relative; 3160 } 3161 3162 /* Ticker â labeled rotating red text (courses + features) */ 3163 #hot-left-hero-98141 .hlh-ticker { 3164 display: flex; align-items: baseline; gap: 7px; 3165 margin: 0 0 12px; 3166 font-size: 13px; line-height: 1.4; 3167 flex-wrap: nowrap; overflow: hidden; 3168 } 3169 #hot-left-hero-98141 .hlh-ticker--lg { 3170 font-size: 13.5px; 3171 margin: 0 0 12px; 3172 flex-wrap: wrap; 3173 row-gap: 4px; 3174 } 3175 #hot-left-hero-98141 .hlh-ticker__label { 3176 color: var(--hlh-mute); font-weight: 600; 3177 white-space: nowrap; flex-shrink: 0; 3178 } 3179 /* inline-grid stacks all items in the same cell â no layout jump */ 3180 #hot-left-hero-98141 .hlh-ticker__track { 3181 display: inline-grid; min-width: 0; 3182 } 3183 #hot-left-hero-98141 .hlh-ticker__item { 3184 grid-area: 1 / 1; 3185 color: var(--hlh-red); font-weight: 800; 3186 opacity: 0; transition: opacity .4s ease; 3187 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3188 } 3189 #hot-left-hero-98141 .hlh-ticker__item.is-active { 3190 opacity: 1; 3191 } 3192 3193 /* Two-CTA row (Company) */ 3194 #hot-left-hero-98141 .hlh-btn-row { 3195 display: grid; grid-template-columns: 1fr 1fr; gap: 10px; 3196 margin: 0 0 0; 3197 } 3198 /* Side-by-side CTAs: skip oversized glow so subline/badges keep even spacing */ 3199 #hot-left-hero-98141 .hlh-btn-row .hlh-btn--fire { 3200 animation: none; 3201 box-shadow: 0 6px 16px rgba(234, 102, 41, .22); 3202 } 3203 #hot-left-hero-98141 .hlh-btn-row .hlh-btn--fire::before, 3204 #hot-left-hero-98141 .hlh-btn-row .hlh-btn--fire::after { 3205 display: none; 3206 } 3207 #hot-left-hero-98141 .hlh-btn--outline { 3208 background-image: none; 3209 background-color: transparent; 3210 border: 2px solid var(--hlh-red); 3211 color: var(--hlh-red); 3212 text-shadow: none; 3213 animation: none; 3214 } 3215 #hot-left-hero-98141 .hlh-btn--outline:hover { 3216 background-color: rgba(234,42,41,.06); 3217 transform: translateY(-1px); 3218 } 3219 #hot-left-hero-98141 .hlh-btn--outline::before, 3220 #hot-left-hero-98141 .hlh-btn--outline::after { display: none; } 3221 @media (max-width: 380px) { 3222 #hot-left-hero-98141 .hlh-btn-row { grid-template-columns: 1fr; } 3223 } 3224 3225 #hot-left-hero-98141 .hlh-quick-start { 3226 margin: 0 0 14px; 3227 } 3228 3229 /* Unified Quick Start dropdown (header + trigger merged) */ 3230 #hot-left-hero-98141 .hlh-dropdown { 3231 position: relative; margin-bottom: 10px; 3232 } 3233 #hot-left-hero-98141 .hlh-dropdown__trigger { 3234 display: flex; align-items: center; gap: 12px; 3235 width: 100%; 3236 padding: 12px 14px; 3237 background: linear-gradient(180deg, #ffffff, #fbfbfb); 3238 border: 1.5px solid var(--hlh-line); 3239 border-radius: 14px; 3240 font-family: inherit; 3241 color: var(--hlh-ink); 3242 cursor: pointer; text-align: left; 3243 transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; 3244 box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 6px 20px -14px rgba(15,17,21,.18); 3245 } 3246 #hot-left-hero-98141 .hlh-dropdown__trigger:hover { 3247 border-color: rgba(234, 102, 41, .55); 3248 } 3249 #hot-left-hero-98141 .hlh-dropdown[data-open="true"] .hlh-dropdown__trigger { 3250 border-color: var(--hlh-orange); 3251 box-shadow: 0 0 0 1.5px rgba(234,102,41,.10); 3252 } 3253 #hot-left-hero-98141 .hlh-dropdown__icon { 3254 display: inline-flex; align-items: center; justify-content: center; 3255 width: 38px; height: 38px; border-radius: 10px; 3256 background-image: var(--hlh-grad); color: #fff; flex: 0 0 auto; 3257 box-shadow: 0 4px 12px -3px rgba(234,102,41,.5); 3258 } 3259 #hot-left-hero-98141 .hlh-dropdown__icon svg { width: 16px; height: 16px; margin-left: 1px; } 3260 #hot-left-hero-98141 .hlh-dropdown__lead { 3261 display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; 3262 } 3263 #hot-left-hero-98141 .hlh-dropdown__title { 3264 font-size: 14.5px; font-weight: 800; color: var(--hlh-ink); line-height: 1.15; 3265 letter-spacing: -0.01em; 3266 } 3267 #hot-left-hero-98141 .hlh-dropdown__sublabel { 3268 font-size: 11.5px; font-weight: 50
32680; color: var(--hlh-mute); line-height: 1.3; 3269 } 3270 #hot-left-hero-98141 .hlh-dropdown__count { 3271 font-size: 11px; font-weight: 800; 3272 padding: 4px 9px; border-radius: 999px; 3273 background: #f3f4f6; color: #525866; white-space: nowrap; 3274 transition: background .2s ease, color .2s ease; 3275 } 3276 #hot-left-hero-98141 .hlh-dropdown__count[data-empty="false"] { 3277 background-image: var(--hlh-grad); color: #fff; 3278 } 3279 #hot-left-hero-98141 .hlh-dropdown__chevron { 3280 display: inline-flex; align-items: center; justify-content: center; 3281 width: 20px; height: 20px; color: var(--hlh-mute); 3282 transition: transform .25s ease, color .2s ease; 3283 } 3284 #hot-left-hero-98141 .hlh-dropdown__chevron svg { width: 16px; height: 16px; } 3285 #hot-left-hero-98141 .hlh-dropdown[data-open="true"] .hlh-dropdown__chevron { 3286 transform: rotate(180deg); color: var(--hlh-orange); 3287 } 3288 3289 #hot-left-hero-98141 .hlh-dropdown { 3290 z-index: 2; 3291 } 3292 #hot-left-hero-98141:has(.hlh-dropdown[data-open="true"]) { 3293 position: relative; 3294 z-index: 999998; 3295 } 3296 #hot-left-hero-98141 .hlh-dropdown[data-open="true"] { 3297 z-index: 999999; 3298 } 3299 #hot-left-hero-98141 .hlh-dropdown__panel { 3300 position: absolute; top: calc(100% + 4px); left: 0; right: 0; 3301 background: #fff; 3302 border: 1px solid rgba(234,102,41,.35); 3303 border-radius: 12px; 3304 box-shadow: 0 10px 24px -10px rgba(15,17,21,.14); 3305 z-index: 999999; 3306 overflow: hidden; 3307 opacity: 0; transform: translateY(-4px) scale(.99); 3308 pointer-events: none; 3309 transition: opacity .18s ease, transform .18s ease; 3310 } 3311 #hot-left-hero-98141 .hlh-dropdown[data-open="true"] .hlh-dropdown__panel { 3312 opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; 3313 } 3314 /* Keep the open Quick Start menu above logos/trust rows site-wide */ 3315 body.hlh-qs-dropdown-open .hot-left-hero { 3316 position: relative; 3317 z-index: 999997; 3318 } 3319 body.hlh-qs-dropdown-open .logos-bar, 3320 body.hlh-qs-dropdown-open .trust-row, 3321 body.hlh-qs-dropdown-open .hlh-logos, 3322 body.hlh-qs-dropdown-open .hlh-proof { 3323 z-index: 0 !important; 3324 position: relative; 3325 } 3326 #hot-left-hero-98141 .hlh-dropdown__panel-head { 3327 display: flex; align-items: center; justify-content: space-between; 3328 padding: 10px 14px; background: var(--hlh-soft); 3329 border-bottom: 1px solid var(--hlh-line); 3330 font-size: 11px; color: var(--hlh-mute); text-transform: uppercase; letter-spacing: .06em; 3331 } 3332 #hot-left-hero-98141 .hlh-dropdown__panel-head strong { 3333 color: var(--hlh-ink); font-size: 11px; letter-spacing: .06em; 3334 } 3335 #hot-left-hero-98141 .hlh-dropdown__list { 3336 list-style: none; margin: 0; padding: 4px; 3337 max-height: 240px; overflow: auto; 3338 } 3339 #hot-left-hero-98141 .hlh-dropdown__list::-webkit-scrollbar { width: 6px; } 3340 #hot-left-hero-98141 .hlh-dropdown__list::-webkit-scrollbar-thumb { background: rgba(15,17,21,.15); border-radius: 999px; } 3341 3342 #hot-left-hero-98141 .hlh-dropdown__row { 3343 display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; 3344 padding: 9px 10px; 3345 border-radius: 8px; 3346 cursor: pointer; 3347 transition: background .15s ease; 3348 } 3349 #hot-left-hero-98141 .hlh-dropdown__row:hover { background: #fafafa; } 3350 #hot-left-hero-98141 .hlh-dropdown__row input { 3351 position: absolute; opacity: 0; pointer-events: none; 3352 } 3353 #hot-left-hero-98141 .hlh-dropdown__check { 3354 width: 22px; height: 22px; border-radius: 6px; 3355 border: 1.5px solid #d1d5db; 3356 display: inline-flex; align-items: center; justify-content: center; 3357 color: transparent; 3358 transition: all .15s ease; 3359 flex: 0 0 auto; 3360 } 3361 #hot-left-hero-98141 .hlh-dropdown__check svg { width: 13px; height: 13px; } 3362 #hot-left-hero-98141 .hlh-dropdown__row input:checked ~ .hlh-dropdown__check { 3363 border-color: transparent; 3364 background-image: var(--hlh-grad); 3365 color: #fff; 3366 } 3367 #hot-left-hero-98141 .hlh-dropdown__row input:checked ~ .hlh-dropdown__meta .hlh-dropdown__name { color: var(--hlh-ink); } 3368 #hot-left-hero-98141 .hlh-dropdown__row:has(input:checked) { background: #fff7f2; } 3369 #hot-left-hero-98141 .hlh-dropdown__row input:disabled ~ .hlh-dropdown__check { opacity: .5; } 3370 3371 #hot-left-hero-98141 .hlh-dropdown__meta { 3372 display: flex; flex-direction: column; gap: 2px; min-width: 0; 3373 } 3374 #hot-left-hero-98141 .hlh-dropdown__name { 3375 font-size: 13px; font-weight: 700; color: var(--hlh-ink); line-height: 1.25; 3376 } 3377 #hot-left-hero-98141 .hlh-dropdown__sub { 3378 display: inline-flex; align-items: center; gap: 4px; 3379 font-size: 11px; color: var(--hlh-mute); font-weight: 600; 3380 } 3381 #hot-left-hero-98141 .hlh-dropdown__sub svg { width: 11px; height: 11px; } 3382 #hot-left-hero-98141 .hlh-dropdown__price { 3383 font-size: 13px; font-weight: 800; white-space: nowrap; 3384 background-image: var(--hlh-grad); 3385 -webkit-background-clip: text; background-clip: text; 3386 -webkit-text-fill-color: transparent; 3387 } 3388 3389 #hot-left-hero-98141 .hlh-dropdown__foot { 3390 display: flex; align-items: center; justify-content: space-between; 3391 padding: 10px 14px; 3392 background: var(--hlh-soft); 3393 border-top: 1px solid var(--hlh-line); 3394 font-size: 12px; font-weight: 700; color: var(--hlh-ink-2); 3395 } 3396 #hot-left-hero-98141 .hlh-dropdown__foot-total { 3397 font-size: 14px; font-weight: 800; 3398 background-image: var(--hlh-grad); 3399 -webkit-background-clip: text; background-clip: text; 3400 -webkit-text-fill-color: transparent; 3401 } 3402 #hot-left-hero-98141 .hlh-dropdown__action { 3403 padding: 10px 12px 12px; 3404 border-top: 1px solid var(--hlh-line); 3405 background: #fff; 3406 } 3407 #hot-left-hero-98141 .hlh-btn--in-dropdown { 3408 margin: 0; 3409 animation: none; 3410 box-shadow: 0 6px 16px rgba(234, 102, 41, .22); 3411 } 3412 #hot-left-hero-98141 .hlh-btn--in-dropdown::before, 3413 #hot-left-hero-98141 .hlh-btn--in-dropdown::after { 3414 display: none; 3415 } 3416 #hot-left-hero-98141 .hlh-dropdown__see-more { 3417 display: block; 3418 margin-top: 10px; 3419 padding: 9px 14px; 3420 text-align: center; 3421 font-size: 13px; 3422 font-weight: 700; 3423 color: #fff; 3424 background: var(--hlh-ink); 3425 border-radius: 8px; 3426 text-decoration: none; 3427 transition: background .2s ease, transform .15s ease; 3428 } 3429 #hot-left-hero-98141 .hlh-dropdown__see-more:hover { 3430 background: var(--hlh-ink-2); 3431 transform: translateY(-1px); 3432 } 3433 3434 /* Selected chips below trigger */ 3435 #hot-left-hero-98141 .hlh-chips { 3436 display: flex; flex-wrap: wrap; gap: 5px; 3437 margin: 0 0 10px; 3438 } 3439 #hot-left-hero-98141 .hlh-chips:empty { display: none; } 3440 #hot-left-hero-98141 .hlh-chip { 3441 display: inline-flex; align-items: center; gap: 5px; 3442 font-size: 11.5px; font-weight: 700; color: var(--hlh-ink); 3443 padding: 4px 4px 4px 9px; border-radius: 999px; 3444 background: #fff; 3445 border: 1px solid rgba(234,102,41,.35); 3446 box-shadow: 0 1px 2px rgba(15,17,21,.04); 3447 } 3448 #hot-left-hero-98141 .hlh-chip__x { 3449 width: 16px; height: 16px; border-radius: 50%; 3450 display: inline-flex; align-items: center; justify-content: center; 3451 background: #f3f4f6; color: #525866; border: 0; cursor: pointer; padding: 0; 3452 font-size: 12px; line-height: 1; 3453 transition: background .15s ease, color .15s ease; 3454 } 3455 #hot-left-hero-98141 .hlh-chip__x:hover { background: var(--hlh-red); color: #fff; } 3456 3457 #hot-left-hero-98141 .hlh-dropdown__item--versioned .hlh-dropdown__sub--hint { 3458 color: var(--hlh-orange); 3459 font-weight: 600; 3460 } 3461 #hot-left-hero-98141 .hlh-dropdown__price--pending { 3462 color: var(--hlh-mute); 3463 font-weight: 600; 3464 } 3465 3466 /* Version picker â portaled to body so it centers on the viewport (not clipped by hero/transform parents) */ 3467 body >
3467 .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] { 3468 --hlh-ink: #0f1115; 3469 --hlh-mute: #6b7280; 3470 --hlh-line: rgba(15,17,21,.08); 3471 --hlh-orange: #ea6629; 3472 --hlh-red: #ea2a29; 3473 position: fixed; 3474 inset: 0; 3475 z-index: 999999; 3476 display: flex; 3477 align-items: center; 3478 justify-content: center; 3479 padding: 20px; 3480 box-sizing: border-box; 3481 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 3482 } 3483 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"][hidden] { 3484 display: none !important; 3485 } 3486 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__backdrop { 3487 position: fixed; 3488 inset: 0; 3489 background: rgba(15, 17, 21, .45); 3490 } 3491 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__panel { 3492 position: relative; 3493 z-index: 1; 3494 width: min(420px, calc(100vw - 40px)); 3495 max-height: min(80vh, 520px); 3496 overflow: auto; 3497 background: #fff; 3498 border-radius: 14px; 3499 padding: 18px 18px 14px; 3500 box-shadow: 0 24px 60px rgba(15, 17, 21, .22); 3501 } 3502 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__close { 3503 position: absolute; 3504 top: 10px; 3505 right: 12px; 3506 border: 0; 3507 background: transparent; 3508 font-size: 22px; 3509 line-height: 1; 3510 color: var(--hlh-mute); 3511 cursor: pointer; 3512 } 3513 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__title { 3514 margin: 0 28px 6px 0; 3515 font-size: 1.05rem; 3516 font-weight: 800; 3517 color: var(--hlh-ink); 3518 } 3519 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__lede { 3520 margin: 0 0 12px; 3521 font-size: 12.5px; 3522 color: var(--hlh-mute); 3523 } 3524 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__list { 3525 list-style: none; 3526 margin: 0; 3527 padding: 0; 3528 display: flex; 3529 flex-direction: column; 3530 gap: 8px; 3531 } 3532 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option { 3533 display: flex; 3534 align-items: center; 3535 justify-content: space-between; 3536 gap: 12px; 3537 width: 100%; 3538 padding: 12px 14px; 3539 border: 1.5px solid var(--hlh-line); 3540 border-radius: 12px; 3541 background: #fff; 3542 font-family: inherit; 3543 text-align: left; 3544 cursor: pointer; 3545 transition: border-color .2s ease, box-shadow .2s ease; 3546 } 3547 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option:hover { 3548 border-color: var(--hlh-orange); 3549 box-shadow: 0 4px 14px -8px rgba(234, 102, 41, .45); 3550 } 3551 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-meta { 3552 display: flex; 3553 flex-direction: column; 3554 gap: 3px; 3555 min-width: 0; 3556 } 3557 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-label { 3558 font-size: 13.5px; 3559 font-weight: 700; 3560 color: var(--hlh-ink); 3561 } 3562 body >
3562 .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-sub { 3563 font-size: 11.5px; 3564 color: var(--hlh-mute); 3565 } 3566 body > .hlh-version-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-version-modal__option-price { 3567 font-size: 14px; 3568 font-weight: 800; 3569 color: var(--hlh-red); 3570 white-space: nowrap; 3571 } 3572 3573 #hot-left-hero-98141 .hlh-btn { 3574 position: relative; 3575 display: inline-flex; align-items: center; justify-content: center; gap: 8px; 3576 width: 100%; 3577 border: 0; 3578 border-radius: 12px; 3579 padding: 13px 18px; 3580 font-size: 14.5px; 3581 font-weight: 800; 3582 letter-spacing: .01em; 3583 color: #fff; 3584 text-decoration: none; 3585 cursor: pointer; 3586 background-image: var(--hlh-grad); 3587 background-size: 200% 100%; 3588 background-position: 0% 50%; 3589 transition: background-position .35s ease, transform .15s ease; 3590 font-family: inherit; 3591 text-shadow: 0 1px 0 rgba(0,0,0,.15); 3592 } 3593 #hot-left-hero-98141 .hlh-btn:hover { 3594 background-position: 100% 50%; 3595 transform: translateY(-1px); 3596 } 3597 #hot-left-hero-98141 .hlh-btn:active { transform: translateY(0); } 3598 #hot-left-hero-98141 .hlh-btn__flame svg { width: 16px; height: 16px; } 3599 #hot-left-hero-98141 .hlh-btn__arrow svg { width: 16px; height: 16px; transition: transform .2s ease; } 3600 #hot-left-hero-98141 .hlh-btn:hover .hlh-btn__arrow svg { transform: translateX(3px); } 3601 3602 /* Layered "fire" glow */ 3603 #hot-left-hero-98141 .hlh-btn--fire { 3604 animation: hlhFireGlow 2.6s ease-in-out infinite; 3605 } 3606 #hot-left-hero-98141 .hlh-btn--fire::before, 3607 #hot-left-hero-98141 .hlh-btn--fire::after { 3608 content: ""; position: absolute; inset: -2px; 3609 border-radius: inherit; pointer-events: none; 3610 z-index: -1; 3611 } 3612 #hot-left-hero-98141 .hlh-btn--fire::before { 3613 background: var(--hlh-grad); 3614 filter: blur(14px); opacity: .55; 3615 animation: hlhFireFlicker 3.2s ease-in-out infinite; 3616 } 3617 #hot-left-hero-98141 .hlh-btn--fire::after { 3618 inset: -6px; 3619 background: radial-gradient(closest-side, rgba(234,102,41,.45), transparent 70%); 3620 filter: blur(16px); opacity: .35; 3621 animation: hlhFireFlicker 4.5s ease-in-out infinite reverse; 3622 } 3623 @keyframes hlhFireGlow { 3624 0%, 100% { 3625 box-shadow: 3626 0 0 0 0 rgba(234,42,41,.22), 3627 0 6px 18px rgba(229,145,57,.22), 3628 0 10px 28px rgba(234,102,41,.18); 3629 } 3630 50% { 3631 box-shadow: 3632 0 0 0 2px rgba(234,42,41,.30), 3633 0 8px 24px rgba(229,145,57,.34), 3634 0 14px 38px rgba(234,102,41,.32); 3635 } 3636 } 3637 @keyframes hlhFireFlicker { 3638 0%, 100% { opacity: .35; transform: scale(1); } 3639 40% { opacity: .55; transform: scale(1.02); } 3640 60% { opacity: .42; transform: scale(.99); } 3641 } 3642 3643 #hot-left-hero-98141 .hlh-panel[data-panel="individual"] .hlh-btn--fire { 3644 margin-bottom: 6px; 3645 } 3646 #hot-left-hero-98141 .hlh-disclosures-link { 3647 margin: 14px 0 0; 3648 font-size: 13px; 3649 line-height: 1.5; 3650 color: var(--hlh-mute); 3651 } 3652 #hot-left-hero-98141 .hlh-disclosures-link a { 3653 color: #E8590C; 3654 font-weight: 700; 3655 text-decoration: underline; 3656 text-underline-offset: 2px; 3657 } 3658 #hot-left-hero-98141 .hlh-disclosures-link a:hover { color: #CC2200; } 3659 #hot-left-hero-98141 .hlh-subline { 3660 margin-top: 12px; 3661 font-size: 11.5px; 3662 color: var(--hlh-mute); 3663 text-align: center; 3664 line-height: 1.35; 3665 } 3666 #hot-left-hero-98141 .hlh-subline--refer { 3667 position: relative; 3668 display: flex; 3669 flex-direction: column; 3670 align-items: center; 3671 justify-content: center; 3672 gap: 4px; 3673 margin: 10px 0 4px; 3674 padding: 12px 16px; 3675 text-align: center; 3676 background: rgba(34, 197, 94, .07); 3677 border: 1px solid rgba(20, 130, 63, .2); 3678 border-radius: 10px; 3679 } 3680 #hot-left-hero-98141 .hlh-subline__refer-lede { 3681 display: inline-flex; 3682 align-items: center; 3683 justify-content: center; 3684 gap: 7px; 3685 max-width: 100%; 3686 font-size: 12.5px; 3687 font-weight: 600; 3688 line-height: 1.35; 3689 color: var(--hlh-ink-2); 3690 letter-spacing: .01em; 3691 } 3692 #hot-left-hero-98141 .hlh-subline__refer-icon { 3693 display: inline-flex; 3694 align-items: center; 3695 justify-content: center; 3696 flex: 0 0 auto; 3697 width: 22px; 3698 height: 22px; 3699 border-radius: 50%; 3700 background: rgba(34, 197, 94, .14); 3701 color: #14823f; 3702 } 3703 #hot-left-hero-98141 .hlh-subline__refer-icon svg { 3704 width: 12px; 3705 height: 12px; 3706 } 3707 #hot-left-hero-98141 .hlh-subline__refer-amount { 3708 display: block; 3709 font-size: 20px; 3710 font-weight: 800; 3711 line-height: 1.1; 3712 letter-spacing: -.03em; 3713 color: #14823f; 3714 font-variant-numeric: tabular-nums; 3715 } 3716 #hot-left-hero-98141 .hlh-refer-trigger { 3717 appearance: none; 3718 -webkit-appearance: none; 3719 outline: none; 3720 cursor: pointer; 3721 transition: box-shadow .2s ease, border-color .2s ease; 3722 text-align: center; 3723 font-family: inherit; 3724 font-size: inherit; 3725 line-height: inherit; 3726 width: 100%; 3727 color: inherit; 3728 overflow: visible; 3729 } 3730 #hot-left-hero-98141 .hlh-refer-trigger:hover, 3731 #hot-left-hero-98141 .hlh-refer-trigger:focus-within { 3732 border-color: rgba(20, 130, 63, .45); 3733 box-shadow: 0 4px 14px -6px rgba(20, 130, 63, .25); 3734 z-index: 100; 3735 } 3736 #hot-left-hero-98141 .hlh-refer-info { 3737 position: absolute; 3738 top: 8px; 3739 right: 10px; 3740 display: inline-flex; 3741 align-items: center; 3742 justify-content: center; 3743 color: #6b7280; 3744 cursor: help; 3745 transition: color .2s ease; 3746 } 3747 #hot-left-hero-98141 .hlh-refer-info:hover, 3748 #hot-left-hero-98141 .hlh-refer-info:focus { 3749 color: #14823f; 3750 z-index: 9999; 3751 } 3752 #hot-left-hero-98141 .hlh-refer-info__tooltip { 3753 position: absolute; 3754 bottom: calc(100% + 10px); 3755 right: -6px; 3756 width: 250px; 3757 padding: 11px 14px; 3758 font-size: 12px; 3759 font-weight: 500; 3760 line-height: 1.5; 3761 color: #fff; 3762 background: #1f2937; 3763 border-radius: 9px; 3764 box-shadow: 0 10px 30px -6px rgba(0,0,0,.35); 3765 opacity: 0; 3766 visibility: hidden; 3767 transform: translateY(4px); 3768 transition: opacity .2s ease, transform .2s ease, visibility .2s ease; 3769 pointer-events: none; 3770 text-align: left; 3771 z-index: 9999; 3772 } 3773 #hot-left-hero-98141 .hlh-refer-info__tooltip::after { 3774 content: ""; 3775 position: absolute; 3776 top: 100%; 3777 right: 10px; 3778 border: 5px solid transparent; 3779 border-top-color: #1f2937; 3780 } 3781 #hot-left-hero-98141 .hlh-refer-info:hover .hlh-refer-info__tooltip, 3782 #hot-left-hero-98141 .hlh-refer-info:focus .hlh-refer-info__tooltip { 3783 opacity: 1; 3784 visibility: visible; 3785 transform: translateY(0); 3786 } 3787 3788 body >
3788 .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] { 3789 --hlh-ink: #0f1115; 3790 --hlh-mute: #6b7280; 3791 --hlh-line: rgba(15,17,21,.08); 3792 position: fixed; 3793 inset: 0; 3794 z-index: 999999; 3795 display: flex; 3796 align-items: center; 3797 justify-content: center; 3798 padding: 20px; 3799 box-sizing: border-box; 3800 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 3801 line-height: 1.5; 3802 } 3803 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] *, 3804 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] *::before, 3805 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] *::after { 3806 box-sizing: border-box; 3807 } 3808 .hlh-refer-modal--portal[hidden] { 3809 display: none !important; 3810 } 3811 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"][hidden] { 3812 display: none !important; 3813 } 3814 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__backdrop { 3815 position: fixed; 3816 inset: 0; 3817 background: rgba(15, 17, 21, .5); 3818 backdrop-filter: blur(2px); 3819 -webkit-backdrop-filter: blur(2px); 3820 } 3821 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__panel { 3822 position: relative; 3823 z-index: 1; 3824 width: min(440px, calc(100vw - 40px)); 3825 max-height: min(85vh, 640px); 3826 overflow-y: auto; 3827 overflow-x: hidden; 3828 background: #fff; 3829 border-radius: 16px; 3830 padding: 28px 24px 22px; 3831 box-shadow: 0 24px 60px rgba(15, 17, 21, .25), 0 0 0 1px rgba(15, 17, 21, .05); 3832 } 3833 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__close { 3834 position: absolute; 3835 top: 14px; 3836 right: 16px; 3837 border: 0; 3838 background: transparent; 3839 font-size: 24px; 3840 line-height: 1; 3841 color: var(--hlh-mute); 3842 cursor: pointer; 3843 padding: 4px; 3844 border-radius: 4px; 3845 transition: background .15s ease; 3846 } 3847 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__close:hover { 3848 background: rgba(0,0,0,.05); 3849 } 3850 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__title { 3851 margin: 0 32px 6px 0; 3852 padding: 0; 3853 font-size: 1.2rem; 3854 font-weight: 800; 3855 color: var(--hlh-ink); 3856 line-height: 1.3; 3857 } 3858 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__lede { 3859 margin: 0 0 20px; 3860 padding: 0; 3861 font-size: 13px; 3862 color: var(--hlh-mute); 3863 line-height: 1.4; 3864 } 3865 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__form { 3866 display: block; 3867 } 3868 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__fieldset { 3869 border: 0; 3870 padding: 0; 3871 margin: 0 0 18px; 3872 min-width: 0; 3873 } 3874 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__legend { 3875 display: block; 3876 width: 100%; 3877 font-size: 13.5px; 3878 font-weight: 700; 3879 color: var(--hlh-ink); 3880 margin: 0 0 12px; 3881 padding: 0 0 8px; 3882 border-bottom: 1px solid rgba(15,17,21,.06); 3883 } 3884 body >
3884 .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__label { 3885 display: block; 3886 margin: 0 0 12px; 3887 padding: 0; 3888 } 3889 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__label span { 3890 display: block; 3891 font-size: 12px; 3892 font-weight: 600; 3893 color: var(--hlh-ink); 3894 margin: 0 0 5px; 3895 padding: 0; 3896 } 3897 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__label abbr { 3898 color: #ea2a29; 3899 text-decoration: none; 3900 } 3901 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__input { 3902 display: block; 3903 width: 100%; 3904 padding: 10px 12px; 3905 font-size: 14px; 3906 font-family: inherit; 3907 line-height: 1.4; 3908 border: 1.5px solid rgba(15, 17, 21, .15); 3909 border-radius: 8px; 3910 background: #fafafa; 3911 color: var(--hlh-ink); 3912 transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; 3913 outline: none; 3914 margin: 0; 3915 appearance: none; 3916 -webkit-appearance: none; 3917 } 3918 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__input:focus { 3919 border-color: #14823f; 3920 box-shadow: 0 0 0 3px rgba(20, 130, 63, .1); 3921 background: #fff; 3922 } 3923 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit { 3924 --hlh-grad: linear-gradient(270deg, #e59139, #ea2a29, #ea6629); 3925 position: relative; 3926 display: inline-flex; 3927 align-items: center; 3928 justify-content: center; 3929 gap: 8px; 3930 width: 100%; 3931 margin-top: 8px; 3932 border: 0; 3933 border-radius: 12px; 3934 padding: 14px 18px; 3935 font-size: 14.5px; 3936 font-weight: 800; 3937 letter-spacing: .01em; 3938 color: #fff; 3939 text-decoration: none; 3940 cursor: pointer; 3941 background-image: var(--hlh-grad); 3942 background-size: 200% 100%; 3943 background-position: 0% 50%; 3944 transition: background-position .35s ease, transform .15s ease; 3945 font-family: inherit; 3946 text-shadow: 0 1px 0 rgba(0,0,0,.15); 3947 box-shadow: 0 6px 18px rgba(229,145,57,.22), 0 10px 28px rgba(234,102,41,.18); 3948 } 3949 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit:hover { 3950 background-position: 100% 50%; 3951 transform: translateY(-1px); 3952 } 3953 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit:disabled { 3954 opacity: .65; 3955 cursor: not-allowed; 3956 transform: none; 3957 } 3958 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit .hlh-btn__label { 3959 font-size: inherit; 3960 font-weight: inherit; 3961 color: inherit; 3962 } 3963 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit .hlh-btn__arrow svg { 3964 width: 16px; 3965 height: 16px; 3966 transition: transform .2s ease; 3967 } 3968 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__submit:hover .hlh-btn__arrow svg { 3969 transform: translateX(3px); 3970 } 3971 body > .hlh-refer-modal--portal[data-hlh-root="hot-left-hero-98141"] .hlh-refer-modal__success { 3972 margin: 16px 0 0; 3973 padding: 14px 16px; 3974 font-size: 13.5px; 3975 font-weight: 600; 3976 color: #14823f; 3977 background: rgba(34, 197, 94, .08); 3978 border: 1px solid rgba(20, 130, 63, .2); 3979 border-radius: 10px; 3980 text-align: center; 3981 line-height: 1.4; 3982 } 3983 3984 #hot-left-hero-98141 .hlh-pillars { 3985 display: grid; grid-template-columns: 1fr 1fr; gap: 8px; 3986 margin: 4px 0 14px; 3987 } 3988 #hot-left-hero-98141 .hlh-pillar { 3989 display: flex; flex-direction: column; gap: 2px; 3990 padding: 10px 12px; 3991 background: #fff; 3992 border: 1px solid var(--hlh-line); 3993 border-radius: 10px; 3994 position: relative; 3995 overflow: hidden; 3996 } 3997 #hot-left-hero-98141 .hlh-pillar::before { 3998 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; 3999 background: var(--hlh-grad); 4000 } 4001 #hot-left-hero-98141 .hlh-pillar strong { 4002 font-size: 12.5px; font-weight: 800; color: var(--hlh-ink); 4003 } 4004 #hot-left-hero-98141 .hlh-pillar small { 4005 font-size: 11px; color: var(--hlh-mute); 4006 } 4007 4008 #hot-left-hero-98141 .hlh-cross-link { 4009 font-size: 12px; color: var(--hlh-ink-2); 4010 margin-top: 12px; 4011 } 4012 #hot-left-hero-98141 .hlh-cross-link a { 4013 font-weight: 800; 4014 background-image: var(--hlh-grad); 4015 -webkit-background-clip: text; background-clip: text; 4016 -webkit-text-fill-color: transparent; 4017 text-decoration: none; 4018 } 4019 #hot-left-hero-98141 .hlh-cross-link a:hover { text-decoration: underline; -webkit-text-decoration-color: var(--hlh-orange); } 4020 4021 @media (max-width: 480px) { 4022 #hot-left-hero-98141.hot-left-hero { padding: 14px; border-radius: 14px; } 4023 #hot-left-hero-98141 .hlh-pillars { grid-template-columns: 1fr; } 4024 #hot-left-hero-98141 .hlh-feature-row { gap: 4px 12px; font-size: 12px; } 4025 } 4026 @media (prefers-reduced-motion: reduce) { 4027 #hot-left-hero-98141 .hlh-btn--fire, 4028 #hot-left-hero-98141 .hlh-btn--fire::before, 4029 #hot-left-hero-98141 .hlh-btn--fire::after, 4030 #hot-left-hero-98141 .hlh-pulse-dot { animation: none !important; } 4031 } 4032 </style> 4033 4034
4034<script> 4035 (function() { 4036 const root = document.getElementById('hot-left-hero-98141'); 4037 if (!root) { return; } 4038 4039 const switchEl = root.querySelector('.hlh-switch'); 4040 const switchButtons = root.querySelectorAll('.hlh-switch__btn'); 4041 const panels = root.querySelectorAll('.hlh-panel'); 4042 const syncAccount = root.getAttribute('data-sync-account') === '1'; 4043 4044 function setHeroMode(mode) { 4045 switchButtons.forEach(function(btn) { btn.classList.remove('is-active'); }); 4046 panels.forEach(function(panel) { panel.classList.remove('is-active'); }); 4047 const activeBtn = root.querySelector('.hlh-switch__btn[data-mode="' + mode + '"]'); 4048 if (activeBtn) { activeBtn.classList.add('is-active'); } 4049 if (switchEl) { switchEl.setAttribute('data-active', mode); } 4050 const target = root.querySelector('.hlh-panel[data-panel="' + mode + '"]'); 4051 if (target) { target.classList.add('is-active'); } 4052 if (syncAccount) { 4053 document.body.setAttribute('data-account', mode); 4054 document.dispatchEvent(new CustomEvent('hot-left-hero-account-mode', { detail: { mode: mode } })); 4055 } 4056 } 4057 4058 switchButtons.forEach(function(button) { 4059 button.addEventListener('click', function() { 4060 setHeroMode(button.getAttribute('data-mode')); 4061 }); 4062 }); 4063 4064 if (syncAccount) { 4065 root.querySelectorAll('.hlh-cross-link a').forEach(function(link) { 4066 link.addEventListener('click', function(e) { 4067 e.preventDefault(); 4068 const panel = link.closest('.hlh-panel'); 4069 const targetMode = panel && panel.getAttribute('data-panel') === 'individual' 4070 ? 'company' 4071 : 'individual'; 4072 setHeroMode(targetMode); 4073 }); 4074 }); 4075 } 4076 4077 const defaultMode = root.getAttribute('data-default-mode') || 'individual'; 4078 setHeroMode(defaultMode); 4079 4080 // Rotating testimonials â one independent interval per block. 4081 root.querySelectorAll('.hlh-testimonial').forEach(function(block) { 4082 var items = block.querySelectorAll('.hlh-testimonial__item'); 4083 if (items.length <= 1) { return; } 4084 var idx = 0; 4085 window.setInterval(function() { 4086 items[idx].classList.remove('is-active'); 4087 idx = (idx + 1) % items.length; 4088 items[idx].classList.add('is-active'); 4089 }, 3500); 4090 }); 4091 4092 // Rotating ticker â one independent interval per ticker block. 4093 root.querySelectorAll('.hlh-ticker').forEach(function(ticker) { 4094 var items = ticker.querySelectorAll('.hlh-ticker__item'); 4095 if (items.length <= 1) { return; } 4096 var ti = 0; 4097 window.setInterval(function() { 4098 items[ti].classList.remove('is-active'); 4099 ti = (ti + 1) % items.length; 4100 items[ti].classList.add('is-active'); 4101 }, 2200); 4102 }); 4103 4104 // Quick Start dropdown â open/close, version modal, chips, cart 4105 const dropdown = root.querySelector('.hlh-dropdown'); 4106 const trigger = root.querySelector('.hlh-dropdown__trigger'); 4107 const triggerCnt = root.querySelector('.hlh-dropdown__count'); 4108 const footCount = root.querySelector('.hlh-dropdown__foot-count'); 4109 const footTotal = root.querySelector('.hlh-dropdown__foot-total'); 4110 const chipsWrap = root.querySelector('.hlh-chips'); 4111 const checks = root.querySelectorAll('.hlh-dropdown input[type="checkbox"]'); 4112 const versionModal = root.querySelector('.hlh-version-modal'); 4113 const versionTitle = versionModal ? versionModal.querySelector('.hlh-version-modal__title') : null; 4114 const versionList = versionModal ? versionModal.querySelector('.hlh-version-modal__list') : null; 4115 let activeVersionInput = null; 4116 let bodyScrollLock = ''; 4117 4118 if (versionModal && versionModal.parentNode !== document.body) { 4119 document.body.appendChild(versionModal); 4120 } 4121 4122 function setOpen(open) { 4123 if (!dropdown || !trigger) return; 4124 dropdown.setAttribute('data-open', open ? 'true' : 'false'); 4125 trigger.setAttribute('aria-expanded', open ? 'true' : 'false'); 4126 if (open) { 4127 document.body.classList.add('hlh-qs-dropdown-open'); 4128 } else { 4129 document.body.classList.remove('hlh-qs-dropdown-open'); 4130 } 4131 } 4132 4133 function closeVersionModal() { 4134 if (!versionModal) return; 4135 versionModal.hidden = true; 4136 activeVersionInput = null;
4137 if (versionList) versionList.innerHTML = ''; 4138 // Always restore. The saved value is normally '' (no inline 4139 // overflow set), and the previous `!== ''` guard skipped the 4140 // restore in exactly that case -- leaving overflow:hidden 4141 // stuck on <body>, so the page could not scroll after the 4142 // version modal closed. Assigning '' clears the inline 4143 // style, which is the correct restore. 4144 document.body.style.overflow = bodyScrollLock; 4145 bodyScrollLock = ''; 4146 } 4147 4148 function openVersionModal(input) { 4149 if (!versionModal || !versionList || !input) return; 4150 let versions = []; 4151 try { 4152 versions = JSON.parse(input.dataset.versions || '[]'); 4153 } catch (err) { 4154 versions = []; 4155 } 4156 if (!versions.length) return; 4157 4158 activeVersionInput = input; 4159 const familyName = input.dataset.familyName || input.dataset.name || 'Course'; 4160 if (versionTitle) { 4161 versionTitle.textContent = familyName; 4162 } 4163 versionList.innerHTML = ''; 4164 4165 versions.forEach(function(ver) { 4166 const btn = document.createElement('button'); 4167 btn.type = 'button'; 4168 btn.className = 'hlh-version-modal__option'; 4169 const label = ver.label || ver.name || ('Course ' + ver.id); 4170 const time = ver.time || ''; 4171 const price = ver.price || ''; 4172 btn.innerHTML = 4173 '<span class="hlh-version-modal__option-meta">' + 4174 '<span class="hlh-version-modal__option-label"></span>' + 4175 '<span class="hlh-version-modal__option-sub"></span>' + 4176 '</span>' + 4177 '<span class="hlh-version-modal__option-price"></span>'; 4178 btn.querySelector('.hlh-version-modal__option-label').textContent = label; 4179 btn.querySelector('.hlh-version-modal__option-sub').textContent = time; 4180 btn.querySelector('.hlh-version-modal__option-price').textContent = price; 4181 btn.addEventListener('click', function() { 4182 applyVersionSelection(input, ver); 4183 closeVersionModal(); 4184 }); 4185 versionList.appendChild(btn); 4186 }); 4187 4188 bodyScrollLock = document.body.style.overflow || ''; 4189 document.body.style.overflow = 'hidden'; 4190 versionModal.hidden = false; 4191 } 4192 4193 function resetVersionedRow(input) { 4194 const row = input.closest('.hlh-dropdown__item'); 4195 input.value = ''; 4196 input.dataset.lmsId = ''; 4197 input.dataset.price = '0'; 4198 input.dataset.versionLabel = ''; 4199 input.removeAttribute('value'); 4200 if (row) { 4201 const priceEl = row.querySelector('.hlh-dropdown__price'); 4202 const subEl = row.querySelector('.hlh-dropdown__sub'); 4203 if (priceEl) { 4204 priceEl.textContent = 'â'; 4205 priceEl.classList.add('hlh-dropdown__price--pending'); 4206 } 4207 if (subEl) { 4208 subEl.classList.add('hlh-dropdown__sub--hint'); 4209 const clockSvg = subEl.querySelector('svg'); 4210 subEl.textContent = ''; 4211 if (clockSvg) subEl.appendChild(clockSvg.cloneNode(true)); 4212 subEl.appendChild(document.createTextNode(' Choose version')); 4213 } 4214 } 4215 } 4216 4217 function applyVersionSelection(input, ver) {
4218 const row = input.closest('.hlh-dropdown__item'); 4219 const id = parseInt(ver.id, 10); 4220 const priceNum = parseFloat(ver.price_num || ver.price || '0') || 0; 4221 const label = ver.label || ver.name || ''; 4222 input.dataset.lmsId = String(id); 4223 input.dataset.price = String(priceNum); 4224 input.dataset.versionLabel = label; 4225 input.value = String(id); 4226 input.checked = true; 4227 if (row) { 4228 const priceEl = row.querySelector('.hlh-dropdown__price'); 4229 const subEl = row.querySelector('.hlh-dropdown__sub'); 4230 if (priceEl) { 4231 priceEl.textContent = ver.price || ('$' + (priceNum % 1 === 0 ? priceNum.toFixed(0) : priceNum.toFixed(2))); 4232 priceEl.classList.remove('hlh-dropdown__price--pending'); 4233 } 4234 if (subEl && ver.time) { 4235 subEl.classList.remove('hlh-dropdown__sub--hint'); 4236 const clockSvg = subEl.querySelector('svg'); 4237 subEl.textContent = ''; 4238 if (clockSvg) subEl.appendChild(clockSvg.cloneNode(true)); 4239 subEl.appendChild(document.createTextNode(' ' + ver.time)); 4240 } 4241 } 4242 update(); 4243 } 4244 4245 function isVersioned(input) { 4246 return input && input.dataset.type === 'versioned'; 4247 } 4248 4249 function chipLabel(input) { 4250 const base = input.dataset.familyName || input.dataset.name || 'Course'; 4251 const ver = input.dataset.versionLabel || ''; 4252 return ver ? (base + ' â ' + ver) : base; 4253 } 4254 4255 if (trigger) { 4256 trigger.addEventListener('click', function(e) { 4257 e.preventDefault(); 4258 e.stopPropagation(); 4259 const isOpen = dropdown.getAttribute('data-open') === 'true'; 4260 setOpen(!isOpen); 4261 }); 4262 } 4263 4264 if (dropdown) { 4265 dropdown.addEventListener('click', function(e) { 4266 e.stopPropagation(); 4267 }); 4268 } 4269 4270 document.addEventListener('click', function(e) { 4271 if (versionModal && !versionModal.hidden) { 4272 if (e.target.closest('[data-close="1"]') || e.target.classList.contains('hlh-version-modal__close')) { 4273 if (activeVersionInput) activeVersionInput.checked = false; 4274 closeVersionModal(); 4275 update(); 4276 return; 4277 } 4278 } 4279 if (versionModal && !versionModal.hidden) { 4280 return; 4281 } 4282 if (!dropdown || !dropdown.contains(e.target)) { 4283 setOpen(false); 4284 } 4285 }); 4286 4287 document.addEventListener('keydown', function(e) { 4288 if (e.key === 'Escape') { 4289 if (versionModal && !versionModal.hidden) { 4290 if (activeVersionInput) activeVersionInput.checked = false; 4291 closeVersionModal(); 4292 update(); 4293 return; 4294 } 4295 setOpen(false); 4296 } 4297 }); 4298 4299 function fmtPrice(n) { 4300 return (n % 1 === 0) ? n.toFixed(0) : n.toFixed(2); 4301 } 4302 4303 function renderChips(selected) { 4304 if (!chipsWrap) return; 4305 chipsWrap.innerHTML = ''; 4306 selected.forEach(function(c) { 4307 const chip = document.createElement('span'); 4308 chip.className = 'hlh-chip'; 4309 chip.textContent = chipLabel(c); 4310 4311 const x = document.createElement('button'); 4312 x.type = 'button'; 4313 x.className = 'hlh-chip__x'; 4314 x.setAttribute('aria-label', 'Remove ' + chipLabel(c)); 4315 x.innerHTML = '\u00D7'; 4316 x.addEventListener('click', function() { 4317 if (isVersioned(c)) resetVersionedRow(c); 4318 c.checked = false;
4319 update(); 4320 }); 4321 chip.appendChild(x); 4322 chipsWrap.appendChild(chip); 4323 }); 4324 } 4325 4326 function update() { 4327 let count = 0, total = 0; 4328 const selected = []; 4329 checks.forEach(function(c) { 4330 if (!c.checked) return; 4331 if (isVersioned(c) && !c.dataset.lmsId) { 4332 c.checked = false; 4333 return; 4334 } 4335 count++; 4336 total += parseFloat(c.dataset.price || '0') || 0; 4337 selected.push(c); 4338 }); 4339 const dollars = fmtPrice(total); 4340 4341 if (triggerCnt) { 4342 triggerCnt.textContent = count === 0 ? '0 selected' : (count + ' · $' + dollars); 4343 triggerCnt.setAttribute('data-empty', count === 0 ? 'true' : 'false'); 4344 } 4345 if (footCount) { 4346 footCount.textContent = count + (count === 1 ? ' course selected' : ' courses selected'); 4347 } 4348 if (footTotal) { 4349 footTotal.textContent = '$' + dollars; 4350 } 4351 renderChips(selected); 4352 } 4353 4354 checks.forEach(function(c) { 4355 c.addEventListener('change', function() { 4356 if (isVersioned(c)) { 4357 if (c.checked && !c.dataset.lmsId) { 4358 c.checked = false; 4359 openVersionModal(c); 4360 return; 4361 } 4362 if (!c.checked) { 4363 resetVersionedRow(c); 4364 } 4365 } 4366 update(); 4367 }); 4368 if (isVersioned(c)) { 4369 const item = c.closest('.hlh-dropdown__item--versioned'); 4370 if (item) { 4371 item.addEventListener('click', function(e) { 4372 if (e.target === c) return; 4373 e.preventDefault(); 4374 e.stopPropagation(); 4375 openVersionModal(c); 4376 }); 4377 } 4378 } 4379 }); 4380 update(); 4381 4382 const preselectId = root.getAttribute('data-preselect-lms-id'); 4383 if (preselectId) { 4384 checks.forEach(function(c) { 4385 if (isVersioned(c)) { 4386 let versions = []; 4387 try { 4388 versions = JSON.parse(c.dataset.versions || '[]'); 4389 } catch (_) { 4390 versions = []; 4391 } 4392 const ver = versions.find(function(v) { 4393 return String(v.id) === String(preselectId); 4394 }); 4395 if (ver) { 4396 applyVersionSelection(c, ver); 4397 } 4398 return; 4399 } 4400 const lmsId = c.dataset.lmsId || c.value || ''; 4401 if (String(lmsId).split(',').indexOf(String(preselectId)) !== -1) { 4402 c.checked = true; 4403 } 4404 }); 4405 update(); 4406 } 4407 4408 // Referral modal 4409 const referInfo = root.querySelector('.hlh-refer-info'); 4410 const referModal = root.querySelector('.hlh-refer-modal'); 4411 const referTrigger = root.querySelector('.hlh-refer-trigger'); 4412 let referScrollLock = ''; 4413 4414 if (referModal && referModal.parentNode !== document.body) { 4415 document.body.appendChild(referModal); 4416 } 4417 4418 function openReferModal() { 4419 if (!referModal) return; 4420 referScrollLock = document.body.style.overflow || ''; 4421 document.body.style.overflow = 'hidden'; 4422 referModal.hidden = false;
4423 } 4424 4425 function closeReferModal() { 4426 if (!referModal) return; 4427 referModal.hidden = true; 4428 // Same unconditional restore as closeVersionModal(). 4429 document.body.style.overflow = referScrollLock; 4430 referScrollLock = ''; 4431 } 4432 4433 if (referTrigger) { 4434 referTrigger.addEventListener('click', function(e) { 4435 if (referInfo && referInfo.contains(e.target)) { 4436 e.stopPropagation(); 4437 return; 4438 } 4439 openReferModal(); 4440 }); 4441 } 4442 4443 if (referModal) { 4444 referModal.addEventListener('click', function(e) { 4445 if (e.target.closest('[data-refer-close="1"]') || e.target.classList.contains('hlh-refer-modal__close')) { 4446 closeReferModal(); 4447 } 4448 }); 4449 4450 var referSubmit = referModal.querySelector('.hlh-refer-modal__submit'); 4451 if (referSubmit) { 4452 referSubmit.addEventListener('click', function() { 4453 var inputs = referModal.querySelectorAll('.hlh-refer-modal__input[required]'); 4454 var valid = true; 4455 inputs.forEach(function(inp) { 4456 if (!inp.value.trim()) { valid = false; inp.focus(); } 4457 else if (inp.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inp.value.trim())) { 4458 valid = false; inp.focus(); 4459 } 4460 }); 4461 if (!valid) return; 4462 4463 var data = {}; 4464 referModal.querySelectorAll('.hlh-refer-modal__input').forEach(function(inp) { 4465 data[inp.name] = inp.value.trim(); 4466 }); 4467 4468 var formData = new FormData(); 4469 formData.append('action', 'hlh_submit_referral'); 4470 formData.append('refer_company', data.refer_company || ''); 4471 formData.append('refer_contact', data.refer_contact || ''); 4472 formData.append('refer_phone', data.refer_phone || ''); 4473 formData.append('refer_email', data.refer_email || ''); 4474 formData.append('referrer_name', data.referrer_name || ''); 4475 formData.append('referrer_email', data.referrer_email || ''); 4476 formData.append('referrer_phone', data.referrer_phone || ''); 4477 4478 referSubmit.disabled = true; 4479 referSubmit.querySelector('.hlh-btn__label').textContent = 'Submittingâ¦'; 4480 4481 fetch('https://homeoftraining.com/wp-admin/admin-ajax.php', { 4482 method: 'POST', 4483 body: formData 4484 }).then(function(r) { return r.json(); }).then(function(res) { 4485 var success = referModal.querySelector('.hlh-refer-modal__success'); 4486 var formEl = referModal.querySelector('.hlh-refer-modal__form'); 4487 if (success && formEl) { 4488 formEl.querySelectorAll('.hlh-refer-modal__fieldset, .hlh-refer-modal__submit').forEach(function(el) { el.hidden = true; }); 4489 success.hidden = false; 4490 } 4491 setTimeout(function() { closeReferModal(); }, 3000); 4492 }).catch(function() { 4493 referSubmit.disabled = false; 4494 referSubmit.querySelector('.hlh-btn__label').textContent = 'Submit Referral'; 4495 alert('Something went wrong. Please try again.'); 4496 }); 4497 }); 4498 } 4499 } 4500 4501 document.addEventListener('keydown', function(e) { 4502 if (e.key === 'Escape' && referModal && !referModal.hidden) { 4503 closeReferModal(); 4504 } 4505 }); 4506 4507 function navigateToQuickStart() { 4508 const picked = Array.prototype.filter.call(checks, function(c) { 4509 return c.checked && (!isVersioned(c) || c.dataset.lmsId); 4510 }); 4511 const idSet = new Set(); 4512 picked.forEach(function(c) { 4513 String(c.dataset.lmsId || c.value || '').split(',').forEach(function(s) { 4514 const n = parseInt(s.trim(), 10); 4515 if (n > 0) idSet.add(n); 4516 }); 4517 }); 4518 let url = 'https://lms.homeoftraining.com/#/pricing?'; 4519 if (idSet.size) { 4520 url += 'courses=' + encodeURIComponent(Array.from(idSet).join(',')) + '&'; 4521 } 4522 // Individual Quick Start â without this the LMS pricing 4523 // page defaults to the Company tab/flow. 4524 url += 'account_type=individual&'; 4525 url += 'utm_source=hot-landing&utm_medium=hero&utm_campaign=left_hero'; 4526 window.location.assign(url); 4527 } 4528 4529 const form = root.querySelector('.hlh-quick-start'); 4530 if (form) { 4531 form.addEventListener('submit', function(e) { 4532 e.preventDefault(); 4533 e.stopPropagation(); 4534 navigateToQuickStart(); 4535 }); 4536 4537 form.querySelectorAll('button[type="submit"]').forEach(function(btn
4537) { 4538 btn.addEventListener('click', function(e) { 4539 e.stopPropagation(); 4540 }); 4541 }); 4542 } 4543 })(); 4544 </script>
4544 4545 </div> 4546 <div class="hero-visual"> 4547 <div class="hero-video-wrap"> 4548 <video class="hero-video" autoplay muted loop playsinline preload="auto" poster="https://homeoftraining.com/wp-content/uploads/hot-video/hot-hero-poster.jpg" data-vimeo-fallback="1029251829"><source src="https://homeoftraining.com/wp-content/uploads/hot-video/hot-hero.mp4" type="video/mp4"></video> </div> 4549 <div class="cert-float-badge cert-float-1"><div class="cert-float-icon green"><svg width="16" height="16" fill="none" stroke="#28a745" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> 100% Online</div> 4550 <div class="cert-float-badge cert-float-2"><div class="cert-float-icon orange"><svg width="16" height="16" fill="none" stroke="#ea580c" stroke-width="2" viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div> Instant Certificate</div> 4551 <div class="hero-mini-compliance" aria-label="Compliance certifications"> 4552 <span class="hero-mini-compliance-label">Security & Compliance</span> 4553 <div class="hero-mini-compliance-row"> 4554 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/aicpa-soc.png" alt="AICPA SOC"> 4555 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/soc-noncpa.png" alt="SOC for Service Organizations"> 4556 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/prescient.png" alt="Prescient Security"> 4557 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/prescient-soc2.png" alt="SOC 2 Type II"> 4558 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/badges/hipaa.png" alt="HIPAA Compliant"> 4559 </div> 4560 </div> 4561 </div> 4562 </div> 4563 </div> 4564 </section> 4565 4566 <!-- Logos Bar â auto-scrolling carousel --> 4567 <div class="logos-bar reveal"><div class="container"> 4568 <p class="logos-label">Trusted by 40,000+ locations including</p> 4569 <div class="logos-viewport"> 4570 <div class="logos-track"> 4571 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/burgerking.png" alt="Burger King"> 4572 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/racetrac.svg" alt="RaceTrac"> 4573 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/wingstop.png" alt="Wingstop"> 4574 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/mcdonalds.png" alt="McDonald's"> 4575 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/firstservice.png" alt="First Service"> 4576 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/burgerking.png" alt="Burger King" aria-hidden="true"> 4577 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/racetrac.svg" alt="RaceTrac" aria-hidden="true"> 4578 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/wingstop.png" alt="Wingstop" aria-hidden="true"> 4579 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/mcdonalds.png" alt="McDonald's" aria-hidden="true"> 4580 <img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/logos/firstservice.png" alt="First Service" aria-hidden="true"> 4581 </div> 4582 </div> 4583 </div></div> 4584 4585 <!-- Trust Row (Phase 11 â relocated from hero per 5/6 UAT) --> 4586 <section class="trust-row reveal" aria-label="Why learners choose Home of Training"><div class="container"> 4587 <ul class="hot-trust-badges trust-row-badges" role="list"> 4588 <li class="hot-trust-badge"><span class="hot-trust-icon" aria-hidden="true">★</span> Trusted by 100,000+ learners</li> 4589 <li class="hot-trust-badge"><span class="hot-trust-icon" aria-hidden="true">🕔</span> Start in under 60 seconds</li> 4590 <li class="hot-trust-badge"><span class="hot-trust-icon" aria-hidden="true">📜</span> Instant certificate</li> 4591 <li class="hot-trust-badge hot-trust-badge--lang"><span class="hot-trust-icon" aria-hidden="true">🌐</span> Available in multiple languages</li> 4592 </ul> 4593 </div></section> 4594 4595 4596 4597 4598 <!-- Gutenberg Content (What You'll Learn, How It Works, FAQ, etc.) --> 4599 <div class="hot-gutenberg-content"> 4600 4601<div class="wp-block-group learn-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container"> 4602<div style="text-align:center" class="reveal"><span class="section-label">Course Content</span></div> 4603<h2 class="section-title reveal">What You'll Learn</h2> 4604<div class="learn-grid"> 4605<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24">
4605<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>ID Verification</h3><p>How to properly check IDs, spot fakes, and verify legal drinking age</p></div></div> 4606<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Signs of Intoxication</h3><p>Recognizing behavioral and physical signs that a patron has had too much</p></div></div> 4607<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Refusal Techniques</h3><p>Professional strategies for cutting off service while maintaining relationships</p></div></div> 4608<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Legal Liability</h3><p>Understanding dram shop laws, personal liability, and legal responsibilities</p></div></div> 4609<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Responsible Service Practices</h3><p>Pacing drinks, offering food and water, creating a safe environment</p></div></div> 4610<div class="learn-item reveal-item"><div class="learn-icon"><svg width="22" height="22" fill="none" stroke="#E8590C" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div><h3>Intervention Strategies</h3><p>How to handle difficult situations including underage attempts and over-service</p></div></div> 4611</div> 4612</div></div></div> 4613 4614 4615<div class="wave-divider white-to-gray"></div> 4616 4617 4618<div class="wp-block-group steps-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container"> 4619<div style="text-align:center" class="reveal"><span class="section-label">Simple Process</span></div> 4620<h2 class="section-title reveal">How It Works</h2> 4621<p class="section-subtitle reveal">Three simple steps to your certificate</p> 4622<div class="steps-row"> 4623<div class="step reveal-item"><div class="step-number">1</div><h3>Sign Up</h3><p>Create your account and purchase the course. You’ll get instant access to start learning right away.</p></div> 4624<div class="step reveal-item"><div class="step-number">2</div><h3>Complete the Course</h3><p>Work through the material at your own pace, 24/7, from any device. No deadlines, no pressure.</p></div> 4625<div class="step reveal-item"><div class="step-number">3</div><h3>Get Certified</h3><p>Pass the final assessment and download your certificate immediately. It’s that simple.</p></div> 4626</div> 4627</div></div></div> 4628 4629 4630<div class="wave-divider gray-to-white"></div> 4631 4632 4633<div class="wp-block-group why-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container"> 4634<div style="text-align:center" class="reveal"><span class="section-label">Why Choose Us</span></div> 4635<h2 class="section-title reveal">Why Home of Training?</h2> 4636<p class="section-subtitle reveal">Trusted by businesses across the country since 2010</p> 4637<div class="why-grid"> 4638<div class="why-item reveal-item"><div class="why-icon"><svg width="28" height="28" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div><h3>Real Human Support</h3><p>Talk to a real person when you need help. No chatbots, no runaround. We’re here for you.</p></div> 4639<div class="why-item reveal-item"><div class="why-icon"><svg width="28" height="28" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24">
4639<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div><h3>Trusted by Major Brands</h3><p>Over 40,000 locations nationwide rely on Home of Training for their compliance needs.</p></div> 4640<div class="why-item reveal-item"><div class="why-icon"><svg width="28" height="28" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div><h3>Learn on Any Device</h3><p>Desktop, laptop, tablet, or phone. Our courses work seamlessly wherever you are.</p></div> 4641</div> 4642</div></div></div> 4643 4644 4645<div class="wave-divider gray-to-white"></div> 4646 4647 4648<div class="wp-block-group testimonials-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container"> 4649<div style="text-align:center" class="reveal"><span class="section-label">Reviews</span></div> 4650<h2 class="section-title reveal">What People Are Saying</h2> 4651<p class="section-subtitle reveal">Join thousands who've earned their certifications with Home of Training</p> 4652<div class="testimonials-grid"> 4653<div class="testimonial-card reveal-item"><div class="testimonial-stars">★★★★★</div><p class="testimonial-text">"Super easy to use. Our entire staff was certified within a week. The support team was incredibly helpful when we had questions."</p><div class="testimonial-author-row"><div class="testimonial-avatar">JA</div><div class="testimonial-info"><div class="testimonial-name">Jennifer A.</div><div class="testimonial-role">Restaurant Manager, FL</div></div></div></div> 4654<div class="testimonial-card reveal-item"><div class="testimonial-stars">★★★★★</div><p class="testimonial-text">"We've been using Home of Training for years across all our locations. Reliable, affordable, and the real human support makes all the difference."</p><div class="testimonial-author-row"><div class="testimonial-avatar">AJ</div><div class="testimonial-info"><div class="testimonial-name">Arthur J.</div><div class="testimonial-role">Operations Director</div></div></div></div> 4655<div class="testimonial-card reveal-item"><div class="testimonial-stars">★★★★★</div><p class="testimonial-text">"I completed the course on my phone during breaks. Got my certificate the same day. Couldn't have been simpler."</p><div class="testimonial-author-row"><div class="testimonial-avatar">ML</div><div class="testimonial-info"><div class="testimonial-name">Maria L.</div><div class="testimonial-role">Food Service Worker</div></div></div></div> 4656</div> 4657</div></div></div> 4658 4659 4660<div class="wave-divider white-to-gray"></div> 4661 4662 4663<div class="wp-block-group faq-section"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><div class="container"> 4664<div style="text-align:center" class="reveal"><span class="section-label">Got Questions?</span></div> 4665<h2 class="section-title reveal">Frequently Asked Questions</h2> 4666<div class="faq-list"> 4667<div class="faq-item reveal-item"><button class="faq-question">Which states accept this training?<span class="faq-chevron"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span></button><div class="faq-answer"><div class="faq-answer-inner">Home of Training is an approved provider of the NY Alcohol Training Awareness Program (ATAP) and our course meets requirements in multiple states. Contact us to confirm coverage for your specific state.</div></div></div> 4668<div class="faq-item reveal-item"><button class="faq-question">Can I train my entire staff at once?<span class="faq-chevron"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span></button><div class="faq-answer"><div class="faq-answer-inner">Yes. Each staff member creates their own account to track their individual progress and certificate. Contact us about group pricing for larger teams.</div></div></div> 4669<div class="faq-item reveal-item"><button class="faq-question">How long is the course?<span class="faq-chevron"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewB
4669ox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg></span></button><div class="faq-answer"><div class="faq-answer-inner">The course is self-paced and can be completed in a few hours. Staff can pause and resume at any time, making it easy to fit around work schedules.</div></div></div> 4670</div> 4671</div></div></div> 4672 4673 4674 </div> 4675 4676 <!-- Pricing Card --> 4677 <section class="pricing-section"><div class="container"> 4678 <div style="text-align:center" class="reveal"><span class="section-label">Enroll Now</span></div> 4679 <h2 class="section-title reveal">Everything You Need <span class="hot-price-prefix">Starting at </span><span style="color:#E8590C">$9.95</span></h2> 4680 <p class="section-subtitle reveal">One course. One price. No surprises.</p> 4681 <div class="pricing-card reveal"> 4682 <div class="pricing-popular">Best Value</div> 4683 <div class="pricing-header"> 4684 <h3>Alcohol Server Training</h3> 4685 <div class="pricing-amount"><sup>$</sup>9<sup>.95</sup></div> 4686 </div> 4687 <div class="pricing-body"> 4688 <ul class="pricing-features"> 4689 <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Full certification course</li> 4690 <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Practice quizzes throughout</li> 4691 <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Final exam included</li> 4692 <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Instant digital certificate download</li> 4693 <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Access on any device, 24/7</li> 4694 <li><div class="pricing-check"><svg width="12" height="12" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div> Real human support if you need help</li> 4695 </ul> 4696 <div class="pricing-cta"><a href="https://homeoftraining.com/go/?course=alcohol-server-training" class="btn-primary" data-cta-primary="1"><span class="cta-label-individual">Get Started Now — $9.95</span><span class="cta-label-company" aria-hidden="true">Get Started for Teams — from $29.95/mo</span></a></div> 4697 <div class="pricing-guarantee"><svg width="14" height="14" fill="none" stroke="#999" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Secure checkout · Instant access after purchase</div> 4698 </div> 4699 </div> 4700 </div></section> 4701 4702 <!-- Final CTA --> 4703 <section class="final-cta"><div class="container"> 4704 <h2 class="reveal">Ready to Get Certified?</h2> 4705 <p class="reveal">Get your alcohol server training today. Start and finish entirely on your own time â 24/7 from any device.</p> 4706 <a href="https://homeoftraining.com/go/?course=alcohol-server-training" class="btn-white reveal" data-cta-primary="1"><span class="cta-label-individual">Get Started Now — $9.95</span><span class="cta-label-company" aria-hidden="true">Get Started for Teams — from $29.95/mo</span> <svg width="16" height="16" fill="none" stroke="#E8590C" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a> 4707 <span class="final-secondary reveal">Questions? <a href="mailto:[email protected]">Contact our team</a> · <a href="tel:9546767900">954.676.7900</a></span> 4708 </div></section> 4709 4710 <!-- Footer --> 4711 <footer class="site-footer"><div class="container"> 4712 <div class="footer-grid"> 4713 <div class="footer-brand"><img src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/hot-logo.png" alt="Home of Training" class="footer-logo" style="height:36px;width:auto;"><p>Our mission is to help businesses stay compliant with industry regulations and ensure the safety of their customers.</p></div> 4714 <div class="footer-col"><h4>Quick Links</h4><ul><li><a href="https://homeoftraining.com/complaints-appeals/">Complaints & Appeals</a></li><li><a href="https://homeoftraining.com/refund-policy/">Refund Policy</a></li><li><a href="https://homeoftraining.com/accessibility/">Accessibility</a></li><li><a href="https://homeoftraining.com/non-discrimination/">Non-Discrimination</a></li></ul></div> 4715 <div class="footer-col"><h4>Follow Us</h4><ul><li><a href="https://www.linkedin.com/company/barwize">LinkedIn</a></li><li><a href="https://www.instagram.com/homeoftraining/">Instagram</a></li><li><a href="https://www.youtube.com/@homeoftraining">YouTube</a></li></ul></div> 4716 <div class="footer-col"><h4>Get in Touch</h4><ul><li><a href="mailto:[email protected]">[email protected]</a></li><li><a href="tel:9546767900">954.676.7900</a></li></ul></div> 4717 </div> 4718 </div><div class="footer-bottom"><div class="container" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px"><p>© 2026 Home of Training, Inc. All rights reserved.</p><div class="footer-bottom-links"><a href="https://homeoftraining.com/terms-conditions/">Terms & Conditions</a><a href="https://homeoftraining.com/privacy-policy/">Privacy Policy</a></div></div></div></footer> 4719 4720 <!-- Sticky Mobile CTA --> 4721 <div class="mobile-sticky"><div class="mobile-sticky-inner"> 4722 <div class="mobile-sticky-price"><span class="hero-price-individual">$9.95</span><span class="hero-price-company" aria-hidden="true">$29.95<span class="hero-price-company-suffix">/mo</span></span></div>
4723 <a href="https://homeoftraining.com/go/?course=alcohol-server-training" class="btn-primary" data-cta-primary="1"><span class="cta-label-individual">Get Started Now</span><span class="cta-label-company" aria-hidden="true">Get Started for Teams</span></a> 4724 </div></div> 4725 4726 <!-- Phase 12 â Pre-checkout modal (fires for all modes, Eric 5/11 pt.2). 4727 Three sections: employees + locations (Company only), LMS-vs-license 4728 (Company only), course-only vs bundle (always). Individual mode hides 4729 the two Company-only sections via CSS â bundle picker still shows so 4730 buyers can add Food + Alcohol etc. before /go/. On submit we append 4731 the selections to /go/?... so the LMS pricing page can prefill the 4732 cart. --> 4733 <div class="hot-precheckout-backdrop" id="hot-precheckout" role="dialog" aria-modal="true" aria-labelledby="hot-precheckout-title" aria-hidden="true"> 4734 <div class="hot-precheckout-modal" role="document"> 4735 <button type="button" class="hot-precheckout-close" aria-label="Close"> 4736 <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> 4737 </button> 4738 <h2 id="hot-precheckout-title"><span class="hot-precheckout-title-individual">Add courses before checkout</span><span class="hot-precheckout-title-company" aria-hidden="true">Quick setup before checkout</span></h2> 4739 <p class="hot-precheckout-lead"><span class="hot-precheckout-lead-individual">Want to bundle? Pick one below, or stick with just this course.</span><span class="hot-precheckout-lead-company" aria-hidden="true">Three quick questions so we land you on the right pricing tier.</span></p> 4740 4741 <div class="hot-precheckout-section" data-precheckout-mode="company"> 4742 <p class="hot-precheckout-section-title">1. Your team</p> 4743 <div class="hot-precheckout-fields"> 4744 <div class="hot-precheckout-field"> 4745 <label for="hot-pc-employees">Number of employees</label> 4746 <input type="number" id="hot-pc-employees" name="employees" min="1" max="100000" value="10" inputmode="numeric"> 4747 </div> 4748 <div class="hot-precheckout-field"> 4749 <label for="hot-pc-locations">Number of locations</label> 4750 <input type="number" id="hot-pc-locations" name="locations" min="1" max="10000" value="1" inputmode="numeric"> 4751 </div> 4752 </div> 4753 </div> 4754 4755 <div class="hot-precheckout-section" data-precheckout-mode="company"> 4756 <p class="hot-precheckout-section-title">2. How you'll deliver training</p> 4757 <div class="hot-precheckout-choices"> 4758 <label class="hot-precheckout-choice is-selected" data-choice="use_lms"> 4759 <input type="radio" name="use_lms" value="lms" checked> 4760 <span class="hot-precheckout-choice-body"> 4761 <span class="hot-precheckout-choice-label">Use HOT LMS</span> 4762 <span class="hot-precheckout-choice-desc">We host the courses, track completion, issue certificates. Audit-ready dashboard included.</span> 4763 </span> 4764 </label> 4765 <label class="hot-precheckout-choice" data-choice="use_lms"> 4766 <input type="radio" name="use_lms" value="license"> 4767 <span class="hot-precheckout-choice-body"> 4768 <span class="hot-precheckout-choice-label">License our content</span> 4769 <span class="hot-precheckout-choice-desc">
4769Run the courses inside your own LMS. Per-user licensing â best for larger teams.</span> 4770 </span> 4771 </label> 4772 </div> 4773 </div> 4774 4775 <div class="hot-precheckout-section" data-precheckout-mode="all"> 4776 <p class="hot-precheckout-section-title"><span class="hot-precheckout-section-title-individual">Add a bundle and save</span><span class="hot-precheckout-section-title-company" aria-hidden="true">3. What to include</span></p> 4777 <div class="hot-precheckout-choices"> 4778 <label class="hot-precheckout-choice is-selected" data-choice="bundle"> 4779 <input type="radio" name="bundle" value="this_only" checked> 4780 <span class="hot-precheckout-choice-body"> 4781 <span class="hot-precheckout-choice-label">This course only</span> 4782 <span class="hot-precheckout-choice-desc">Alcohol Server Training</span> 4783 </span> 4784 </label> 4785 <label class="hot-precheckout-choice" data-choice="bundle"> 4786 <input type="radio" name="bundle" value="food_alcohol"> 4787 <span class="hot-precheckout-choice-body"> 4788 <span class="hot-precheckout-choice-label">Food + Alcohol bundle</span> 4789 <span class="hot-precheckout-choice-desc">Food handler + alcohol server â most common combo.</span> 4790 </span> 4791 </label> 4792 <label class="hot-precheckout-choice" data-choice="bundle"> 4793 <input type="radio" name="bundle" value="safety_compliance"> 4794 <span class="hot-precheckout-choice-body"> 4795 <span class="hot-precheckout-choice-label">Safety + Compliance bundle</span> 4796 <span class="hot-precheckout-choice-desc">OSHA, harassment, security, and our top safety modules.</span> 4797 </span> 4798 </label> 4799 <label class="hot-precheckout-choice" data-choice="bundle"> 4800 <input type="radio" name="bundle" value="full_catalog"> 4801 <span class="hot-precheckout-choice-body"> 4802 <span class="hot-precheckout-choice-label">Full catalog (100+ courses)</span> 4803 <span class="hot-precheckout-choice-desc">Everything we offer. Best per-user value for multi-location operators.</span> 4804 </span> 4805 </label> 4806 </div> 4807 </div> 4808 4809 <div class="hot-precheckout-footer"> 4810 <button type="button" class="btn-ghost" data-precheckout-cancel>Cancel</button> 4811 <button type="button" class="btn-primary" data-precheckout-submit>Continue to Pricing →</button> 4812 </div> 4813 </div> 4814 </div> 4815 4816 <!-- PostHog Tracking --> 4817
vendor: 1,770 bytes, lines 4817-4834
4817<script> 4818 !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onFeatureFlags onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); 4819 posthog.init('phc_qUd4KGL3FLJjELgve6UZDPEEKK6pEFMQbaoMBFvjVVZk', { 4820 api_host: 'https://us.i.posthog.com', 4821 person_profiles: 'identified_only', 4822 capture_pageview: true 4823 }); 4824 // Register HOT-specific properties on every event for BOS dashboard filtering 4825 posthog.register({ 4826 client: 'home-of-training', 4827 hot_page_type: 'course', 4828 hot_slug: "alcohol-server-training", 4829 hot_title: "Alcohol Server Training", 4830 hot_category: "Compliance", 4831 hot_price: 9.95, 4832 hot_url: "https:\/\/homeoftraining.com\/courses\/alcohol-server-training", 4833 hot_hero_variant: "grid-dark" }); 4834 </script>
4834 4835 4836 <!-- Individual / Company mode â syncs below-the-fold CTAs with left hero --> 4837
4837<script> 4838 (function () { 4839 var STORAGE_KEY = 'hot_account_type'; 4840 var body = document.body; 4841 var btns = document.querySelectorAll('.hot-account-toggle-btn'); 4842 var hlhRoot = document.querySelector('.hot-left-hero[data-sync-account="1"]'); 4843 4844 function applyAccount(mode) { 4845 if (mode !== 'individual' && mode !== 'company') { mode = 'individual'; } 4846 body.setAttribute('data-account', mode); 4847 for (var i = 0; i < btns.length; i++) { 4848 var b = btns[i]; 4849 var isActive = b.getAttribute('data-account-target') === mode; 4850 b.setAttribute('aria-pressed', isActive ? 'true' : 'false'); 4851 } 4852 var dualPairs = [ 4853 ['.cta-label-individual', '.cta-label-company'], 4854 ['.hero-price-individual', '.hero-price-company'], 4855 ]; 4856 for (var di = 0; di < dualPairs.length; di++) { 4857 var indEls = document.querySelectorAll(dualPairs[di][0]); 4858 var coEls = document.querySelectorAll(dualPairs[di][1]); 4859 for (var ii = 0; ii < indEls.length; ii++) { 4860 indEls[ii].setAttribute('aria-hidden', mode === 'individual' ? 'false' : 'true'); 4861 } 4862 for (var ci = 0; ci < coEls.length; ci++) { 4863 coEls[ci].setAttribute('aria-hidden', mode === 'company' ? 'false' : 'true'); 4864 } 4865 } 4866 var links = document.querySelectorAll('a[href*="/go/"]'); 4867 for (var j = 0; j < links.length; j++) { 4868 var a = links[j]; 4869 var href = a.getAttribute('href'); 4870 if (!href || href.indexOf('/go/') === -1) { continue; } 4871 try { 4872 var u = new URL(href, window.location.origin); 4873 u.searchParams.set('account_type', mode); 4874 a.setAttribute('href', u.pathname + u.search + u.hash); 4875 } catch (_) {} 4876 } 4877 try { localStorage.setItem(STORAGE_KEY, mode); } catch (_) {} 4878 } 4879 4880 var initial = 'individual'; 4881 if (hlhRoot) { 4882 initial = hlhRoot.getAttribute('data-default-mode') 4883 || (hlhRoot.querySelector('.hlh-switch') && hlhRoot.querySelector('.hlh-switch').getAttribute('data-active')) 4884 || 'individual'; 4885 } else { 4886 try { 4887 var qs = new URLSearchParams(window.location.search); 4888 var fromUrl = qs.get('account_type'); 4889 if (fromUrl === 'company' || fromUrl === 'individual') { 4890 initial = fromUrl; 4891 } else { 4892 var saved = localStorage.getItem(STORAGE_KEY); 4893 if (saved === 'company' || saved === 'individual') { initial = saved; } 4894 } 4895 } catch (_) {} 4896 } 4897 applyAccount(initial); 4898 4899 document.addEventListener('hot-left-hero-account-mode', function (e) { 4900 if (e.detail && e.detail.mode) { 4901 applyAccount(e.detail.mode); 4902 } 4903 }); 4904 4905 for (var k = 0; k < btns.length; k++) { 4906 btns[k].addEventListener('click', function (e) { 4907 applyAccount(e.currentTarget.getAttribute('data-account-target')); 4908 if (window.posthog && typeof window.posthog.capture === 'function') { 4909 try { window.posthog.capture('account_toggle_click', { account_type: e.currentTarget.getAttribute('data-account-target') }); } catch (_) {} 4910 } 4911 }); 4912 } 4913 })(); 4914 </script>
4914 4915 4916 <!-- Phase 12 â Pre-checkout modal controller (Eric 5/11 pt.2). 4917 Fires on every primary /go/ CTA click. Company mode sees all three 4918 sections (team / LMS-vs-license / bundle); Individual mode sees 4919 only the bundle section (others hidden via CSS). On submit we 4920 append employees/locations/use_lms/bundle/account_type to the 4921 destination URL so the LMS pricing page can prefill the cart. --> 4922
4922<script> 4923 (function () { 4924 var modal = document.getElementById('hot-precheckout'); 4925 if (!modal) { return; } 4926 var backdrop = modal; 4927 var pendingHref = null; 4928 4929 function isCompany() { 4930 return document.body.getAttribute('data-account') === 'company'; 4931 } 4932 4933 function open(initialHref) { 4934 pendingHref = initialHref; 4935 backdrop.classList.add('is-open'); 4936 backdrop.setAttribute('aria-hidden', 'false'); 4937 document.body.style.overflow = 'hidden'; 4938 var firstInput = modal.querySelector('#hot-pc-employees'); 4939 if (firstInput) { try { firstInput.focus(); } catch (_) {} } 4940 if (window.posthog && typeof window.posthog.capture === 'function') { 4941 try { window.posthog.capture('precheckout_open', { from_href: initialHref }); } catch (_) {} 4942 } 4943 } 4944 function close() { 4945 backdrop.classList.remove('is-open'); 4946 backdrop.setAttribute('aria-hidden', 'true'); 4947 document.body.style.overflow = ''; 4948 pendingHref = null; 4949 } 4950 4951 // Radio "card" styling â keep .is-selected in sync with checked state. 4952 modal.querySelectorAll('.hot-precheckout-choice input[type="radio"]').forEach(function (input) { 4953 input.addEventListener('change', function () { 4954 var name = input.getAttribute('name'); 4955 modal.querySelectorAll('.hot-precheckout-choice input[name="' + name + '"]').forEach(function (sib) { 4956 var card = sib.closest('.hot-precheckout-choice'); 4957 if (!card) return; 4958 card.classList.toggle('is-selected', sib.checked); 4959 }); 4960 }); 4961 }); 4962 4963 // Intercept primary CTA clicks in both Individual and Company modes. 4964 // Individual mode shows the bundle-only view (Company-only sections 4965 // hidden via CSS); Company mode shows the full form. 4966 document.addEventListener('click', function (e) { 4967 var a = e.target.closest && e.target.closest('a[data-cta-primary="1"]'); 4968 if (!a) return; 4969 var href = a.getAttribute('href') || ''; 4970 if (href.indexOf('/go/') === -1) return; // only intercept /go/ CTAs 4971 e.preventDefault(); 4972 open(href); 4973 }, true); 4974 4975 // Close handlers â X button, Cancel button, click on backdrop, Escape key. 4976 modal.querySelector('.hot-precheckout-close').addEventListener('click', close); 4977 modal.querySelector('[data-precheckout-cancel]').addEventListener('click', close); 4978 backdrop.addEventListener('click', function (e) { if (e.target === backdrop) close(); }); 4979 document.addEventListener('keydown', function (e) { 4980 if (e.key === 'Escape' && backdrop.classList.contains('is-open')) close(); 4981 }); 4982 4983 // Submit â read values, rewrite the href, navigate. 4984 modal.querySelector('[data-precheckout-submit]').addEventListener('click', function () { 4985 if (!pendingHref) { close(); return; } 4986 var employees = parseInt(modal.querySelector('#hot-pc-employees').value, 10); 4987 var locations = parseInt(modal.querySelector('#hot-pc-locations').value, 10); 4988 if (!isFinite(employees) || employees < 1) employees = 1; 4989 if (!isFinite(locations) || locations < 1) locations = 1; 4990 var useLms = (modal.querySelector('input[name="use_lms"]:checked') || {}).value || 'lms'; 4991 var bundle = (modal.querySelector('input[name="bundle"]:checked') || {}).value || 'this_only'; 4992 4993 try { 4994 var u = new URL(pendingHref, window.location.origin); 4995 var accountType = isCompany() ? 'company' : 'individual'; 4996 u.searchParams.set('account_type', accountType); 4997 u.searchParams.set('bundle', bundle); 4998 // Team-size + delivery-method fields are Company-only; their 4999 // sections are hidden in Individual mode, so we skip them 5000 // there to keep the URL clean. 5001 if (accountType === 'company') { 5002 u.searchParams.set('employees', String(employees)); 5003 u.searchParams.set('locations', String(locations)); 5004 u.searchParams.set('use_lms', useLms); 5005 } 5006 5007 if (window.posthog && typeof window.posthog.capture === 'function') { 5008 try { window.posthog.capture('precheckout_submit', { 5009 account_type: accountType, 5010 employees: employees, locations: locations, 5011 use_lms: useLms, bundle: bundle, dest_href: u.toString() 5012 }); } catch (_) {} 5013 } 5014 window.location.href = u.pathname + u.search + u.hash; 5015 } catch (_) { 5016 // Malformed href â fall back to original 5017 window.location.href = pendingHref; 5018 } 5019 }); 5020 })(); 5021 </script>
5021 5022 5023
5023<script type="speculationrules"> 5024{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/landpress/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} 5025</script>
5025 5026
5026<script> 5027 ( () => { 5028 const lazyloadRunObserver = () => { 5029 const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); 5030 const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { 5031 entries.forEach( ( entry ) => { 5032 if ( entry.isIntersecting ) { 5033 let lazyloadBackground = entry.target; 5034 if( lazyloadBackground ) { 5035 lazyloadBackground.classList.add( 'e-lazyloaded' ); 5036 } 5037 lazyloadBackgroundObserver.unobserve( entry.target ); 5038 } 5039 }); 5040 }, { rootMargin: '200px 0px 200px 0px' } ); 5041 lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { 5042 lazyloadBackgroundObserver.observe( lazyloadBackground ); 5043 } ); 5044 }; 5045 const events = [ 5046 'DOMContentLoaded', 5047 'elementor/lazyload/observe', 5048 ]; 5049 events.forEach( ( event ) => { 5050 document.addEventListener( event, lazyloadRunObserver ); 5051 } ); 5052 } )(); 5053 </script>
5053 5054
5054<script src="https://homeoftraining.com/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script>
vendor: 1 bytes, line 5054
5054
5055<script src="https://homeoftraining.com/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script>
vendor: 1 bytes, line 5055
5055
5056<script id="wp-i18n-js-after"> 5057wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); 5058//# sourceURL=wp-i18n-js-after 5059</script>
vendor: 1 bytes, line 5059
5059
5060<script src="https://homeoftraining.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.7" id="swv-js"></script>
vendor: 1 bytes, line 5060
5060
5061<script id="contact-form-7-js-before"> 5062var wpcf7 = { 5063 "api": { 5064 "root": "https:\/\/homeoftraining.com\/wp-json\/", 5065 "namespace": "contact-form-7\/v1" 5066 } 5067}; 5068//# sourceURL=contact-form-7-js-before 5069</script>
vendor: 1 bytes, line 5069
5069
5070<script src="https://homeoftraining.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.7" id="contact-form-7-js"></script>
vendor: 1 bytes, line 5070
5070
5071<script src="https://homeoftraining.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
vendor: 1 bytes, line 5071
5071
5072<script src="https://homeoftraining.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script>
vendor: 1 bytes, line 5072
5072
5073<script src="https://homeoftraining.com/wp-content/themes/landpress/assets/js/front-end.js?ver=1.6" id="landpress-scripts-js"></script>
vendor: 1 bytes, line 5073
5073
5074<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/nav-menu.js?ver=4.0.6" id="ekit-menu-js"></script>
vendor: 1 bytes, line 5074
5074
5075<script src="https://homeoftraining.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=4.2.4" id="elementor-webpack-runtime-js"></script>
vendor: 1 bytes, line 5075
5075
5076<script src="https://homeoftraining.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=4.2.4" id="elementor-frontend-modules-js"></script>
vendor: 1 bytes, line 5076
5076
5077<script src="https://homeoftraining.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
vendor: 1 bytes, line 5077
5077
5078<script src="https://homeoftraining.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=4.2.4" id="elementor-frontend-js"></script>
vendor: 1 bytes, line 5078
5078
5079<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/core.js?ver=4.0.6" id="ekit-core-js"></script>
vendor: 1 bytes, line 5079
5079
5080<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/nav-menu.js?ver=4.0.6" id="ekit-nav-menu-js"></script>
vendor: 61 bytes, lines 5080-5081
5080 5081<script src="https://www.google.com/recaptcha/api.js?render=
50816LeLLYoqAAAAAJkPd3w1OxaUPvhtUntKW2j4ig1Y
vendor: 49 bytes, line 5081
5081&ver=3.0" id="google-recaptcha-js"></script>
5082<script src="https://homeoftraining.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script>
vendor: 1 bytes, line 5082
5082
5083<script id="wpcf7-recaptcha-js-before"> 5084var wpcf7_recaptcha = { 5085 "sitekey": "6LeLLYoqAAAAAJkPd3w1OxaUPvhtUntKW2j4ig1Y", 5086 "actions": { 5087 "homepage": "homepage", 5088 "contactform": "contactform" 5089 } 5090}; 5091//# sourceURL=wpcf7-recaptcha-js-before 5092</script>
vendor: 1 bytes, line 5092
5092
5093<script src="https://homeoftraining.com/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.7" id="wpcf7-recaptcha-js"></script>
vendor: 1 bytes, line 5093
5093
5094<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/assets/libs/magnific-popup/jquery.magnific-popup.min.js?ver=4.0.6" id="magnific-popup-js"></script>
vendor: 1 bytes, line 5094
5094
5095<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/header-search.js?ver=4.0.6" id="ekit-header-search-js"></script>
vendor: 1 bytes, line 5095
5095
5096<script src="https://homeoftraining.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widgets/header-offcanvas.js?ver=4.0.6" id="ekit-header-offcanvas-js"></script>
vendor: 1 bytes, line 5096
5096
5097<script src="https://homeoftraining.com/wp-content/plugins/keydesign-framework/assets/js/keydesign-framework.js?ver=2.3" id="keydesign-scripts-js"></script>
vendor: 1 bytes, line 5097
5097
5098<script src="https://homeoftraining.com/wp-content/plugins/hot-landing-pages/assets/js/landing-page.js?ver=1.7.3" id="hot-landing-page-js"></script>
5098 5099<!-- HOT unified support launcher ------------------------------------------- 5100 Replaces the duplicate bottom-left "Email Support" launcher with a single 5101 bottom-right button that offers two choices: 5102 1. Chat with Solera -> opens the existing Vapi AI widget 5103 2. Contact Support -> opens the existing email-support panel (#chat) 5104 The legacy .chatbox markup (entry 26191) is hidden, NOT deleted: the legacy 5105 script (entry 26190) calls getElementById("chat").addEventListener with no 5106 null guard, so removing the markup would throw and kill every other handler 5107 in that file. Added 2026-08-20. 5108--------------------------------------------------------------------------- --> 5109<style id="hot-support-hub-css"> 5110/* 1. hide the duplicate bottom-left launcher (markup kept for the legacy JS) */ 5111.chatbox { display: none !important; } 5112 5113/* 2. the email-support panels are repositioned and restyled in the 5114 "Contact Support dialog" block further down this entry */ 5115 5116/* 3. the unified launcher */ 5117#hot-support-hub { 5118 position: fixed; 5119 right: 1.5rem; 5120 bottom: 1.5rem; 5121 z-index: 9998; 5122 display: flex; 5123 flex-direction: column; 5124 align-items: flex-end; 5125 gap: 10px; 5126 font-family: inherit; 5127} 5128#hot-support-hub[hidden] { display: none; } 5129 5130#hot-support-launcher { 5131 display: flex; 5132 align-items: center; 5133 gap: 0.5rem; 5134 height: 3rem; 5135 padding: 0.75rem 1rem; 5136 border: 0; 5137 border-radius: 1rem; 5138 background-color: #007BFF; 5139 color: #FFFFFF; 5140 font-size: 15px; 5141 font-weight: 600; 5142 line-height: 1; 5143 cursor: pointer; 5144 box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); 5145 transition: transform .15s ease, box-shadow .15s ease; 5146} 5147#hot-support-launcher:hover { 5148 transform: translateY(-2px) scale(1.03); 5149 box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1); 5150} 5151#hot-support-launcher svg { flex: none; } 5152 5153/* 4. the two-option menu */ 5154#hot-support-menu { 5155 width: 300px; 5156 max-width: calc(100vw - 3rem); 5157 background: #fff; 5158 border: 1px solid #e5e7eb; 5159 border-radius: 1rem; 5160 box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.1); 5161 overflow: hidden; 5162 transform-origin: bottom right; 5163 animation: hot-support-pop .16s ease-out; 5164} 5165#hot-support-menu[hidden] { display: none; } 5166@keyframes hot-support-pop { 5167 from { opacity: 0; transform: translateY(8px) scale(.96); } 5168 to { opacity: 1; transform: none; } 5169} 5170#hot-support-menu button { 5171 display: flex; 5172 align-items: flex-start; 5173 gap: 10px; 5174 width: 100%; 5175 padding: 14px 16px; 5176 border: 0; 5177 border-bottom: 1px solid #eef0f3; 5178 background: #fff; 5179 color: #1A1A1A; 5180 font-size: 14px; 5181 line-height: 1.35; 5182 text-align: left; 5183 cursor: pointer; 5184 transition: background .12s ease; 5185} 5186#hot-support-menu button:last-child { border-bottom: 0; } 5187#hot-support-menu button:hover { background: #f5f8ff; } 5188#hot-support-menu .hot-opt-ico { 5189 flex: none; 5190 width: 32px; 5191 height: 32px; 5192 border-radius: 8px; 5193 display: flex; 5194 align-items: center; 5195 justify-content: center; 5196} 5197#hot-support-menu .hot-opt-ico.ai { background: #e8f1ff; color: #007BFF; } 5198#hot-support-menu .hot-opt-ico.mail { background: #fdece5; color: #ea5a29; } 5199#hot-support-menu .hot-opt-title { display: block; font-weight: 600; } 5200#hot-support-menu .hot-opt-sub { display: block; margin-top: 2px; color: #6b7280; font-size: 12.5px; } 5201 5202@media (max-width: 480px) { 5203 #hot-support-hub { right: 1rem; bottom: 1rem; } 5204 #hot-support-launcher { font-size: 14px; } 5205} 5206</style> 5207 5208<div id="hot-support-hub" hidden> 5209 <div id="hot-support-menu" role="menu" aria-label="Support options" hidden> 5210 <button type="button" data-hot-act="ai" role="menuitem"> 5211 <span class="hot-opt-ico ai" aria-hidden="true"> 5212 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> 5213 </span>
5214 <span> 5215 <span class="hot-opt-title">Chat with Solera</span> 5216 <span class="hot-opt-sub">Home of Training’s AI Assistant</span> 5217 </span> 5218 </button> 5219 <button type="button" data-hot-act="email" role="menuitem"> 5220 <span class="hot-opt-ico mail" aria-hidden="true"> 5221 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> 5222 </span> 5223 <span> 5224 <span class="hot-opt-title">Contact Support</span> 5225 <span class="hot-opt-sub">Email the Home of Training team</span> 5226 </span> 5227 </button> 5228 </div> 5229 5230 <button type="button" id="hot-support-launcher" aria-haspopup="true" aria-expanded="false"> 5231 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg> 5232 <span>Chat with Support</span> 5233 </button> 5234</div> 5235
5236<script id="hot-support-hub-js"> 5237(function () { 5238 "use strict"; 5239 5240 var hub, launcher, menu; 5241 5242 function vapiBox() { 5243 var wrap = document.querySelector("vapi-widget .vapi-widget-wrapper"); 5244 return wrap ? wrap.querySelector('div[style*="position: fixed"]') : null; 5245 } 5246 5247 /* The Vapi widget renders its launcher pill and its chat panel into the same 5248 fixed container. Collapsed it is ~48px tall, open it is ~512px. */ 5249 function vapiOpen() { 5250 var box = vapiBox(); 5251 return !!box && box.getBoundingClientRect().height > 120; 5252 } 5253 5254 function legacyPanelOpen() { 5255 return [".chatbox-first", ".chatbox-form"].some(function (sel) { 5256 var el = document.querySelector(sel); 5257 return el && getComputedStyle(el).display !== "none"; 5258 }); 5259 } 5260 5261 /* Keep Vapi's own pill out of sight while collapsed so there is only ever one 5262 button on screen. visibility (not display) so click dispatch still works. */ 5263 function sync() { 5264 var box = vapiBox(), open = vapiOpen(); 5265 if (box) { 5266 box.style.visibility = open ? "visible" : "hidden"; 5267 box.style.pointerEvents = open ? "auto" : "none"; 5268 } 5269 if (hub) hub.hidden = open || legacyPanelOpen(); 5270 if (!hub || hub.hidden) closeMenu(); 5271 } 5272 5273 function openMenu() { 5274 menu.hidden = false; 5275 launcher.setAttribute("aria-expanded", "true"); 5276 } 5277 function closeMenu() { 5278 if (!menu || menu.hidden) return; 5279 menu.hidden = true; 5280 launcher.setAttribute("aria-expanded", "false"); 5281 } 5282 5283 function openAI() { 5284 var box = vapiBox(); 5285 if (!box) { return; } 5286 var pill = box.firstElementChild; 5287 box.style.visibility = "visible"; 5288 box.style.pointerEvents = "auto"; 5289 if (pill) { 5290 pill.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, view: window })); 5291 } 5292 setTimeout(sync, 60); 5293 setTimeout(sync, 400); 5294 } 5295 5296 /* Same behaviour as the old bottom-left "Email Support" button: fire its own 5297 handler if it is still bound, otherwise fall back to showing the panel. */ 5298 function openEmailSupport() { 5299 var legacy = document.getElementById("chat"); 5300 if (legacy) { 5301 legacy.click(); 5302 } else { 5303 var first = document.querySelector(".chatbox-first"); 5304 if (first) first.style.display = "block"; 5305 } 5306 setTimeout(sync, 30); 5307 } 5308 5309 function init() { 5310 hub = document.getElementById("hot-support-hub"); 5311 launcher = document.getElementById("hot-support-launcher"); 5312 menu = document.getElementById("hot-support-menu"); 5313 if (!hub || !launcher || !menu) return; 5314 5315 hub.hidden = false; 5316 5317 launcher.addEventListener("click", function (e) { 5318 e.stopPropagation(); 5319 if (menu.hidden) { openMenu(); } else { closeMenu(); } 5320 }); 5321 5322 menu.addEventListener("click", function (e) { 5323 var btn = e.target.closest("button[data-hot-act]"); 5324 if (!btn) return; 5325 e.stopPropagation(); 5326 closeMenu(); 5327 if (btn.getAttribute("data-hot-act") === "ai") { openAI(); } else { openEmailSupport(); } 5328 }); 5329 5330 document.addEventListener("click", function (e) { 5331 if (!hub.contains(e.target)) closeMenu(); 5332 }); 5333 document.addEventListener("keydown", function (e) { 5334 if (e.key === "Escape") closeMenu(); 5335 }); 5336 5337 /* React re-renders the Vapi container and the legacy script toggles inline 5338 styles, so watch for both and re-sync. */ 5339 var mo = new MutationObserver(sync); 5340 mo.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["style", "class"] }); 5341 setInterval(sync, 700); 5342 sync(); 5343 } 5344 5345 if (document.readyState === "loading") { 5346 document.addEventListener("DOMContentLoaded", init); 5347 } else { 5348 init(); 5349 } 5350})(); 5351</script>
5351 5352 5353<!-- ===== Contact Support dialog: modernized skin ========================= 5354 Restyles the legacy panels (.chatbox-first FAQ list and .chatbox-form 5355 email form, markup from entry 26191, base CSS from entry 26189) to match 5356 the launcher. Pure CSS over the top plus a few additive JS touches - the 5357 legacy markup, ids and handlers in entry 26190 are untouched. 5358 Added 2026-08-20. 5359====================================================================== --> 5360<style id="hot-support-dialog-css"> 5361/* ---------- shared card shell ---------- */ 5362.chatbox-first, 5363.chatbox-form { 5364 left: auto !important; 5365 right: 24px !important; 5366 bottom: 24px !important; 5367 z-index: 10000 !important; 5368 width: 380px !important; 5369 max-width: calc(100vw - 2rem) !important; 5370 background: #ffffff !important; 5371 border: 1px solid #e5e7eb !important; 5372 border-radius: 16px !important; 5373 box-shadow: 0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.10) !important; 5374 overflow: hidden !important; 5375 font-family: inherit; 5376 color: #1a1a1a; 5377 animation: hot-dialog-pop .18s ease-out; 5378} 5379@keyframes hot-dialog-pop { 5380 from { opacity: 0; transform: translateY(10px) scale(.97); } 5381 to { opacity: 1; transform: none; } 5382} 5383 5384/* ---------- header bar (#popupclose / #formclose) ---------- */ 5385.chatbox-first button#popupclose, 5386.chatbox-form button.btn#formclose { 5387 position: relative !important; 5388 display: block !important; 5389 width: 100% !important; 5390 margin: 0 !important; 5391 padding: 15px 56px 15px 18px !important; 5392 border: 0 !important; 5393 border-bottom: 1px solid #eef0f3 !important; 5394 border-radius: 0 !important; 5395 background: #ffffff !important; 5396 color: #111827 !important; 5397 font-size: 15px !important; 5398 font-weight: 700 !important; 5399 line-height: 1.25 !important; 5400 text-align: left !important; 5401 letter-spacing: -.01em; 5402 cursor: pointer; 5403} 5404.chatbox-first button#popupclose::after { 5405 content: "Pick a topic for a quick answer"; 5406 display: block; 5407 margin-top: 3px; 5408 color: #6b7280; 5409 font-size: 12.5px; 5410 font-weight: 500; 5411 letter-spacing: 0; 5412} 5413.chatbox-form button.btn#formclose::after { 5414 content: "Send us the details and we'll reply by email"; 5415 display: block; 5416 margin-top: 3px; 5417 color: #6b7280; 5418 font-size: 12.5px; 5419 font-weight: 500; 5420 letter-spacing: 0; 5421} 5422 5423/* close / back control inside the header */ 5424.chatbox-first span.minus, 5425.chatbox-form span.minus { 5426 position: absolute !important; 5427 top: 14px !important; 5428 right: 14px !important; 5429 display: inline-flex; 5430 align-items: center; 5431 gap: 4px; 5432 height: 28px; 5433 padding: 0 9px; 5434 border-radius: 8px; 5435 background: #f3f4f6; 5436 color: #4b5563; 5437 font-size: 12.5px; 5438 font-weight: 600; 5439 transition: background .12s ease, color .12s ease; 5440} 5441.chatbox-first span.minus:hover, 5442.chatbox-form span.minus:hover { background: #e5e7eb; color: #111827; } 5443/* the FAQ panel header collapses the dialog - show a real close glyph */ 5444.chatbox-first span.minus { width: 28px; padding: 0; justify-content: center; } 5445.chatbox-first span.minus i.fa { display: none; } 5446.chatbox-first span.minus::before { 5447 content: "\00d7"; 5448 font-size: 19px; 5449 line-height: 1; 5450 font-style: normal; 5451} 5452 5453/* ---------- FAQ list ---------- */ 5454.chatbox-first ul#menuid { 5455 height: auto !important;
5456 max-height: min(46vh, 360px) !important; 5457 overflow-y: auto !important; 5458 margin: 0 !important; 5459 padding: 6px 0 !important; 5460 scrollbar-width: thin; 5461 scrollbar-color: #d1d5db transparent; 5462} 5463.chatbox-first ul#menuid::-webkit-scrollbar { width: 8px; } 5464.chatbox-first ul#menuid::-webkit-scrollbar-thumb { background: #d8dce2; border-radius: 8px; border: 2px solid #fff; } 5465.chatbox-first ul#menuid::-webkit-scrollbar-track { background: transparent; } 5466 5467.chatbox-first ul#menuid > li > a { 5468 display: flex !important; 5469 align-items: center; 5470 justify-content: space-between; 5471 gap: 12px; 5472 padding: 12px 18px !important; 5473 border: 0 !important; 5474 color: #1f2937 !important; 5475 font-size: 14px !important; 5476 font-weight: 500; 5477 line-height: 1.35; 5478 text-decoration: none !important; 5479 transition: background .12s ease, color .12s ease; 5480} 5481.chatbox-first ul#menuid > li > a:hover, 5482.chatbox-first ul#menuid > li.selected > a { 5483 background: #f5f8ff !important; 5484 color: #0067d6 !important; 5485} 5486.chatbox-first span.info { 5487 float: none !important; 5488 flex: none; 5489 display: inline-flex; 5490 align-items: center; 5491 justify-content: center; 5492 width: 22px; 5493 height: 22px; 5494 border-radius: 999px; 5495 background: #f3f4f6; 5496 color: #9ca3af !important; 5497 font-size: 11px; 5498 transition: background .12s ease, color .12s ease, transform .15s ease; 5499} 5500.chatbox-first ul#menuid > li > a:hover span.info, 5501.chatbox-first ul#menuid > li.selected > a span.info { 5502 background: #e3edff; 5503 color: #007BFF !important; 5504} 5505/* rotate the + into an x while that row's answer is open */ 5506.chatbox-first ul#menuid > li.hot-open > a span.info { transform: rotate(45deg); } 5507 5508.chatbox-first .logcontent { 5509 margin: 0 12px 8px !important; 5510 padding: 13px 16px !important; 5511 border: 0 !important; 5512 border-radius: 12px !important; 5513 background: #f7f9fc !important; 5514 color: #4b5563 !important; 5515 font-size: 13.5px !important; 5516 line-height: 1.62 !important; 5517} 5518.chatbox-first .logcontent a { 5519 display: inline !important; 5520 padding: 0 !important; 5521 border: 0 !important; 5522 background: none !important; 5523 font-size: inherit !important; 5524 color: #0067d6 !important; 5525 text-decoration: underline; 5526 text-underline-offset: 2px; 5527 word-break: break-word; 5528} 5529 5530/* ---------- email form ---------- */ 5531.chatbox-form p { 5532 margin: 0 !important; 5533 padding: 14px 18px 4px !important; 5534 color: #6b7280 !important; 5535 font-size: 13px !important; 5536 line-height: 1.55 !important; 5537} 5538.chatbox-form p a { color: #0067d6 !important; text-decoration: underline; text-underline-offset: 2px; } 5539 5540.chatbox-form .form-label { padding: 10px 18px 0 !important; margin: 0 !important; } 5541.chatbox-form .form-label label { 5542 display: block; 5543 margin-bottom: 6px; 5544 color: #374151; 5545 font-size: 12.5px; 5546 font-weight: 600; 5547} 5548.chatbox-form .form-label input, 5549.chatbox-form .form-label textarea { 5550 width: 100% !important; 5551 padding: 10px 12px !important; 5552 border: 1px solid #d9dee5 !important; 5553 border-radius: 10px !important; 5554 background: #fff !important; 5555 color: #111827; 5556 font-family: inherit; 5557 font-size: 14px !important; 5558 line-height: 1.4; 5559 transition: border-color .12s ease, box-shadow .12s ease; 5560} 5561.chatbox-form .form-label textarea { min-height: 96px; resize: vertical; } 5562.chatbox-form .form-label input::placeholder, 5563.chatbox-form .form-label textarea::placeholder { color: #9ca3af; } 5564.chatbox-form .form-label input:focus, 5565.chatbox-form .form-label textarea:focus { 5566 outline: 0 !important; 5567 border-color: #007BFF !important; 5568 box-shadow: 0 0 0 3px rgba(0,123,255,.15) !important; 5569} 5570.chatbox-form .form-label.hot-invalid input, 5571.chatbox-form .form-label.hot-invalid textarea { 5572 border-color: #e0524a !important; 5573 box-shadow: 0 0 0 3px rgba(224,82,74,.12) !important; 5574} 5575 5576.chatbox-form .hot-form-msg { 5577 margin: 12px 18px 0; 5578 padding: 9px 12px; 5579 border-radius: 10px; 5580 font-size: 13px; 5581 line-height: 1.45; 5582 display: none; 5583} 5584.chatbox-form .hot-form-msg.err { display: block; background: #fdeceb;
5584 color: #b3372f; } 5585.chatbox-form .hot-form-msg.ok { display: block; background: #e9f7ef; color: #1d7a45; } 5586 5587.chatbox-form .chat-btn { padding: 14px 18px 18px !important; } 5588.chatbox-form .chat-btn button.start { 5589 display: block !important; 5590 width: 100% !important; 5591 max-width: none !important; 5592 margin: 0 !important; 5593 padding: 11px 16px !important; 5594 border: 0 !important; 5595 border-radius: 10px !important; 5596 background: #007BFF !important; 5597 color: #fff !important; 5598 font-family: inherit; 5599 font-size: 14.5px !important; 5600 font-weight: 600 !important; 5601 cursor: pointer; 5602 transition: background .12s ease, transform .12s ease; 5603} 5604.chatbox-form .chat-btn button.start:hover { background: #0067d6 !important; transform: translateY(-1px); } 5605 5606@media (max-width: 480px) { 5607 .chatbox-first, 5608 .chatbox-form { 5609 right: 1rem !important; 5610 bottom: 1rem !important; 5611 width: calc(100vw - 2rem) !important; 5612 } 5613 .chatbox-first ul#menuid { max-height: 52vh !important; } 5614} 5615</style> 5616
5617<script id="hot-support-dialog-js"> 5618(function () { 5619 "use strict"; 5620 5621 var SUPPORT_EMAIL = "[email protected]"; 5622 5623 /* Replace only the leading text node of a header button, leaving the 5624 <span class="minus"> control (and its bound handler) in place. */ 5625 function relabel(el, text) { 5626 if (!el) return; 5627 for (var i = 0; i < el.childNodes.length; i++) { 5628 var n = el.childNodes[i]; 5629 if (n.nodeType === 3 && n.nodeValue.trim()) { n.nodeValue = text + " "; return; } 5630 } 5631 } 5632 5633 function firstPanel() { return document.querySelector(".chatbox-first"); } 5634 function formPanel() { return document.querySelector(".chatbox-form"); } 5635 function visible(el) { return el && getComputedStyle(el).display !== "none"; } 5636 5637 function init() { 5638 var first = firstPanel(), form = formPanel(); 5639 if (!first || !form) return; 5640 5641 relabel(document.getElementById("popupclose"), "Contact Support"); 5642 relabel(document.getElementById("formclose"), "Email Support"); 5643 5644 /* mirror the legacy inline display toggle onto a class so the + can rotate */ 5645 var rows = first.querySelectorAll("#menuid li"); 5646 first.addEventListener("click", function () { 5647 setTimeout(function () { 5648 for (var i = 0; i < rows.length; i++) { 5649 var c = rows[i].querySelector(".logcontent"); 5650 rows[i].classList.toggle("hot-open", !!c && getComputedStyle(c).display !== "none"); 5651 } 5652 }, 0); 5653 }); 5654 5655 /* status line for the form */ 5656 var msg = document.createElement("div"); 5657 msg.className = "hot-form-msg"; 5658 var btnWrap = form.querySelector(".chat-btn"); 5659 if (btnWrap) form.insertBefore(msg, btnWrap); 5660 5661 function setMsg(kind, text) { 5662 msg.className = "hot-form-msg" + (kind ? " " + kind : ""); 5663 msg.textContent = text || ""; 5664 } 5665 5666 /* The legacy "Send Email" button has never had a handler - it is a dead 5667 submit button with no form. Wire it to the address the panel already 5668 tells people to write to, with the fields pre-filled. */ 5669 var send = document.getElementById("supportEmail"); 5670 if (send) { 5671 send.setAttribute("type", "button"); 5672 send.addEventListener("click", function (e) { 5673 e.preventDefault(); 5674 var f = { 5675 name: document.getElementById("query_p_name"), 5676 email: document.getElementById("query_p_email"), 5677 message: document.getElementById("query_message") 5678 }; 5679 var bad = []; 5680 Object.keys(f).forEach(function (k) { 5681 var el = f[k], wrap = el ? el.closest(".form-label") : null; 5682 var val = el ? el.value.trim() : ""; 5683 var ok = !!val && (k !== "email" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)); 5684 if (wrap) wrap.classList.toggle("hot-invalid", !ok); 5685 if (!ok) bad.push(k); 5686 }); 5687 if (bad.length) { 5688 setMsg("err", bad.indexOf("email") > -1 && f.email.value.trim() 5689 ? "That email address does not look right." 5690 : "Please fill in your name, email and message."); 5691 return; 5692 } 5693 var subject = "Support request from " + f.name.value.trim(); 5694 var body = "Name: " + f.name.value.trim() + 5695 "\nEmail: " + f.email.value.trim() + 5696 "\n\n" + f.message.value.trim(); 5697 setMsg("ok", "Opening your email app⦠if nothing happens, write to " + SUPPORT_EMAIL + "."); 5698 window.location.href = "mailto:" + SUPPORT_EMAIL + 5699 "?subject=" + encodeURIComponent(subject) + 5700 "&body=" + encodeURIComponent(body); 5701 }); 5702 } 5703 5704 ["query_p_name", "query_p_email", "query_message"].forEach(function (id) { 5705 var el = document.getElementById(id); 5706 if (!el) return; 5707 el.addEventListener("input", function () { 5708 var wrap = el.closest(".form-label"); 5709 if (wrap) wrap.classList.remove("hot-invalid"); 5710 setMsg("", ""); 5711 }); 5712 }); 5713 5714 /* Escape closes whichever panel is showing */ 5715 document.addEventListener("keydown", function (e) { 5716 if (e.key !== "Escape") return; 5717 if (visible(form)) { var b = document.getElementById("formclose"); if (b) b.click(); return; } 5718 if (visible(first)) { var p = document.getElementById("popupclose"); if (p) p.click(); } 5719 }); 5720 } 5721 5722 if (document.readyState === "loading") { 5723 document.addEventListener("DOMContentLoaded", init); 5724 } else { 5725 init(); 5726 } 5727})(); 5728</script>
5728 5729<!-- Add HTML code to the header or the footer. 5730 5731For example, you can use the following code for loading the jQuery library from Google CDN:
5732<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
5732 5733 5734or the following one for loading the Bootstrap library from jsDelivr: 5735<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> 5736 5737-- End of the comment --> 5738
5739<script> 5740 jQuery(document).ready(function($) { 5741 $.ajax({ 5742 url: "https://api.homeoftraining.com/api/tour/demovideos", 5743 success: function(result) { 5744 var abc = ""; 5745 for (var i = 0; i < result.length; i++) { 5746 abc = 5747 abc + 5748 "<div class='demo-video-box'><div><iframe src='https://player.vimeo.com/video/" + result[i].vimeo_video_id + "' width='320' height='240' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><div class='mobi-none'><h5 class='mb-0 mt-1 text-center'>" + result[i].name + "</h5> </div> </div>"; 5749 } 5750 5751 $("#demo-videos").html(abc); 5752 } 5753 }); 5754}); 5755 </script>
5755 5756 5757
5758<script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js" async type="text/javascript"></script>
5758 5759<vapi-widget 5760public-key="506b7909-b992-43a3-9471-3e836c413fdb" 5761assistant-id="7301fa87-6480-4724-8e29-94e2e4c7a17f" 5762mode="chat" 5763theme="light" 5764size="compact" 5765radius="medium" 5766base-color="#FFFFFF" 5767accent-color="#1A1A1A" 5768button-base-color="#007BFF" 5769button-accent-color="#FFFFFF" 5770main-label="Chat with Support" 5771start-button-text="Start Chat" 5772end-button-text="End Chat" 5773empty-chat-message="Hi! I'm Solera. Home of Training's AI Assistant. How can I help you today?" 5774size="compact" 5775position="bottom-right" 5776></vapi-widget> <!-- chatbox code start here --> 5777 <div class="chatbox"> 5778 <div class="chatcomment-box"> 5779 <div class="chat-comment"> 5780 <h3>Questions?</h3> 5781 <button class="cross">X</button> 5782 </div> 5783 <i>Click here to email us.</i> 5784 </div> 5785 <div class="offline-chat"> 5786 <h3 id="chat"><i class="fa fa-envelope" aria-hidden="true"></i> Email Support</h3> 5787 </div> 5788 </div> 5789 5790 5791 <div class="chatbox-first"> 5792 <button class="btn" id="popupclose">Email Support <span class="minus"><i class="fa fa-minus" 5793 aria-hidden="true"></i></span></button> 5794 <ul id="menuid"> 5795 <li><a href="javascript:void(0);" class="canlogin">Canât login <span class="info"><i class="fa fa-plus" 5796 aria-hidden="true"></i></span></a> 5797 <div class="logcontent"> 5798 a. If you forgot your password, please click the forgot password button located next to the 5799 login button. Most of the time, your email address is your username, so please try to reset the 5800 password using your email address. 5801 <br /> 5802 b. If you forgot your username, please email <a href="mailto:[email protected]">[email protected]</a> with your full name and the 5803 company you work for. 5804 5805 </div> 5806 </li> 5807 <li><a href="javascript:void(0);" class="canlogin">Copy of certificate <span class="info"><i 5808 class="fa fa-plus" aria-hidden="true"></i></span></a> 5809 <div class="logcontent"> 5810 a. If need to view your certificate, please log into your dashboard. On the left-hand side, 5811 click the âCertificatesâ tab. If you have any active certificates, you will find them on this 5812 page. You can view the certificates by clicking the green eye icon or download the certificate 5813 by clicking on the orange download icon. Watch this tutorial video for more information. 5814 <a title="_blank" href="https://lms.homeoftraining.com/#/tour?id=yqtu84v1" >https://lms.homeoftraining.com/#/tour?id=yqtu84v1</a> 5815 5816 - If your account is no longer active and you need your certificate, please email 5817 [email protected] 5818 5819 <br /> 5820 b. If you are a manager or admin and want to see all employee certificates, please log into your 5821 dashboard. On the left-hand side, click the âCertificatesâ tab. Then select âEmployee 5822 Certificatesâ from the dropdown. Please select which course certificates you would like to view 5823 by clicking the blue detail button on the right-hand side. You can view employees' certificates 5824 by clicking the green icon on the right-hand side, or you can click the view certificates button 5825 located on the top right-hand side to view all certificates for that course. 5826 Watch this tutorial video for more information. <a title="_blank" href="https://lms.homeoftraining.com/#/tour?id=egcsi0a9" >https://lms.homeoftraining.com/#/tour?id=egcsi0a9</a> 5827 5828 </div> 5829 </li> 5830 <li><a href="javascript:void(0);" class="canlogin">Transfer user <span class="info"><i 5831 class="fa fa-plus" aria-hidden="true"></i></span></a> 5832 <div class="logcontent"> 5833 If you cannot add a user, this means they already have an account with Home of Training. Please 5834 email <a href="mailto:[email protected]">[email protected]</a> and let us know the userâs name and new location. 5835 </div> 5836 </li> 5837 <li><a href="javascript:void(0);" class="canlogin">Course assigned in wrong language <span 5838 class="info"><i class="fa fa-plus" aria-hidden="true"></i></span></a> 5839 <div class="logcontent"> 5840 Please email <a href="mailto:[email protected]">[email protected]</a> and include your full name, the course name, the company you 5841 work for and your preferred language. 5842 </div> 5843 </li> 5844 <li><a href="javascript:void(0);" class="canlogin">Health inspector at location <span class="info"><i 5845 class="fa fa-plus" aria-hidden="true"></i></span></a> 5846 <div class="logcontent"> 5847 We are the authorized training provider under the Ye Olde Falcon Pub, Certification #: 4077557. 5848 This will be the last company on the list the inspector has. The certification number is located 5849 on the bottom right-hand corner of every food handler certificate. Please show the health 5850 inspector this information. 5851 </div> 5852 </li> 5853 <li><a href="javascript:void(0);" class="canlogin">Schedule Food Manager <span class="info"><i 5854 class="fa fa-plus" aria-hidden="true"></i></span></a> 5855 <div class="logcontent"> 5856 a. We have two options for food manager exams. First, is a live proctored exam that must be 5857 scheduled with us by emailing <a href="mailto:[email protected]">[email protected]</a>. For this option, please ensure that your 5858 managers are assigned the Food Manager â Study Session Course. 5859 *Please note this is just a study session not the certification exam. We recommend 2-3 weeks of 5860 studying prior to taking the exam. 5861 <br /> 5862 b. Our second option is the online proctored exam offered through Always Food Safe and ProctorU. 5863 For this course, the Food Manager Online Exam must be assigned to the user. We recommend 2-3 5864 weeks of studying prior to taking the exam. 5865 5866 Please email <a href="mailto:[email protected]">[email protected]</a> with any questions or to sign up for and schedule a proctored
5867 exam. Thank you! 5868 5869 </div> 5870 </li> 5871 <li><a href="javascript:void(0);" class="canlogin">Billing <span class="info"><i class="fa fa-plus" 5872 aria-hidden="true"></i></span></a> 5873 <div class="logcontent"> 5874 If you have questions regarding billing, please email <a href="mailto:[email protected]">[email protected]</a> 5875 </div> 5876 </li> 5877 <li><a href="javascript:void(0);" id="other">Other <span class="info"><i class="fa fa-plus" 5878 aria-hidden="true"></i></span></a> 5879 <div class="logcontent"> 5880 5881 </div> 5882 </li> 5883 </ul> 5884 </div> 5885 <div class="chatbox-form"> 5886 <button class="btn" id="formclose">Email Support <span class="minus"><i class="fa fa-angle-left" 5887 aria-hidden="true"></i> Back</span></button> 5888 <p>Please email <a href="mailto:[email protected]">[email protected]</a> for further inquiries. </p> 5889 <div class="form-label"> 5890 <label>Name *</label> 5891 <input type="text" class="intro" id="query_p_name" name="" placeholder="Name" /> 5892 </div> 5893 <div class="form-label"> 5894 <label>Email *</label> 5895 <input type="text" class="intro" id="query_p_email" name="" placeholder="Email" /> 5896 </div> 5897 <div class="form-label"> 5898 <label>Message *</label> 5899 <textarea type="text" id="query_message" class="message"></textarea> 5900 </div> 5901 <div class="chat-btn"> 5902 <button class="start" id="supportEmail">Send Email</button> 5903 </div> 5904 </div> 5905 <!-- chatbox code end here --><!-- start Simple Custom CSS and JS -->
5906<script> 5907</script>
5907 5908<!-- end Simple Custom CSS and JS --> 5909<!-- start Simple Custom CSS and JS -->
5910<script> 5911 document.getElementById('search-input').addEventListener('input', function() { 5912 const query = this.value.toLowerCase(); 5913 const courseSections = document.querySelectorAll('.searchable-course-div .course-section'); 5914 let visibleCourseLists = []; 5915 let matchFound = false; 5916 5917 courseSections.forEach(section => { 5918 const heading = section.querySelector('.course-section-heading').textContent.toLowerCase(); 5919 const listItems = section.querySelectorAll('.course-list li'); 5920 let sectionMatchFound = heading.includes(query); 5921 let matchedItems = []; 5922 5923 if (sectionMatchFound) { 5924 section.style.display = 'block'; 5925 listItems.forEach(item => item.style.display = 'list-item'); 5926 visibleCourseLists.push(section.querySelector('.course-list')); 5927 matchFound = true; 5928 } else { 5929 listItems.forEach(item => { 5930 if (item.textContent.toLowerCase().includes(query)) { 5931 sectionMatchFound = true; 5932 matchedItems.push(item); 5933 } 5934 }); 5935 5936 if (sectionMatchFound) { 5937 section.style.display = 'block'; 5938 listItems.forEach(item => item.style.display = 'none'); 5939 matchedItems.forEach(item => item.style.display = 'list-item'); 5940 visibleCourseLists.push(section.querySelector('.course-list')); 5941 matchFound = true; 5942 } else { 5943 section.style.display = 'none'; 5944 } 5945 } 5946 5947 if (query === '') { 5948 section.style.display = 'block'; 5949 listItems.forEach(item => item.style.display = 'list-item'); 5950 visibleCourseLists.push(section.querySelector('.course-list')); 5951 matchFound = true; 5952 } 5953 }); 5954 5955 document.querySelectorAll('.course-list').forEach(list => list.classList.remove('single-list-grid-css')); 5956 if (visibleCourseLists.length === 1) { 5957 visibleCourseLists[0].classList.add('single-list-grid-css'); 5958 } 5959 5960 const noResultsMessage = document.querySelector('.no-results-section'); 5961 if (!matchFound && query !== '') { 5962 noResultsMessage.style.display = 'block'; 5963 } else { 5964 noResultsMessage.style.display = 'none'; 5965 } 5966 });</script>
5966 5967<!-- end Simple Custom CSS and JS --> 5968
5969<script src='//homeoftraining.com/wp-content/uploads/custom-css-js/26190.js?v=8800'></script>
5969 5970 <div id="hot-variant-picker" 5971 class="hot-variant-picker" 5972 role="dialog" 5973 aria-modal="true" 5974 aria-labelledby="hot-variant-picker-title" 5975 aria-hidden="true" 5976 hidden> 5977 <div class="hot-variant-picker-backdrop" data-hot-variant-close="1"></div> 5978 <div class="hot-variant-picker-card" role="document"> 5979 <button type="button" 5980 class="hot-variant-picker-close" 5981 aria-label="Close" 5982 data-hot-variant-close="1">×</button> 5983 <h2 id="hot-variant-picker-title" class="hot-variant-picker-title"></h2> 5984 <p class="hot-variant-picker-sub">Pick the version that fits your situation. You can always switch on the next page.</p> 5985 <div class="hot-variant-picker-options" role="group" aria-labelledby="hot-variant-picker-title"></div> 5986 </div> 5987 </div> 5988
5988<script> 5989 (function () { 5990 var btn = document.querySelector('.hot-bestseller-cta'); 5991 if (!btn) { return; } 5992 btn.addEventListener('click', function () { 5993 try { 5994 if (window.posthog && typeof window.posthog.capture === 'function') { 5995 window.posthog.capture('bestseller_strip_click', { 5996 course_slug: btn.getAttribute('data-bestseller-course'), 5997 source: 'landing_page', 5998 page_url: window.location.href 5999 }); 6000 } 6001 } catch (_) { /* never break navigation over analytics */ } 6002 }); 6003 })(); 6004 </script>
6004 6005
6005<script> 6006 (function () { 6007 var GROUPS = {"food-handler-certificate":{"label":"Food Handler Certificate Program","variants":[{"slug":"food-handler-certificate","label":"Nationally Accredited (ASTM E2659-24)"},{"slug":"florida-food-handler","label":"Florida-specific"}]},"alcohol-server-training":{"label":"Alcohol Safety Training","variants":[{"slug":"california-rbs","label":"California \u2014 RBS"},{"slug":"alcohol-certification","label":"Nationwide \u2014 Employee","default":true},{"slug":"alcohol-server-training","label":"Florida \u2014 Employee"},{"slug":"alcohol-manager-nationwide","label":"Nationwide \u2014 Manager"},{"slug":"alcohol-manager-florida","label":"Florida \u2014 Manager"}]},"sexual-harassment-training":{"label":"Sexual Harassment Training","variants":[{"slug":"sexual-harassment-training","label":"Employee"},{"slug":"california-sexual-harassment","label":"California-specific"}]}}; 6008 var modal = document.getElementById('hot-variant-picker'); 6009 if (!modal) { return; } 6010 6011 var titleEl = modal.querySelector('.hot-variant-picker-title'); 6012 var optionsEl = modal.querySelector('.hot-variant-picker-options'); 6013 var lastFocus = null; 6014 var openState = { parent: null, source: null }; 6015 6016 // Selectors covered by the click interceptor. Stay in sync with 6017 // any new CTA classes added in other Phase 10 blocks. 6018 // 6019 // HTN-949: the picker used to fire only on /go/ CTAs, so the two 6020 // browse surfaces walked users straight into the parent course 6021 // (Florida alcohol) with no chance to pick RBS: 6022 // .course-card -- Course Library catalog cards 6023 // .nav-mega a -- Services megamenu (landing pages / archive) 6024 // .dropdown-item -- Services dropdown in the homepage ElementsKit nav 6025 // The real gate is still the GROUPS lookup below, so a link only 6026 // opens the modal when it points at a registered parent slug. 6027 var CTA_SELECTOR = '.btn-primary, .nav-cta, .hero-cta-primary, .hot-bestseller-cta, .hot-quickbuy-tile-cta, .course-card, .nav-mega a, .dropdown-item'; 6028 6029 // Map a CTA element to a click "source" tag for analytics. 6030 function detectSource(el) { 6031 if (el.closest('.hot-bestseller-strip')) { return 'bestseller_strip'; } 6032 if (el.closest('.hot-quickbuy')) { return 'quickbuy_tile'; } 6033 if (el.classList.contains('hero-cta-primary') || el.closest('.hot-hero')) { return 'landing_page_cta'; } 6034 if (el.classList.contains('nav-cta')) { return 'landing_page_cta'; } 6035 // HTN-949 browse surfaces. 6036 if (el.closest('.course-card')) { return 'course_library'; } 6037 if (el.closest('.nav-mega')) { return 'services_menu'; } 6038 if (el.classList.contains('dropdown-item')) { return 'services_menu'; } 6039 return 'unknown'; 6040 } 6041 6042 // Pull ?course=... out of an absolute or relative href without 6043 // caring about the install path. URL() resolves relative URLs 6044 // against document.baseURI, so /wordpress/go/?course=foo and 6045 // /go/?course=foo and https://homeoftraining.com/go/?course=foo 6046 // all parse identically. 6047 function courseSlugFromHref(href) { 6048 if (!href) { return null; } 6049 try { 6050 var u = new URL(href, window.location.origin); 6051 // Form 1 -- /go/?course=<slug>, the CTA links on landing pages. 6052 if (/(^|\/)go\/?$/.test(u.pathname)) { 6053 return u.searchParams.get('course'); 6054 } 6055 // Form 2 (HTN-949) -- /courses/<slug>, the landing-page permalink 6056 // used by Course Library cards and both Services menus. Only a 6057 // single trailing segment matches, so /courses/ (the archive) and 6058 // /courses/category/<term> are left alone. 6059 var m = u.pathname.match(/(^|\/)courses\/([a-z0-9-]+)\/?$/); 6060 if (m) { return m[2]; } 6061 return null; 6062 } catch (_) { 6063 return null; 6064 } 6065 } 6066 6067 function buildOptionButton(variant, isDefault) { 6068 var btn = document.createElement('button'); 6069 btn.type = 'button'; 6070 btn.className = 'btn-primary hot-variant-option' + (isDefault ? ' is-recommended' : ''); 6071 btn.setAttribute('data-variant-slug', variant.slug); 6072 btn.setAttribute('data-variant-label', variant.label); 6073 6074 var label = document.createElement('span'); 6075 label.className = 'hot-variant-option-label'; 6076 label.textContent = variant.label; 6077 btn.appendChild(label); 6078 6079 // Phase 11: visual highlight only. The "Recommended" word was 6080 // stripped per owner â the .is-recommended class already styles 6081 // the default with the warm fire treatment. 6082 return btn; 6083 } 6084 6085 function openModal(parentSlug, sourceEl) { 6086 var group = GROUPS[parentSlug]; 6087 if (!group || !group.variants || group.variants.length < 2) { return false; } 6088 6089 openState.parent = parentSlug; 6090 openState.source = detectSource(sourceEl); 6091 6092 titleEl.textContent = group.label; 6093 optionsEl.innerHTML = ''; 6094 // Phase 11.4: explicit `default: true` flag wins over the 6095 // slug==parent fallback. Nationwide alcohol-employee was 6096 // pre-highlighted this way when the parent slug is the 6097 // Florida-employee landing page. 6098 var hasExplicitDefault = false;
6099 for (var d = 0; d < group.variants.length; d++) { 6100 if (group.variants[d] && group.variants[d].default === true) { 6101 hasExplicitDefault = true; 6102 break; 6103 } 6104 } 6105 for (var i = 0; i < group.variants.length; i++) { 6106 var v = group.variants[i]; 6107 var isDefault = hasExplicitDefault ? (v.default === true) : (v.slug === parentSlug); 6108 optionsEl.appendChild(buildOptionButton(v, isDefault)); 6109 } 6110 6111 lastFocus = document.activeElement; 6112 modal.hidden = false; 6113 modal.setAttribute('aria-hidden', 'false'); 6114 document.body.classList.add('hot-variant-picker-open'); 6115 6116 // Focus the first option for keyboard users. 6117 var first = optionsEl.querySelector('button'); 6118 if (first) { 6119 try { first.focus({ preventScroll: false }); } catch (_) { first.focus(); } 6120 } 6121 6122 try { 6123 if (window.posthog && typeof window.posthog.capture === 'function') { 6124 window.posthog.capture('variant_picker_open', { 6125 parent_slug: parentSlug, 6126 source: openState.source, 6127 page_url: window.location.href 6128 }); 6129 } 6130 } catch (_) { /* never break UX over analytics */ } 6131 6132 return true; 6133 } 6134 6135 function closeModal() { 6136 if (modal.hidden) { return; } 6137 modal.hidden = true; 6138 modal.setAttribute('aria-hidden', 'true'); 6139 document.body.classList.remove('hot-variant-picker-open'); 6140 openState.parent = null; 6141 openState.source = null; 6142 if (lastFocus && typeof lastFocus.focus === 'function') { 6143 try { lastFocus.focus(); } catch (_) {} 6144 } 6145 } 6146 6147 function selectVariant(variantSlug, variantLabel) { 6148 var parent = openState.parent; 6149 var source = openState.source || 'unknown'; 6150 6151 try { 6152 if (window.posthog && typeof window.posthog.capture === 'function') { 6153 window.posthog.capture('variant_picker_select', { 6154 parent_slug: parent, 6155 variant_slug: variantSlug, 6156 variant_label: variantLabel, 6157 source: source, 6158 page_url: window.location.href 6159 }); 6160 } 6161 } catch (_) { /* never break navigation over analytics */ } 6162 6163 // Build the destination â match the existing /go/ shape so the 6164 // LMS-id resolver in hot_lp_handle_go_redirect handles cart prefill. 6165 var origin = window.location.origin; 6166 var basePath; 6167 try { 6168 // home_url('/go/') as seen in the page â derive from any 6169 // existing /go/ link if we can, else assume /go/. Falls back 6170 // to whatever the install path is. 6171 var probe = document.querySelector('a[href*="/go/?course="], a[href$="/go/"]'); 6172 if (probe) { 6173 var u = new URL(probe.getAttribute('href'), origin); 6174 basePath = u.pathname; // e.g. /go/ or /wordpress/go/ 6175 } else { 6176 basePath = '/go/'; 6177 } 6178 } catch (_) { 6179 basePath = '/go/'; 6180 } 6181 6182 var dest = origin + basePath + '?course=' + encodeURIComponent(variantSlug) + '&autocheckout=1'; 6183 window.location.href = dest; 6184 } 6185 6186 // ââ Click interception (event delegation) ââââââââââââââââââââ 6187 document.addEventListener('click', function (ev) { 6188 // Allow modifier-clicks (open in new tab, etc.) to pass through. 6189 if (ev.defaultPrevented || ev.button !== 0) { return; } 6190 if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) { return; } 6191 6192 var target = ev.target; 6193 if (!target) { return; } 6194 6195 // First handle clicks INSIDE the modal â variant select + close. 6196 var optionBtn = target.closest && target.closest('.hot-variant-option'); 6197 if (optionBtn) { 6198 ev.preventDefault(); 6199 selectVariant( 6200 optionBtn.getAttribute('data-variant-slug'), 6201 optionBtn.getAttribute('data-variant-label') 6202 ); 6203 return; 6204 } 6205 var closeEl = target.closest && target.closest('[data-hot-variant-close="1"]'); 6206 if (closeEl) { 6207 ev.preventDefault(); 6208 closeModal(); 6209 return; 6210 } 6211 6212 // Then handle CTA interception OUTSIDE the modal. 6213 var anchor = target.closest && target.closest('a'); 6214 if (!anchor) { return; } 6215 if (!anchor.matches(CTA_SELECTOR)) { return; } 6216 6217 var slug = courseSlugFromHref(anchor.getAttribute('href')); 6218 if (!slug) { return; } 6219 if (!Object.prototype.hasOwnProperty.call(GROUPS, slug)) { return; } 6220 6221 // We have a parent CTA â intercept and open the modal. 6222 ev.preventDefault(); 6223 openModal(slug, anchor); 6224 }, false); 6225 6226 // Esc closes. 6227 document.addEventListener('keydown', function (ev) { 6228 if (ev.key === 'Escape' && !modal.hidden) { 6229 ev.preventDefault(); 6230 closeModal(); 6231 } 6232 }, false); 6233 })(); 6234 </script>
6234 6235
6235<script> 6236(function(){ 6237 function run(){ 6238 var els=document.querySelectorAll(".elementor-widget-elementskit-funfact .number-percentage"); 6239 if(!els.length||!window.jQuery||!jQuery.fn.animateNumbers||!("IntersectionObserver" in window)) return; 6240 var io=new IntersectionObserver(function(entries,o){ 6241 entries.forEach(function(en){ 6242 if(!en.isIntersecting) return; 6243 o.unobserve(en.target); 6244 var $n=jQuery(en.target); 6245 if(parseInt(($n.text()||"").replace(/,/g,""),10)!==0) return; /* plugin already ran */ 6246 var v=parseInt($n.data("value"),10), d=parseInt($n.data("animation-duration"),10)||3500; 6247 if(isNaN(v)) return; 6248 if($n.data("style")==="static"||typeof Odometer==="undefined") $n.animateNumbers(v,true,d); 6249 else new Odometer({el:en.target,value:0,duration:d}).update(v); 6250 }); 6251 },{threshold:0.25}); 6252 els.forEach(function(e){io.observe(e);}); 6253 } 6254 var start=function(){setTimeout(run,1200);}; 6255 if(document.readyState==="loading") document.addEventListener("DOMContentLoaded",start); else start(); 6256})(); 6257</script>
6257 6258</body> 6259</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.