1 2<!DOCTYPE html> 3<html lang="fr"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Volle Gas - Restaurant Nonante Folies</title> 8 <link rel="icon" type="image/png" href="/images/Skate.png"> 9 10 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 10-11
10 11 <script async src="https://www.googletagmanager.com/gtag/js?id=
11G-TG7BTQRS42
vendor: 16 bytes, lines 11-12
11"></script> 12
12<script> 13
vendor: 140 bytes, lines 13-17
13window.dataLayer = window.dataLayer || []; 14 function gtag(){dataLayer.push(arguments);} 15 gtag('js', new Date()); 16 17 gtag('config', '
17G-TG7BTQRS42
vendor: 8 bytes, lines 17-18
17'); 18
18</script>
18 19 20 <!-- Google Fonts --> 21 <link rel="preconnect" href="https://fonts.googleapis.com"> 22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 23 <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet"> 24 25 <!-- Flag Icons --> 26 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css" /> 27 28 <!-- Google reCAPTCHA -->
vendor: 96 bytes, lines 28-33
28 29 <script src="https://www.google.com/recaptcha/api.js" async defer></script> 30 31 32 33
33<link rel="stylesheet" href="./css/styles.css"> 34</head> 35 36 37<body class="vollgas-page"> 38 <!-- Header --> 39 <header class="header"> 40 <div class="header-left"> 41 <div class="hamburger"> 42 <span></span> 43 <span></span> 44 <span></span> 45 </div> 46 <div class="logo"> 47 <a href="/"> 48 <img src="./images/Logo.svg" alt="nonante folies"> 49 </a> 50 </div> 51 </div> 52 53 <div class="header-right"> 54 55<div class="language-switcher"> 56 <div class="language-dropdown"> 57 <button class="language-current" onclick="toggleLanguageDropdown()"> 58 <span class="fi fi-fr"></span> 59 <span class="language-code">FR</span> 60 <svg class="dropdown-arrow" viewBox="0 0 24 24" width="16" height="16"> 61 <path d="M7 10l5 5 5-5z"/> 62 </svg> 63 </button> 64 65 <div class="language-options" id="languageOptions"> 66 <a href="/vollegas?lang=nl" class="language-option"> 67 <span class="fi fi-nl"></span> 68 <span class="language-name">Nederlands</span> 69 </a> 70 <a href="/vollegas?lang=en" class="language-option"> 71 <span class="fi fi-gb"></span> 72 <span class="language-name">English</span> 73 </a> 74 </div> 75 </div> 76</div> 77
78<script> 79function toggleLanguageDropdown() { 80 const dropdown = document.querySelector('.language-dropdown'); 81 const options = document.getElementById('languageOptions'); 82 83 dropdown.classList.toggle('open'); 84 options.classList.toggle('show'); 85} 86 87// Close dropdown when clicking outside 88document.addEventListener('click', function(event) { 89 const dropdown = document.querySelector('.language-dropdown'); 90 const options = document.getElementById('languageOptions'); 91 92 if (!dropdown.contains(event.target)) { 93 dropdown.classList.remove('open'); 94 options.classList.remove('show'); 95 } 96}); 97</script>
97 <a href="https://jobs.90folies.com/" target="_blank" class="recrute-btn">On Recrute</a> 98 <a href="https://groupes.90folies.com" target="_blank" rel="noopener" class="group-btn">Groupes</a> 99 <button class="reserve-btn" onclick="openReservationPopup(event)">RÃSERVER</button> 100 <div class="social-icons"> 101 <a href="https://instagram.com/nonantefolies" target="_blank" class="social-icon instagram" title="Instagram"> 102 <svg class="instagram-icon" viewBox="0 0 24 24"> 103 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> 104 </svg> 105 </a> 106 </div> 107 </div> 108 </header> 109 110 <!-- Christmas Banner --> 111 <!-- Christmas Banner - Sticky Header --> 112<div class="christmas-banner" id="christmasBanner"> 113 <div class="christmas-banner-content"> 114 <span class="christmas-banner-text">Organisez vos évènements de 15 à 200 personnes dans nos brasseries</span> 115 <a href="https://groupes.90folies.com" target="_blank" rel="noopener" class="christmas-banner-cta"> 116 infos & réservations </a> 117 </div> 118</div> 119 120<style> 121.christmas-banner { 122 position: fixed; 123 top: 70px; /* Position below the header */ 124 left: 0; 125 width: 100%; 126 background: linear-gradient(135deg, #193922 0%, #096632 100%); 127 color: #FDF4E5; 128 padding: 8px 20px; 129 display: flex; 130 align-items: center; 131 justify-content: center; 132 z-index: 999; 133 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); 134 font-family: 'Lora', serif; 135 transition: transform 0.3s ease; 136} 137 138.christmas-banner-content { 139 display: flex; 140 align-items: center; 141 justify-content: center; 142 gap: 15px; 143 flex-wrap: wrap; 144 max-width: 1200px; 145 width: 100%; 146} 147 148.christmas-banner-text { 149 font-style: italic; 150 font-size: 15px; 151 line-height: 1.3; 152 text-align: center; 153} 154 155.christmas-banner-cta { 156 background: #E0DC83; 157 color: #193922; 158 border: none; 159 padding: 6px 18px; 160 border-radius: 6px; 161 font-family: 'Lora', serif; 162 font-weight: 600; 163 font-size: 13px; 164 cursor: pointer; 165 transition: all 0.3s ease; 166 white-space: nowrap; 167 text-decoration: none; 168 display: inline-block; 169} 170 171.christmas-banner-cta:hover { 172 background: #FDF4E5; 173 transform: translateY(-2px); 174 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 175} 176 177/* Hide banner on scroll down, show on scroll up */ 178.christmas-banner.hidden { 179 transform: translateY(-100%); 180} 181 182/* Adjust body padding to account for banner */ 183body.christmas-banner-active { 184 padding-top: 70px; /* Header height + banner height */ 185} 186 187/* Mobile responsive */ 188@media (max-width: 768px) { 189 .christmas-banner { 190 top: 65px; 191 padding: 8px 15px; 192 } 193 194 .christmas-banner-content { 195 gap: 8px; 196 flex-direction: column; 197 } 198 199 .christmas-banner-text { 200 font-size: 13px; 201 margin-top: 3px; 202 } 203 204 .christmas-banner-cta { 205 font-size: 12px; 206 padding: 5px 14px; 207 } 208} 209 210@media (max-width: 480px) { 211 .christmas-banner-text { 212 font-size: 13px; 213 } 214 215 .christmas-banner-cta { 216 font-size: 12px; 217 } 218} 219</style> 220 221 222 <!-- Mobile Menu --> 223 <div class="menu-overlay"></div> 224 <nav class="mobile-menu"> 225 <a href="/">Accueil</a> 226 <a href="/about">A propos</a> 227 <div class="menu-restaurants"> 228 <div class="menu-restaurants-toggle">
229 <span>Nos Restaurants</span> 230 <svg class="menu-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> 231 </div> 232 <div class="menu-restaurants-sub"> 233 <a href="/boemvol">Boemvol</a> 234 <a href="/vollegas">Volle Gas</a> 235 <a href="/miroir">Miroir</a> 236 </div> 237 </div> 238 <a href="#" onclick="openMenuPopup(event)">Nos Menus</a> 239 <a href="https://groupes.90folies.com" target="_blank" rel="noopener">Groupes</a> 240 <a href="https://jobs.90folies.com/" target="_blank">On Recrute</a> 241 242 <div class="mobile-menu-button-container"> 243 <button class="mobile-group-btn" onclick="window.location.href='/contact'">Contact</button> 244 </div> 245 246 <!-- Language Switcher for Mobile --> 247 <div class="mobile-language-switcher"> 248 <div class="mobile-lang-toggle"> 249 <span class="fi fi-fr"></span> 250 <span>Français</span> 251 <svg class="mobile-lang-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> 252 </div> 253 <div class="mobile-lang-dropdown"> 254 <a href="/vollegas?lang=nl" class="mobile-lang-option"> 255 <span class="fi fi-nl"></span> 256 <span>Nederlands</span> 257 </a> 258 <a href="/vollegas?lang=en" class="mobile-lang-option"> 259 <span class="fi fi-gb"></span> 260 <span>English</span> 261 </a> 262 </div> 263 </div> 264 </nav> 265 266 <!-- Custom Menu Popup --> 267 268<div class="base-popup-overlay menu-popup-overlay" id="menuPopup"> 269 <div class="base-popup"> 270 <button class="base-popup-close" onclick="closeMenuPopup()">×</button> 271 <!-- Colored Header Section --> 272 273 <div class="base-popup-content"> 274 <div class="base-restaurants-selection"> 275 <!-- Boemvol Restaurant --> 276 <div class="base-restaurant-info"> 277 <div class="base-restaurant-logo"> 278 <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name"> 279 <img src="/images/Bird.png" alt="" class="base-logo-illustration"> 280 </div> 281 <div class="base-restaurant-address"> 282 <p>Rue Henri Maus 25<br>1000 Bruxelles</p> 283 </div> 284 <div class="base-restaurant-actions"> 285 286 <div class="menu-actions-container"> 287 <a href="./pdfs/2026-08-uploads/Boemvol MIDI-SOIR FR_compressed.pdf" target="_blank" class="menu-action-btn"> 288 <span class="menu-btn-title">Menu Complet</span> 289 <span class="menu-btn-description">Découvrez toute notre carte avec tous nos plats et spécialités</span> 290 </a> 291 <a href="./pdfs/2026-08-uploads/965e7b61-2af2-4df2-bde0-d83777faed1c.jpg" target="_blank" class="menu-action-btn"> 292 <span class="menu-btn-title">Menu Enfants</span> 293 <span class="menu-btn-description">Notre carte spéciale pour les plus petits</span> 294 </a> 295 </div> 296 </div> 297 </div> 298 299 <!-- Vertical Separator --> 300 <div class="base-vertical-separator"> 301 <div class="base-separator-line"></div> 302 <span class="base-separator-text">ou</span> 303 <div class="base-separator-line"></div> 304 </div> 305 306 <!-- Volle Gas Restaurant --> 307 <div class="base-restaurant-info base-vollegas-info" > 308 <div class="base-restaurant-logo"> 309 <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name"> 310 <img src="/images/Umbrella.png" alt="" class="base-logo-illustration"> 311 </div> 312 <div class="base-restaurant-address"> 313 <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p> 314 </div> 315 <div class="base-restaurant-actions"> 316 317 <div class="menu-actions-container"> 318 <a href="./pdfs/2026-08-uploads/Volle Gas MIDI-SOIR FR_compressed.pdf" target="_blank" class="menu-action-btn">
319 <span class="menu-btn-title">Menu Complet</span> 320 <span class="menu-btn-description">Découvrez toute notre carte avec tous nos plats et spécialités</span> 321 </a> 322 <a href="./pdfs/2026-08-uploads/A5 - Menu Kids VOLLE GAS - FR.pdf" target="_blank" class="menu-action-btn"> 323 <span class="menu-btn-title">Menu Enfants</span> 324 <span class="menu-btn-description">Notre carte spéciale pour les plus petits</span> 325 </a> 326 </div> 327 </div> 328 </div> 329 330 <!-- Vertical Separator --> 331 <div class="base-vertical-separator"> 332 <div class="base-separator-line"></div> 333 <span class="base-separator-text">ou</span> 334 <div class="base-separator-line"></div> 335 </div> 336 337 <!-- Miroir Restaurant --> 338 <div class="base-restaurant-info base-miroir-info"> 339 <div class="base-restaurant-logo"> 340 <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir"> 341 <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration"> 342 </div> 343 <div class="base-restaurant-address"> 344 <p>Pl. Reine Astrid 24<br>1090 Jette</p> 345 </div> 346 <div class="base-restaurant-actions"> 347 348 <div class="menu-actions-container"> 349 <a href="./pdfs/2026-08-uploads/Miroir MIDI-SOIR FR_compressed.pdf" target="_blank" class="menu-action-btn"> 350 <span class="menu-btn-title">Menu Complet</span> 351 <span class="menu-btn-description">Découvrez toute notre carte avec tous nos plats et spécialités</span> 352 </a> 353 <a href="./pdfs/2026-08-uploads/A5 - Menu Kids - Miroir - FR.pdf" target="_blank" class="menu-action-btn"> 354 <span class="menu-btn-title">Menu Enfants</span> 355 <span class="menu-btn-description">Notre carte spéciale pour les plus petits</span> 356 </a> 357 </div> 358 </div> 359 </div> 360 </div> 361 </div> 362 </div> 363</div> 364 365<style> 366/* Base Popup Styles */ 367.base-popup-overlay { 368 position: fixed; 369 top: 0; 370 left: 0; 371 width: 100%; 372 height: 100%; 373 background: rgba(0, 0, 0, 0.8); 374 z-index: 10000; 375 display: none; 376 align-items: center; 377 justify-content: center; 378 backdrop-filter: blur(5px); 379} 380 381.base-popup-overlay.active { 382 display: flex; 383} 384 385.base-popup { 386 background: #f8f6f0; 387 border-radius: 20px; 388 max-width: 900px; 389 width: 90%; 390 max-height: 90vh; 391 overflow-y: auto; 392 position: relative; 393 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 394 font-family: 'Lora', serif; 395} 396 397.base-popup-close { 398 position: absolute; 399 top: 20px; 400 right: 20px; 401 background: none; 402 border: none; 403 font-size: 32px; 404 cursor: pointer; 405 color: white; 406 z-index: 10001; 407 width: 40px; 408 height: 40px; 409 display: flex; 410 align-items: center; 411 justify-content: center; 412 border-radius: 50%; 413 transition: all 0.3s ease; 414} 415 416.base-popup-close:hover { 417 background: rgba(255, 255, 255, 0.2); 418 transform: rotate(90deg); 419} 420 421.base-popup-content { 422 padding: 25px; 423} 424 425.base-popup-header { 426 text-align: center; 427 margin-bottom: 40px; 428} 429 430/* Colored Header Styles */ 431.base-popup-colored-header { 432 background: #193922; 433 padding: 25px; 434 text-align: center; 435 border-radius: 20px 20px 0 0; 436} 437 438.base-popup-colored-header .base-popup-title { 439 font-family: 'Lora', serif; 440 font-style: italic; 441 font-weight: 400; 442 font-size: 28px; 443 line-height: 140.62%; 444 color: white; 445 margin: 0 0 12px 0; 446 max-width: 600px; 447 margin-left: auto; 448 margin-right: auto; 449} 450 451.base-popup-subtitle { 452 font-family: 'Lora', serif; 453 font-style: italic; 454 font-weight: 400; 455 font-size: 18px; 456 line-height: 140.62%; 457 color: white; 458 margin: 0; 459 max-width: 600px; 460 margin-left: auto; 461 margin-right: auto; 462} 463 464/* Default title styles for non-colored headers */ 465.base-popup-title { 466 font-family: 'Lora', serif; 467 font-style: italic; 468 font-weight: 400; 469 font-size: 28px; 470 line-height: 140.62%; 471 color: black; 472 margin: 0; 473 max-width: 600px; 474 margin-left: auto; 475 margin-right: auto; 476} 477 478.base-restaurants-selection { 479 display: flex; 480 flex-direction: row; 481 align-items: stretch; 482 gap: 0; 483 margin-top: 0; 484} 485 486.base-restaurant-info { 487 display: flex; 488 flex-direction: column; 489 align-items: center; 490 text-align: center; 491 gap: 25px; 492 flex: 1; 493 padding: 0 20px; 494 height: 100%; 495} 496 497.base-restaurant-logo { 498 display: flex; 499 flex-direction: column; 500 align-items: center; 501 text-align: center; 502 gap: 8px; 503 height: 150px; 504 justify-content: center; 505} 506 507.base-restaurant-logo img { 508 object-fit: contain; 509} 510 511.base-logo-name { 512 display: block; 513 height: 45px; 514 max-width: 200px; 515 width: auto; 516} 517 518.base-vollegas-info .base-logo-name { 519 max-width: 190px; 520} 521 522.base-logo-miroir { 523 max-width: 200px; 524} 525 526.base-logo-illustration { 527 display: block; 528 height: 90px; 529 width: auto; 530} 531 532.base-restaurant-address p { 533 margin: 0; 534 font-family: 'Lora', serif; 535 font-style: italic; 536 font-weight: 500; 537 font-size: 16px; 538 line-height: 140.62%; 539 color: var(--text-dark); 540} 541 542.base-restaurant-actions { 543 display: flex; 544 flex-direction: column; 545 gap: 12px; 546 width: 100%; 547 max-width: 200px; 548 margin-top: auto; 549} 550 551/* Volle Gas specific styling */ 552.base-vollegas-info .base-restaurant-address p { 553 color: #CD4D37; 554} 555 556/* Miroir specific styling */ 557.base-miroir-info .base-restaurant-address p { 558 color: #E79C4A; 559} 560 561.base-vertical-separator { 562 display: flex; 563 flex-direction: column; 564 align-items: center; 565 justify-content: center; 566 padding: 20px 0; 567 min-width: 80px; 568} 569 570.base-separator-line { 571 flex: 1; 572 width: 1px; 573 background: linear-gradient(to bottom, transparent, #d4af37, transparent); 574 min-height: 60px; 575} 576 577.base-separator-text { 578 margin: 15px 0; 579 font-family: 'Lora', serif; 580 font-style: italic; 581 font-weight: 500; 582 font-size: 14px; 583 line-height: 140.62%; 584 color: var(--text-dark); 585 text-transform: uppercase; 586 letter-spacing: 1px; 587} 588 589/* Mobile Responsive */ 590@media (max-width: 768px) { 591 .base-popup { 592 width: 95%; 593 margin: 20px; 594 max-height: calc(100vh - 40px); 595 } 596 597 .base-popup-content { 598 padding: 20px 15px; 599 } 600 601 .base-popup-colored-header { 602 padding: 20px 15px; 603 padding-top: 50px; /* Extra space for close button */ 604 } 605 606 .base-popup-colored-header .base-popup-title { 607 font-size: 24px; 608 margin-bottom: 10px; 609 } 610 611 .base-popup-subtitle { 612 font-size: 16px; 613 } 614 615 .base-popup-title { 616 font-size: 24px; 617 } 618 619 /* Switch to vertical layout on mobile */ 620 .base-restaurants-selection { 621 flex-direction: column; 622 gap: 25px; 623 } 624 625 .base-restaurant-info { 626 gap: 12px; 627 padding: 0; 628 } 629 630 /* Change vertical separator to horizontal on mobile */ 631 .base-vertical-separator { 632 flex-direction: row; 633 padding: 0 40px; 634 min-width: auto; 635 min-height: auto; 636 margin: 10px 0; 637 } 638 639 .base-separator-line { 640 flex: 1; 641 width: auto; 642 height: 1px; 643 background: linear-gradient(to right, transparent, #d4af37, transparent); 644 min-height: auto; 645 } 646 647 .base-separator-text { 648 margin: 0 15px; 649 font-size: 12px; 650 } 651} 652 653@media (max-width: 480px) { 654 655 .base-popup-content { 656 padding: 15px 10px; 657 } 658 659 .base-popup-colored-header { 660 padding: 20px 10px; 661 padding-top: 50px; /* Extra space for close button */ 662 } 663 664 .base-popup-colored-header .base-popup-title { 665 font-size: 20px; 666 margin-bottom: 12px; 667 } 668 669 .base-popup-subtitle { 670 font-size: 14px; 671 } 672 673 .base-popup-title { 674 font-size: 20px; 675 } 676 677 .base-restaurant-info { 678 gap: 12px; 679 } 680 681 .base-vertical-separator { 682 padding: 0 20px; 683 } 684 685 .base-separator-text { 686 margin: 0 10px; 687 } 688} 689 690/* Logo responsiveness for tablets and mobile */ 691@media (max-width: 1024px) { 692 .base-logo-illustration { 693 display: none; 694 } 695 696 .base-logo-name { 697 height: 45px; 698 } 699 700 .base-restaurant-logo { 701 height: 70px; 702 } 703 704 .base-restaurant-info { 705 gap: 20px; 706 } 707} 708 709/* Further adjustments for mobile */ 710@media (max-width: 768px) { 711 .base-logo-name { 712 height: 40px; 713 max-width: 180px; 714 } 715 716 .base-restaurant-logo { 717 height: 60px; 718 } 719 720 .base-restaurant-info { 721 gap: 15px; 722 } 723} 724 725/* Additional adjustments for small mobile screens */ 726@media (max-width: 480px) { 727 .base-logo-name { 728 height: 35px; 729 max-width: 150px; 730 } 731 732 .base-restaurant-logo { 733 height: 55px; 734 } 735} 736</style> 737 738<style> 739/* Menu Popup Specific Styles */ 740.menu-popup-overlay .base-popup { 741 max-width: 960px; 742 overflow-x: hidden; 743} 744 745.menu-popup-overlay .base-restaurants-selection { 746 min-width: 0; 747} 748 749.menu-popup-overlay .base-restaurant-info { 750 min-width: 0; 751 padding: 0 8px; 752 gap: 20px; 753} 754 755.menu-popup-overlay .base-vertical-separator { 756 min-width: 40px; 757 flex-shrink: 0; 758} 759 760/* Override base styles for menu popup - only on desktop */ 761@media (min-width: 1025px) { 762 .menu-popup-overlay .base-logo-name { 763 height: 45px; 764 } 765 766 .menu-popup-overlay .base-logo-illustration { 767 height: 100px; 768 } 769 770 .menu-popup-overlay .base-restaurant-logo { 771 height: 150px; 772 } 773} 774 775/* Override base popup width constraints for menu popup */ 776.menu-popup-overlay .base-restaurant-actions { 777 max-width: none; 778} 779 780.menu-actions-container { 781 display: flex; 782 flex-direction: column; 783 gap: 12px; 784 width: 100%; 785 margin-top: auto; 786} 787 788.menu-action-btn { 789 display: flex; 790 flex-direction: column; 791 align-items: flex-start; 792 justify-content: center; 793 gap: 4px; 794 padding: 16px 20px; 795 border: 2px solid var(--text-dark); 796 border-radius: 8px; 797 background: transparent; 798 color: var(--text-dark); 799 font-family: 'Lora', serif; 800 cursor: pointer; 801 transition: all 0.3s ease; 802 text-decoration: none; 803 min-height: 65px; 804 text-align: left; 805} 806 807.menu-action-btn:hover { 808 background: var(--text-dark); 809 color: #FDF4E5; 810 border-color: var(--text-dark); 811} 812 813.menu-action-btn:hover .menu-btn-title, 814.menu-action-btn:hover .menu-btn-description { 815 color: #FDF4E5; 816} 817 818.menu-btn-title { 819 font-weight: 600; 820 font-size: 14px; 821 text-transform: uppercase; 822 letter-spacing: 1px; 823 margin: 0; 824 line-height: 1.2; 825} 826 827.menu-btn-description { 828 font-weight: 400; 829 font-size: 12px; 830 font-style: italic; 831 line-height: 1.3; 832 margin: 0; 833 opacity: 0.8; 834} 835 836/* Coming Soon Button */ 837.popup-coming-soon-btn { 838 display: flex; 839 flex-direction: column; 840 align-items: flex-start; 841 justify-content: center; 842 gap: 4px; 843 padding: 16px 20px; 844 border: 2px solid #CD4D37; 845 border-radius: 8px; 846 background: transparent; 847 color: #CD4D37; 848 font-family: 'Lora', serif; 849 min-height: 65px; 850 text-align: left; 851 opacity: 0.7;
852 cursor: not-allowed; 853} 854 855.popup-coming-soon-btn .menu-btn-title { 856 color: #CD4D37; 857 font-weight: 600; 858 font-size: 14px; 859 text-transform: uppercase; 860 letter-spacing: 1px; 861} 862 863.popup-coming-soon-btn .menu-btn-description { 864 color: #CD4D37; 865 font-weight: 400; 866 font-size: 12px; 867 font-style: italic; 868 opacity: 0.8; 869} 870 871/* Volle Gas specific styling */ 872.menu-popup-overlay .base-vollegas-info .menu-action-btn { 873 color: #CD4D37; 874 border-color: #CD4D37; 875} 876 877.menu-popup-overlay .base-vollegas-info .menu-action-btn:hover { 878 background: #CD4D37; 879 color: #FDF4E5; 880 border-color: #CD4D37; 881} 882 883.menu-popup-overlay .base-vollegas-info .menu-action-btn .menu-btn-title, 884.menu-popup-overlay .base-vollegas-info .menu-action-btn .menu-btn-description { 885 color: #CD4D37; 886} 887 888.menu-popup-overlay .base-vollegas-info .menu-action-btn:hover .menu-btn-title, 889.menu-popup-overlay .base-vollegas-info .menu-action-btn:hover .menu-btn-description { 890 color: #FDF4E5; 891} 892 893/* Miroir specific styling */ 894.menu-popup-overlay .base-miroir-info .menu-action-btn { 895 color: #E79C4A; 896 border-color: #E79C4A; 897} 898 899.menu-popup-overlay .base-miroir-info .menu-action-btn:hover { 900 background: #E79C4A; 901 color: #FDF4E5; 902 border-color: #E79C4A; 903} 904 905.menu-popup-overlay .base-miroir-info .menu-action-btn .menu-btn-title, 906.menu-popup-overlay .base-miroir-info .menu-action-btn .menu-btn-description { 907 color: #E79C4A; 908} 909 910.menu-popup-overlay .base-miroir-info .menu-action-btn:hover .menu-btn-title, 911.menu-popup-overlay .base-miroir-info .menu-action-btn:hover .menu-btn-description { 912 color: #FDF4E5; 913} 914 915/* Mobile Responsive */ 916@media (max-width: 768px) { 917 918 .menu-action-btn, 919 .popup-coming-soon-btn { 920 min-height: 60px; 921 padding: 14px 16px; 922 } 923 924 .menu-btn-title { 925 font-size: 13px; 926 } 927 928 .menu-btn-description { 929 font-size: 11px; 930 } 931} 932 933@media (max-width: 480px) { 934 .menu-action-btn, 935 .popup-coming-soon-btn { 936 min-height: 55px; 937 padding: 12px 14px; 938 } 939 940 .menu-btn-title { 941 font-size: 12px; 942 } 943 944 .menu-btn-description { 945 font-size: 10px; 946 } 947} 948</style> 949 950 <!-- Custom Reservation Popup --> 951 952<div class="base-popup-overlay reservation-popup-overlay" id="reservationPopup"> 953 <div class="base-popup"> 954 <button class="base-popup-close" onclick="closeReservationPopup()">×</button> 955 <!-- Colored Header Section --> 956 957 <div class="base-popup-content"> 958 <div class="base-restaurants-selection"> 959 <!-- Boemvol Restaurant --> 960 <div class="base-restaurant-info"> 961 <div class="base-restaurant-logo"> 962 <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name"> 963 <img src="/images/Bird.png" alt="" class="base-logo-illustration"> 964 </div> 965 <div class="base-restaurant-address"> 966 <p>Rue Henri Maus 25<br>1000 Bruxelles</p> 967 </div> 968 <div class="base-restaurant-actions"> 969 970 <button class="reservation-action-btn" onclick="handleBoemvolReservation()">RÃSERVER</button> 971 </div> 972 </div> 973 974 <!-- Vertical Separator --> 975 <div class="base-vertical-separator"> 976 <div class="base-separator-line"></div> 977 <span class="base-separator-text">ou</span> 978 <div class="base-separator-line"></div> 979 </div> 980 981 <!-- Volle Gas Restaurant --> 982 <div class="base-restaurant-info base-vollegas-info" > 983 <div class="base-restaurant-logo"> 984 <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name"> 985 <img src="/images/Umbrella.png" alt="" class="base-logo-illustration"> 986 </div> 987 <div class="base-restaurant-address"> 988 <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p> 989 </div> 990 <div class="base-restaurant-actions"> 991 992 <button class="reservation-action-btn reservation-vollegas-btn" onclick="handleVollegasReservation()">RÃSERVER</button> 993 </div> 994 </div> 995 996 <!-- Vertical Separator --> 997 <div class="base-vertical-separator"> 998 <div class="base-separator-line"></div>
999 <span class="base-separator-text">ou</span> 1000 <div class="base-separator-line"></div> 1001 </div> 1002 1003 <!-- Miroir Restaurant --> 1004 <div class="base-restaurant-info base-miroir-info"> 1005 <div class="base-restaurant-logo"> 1006 <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir"> 1007 <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration"> 1008 </div> 1009 <div class="base-restaurant-address"> 1010 <p>Pl. Reine Astrid 24<br>1090 Jette</p> 1011 </div> 1012 <div class="base-restaurant-actions"> 1013 1014 <button class="reservation-action-btn reservation-miroir-btn" onclick="handleMiroirReservation()">RÃSERVER</button> 1015 </div> 1016 </div> 1017 </div> 1018 </div> 1019 </div> 1020</div> 1021 1022<style> 1023/* Base Popup Styles */ 1024.base-popup-overlay { 1025 position: fixed; 1026 top: 0; 1027 left: 0; 1028 width: 100%; 1029 height: 100%; 1030 background: rgba(0, 0, 0, 0.8); 1031 z-index: 10000; 1032 display: none; 1033 align-items: center; 1034 justify-content: center; 1035 backdrop-filter: blur(5px); 1036} 1037 1038.base-popup-overlay.active { 1039 display: flex; 1040} 1041 1042.base-popup { 1043 background: #f8f6f0; 1044 border-radius: 20px; 1045 max-width: 900px; 1046 width: 90%; 1047 max-height: 90vh; 1048 overflow-y: auto; 1049 position: relative; 1050 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 1051 font-family: 'Lora', serif; 1052} 1053 1054.base-popup-close { 1055 position: absolute; 1056 top: 20px; 1057 right: 20px; 1058 background: none; 1059 border: none; 1060 font-size: 32px; 1061 cursor: pointer; 1062 color: white; 1063 z-index: 10001; 1064 width: 40px; 1065 height: 40px; 1066 display: flex; 1067 align-items: center; 1068 justify-content: center; 1069 border-radius: 50%; 1070 transition: all 0.3s ease; 1071} 1072 1073.base-popup-close:hover { 1074 background: rgba(255, 255, 255, 0.2); 1075 transform: rotate(90deg); 1076} 1077 1078.base-popup-content { 1079 padding: 25px; 1080} 1081 1082.base-popup-header { 1083 text-align: center; 1084 margin-bottom: 40px; 1085} 1086 1087/* Colored Header Styles */ 1088.base-popup-colored-header { 1089 background: #193922; 1090 padding: 25px; 1091 text-align: center; 1092 border-radius: 20px 20px 0 0; 1093} 1094 1095.base-popup-colored-header .base-popup-title { 1096 font-family: 'Lora', serif; 1097 font-style: italic; 1098 font-weight: 400; 1099 font-size: 28px; 1100 line-height: 140.62%; 1101 color: white; 1102 margin: 0 0 12px 0; 1103 max-width: 600px; 1104 margin-left: auto; 1105 margin-right: auto; 1106} 1107 1108.base-popup-subtitle { 1109 font-family: 'Lora', serif; 1110 font-style: italic; 1111 font-weight: 400; 1112 font-size: 18px; 1113 line-height: 140.62%; 1114 color: white; 1115 margin: 0; 1116 max-width: 600px; 1117 margin-left: auto; 1118 margin-right: auto; 1119} 1120 1121/* Default title styles for non-colored headers */ 1122.base-popup-title { 1123 font-family: 'Lora', serif; 1124 font-style: italic; 1125 font-weight: 400; 1126 font-size: 28px; 1127 line-height: 140.62%; 1128 color: black; 1129 margin: 0; 1130 max-width: 600px; 1131 margin-left: auto; 1132 margin-right: auto; 1133} 1134 1135.base-restaurants-selection { 1136 display: flex; 1137 flex-direction: row; 1138 align-items: stretch; 1139 gap: 0; 1140 margin-top: 0; 1141} 1142 1143.base-restaurant-info { 1144 display: flex; 1145 flex-direction: column; 1146 align-items: center; 1147 text-align: center; 1148 gap: 25px; 1149 flex: 1; 1150 padding: 0 20px; 1151 height: 100%; 1152} 1153 1154.base-restaurant-logo { 1155 display: flex; 1156 flex-direction: column; 1157 align-items: center; 1158 text-align: center; 1159 gap: 8px; 1160 height: 150px; 1161 justify-content: center; 1162} 1163 1164.base-restaurant-logo img { 1165 object-fit: contain; 1166} 1167 1168.base-logo-name { 1169 display: block; 1170 height: 45px; 1171 max-width: 200px; 1172 width: auto; 1173} 1174 1175.base-vollegas-info .base-logo-name { 1176 max-width: 190px; 1177} 1178 1179.base-logo-miroir { 1180 max-width: 200px; 1181} 1182 1183.base-logo-illustration { 1184 display: block; 1185 height: 90px; 1186 width: auto; 1187} 1188 1189.base-restaurant-address p { 1190 margin: 0; 1191 font-family: 'Lora', serif; 1192 font-style: italic; 1193 font-weight: 500; 1194 font-size: 16px; 1195 line-height: 140.62%; 1196 color: var(--text-dark); 1197} 1198 1199.base-restaurant-actions { 1200 display: flex; 1201 flex-direction: column; 1202 gap: 12px; 1203 width: 100%; 1204 max-width: 200px; 1205 margin-top: auto; 1206} 1207 1208/* Volle Gas specific styling */ 1209.base-vollegas-info .base-restaurant-address p { 1210 color: #CD4D37; 1211} 1212 1213/* Miroir specific styling */ 1214.base-miroir-info .base-restaurant-address p { 1215 color: #E79C4A; 1216} 1217 1218.base-vertical-separator { 1219 display: flex; 1220 flex-direction: column; 1221 align-items: center; 1222 justify-content: center; 1223 padding: 20px 0; 1224 min-width: 80px; 1225} 1226 1227.base-separator-line { 1228 flex: 1; 1229 width: 1px; 1230 background: linear-gradient(to bottom, transparent, #d4af37, transparent); 1231 min-height: 60px; 1232} 1233 1234.base-separator-text { 1235 margin: 15px 0; 1236 font-family: 'Lora', serif; 1237 font-style: italic; 1238 font-weight: 500; 1239 font-size: 14px; 1240 line-height: 140.62%; 1241 color: var(--text-dark); 1242 text-transform: uppercase; 1243 letter-spacing: 1px; 1244} 1245 1246/* Mobile Responsive */ 1247@media (max-width: 768px) { 1248 .base-popup { 1249 width: 95%; 1250 margin: 20px; 1251 max-height: calc(100vh - 40px); 1252 } 1253 1254 .base-popup-content { 1255 padding: 20px 15px; 1256 } 1257 1258 .base-popup-colored-header { 1259 padding: 20px 15px; 1260 padding-top: 50px; /* Extra space for close button */ 1261 } 1262 1263 .base-popup-colored-header .base-popup-title { 1264 font-size: 24px; 1265 margin-bottom: 10px; 1266 } 1267 1268 .base-popup-subtitle { 1269 font-size: 16px; 1270 } 1271 1272 .base-popup-title { 1273 font-size: 24px; 1274 } 1275 1276 /* Switch to vertical layout on mobile */ 1277 .base-restaurants-selection { 1278 flex-direction: column; 1279 gap: 25px; 1280 } 1281 1282 .base-restaurant-info { 1283 gap: 12px; 1284 padding: 0; 1285 } 1286 1287 /* Change vertical separator to horizontal on mobile */ 1288 .base-vertical-separator { 1289 flex-direction: row; 1290 padding: 0 40px; 1291 min-width: auto; 1292 min-height: auto; 1293 margin: 10px 0; 1294 } 1295 1296 .base-separator-line { 1297 flex: 1; 1298 width: auto; 1299 height: 1px; 1300 background: linear-gradient(to right, transparent, #d4af37, transparent); 1301 min-height: auto; 1302 } 1303 1304 .base-separator-text { 1305 margin: 0 15px; 1306 font-size: 12px; 1307 } 1308} 1309 1310@media (max-width: 480px) { 1311 1312 .base-popup-content { 1313 padding: 15px 10px; 1314 } 1315 1316 .base-popup-colored-header { 1317 padding: 20px 10px; 1318 padding-top: 50px; /* Extra space for close button */ 1319 } 1320 1321 .base-popup-colored-header .base-popup-title { 1322 font-size: 20px; 1323 margin-bottom: 12px; 1324 } 1325 1326 .base-popup-subtitle { 1327 font-size: 14px; 1328 } 1329 1330 .base-popup-title { 1331 font-size: 20px; 1332 } 1333 1334 .base-restaurant-info { 1335 gap: 12px; 1336 } 1337 1338 .base-vertical-separator { 1339 padding: 0 20px; 1340 } 1341 1342 .base-separator-text { 1343 margin: 0 10px; 1344 } 1345} 1346 1347/* Logo responsiveness for tablets and mobile */ 1348@media (max-width: 1024px) { 1349 .base-logo-illustration { 1350 display: none; 1351 } 1352 1353 .base-logo-name { 1354 height: 45px; 1355 } 1356 1357 .base-restaurant-logo { 1358 height: 70px; 1359 } 1360 1361 .base-restaurant-info { 1362 gap: 20px; 1363 } 1364} 1365 1366/* Further adjustments for mobile */ 1367@media (max-width: 768px) { 1368 .base-logo-name { 1369 height: 40px; 1370 max-width: 180px; 1371 } 1372 1373 .base-restaurant-logo { 1374 height: 60px; 1375 } 1376 1377 .base-restaurant-info { 1378 gap: 15px; 1379 } 1380} 1381 1382/* Additional adjustments for small mobile screens */ 1383@media (max-width: 480px) { 1384 .base-logo-name { 1385 height: 35px; 1386 max-width: 150px; 1387 } 1388 1389 .base-restaurant-logo { 1390 height: 55px; 1391 } 1392} 1393</style> 1394 1395<style> 1396/* Reservation Popup Specific Styles */ 1397.reservation-popup-overlay .base-popup { 1398 max-width: 960px; 1399 overflow-x: hidden; 1400} 1401 1402.reservation-popup-overlay .base-restaurants-selection { 1403 min-width: 0; 1404} 1405 1406.reservation-popup-overlay .base-restaurant-info { 1407 min-width: 0; 1408 padding: 0 8px; 1409 gap: 20px; 1410} 1411 1412.reservation-popup-overlay .base-vertical-separator { 1413 min-width: 40px; 1414 flex-shrink: 0; 1415} 1416 1417.reservation-popup-overlay .base-logo-illustration { 1418 display: none; 1419} 1420 1421.reservation-popup-overlay .base-logo-name { 1422 display: block; 1423 height: 60px; 1424 max-width: 160px; 1425 width: auto; 1426 object-fit: contain; 1427} 1428 1429.reservation-popup-overlay .base-logo-miroir { 1430 max-width: 200px; 1431} 1432 1433.reservation-popup-overlay .base-restaurant-logo { 1434 height: 80px; 1435} 1436 1437.reservation-popup-overlay .base-vollegas-info .base-restaurant-logo { 1438 margin-top: 0 !important; 1439 margin-bottom: 0 !important; 1440} 1441 1442.reservation-action-btn { 1443 display: flex; 1444 align-items: center; 1445 justify-content: center; 1446 gap: 10px; 1447 padding: 12px 20px; 1448 border: 2px solid var(--text-dark); 1449 border-radius: 8px; 1450 background: transparent; 1451 color: var(--text-dark); 1452 font-family: 'Lora', serif; 1453 font-weight: 500; 1454 font-size: 14px; 1455 text-transform: uppercase; 1456 letter-spacing: 1px; 1457 cursor: pointer; 1458 transition: all 0.3s ease; 1459 text-decoration: none; 1460 min-height: 45px; 1461 margin-top: auto; 1462} 1463 1464.reservation-action-btn:hover { 1465 background: var(--text-dark); 1466 color: #FDF4E5; 1467 border-color: var(--text-dark); 1468} 1469 1470/* Volle Gas specific styling */ 1471.reservation-popup-overlay .base-vollegas-info .reservation-vollegas-btn { 1472 color: #CD4D37; 1473 border-color: #CD4D37; 1474} 1475 1476.reservation-popup-overlay .base-vollegas-info .reservation-vollegas-btn:hover { 1477 background: #CD4D37; 1478 color: #FDF4E5; 1479 border-color: #CD4D37; 1480} 1481 1482.reservation-popup-overlay .base-miroir-info .base-restaurant-address p { 1483 color: #C9782E; 1484} 1485 1486.reservation-popup-overlay .base-miroir-info .reservation-miroir-btn { 1487 color: #C9782E; 1488 border-color: #C9782E; 1489} 1490 1491.reservation-popup-overlay .base-miroir-info .reservation-miroir-btn:hover { 1492 background: #C9782E; 1493 color: #FDF4E5; 1494 border-color: #C9782E; 1495} 1496 1497@media (min-width: 1025px) { 1498 .reservation-popup-overlay .base-miroir-info .base-restaurant-logo { 1499 padding-top: 10px; 1500 } 1501} 1502 1503@media (max-width: 768px) { 1504 .reservation-popup-overlay .base-popup-content { 1505 padding: 16px 14px; 1506 } 1507 1508 .reservation-popup-overlay .base-restaurants-selection { 1509 gap: 14px; 1510 } 1511 1512 .reservation-popup-overlay .base-restaurant-info { 1513 gap: 12px; 1514 padding: 0; 1515 } 1516 1517 .reservation-popup-overlay .base-restaurant-logo { 1518 height: 52px; 1519 } 1520 1521 .reservation-popup-overlay .base-logo-name { 1522 height: 48px; 1523 } 1524 1525 .reservation-popup-overlay .base-vertical-separator { 1526 margin: 6px 0; 1527 padding: 0 24px; 1528 } 1529 1530 .reservation-popup-overlay .base-restaurant-actions { 1531 margin-top: 0; 1532 } 1533 1534 .reservation-popup-overlay .reservation-action-btn { 1535 margin-top: 0; 1536 min-height: 42px; 1537 padding: 10px 18px; 1538 } 1539} 1540 1541 1542</style> 1543 <!-- Group Event Popup --> 1544 1545<div class="base-popup-overlay group-popup-overlay" id="groupPopup"> 1546 <div class="base-popup"> 1547 <button class="base-popup-close" onclick="closeGroupPopup()">×</button> 1548 <!-- Colored Header Section --> 1549 <div class="base-popup-colored-header"> 1550 <h2 class="base-popup-title">Un dîner d'entreprise, un anniversaire ou toute autre occasion spéciale ?</h2> 1551 <p class="base-popup-subtitle">Nous accueillons vos évènements de 15 à 200 personnes et créons pour tous une offre sur mesure.</p> 1552 </div> 1553 1554 <div class="base-popup-content"> 1555 <div class="base-restaurants-selection"> 1556 <!-- Boemvol Restaurant --> 1557 <div class="base-restaurant-info"> 1558 <div class="base-restaurant-logo"> 1559 <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name"> 1560 <img src="/images/Bird.png" alt="" class="base-logo-illustration"> 1561 </div> 1562 <div class="base-restaurant-address"> 1563 <p>Rue Henri Maus 25<br>1000 Bruxelles</p> 1564 </div> 1565 <div class="base-restaurant-actions"> 1566 1567 <button class="group-action-btn group-menu-btn" onclick="openGroupMenu('boemvol')">MENU DE GROUPE</button> 1568 <button class="group-action-btn group-custom-btn" onclick="openCustomOffer('boemvol')">OFFRE SUR MESURE</button> 1569 </div> 1570 </div> 1571 1572 <!-- Vertical Separator --> 1573 <div class="base-vertical-separator"> 1574 <div class="base-separator-line"></div>
1575 <span class="base-separator-text">ou</span> 1576 <div class="base-separator-line"></div> 1577 </div> 1578 1579 <!-- Volle Gas Restaurant --> 1580 <div class="base-restaurant-info base-vollegas-info" > 1581 <div class="base-restaurant-logo"> 1582 <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name"> 1583 <img src="/images/Umbrella.png" alt="" class="base-logo-illustration"> 1584 </div> 1585 <div class="base-restaurant-address"> 1586 <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p> 1587 </div> 1588 <div class="base-restaurant-actions"> 1589 1590 <button class="group-action-btn group-menu-btn group-vollegas-menu" onclick="openGroupMenu('vollegas')">MENU DE GROUPE</button> 1591 <button class="group-action-btn group-custom-btn group-vollegas-custom" onclick="openCustomOffer('vollegas')">OFFRE SUR MESURE</button> 1592 </div> 1593 </div> 1594 1595 <!-- Vertical Separator --> 1596 <div class="base-vertical-separator"> 1597 <div class="base-separator-line"></div> 1598 <span class="base-separator-text">ou</span> 1599 <div class="base-separator-line"></div> 1600 </div> 1601 1602 <!-- Miroir Restaurant --> 1603 <div class="base-restaurant-info base-miroir-info"> 1604 <div class="base-restaurant-logo"> 1605 <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir"> 1606 <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration"> 1607 </div> 1608 <div class="base-restaurant-address"> 1609 <p>Pl. Reine Astrid 24<br>1090 Jette</p> 1610 </div> 1611 <div class="base-restaurant-actions"> 1612 1613 <button class="reservation-action-btn reservation-miroir-btn" onclick="handleMiroirReservation()">RÃSERVER</button> 1614 </div> 1615 </div> 1616 </div> 1617 </div> 1618 </div> 1619</div> 1620 1621<style> 1622/* Base Popup Styles */ 1623.base-popup-overlay { 1624 position: fixed; 1625 top: 0; 1626 left: 0; 1627 width: 100%; 1628 height: 100%; 1629 background: rgba(0, 0, 0, 0.8); 1630 z-index: 10000; 1631 display: none; 1632 align-items: center; 1633 justify-content: center; 1634 backdrop-filter: blur(5px); 1635} 1636 1637.base-popup-overlay.active { 1638 display: flex; 1639} 1640 1641.base-popup { 1642 background: #f8f6f0; 1643 border-radius: 20px; 1644 max-width: 900px; 1645 width: 90%; 1646 max-height: 90vh; 1647 overflow-y: auto; 1648 position: relative; 1649 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 1650 font-family: 'Lora', serif; 1651} 1652 1653.base-popup-close { 1654 position: absolute; 1655 top: 20px; 1656 right: 20px; 1657 background: none; 1658 border: none; 1659 font-size: 32px; 1660 cursor: pointer; 1661 color: white; 1662 z-index: 10001; 1663 width: 40px; 1664 height: 40px; 1665 display: flex; 1666 align-items: center; 1667 justify-content: center; 1668 border-radius: 50%; 1669 transition: all 0.3s ease; 1670} 1671 1672.base-popup-close:hover { 1673 background: rgba(255, 255, 255, 0.2); 1674 transform: rotate(90deg); 1675} 1676 1677.base-popup-content { 1678 padding: 25px; 1679} 1680 1681.base-popup-header { 1682 text-align: center; 1683 margin-bottom: 40px; 1684} 1685 1686/* Colored Header Styles */ 1687.base-popup-colored-header { 1688 background: #193922; 1689 padding: 25px; 1690 text-align: center; 1691 border-radius: 20px 20px 0 0; 1692} 1693 1694.base-popup-colored-header .base-popup-title { 1695 font-family: 'Lora', serif; 1696 font-style: italic; 1697 font-weight: 400; 1698 font-size: 28px; 1699 line-height: 140.62%; 1700 color: white; 1701 margin: 0 0 12px 0; 1702 max-width: 600px; 1703 margin-left: auto; 1704 margin-right: auto; 1705} 1706 1707.base-popup-subtitle { 1708 font-family: 'Lora', serif; 1709 font-style: italic; 1710 font-weight: 400; 1711 font-size: 18px; 1712 line-height: 140.62%; 1713 color: white; 1714 margin: 0; 1715 max-width: 600px; 1716 margin-left: auto; 1717 margin-right: auto; 1718} 1719 1720/* Default title styles for non-colored headers */ 1721.base-popup-title { 1722 font-family: 'Lora', serif; 1723 font-style: italic; 1724 font-weight: 400; 1725 font-size: 28px; 1726 line-height: 140.62%; 1727 color: black; 1728 margin: 0; 1729 max-width: 600px; 1730 margin-left: auto; 1731 margin-right: auto; 1732} 1733 1734.base-restaurants-selection { 1735 display: flex; 1736 flex-direction: row; 1737 align-items: stretch; 1738 gap: 0; 1739 margin-top: 0; 1740} 1741 1742.base-restaurant-info { 1743 display: flex; 1744 flex-direction: column; 1745 align-items: center; 1746 text-align: center; 1747 gap: 25px; 1748 flex: 1; 1749 padding: 0 20px; 1750 height: 100%; 1751} 1752 1753.base-restaurant-logo { 1754 display: flex; 1755 flex-direction: column; 1756 align-items: center; 1757 text-align: center; 1758 gap: 8px; 1759 height: 150px; 1760 justify-content: center; 1761} 1762 1763.base-restaurant-logo img { 1764 object-fit: contain; 1765} 1766 1767.base-logo-name { 1768 display: block; 1769 height: 45px; 1770 max-width: 200px; 1771 width: auto; 1772} 1773 1774.base-vollegas-info .base-logo-name { 1775 max-width: 190px; 1776} 1777 1778.base-logo-miroir { 1779 max-width: 200px; 1780} 1781 1782.base-logo-illustration { 1783 display: block; 1784 height: 90px; 1785 width: auto; 1786} 1787 1788.base-restaurant-address p { 1789 margin: 0; 1790 font-family: 'Lora', serif; 1791 font-style: italic; 1792 font-weight: 500; 1793 font-size: 16px; 1794 line-height: 140.62%; 1795 color: var(--text-dark); 1796} 1797 1798.base-restaurant-actions { 1799 display: flex; 1800 flex-direction: column; 1801 gap: 12px; 1802 width: 100%; 1803 max-width: 200px; 1804 margin-top: auto; 1805} 1806 1807/* Volle Gas specific styling */ 1808.base-vollegas-info .base-restaurant-address p { 1809 color: #CD4D37; 1810} 1811 1812/* Miroir specific styling */ 1813.base-miroir-info .base-restaurant-address p { 1814 color: #E79C4A; 1815} 1816 1817.base-vertical-separator { 1818 display: flex; 1819 flex-direction: column; 1820 align-items: center; 1821 justify-content: center; 1822 padding: 20px 0; 1823 min-width: 80px; 1824} 1825 1826.base-separator-line { 1827 flex: 1; 1828 width: 1px; 1829 background: linear-gradient(to bottom, transparent, #d4af37, transparent); 1830 min-height: 60px; 1831} 1832 1833.base-separator-text { 1834 margin: 15px 0; 1835 font-family: 'Lora', serif; 1836 font-style: italic; 1837 font-weight: 500; 1838 font-size: 14px; 1839 line-height: 140.62%; 1840 color: var(--text-dark); 1841 text-transform: uppercase; 1842 letter-spacing: 1px; 1843} 1844 1845/* Mobile Responsive */ 1846@media (max-width: 768px) { 1847 .base-popup { 1848 width: 95%; 1849 margin: 20px; 1850 max-height: calc(100vh - 40px); 1851 } 1852 1853 .base-popup-content { 1854 padding: 20px 15px; 1855 } 1856 1857 .base-popup-colored-header { 1858 padding: 20px 15px; 1859 padding-top: 50px; /* Extra space for close button */ 1860 } 1861 1862 .base-popup-colored-header .base-popup-title { 1863 font-size: 24px; 1864 margin-bottom: 10px; 1865 } 1866 1867 .base-popup-subtitle { 1868 font-size: 16px; 1869 } 1870 1871 .base-popup-title { 1872 font-size: 24px; 1873 } 1874 1875 /* Switch to vertical layout on mobile */ 1876 .base-restaurants-selection { 1877 flex-direction: column; 1878 gap: 25px; 1879 } 1880 1881 .base-restaurant-info { 1882 gap: 12px; 1883 padding: 0; 1884 } 1885 1886 /* Change vertical separator to horizontal on mobile */ 1887 .base-vertical-separator { 1888 flex-direction: row; 1889 padding: 0 40px; 1890 min-width: auto; 1891 min-height: auto; 1892 margin: 10px 0; 1893 } 1894 1895 .base-separator-line { 1896 flex: 1; 1897 width: auto; 1898 height: 1px; 1899 background: linear-gradient(to right, transparent, #d4af37, transparent); 1900 min-height: auto; 1901 } 1902 1903 .base-separator-text { 1904 margin: 0 15px; 1905 font-size: 12px; 1906 } 1907} 1908 1909@media (max-width: 480px) { 1910 1911 .base-popup-content { 1912 padding: 15px 10px; 1913 } 1914 1915 .base-popup-colored-header { 1916 padding: 20px 10px; 1917 padding-top: 50px; /* Extra space for close button */ 1918 } 1919 1920 .base-popup-colored-header .base-popup-title { 1921 font-size: 20px; 1922 margin-bottom: 12px; 1923 } 1924 1925 .base-popup-subtitle { 1926 font-size: 14px; 1927 } 1928 1929 .base-popup-title { 1930 font-size: 20px; 1931 } 1932 1933 .base-restaurant-info { 1934 gap: 12px; 1935 } 1936 1937 .base-vertical-separator { 1938 padding: 0 20px; 1939 } 1940 1941 .base-separator-text { 1942 margin: 0 10px; 1943 } 1944} 1945 1946/* Logo responsiveness for tablets and mobile */ 1947@media (max-width: 1024px) { 1948 .base-logo-illustration { 1949 display: none; 1950 } 1951 1952 .base-logo-name { 1953 height: 45px; 1954 } 1955 1956 .base-restaurant-logo { 1957 height: 70px; 1958 } 1959 1960 .base-restaurant-info { 1961 gap: 20px; 1962 } 1963} 1964 1965/* Further adjustments for mobile */ 1966@media (max-width: 768px) { 1967 .base-logo-name { 1968 height: 40px; 1969 max-width: 180px; 1970 } 1971 1972 .base-restaurant-logo { 1973 height: 60px; 1974 } 1975 1976 .base-restaurant-info { 1977 gap: 15px; 1978 } 1979} 1980 1981/* Additional adjustments for small mobile screens */ 1982@media (max-width: 480px) { 1983 .base-logo-name { 1984 height: 35px; 1985 max-width: 150px; 1986 } 1987 1988 .base-restaurant-logo { 1989 height: 55px; 1990 } 1991} 1992</style> 1993 1994<style> 1995/* Group Popup Specific Styles */ 1996.group-popup-overlay .base-popup { 1997 max-width: 900px; 1998} 1999 2000.group-popup-overlay .base-popup-content { 2001 margin-bottom: 1rem; 2002} 2003 2004/* Group popup specific title styling is now handled in base-popup.php */ 2005 2006.group-action-btn { 2007 display: flex; 2008 align-items: center; 2009 justify-content: center; 2010 gap: 10px; 2011 padding: 12px 20px; 2012 border: 2px solid var(--text-dark); 2013 border-radius: 8px; 2014 background: transparent; 2015 color: var(--text-dark); 2016 font-family: 'Lora', serif; 2017 font-weight: 500; 2018 font-size: 14px; 2019 text-transform: uppercase; 2020 letter-spacing: 1px; 2021 cursor: pointer; 2022 transition: all 0.3s ease; 2023 text-decoration: none; 2024 width: 100%; 2025 min-height: 44px; 2026 box-sizing: border-box; 2027} 2028 2029.group-action-btn:hover { 2030 background: var(--text-dark); 2031 color: #FDF4E5; 2032 border-color: var(--text-dark); 2033} 2034 2035/* Volle Gas specific styling */ 2036.group-popup-overlay .base-vollegas-info .group-vollegas-menu,
2037.group-popup-overlay .base-vollegas-info .group-vollegas-custom { 2038 color: #CD4D37; 2039 border-color: #CD4D37; 2040} 2041 2042.group-popup-overlay .base-vollegas-info .group-vollegas-menu:hover, 2043.group-popup-overlay .base-vollegas-info .group-vollegas-custom:hover { 2044 background: #CD4D37; 2045 color: #FDF4E5; 2046 border-color: #CD4D37; 2047} 2048 2049/* Button type specific styling */ 2050.group-menu-btn { 2051 font-weight: 600; 2052} 2053 2054.group-custom-btn { 2055 font-weight: 400; 2056 font-style: italic; 2057} 2058 2059/* Disabled button styling */ 2060.group-action-btn.disabled { 2061 opacity: 0.5; 2062 cursor: not-allowed; 2063 pointer-events: none; 2064} 2065 2066.group-action-btn.disabled:hover { 2067 background: transparent; 2068 color: var(--text-dark); 2069 border-color: var(--text-dark); 2070} 2071 2072/* Mobile adjustments */ 2073@media (max-width: 768px) { 2074 .group-action-btn { 2075 padding: 10px 16px; 2076 font-size: 12px; 2077 min-height: 40px; 2078 } 2079} 2080 2081 2082</style> 2083 2084 <!-- Christmas Popup --> 2085 2086<div class="base-popup-overlay christmas-popup-overlay" id="christmasPopup"> 2087 <div class="base-popup"> 2088 <button class="base-popup-close" onclick="closeChristmasPopup()">×</button> 2089 <!-- Colored Header Section --> 2090 <div class="base-popup-colored-header"> 2091 <h2 class="base-popup-title">Noël & Nouvel An version 90 Folies</h2> 2092 <p class="base-popup-subtitle">Gourmand, festif, belge. Réservez votre réveillon avant les autres.</p> 2093 </div> 2094 2095 <div class="base-popup-content"> 2096 <div class="base-restaurants-selection"> 2097 <!-- Boemvol Restaurant --> 2098 <div class="base-restaurant-info"> 2099 <div class="base-restaurant-logo"> 2100 <img src="/images/boemvolName.svg" alt="Boemvol" class="base-logo-name"> 2101 <img src="/images/Bird.png" alt="" class="base-logo-illustration"> 2102 </div> 2103 <div class="base-restaurant-address"> 2104 <p>Rue Henri Maus 25<br>1000 Bruxelles</p> 2105 </div> 2106 <div class="base-restaurant-actions"> 2107 2108 <button class="christmas-action-btn christmas-menu-btn" onclick="openChristmasMenu('boemvol')">Menu</button> 2109 <div class="christmas-reservation-label">Réservations</div> 2110 <div class="christmas-reservation-buttons"> 2111 <button class="christmas-action-btn christmas-reserve-btn" onclick="openChristmasReservation('boemvol', 'christmas');">Noël</button> 2112 <button class="christmas-action-btn christmas-reserve-btn" onclick="openChristmasReservation('boemvol', 'newyear');">Nouvel An</button> 2113 </div> 2114 </div> 2115 </div> 2116 2117 <!-- Vertical Separator --> 2118 <div class="base-vertical-separator"> 2119 <div class="base-separator-line"></div> 2120 <span class="base-separator-text">ou</span> 2121 <div class="base-separator-line"></div> 2122 </div> 2123 2124 <!-- Volle Gas Restaurant --> 2125 <div class="base-restaurant-info base-vollegas-info" > 2126 <div class="base-restaurant-logo"> 2127 <img src="/images/vollegasName.svg" alt="Volle Gas" class="base-logo-name"> 2128 <img src="/images/Umbrella.png" alt="" class="base-logo-illustration"> 2129 </div> 2130 <div class="base-restaurant-address"> 2131 <p>Pl. Fernand Cocq 21<br>1050 Ixelles</p> 2132 </div> 2133 <div class="base-restaurant-actions"> 2134 2135 <button class="christmas-action-btn christmas-menu-btn christmas-vollegas-menu" onclick="openChristmasMenu('vollegas')">Menu</button> 2136 <div class="christmas-reservation-label">Réservations</div> 2137 <div class="christmas-reservation-buttons"> 2138 <button class="christmas-action-btn christmas-reserve-btn christmas-vollegas-reserve" onclick="openChristmasReservation('vollegas', 'christmas');">Noël</button> 2139 <button class="christmas-action-btn christmas-reserve-btn christmas-vollegas-reserve" onclick="openChristmasReservation('vollegas', 'newyear');">Nouvel An</button> 2140 </div> 2141 </div> 2142 </div> 2143 2144 <!-- Vertical Separator --> 2145 <div class="base-vertical-separator"> 2146 <div class="base-separator-line"></div>
2147 <span class="base-separator-text">ou</span> 2148 <div class="base-separator-line"></div> 2149 </div> 2150 2151 <!-- Miroir Restaurant --> 2152 <div class="base-restaurant-info base-miroir-info"> 2153 <div class="base-restaurant-logo"> 2154 <img src="/images/miroirName.svg" alt="Miroir" class="base-logo-name base-logo-miroir"> 2155 <img src="/images/miroir/bird.png" alt="" class="base-logo-illustration"> 2156 </div> 2157 <div class="base-restaurant-address"> 2158 <p>Pl. Reine Astrid 24<br>1090 Jette</p> 2159 </div> 2160 <div class="base-restaurant-actions"> 2161 2162 <button class="reservation-action-btn reservation-miroir-btn" onclick="handleMiroirReservation()">RÃSERVER</button> 2163 </div> 2164 </div> 2165 </div> 2166 </div> 2167 </div> 2168</div> 2169 2170<style> 2171/* Base Popup Styles */ 2172.base-popup-overlay { 2173 position: fixed; 2174 top: 0; 2175 left: 0; 2176 width: 100%; 2177 height: 100%; 2178 background: rgba(0, 0, 0, 0.8); 2179 z-index: 10000; 2180 display: none; 2181 align-items: center; 2182 justify-content: center; 2183 backdrop-filter: blur(5px); 2184} 2185 2186.base-popup-overlay.active { 2187 display: flex; 2188} 2189 2190.base-popup { 2191 background: #f8f6f0; 2192 border-radius: 20px; 2193 max-width: 900px; 2194 width: 90%; 2195 max-height: 90vh; 2196 overflow-y: auto; 2197 position: relative; 2198 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 2199 font-family: 'Lora', serif; 2200} 2201 2202.base-popup-close { 2203 position: absolute; 2204 top: 20px; 2205 right: 20px; 2206 background: none; 2207 border: none; 2208 font-size: 32px; 2209 cursor: pointer; 2210 color: white; 2211 z-index: 10001; 2212 width: 40px; 2213 height: 40px; 2214 display: flex; 2215 align-items: center; 2216 justify-content: center; 2217 border-radius: 50%; 2218 transition: all 0.3s ease; 2219} 2220 2221.base-popup-close:hover { 2222 background: rgba(255, 255, 255, 0.2); 2223 transform: rotate(90deg); 2224} 2225 2226.base-popup-content { 2227 padding: 25px; 2228} 2229 2230.base-popup-header { 2231 text-align: center; 2232 margin-bottom: 40px; 2233} 2234 2235/* Colored Header Styles */ 2236.base-popup-colored-header { 2237 background: #193922; 2238 padding: 25px; 2239 text-align: center; 2240 border-radius: 20px 20px 0 0; 2241} 2242 2243.base-popup-colored-header .base-popup-title { 2244 font-family: 'Lora', serif; 2245 font-style: italic; 2246 font-weight: 400; 2247 font-size: 28px; 2248 line-height: 140.62%; 2249 color: white; 2250 margin: 0 0 12px 0; 2251 max-width: 600px; 2252 margin-left: auto; 2253 margin-right: auto; 2254} 2255 2256.base-popup-subtitle { 2257 font-family: 'Lora', serif; 2258 font-style: italic; 2259 font-weight: 400; 2260 font-size: 18px; 2261 line-height: 140.62%; 2262 color: white; 2263 margin: 0; 2264 max-width: 600px; 2265 margin-left: auto; 2266 margin-right: auto; 2267} 2268 2269/* Default title styles for non-colored headers */ 2270.base-popup-title { 2271 font-family: 'Lora', serif; 2272 font-style: italic; 2273 font-weight: 400; 2274 font-size: 28px; 2275 line-height: 140.62%; 2276 color: black; 2277 margin: 0; 2278 max-width: 600px; 2279 margin-left: auto; 2280 margin-right: auto; 2281} 2282 2283.base-restaurants-selection { 2284 display: flex; 2285 flex-direction: row; 2286 align-items: stretch; 2287 gap: 0; 2288 margin-top: 0; 2289} 2290 2291.base-restaurant-info { 2292 display: flex; 2293 flex-direction: column; 2294 align-items: center; 2295 text-align: center; 2296 gap: 25px; 2297 flex: 1; 2298 padding: 0 20px; 2299 height: 100%; 2300} 2301 2302.base-restaurant-logo { 2303 display: flex; 2304 flex-direction: column; 2305 align-items: center; 2306 text-align: center; 2307 gap: 8px; 2308 height: 150px; 2309 justify-content: center; 2310} 2311 2312.base-restaurant-logo img { 2313 object-fit: contain; 2314} 2315 2316.base-logo-name { 2317 display: block; 2318 height: 45px; 2319 max-width: 200px; 2320 width: auto; 2321} 2322 2323.base-vollegas-info .base-logo-name { 2324 max-width: 190px; 2325} 2326 2327.base-logo-miroir { 2328 max-width: 200px; 2329} 2330 2331.base-logo-illustration { 2332 display: block; 2333 height: 90px; 2334 width: auto; 2335} 2336 2337.base-restaurant-address p { 2338 margin: 0; 2339 font-family: 'Lora', serif; 2340 font-style: italic; 2341 font-weight: 500; 2342 font-size: 16px; 2343 line-height: 140.62%; 2344 color: var(--text-dark); 2345} 2346 2347.base-restaurant-actions { 2348 display: flex; 2349 flex-direction: column; 2350 gap: 12px; 2351 width: 100%; 2352 max-width: 200px; 2353 margin-top: auto; 2354} 2355 2356/* Volle Gas specific styling */ 2357.base-vollegas-info .base-restaurant-address p { 2358 color: #CD4D37; 2359} 2360 2361/* Miroir specific styling */ 2362.base-miroir-info .base-restaurant-address p { 2363 color: #E79C4A; 2364} 2365 2366.base-vertical-separator { 2367 display: flex; 2368 flex-direction: column; 2369 align-items: center; 2370 justify-content: center; 2371 padding: 20px 0; 2372 min-width: 80px; 2373} 2374 2375.base-separator-line { 2376 flex: 1; 2377 width: 1px; 2378 background: linear-gradient(to bottom, transparent, #d4af37, transparent); 2379 min-height: 60px; 2380} 2381 2382.base-separator-text { 2383 margin: 15px 0; 2384 font-family: 'Lora', serif; 2385 font-style: italic; 2386 font-weight: 500; 2387 font-size: 14px; 2388 line-height: 140.62%; 2389 color: var(--text-dark); 2390 text-transform: uppercase; 2391 letter-spacing: 1px; 2392} 2393 2394/* Mobile Responsive */ 2395@media (max-width: 768px) { 2396 .base-popup { 2397 width: 95%; 2398 margin: 20px; 2399 max-height: calc(100vh - 40px); 2400 } 2401 2402 .base-popup-content { 2403 padding: 20px 15px; 2404 } 2405 2406 .base-popup-colored-header { 2407 padding: 20px 15px; 2408 padding-top: 50px; /* Extra space for close button */ 2409 } 2410 2411 .base-popup-colored-header .base-popup-title { 2412 font-size: 24px; 2413 margin-bottom: 10px; 2414 } 2415 2416 .base-popup-subtitle { 2417 font-size: 16px; 2418 } 2419 2420 .base-popup-title { 2421 font-size: 24px; 2422 } 2423 2424 /* Switch to vertical layout on mobile */ 2425 .base-restaurants-selection { 2426 flex-direction: column; 2427 gap: 25px; 2428 } 2429 2430 .base-restaurant-info { 2431 gap: 12px; 2432 padding: 0; 2433 } 2434 2435 /* Change vertical separator to horizontal on mobile */ 2436 .base-vertical-separator { 2437 flex-direction: row; 2438 padding: 0 40px; 2439 min-width: auto; 2440 min-height: auto; 2441 margin: 10px 0; 2442 } 2443 2444 .base-separator-line { 2445 flex: 1; 2446 width: auto; 2447 height: 1px; 2448 background: linear-gradient(to right, transparent, #d4af37, transparent); 2449 min-height: auto; 2450 } 2451 2452 .base-separator-text { 2453 margin: 0 15px; 2454 font-size: 12px; 2455 } 2456} 2457 2458@media (max-width: 480px) { 2459 2460 .base-popup-content { 2461 padding: 15px 10px; 2462 } 2463 2464 .base-popup-colored-header { 2465 padding: 20px 10px; 2466 padding-top: 50px; /* Extra space for close button */ 2467 } 2468 2469 .base-popup-colored-header .base-popup-title { 2470 font-size: 20px; 2471 margin-bottom: 12px; 2472 } 2473 2474 .base-popup-subtitle { 2475 font-size: 14px; 2476 } 2477 2478 .base-popup-title { 2479 font-size: 20px; 2480 } 2481 2482 .base-restaurant-info { 2483 gap: 12px; 2484 } 2485 2486 .base-vertical-separator { 2487 padding: 0 20px; 2488 } 2489 2490 .base-separator-text { 2491 margin: 0 10px; 2492 } 2493} 2494 2495/* Logo responsiveness for tablets and mobile */ 2496@media (max-width: 1024px) { 2497 .base-logo-illustration { 2498 display: none; 2499 } 2500 2501 .base-logo-name { 2502 height: 45px; 2503 } 2504 2505 .base-restaurant-logo { 2506 height: 70px; 2507 } 2508 2509 .base-restaurant-info { 2510 gap: 20px; 2511 } 2512} 2513 2514/* Further adjustments for mobile */ 2515@media (max-width: 768px) { 2516 .base-logo-name { 2517 height: 40px; 2518 max-width: 180px; 2519 } 2520 2521 .base-restaurant-logo { 2522 height: 60px; 2523 } 2524 2525 .base-restaurant-info { 2526 gap: 15px; 2527 } 2528} 2529 2530/* Additional adjustments for small mobile screens */ 2531@media (max-width: 480px) { 2532 .base-logo-name { 2533 height: 35px; 2534 max-width: 150px; 2535 } 2536 2537 .base-restaurant-logo { 2538 height: 55px; 2539 } 2540} 2541</style> 2542 2543<style> 2544/* Christmas Popup Specific Styles */ 2545.christmas-popup-overlay .base-popup { 2546 max-width: 700px; 2547} 2548 2549/* Override base styles for christmas popup - only on desktop */ 2550@media (min-width: 1025px) { 2551 .christmas-popup-overlay .base-logo-illustration { 2552 height: 120px; 2553 } 2554 2555 .christmas-popup-overlay .base-restaurant-logo { 2556 height: 200px; 2557 } 2558} 2559 2560.christmas-action-btn { 2561 display: flex; 2562 align-items: center; 2563 justify-content: center; 2564 gap: 10px; 2565 padding: 12px 20px; 2566 border: 2px solid var(--text-dark); 2567 border-radius: 8px; 2568 background: transparent; 2569 color: var(--text-dark); 2570 font-family: 'Lora', serif; 2571 font-weight: 500; 2572 font-size: 14px; 2573 text-transform: uppercase; 2574 letter-spacing: 1px; 2575 cursor: pointer; 2576 transition: all 0.3s ease; 2577 text-decoration: none; 2578 min-height: 45px; 2579} 2580 2581.christmas-action-btn:hover { 2582 background: var(--text-dark); 2583 color: #FDF4E5; 2584 border-color: var(--text-dark); 2585} 2586 2587/* Menu button specific styling */ 2588.christmas-menu-btn { 2589 background: var(--text-dark); 2590 color: #FDF4E5; 2591} 2592 2593.christmas-menu-btn:hover { 2594 background: transparent; 2595 color: var(--text-dark); 2596} 2597 2598/* Volle Gas specific styling */ 2599.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-menu { 2600 background: #CD4D37; 2601 border-color: #CD4D37; 2602 color: #FDF4E5; 2603} 2604 2605.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-menu:hover { 2606 background: transparent; 2607 color: #CD4D37; 2608 border-color: #CD4D37; 2609} 2610 2611.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-reserve { 2612 color: #CD4D37; 2613 border-color: #CD4D37; 2614} 2615 2616.christmas-popup-overlay .base-vollegas-info .christmas-vollegas-reserve:hover { 2617 background: #CD4D37; 2618 color: #FDF4E5; 2619 border-color: #CD4D37; 2620} 2621 2622/* Reservation label */ 2623.christmas-reservation-label { 2624 font-family: 'Lora', serif; 2625 font-style: italic; 2626 font-weight: 500; 2627 font-size: 14px; 2628 color: var(--text-dark); 2629 text-align: center; 2630 display: flex; 2631 align-items: center; 2632 gap: 10px; 2633} 2634 2635.christmas-reservation-label::before, 2636.christmas-reservation-label::after { 2637 content: ''; 2638 flex: 1; 2639 height: 1px; 2640 background: var(--text-dark); 2641 opacity: 0.3; 2642} 2643 2644.christmas-popup-overlay .base-vollegas-info .christmas-reservation-label { 2645 color: #CD4D37; 2646} 2647 2648.christmas-popup-overlay .base-vollegas-info .christmas-reservation-label::before, 2649.christmas-popup-overlay .base-vollegas-info .christmas-reservation-label::after { 2650 background: #CD4D37; 2651} 2652 2653/* Reservation buttons container */ 2654.christmas-reservation-buttons { 2655 display: flex; 2656 flex-direction: column; 2657 gap: 8px; 2658 width: 100%; 2659} 2660 2661.christmas-reservation-buttons .christmas-action-btn { 2662 width: 100%; 2663 font-size: 13px; 2664 padding: 10px 12px; 2665} 2666</style> 2667 2668 2669 2670</body> 2671</html> <!-- Hero Section --> 2672<section class="hero" id="accueil"> 2673 <div class="hero-content"> 2674 <div class="hero-logo"> 2675 <img src="./images/VolleGasLogo.svg" alt="Volle Gas"> 2676 </div> 2677 2678 <p>
2678Brasserie conviviale à Place Fernand Cocq</p> 2679 </div> 2680 <div class="scroll-nav"> 2681 <div class="scroll-text"> 2682 <span>brasserie</span> 2683 <span>·</span> 2684 <span>restaurant</span> 2685 <span>·</span> 2686 <span>belgian</span> 2687 <span>·</span> 2688 <span>food</span> 2689 <span>·</span> 2690 <span>drinks</span> 2691 <span>·</span> 2692 <span>brasserie</span> 2693 <span>·</span> 2694 <span>restaurant</span> 2695 <span>·</span> 2696 <span>belgian</span> 2697 <span>·</span> 2698 <span>food</span> 2699 <span>·</span> 2700 <span>drinks</span> 2701 <span>·</span> 2702 <span>brasserie</span> 2703 <span>·</span> 2704 <span>restaurant</span> 2705 <span>·</span> 2706 <span>belgian</span> 2707 <span>·</span> 2708 <span>food</span> 2709 <span>·</span> 2710 <span>drinks</span> 2711 <span>·</span> 2712 <span>brasserie</span> 2713 <span>·</span> 2714 <span>restaurant</span> 2715 <span>·</span> 2716 <span>belgian</span> 2717 <span>·</span> 2718 <span>food</span> 2719 <span>·</span> 2720 <span>drinks</span> 2721 <span>·</span> 2722 <span>brasserie</span> 2723 <span>·</span> 2724 <span>restaurant</span> 2725 <span>·</span> 2726 <span>belgian</span> 2727 <span>·</span> 2728 <span>food</span> 2729 <span>·</span> 2730 <span>drinks</span> 2731 <span>·</span> 2732 <span>brasserie</span> 2733 <span>·</span> 2734 <span>restaurant</span> 2735 <span>·</span> 2736 <span>belgian</span> 2737 <span>·</span> 2738 <span>food</span> 2739 <span>·</span> 2740 <span>drinks</span> 2741 <span>·</span> 2742 <span>brasserie</span> 2743 <span>·</span> 2744 <span>restaurant</span> 2745 <span>·</span> 2746 <span>belgian</span> 2747 <span>·</span> 2748 <span>food</span> 2749 <span>·</span> 2750 <span>drinks</span> 2751 <span>·</span> 2752 <span>brasserie</span> 2753 <span>·</span> 2754 <span>restaurant</span> 2755 <span>·</span> 2756 <span>belgian</span> 2757 <span>·</span> 2758 <span>food</span> 2759 <span>·</span> 2760 <span>drinks</span> 2761 <span>·</span> 2762 </div> 2763 </div> 2764</section> 2765<!-- Zenchef Widget SDK for Vollegas -->
2766<script>;(function (d, s, id) {const el = d.getElementsByTagName(s)[0]; if (d.getElementById(id) || el.parentNode == null) {return;} var js = d.createElement(s); js.id = id; js.async = true; js.src = 'https://sdk.zenchef.com/v1/sdk.min.js'; el.parentNode.insertBefore(js, el); })(document, 'script', 'zenchef-sdk')</script>
2766 2767<div 2768 class="zc-widget-config" 2769 data-restaurant="367103" 2770 data-open="2000"></div> 2771 2772 <!-- Volle Gas About Section --> 2773 <section class="boemvol-about" id="vollgas-about"> 2774 <div class="boemvol-about-content"> 2775 <div class="coin-overlay"> 2776 <img src="./images/Coin.png" alt="Coin" /> 2777 </div> 2778 <div class="boemvol-about-text"> 2779 <h2>Ixelles,<br>ma belle</h2> 2780 <p>Des classiques belges ont trouvé leurs nouveau QG : Place Fernand Cocq. Les plats qu'on aime, les potes autour, et la terrasse qui va avec.</p> 2781 2782 <div class="restaurant-hours"> 2783 <p class="hours-line">LUN - SAM : 12:00 - 22:30</p> 2784 <p class="hours-line">DIM : 10:00 - 22:30</p> 2785 </div> 2786 2787 <div class="restaurant-buttons"> 2788 <button class="restaurant-btn" onclick="openMenuPopup(event)">Menu</button> 2789 <button class="restaurant-btn" data-zc-action="open" onclick="trackReservationWidgetOpened('direct_button')">RÃSERVER</button> 2790 </div> 2791 </div> 2792 <div class="boemvol-about-image"> 2793 <img src="./images/terasse-cut_compressed.jpg" alt="Terasse Vollegas" /> 2794 </div> 2795 </div> 2796 </section> 2797 2798 <!-- Special Events Section --> 2799 <section class="special-events" id="special-events"> 2800 <div class="special-events-content"> 2801 <div class="events-card"> 2802 <div class="snail-icon"> 2803 <img src="./images/snail_compressed.png" alt="Snail" /> 2804 </div> 2805 <h2>Un dîner d'entreprise, un anniversaire<br>ou toute autre occasion spéciale ?</h2> 2806 <p>Organisez votre événement chez nous et profitez d'un moment inoubliable.</p> 2807 <a href="https://groupes.90folies.com" target="_blank" rel="noopener" class="events-btn">LET'S GO !</a> 2808 </div> 2809 </div> 2810 </section> 2811 2812<!-- Gallery --> 2813 2814<section class="gallery-section"> 2815 <div class="gallery-container"> 2816 <h2 class="gallery-title">Notre Galerie</h2> 2817 <div class="gallery-grid" id="galleryGrid" data-gallery-path="gallery-vollegas"> 2818 <!-- Images will be dynamically loaded here --> 2819 </div> 2820 </div> 2821 2822 <!-- Pass gallery images to JavaScript --> 2823
2823<script> 2824 window.galleryImages = [{"thumb":"WhatsApp Image 2025-09-23 at 09.44.27 (1)_compressed.jpeg","full":"originals\/WhatsApp Image 2025-09-23 at 09.44.27 (1).jpeg"},{"thumb":"WhatsApp Image 2025-09-23 at 09.44.27_compressed.jpeg","full":"originals\/WhatsApp Image 2025-09-23 at 09.44.27.jpeg"},{"thumb":"WhatsApp Image 2025-09-23 at 09.44.28_compressed.jpeg","full":"originals\/WhatsApp Image 2025-09-23 at 09.44.28.jpeg"},{"thumb":"d49a09cf-4b49-4759-90c9-f051d095dd9a_compressed.jpg","full":"originals\/d49a09cf-4b49-4759-90c9-f051d095dd9a.jpg"},{"thumb":"f5147353-0183-4812-9c17-c42313fd4c69_compressed.jpg","full":"originals\/f5147353-0183-4812-9c17-c42313fd4c69.jpg"},{"thumb":"terasse_compressed.jpeg","full":"originals\/terasse.jpeg"}]; 2825 window.galleryPath = "gallery-vollegas"; 2826 </script>
2826 2827 2828 <!-- Image popup modal --> 2829 <div class="gallery-modal" id="galleryModal"> 2830 <div class="modal-backdrop" id="modalBackdrop"></div> 2831 <div class="modal-content"> 2832 <button class="modal-close" id="modalClose">×</button> 2833 <div class="modal-image-wrap" id="modalImageWrap"> 2834 <img class="modal-image" id="modalImage" src="" alt=""> 2835 <div class="modal-image-loader"></div> 2836 </div> 2837 <div class="modal-nav"> 2838 <button class="modal-prev" id="modalPrev">‹</button> 2839 <button class="modal-next" id="modalNext">›</button> 2840 </div> 2841 <div class="modal-counter" id="modalCounter"></div> 2842 </div> 2843 </div> 2844</section> 2845<!-- Join Us Section --> 2846<section class="join-us"> 2847 <div class="join-us-box"> 2848 <div class="join-us-content"> 2849 <div class="join-us-text"> 2850 <div class="join-us-text-row"> 2851 <h2>Envie de nous rejoindre ?</h2> 2852 <p>Postule maintenant !</p> 2853 </div> 2854 <div class="join-us-buttons"> 2855 <a href="https://jobs.90folies.com/" target="_blank" class="join-btn primary">VOIR LES OFFRES</a> 2856 <a href="/contact" class="join-btn secondary">CANDIDATURE SPONTANÃE</a> 2857 </div> 2858 </div> 2859 <div class="join-us-image"> 2860 <img src="./images/Skate.png" alt="Skateboard" /> 2861 </div> 2862 </div> 2863 </div> 2864</section> 2865 <!-- Footer --> 2866 <footer class="footer"> 2867 <div class="footer-content"> 2868 <div class="footer-logo"> 2869 <img src="./images/Logo.svg" alt="nonante folies"> 2870 <div class="footer-legal-links"> 2871 <a href="/conditions">Conditions générales</a> 2872 <a href="/privacy">Politique de confidentialité</a> 2873 </div> 2874 <p>© Crédits photos/design</p> 2875 </div> 2876 <div class="footer-newsletter"> 2877 <h3>Newsletter</h3> 2878 <a href="https://projet-live.typeform.com/to/B2sNyLe2" target="_blank">Sois pas le dernier au courant</a> 2879 </div> 2880 <div class="footer-contact"> 2881 <h3>Contact</h3> 2882 <a href="/contact">Nous contacter</a> 2883 <p>Boemvol: +32 2 681 27 58</p> 2884 <p>Volle Gas: +32 2 502 89 17</p> 2885 <p>Miroir: +32 2 881 29 64</p> 2886 <div class="social-links"> 2887 <a href="https://instagram.com/nonantefolies" target="_blank" title="Instagram"> 2888 <svg class="instagram-icon" viewBox="0 0 24 24"> 2889 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.40s-.644-1.44-1.439-1.44z"/> 2890 </svg> 2891 </a> 2892 <a href="https://www.linkedin.com/company/90-folies/" target="_blank" title="LinkedIn">
2893 <svg class="linkedin-icon" viewBox="0 0 24 24"> 2894 <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> 2895 </svg> 2896 </a> 2897 </div> 2898 </div> 2899 </div> 2900 </footer> 2901 2902
2902<script src="./js/scripts.js"></script>
2902 2903</body> 2904</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.