1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 9 <!-- Primary Meta Tags --> 10 <title>Contact</title> 11 <meta name="title" content="Contact"> 12 <meta name="description" content="Contact us for any questions or to schedule an appointment"> 13 <meta name="keywords" content="contact, contact us, get in touch, alpine, chiropractic, available, assist, questions, concerns, call, text, chiropractic care, spinal adjustment, back pain relief, neck pain treatment, posture correction, sports injury treatment, auto accident injury"> 14 <meta name="author" content="Aloha Studio"> 15 <meta name="robots" content="index, follow"> 16 <meta name="language" content="English"> 17 <meta name="generator" content="AlohaStudio"> 18 <meta name="medical-specialty" content="Chiropractic"> 19 20 <!-- Medical/Healthcare specific meta tags --> 21 22 <meta name="medical-disclaimer" content="This website provides general information and should not replace professional medical advice."> 23 <meta name="health-content-type" content="chiropractic-care"> 24 25 <!-- Canonical URL --> 26 <link rel="canonical" href="https://alpinechiropractic.com/contact"> 27 28 <!-- Open Graph / Facebook --> 29 <meta property="og:type" content="website"> 30 <meta property="og:url" content="https://alpinechiropractic.com/contact"> 31 <meta property="og:title" content="Contact"> 32 <meta property="og:description" content="Contact us for any questions or to schedule an appointment"> 33 <meta property="og:image" content="https://media-library.getaloha.com/01KYMQQBHAJ1WKMSAWC11HPD6G/c989f4f2-ab14-47df-8cba-28f275d9ac12_screenshot-2026-07-28-at-2-11-51-pm.png"> 34 <meta property="og:site_name" content="Contact"> 35 36 <!-- Twitter --> 37 <meta property="twitter:card" content="summary_large_image"> 38 <meta property="twitter:url" content="https://alpinechiropractic.com/contact"> 39 <meta property="twitter:title" content="Contact"> 40 <meta property="twitter:description" content="Contact us for any questions or to schedule an appointment"> 41 <meta property="twitter:image" content="https://media-library.getaloha.com/01KYMQQBHAJ1WKMSAWC11HPD6G/c989f4f2-ab14-47df-8cba-28f275d9ac12_screenshot-2026-07-28-at-2-11-51-pm.png"> 42 43 <!-- Performance optimizations --> 44 <link rel="preconnect" href="https://fonts.googleapis.com"> 45 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 46 <link rel="preconnect" href="https://cdn.jsdelivr.net"> 47 48 <!-- CSS Variables - Must be defined BEFORE external stylesheets that use them --> 49 <style> 50 :root { 51 --primary-color: var(--color-primary, #2270c7); 52 --secondary-color: #4a90e2; 53 --text-color: #333333; 54 --accent-color: #ffc107; 55 --spacing-unit: 16px; 56 --border-radius: 4px; 57 --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 58 --transition-speed: 0.3s; 59 --dark-bg: #333333; 60 --light-text: #ffffff; 61 --white-bg: #ffffff; 62 --font-family: Inter; 63 --button-radius: 6px; 64 --font-size-title: clamp(1.25rem, 2vw, 1.75rem); 65 --font-size-subtitle: clamp(1rem, 1.5vw, 1.25rem); 66 --font-size-paragraph: clamp(0.75rem, 1.5vw, 0.875rem); 67 --padding-vertical: clamp(0.625rem, 1.5vw, 1rem); 68 --padding-horizontal: clamp(0.625rem, 1.5vw, 1rem); 69 --padding-combined: clamp(0.625rem, 1.5vw, 1rem) clamp(0.625rem, 1.5vw, 1rem); 70 --logo-height: 60px; 71 --mobile-logo-height: 40px; 72 --button-font-weight: 500; 73 /* Ant Design CSS Variables */ 74 --default-primary-color: #2270c7; 75 --ant-color-primary: var(--primary-color, var(--default-primary-color)); 76 --ant-color-success: #52c41a; 77 --ant-color-warning: #faad14; 78 --ant-color-error: #ff4d4f; 79 --ant-color-info: var(--primary-color, var(--default-primary-color)); 80 --ant-color-text: rgba(0, 0, 0, 0.88); 81 --ant-color-text-secondary: rgba(0, 0, 0, 0.65); 82 --ant-color-border: #d9d9d9; 83 --ant-color-bg-container: #ffffff; 84 --ant-color-bg-layout: #f5f5f5; 85 --ant-border-radius: 6px; 86 --ant-font-size: 14px; 87 --ant-line-height: 1.5715; 88 /* Ant Design Button Variables */ 89 --ant-btn-primary-text-color: #ffffff; 90 --ant-button-primary-color: var(--ant-btn-primary-text-color); 91 --ant-btn-text-color: var(--text-color, var(--default-primary-color)); 92 } 93 </style> 94 95 <!-- Stylesheets --> 96 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 97 <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"></noscript> 98 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> 99 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"> 100 <link href="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.css" rel="stylesheet"> 101 102 <!-- Favicon --> 103 104 105 <!-- Styles --> 106 <style> 107 108 html { 109 scroll-behavior: smooth; 110 } 111 112 body { 113 font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 114 margin: 0; 115 padding: 0; 116 padding-top: 80px; /* Initial fallback - will be dynamically adjusted by JavaScript */ 117 color: var(--color-text, var(--text-color)); 118 line-height: 1.6; 119 } 120 121 .container { 122 width: 100%; 123 max-width: 1200px; 124 margin: 0 auto; 125 padding: 0 var(--spacing-unit); 126 } 127 128 img { 129 max-width: 100%; 130 height: auto; 131 } 132 133 a { 134 color: var(--default-primary-color); 135 text-decoration: none; 136 transition: color var(--transition-speed); 137 } 138 139 a:hover { 140 color: #1756a9; 141 } 142 143 .btn { 144 display: inline-block; 145 padding: 10px 20px; 146 background-color: var(--primary-color); 147 color: var(--light-text); 148 border: none; 149 border-radius: var(--border-radius); 150 cursor: pointer; 151 transition: background-color var(--transition-speed); 152 } 153 154 .btn:hover { 155 background-color: #1756a9; 156 } 157 158 .two-column-section { 159 display: flex; 160 flex-wrap: wrap; 161 } 162 163 .two-column-section > div { 164 flex: 1; 165 min-width: 300px; 166 padding: var(--spacing-unit); 167 } 168 169 .section { 170 padding: 40px 0; 171 } 172 173 .hero { 174 text-align: center; 175 padding: 80px 0; 176 background-color: var(--secondary-color); 177 } 178 179 #navigation { 180 display: flex; 181 justify-content: space-between; 182 align-items: center; 183 padding: var(--padding-combined, 1rem);
184 box-shadow: var(--box-shadow); 185 position: fixed; 186 top: 0; 187 left: 0; 188 right: 0; 189 z-index: 1000; 190 transition: background-color 0.3s ease; 191 } 192 193 /* FRONT-1350: a block sits above Navigation â keep the nav in flow, sticky instead of fixed. */ 194 body.nav-in-flow { 195 padding-top: 0; 196 } 197 198 body.nav-in-flow #navigation { 199 position: sticky; 200 top: 0; 201 } 202 203 .navigation-links { 204 display: flex; 205 gap: 20px; 206 } 207 208 #navigation .ant-btn { 209 text-shadow: none; 210 } 211 212 #navigation ul { 213 margin-bottom: 0px; 214 } 215 216 @media (min-width: 1024px) { 217 #navigation img.navigation-logo-mobile { 218 max-height: var(--logo-height, 50px); 219 height: auto; 220 } 221 } 222 223 @media (max-width: 1023px) { 224 #navigation img.navigation-logo-mobile, 225 #navigation a img.navigation-logo-mobile, 226 #navigation div img.navigation-logo-mobile { 227 max-height: var(--mobile-logo-height, 40px) !important; 228 height: auto !important; 229 width: auto; 230 } 231 } 232 233 /* Custom dropdown navigation styles */ 234 .dropdown-container { 235 position: relative; 236 } 237 238 .dropdown-container:hover .dropdown-menu { 239 opacity: 1 !important; 240 visibility: visible !important; 241 } 242 243 .dropdown-menu { 244 position: absolute; 245 top: 100%; 246 left: 0; 247 margin-top: 4px; 248 min-width: 200px; 249 border-radius: 6px; 250 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 251 z-index: 50; 252 opacity: 0; 253 visibility: hidden; 254 transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; 255 list-style: none; 256 padding: 0; 257 margin: 0; 258 } 259 260 .dropdown-menu li { 261 list-style: none; 262 } 263 264 .dropdown-menu a { 265 display: block; 266 padding: 8px 16px; 267 font-size: 14px; 268 text-decoration: none; 269 transition: background-color 0.15s ease-in-out; 270 } 271 272 .dropdown-menu a:hover { 273 background-color: var(--menu-hover, rgba(0, 0, 0, 0.05)); 274 } 275 276 .dropdown-menu a:focus-visible { 277 outline: 2px solid currentcolor; 278 outline-offset: -2px; 279 } 280 281 .dropdown-menu li:first-child a { 282 border-top-left-radius: 6px; 283 border-top-right-radius: 6px; 284 } 285 286 .dropdown-menu li:last-child a { 287 border-bottom-left-radius: 6px; 288 border-bottom-right-radius: 6px; 289 } 290 291 /* Mobile drawer layout â flex column so content scrolls */ 292 [data-element="mobile-menu-drawer"] { 293 display: flex; 294 flex-direction: column; 295 overflow: hidden; 296 } 297 298 /* Mobile navigation styles */ 299 .mobile-menu-content { 300 padding: 0; 301 overflow-y: auto; 302 flex: 1; 303 min-height: 0; 304 background-color: inherit; 305 } 306 307 .mobile-menu-item { 308 border-bottom: none; 309 } 310 311 .mobile-menu-item:last-child { 312 border-bottom: none; 313 } 314 315 .mobile-menu-row:hover, 316 .mobile-menu-link:hover { 317 background-color: var(--menu-hover, rgba(0, 0, 0, 0.05)); 318 } 319 320 .mobile-submenu-toggle:hover { 321 background-color: var(--menu-hover, rgba(0, 0, 0, 0.05)); 322 } 323 324 .mobile-submenu-toggle:focus-visible, 325 .mobile-menu-link:focus-visible { 326 outline: 2px solid currentcolor; 327 outline-offset: -2px; 328 } 329 330 .mobile-submenu { 331 border-left: 3px solid var(--primary-color); 332 transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; 333 overflow: hidden; 334 } 335 336 .mobile-submenu.max-h-0 { 337 max-height: 0 !important; 338 opacity: 0; 339 } 340 341 .mobile-submenu.max-h-96, 342 .mobile-submenu.max-h-open { 343 max-height: 50rem !important; 344 opacity: 1; 345 } 346 347 .mobile-submenu a { 348 color: #6b7280; 349 font-size: 14px; 350 padding: 8px 16px; 351 display: block; 352 text-decoration: none; 353 transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; 354 } 355 356 .mobile-submenu a:hover { 357 background-color: #f3f4f6; 358 color: #374151; 359 } 360 361 /* Submenu toggle button styles */ 362 [data-submenu-toggle] { 363 background: none; 364 border: none; 365 cursor: pointer; 366 color: #6b7280; 367 transition: color 0.15s ease-in-out; 368 } 369 370 [data-submenu-toggle]:hover { 371 color: #374151; 372 } 373 374 [data-submenu-toggle] svg { 375 transition: transform 0.2s ease-in-out; 376 } 377 378 [data-submenu-toggle] svg.rotate-180 { 379 transform: rotate(180deg); 380 } 381 382 383 384 /* Mobile navigation action buttons - specific styles to override general button styles */ 385 a.mobile-action-button { 386 font-size: 20px !important; 387 border: none !important; 388 background: transparent !important; 389 padding: 4px !important; 390 min-width: 32px; 391 min-height: 32px; 392 display: flex !important;
393 align-items: center !important; 394 justify-content: center !important; 395 } 396 397 a.mobile-action-button .anticon { 398 font-size: 20px !important; 399 } 400 401 a.mobile-action-button:hover, 402 a.mobile-action-button:focus, 403 a.mobile-action-button:active { 404 background: transparent !important; 405 } 406 407 /* Comprehensive button styling for anchor tags with button classes */ 408 a.ant-btn { 409 display: inline-flex; 410 align-items: center; 411 justify-content: center; 412 padding: 6px 15px !important; 413 font-size: 14px; 414 font-weight: 500; 415 line-height: 1.5; 416 text-decoration: none; 417 border: 1px solid transparent; 418 border-radius: var(--button-radius, 6px); 419 font-family: var(--font-family, 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'); 420 cursor: pointer; 421 transition: all 0.3s ease; 422 box-sizing: border-box; 423 position: relative; 424 white-space: normal; 425 user-select: none; 426 vertical-align: middle; 427 text-wrap: auto; 428 height: auto; 429 } 430 431 /* Primary button styles for anchors */ 432 a.ant-btn-primary { 433 background-color: var(--primary-color); 434 border-color: var(--primary-color); 435 color: var(--ant-btn-primary-text-color); 436 } 437 438 a.ant-btn-primary:hover { 439 background-color: var(--primary-color); 440 border-color: var(--primary-color); 441 color: #ffffff; 442 opacity: 0.9; 443 } 444 445 a.ant-btn-primary:focus { 446 background-color: var(--primary-color); 447 border-color: var(--primary-color); 448 color: #ffffff; 449 opacity: 0.8; 450 } 451 452 /* Ghost/Outline button styles for anchors */ 453 a.ant-btn-background-ghost, 454 a.ant-btn.ant-btn-background-ghost { 455 background-color: transparent; 456 border-color: var(--primary-color); 457 color: var(--primary-color); 458 } 459 460 a.ant-btn-background-ghost:hover, 461 a.ant-btn.ant-btn-background-ghost:hover { 462 background-color: var(--primary-color); 463 border-color: var(--primary-color); 464 color: #ffffff; 465 } 466 467 a.ant-btn-background-ghost:focus, 468 a.ant-btn.ant-btn-background-ghost:focus { 469 background-color: var(--primary-color); 470 border-color: var(--primary-color); 471 color: #ffffff; 472 } 473 474 /* Override ghost button hover for white backgrounds - must override background-color AND text color */ 475 a.ant-btn-background-ghost[style*="background-color: white"]:hover, 476 a.ant-btn-background-ghost[style*="background-color:#fff"]:hover, 477 a.ant-btn-background-ghost[style*="background-color: #fff"]:hover, 478 a.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover, 479 a.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover, 480 a.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover, 481 a.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover, 482 a.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover, 483 a.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover, 484 a.ant-btn.ant-btn-background-ghost[style*="background-color: white"]:hover, 485 a.ant-btn.ant-btn-background-ghost[style*="background-color:#fff"]:hover, 486 a.ant-btn.ant-btn-background-ghost[style*="background-color: #fff"]:hover, 487 a.ant-btn.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover, 488 a.ant-btn.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover, 489 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover, 490 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover, 491 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover, 492 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover { 493 background-color: #f5f5f5; 494 border-color: var(--primary-color, var(--default-primary-color)); 495 color: var(--primary-color, var(--default-primary-color)); 496 } 497 498 /* Default button styles for anchors */ 499 a.ant-btn-default { 500 background-color: #ffffff; 501 border-color: #d9d9d9; 502 color: #000000d9; 503 } 504 505 a.ant-btn-default:hover { 506 background-color: #ffffff; 507 border-color: var(--primary-color); 508 color: var(--primary-color); 509 } 510 511 /* Large button size */ 512 a.ant-btn-lg { 513 padding: 10px 20px; 514 font-size: 16px; 515 border-radius: 8px; 516 } 517 518 /* Small button size */ 519 a.ant-btn-sm { 520 padding: 4px 10px; 521 font-size: 12px; 522 border-radius: 4px; 523 } 524 525 /* Block button (full width) */ 526 a.ant-btn-block { 527 width: 100%; 528 display: flex; 529 } 530 531 /* Link button styles for anchors */
532 a.ant-btn-link { 533 background-color: transparent; 534 border-color: transparent; 535 color: var(--primary-color); 536 box-shadow: none; 537 padding: 0; 538 } 539 540 a.ant-btn-link:hover { 541 background-color: transparent; 542 border-color: transparent; 543 color: var(--primary-color); 544 opacity: 0.8; 545 } 546 547 /* Text button styles for anchors */ 548 a.ant-btn-text { 549 background-color: transparent; 550 border-color: transparent; 551 color: #000000d9; 552 box-shadow: none; 553 } 554 555 a.ant-btn-text:hover { 556 background-color: #f5f5f5; 557 border-color: transparent; 558 color: #000000d9; 559 } 560 561 /* Dashed button styles for anchors */ 562 a.ant-btn-dashed { 563 background-color: #ffffff; 564 border-color: #d9d9d9; 565 border-style: dashed; 566 color: #000000d9; 567 } 568 569 a.ant-btn-dashed:hover { 570 background-color: #ffffff; 571 border-color: var(--primary-color); 572 color: var(--primary-color); 573 } 574 575 /* Ensure button spans inherit color */ 576 a.ant-btn > span { 577 color: inherit; 578 } 579 580 /* Fix for ghost buttons to ensure proper text color */ 581 a.ant-btn-background-ghost > span { 582 color: inherit; 583 } 584 585 /* Ensure ghost button text is white on hover, overriding any inline styles */ 586 a.ant-btn-background-ghost:hover > span, 587 a.ant-btn.ant-btn-background-ghost:hover > span { 588 color: #ffffff; 589 } 590 591 a.ant-btn-background-ghost:focus > span, 592 a.ant-btn.ant-btn-background-ghost:focus > span { 593 color: #ffffff; 594 } 595 596 /* Override ghost button white text for white backgrounds - must come after ghost button rules */ 597 /* Higher specificity: class + attribute + pseudo-class + child combinator + element */ 598 a.ant-btn-background-ghost[style*="background-color: white"]:hover > span, 599 a.ant-btn-background-ghost[style*="background-color:#fff"]:hover > span, 600 a.ant-btn-background-ghost[style*="background-color: #fff"]:hover > span, 601 a.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover > span, 602 a.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover > span, 603 a.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover > span, 604 a.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover > span, 605 a.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover > span, 606 a.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover > span, 607 a.ant-btn.ant-btn-background-ghost[style*="background-color: white"]:hover > span, 608 a.ant-btn.ant-btn-background-ghost[style*="background-color:#fff"]:hover > span, 609 a.ant-btn.ant-btn-background-ghost[style*="background-color: #fff"]:hover > span, 610 a.ant-btn.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover > span, 611 a.ant-btn.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover > span, 612 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover > span, 613 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover > span, 614 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover > span, 615 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover > span { 616 color: var(--primary-color, var(--default-primary-color)); 617 } 618 619 /* Ghost buttons in navigation with white background - keep text dark on hover */ 620 /* Higher specificity: ID + class + pseudo-class + child combinator + element */ 621 #navigation a.ant-btn-background-ghost:hover > span, 622 #navigation a.ant-btn.ant-btn-background-ghost:hover > span { 623 color: var(--primary-color, var(--default-primary-color)); 624 } 625 626 #navigation a.ant-btn-background-ghost:hover, 627 #navigation a.ant-btn.ant-btn-background-ghost:hover { 628 background-color: transparent; 629 color: var(--primary-color, var(--default-primary-color)); 630 } 631 632 /* Danger button styles for anchors */ 633 a.ant-btn-danger { 634 background-color: #ff4d4f; 635 border-color: #ff4d4f; 636 color: #ffffff; 637 } 638 639 a.ant-btn-danger:hover { 640 background-color: #ff7875; 641 border-color: #ff7875; 642 color: #ffffff; 643 } 644 645 /* Custom color support for anchor buttons */ 646 a.ant-btn[style*="background-color"] { 647 border-color: inherit; 648 } 649 650 a.ant-btn[style*="background-color"]:hover { 651 opacity: 0.9; 652 } 653 654 /* Fix for white/light backgrounds - ensure text is visible */ 655 /* Use high specificity to override ghost button white text rule without !important */ 656 /* Match various white color formats in inline styles */ 657 a.ant-btn-background-ghost[style*="background-color: white"], 658 a.ant-btn-background-ghost[style*="background-color:#fff"], 659 a.ant-btn-background-ghost[style*="background-color: #fff"], 660 a.ant-btn-background-ghost[style*="background-color:#ffffff"], 661 a.ant-btn-background-ghost[style*="background-color: #ffffff"], 662 a.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"], 663 a.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"], 664 a.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"], 665 a.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"], 666 a.ant-btn.ant-btn-background-ghost[style*="background-color: white"], 667 a.ant-btn.ant-btn-background-ghost[style*="background-color:#fff"], 668 a.ant-btn.ant-btn-background-ghost[style*="background-color: #fff"], 669 a.ant-btn.ant-btn-background-ghost[style*="background-color:#ffffff"], 670 a.ant-btn.ant-btn-background-ghost[style*="background-color: #ffffff"], 671 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"], 672 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"], 673 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"], 674 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"], 675 a.ant-btn[style*="background-color: white"], 676 a.ant-btn[style*="background-color:#fff"], 677 a.ant-btn[style*="background-color: #fff"], 678 a.ant-btn[style*="background-color:#ffffff"], 679 a.ant-btn[style*="background-color: #ffffff"], 680 a.ant-btn[style*="background-color:rgb(255, 255, 255)"], 681 a.ant-btn[style*="background-color: rgb(255, 255, 255)"], 682 a.ant-btn[style*="background-color:rgba(255, 255, 255"], 683 a.ant-btn[style*="background-color: rgba(255, 255, 255"] { 684 color: var(--primary-color, var(--default-primary-color)); 685 } 686 687 /* High specificity hover rules for white backgrounds */ 688 a.ant-btn-background-ghost[style*="background-color: white"]:hover, 689 a.ant-btn-background-ghost[style*="background-color:#fff"]:hover, 690 a.ant-btn-background-ghost[style*="background-color: #fff"]:hover, 691 a.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover, 692 a.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover, 693 a.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover, 694 a.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover, 695 a.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover, 696 a.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover, 697 a.ant-btn.ant-btn-background-ghost[style*="background-color: white"]:hover, 698 a.ant-btn.ant-btn-background-ghost[style*="background-color:#fff"]:hover, 699 a.ant-btn.ant-btn-background-ghost[style*="background-color: #fff"]:hover, 700 a.ant-btn.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover, 701 a.ant-btn.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover, 702 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover, 703 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover, 704 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover, 705 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover, 706 a.ant-btn[style*="background-color: white"]:hover, 707 a.ant-btn[style*="background-color:#fff"]:hover, 708 a.ant-btn[style*="background-color: #fff"]:hover, 709 a.ant-btn[style*="background-color:#ffffff"]:hover, 710 a.ant-btn[style*="background-color: #ffffff"]:hover, 711 a.ant-btn[style*="background-color:rgb(255, 255, 255)"]:hover, 712 a.ant-btn[style*="background-color: rgb(255, 255, 255)"]:hover, 713 a.ant-btn[style*="background-color:rgba(255, 255, 255"]:hover, 714 a.ant-btn[style*="background-color: rgba(255, 255, 255"]:hover { 715 background-color: #f5f5f5; 716 color: var(--primary-color, var(--default-primary-color)); 717 opacity: 1; 718 } 719 720 /* Ensure text color in spans is visible for white backgrounds */ 721 a.ant-btn-background-ghost[style*="background-color: white"] > span, 722 a.ant-btn-background-ghost[style*="background-color:#fff"] > span, 723 a.ant-btn-background-ghost[style*="background-color: #fff"] > span, 724 a.ant-btn-background-ghost[style*="background-color:#ffffff"] > span, 725 a.ant-btn-background-ghost[style*="background-color: #ffffff"] > span, 726 a.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"] > span, 727 a.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"] > span, 728 a.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"] > span, 729 a.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"] > span, 730 a.ant-btn.ant-btn-background-ghost[style*="background-color: white"] > span, 731 a.ant-btn.ant-btn-background-ghost[style*="background-color:#fff"] > span, 732 a.ant-btn.ant-btn-background-ghost[style*="background-color: #fff"] > span, 733 a.ant-btn.ant-btn-background-ghost[style*="background-color:#ffffff"] > span, 734 a.ant-btn.ant-btn-background-ghost[style*="background-color: #ffffff"] > span, 735 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"] > span, 736 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"] > span, 737 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"] > span, 738 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"] > span, 739 a.ant-btn[style*="background-color: white"] > span, 740 a.ant-btn[style*="background-color:#fff"] > span, 741 a.ant-btn[style*="background-color: #fff"] > span, 742 a.ant-btn[style*="background-color:#ffffff"] > span, 743 a.ant-btn[style*="background-color: #ffffff"] > span, 744 a.ant-btn[style*="background-color:rgb(255, 255, 255)"] > span, 745 a.ant-btn[style*="background-color: rgb(255, 255, 255)"] > span, 746 a.ant-btn[style*="background-color:rgba(255, 255, 255"] > span, 747 a.ant-btn[style*="background-color: rgba(255, 255, 255"] > span { 748 color: var(--primary-color, var(--default-primary-color)); 749 } 750 751 a.ant-btn-background-ghost[style*="background-color: white"]:hover > span, 752 a.ant-btn-background-ghost[style*="background-color:#fff"]:hover > span, 753 a.ant-btn-background-ghost[style*="background-color: #fff"]:hover > span, 754 a.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover > span, 755 a.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover > span, 756 a.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover > span, 757 a.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover > span, 758 a.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover > span, 759 a.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover > span, 760 a.ant-btn.ant-btn-background-ghost[style*="background-color: white"]:hover > span, 761 a.ant-btn.ant-btn-background-ghost[style*="background-color:#fff"]:hover > span, 762 a.ant-btn.ant-btn-background-ghost[style*="background-color: #fff"]:hover > span, 763 a.ant-btn.ant-btn-background-ghost[style*="background-color:#ffffff"]:hover > span, 764 a.ant-btn.ant-btn-background-ghost[style*="background-color: #ffffff"]:hover > span, 765 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgb(255, 255, 255)"]:hover > span, 766 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgb(255, 255, 255)"]:hover > span, 767 a.ant-btn.ant-btn-background-ghost[style*="background-color:rgba(255, 255, 255"]:hover > span, 768 a.ant-btn.ant-btn-background-ghost[style*="background-color: rgba(255, 255, 255"]:hover > span, 769 a.ant-btn[style*="background-color: white"]:hover > span, 770 a.ant-btn[style*="background-color:#fff"]:hover > span, 771 a.ant-btn[style*="background-color: #fff"]:hover > span, 772 a.ant-btn[style*="background-color:#ffffff"]:hover > span, 773 a.ant-btn[style*="background-color: #ffffff"]:hover > span, 774 a.ant-btn[style*="background-color:rgb(255, 255, 255)"]:hover > span, 775 a.ant-btn[style*="background-color: rgb(255, 255, 255)"]:hover > span, 776 a.ant-btn[style*="background-color:rgba(255, 255, 255"]:hover > span, 777 a.ant-btn[style*="background-color: rgba(255, 255, 255"]:hover > span { 778 color: var(--primary-color, var(--default-primary-color)); 779 } 780 781 .footer { 782 background-color: var(--dark-bg); 783 color: var(--light-text); 784 padding: 40px 0; 785 margin-top: 40px; 786 } 787 788 .gallery-container { 789 display: flex; 790 flex-wrap: wrap; 791 gap: 10px; 792 } 793 794 .gallery-item { 795 flex: 1; 796 min-width: 200px; 797 position: relative; 798 overflow: hidden; 799 } 800 801 .gallery-image { 802 width: 100%; 803 height: 100%; 804 object-fit: cover; 805 transition: transform var(--transition-speed); 806 } 807 808 .gallery-image:hover { 809 transform: scale(1.05); 810 } 811 812 /* Basic animation classes */ 813 .animate-fadeInUp { 814 animation: fadeInUp 1s ease-out; 815 } 816 817 @keyframes fadeInUp { 818 from { 819 opacity: 0; 820 transform: translateY(20px); 821 } 822 to { 823 opacity: 1; 824 transform: translateY(0); 825 } 826 } 827 828 /* Gallery & Slider Styles */ 829 .banner-slider::-webkit-scrollbar, 830 .gallery-scroll::-webkit-scrollbar {
831 display: none; 832 } 833 834 .banner-slider { 835 -ms-overflow-style: none; 836 scrollbar-width: none; 837 } 838 839 @keyframes fadeIn { 840 from { opacity: 0; } 841 to { opacity: 1; } 842 } 843 844 @keyframes fadeOut { 845 from { opacity: 1; } 846 to { opacity: 0; } 847 } 848 849 @keyframes slideInRight { 850 from { transform: translateX(100%); } 851 to { transform: translateX(0); } 852 } 853 854 @keyframes slideInLeft { 855 from { transform: translateX(-100%); } 856 to { transform: translateX(0); } 857 } 858 859 @keyframes slideOutRight { 860 from { transform: translateX(0); } 861 to { transform: translateX(100%); } 862 } 863 864 @keyframes slideOutLeft { 865 from { transform: translateX(0); } 866 to { transform: translateX(-100%); } 867 } 868 869 .animate-fadeIn { 870 animation: fadeIn 500ms forwards; 871 } 872 873 .animate-fadeOut { 874 animation: fadeOut 500ms forwards; 875 } 876 877 .animate-slideInRight { 878 animation: slideInRight 500ms forwards; 879 } 880 881 .animate-slideInLeft { 882 animation: slideInLeft 500ms forwards; 883 } 884 885 .animate-slideOutRight { 886 animation: slideOutRight 500ms forwards; 887 } 888 889 .animate-slideOutLeft { 890 animation: slideOutLeft 500ms forwards; 891 } 892 893 /* Hover effects for service cards */ 894 .hover\:shadow-blue-400:hover { 895 box-shadow: 0 0 20px 5px rgba(66, 153, 225, 0.5); 896 } 897 898 .hover\:scale-105:hover { 899 transform: scale(1.05); 900 } 901 902 .hover\:-translate-y-2:hover { 903 transform: translateY(-8px); 904 } 905 906 /* Transition properties */ 907 .transition-transform { 908 transition: transform var(--transition-speed); 909 } 910 911 .transition-shadow { 912 transition: box-shadow var(--transition-speed); 913 } 914 915 .transition-all { 916 transition: all var(--transition-speed); 917 } 918 919 /* Responsive design */ 920 @media (max-width: 1023px) { 921 .two-column-section > div { 922 flex: 100%; 923 } 924 925 #navigation { 926 flex-direction: column; 927 gap: 10px; 928 padding: 0.75rem 1rem; 929 } 930 931 body { 932 padding-top: 120px; /* Initial mobile fallback - will be dynamically adjusted by JavaScript */ 933 } 934 935 /* Hide desktop dropdowns on mobile */ 936 .dropdown-container .dropdown-menu { 937 display: none; 938 } 939 } 940 941 /* Gallery component styles */ 942 .gallery-modal { 943 display: none; 944 position: fixed; 945 top: 0; 946 left: 0; 947 width: 100%; 948 height: 100%; 949 background-color: rgba(0, 0, 0, 0.9); 950 z-index: 1000; 951 overflow: hidden; 952 } 953 954 .gallery-modal-content { 955 display: flex; 956 align-items: center; 957 justify-content: center; 958 height: 100%; 959 } 960 961 .gallery-modal-image { 962 max-width: 90%; 963 max-height: 90%; 964 } 965 966 .gallery-modal-close { 967 position: absolute; 968 top: 20px; 969 right: 25px; 970 color: #f1f1f1; 971 font-size: 40px; 972 font-weight: bold; 973 cursor: pointer; 974 } 975 976 .gallery-modal-prev, 977 .gallery-modal-next { 978 position: absolute; 979 top: 50%; 980 padding: 16px; 981 color: var(--light-text); 982 font-weight: bold; 983 font-size: 20px; 984 cursor: pointer; 985 user-select: none; 986 background-color: rgba(0, 0, 0, 0.3); 987 border-radius: 50%; 988 transform: translateY(-50%); 989 } 990 991 .gallery-modal-prev { 992 left: 20px; 993 } 994 995 .gallery-modal-next { 996 right: 20px; 997 } 998 999 /* Patient Forms Styles */ 1000 .patient-forms { 1001 width: 100%; 1002 } 1003 1004 .rw-launcher .rwl-footer i { 1005 position: absolute; 1006 right: 60px; 1007 } 1008 1009 .rw-chat { 1010 height: auto !important; 1011 } 1012 1013 .rw-slide-wrap { 1014 min-height: auto !important; 1015 } 1016 1017 /* Grid responsive override - keep 2 columns in tablet range (768-1023px) */ 1018 /* This overrides md:grid-cols-3 which is too cramped on tablets */ 1019 @media (min-width: 768px) and (max-width: 1023px) { 1020 .grid { 1021 grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 1022 } 1023 } 1024 1025 /* Grid and ServiceCard height consistency fixes */ 1026 .grid.items-stretch { 1027 align-items: stretch !important; 1028 } 1029 1030 .grid.items-stretch > .h-full { 1031 height: 100% !important; 1032 display: flex !important; 1033 flex-direction: column !important; 1034 } 1035 1036 .grid.items-stretch .relative.box { 1037 height: 100% !important; 1038 display: flex !important; 1039 flex-direction: column !important; 1040 } 1041 1042 .grid.items-stretch .service-card { 1043 height: 100% !important; 1044 display: flex !important; 1045 flex-direction: column !important; 1046 } 1047 1048 .service-card .flex-1 { 1049 flex: 1 !important; 1050 } 1051 1052 /* Ensure h-full works properly in published HTML */ 1053 .h-full { 1054 height: 100% !important; 1055 } 1056 1057 /* Rich Text Content Styles */ 1058 .rich-text-content a { 1059 cursor: pointer; 1060 } 1061 1062 /* TwoColumnSection / RichTextTwoColumn embedded image frame. 1063 buildImageHtml (content-utils.ts) now generates a responsive frame 1064 (width:100%; max-width:536px; aspect-ratio) inline, so this rule is 1065 mainly a retroactive fix for already-saved content still carrying the 1066 old fixed width:536px; height:400px inline style â !important is 1067 needed to win over that old inline style. */ 1068 .rich-text-content .rw-image-frame, 1069 .ql-editor .rw-image-frame { 1070 width: 100% !important; 1071 max-width: 536px !important; 1072 height: auto !important; 1073 aspect-ratio: 536 / 400; 1074 } 1075 1076 .rich-text-content.ql-editor { 1077 padding: 0; 1078 } 1079 1080 /* Rich Text - Lists */ 1081 /* Quill uses data-list attributes and CSS counters for proper list rendering */ 1082 .rich-text-content ul, 1083 .rich-text-content ol { 1084 margin-bottom: 1rem; 1085 padding-left: 1.5em !important; 1086 list-style: none !important; 1087 } 1088 1089 /* Reset list counters for ordered lists */ 1090 .rich-text-content ol { 1091 counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 1092 } 1093 1094 /* Quill list items */ 1095 .rich-text-content li { 1096 list-style-type: none !important; 1097 list-style: none !important; 1098 padding-left: 1.5em; 1099 position: relative; 1100 } 1101 1102 .rich-text-content li::before { 1103 display: inline-block !important; 1104 white-space: nowrap; 1105 width: 1.2em; 1106 margin-left: -1.5em; 1107 margin-right: 0.3em; 1108 text-align: right; 1109 } 1110 1111 /* Bullet lists */ 1112 .rich-text-content li[data-list='bullet']::before { 1113 content: 'â¢' !important; 1114 } 1115 1116 /* Ordered lists */ 1117 .rich-text-content li[data-list='ordered'] { 1118 counter-increment: list-0; 1119 } 1120 1121 .rich-text-content li[data-list='ordered']::before { 1122 content: counter(list-0, decimal) '. ' !important; 1123 } 1124 1125 /* Rich Text - List Indentation */ 1126 .rich-text-content li.ql-indent-1 { 1127 padding-left: 4.5em; 1128 } 1129 .rich-text-content li.ql-indent-1[data-list='ordered'] { 1130 counter-increment: list-1; 1131 counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; 1132 } 1133 .rich-text-content li.ql-indent-1[data-list='ordered']::before { 1134 content: counter(list-1, decimal) '. ' !important; 1135 } 1136 1137 .rich-text-content li.ql-indent-2 { 1138 padding-left: 7.5em; 1139 } 1140 .rich-text-content li.ql-indent-2[data-list='ordered'] { 1141 counter-increment: list-2; 1142 counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; 1143 } 1144 .rich-text-content li.ql-indent-2[data-list='ordered']::before { 1145 content: counter(list-2, decimal) '. ' !important; 1146 } 1147 1148 .rich-text-content li.ql-indent-3 { 1149 padding-left: 10.5em; 1150 } 1151 .rich-text-content li.ql-indent-3[data-list='ordered'] { 1152 counter-increment: list-3; 1153 counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; 1154 } 1155 .rich-text-content li.ql-indent-3[data-list='ordered']::before { 1156 content: counter(list-3, decimal) '. ' !important; 1157 } 1158 1159 .rich-text-content li.ql-indent-4 { 1160 padding-left: 13.5em; 1161 } 1162 .rich-text-content li.ql-indent-4[data-list='ordered'] { 1163 counter-increment: list-4; 1164 counter-reset: list-5 list-6 list-7 list-8 list-9; 1165 } 1166 .rich-text-content li.ql-indent-4[data-list='ordered']::before { 1167 content: counter(list-4, decimal) '. ' !important; 1168 } 1169 1170 .rich-text-content li.ql-indent-5 { 1171 padding-left: 16.5em; 1172 } 1173 .rich-text-content li.ql-indent-5[data-list='ordered'] { 1174 counter-increment: list-5; 1175 counter-reset: list-6 list-7 list-8 list-9; 1176 } 1177 .rich-text-content li.ql-indent-5[data-list='ordered']::before { 1178 content: counter(list-5, decimal) '. ' !important; 1179 } 1180 1181 .rich-text-content li.ql-indent-6 { 1182 padding-left: 19.5em; 1183 } 1184 .rich-text-content li.ql-indent-6[data-list='ordered'] { 1185 counter-increment: list-6; 1186 counter-reset: list-7 list-8 list-9; 1187 } 1188 .rich-text-content li.ql-indent-6[data-list='ordered']::before { 1189 content: counter(list-6, decimal) '. ' !important; 1190 } 1191 1192 .rich-text-content li.ql-indent-7 { 1193 padding-left: 22.5em; 1194 } 1195 .rich-text-content li.ql-indent-7[data-list='ordered'] { 1196 counter-increment: list-7; 1197 counter-reset: list-8 list-9; 1198 } 1199 .rich-text-content li.ql-indent-7[data-list='ordered']::before { 1200 content: counter(list-7, decimal) '. ' !important; 1201 } 1202 1203 .rich-text-content li.ql-indent-8 { 1204 padding-left: 25.5em; 1205 } 1206 .rich-text-content li.ql-indent-8[data-list='ordered'] { 1207 counter-increment: list-8; 1208 counter-reset: list-9; 1209 } 1210 .rich-text-content li.ql-indent-8[data-list='ordered']::before { 1211 content: counter(list-8, decimal) '. ' !important; 1212 } 1213 1214 /* Service Detail - Two-column list (mirrors service-detail.scss .sd-list--2col) */ 1215 .sd-list--2col { 1216 columns: 2; 1217 column-gap: 2rem; 1218 } 1219 .sd-list--2col li { 1220 break-inside: avoid; 1221 } 1222 @media (max-width: 767px) { 1223 .sd-list--2col { 1224 columns: 1; 1225 } 1226 } 1227 1228 /* Rich Text - Text Alignment */ 1229 .rich-text-content .ql-align-center { 1230 text-align: center; 1231 } 1232 1233 .rich-text-content .ql-align-right { 1234 text-align: right; 1235 } 1236 1237 .rich-text-content .ql-align-justify { 1238 text-align: justify; 1239 } 1240 1241 /* Rich Text - Font Sizes */ 1242 .rich-text-content .ql-size-10px { 1243 font-size: 10px; 1244 } 1245 .rich-text-content .ql-size-12px { 1246 font-size: 12px; 1247 } 1248 .rich-text-content .ql-size-14px { 1249 font-size: 14px; 1250 } 1251 .rich-text-content .ql-size-16px { 1252 font-size: 16px; 1253 } 1254 .rich-text-content .ql-size-18px { 1255 font-size: 18px; 1256 } 1257 .rich-text-content .ql-size-20px { 1258 font-size: 20px; 1259 } 1260 .rich-text-content .ql-size-24px { 1261 font-size: 24px; 1262 } 1263 .rich-text-content .ql-size-32px { 1264 font-size: 32px; 1265 } 1266 1267 /* Rich Text - Line Heights */ 1268 .rich-text-content .ql-lineheight-1.0 { 1269 line-height: 1; 1270 } 1271 .rich-text-content .ql-lineheight-1.2 { 1272 line-height: 1.2; 1273 } 1274 .rich-text-content .ql-lineheight-1.5 { 1275 line-height: 1.5; 1276 } 1277 .rich-text-content .ql-lineheight-1.8 { 1278 line-height: 1.8; 1279 } 1280 .rich-text-content .ql-lineheight-2.0 { 1281 line-height: 2; 1282 } 1283 .rich-text-content .ql-lineheight-2.5 { 1284 line-height: 2.5; 1285 } 1286 .rich-text-content .ql-lineheight-3.0 { 1287 line-height: 3; 1288 } 1289 1290 /* Ant Design Tag Styles */ 1291 .ant-tag { 1292 display: inline-block; 1293 padding: 0 7px; 1294 font-size: 12px; 1295 line-height: 20px; 1296 white-space: nowrap; 1297 background: var(--ant-color-bg-layout, #fafafa); 1298 border: 1px solid var(--ant-color-border, #d9d9d9); 1299 border-radius: var(--ant-border-radius, 4px); 1300 opacity: 1; 1301 transition: all 0.2s; 1302 text-align: start; 1303 margin-inline-end: 8px; 1304 color: var(--ant-color-text, rgba(0, 0, 0, 0.88)); 1305 } 1306 1307 .ant-tag-default { 1308 background: var(--ant-color-bg-layout, #fafafa); 1309 border-color: var(--ant-color-border, #d9d9d9); 1310 color: var(--ant-color-text, rgba(0, 0, 0, 0.88)); 1311 } 1312 1313 /* Hero Split Layout Styles */ 1314 .hero__image, .hero__text { 1315 flex: 0 0 100%; 1316 } 1317 1318 /* aspect-ratio scales the crop height with the container's actual width 1319 * (full-width up to the 1024px breakpoint) instead of a flat 200px, which 1320 * cropped 'cover'-sized portrait photos down to a closeup of the face â 1321 * worse the wider the "mobile" viewport got. min-height is a floor for 1322 * narrow phones; max-height is a ceiling so a near-1024px-wide "mobile" 1323 * viewport doesn't grow the image past ~480px (4:3 alone would reach 1324 * ~767px at 1023px wide â taller than desktop's fixed 420px). Desktop's 1325 * 420px min-height below (@media min-width: 1024px) resets both and is 1326 * unaffected. Mirrors hero-split.css / editor-page.scss. */ 1327 .hero__image { 1328 aspect-ratio: 4 / 3; 1329 min-height: 320px; 1330 max-height: 480px; 1331 } 1332 1333 .hero__text .special-line-1, 1334 .hero__text .special-line-2 { 1335 margin: 0 !important; 1336 } 1337 1338 .hero__text .special-line-1 *, 1339 .hero__text .special-line-2 * { 1340 margin: 0 !important; 1341 } 1342 1343 /* Mobile rounded corners (stacked layout) */ 1344 .hero__image { 1345 border-top-left-radius: 20px; 1346 border-top-right-radius: 20px; 1347 } 1348 1349 .hero__text { 1350 border-bottom-left-radius: 20px; 1351 border-bottom-right-radius: 20px; 1352 } 1353 1354 /* Mobile (stacked) â keep the image on top regardless of which side the 1355 * desktop layout puts it on. The variant uses flex-col-reverse so an item 1356 * with order: 2 lands at the top and order: 1 at the bottom. Without these 1357 * overrides, swapping the desktop layout to "Media left / Text right" 1358 * (order-1 on image, order-2 on text) would render mobile as 1359 * text-on-top / image-below â the opposite of the standard mobile pattern. */ 1360 @media (max-width: 1023px) { 1361 .hero__image { 1362 order: 2; 1363 } 1364 .hero__text { 1365 order: 1; 1366 } 1367 } 1368 1369 /* Per-device Hero background size (FRONT-1213) â see hero-responsive-css.ts 1370 * for the single source of truth these rules are generated from. Base 1371 * rules MUST precede the mobile block below: both share the .hero-bg / 1372 * .hero__image selectors at equal specificity, so reversing the order 1373 * makes mobile values silently win at every breakpoint. */ 1374 1375 .hero-bg { 1376 background-image: var(--hero-bg-image); 1377 background-size: var(--hero-bg-size); 1378 background-position: var(--hero-bg-position); 1379 background-color: var(--hero-bg-color); 1380 background-attachment: var(--hero-bg-attachment); 1381 background-repeat: no-repeat; 1382 } 1383 .hero-bg--fixed-height { 1384 height: var(--hero-height);
1385 min-height: var(--hero-min-height); 1386 } 1387 .hero-bg__full-img { 1388 display: var(--hero-full-img-display, none); 1389 } 1390 1391 1392 .hero__image { 1393 background-image: var(--hero-image-bg-image); 1394 background-size: var(--hero-image-bg-size); 1395 background-position: var(--hero-image-bg-position); 1396 background-color: var(--hero-image-bg-color); 1397 background-repeat: no-repeat; 1398 } 1399 1400 1401 @media (max-width: 1023px) { 1402 1403 .hero-bg { 1404 background-image: var(--hero-bg-image-mobile, var(--hero-bg-image)); 1405 background-size: var(--hero-bg-size-mobile, var(--hero-bg-size)); 1406 background-position: var(--hero-bg-position-mobile, var(--hero-bg-position)); 1407 background-color: var(--hero-bg-color-mobile, var(--hero-bg-color)); 1408 background-attachment: var(--hero-bg-attachment-mobile, var(--hero-bg-attachment)); 1409 } 1410 .hero-bg--fixed-height { 1411 height: var(--hero-height-mobile, var(--hero-height)); 1412 min-height: var(--hero-min-height-mobile, var(--hero-min-height)); 1413 } 1414 .hero-bg__full-img { 1415 display: var(--hero-full-img-display-mobile, var(--hero-full-img-display, none)); 1416 } 1417 1418 1419 .hero__image { 1420 background-image: var(--hero-image-bg-image-mobile, var(--hero-image-bg-image)); 1421 background-size: var(--hero-image-bg-size-mobile, var(--hero-image-bg-size)); 1422 background-position: var(--hero-image-bg-position-mobile, var(--hero-image-bg-position)); 1423 background-color: var(--hero-image-bg-color-mobile, var(--hero-image-bg-color)); 1424 } 1425 1426 } 1427 1428 /* Hero Parallax Styles */ 1429 .hero { 1430 position: relative; 1431 background-attachment: scroll !important; 1432 } 1433 1434 .parallax { 1435 position: relative; 1436 background-attachment: scroll !important; 1437 } 1438 1439 /* Hide the brief YouTube chrome flash on first load â see notes in 1440 * hero-parallax.css for the rationale. Mask the iframe with a solid 1441 * overlay that fades out after the chrome has settled, instead of 1442 * hiding the iframe itself (which would just delay the flash). */ 1443 @keyframes hero-bg-video-mask-fadeout { 1444 from { opacity: 1; } 1445 to { opacity: 0; visibility: hidden; } 1446 } 1447 1448 .hero-bg-video-mask { 1449 position: absolute; 1450 inset: 0; 1451 background-color: #000; 1452 background-size: cover; 1453 background-position: center; 1454 background-repeat: no-repeat; 1455 z-index: 1; 1456 pointer-events: none; 1457 /* 5s fallback timer in case the YouTube IFrame API never reports a 1458 * PLAYING state. Normal happy-path: JS reports PLAYING and the 1459 * .is-ready class below kicks in well before the 5s mark. */ 1460 animation: hero-bg-video-mask-fadeout 0.4s ease-in 5s both; 1461 } 1462 1463 .hero-bg-video-mask.is-ready { 1464 animation: hero-bg-video-mask-fadeout 0.4s ease-in 0s forwards; 1465 } 1466 1467 /* Responsive utilities */ 1468 @media (max-width: 1023px) { 1469 .container { 1470 padding: 0 var(--spacing-unit); 1471 } 1472 1473 .two-column-section { 1474 flex-direction: column; 1475 } 1476 1477 .navigation-links { 1478 display: none; 1479 } 1480 } 1481 1482 @media(min-width: 768px) { 1483 .hero { 1484 background-attachment: fixed !important; 1485 } 1486 1487 .parallax { 1488 background-attachment: fixed !important; 1489 } 1490 } 1491 1492 @media(min-width: 1024px) { 1493 .hero__image, .hero__text { 1494 flex: 0 0 50%; 1495 } 1496 1497 .hero__image { 1498 aspect-ratio: auto; 1499 max-height: none; 1500 min-height: 420px; 1501 } 1502 1503 /* Reset mobile rounded corners for desktop */ 1504 .hero__image { 1505 border-top-left-radius: 0; 1506 border-top-right-radius: 0; 1507 } 1508 1509 .hero__text { 1510 border-bottom-left-radius: 0; 1511 border-bottom-right-radius: 0; 1512 } 1513 1514 /* Apply rounded corners based on order classes for desktop */ 1515 .hero__image.order-1 { 1516 border-top-left-radius: 20px; 1517 border-bottom-left-radius: 20px; 1518 } 1519 1520 .hero__image.order-2 { 1521 border-top-right-radius: 20px; 1522 border-bottom-right-radius: 20px; 1523 } 1524 1525 .hero__text.order-1 { 1526 border-top-left-radius: 20px; 1527 border-bottom-left-radius: 20px; 1528 } 1529 1530 .hero__text.order-2 { 1531 border-top-right-radius: 20px; 1532 border-bottom-right-radius: 20px; 1533 } 1534 } 1535 1536 1537 /* Patient Forms Styles */ 1538 .patient-forms { 1539 width: 100%; 1540 max-width: 800px; 1541 margin: 0 auto; 1542 } 1543 1544 .patient-forms__container { 1545 background-color: white; 1546 border-radius: 10px; 1547 padding: 30px; 1548 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 1549 } 1550 1551 .patient-forms__header { 1552 margin-bottom: 24px; 1553 } 1554 1555 .patient-forms__title { 1556 color: var(--primary-color); 1557 margin-bottom: 10px; 1558 font-size: 24px; 1559 font-weight: 500; 1560 } 1561 1562 .patient-forms__description { 1563 color: var(--text-color); 1564 opacity: 0.7; 1565 } 1566 1567 .patient-forms__list { 1568 display: flex; 1569 flex-direction: column; 1570 gap: 10px; 1571 margin-bottom: 30px; 1572 } 1573 1574 .patient-forms__option { 1575 background-color: white; 1576 border: 1px solid #e8e8e8; 1577 border-radius: 5px; 1578 padding: 15px; 1579 cursor: pointer; 1580 transition: all 0.3s; 1581 display: flex; 1582 align-items: flex-start; 1583 gap: 15px; 1584 margin: 0; 1585 width: 100%; 1586 } 1587 1588 .patient-forms__option:hover { 1589 border-color: var(--primary-color); 1590 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 1591 } 1592 1593 .patient-forms__radio-input { 1594 margin-top: 4px; 1595 cursor: pointer;
1596 width: 20px; 1597 height: 20px; 1598 } 1599 1600 .patient-forms__option-details { 1601 flex: 1; 1602 cursor: pointer; 1603 } 1604 1605 .patient-forms__option-details strong { 1606 display: block; 1607 margin-bottom: 4px; 1608 color: var(--text-color); 1609 } 1610 1611 .patient-forms__option-details p { 1612 color: var(--text-color); 1613 opacity: 0.7; 1614 margin: 0; 1615 font-size: 14px; 1616 } 1617 1618 .patient-forms__continue { 1619 width: 100%; 1620 height: 40px; 1621 font-weight: 500; 1622 background-color: var(--primary-color) !important; 1623 border-color: var(--primary-color) !important; 1624 color: #ffffff !important; 1625 transition: opacity 0.2s ease; 1626 } 1627 1628 .patient-forms__continue:hover, 1629 .patient-forms__continue:focus, 1630 .patient-forms__continue:active, 1631 .patient-forms__continue:focus-visible { 1632 background-color: var(--primary-color) !important; 1633 border-color: var(--primary-color) !important; 1634 color: #ffffff !important; 1635 opacity: 0.9; 1636 } 1637 1638 .patient-forms__continue[disabled], 1639 .patient-forms__continue[disabled]:hover, 1640 .patient-forms__continue.ant-btn-disabled, 1641 .patient-forms__continue.ant-btn-disabled:hover { 1642 background-color: #f5f5f5 !important; 1643 border-color: #d9d9d9 !important; 1644 color: rgba(0, 0, 0, 0.25) !important; 1645 opacity: 1; 1646 } 1647 1648 .patient-forms__form-view { 1649 min-height: 400px; 1650 } 1651 1652 .patient-forms__form-header { 1653 margin-bottom: 24px; 1654 display: flex; 1655 align-items: center; 1656 gap: 16px; 1657 } 1658 1659 .patient-forms__back { 1660 border: none; 1661 padding: 0; 1662 color: var(--primary-color); 1663 background: none; 1664 cursor: pointer; 1665 display: flex; 1666 align-items: center; 1667 font-weight: 500; 1668 } 1669 1670 .patient-forms__back:hover { 1671 text-decoration: underline; 1672 } 1673 1674 .patient-forms__form-title { 1675 margin: 0; 1676 font-size: 18px; 1677 font-weight: 600; 1678 color: var(--primary-color); 1679 } 1680 1681 .patient-forms__embed { 1682 min-height: 400px; 1683 background-color: white; 1684 border-radius: 5px; 1685 padding: 20px; 1686 } 1687 1688 1689/* Accessibility Widget Positioning */ 1690body .uwy.userway_p1 .userway_buttons_wrapper { 1691 top: 100px !important; 1692} 1693 1694/* Mobile responsive version */ 1695@media (max-width: 1023px) { 1696 body .uwy.userway_p1 .userway_buttons_wrapper { 1697 top: 320px !important; 1698 } 1699} 1700 1701 1702 /* Base text color â resolves design-token --color-text so inheriting blocks 1703 (e.g. rich-text-two-column-section which relies on inheritance for body 1704 text) render the same color in both the edit canvas and published HTML. 1705 Without this, the canvas inherits AntD's colorText from body while the 1706 published build uses BASE_STYLES body color â that divergence is exactly 1707 what the Playwright parity harness catches. Inline per-block color props 1708 still win via specificity + inheritance source order. */ 1709 body.has-appearance-settings { 1710 color: var(--color-text, #021427e0); 1711 } 1712 1713 /* Cascade the design-token font family to every block. Inline fontFamily 1714 overrides still win (e.g. button/nav reference the same var explicitly). */ 1715 body.has-appearance-settings, 1716 body.has-appearance-settings h1, body.has-appearance-settings h2, body.has-appearance-settings h3, body.has-appearance-settings h4, body.has-appearance-settings h5, body.has-appearance-settings h6, 1717 body.has-appearance-settings p, body.has-appearance-settings a, body.has-appearance-settings span, body.has-appearance-settings li { 1718 font-family: var(--font-family, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; 1719 } 1720 1721 /* Utility classes for font sizes */ 1722 body.has-appearance-settings .font-title { 1723 font-size: var(--font-size-title) !important; 1724 } 1725 body.has-appearance-settings .font-subtitle { 1726 font-size: var(--font-size-subtitle) !important; 1727 } 1728 body.has-appearance-settings .font-paragraph { 1729 font-size: var(--font-size-paragraph) !important; 1730 } 1731 1732 /* Global edge gutter â horizontal spacing from the viewport edge on every 1733 .container element. Driven by the design-token margin.edgeGutter token. 1734 Falls back to 1rem when no tokens are set. */ 1735 body.has-appearance-settings .container { 1736 padding-left: var(--margin-edgeGutter, 1rem) !important; 1737 padding-right: var(--margin-edgeGutter, 1rem) !important; 1738 } 1739 1740 /* Legacy brand-settings padding utility classes. All first-party blocks have 1741 migrated to inline padding via token bindings (emit var(--spacing-id, ...)). 1742 These rules are kept only for two backward-compat paths: 1743 1. Prebuilt site templates (features-optometry.html, features-chiro.html) 1744 that were snapshotted with this class in their DOM. 1745 2. Any legacy user-published sites that havent re-saved since migration. 1746 Safe to remove once usage telemetry confirms zero hits. */ 1747 body.has-appearance-settings .padding-global { 1748 padding: var(--padding-combined) !important; 1749 } 1750 body.has-appearance-settings .padding-vertical-global { 1751 padding-top: var(--padding-vertical) !important; 1752 padding-bottom: var(--padding-vertical) !important; 1753 } 1754 body.has-appearance-settings .padding-horizontal-global { 1755 padding-left: var(--padding-horizontal) !important; 1756 padding-right: var(--padding-horizontal) !important; 1757 } 1758 1759 /* Hero component â title and subtitle size overrides */ 1760 body.has-appearance-settings .special-line-1 { 1761 font-size: var(--font-size-title) !important; 1762 } 1763 body.has-appearance-settings .special-line-2 { 1764 font-size: var(--font-size-subtitle) !important; 1765 } 1766 body.has-appearance-settings .special-line-1.font-paragraph, 1767 body.has-appearance-settings .special-line-1.font-title { 1768 font-size: var(--font-size-title) !important; 1769 } 1770 body.has-appearance-settings .special-line-2.font-paragraph, 1771 body.has-appearance-settings .special-line-2.font-subtitle { 1772 font-size: var(--font-size-subtitle) !important; 1773 } 1774 1775 /* InformativeSection overrides */ 1776 body.has-appearance-settings .informative-heading { 1777 font-size: var(--font-size-title) !important; 1778 } 1779 body.has-appearance-settings .informative-paragraph { 1780 font-size: var(--font-size-subtitle) !important; 1781 } 1782 body.has-appearance-settings section.padding-global .font-paragraph { 1783 font-size: var(--font-size-subtitle) !important; 1784 } 1785 1786 /* Hero legacy fallbacks â Hero components have px-4 and py-* classes */
1787 body.has-appearance-settings section.px-4[class*="py-"] [id*="hero_title"] .font-paragraph { 1788 font-size: var(--font-size-title) !important; 1789 } 1790 body.has-appearance-settings section.px-4[class*="py-"] [id*="hero_subtitle"] .font-paragraph { 1791 font-size: var(--font-size-subtitle) !important; 1792 } 1793 body.has-appearance-settings section.px-4[class*="py-"] .font-paragraph:not(.ant-typography) { 1794 font-size: var(--font-size-title) !important; 1795 } 1796 body.has-appearance-settings section.px-4[class*="py-"] .font-paragraph.ant-typography { 1797 font-size: var(--font-size-subtitle) !important; 1798 } 1799 1800 </style> 1801 1802 <!-- SEO URL Resolution Script --> 1803
1803<script> 1804 (function() { 1805 const origin = window.location.origin; 1806 const baseUrl = "https://alpinechiropractic.com/"; 1807 setTimeout(function() { 1808 // Update canonical and meta URLs only if they're using placeholder URLs 1809 const elements = [ 1810 'link[rel="canonical"]', 1811 'meta[property="og:url"]', 1812 'meta[property="og:image"]', 1813 'meta[property="twitter:url"]', 1814 'meta[property="twitter:image"]' 1815 ]; 1816 1817 elements.forEach(selector => { 1818 const el = document.querySelector(selector); 1819 if (el && (el.href || el.content).includes('example.com')) { 1820 if (el.href) el.href = el.href.replace('https://example.com', origin); 1821 if (el.content) el.content = el.content.replace('https://example.com', origin); 1822 } 1823 }); 1824 1825 // Update structured data URLs 1826 document.querySelectorAll('script[type="application/ld+json"]').forEach(script => { 1827 try { 1828 const data = JSON.parse(script.textContent || script.innerText); 1829 if (data.url && data.url.includes('example.com')) { 1830 data.url = data.url.replace('https://example.com', origin); 1831 script.textContent = JSON.stringify(data, null, 2); 1832 } 1833 } catch (e) {} 1834 }); 1835 }, 100); 1836 })(); 1837 </script>
1837 1838 1839 1840 1841 1842</head> 1843<body class="has-appearance-settings"> 1844 1845 1846 <div class="relative p-0 " style="background-color: rgb(255, 255, 255); background-size: cover; background-position: center center; height: auto; width: 100%; margin: 0px;"><nav id="navigation" class="w-full " role="navigation" aria-label="Main Navigation" style="padding: clamp(0.625rem, 1.5cqw, 1rem); background-color: rgb(255, 255, 255);"><div class="container mx-auto flex justify-between items-center"><div class="flex-shrink-0 flex items-center justify-center"><a data-original-url="/" aria-label="Home" class="flex items-center justify-center" href="https://alpinechiropractic.com/"><img src="https://media-library.getaloha.com/01KYMQQBHAJ1WKMSAWC11HPD6G/c989f4f2-ab14-47df-8cba-28f275d9ac12_screenshot-2026-07-28-at-2-11-51-pm.png" alt="Chiropractic clinic logo - professional spine care services" class="mx-auto navigation-logo-mobile" style="--logo-height: 60px; --mobile-logo-height: 40px;" loading="lazy"></a></div><div class="hidden lg:block" data-nav-type="desktop"><ul class="hidden lg:flex items-center gap-3 list-none"><li class="inline-block"><a data-original-url="/about-alpine-chiropractic-trusted-chiropractor-in-virginia-beach-va" data-page-id="ac4e0726-bab7-4356-81d5-a78434d1c98b" class="focus:ring-2 focus:ring-blue-500 focus:bg-blue-50" aria-label="About Us" style="color: rgb(0, 0, 0); font-size: clamp(0.75rem, 1.5cqw, 0.875rem); text-decoration: none; display: block; padding: 4px 8px; border-radius: 4px;" href="about-alpine-chiropractic-trusted-chiropractor-in-virginia-beach-va">About Us</a></li><li class="inline-block"><a data-original-url="/contact" data-page-id="5a283a0d-1d19-4c16-bc24-ba15a1f875f1" class="focus:ring-2 focus:ring-blue-500 focus:bg-blue-50" aria-label="Contact" style="color: rgb(0, 0, 0); font-size: clamp(0.75rem, 1.5cqw, 0.875rem); text-decoration: none; display: block; padding: 4px 8px; border-radius: 4px;" href="contact">Contact</a></li><li class="inline-block"><a data-original-url="/patient-forms" data-page-id="8dddb54d-c4ff-4714-a2ad-dbc187d47a9f" class="focus:ring-2 focus:ring-blue-500 focus:bg-blue-50" aria-label="Patient Forms" style="color: rgb(0, 0, 0); font-size: clamp(0.75rem, 1.5cqw, 0.875rem); text-decoration: none; display: block; padding: 4px 8px; border-radius: 4px;" href="patient-forms">Patient Forms</a></li><li class="relative inline-block dropdown-container group"><a class="inline-flex items-center gap-1 focus:ring-2 focus:ring-blue-500 focus:bg-blue-50 rounded px-2 py-1 dropdown-trigger" aria-haspopup="true" role="button" data-original-url="/comprehensive-chiropractic-services-in-virginia-beach-va" style="color: rgb(0, 0, 0); font-size: clamp(0.75rem, 1.5cqw, 0.875rem); cursor: pointer;" href="comprehensive-chiropractic-services-in-virginia-beach-va">Services<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></a><ul class="dropdown-menu absolute top-full left-0 mt-1 w-48 rounded-md shadow-lg z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200" style="--menu-bg: #ffffff; --menu-hover: #f2f2f2; --menu-text: #000000; --menu-border: #e6e6e6; background-color: rgb(255, 255, 255); border: 1px solid; min-width: 200px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;"><li><a data-original-url="/massage-therapy-services-in-virginia-beach-va" data-page-id="3dd11364-00cd-4596-94e5-4a37d7c60e71" class="submenu-link block px-4 py-2 text-sm" aria-label="Services - Massage Therapy Services" style="color: rgb(0, 0, 0);" href="massage-therapy-services-in-virginia-beach-va">Massage Therapy Services</a></li><li><a data-original-url="/spinal-decompression-therapy-in-virginia-beach-va" data-page-id="667ae6ad-1b8f-424c-9981-6b6e18e298ac" class="submenu-link block px-4 py-2 text-sm" aria-label="Services - Spinal Decompression Therapy" style="color: rgb(0, 0, 0);" href="spinal-decompression-therapy-in-virginia-beach-va">Spinal Decompression Therapy</a></li><li><a data-original-url="/chiropractic-adjustments-in-virginia-beach-va" data-page-id="7ae5f044-4f87-4f3a-98b4-0acc2ea29f87" class="submenu-link block px-4 py-2 text-sm" aria-label="Services - Chiropractic Adjustments" style="color: rgb(0, 0, 0);" href="chiropractic-adjustments-in-virginia-beach-va">Chiropractic Adjustments</a></li></ul></li><li class="relative inline-block dropdown-container group"><a class="inline-flex items-center gap-1 focus:ring-2 focus:ring-blue-500 focus:bg-blue-50 rounded px-2 py-1 dropdown-trigger" aria-haspopup="true" role="button" data-original-url="/chiropractic-care-for-symptoms-in-virginia-beach-va" style="color: rgb(0, 0, 0); font-size: clamp(0.75rem, 1.5cqw, 0.875rem); cursor: pointer;" href="chiropractic-care-for-symptoms-in-virginia-beach-va">Symptoms<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1846<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></a><ul class="dropdown-menu absolute top-full left-0 mt-1 w-48 rounded-md shadow-lg z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200" style="--menu-bg: #ffffff; --menu-hover: #f2f2f2; --menu-text: #000000; --menu-border: #e6e6e6; background-color: rgb(255, 255, 255); border: 1px solid; min-width: 200px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;"><li><a data-original-url="/scoliosis-chiropractic-care-in-virginia-beach-va" data-page-id="69fb9429-d1dc-4f73-9762-61f40b5dbfc2" class="submenu-link block px-4 py-2 text-sm" aria-label="Symptoms - Scoliosis Chiropractic Care" style="color: rgb(0, 0, 0);" href="scoliosis-chiropractic-care-in-virginia-beach-va">Scoliosis Chiropractic Care</a></li><li><a data-original-url="/arm-and-leg-pain-relief-in-virginia-beach-va" data-page-id="534cce0c-dc98-43d3-adca-1ef71d0260aa" class="submenu-link block px-4 py-2 text-sm" aria-label="Symptoms - Arm and Leg Pain Relief" style="color: rgb(0, 0, 0);" href="arm-and-leg-pain-relief-in-virginia-beach-va">Arm and Leg Pain Relief</a></li><li><a data-original-url="/headache-and-migraine-relief-in-virginia-beach-va" data-page-id="e28eb430-c552-4f9b-b97e-67df480d84cd" class="submenu-link block px-4 py-2 text-sm" aria-label="Symptoms - Headache and Migraine Relief" style="color: rgb(0, 0, 0);" href="headache-and-migraine-relief-in-virginia-beach-va">Headache and Migraine Relief</a></li><li><a data-original-url="/chiropractic-shoulder-pain-relief-in-virginia-beach-va" data-page-id="de02b340-607c-4f68-8800-463b6e4d5ee9" class="submenu-link block px-4 py-2 text-sm" aria-label="Symptoms - Chiropractic Shoulder Pain Relief" style="color: rgb(0, 0, 0);" href="chiropractic-shoulder-pain-relief-in-virginia-beach-va">Chiropractic Shoulder Pain Relief</a></li><li><a data-original-url="/neck-pain-relief-and-chiropractic-care-in-virginia-beach-va" data-page-id="5bd0cce1-72bc-497f-85ad-b420ede987a0" class="submenu-link block px-4 py-2 text-sm" aria-label="Symptoms - Neck Pain Relief and Chiropractic Care" style="color: rgb(0, 0, 0);" href="neck-pain-relief-and-chiropractic-care-in-virginia-beach-va">Neck Pain Relief and Chiropractic Care</a></li><li><a data-original-url="/back-pain-relief-and-chiropractic-care-in-virginia-beach-va" data-page-id="746cfd97-35c1-4288-9443-5b4fd420375a" class="submenu-link block px-4 py-2 text-sm" aria-label="Symptoms - Back Pain Relief and Chiropractic Care" style="color: rgb(0, 0, 0);" href="back-pain-relief-and-chiropractic-care-in-virginia-beach-va">Back Pain Relief and Chiropractic Care</a></li></ul></li><li class="inline-block"><a class="ant-btn css-1cgqdj8 ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-background-ghost" style="border-color: var(--color-primary, #2270c7); color: var(--color-primary, #2270c7); font-weight: 500; border-radius: 6px; font-family: var(--font-family, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: 0.2s ease-in-out;" href="tel:+17574963229" data-original-url="tel:+17574963229" role="button"><span>(757) 496-3229</span></a></li></ul></div><div class="block lg:hidden mobile-nav-container" data-nav-type="mobile"><div style="display: flex; align-items: center; gap: 8px;"><a href="tel:+17574963229" aria-label="(757) 496-3229 button" data-element="mobile-action-7" data-original-url="tel:+17574963229" class="ant-btn css-1cgqdj8 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only mobile-action-button" aria-disabled="false" style="color: rgb(0, 0, 0);"><span class="ant-btn-icon"><span role="img" aria-label="phone" class="anticon anticon-phone"><svg viewBox="64 64 896 896" focusable="false" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 01-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 00-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.
18466-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 00285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path></svg></span></span></a><a href="schedule" aria-label="Schedule button" data-element="mobile-action-6" data-original-url="/schedule" class="ant-btn css-1cgqdj8 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only mobile-action-button" aria-disabled="false" style="color: rgb(0, 0, 0);"><span class="ant-btn-icon"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span></a><button aria-label="Open menu" data-element="mobile-menu-button" type="button" class="ant-btn css-1cgqdj8 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only flex" style="border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; color: rgb(0, 0, 0); font-size: 20px; padding: 4px 8px;"><span class="ant-btn-icon"><span role="img" aria-label="menu" class="anticon anticon-menu"><svg viewBox="64 64 896 896" focusable="false" data-icon="menu" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg></span></span></button><div data-element="mobile-menu-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" aria-hidden="true"></div><div data-element="mobile-menu-drawer" class="fixed top-0 right-0 h-full w-64 shadow-lg z-50 transform transition-transform flex flex-col overflow-hidden translate-x-full" aria-label="Mobile Navigation" style="background-color: rgb(255, 255, 255); transition: transform 0.3s ease-in-out;"><div class="flex justify-between items-center p-4" style="border-bottom: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0);"><span class="text-lg font-semibold">Menu</span><button aria-label="Close menu" data-element="mobile-menu-drawer-close" type="button" class="ant-btn css-1cgqdj8 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only" style="border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; color: rgb(0, 0, 0); font-size: 18px;"><span class="ant-btn-icon"><span role="img" aria-label="close" class="anticon anticon-close"><svg fill-rule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
1846<path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg></span></span></button></div><div class="mobile-menu-content overflow-y-auto" style="background-color: rgb(255, 255, 255); flex: 1 1 0%; min-height: 0px; overflow-y: auto; --menu-bg: #ffffff; --menu-hover: #f2f2f2; --menu-text: #000000; --menu-border: #e6e6e6;"><div class="mobile-menu-item"><a class="mobile-menu-link block px-4 py-3 text-base font-medium" data-original-url="/about-alpine-chiropractic-trusted-chiropractor-in-virginia-beach-va" data-page-id="ac4e0726-bab7-4356-81d5-a78434d1c98b" aria-label="About Us" style="font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="about-alpine-chiropractic-trusted-chiropractor-in-virginia-beach-va">About Us</a></div><div class="mobile-menu-item"><a class="mobile-menu-link block px-4 py-3 text-base font-medium" data-original-url="/contact" data-page-id="5a283a0d-1d19-4c16-bc24-ba15a1f875f1" aria-label="Contact" style="font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="contact">Contact</a></div><div class="mobile-menu-item"><a class="mobile-menu-link block px-4 py-3 text-base font-medium" data-original-url="/patient-forms" data-page-id="8dddb54d-c4ff-4714-a2ad-dbc187d47a9f" aria-label="Patient Forms" style="font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="patient-forms">Patient Forms</a></div><div class="mobile-menu-item"><div class="mobile-menu-row flex items-center justify-between" style="border-bottom: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0);"><a class="flex-1 block px-4 py-3 text-base font-medium" data-original-url="/comprehensive-chiropractic-services-in-virginia-beach-va" style="font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: rgb(0, 0, 0);" href="comprehensive-chiropractic-services-in-virginia-beach-va">Services</a><button class="mobile-submenu-toggle px-4 py-3" aria-expanded="false" aria-label="Toggle Services submenu" data-submenu-toggle="4" style="color: rgb(0, 0, 0);"><svg class="w-4 h-4 transition-transform duration-200 " fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button></div><div class="mobile-submenu pl-4 transition-all duration-300 overflow-hidden max-h-0 opacity-0" data-submenu-content="4" style="background-color: rgb(242, 242, 242);"><div class="py-2"><a data-original-url="/massage-therapy-services-in-virginia-beach-va" data-page-id="3dd11364-00cd-4596-94e5-4a37d7c60e71" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="massage-therapy-services-in-virginia-beach-va">Massage Therapy Services</a><a data-original-url="/spinal-decompression-therapy-in-virginia-beach-va" data-page-id="667ae6ad-1b8f-424c-9981-6b6e18e298ac" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="spinal-decompression-therapy-in-virginia-beach-va">Spinal Decompression Therapy</a><a data-original-url="/chiropractic-adjustments-in-virginia-beach-va" data-page-id="7ae5f044-4f87-4f3a-98b4-0acc2ea29f87" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="chiropractic-adjustments-in-virginia-beach-va">Chiropractic Adjustments</a></div></div></div><div class="mobile-menu-item"><div class="mobile-menu-row flex items-center justify-between" style="border-bottom: 1px solid rgb(230, 230, 230);
1846 color: rgb(0, 0, 0);"><a class="flex-1 block px-4 py-3 text-base font-medium" data-original-url="/chiropractic-care-for-symptoms-in-virginia-beach-va" style="font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: rgb(0, 0, 0);" href="chiropractic-care-for-symptoms-in-virginia-beach-va">Symptoms</a><button class="mobile-submenu-toggle px-4 py-3" aria-expanded="false" aria-label="Toggle Symptoms submenu" data-submenu-toggle="5" style="color: rgb(0, 0, 0);"><svg class="w-4 h-4 transition-transform duration-200 " fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button></div><div class="mobile-submenu pl-4 transition-all duration-300 overflow-hidden max-h-0 opacity-0" data-submenu-content="5" style="background-color: rgb(242, 242, 242);"><div class="py-2"><a data-original-url="/scoliosis-chiropractic-care-in-virginia-beach-va" data-page-id="69fb9429-d1dc-4f73-9762-61f40b5dbfc2" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="scoliosis-chiropractic-care-in-virginia-beach-va">Scoliosis Chiropractic Care</a><a data-original-url="/arm-and-leg-pain-relief-in-virginia-beach-va" data-page-id="534cce0c-dc98-43d3-adca-1ef71d0260aa" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="arm-and-leg-pain-relief-in-virginia-beach-va">Arm and Leg Pain Relief</a><a data-original-url="/headache-and-migraine-relief-in-virginia-beach-va" data-page-id="e28eb430-c552-4f9b-b97e-67df480d84cd" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="headache-and-migraine-relief-in-virginia-beach-va">Headache and Migraine Relief</a><a data-original-url="/chiropractic-shoulder-pain-relief-in-virginia-beach-va" data-page-id="de02b340-607c-4f68-8800-463b6e4d5ee9" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="chiropractic-shoulder-pain-relief-in-virginia-beach-va">Chiropractic Shoulder Pain Relief</a><a data-original-url="/neck-pain-relief-and-chiropractic-care-in-virginia-beach-va" data-page-id="5bd0cce1-72bc-497f-85ad-b420ede987a0" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="neck-pain-relief-and-chiropractic-care-in-virginia-beach-va">Neck Pain Relief and Chiropractic Care</a><a data-original-url="/back-pain-relief-and-chiropractic-care-in-virginia-beach-va" data-page-id="746cfd97-35c1-4288-9443-5b4fd420375a" class="mobile-menu-link block px-4 py-2 text-sm" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(230, 230, 230);" href="back-pain-relief-and-chiropractic-care-in-virginia-beach-va">Back Pain Relief and Chiropractic Care</a></div></div></div><div class="mobile-menu-item px-4 py-2"><a class="ant-btn css-1cgqdj8 ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-background-ghost ant-btn-block" style="border-color: var(--color-primary, #2270c7); color: var(--color-primary, #2270c7); font-weight: 500; border-radius: 6px; font-family: var(--font-family, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: 0.2s ease-in-out;" href="tel:+17574963229" data-original-url="tel:+17574963229" role="button"><span>(757) 496-3229</span></a></div></div></div></div></div></div></nav><div class="relative box " style="background: transparent; padding: 70px 20px 40px; margin: 0px; border-radius: 0px; border-width: 0px; border-style: none; border-color: rgb(0, 0, 0);"><section class="contact-section w-full " style="background-color: rgb(255, 255, 255); padding: var(--spacing-medium, clamp(0.625rem, 1.5vw, 1rem)); margin-top: 0px; margin-bottom: 0px;"><div class="container mx-auto px-4"><div class="contact-info-full max-w-4xl mx-auto flex flex-col md:flex-row gap-10" data-responsive-layout="column-desktop-row"><div class="flex-1 min-w-0"><div class="mb-6"><div class="px-2 "><div><h3 class="ant-typography font-subtitle css-1shzbmj" style="color: rgba(2, 20, 39, 0.88); font-size: 22px; font-weight: 600; text-align: left; margin: 0px; line-height: 1.5;">Contact Alpine Chiropractic</h3></div></div><div class="px-2 "><div><div class="ant-typography font-paragraph css-1shzbmj" style="color: rgba(2, 20, 39, 0.88); font-size: 16px; font-weight: normal; text-align: left; margin: 0px; line-height: 1.5;">We're available to assist you with any questions or concerns you may have.</div></div></div></div><div class="contact-details-container grid grid-cols-1 gap-4 mb-8"><div class="contact-item flex items-start gap-4 bg-white rounded-lg shadow-sm p-4"><div class="contact-icon flex-shrink-0 text-blue-600"><svg xmlns="http://www.w3.org/2000/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="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-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></div><div class="contact-text"><h4 class="font-semibold text-base mb-1">Call or Text</h4><p class="text-gray-700 whitespace-pre-line">(757) 496-3229</p></div></div><div class="contact-item flex items-start gap-4 bg-white rounded-lg shadow-sm p-4"><div class="contact-icon flex-shrink-0 text-blue-600"><svg xmlns="http://www.w3.org/2000/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></div><div class="contact-text"><h4 class="font-semibold text-base mb-1">Email</h4><p class="text-gray-700 whitespace-pre-line">[email protected]</p></div></div><div class="contact-item flex items-start gap-4 bg-white rounded-lg shadow-sm p-4"><div class="contact-icon flex-shrink-0 text-blue-600"><svg xmlns="http://www.w3.org/2000/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 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg></div><div class="contact-text"><h4 class="font-semibold text-base mb-1">Address</h4><p class="text-gray-700 whitespace-pre-line">1427 N Great Neck Rd 1847Ste 103 1848Virginia Beach, VA 23454</p></div></div></div></div><div class="flex-1 min-w-0 office-hours md:pl-8 mt-8 md:mt-0"><div class="px-2 "><div><h3 class="ant-typography font-subtitle css-1shzbmj" style="color: rgba(2, 20, 39, 0.88); font-size: 22px; font-weight: 600; text-align: left; margin: 0px; line-height: 1.5;">Office Hours</h3></div></div><table class="hours-table w-full mt-2 text-left"><tbody><tr><td class="py-2 pr-4 font-medium">Monday</td><td class="py-2">8:00 AM - 11:30 AM, 2:30 PM - 5:30 PM</td></tr><tr><td class="py-2 pr-4 font-medium">Tuesday</td><td class="py-2">2:30 PM - 5:30 PM</td></tr><tr><td class="py-2 pr-4 font-medium">Wednesday</td><td class="py-2">8:00 AM - 11:30 AM, 2:30 PM - 5:30 PM</td></tr><tr><td class="py-2 pr-4 font-medium">Thursday</td><td class="py-2">8:00 AM - 11:30 AM</td></tr><tr><td class="py-2 pr-4 font-medium">Friday</td><td class="py-2">10:00 AM - 5:30 PM</td></tr><tr><td class="py-2 pr-4 font-medium">Saturday</td><td class="py-2">
18489:00 AM - 2:00 PM</td></tr><tr><td class="py-2 pr-4 font-medium">Sunday</td><td class="py-2">Closed</td></tr></tbody></table></div></div></div></section></div> 1849 1850 <div data-rw-complete-footer="true" class="w-full "><div class="w-full p-4 " style="background-color: rgb(249, 250, 251); margin-bottom: 0px;"><div class="overflow-hidden bg-white w-full"><div class="overflow-hidden bg-white" style="width: 100%; height: 450px;"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3191.4667564998244!2d-76.0434745!3d36.87918069999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89baeb7424987239%3A0xa134b465b705bf69!2sAlpine%20Chiropractic!5e0!3m2!1sen!2sus!4v1785266359039!5m2!1sen!2sus" width="600" height="450" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="width: 100%; height: 100%; border-width: medium; border-style: none; border-color: currentcolor; border-image: none;"></iframe></div></div></div><footer class="w-full" style="background-color: rgb(51, 51, 51); padding: clamp(0.625rem, 1.5cqw, 1rem);"><div class="container mx-auto px-4"><div class="flex flex-col md:flex-row md:justify-between gap-8 mb-8" data-responsive-layout="column-desktop-row"><div class="flex-1 min-w-[200px]"><div class="relative"><h4 class="text-white mb-4 text-lg font-semibold pb-2">Business Hours</h4><div class="absolute left-0 bottom-0 w-10 h-0.5" style="background-color: var(--color-secondary, #4a90e2);"></div></div><ul class="list-none mt-2 p-0"><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Monday</span><span class="text-gray-300 md:text-white md:text-right">8:00 AM - 11:30 AM, 2:30 PM - 5:30 PM</span></div></li><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Tuesday</span><span class="text-gray-300 md:text-white md:text-right">2:30 PM - 5:30 PM</span></div></li><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Wednesday</span><span class="text-gray-300 md:text-white md:text-right">8:00 AM - 11:30 AM, 2:30 PM - 5:30 PM</span></div></li><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Thursday</span><span class="text-gray-300 md:text-white md:text-right">8:00 AM - 11:30 AM</span></div></li><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Friday</span><span class="text-gray-300 md:text-white md:text-right">10:00 AM - 5:30 PM</span></div></li><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Saturday</span><span class="text-gray-300 md:text-white md:text-right">9:00 AM - 2:00 PM</span></div></li><li class="text-sm mb-2 text-white"><div class="flex flex-col md:flex-row md:justify-between"><span class="font-bold text-white whitespace-nowrap">Sunday</span><span class="text-gray-300 md:text-white md:text-right">Closed</span></div></li></ul></div><div class="flex-1 min-w-[200px]"><div class="relative"><h4 class="text-white mb-4 text-lg font-semibold pb-2">Contact Information</h4><div class="absolute left-0 bottom-0 w-10 h-0.5" style="background-color: var(--color-secondary, #4a90e2);"></div></div><address class="mt-2 not-italic leading-relaxed text-sm whitespace-pre-line text-white">Alpine Chiropractic 18511427 N Great Neck Rd Ste 103 1852Virginia Beach, VA 23454-1300</address></div><div class="flex-1 min-w-[200px]"><div class="relative"><h4 class="text-white mb-4 text-lg font-semibold pb-2">Connect With Us</h4><div class="absolute left-0 bottom-0 w-10 h-0.5" style="background-color: var(--color-secondary, #4a90e2);"></div></div><div class="flex gap-4 mt-1"><a href="https://www.facebook.com/ACVABEACH" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 transition-all text-white"><span role="img" aria-label="facebook" class="anticon anticon-facebook text-2xl text-white !text-white" style="color: white;"><svg viewBox="64 64 896 896" focusable="false" data-icon="facebook" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-92.4 233.5h-63.9c-50.1 0-59.8 23.8-59.8 58.8v77.1h119.6l-15.6 120.7h-104V912H539.2V602.2H434.9V481.4h104.3v-89c0-103.3 63.1-159.6 155.3-159.6 44.2 0 82.1 3.3 93.2 4.8v107.9z"></path></svg></span></a><a href="https://www.instagram.com/alpinehealthcenter/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 transition-all text-white"><span role="img" aria-label="instagram" class="anticon anticon-instagram text-2xl text-white !text-white" style="color: white;"><svg viewBox="64 64 896 896" focusable="false" data-icon="instagram" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 378.7c-73.4 0-133.3 59.9-133.3 133.3S438.6 645.3 512 645.3 645.3 585.4 645.3 512 585.4 378.7 512 378.7zM911.8 512c0-55.2.5-109.9-2.6-165-3.1-64-17.7-120.8-64.5-167.6-46.9-46.9-103.6-61.4-167.6-64.5-55.2-3.1-109.9-2.6-165-2.6-55.2 0-109.9-.5-165 2.6-64 3.1-120.8 17.7-167.6 64.5C132.6 226.3 118.1 283 115 347c-3.1 55.2-2.6 109.9-2.6 165s-.5 109.9 2.6 165c3.1 64 17.7 120.8 64.5 167.6 46.9 46.9 103.6 61.4 167.6 64.5 55.2 3.1 109.9 2.6 165 2.6 55.2 0 109.9.5 165-2.6 64-3.1 120.8-17.7 167.6-64.5 46.9-46.9 61.4-103.6 64.5-167.6 3.2-55.1 2.6-109.8 2.6-165zM512 717.1c-113.5 0-205.1-91.6-205.1-205.1S398.5 306.9 512 306.9 717.1 398.5 717.1 512 625.5 717.1 512 717.1zm213.5-370.7c-26.5 0-47.9-21.4-47.9-47.9s21.4-47.9 47.9-47.9 47.9 21.4 47.9 47.9a47.84 47.84 0 01-47.9 47.9z"></path></svg></span></a><a href="https://www.youtube.com/channel/UCwv-nNBGxBNUtxT7iDwB58A" target="_blank" rel="noopener noreferrer" aria-label="Youtube" class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 transition-all text-white"><span role="img" aria-label="youtube" class="anticon anticon-youtube text-2xl text-white !text-white" style="color: white;"><svg viewBox="64 64 896 896" focusable="false" data-icon="youtube" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M941.3 296.1a112.3 112.3 0 00-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7A112.12 112.12 0 0082.7 296C64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z"></path></svg></span></a></div></div></div><div class="border-t border-white/10 pt-6"><div class="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 mb-2" data-responsive-layout="column-desktop-row"><a href="privacy-policy" class="text-xs transition relative" target="_blank" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">Privacy Policy<span class="mx-2 opacity-50" style="color: rgb(255, 255, 255);">â¢</span></a><a href="terms-of-service" class="text-xs transition relative" target="_blank" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">Terms of Service<span class="mx-2 opacity-50" style="color: rgb(255, 255, 255);">â¢</span></a><a href="good-faith-estimate" class="text-xs transition relative" target="_blank" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">Good Faith Estimate<span class="mx-2 opacity-50" style="color: rgb(255, 255, 255);">â¢</span></a><a href="hipaa-policy" class="text-xs transition relative" target="_blank" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">HIPAA Policy<span class="mx-2 opacity-50" style="color: rgb(255, 255, 255);">â¢</span></a><a href="accessibility" class="text-xs transition relative" target="_blank" rel="noopener noreferrer" style="color: rgb(255, 255, 255);">Accessibility</a></div><p class="text-center mt-2" style="font-size: clamp(0.75rem, 1.5cqw, 0.875rem); color: rgba(255, 255, 255, 0.7);">© 2026 Alpine Chiropractic. All rights reserved.</p></div></div></footer></div></div> 1853 1854 <!-- JavaScript for interactive components --> 1855
1855<script> 1856 1857 // Patient Forms Functionality 1858 document.addEventListener('DOMContentLoaded', function() { 1859 const patientFormsContainers = document.querySelectorAll('.patient-forms'); 1860 1861 patientFormsContainers.forEach(container => { 1862 const options = container.querySelectorAll('.patient-forms__option'); 1863 const continueButton = container.querySelector('.patient-forms__continue'); 1864 const formList = container.querySelector('.patient-forms__list'); 1865 const formHeader = container.querySelector('.patient-forms__header'); 1866 const embedContainer = container.querySelector('.patient-forms__embed'); 1867 let selectedFormData = null; 1868 1869 options.forEach(option => { 1870 const radio = option.querySelector('input[type="radio"]'); 1871 1872 // Handle clicking on the entire option div 1873 option.addEventListener('click', function() { 1874 // Uncheck all other radios 1875 options.forEach(opt => { 1876 const r = opt.querySelector('input[type="radio"]'); 1877 if (r) r.checked = false; 1878 }); 1879 1880 // Check this radio 1881 if (radio) { 1882 radio.checked = true; 1883 if (continueButton) continueButton.disabled = false; 1884 selectedFormData = { 1885 formId: this.dataset.formId, 1886 title: this.querySelector('strong').textContent 1887 }; 1888 } 1889 }); 1890 1891 // Handle direct radio button clicks 1892 if (radio) { 1893 radio.addEventListener('click', function(e) { 1894 e.stopPropagation(); // Prevent double-firing with the option click 1895 if (continueButton) continueButton.disabled = false; 1896 selectedFormData = { 1897 formId: option.dataset.formId, 1898 title: option.querySelector('strong').textContent 1899 }; 1900 }); 1901 } 1902 }); 1903 1904 if (continueButton) { 1905 continueButton.addEventListener('click', function() { 1906 if (!selectedFormData) return; 1907 1908 // Hide the form selection interface 1909 if (formList) formList.style.display = 'none'; 1910 if (continueButton) continueButton.style.display = 'none'; 1911 if (formHeader) formHeader.style.display = 'none'; 1912 1913 // Create and show the form view 1914 const formView = document.createElement('div'); 1915 formView.className = 'patient-forms__form-view'; 1916 1917 const formHeaderHtml = document.createElement('div'); 1918 formHeaderHtml.className = 'patient-forms__form-header'; 1919 formHeaderHtml.innerHTML = ` 1920 <button class="patient-forms__back">â Back to Form Selection</button> 1921 <h2 class="patient-forms__form-title">${selectedFormData.title}</h2> 1922 `; 1923 1924 const embedContent = document.createElement('div'); 1925 embedContent.className = 'patient-forms__embed'; 1926 1927 // Create and append the script element 1928 const script = document.createElement('script'); 1929 script.charset = 'utf-8'; 1930 script.src = 'https://cdn.reviewwave.com/js/reviewwave.js'; 1931 script.dataset.id = selectedFormData.formId; 1932 1933 // Assemble the form view 1934 formView.appendChild(formHeaderHtml); 1935 formView.appendChild(embedContent); 1936 embedContent.appendChild(script); 1937 1938 // Add the form view to the container 1939 container.querySelector('.patient-forms__container').appendChild(formView); 1940 1941 // Add back button functionality 1942 const backButton = formHeaderHtml.querySelector('.patient-forms__back'); 1943 if (backButton) { 1944 backButton.addEventListener('click', function() { 1945 // Show the form selection interface 1946 if (formList) formList.style.display = 'flex'; 1947 if (continueButton) continueButton.style.display = 'block'; 1948 if (formHeader) formHeader.style.display = 'block'; 1949 1950 // Remove the form view 1951 formView.remove(); 1952 1953 // Reset selection 1954 options.forEach(opt => { 1955 const r = opt.querySelector('input[type="radio"]'); 1956 if (r) r.checked = false;
1957 }); 1958 if (continueButton) continueButton.disabled = true; 1959 selectedFormData = null; 1960 }); 1961 } 1962 }); 1963 } 1964 }); 1965 }); 1966 1967 1968 // Gallery functionality 1969 document.addEventListener('DOMContentLoaded', function() { 1970 // Initialize all gallery sliders with extracted settings 1971 const gallerySettings = {}; 1972 1973 initializeGallerySliders(gallerySettings); 1974 1975 function initializeGallerySliders(settings) { 1976 // Find all slider containers 1977 const sliders = document.querySelectorAll('.banner-slider'); 1978 1979 sliders.forEach(function(slider, idx) { 1980 const slides = slider.querySelectorAll('div > div'); 1981 const totalSlides = slides.length; 1982 if (totalSlides <= 1) return; 1983 1984 // Get the selector for this slider 1985 const selector = '.banner-slider:nth-of-type(' + (idx + 1) + ')'; 1986 1987 // Get settings for this slider or use defaults 1988 const sliderSettings = settings[selector] || { 1989 autoplaySpeed: 5000, 1990 showButtons: true, 1991 showDots: true, 1992 transitionEffect: 'none', 1993 transitionDuration: 500 1994 }; 1995 1996 const autoplaySpeed = sliderSettings.autoplaySpeed; 1997 1998 const leftBtn = slider.parentElement.querySelector('button[aria-label="Previous slide"]'); 1999 const rightBtn = slider.parentElement.querySelector('button[aria-label="Next slide"]'); 2000 const dots = slider.parentElement.querySelectorAll('div[style*="border-radius: 50%"]'); 2001 const playPauseBtn = slider.parentElement.querySelector('button[style*="bottom: 20px"][style*="right: 80px"]'); 2002 2003 // Set up autoplay 2004 let currentSlide = 0; 2005 let autoplayInterval; 2006 let isPlaying = true; // Default to playing 2007 2008 function startAutoplay() { 2009 if (autoplayInterval) clearInterval(autoplayInterval); 2010 autoplayInterval = setInterval(function() { 2011 goToSlide((currentSlide + 1) % totalSlides); 2012 }, autoplaySpeed); 2013 2014 // Update play/pause button if it exists 2015 if (playPauseBtn) { 2016 // Update icon to pause icon (could be a class change or content change) 2017 if (playPauseBtn.querySelector('[aria-label="pause"]')) { 2018 playPauseBtn.querySelector('[aria-label="pause"]').style.display = 'inline-block'; 2019 } 2020 if (playPauseBtn.querySelector('[aria-label="play"]')) { 2021 playPauseBtn.querySelector('[aria-label="play"]').style.display = 'none'; 2022 } 2023 } 2024 2025 isPlaying = true; 2026 } 2027 2028 function stopAutoplay() { 2029 if (autoplayInterval) clearInterval(autoplayInterval); 2030 2031 // Update play/pause button if it exists 2032 if (playPauseBtn) { 2033 // Update icon to play icon 2034 if (playPauseBtn.querySelector('[aria-label="pause"]')) { 2035 playPauseBtn.querySelector('[aria-label="pause"]').style.display = 'none'; 2036 } 2037 if (playPauseBtn.querySelector('[aria-label="play"]')) { 2038 playPauseBtn.querySelector('[aria-label="play"]').style.display = 'inline-block'; 2039 } 2040 } 2041 2042 isPlaying = false; 2043 } 2044 2045 function toggleAutoplay() { 2046 if (isPlaying) { 2047 stopAutoplay(); 2048 } else { 2049 startAutoplay(); 2050 } 2051 } 2052 2053 function goToSlide(index) { 2054 currentSlide = index; 2055 slider.scrollTo({ 2056 left: slider.clientWidth * index, 2057 behavior: 'smooth' 2058 }); 2059 2060 // Update dots if they exist 2061 if (dots.length > 0) { 2062 dots.forEach((dot, i) => { 2063 if (i === index) { 2064 dot.style.background = '#1890ff'; 2065 } else { 2066 dot.style.background = 'rgba(255, 255, 255, 0.5)'; 2067 } 2068 }); 2069 } 2070 } 2071 2072 // Set up navigation buttons 2073 if (leftBtn) { 2074 leftBtn.addEventListener('click', function(e) { 2075 e.preventDefault(); 2076 stopAutoplay(); 2077 goToSlide((currentSlide - 1 + totalSlides) % totalSlides); 2078 startAutoplay(); 2079 }); 2080 } 2081 2082 if (rightBtn) { 2083 rightBtn.addEventListener('click', function(e) { 2084 e.preventDefault(); 2085 stopAutoplay(); 2086 goToSlide((currentSlide + 1) % totalSlides); 2087 startAutoplay(); 2088 }); 2089 } 2090 2091 // Set up play/pause button 2092 if (playPauseBtn) { 2093 playPauseBtn.addEventListener('click', function(e) { 2094 e.preventDefault(); 2095 toggleAutoplay(); 2096 }); 2097 } 2098 2099 // Set up dot navigation 2100 if (dots.length > 0) {
2101 dots.forEach((dot, i) => { 2102 dot.addEventListener('click', function() { 2103 stopAutoplay(); 2104 goToSlide(i); 2105 startAutoplay(); 2106 }); 2107 }); 2108 } 2109 2110 // Handle touch/mouse events for swiping 2111 let touchStartX = null; 2112 let touchEndX = null; 2113 2114 slider.addEventListener('touchstart', function(e) { 2115 touchStartX = e.touches[0].clientX; 2116 stopAutoplay(); 2117 }); 2118 2119 slider.addEventListener('touchmove', function(e) { 2120 if (!touchStartX) return; 2121 touchEndX = e.touches[0].clientX; 2122 }); 2123 2124 slider.addEventListener('touchend', function() { 2125 if (!touchStartX || !touchEndX) { 2126 startAutoplay(); 2127 return; 2128 } 2129 2130 const diff = touchStartX - touchEndX; 2131 const threshold = 50; 2132 2133 if (Math.abs(diff) > threshold) { 2134 if (diff > 0) { 2135 goToSlide((currentSlide + 1) % totalSlides); 2136 } else { 2137 goToSlide((currentSlide - 1 + totalSlides) % totalSlides); 2138 } 2139 } 2140 2141 touchStartX = null; 2142 touchEndX = null; 2143 startAutoplay(); 2144 }); 2145 2146 // Start autoplay on page load 2147 startAutoplay(); 2148 }); 2149 } 2150 }); 2151 2152 2153 // Gallery (scroll) view functionality 2154 document.addEventListener('DOMContentLoaded', function() { 2155 const containers = document.querySelectorAll('.gallery-scroll'); 2156 2157 containers.forEach(function(container) { 2158 const leftBtn = container.parentElement.querySelector('button[aria-label="Scroll left"]'); 2159 const rightBtn = container.parentElement.querySelector('button[aria-label="Scroll right"]'); 2160 let scrollPosition = 0; 2161 2162 function scroll(direction) { 2163 const scrollAmount = container.clientWidth * 0.8; 2164 const maxScroll = container.scrollWidth - container.clientWidth; 2165 scrollPosition = direction === 'left' 2166 ? Math.max(scrollPosition - scrollAmount, 0) 2167 : Math.min(scrollPosition + scrollAmount, maxScroll); 2168 2169 container.scrollTo({ left: scrollPosition, behavior: 'smooth' }); 2170 } 2171 2172 if (leftBtn) { 2173 leftBtn.addEventListener('click', function(e) { 2174 e.preventDefault(); 2175 scroll('left'); 2176 }); 2177 } 2178 2179 if (rightBtn) { 2180 rightBtn.addEventListener('click', function(e) { 2181 e.preventDefault(); 2182 scroll('right'); 2183 }); 2184 } 2185 }); 2186 }); 2187 2188 2189 // Handle smooth scrolling for anchor links 2190 document.addEventListener('DOMContentLoaded', function() { 2191 // Find all anchor links with hash targets 2192 const anchorLinks = document.querySelectorAll('a[href^="#"]'); 2193 2194 anchorLinks.forEach(function(link) { 2195 link.addEventListener('click', function(e) { 2196 // Get the target element ID 2197 const targetId = this.getAttribute('href').substring(1); 2198 const targetElement = document.getElementById(targetId); 2199 2200 // If the target element exists 2201 if (targetElement) { 2202 e.preventDefault(); 2203 2204 // Scroll smoothly to the target 2205 targetElement.scrollIntoView({ 2206 behavior: 'smooth', 2207 block: 'start' 2208 }); 2209 2210 // Update URL hash without jumping 2211 history.pushState(null, null, '#' + targetId); 2212 } 2213 }); 2214 }); 2215 }); 2216 2217 2218document.addEventListener('DOMContentLoaded', () => { 2219 const mobileNav = document.querySelector('.mobile-nav-container'); 2220 if (!mobileNav) return; 2221 2222 const menuButton = mobileNav.querySelector('[data-element="mobile-menu-button"]'); 2223 const drawer = mobileNav.querySelector('[data-element="mobile-menu-drawer"]'); 2224 const drawerOverlay = mobileNav.querySelector('[data-element="mobile-menu-overlay"]'); 2225 const closeButton = mobileNav.querySelector('[data-element="mobile-menu-drawer-close"]'); 2226 2227 if (!menuButton || !drawer || !drawerOverlay || !closeButton) return; 2228 2229 // Mobile action buttons - prevent default in case they're placeholder links 2230 const actionButtons = mobileNav.querySelectorAll('[data-element^="mobile-action-"]'); 2231 actionButtons.forEach(btn => { 2232 const href = btn.getAttribute('href'); 2233 if (!href || href === '#') { 2234 btn.addEventListener('click', (e) => e.preventDefault()); 2235 } 2236 }); 2237 2238 const openDrawer = () => { 2239 drawer.classList.remove('translate-x-full'); 2240 drawerOverlay.classList.remove('hidden'); 2241 document.body.style.overflow = 'hidden'; // Prevent background scroll 2242 }; 2243 2244 const closeDrawer = () => { 2245 drawer.classList.add('translate-x-full'); 2246 drawerOverlay.classList.add('hidden'); 2247 document.body.style.overflow = ''; // Restore background scroll 2248 }; 2249 2250 menuButton.addEventListener('click', (e) => { 2251 e.stopPropagation(); 2252 openDrawer(); 2253 }); 2254 2255 closeButton.addEventListener('click', (e) => { 2256 e.stopPropagation(); 2257 closeDrawer(); 2258 }); 2259 2260 drawerOverlay.addEventListener('click', (e) => { 2261 e.stopPropagation(); 2262 closeDrawer(); 2263 }); 2264 2265 const drawerLinks = drawer.querySelectorAll('a'); 2266 drawerLinks.forEach(link => { 2267 link.addEventListener('click', closeDrawer); 2268 }); 2269 2270 // Handle submenu toggles 2271 const submenuToggles = drawer.querySelectorAll('[data-submenu-toggle]');
2272 submenuToggles.forEach(toggle => { 2273 toggle.addEventListener('click', (e) => { 2274 e.stopPropagation(); 2275 const submenuKey = toggle.getAttribute('data-submenu-toggle'); 2276 const submenuContent = drawer.querySelector('[data-submenu-content="' + submenuKey + '"]'); 2277 const arrow = toggle.querySelector('svg'); 2278 2279 if (submenuContent && arrow) { 2280 const isOpen = !submenuContent.classList.contains('max-h-0'); 2281 2282 if (isOpen) { 2283 // Close submenu 2284 submenuContent.classList.remove('max-h-96', 'max-h-open', 'opacity-100'); 2285 submenuContent.classList.add('max-h-0', 'opacity-0'); 2286 arrow.classList.remove('rotate-180'); 2287 toggle.setAttribute('aria-expanded', 'false'); 2288 } else { 2289 // Open submenu 2290 submenuContent.classList.remove('max-h-0', 'opacity-0'); 2291 submenuContent.classList.add('max-h-open', 'opacity-100'); 2292 arrow.classList.add('rotate-180'); 2293 toggle.setAttribute('aria-expanded', 'true'); 2294 } 2295 } 2296 }); 2297 }); 2298 2299 document.addEventListener('keydown', (e) => { 2300 if (e.key === 'Escape' && !drawer.classList.contains('translate-x-full')) { 2301 closeDrawer(); 2302 } 2303 }); 2304}); 2305 2306 2307document.addEventListener('DOMContentLoaded', () => { 2308 const groups = document.querySelectorAll('[data-hero-video-buttons]'); 2309 groups.forEach((group) => { 2310 const provider = group.getAttribute('data-provider'); 2311 const iframeId = group.getAttribute('data-iframe-id'); 2312 const videoId = group.getAttribute('data-video-id'); 2313 const iframe = iframeId ? document.getElementById(iframeId) : null; 2314 const video = videoId ? document.getElementById(videoId) : null; 2315 2316 function postVimeo(method, value) { 2317 if (!iframe || !iframe.contentWindow) return; 2318 const msg = value !== undefined ? { method: method, value: value } : { method: method }; 2319 iframe.contentWindow.postMessage(msg, '*'); 2320 } 2321 2322 function postYouTube(func) { 2323 if (!iframe || !iframe.contentWindow) return; 2324 iframe.contentWindow.postMessage(JSON.stringify({ 2325 event: 'command', func: func, args: [] 2326 }), '*'); 2327 } 2328 2329 function swapIcons(btn, activeKey) { 2330 const icons = btn.querySelectorAll('[data-icon]'); 2331 icons.forEach((icon) => { 2332 icon.style.display = icon.getAttribute('data-icon') === activeKey ? '' : 'none'; 2333 }); 2334 } 2335 2336 group.querySelectorAll('button[data-action]').forEach((btn) => { 2337 btn.addEventListener('click', (e) => { 2338 e.stopPropagation(); 2339 const action = btn.getAttribute('data-action'); 2340 2341 if (action === 'mute') { 2342 const next = btn.getAttribute('data-state') !== 'muted'; 2343 btn.setAttribute('data-state', next ? 'muted' : 'unmuted'); 2344 btn.setAttribute('aria-label', next ? 'Unmute video' : 'Mute video'); 2345 swapIcons(btn, next ? 'muted' : 'unmuted'); 2346 if (provider === 'file' && video) { 2347 video.muted = next; 2348 if (!next && video.volume === 0) video.volume = 1; 2349 } else if (provider === 'vimeo') { 2350 postVimeo('setMuted', next); 2351 } else if (provider === 'youtube') { 2352 postYouTube(next ? 'mute' : 'unMute'); 2353 } 2354 } else if (action === 'play') { 2355 const next = btn.getAttribute('data-state') !== 'playing'; 2356 btn.setAttribute('data-state', next ? 'playing' : 'paused'); 2357 btn.setAttribute('aria-label', next ? 'Pause video' : 'Play video'); 2358 swapIcons(btn, next ? 'pause' : 'play'); 2359 if (provider === 'file' && video) { 2360 if (next) video.play().catch(() => undefined); 2361 else video.pause(); 2362 } else if (provider === 'vimeo') { 2363 postVimeo(next ? 'play' : 'pause'); 2364 } else if (provider === 'youtube') { 2365 postYouTube(next ? 'playVideo' : 'pauseVideo'); 2366 } 2367 } 2368 }); 2369 }); 2370 }); 2371 2372 /* YouTube chrome-mask reveal listener â fades the chrome-mask sooner 2373 * than the 5s CSS fallback as soon as the player reports PLAYING. 2374 * Each chrome-mask sits next to its YouTube iframe inside the same 2375 * wrapper, so iframe = mask.parentElement.querySelector('iframe'). */ 2376 var masks = document.querySelectorAll('.hero-bg-video-mask'); 2377 if (masks.length) { 2378 masks.forEach(function (mask) { 2379 var iframe = mask.parentElement && mask.parentElement.querySelector('iframe'); 2380 if (!iframe || iframe.src.indexOf('youtube.com') === -1) return; 2381 function sendListening() { 2382 if (iframe.contentWindow) { 2383 iframe.contentWindow.postMessage(JSON.stringify({ event: 'listening' }), '*'); 2384 } 2385 } 2386 sendListening(); 2387 setTimeout(sendListening, 500); 2388 setTimeout(sendListening, 1500); 2389 setTimeout(sendListening, 3000); 2390 }); 2391 2392 window.addEventListener('message', function (e) { 2393 if (typeof e.data !== 'string') return; 2394 var data;
2395 try { data = JSON.parse(e.data); } catch (err) { return; } 2396 if (!data || data.event !== 'onStateChange' || data.info !== 1) return; 2397 masks.forEach(function (mask) { 2398 var iframe = mask.parentElement && mask.parentElement.querySelector('iframe'); 2399 if (iframe && iframe.contentWindow === e.source) { 2400 mask.classList.add('is-ready'); 2401 } 2402 }); 2403 }); 2404 } 2405}); 2406 2407 </script>
2407 2408
2409<script> 2410 // Dynamic Navigation Height Adjustment 2411 // This script measures the actual navigation height and adjusts body padding accordingly 2412 (function() { 2413 function adjustBodyPadding() { 2414 const navigation = document.getElementById('navigation'); 2415 if (!navigation) return; 2416 2417 // Get the actual computed height of the navigation 2418 const navHeight = navigation.offsetHeight; 2419 2420 // Apply the measured height as body padding-top (only when the nav is fixed; 2421 // a nav-in-flow page keeps the nav in normal flow, so no compensation) 2422 if (!document.body.classList.contains('nav-in-flow')) { 2423 document.body.style.paddingTop = navHeight + 'px'; 2424 } 2425 2426 // Store the height for potential future use 2427 document.documentElement.style.setProperty('--actual-navigation-height', navHeight + 'px'); 2428 } 2429 2430 // Adjust on DOM ready 2431 if (document.readyState === 'loading') { 2432 document.addEventListener('DOMContentLoaded', adjustBodyPadding); 2433 } else { 2434 adjustBodyPadding(); 2435 } 2436 2437 // Adjust on window resize (in case navigation height changes) 2438 let resizeTimeout; 2439 window.addEventListener('resize', function() { 2440 clearTimeout(resizeTimeout); 2441 resizeTimeout = setTimeout(adjustBodyPadding, 100); 2442 }); 2443 2444 // Adjust after fonts load (in case font loading affects navigation height) 2445 if (document.fonts) { 2446 document.fonts.ready.then(adjustBodyPadding); 2447 } 2448 })(); 2449</script>
2449 2450 2451
2451<script src="https://cdn.reviewwave.com/js/chat_embed.js" type="text/javascript" data-id="4b0c83cf762a88"></script>
2451 2452
2453<script> 2454 window._rwREEl = (window._rwREEl || []).concat({ 2455 "el_id": "8edcc94c-dc8b-4769-a161-1c31cdeb891d", 2456 "key": "11244-1460-5470-cf18-6f4f", 2457 "mode": "badge", 2458 "pos": "bottom-left", 2459 "delay": -1, 2460 "rating": 4, 2461 "num": 3, 2462 "type": "all", 2463 "no_link": 0, 2464 "schema": 1 2465}); 2466 2467 // Load S3 script first (always injected) 2468 var s3Script = document.createElement('script'); 2469 s3Script.src = "https://rw-embed-data.s3.amazonaws.com/11244-1460-5470-cf18-6f4f.js"; 2470 s3Script.onload = function() { 2471 // Only load main script after S3 data is loaded AND if desktop width 2472 if (window.innerWidth > 767) { 2473 var cdnScript = document.createElement('script'); 2474 cdnScript.src = "https://cdn.reviewwave.com/js/reviews_embed.js"; 2475 cdnScript.async = true; 2476 document.head.appendChild(cdnScript); 2477 } 2478 }; 2479 s3Script.onerror = function() { 2480 console.warn('Failed to load reviews badge data from S3'); 2481 }; 2482 document.head.appendChild(s3Script); 2483</script>
2483 2484 2485 2486 <!-- Accessibility Widget --> 2487
2487<script> 2488 (function(d){ 2489 var s = d.createElement("script"); 2490 s.setAttribute("data-account", "tglYYbBp6o"); 2491 s.setAttribute("src", "https://accessibilityserver.org/widget.js"); 2492 (d.body || d.head).appendChild(s); 2493 })(document); 2494 </script>
2494 2495 <noscript> 2496 Please ensure Javascript is enabled for purposes of 2497 <a href="https://accessibilityserver.org">website accessibility</a> 2498 </noscript> 2499 2500</body> 2501</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.