1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta name="author" content="Wolf and Lamb" /> 8 9 <!-- Stylesheets --> 10 <link rel="stylesheet" href="/css/main.css" /> 11 <link rel="stylesheet" href="/css/header.css" /> 12 <link rel="stylesheet" href="/css/hero.css" /> 13 <link rel="stylesheet" href="/css/services.css" /> 14 <link rel="stylesheet" href="/css/how-we-work.css" /> 15 <link rel="stylesheet" href="/css/logo.css" /> 16 <link rel="stylesheet" href="/css/client-carousel.css" /> 17 <link rel="stylesheet" href="/css/carousel.css" /> 18 <link rel="stylesheet" href="/css/footer.css" /> 19 <link rel="stylesheet" href="/css/video-intro.css" /> 20 <link rel="stylesheet" href="/css/virtual-kitchen.css"> 21 <link rel="stylesheet" href="/css/banner-image.css"> 22 <link rel="stylesheet" href="/css/virtual-banner.css"> 23 <link rel="stylesheet" href="/css/scroll-gallery.css"> 24 <link rel="stylesheet" href="/css/allergen-scan.css"> 25 <link rel="stylesheet" href="/css/lunch-box-scroll.css"> 26 <link rel="stylesheet" href="/css/breakfast-pots-spin.css"> 27 <link rel="stylesheet" href="/css/dessert-pots-spin.css"> 28 <link rel="stylesheet" href="/css/platters-banner.css"> 29 <link rel="stylesheet" href="/css/sandwich-scroll.css"> 30 31 32 33 <!-- Fonts --> 34 <link rel="preconnect" href="https://fonts.googleapis.com" /> 35 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 36 <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" /> 37 38 <title>Wolf and Lamb - A Catering Co.</title> 39 40 <!-- Favicon --> 41 <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" /> 42 <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" /> 43 <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" /> 44 <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" /> 45 <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" /> 46 <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" /> 47 <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" /> 48 <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" /> 49 <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" /> 50 <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png" /> 51 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" /> 52 <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png" /> 53 <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" /> 54 55 <!-- HammerJS --> 56
56<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
56 57</head> 58 59<body class="dark-page"> 60 61 62 <header> 63 64 65 66
67<script> 68 (function() { 69 try { 70 const alerts = [{ 71 id: 'aw-menu', 72 text: 'AW26 menu now live', 73 linkText: 'View menu', 74 linkHref: '/menu?category=seasonal-lunch' 75 }, 76 { 77 id: 'last-minute', 78 text: 'Last-minute catering available - cut-off 11am the day before delivery', 79 linkText: 'Enquire', 80 linkHref: '/contact' 81 } 82 ]; 83 84 const index = Number(sessionStorage.getItem('alertIndex') || 0); 85 const current = alerts[index % alerts.length]; 86 87 // Store current alert so PHP/JS can read it 88 window.__GLOBAL_ALERT__ = current; 89 90 // If THIS alert was dismissed, hide it before paint 91 if (sessionStorage.getItem('alertDismissed:' + current.id) === '1') { 92 document.documentElement.classList.add('alert-dismissed'); 93 } 94 } catch (e) {} 95 })(); 96</script>
96 97 98 99<header class="site-header has-alert"> 100 101 <div class="global-alert" id="global-alert" role="status"> 102 <div class="container"> 103 <span id="alert-text"></span> 104 <a id="alert-link"></a> 105 106 <button class="alert-close" aria-label="Close alert">×</button> 107 </div> 108 </div> 109 110 111 112 113 <nav class="navbar" id="site-navbar"> 114 115 <div class="container"> 116 <a href="/" class="logo"> 117 <img class="logo-svg" src="/img/SVG/wolf-lamb-logo-black.svg" alt="Wolf & Lamb Logo"> 118 </a> 119 120 <div class="nav-links"> 121 122 <a class="scroll-link " href="/">bespoke</a> 123 124 <a class="selected" href="/virtual-kitchen">virtual kitchen</a> 125 126 <a class="" href="/menu">menu</a> 127 128 <a class="" href="/on-location">on-location</a> 129 130 <a class="" href="/inside">inside?</a> 131 132 <a class="" href="/sustainability">sustainability</a> 133 134 <a class="" href="/contact">contact</a> 135 </div> 136 <div class="nav-right"> 137 138 139 <a href="/make-an-enquiry"> 140 <button class="nav-button"> 141 Make An Enquiry 142 </button> 143 </a> 144 145 </div> 146 </div> 147 148 <div class="hamburger" id="hamburger-menu"> 149 <div></div> 150 <div></div> 151 <div></div> 152 </div> 153 </nav> 154 155</header> 156 157 158
159<script> 160 (function() { 161 function isVisible(el) { 162 if (!el) return false; 163 const rect = el.getBoundingClientRect(); 164 const style = getComputedStyle(el); 165 return rect.height > 0 && style.display !== 'none' && style.visibility !== 'hidden'; 166 } 167 168 function setHeaderVars() { 169 const alertEl = document.getElementById('global-alert'); 170 const navEl = document.getElementById('site-navbar'); 171 172 const alertH = isVisible(alertEl) ? alertEl.getBoundingClientRect().height : 0; 173 const navH = navEl ? navEl.getBoundingClientRect().height : 0; 174 175 document.documentElement.style.setProperty('--global-alert-h', alertH + 'px'); 176 document.documentElement.style.setProperty('--header-offset', (alertH + navH) + 'px'); 177 } 178 179 // Run now + next frame 180 setHeaderVars(); 181 requestAnimationFrame(setHeaderVars); 182 183 // Fonts/images can change heights 184 if (document.fonts && document.fonts.ready) { 185 document.fonts.ready.then(setHeaderVars); 186 } 187 window.addEventListener('load', setHeaderVars); 188 window.addEventListener('resize', setHeaderVars); 189 190 // If alert text wraps / changes, keep it accurate 191 const alertEl = document.getElementById('global-alert'); 192 if (alertEl && 'ResizeObserver' in window) { 193 const ro = new ResizeObserver(setHeaderVars); 194 ro.observe(alertEl); 195 } 196 })(); 197</script>
197 198 199 200 201 202
203<script> 204 function adjustNavLinksMargin() { 205 if (window.innerWidth < 800) { 206 const navRight = document.querySelector('.nav-right'); 207 const navLinks = document.querySelector('.nav-links'); 208 209 // Get the height of nav-right and apply it as margin-top to nav-links 210 if (navRight && navLinks) { 211 const height = navRight.offsetHeight; 212 navLinks.style.marginTop = height + 'px'; 213 console.log("its happening") 214 } 215 } else { 216 // If the width is greater than 800px, reset the margin-top 217 const navLinks = document.querySelector('.nav-links'); 218 if (navLinks) { 219 navLinks.style.marginTop = '0'; 220 } 221 } 222 } 223 document.addEventListener('DOMContentLoaded', function() { 224 225 226 227 var hamburgerMenu = document.getElementById('hamburger-menu'); 228 hamburgerMenu.addEventListener('click', function() { 229 var links = document.querySelector('.nav-links'); 230 var rightLinks = document.querySelector('.nav-right'); 231 var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 232 233 // Toggle '.active' class for .nav-links regardless of screen width 234 links.classList.toggle('active'); 235 236 // Under 800px, also toggle '.active' for .nav-right 237 if (screenWidth < 800) { 238 rightLinks.classList.toggle('active'); 239 } 240 adjustNavLinksMargin(); 241 242 }); 243 244 245 246 // Event listener for nav-links for smooth scrolling 247 document.querySelectorAll('.scroll-link').forEach(link => { 248 link.addEventListener('click', function(event) { 249 // Check if the href attribute of the clicked link starts with '#' 250 if (this.getAttribute('href').startsWith('#')) { 251 // Prevent the default link behavior 252 event.preventDefault(); 253 // Retrieve the element corresponding to the ID 254 const targetId = this.getAttribute('href'); 255 const targetElement = document.querySelector(targetId); 256 // Scroll to the target element 257 if (targetElement) { 258 targetElement.scrollIntoView({ 259 behavior: 'smooth', 260 block: 'start' 261 }); 262 } 263 // If the nav-links are displayed as a dropdown on mobile view, toggle 'active' class to close the dropdown 264 if (window.innerWidth < 800) { 265 var links = document.querySelector('.nav-links'); 266 var rightLinks = document.querySelector('.nav-right'); 267 links.classList.remove('active'); 268 rightLinks.classList.remove('active'); 269 } 270 } 271 }); 272 }); 273 }); 274 275 window.addEventListener('resize', function() { 276 var links = document.querySelector('.nav-links'); 277 var rightLinks = document.querySelector('.nav-right'); 278 // Remove the 'active' class if it exists 279 if (links.classList.contains('active')) { 280 links.classList.remove('active'); 281 } 282 if (rightLinks.classList.contains('active')) { 283 rightLinks.classList.remove('active'); 284 } 285 adjustNavLinksMargin(); 286 }); 287 288 function debounce(func, wait, immediate) { 289 var timeout; 290 return function() { 291 var context = this, 292 args = arguments; 293 var later = function() { 294 timeout = null; 295 if (!immediate) func.apply(context, args); 296 }; 297 var callNow = immediate && !timeout; 298 clearTimeout(timeout); 299 timeout = setTimeout(later, wait); 300 if (callNow) func.apply(context, args); 301 }; 302 }; 303 304 var handleResize = debounce(function() { 305 var links = document.querySelector('.nav-links'); 306 var rightLinks = document.querySelector('.nav-right'); 307 links.classList.remove('active'); 308 rightLinks.classList.remove('active'); 309 }, 250); 310 311 window.addEventListener('resize', handleResize); 312 313 document.addEventListener('DOMContentLoaded', function() { 314 const navbar = document.querySelector('.navbar'); 315 316 function checkScroll() { 317 if (window.scrollY > 100) { 318 navbar.classList.add('scrolled'); 319 } else { 320 navbar.classList.remove('scrolled'); 321 } 322 } 323 324 window.addEventListener('scroll', checkScroll); 325 }); 326 327 function debounce(func, wait) { 328 let timeout; 329 return function() { 330 const context = this, 331 args = arguments; 332 clearTimeout(timeout); 333 timeout = setTimeout(() => {
334 func.apply(context, args); 335 }, wait); 336 }; 337 } 338 339 document.addEventListener('DOMContentLoaded', function() { 340 const navbar = document.querySelector('.navbar'); 341 342 const checkScroll = debounce(function() { 343 if (window.scrollY > 100) { 344 navbar.classList.add('scrolled'); 345 } else { 346 navbar.classList.remove('scrolled'); 347 } 348 }, 10); // Adjust debounce time as needed 349 350 window.addEventListener('scroll', checkScroll); 351 }); 352</script>
352 </header> 353 354 <main> 355 <section class="hero "> 356<div class="container"> 357<div class="hero-fill"></div> 358 <div class="hero-content fade-in-viewport"> 359 <h4 class="highlight">Elevate Your Workplace Catering Experience</h4> 360 <h1>Our New Virtual Kitchen Service</h1> 361 <p>Welcome to Wolf and Lamb's brand new Virtual Kitchen delivery service - delivering fresh, seasonal, nutritional food directly to your office or meeting room. Order today to get your membership discounts.</p> 362 <a href="/make-an-enquiry" class="primary-button">Enquire Now</a> 363 </div> 364 <picture class="fade-in-viewport"> 365 <source media="(max-width: 1024px)" srcset="../img/hero-small.png"> 366 <source media="(min-width: 1025px)" srcset="../img/hero.png"> 367 <img src=".../img/hero.png" alt="Delicious Food"> 368 </picture> 369 </div> 370 </div> 371</section> 372 373 <div class="client-carousel-container"> 374 <div class="client-carousel" id="client-carousel"></div> 375</div> 376
377<script> 378 // Fisher-Yates Shuffle 379 function shuffleArray(array) { 380 for (let i = array.length - 1; i > 0; i--) { 381 const j = Math.floor(Math.random() * (i + 1)); 382 [array[i], array[j]] = [array[j], array[i]]; 383 } 384 return array; 385 } 386 387 fetch('/get_images.php') 388 .then(res => res.json()) 389 .then(images => { 390 const container = document.getElementById('client-carousel'); 391 392 // â Shuffle the image order before rendering 393 shuffleArray(images).forEach(url => { 394 const img = document.createElement('img'); 395 img.src = url; 396 img.alt = 'Client Logo'; 397 img.className = 'carousel-logo'; 398 container.appendChild(img); 399 }); 400 }); 401</script>
401 402 <section class="virtual-kitchen-banner"> 403 <div class="vk-content-wrapper"> 404 <!-- Text content --> 405 <div class="vk-text"> 406 <h2 class="fade-in-viewport">Seasonal meals,<br><strong>made fresh.</strong></h2> 407 <p class="fade-in-viewport"> 408 Delivered directly to your workplaceâ<br> 409 individually boxed, beautifully balanced,<br> 410 and designed for every dietary need. 411 </p> 412 <a href="/menu" 413 class="menu-link fade-in-viewport" 414 data-category="seasonal-lunch"> 415 View our menus 416 <span class="arrow">âº</span> 417 </a> 418 419 420 421 </div> 422 423 <!-- Visual content --> 424 <div class="vk-image-container"> 425 <div class="fade-in-viewport vk-green-bar bar-1 "></div> 426 <div class="fade-in-viewport vk-green-bar bar-2 "></div> 427 <img src="/img/virtual-kitchen/individual-pesce-lunch-box.jpg" alt="Wolf and Lamb Meal Pack" class="vk-image" /> 428 </div> 429 </div> 430</section> 431 432
433<script> 434 window.addEventListener('scroll', () => { 435 const bars = document.querySelectorAll('.vk-green-bar'); 436 const scroll = window.scrollY; 437 bars.forEach((bar, i) => { 438 bar.style.transform = `rotate(${scroll / (10 + i * 10)}deg)`; 439 }); 440 }); 441</script>
441 <section class="scroll-gallery"> 442 <div class="scroll-gallery-row fade-in-viewport"> 443 444 <img src="/img/virtual-kitchen/gallery/verde-box.jpg" alt="Meal 3" class="scroll-meal" /> 445 <img src="/img/virtual-kitchen/gallery/vegan-box.jpg" alt="Meal 4" class="scroll-meal" /> 446 <img src="/img/virtual-kitchen/gallery/carne-box.jpg" alt="Meal 1" class="scroll-meal" /> 447 <img src="/img/virtual-kitchen/gallery/pesce-box.jpg" alt="Meal 2" class="scroll-meal" /> 448 <img src="/img/virtual-kitchen/gallery/verde-box.jpg" alt="Meal 3" class="scroll-meal" /> 449 <img src="/img/virtual-kitchen/gallery/vegan-box.jpg" alt="Meal 4" class="scroll-meal" /> 450 <img src="/img/virtual-kitchen/gallery/carne-box.jpg" alt="Meal 1" class="scroll-meal" /> 451 <img src="/img/virtual-kitchen/gallery/pesce-box.jpg" alt="Meal 2" class="scroll-meal" /> 452 </div> 453</section> 454
455<script> 456 const row = document.querySelector('.scroll-gallery-row'); 457 458 function getMultiplier() { 459 const width = window.innerWidth; 460 461 if (width >= 1200) return 0.3; // large screens 462 if (width >= 768) return 0.15; // tablets 463 return 0.1; // small screens / mobiles 464 } 465 466 function updateScrollTranslation() { 467 const scrollY = window.scrollY; 468 const multiplier = getMultiplier(); 469 row.style.transform = `translateX(${-scrollY * multiplier}px)`; 470 } 471 472 window.addEventListener('scroll', updateScrollTranslation); 473</script>
473 474 475 476 <section class="allergen-scan-section"> 477 <div class="as-content-wrapper"> 478 479 <!-- Image first --> 480 <div class="as-image-container"> 481 <img 482 src="/img/allergen/allergen-scan.png" 483 alt="QR Allergen Label" 484 class="as-main-image fade-in-viewport" 485 /> 486 </div> 487 488 <!-- Text second --> 489 <div class="as-text-block"> 490 <h2 class="fade-in-viewport">Unique QR code<br><strong>labelling</strong></h2> 491 <p class="fade-in-viewport"> 492 From allergens to nutritional information,<br> 493 everything you need is just one scan away. 494 </p> 495 496 <!-- Secondary image below text --> 497 <div class="as-secondary-image-wrapper fade-in-viewport"> 498 <img 499 src="/img/allergen/nutritional-information.png" 500 alt="Nutrition Label" 501 class="as-secondary-image" 502 /> 503 </div> 504 </div> 505 506 </div> 507</section> 508 <section class="lunch-box-scroll"> 509 <!-- Background + green bars behind text --> 510 <div class="lunch-box-text-wrapper"> 511 <!-- Green bars behind --> 512 <div class="green-bar bar-top-left fade-in-viewport"></div> 513 <div class="green-bar bar-bottom-right fade-in-viewport"></div> 514 515 <!-- Background block holds the text and sits above the bars --> 516 <div class="lunch-box-background-block"> 517 <div class="lunch-box-text fade-in-viewport"> 518 <h2 class="wave-heading fade-in-viewport"> 519 <span>Enjoy</span> 520 <span>a</span> 521 <span>different</span><br> 522 <span>lunch,</span> 523 <span>every</span> 524 <span>day</span> 525 <span>of</span> 526 <span>the</span> 527 <span>week.</span> 528 </h2> 529 530 <p> 531 From allergens to nutritional information,<br> 532 everything you need is just one scan away. 533 </p> 534 </div> 535 </div> 536 </div> 537 538 539 <!-- Scrollable row of images --> 540 <div class="lunch-box-row "> 541 <img src="/img/virtual-kitchen/lunch-scroll/lunch7.jpg" alt="Lunch 7" class="lunch-box-img" /> 542 <img src="/img/virtual-kitchen/lunch-scroll/lunch6.jpg" alt="Lunch 6" class="lunch-box-img" /> 543 544 <img src="/img/virtual-kitchen/lunch-scroll/lunch3.jpg" alt="Lunch 3" class="lunch-box-img" /> 545 546 <img src="/img/virtual-kitchen/lunch-scroll/lunch1.jpg" alt="Lunch 1" class="lunch-box-img" /> 547 <img src="/img/virtual-kitchen/lunch-scroll/lunch4.jpg" alt="Lunch 4" class="lunch-box-img" /> 548 549 <img src="/img/virtual-kitchen/lunch-scroll/lunch5.jpg" alt="Lunch 5" class="lunch-box-img" /> 550 <img src="/img/virtual-kitchen/lunch-scroll/lunch7.jpg" alt="Lunch 7" class="lunch-box-img" /> 551 552 <img src="/img/virtual-kitchen/lunch-scroll/lunch1.jpg" alt="Lunch 1" class="lunch-box-img" /> 553 <img src="/img/virtual-kitchen/lunch-scroll/lunch4.jpg" alt="Lunch 4" class="lunch-box-img" /> 554 555 556 557 </div> 558</section>
559<script> 560 const lunchBoxRow = document.querySelector('.lunch-box-row'); 561 562 function getMultiplier() { 563 const width = window.innerWidth; 564 if (width >= 1200) return 0.3; 565 if (width >= 768) return 0.15; 566 return 0.1; 567 } 568 569 function updateScrollRight() { 570 const scrollY = window.scrollY; 571 const section = document.querySelector('.lunch-box-scroll'); 572 const offsetTop = section.getBoundingClientRect().top + window.scrollY; 573 574 575 const startTrigger = offsetTop - 900; // scroll starts 400px before section 576 const startScroll = scrollY - startTrigger; 577 578 if (startScroll > 0) { 579 const multiplier = getMultiplier(); 580 lunchBoxRow.style.transform = `translateX(${startScroll * multiplier}px)`; 581 } else { 582 lunchBoxRow.style.transform = 'translateX(0px)'; 583 } 584 } 585 586 window.addEventListener('scroll', updateScrollRight); 587 588 589 window.addEventListener('scroll', () => { 590 const scroll = window.scrollY; 591 592 // Only target green bars inside .lunch-box-scroll 593 const bars = document.querySelectorAll('.lunch-box-scroll .green-bar'); 594 595 bars.forEach((bar, i) => { 596 // ROTATE ANTI-CLOCKWISE 597 bar.style.transform = `rotate(${-scroll / (10 + i * 10)}deg)`; 598 }); 599 }); 600 601 602 const waveHeading = document.querySelector('.wave-heading'); 603 const waveSpans = waveHeading.querySelectorAll('span'); 604 605 let hasAnimated = false; 606 607 const observer = new IntersectionObserver(entries => { 608 entries.forEach(entry => { 609 if (entry.isIntersecting && entry.intersectionRatio > 0.6 && !hasAnimated) { 610 hasAnimated = true; 611 612 waveSpans.forEach((span, i) => { 613 setTimeout(() => { 614 span.style.transform = 'scale(1.1) rotate(-1deg)'; 615 616 }, i * 60); 617 618 setTimeout(() => { 619 span.style.transform = 'scale(1)'; 620 }, i * 60 + 300); 621 }); 622 } 623 624 // Reset flag when leaving view 625 if (!entry.isIntersecting) { 626 hasAnimated = false; 627 } 628 }); 629 }, { 630 threshold: 0.6 631 }); 632 633 observer.observe(waveHeading); 634</script>
634 <section class="breakfast-pots-spin"> 635 <div class="vk-content-wrapper"> 636 <!-- Text content --> 637 <div class="vk-text"> 638 <h2 class="fade-in-viewport">Beautifully balanced<br><strong>breakfast pots</strong></h2> 639 <p class="fade-in-viewport"> 640 Made fresh every morning. Designed to keep you full, focused and feeling good â without slowing you down. 641 </p> 642 643 <a href="/menu" 644 class="menu-link fade-in-viewport" 645 data-category="breakfast"> 646 View our menus 647 <span class="arrow">âº</span> 648 </a> 649 </div> 650 651 <!-- Visual content --> 652 <div class="vk-image-container spin-wrapper "> 653 <!-- <div class="vk-green-bar bar-1"></div> --> 654 <!-- <div class="vk-green-bar bar-2"></div> --> 655 656 <div class="spin-circle"> 657 <img src="/img/virtual-kitchen/spin/pot1.jpg" class="orbit-img fade-in-viewport" /> 658 <img src="/img/virtual-kitchen/spin/pot2.jpg" class="orbit-img fade-in-viewport" /> 659 <img src="/img/virtual-kitchen/spin/pot3.jpg" class="orbit-img fade-in-viewport" /> 660 </div> 661 662 </div> 663 </div> 664</section> 665
666<script> 667const orbitImgs = document.querySelectorAll('.orbit-img'); 668 669window.addEventListener('scroll', () => { 670 const scroll = window.scrollY; 671 const radius = 200; // smaller to match smaller images 672 const offsetAngle = scroll / 1000; // much slower 673 674 orbitImgs.forEach((img, i) => { 675 const angle = offsetAngle + (i * (Math.PI * 2 / orbitImgs.length)); 676 const x = radius * Math.cos(angle); 677 const y = radius * Math.sin(angle); 678 679 img.style.transform = `translate(${x}px, ${y}px)`; 680 }); 681}); 682 683 684</script>
684 <section class="platters-banner"> 685 <div class="platters-content"> 686 687 <div class="platter-wrap platter-left-wrap fade-in-viewport"> 688 <img src="/img/virtual-kitchen/platter1.jpg" alt="Fruit Platter" class="platter-img platter-left" /> 689 </div> 690 691 <div class="platters-text fade-in-viewport"> 692 <h2>Premium sharing<br>platters</h2> 693 <p> 694 Thoughtfully prepared for effortless hosting â ideal for boardrooms,<br> 695 brainstorms, and everything between. 696 </p> 697 698 <a href="/menu" 699 class="menu-link fade-in-viewport" 700 data-category="meeting-rooms"> 701 View our menus 702 <span class="arrow">âº</span> 703 </a> 704 </div> 705 706 <div class="platter-wrap platter-right-wrap fade-in-viewport"> 707 <img src="/img/virtual-kitchen/platter2.jpg" alt="Sandwich Platter" class="platter-img platter-right" /> 708 </div> 709 710 </div> 711</section> 712
713<script> 714 const platterLeft = document.querySelector('.platter-left'); 715 const platterRight = document.querySelector('.platter-right'); 716 717 window.addEventListener('scroll', () => { 718 const scroll = window.scrollY; 719 720 // Move left platter upwards slightly with scroll 721 platterLeft.style.transform = `translateY(${-scroll / 30}px)`; 722 723 // Move right platter downwards slightly with scroll 724 platterRight.style.transform = `translateY(${scroll / 30}px)`; 725 }); 726</script>
726 <section class="sandwich-scroll"> 727 <!-- Background + green bars behind text --> 728 <div class="sandwich-box-text-wrapper"> 729 <!-- Green bars behind --> 730 <!-- Background block holds the text and sits above the bars --> 731 <div class="sandwich-box-background-block"> 732 <div class="lunch-box-text fade-in-viewport"> 733 <h2 class="wave-heading fade-in-viewport"> 734 <span>Perfectly</span> 735 <span>crafted</span> 736 <span>sandwiches,</span><br> 737 <span>freshly</span> 738 <span>made</span> 739 <span>for</span> 740 <span>your</span> 741 <span>day.</span> 742 </h2> 743 744 <p> 745 Thoughtfully stacked and ready to go â from creative combos to comforting classics, always balanced and fresh. 746 </p> 747 <a href="/menu" 748 class="menu-link fade-in-viewport" 749 data-category="sandwiches"> 750 View our menus 751 <span class="arrow">âº</span> 752 </a> 753 754 </div> 755 </div> 756 </div> 757 758 <!-- Scrollable row of images --> 759 <div class="sandwich-row-container"> 760 <div class="lunch-box-row sandwich-row"> 761 <img src="/img/virtual-kitchen/sandwich-scroll/sandwich1.webp" alt="Sandwich 1" loading="lazy" class="sandwich-box-img" /> 762 <img src="/img/virtual-kitchen/sandwich-scroll/sandwich2.webp" alt="Sandwich 2" loading="lazy" class="sandwich-box-img" /> 763 <img src="/img/virtual-kitchen/sandwich-scroll/sandwich3.webp" alt="Sandwich 3" loading="lazy" class="sandwich-box-img" /> 764 <img src="/img/virtual-kitchen/sandwich-scroll/sandwich4.webp" alt="Sandwich 4" loading="lazy" class="sandwich-box-img" /> 765 <img src="/img/virtual-kitchen/sandwich-scroll/sandwich5.webp" alt="Sandwich 5" loading="lazy" class="sandwich-box-img" /> 766 <img src="/img/virtual-kitchen/sandwich-scroll/sandwich6.webp" alt="Sandwich 6" loading="lazy" class="sandwich-box-img" /> 767 768 </div> 769 </div> 770 771 <style> 772 .sandwich-row img { 773 margin-right: 15px; 774 } 775 </style> 776</section>
777<script> 778document.querySelectorAll('.sandwich-scroll').forEach(section => { 779 const sandwichRow = section.querySelector('.sandwich-row'); 780 const waveHeading = section.querySelector('.wave-heading'); 781 const waveSpans = waveHeading ? waveHeading.querySelectorAll('span') : []; 782 783 function getScrollMultiplier() { 784 const width = window.innerWidth; 785 if (width >= 1200) return 0.3; 786 if (width >= 768) return 0.15; 787 return 0.1; 788 } 789 790 function updateScroll() { 791 const scrollY = window.scrollY; 792 const offsetTop = section.getBoundingClientRect().top + window.scrollY; 793 794 const isMenuPage = 795 window.location.pathname === `${basePath}/menu` || 796 window.location.pathname === `${basePath}/menu/`; 797 798 const startTrigger = isMenuPage ? offsetTop : offsetTop - 700; 799 const startScroll = scrollY - startTrigger; 800 801 if (startScroll > 0) { 802 const multiplier = getScrollMultiplier(); 803 sandwichRow.style.transform = `translate3d(${-startScroll * multiplier}px, 0, 0)`; 804 } else { 805 sandwichRow.style.transform = 'translate3d(0px, 0, 0)'; 806 } 807 } 808 809 // Smooth animation loop (per section) 810 let ticking = false; 811 function onScroll() { 812 if (!ticking) { 813 window.requestAnimationFrame(() => { 814 updateScroll(); 815 ticking = false; 816 }); 817 ticking = true; 818 } 819 } 820 821 window.addEventListener('scroll', onScroll); 822 823 // â Independent wave animation for each section 824 let waveHasAnimated = false; 825 826 if (waveHeading) { 827 const observer = new IntersectionObserver(entries => { 828 entries.forEach(entry => { 829 if (entry.isIntersecting && entry.intersectionRatio > 0.6 && !waveHasAnimated) { 830 waveHasAnimated = true; 831 832 waveSpans.forEach((span, i) => { 833 const offset = Math.floor(Math.random() * 30); 834 setTimeout(() => { 835 span.style.transform = 'scale(1.1) rotate(-1deg)'; 836 }, i * 60 + offset); 837 setTimeout(() => { 838 span.style.transform = 'scale(1)'; 839 }, i * 60 + offset + 300); 840 }); 841 } 842 843 if (!entry.isIntersecting) { 844 waveHasAnimated = false; 845 } 846 }); 847 }, { threshold: 0.6 }); 848 849 observer.observe(waveHeading); 850 } 851}); 852</script>
852 853 <section id="health-bowls-scroll" class="sandwich-scroll"> 854 <!-- Background + green bars behind text --> 855 <div class="sandwich-box-text-wrapper"> 856 <!-- Green bars behind --> 857 <!-- Background block holds the text and sits above the bars --> 858 <div class="sandwich-box-background-block"> 859 <div class="lunch-box-text fade-in-viewport"> 860 <h2 class="wave-heading fade-in-viewport"> 861 <span>Perfectly</span> 862 <span>crafted</span> 863 <span>health bowls,</span><br> 864 <span>freshly</span> 865 <span>made</span> 866 <span>for</span> 867 <span>your</span> 868 <span>day.</span> 869 </h2> 870 871 <p> 872 Thoughtfully stacked and ready to go â from creative combos to comforting classics, always balanced and fresh. 873 </p> 874 <a href="/menu" 875 class="menu-link fade-in-viewport" 876 data-category="sandwiches"> 877 View our menus 878 <span class="arrow">âº</span> 879 </a> 880 881 </div> 882 </div> 883 </div> 884 885 <!-- Scrollable row of images --> 886 <div class="sandwich-row-container"> 887 <div class="lunch-box-row sandwich-row"> 888 <img src="/img/virtual-kitchen/health-bowls/health-bowl1.jpg" alt="Sandwich 1" loading="lazy" class="sandwich-box-img" /> 889 <img src="/img/virtual-kitchen/health-bowls/health-bowl2.jpg" alt="Sandwich 2" loading="lazy" class="sandwich-box-img" /> 890 <img src="/img/virtual-kitchen/health-bowls/health-bowl3.jpg" alt="Sandwich 3" loading="lazy" class="sandwich-box-img" /> 891 <img src="/img/virtual-kitchen/health-bowls/health-bowl4.jpg" alt="Sandwich 4" loading="lazy" class="sandwich-box-img" /> 892 <img src="/img/virtual-kitchen/health-bowls/health-bowl5.jpg" alt="Sandwich 5" loading="lazy" class="sandwich-box-img" /> 893 <img src="/img/virtual-kitchen/health-bowls/health-bowl6.jpg" alt="Sandwich 6" loading="lazy" class="sandwich-box-img" /> 894 <img src="/img/virtual-kitchen/health-bowls/health-bowl1.jpg" alt="Sandwich 1" loading="lazy" class="sandwich-box-img" /> 895 <img src="/img/virtual-kitchen/health-bowls/health-bowl2.jpg" alt="Sandwich 2" loading="lazy" class="sandwich-box-img" /> 896 <img src="/img/virtual-kitchen/health-bowls/health-bowl3.jpg" alt="Sandwich 3" loading="lazy" class="sandwich-box-img" /> 897 <img src="/img/virtual-kitchen/health-bowls/health-bowl4.jpg" alt="Sandwich 4" loading="lazy" class="sandwich-box-img" /> 898 <img src="/img/virtual-kitchen/health-bowls/health-bowl5.jpg" alt="Sandwich 5" loading="lazy" class="sandwich-box-img" /> 899 <img src="/img/virtual-kitchen/health-bowls/health-bowl6.jpg" alt="Sandwich 6" loading="lazy" class="sandwich-box-img" /> 900 </div> 901 </div> 902 903 <style> 904 .sandwich-row img { 905 margin-right: 15px; 906 } 907 </style> 908</section>
909<script> 910document.querySelectorAll('#health-bowls-scroll').forEach(section => { 911 const sandwichRow = section.querySelector('.sandwich-row'); 912 const waveHeading = section.querySelector('.wave-heading'); 913 const waveSpans = waveHeading ? waveHeading.querySelectorAll('span') : []; 914 915 function getScrollMultiplier() { 916 const width = window.innerWidth; 917 if (width >= 1200) return 0.3; 918 if (width >= 768) return 0.15; 919 return 0.1; 920 } 921 922 function updateScroll() { 923 const scrollY = window.scrollY; 924 const offsetTop = section.getBoundingClientRect().top + window.scrollY; 925 926 const isMenuPage = 927 window.location.pathname === `${basePath}/menu` || 928 window.location.pathname === `${basePath}/menu/`; 929 930 const startTrigger = isMenuPage ? offsetTop : offsetTop - 700; 931 const startScroll = scrollY - startTrigger; 932 933 if (startScroll > 0) { 934 const multiplier = getScrollMultiplier(); 935 sandwichRow.style.transform = `translate3d(${-startScroll * multiplier}px, 0, 0)`; 936 } else { 937 sandwichRow.style.transform = 'translate3d(0px, 0, 0)'; 938 } 939 } 940 941 // Smooth animation loop (per section) 942 let ticking = false; 943 function onScroll() { 944 if (!ticking) { 945 window.requestAnimationFrame(() => { 946 updateScroll(); 947 ticking = false; 948 }); 949 ticking = true; 950 } 951 } 952 953 window.addEventListener('scroll', onScroll); 954 955 // â Independent wave animation for each section 956 let waveHasAnimated = false; 957 958 if (waveHeading) { 959 const observer = new IntersectionObserver(entries => { 960 entries.forEach(entry => { 961 if (entry.isIntersecting && entry.intersectionRatio > 0.6 && !waveHasAnimated) { 962 waveHasAnimated = true; 963 964 waveSpans.forEach((span, i) => { 965 const offset = Math.floor(Math.random() * 30); 966 setTimeout(() => { 967 span.style.transform = 'scale(1.1) rotate(-1deg)'; 968 }, i * 60 + offset); 969 setTimeout(() => { 970 span.style.transform = 'scale(1)'; 971 }, i * 60 + offset + 300); 972 }); 973 } 974 975 if (!entry.isIntersecting) { 976 waveHasAnimated = false; 977 } 978 }); 979 }, { threshold: 0.6 }); 980 981 observer.observe(waveHeading); 982 } 983}); 984</script>
984 985 <section class="dessert-pots-spin"> 986 <div class="vk-content-wrapper reverse"> 987 <!-- Visual content --> 988 <div class="vk-image-container spin-wrapper reverse "> 989 <div class="spin-circle reverse"> 990 <img src="/img/virtual-kitchen/spin/dessert1.jpg" class="orbit-img dessert fade-in-viewport" /> 991 <img src="/img/virtual-kitchen/spin/dessert2.jpg" class="orbit-img dessert fade-in-viewport" /> 992 <img src="/img/virtual-kitchen/spin/dessert3.jpg" class="orbit-img dessert fade-in-viewport" /> 993 </div> 994 </div> 995 996 <!-- Text content --> 997 <div class="vk-text"> 998 <h2 class="fade-in-viewport">Hand-finished<br><strong>dessert pots</strong></h2> 999 <p class="fade-in-viewport"> 1000 A perfect end to any lunch. Carefully crafted with bold flavours and beautiful presentation. 1001 </p> 1002 </div> 1003 </div> 1004</section>
1005<script> 1006 const dessertImgs = document.querySelectorAll('.orbit-img.dessert'); 1007 1008 window.addEventListener('scroll', () => { 1009 const scroll = window.scrollY; 1010 const radius = 200; 1011 const offsetAngle = -scroll / 1000; // â negative to reverse direction 1012 1013 dessertImgs.forEach((img, i) => { 1014 const angle = offsetAngle + (i * (Math.PI * 2 / dessertImgs.length)); 1015 const x = radius * Math.cos(angle); 1016 const y = radius * Math.sin(angle); 1017 1018 img.style.transform = `translate(${x}px, ${y}px)`; 1019 }); 1020 }); 1021</script>
1021 1022 <section id="look-book" class="look-book fade-in-viewport"> 1023 <div class="section-title">Daily Lunch Menus</div> 1024 <p class="section-para fade-in-viewport"> 1025 Canât decide what to have for lunch? We offer a different lunch every day of the week. 1026 Choose a daily lunch box across a range of Carne, Pesce, Verde, and Vegan mains. All mains come with two or three sides. 1027 Always different each day of the week. 1028 </p> 1029 1030 <div class="container"> 1031 <img class="carousel-curve" src="/img/SVG/carousel-curve-right.svg" alt=""> 1032 <img class="carousel-curve left" src="/img/SVG/carousel-curve-left.svg" alt=""> 1033 1034 <div class="carousel-nav"> 1035 <div class="carousel-nav-links"> 1036 <a href="#daily" class="carousel-nav-link selected" data-category="daily">weekly</a><a href="#monday" class="carousel-nav-link selected" data-category="monday">monday</a><a href="#tuesday" class="carousel-nav-link" data-category="tuesday">tuesday</a><a href="#wednesday" class="carousel-nav-link" data-category="wednesday">wednesday</a><a href="#thursday" class="carousel-nav-link" data-category="thursday">thursday</a><a href="#friday" class="carousel-nav-link" data-category="friday">friday</a> </div> 1037 </div> 1038 1039 <div id="carousel-container" class="fade-in-viewport"> 1040 <div id="carousel2" class="carousel"> 1041 <div class="card selected" data-category="daily"> 1042 <picture> 1043 <source media="(max-width:1024px)" srcset="/img/daily/small/individually-boxed-lunch.jpg"> 1044 <img class="card-image" src="/img/daily/individually-boxed-lunch.jpg" alt=""> 1045 </picture> 1046 <div class="card-desc"> 1047 <h3><strong></strong></h3> 1048 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1049 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1050 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1051 </svg> 1052 <h3>Individually Boxed</h3> 1053 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1054 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1055 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1056 </svg> 1057 </div> 1058</div><div class="card selected" data-category="monday"> 1059 <picture> 1060 <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-mon.jpg"> 1061 <img class="card-image" src="/img/daily/lunch-mon.jpg" alt=""> 1062 </picture> 1063 <div class="card-desc"> 1064 <h3><strong></strong></h3> 1065 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1066 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1067 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1068 </svg> 1069 <h3>monday</h3> 1070 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1071 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1072 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1073 </svg> 1074 </div> 1075</div><div class="card" data-category="tuesday"> 1076 <picture> 1077 <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-tues.jpg"> 1078 <img class="card-image" src="/img/daily/lunch-tues.jpg" alt=""> 1079 </picture> 1080 <div class="card-desc"> 1081 <h3><strong></strong></h3> 1082 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1083 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1084 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1085 </svg> 1086 <h3>tuesday</h3> 1087 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1088 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1089 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1090 </svg> 1091 </div> 1092</div><div class="card" data-category="wednesday"> 1093 <picture> 1094 <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-wed.jpg"> 1095 <img class="card-image" src="/img/daily/lunch-wed.jpg" alt=""> 1096 </picture> 1097 <div class="card-desc"> 1098 <h3><strong></strong></h3> 1099 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1100 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1101 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1102 </svg> 1103 <h3>wednesday</h3> 1104 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1105 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1106 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1107 </svg> 1108 </div> 1109</div><div class="card" data-category="thursday"> 1110 <picture> 1111 <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-thurs.jpg"> 1112 <img class="card-image" src="/img/daily/lunch-thurs.jpg" alt=""> 1113 </picture>
1114 <div class="card-desc"> 1115 <h3><strong></strong></h3> 1116 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1117 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1118 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1119 </svg> 1120 <h3>thursday</h3> 1121 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1122 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1123 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1124 </svg> 1125 </div> 1126</div><div class="card" data-category="friday"> 1127 <picture> 1128 <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-fri.jpg"> 1129 <img class="card-image" src="/img/daily/lunch-fri.jpg" alt=""> 1130 </picture> 1131 <div class="card-desc"> 1132 <h3><strong></strong></h3> 1133 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1134 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1135 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1136 </svg> 1137 <h3>friday</h3> 1138 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1139 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1140 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1141 </svg> 1142 </div> 1143</div> </div> 1144 </div> 1145 </div> 1146</section> 1147
1148<script src="/script/carousel.js"></script>
1148 1149 <section id="seasonal" class="look-book fade-in-viewport"> 1150 <div class="section-title">We're Seasonal</div> 1151 <p class="section-para fade-in-viewport"> 1152 Eat fresh across each season with locally sourced high-quality ingredients. 1153 At Wolf and Lamb, we follow the seasons. 1154 </p> 1155 1156 <div class="container"> 1157 <img class="carousel-curve" src="/img/SVG/carousel-curve-right.svg" alt=""> 1158 <img class="carousel-curve left" src="/img/SVG/carousel-curve-left.svg" alt=""> 1159 1160 <div class="carousel-nav"> 1161 <div class="carousel-nav-links"> 1162 <a href="#summer" class="carousel-nav-link selected" data-category="summer">summer</a><a href="#autumn" class="carousel-nav-link" data-category="autumn">autumn</a><a href="#winter" class="carousel-nav-link" data-category="winter">winter</a><a href="#spring" class="carousel-nav-link" data-category="spring">spring</a> </div> 1163 </div> 1164 1165 <div id="carousel-container" class="fade-in-viewport"> 1166 <div id="carousel" class="carousel"> 1167 <div class="card selected" data-category="summer"> 1168 <picture> 1169 <source media="(max-width:1024px)" srcset="/img/seasonal/small/summer.jpg"> 1170 <img class="card-image" src="/img/seasonal/summer.jpg" alt="summer 23"> 1171 </picture> 1172 <div class="card-desc"> 1173 <h3><strong></strong></h3> 1174 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1175 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1176 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1177 </svg> 1178 <h3>summer 23</h3> 1179 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1180 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1181 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1182 </svg> 1183 </div> 1184</div><div class="card" data-category="autumn"> 1185 <picture> 1186 <source media="(max-width:1024px)" srcset="/img/seasonal/small/autumn.jpg"> 1187 <img class="card-image" src="/img/seasonal/autumn.jpg" alt="autumn 23"> 1188 </picture> 1189 <div class="card-desc"> 1190 <h3><strong></strong></h3> 1191 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1192 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1193 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1194 </svg> 1195 <h3>autumn 23</h3> 1196 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1197 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1198 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1199 </svg> 1200 </div> 1201</div><div class="card" data-category="winter"> 1202 <picture> 1203 <source media="(max-width:1024px)" srcset="/img/seasonal/small/winter.jpg"> 1204 <img class="card-image" src="/img/seasonal/winter.jpg" alt="winter 24"> 1205 </picture> 1206 <div class="card-desc"> 1207 <h3><strong></strong></h3> 1208 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1209 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1210 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1211 </svg> 1212 <h3>winter 24</h3> 1213 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1214 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1215 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1216 </svg> 1217 </div> 1218</div><div class="card" data-category="spring"> 1219 <picture> 1220 <source media="(max-width:1024px)" srcset="/img/seasonal/small/spring.jpg"> 1221 <img class="card-image" src="/img/seasonal/spring.jpg" alt="spring 24"> 1222 </picture> 1223 <div class="card-desc"> 1224 <h3><strong></strong></h3> 1225 <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1226 <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/> 1227 <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/> 1228 </svg> 1229 <h3>spring 24</h3> 1230 <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99"> 1231 <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/> 1232 <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/> 1233 </svg> 1234 </div> 1235</div> </div> 1236 </div> 1237 </div> 1238</section> 1239
1240<script src="/script/carousel.js"></script>
1240 1241 1242 </main> 1243 1244 <footer class="footer"> 1245 <div class="container"> 1246 <div class="footer-links"> 1247 <!-- Optional CTA section --> 1248 <!-- 1249 <div class="footer-section cta"> 1250 <h3>Create An Account</h3> 1251 <p>Join today to access your membership discounts.</p> 1252 <a href="#signup" class="primary-button">Get Started</a> 1253 </div> 1254 --> 1255 1256 <div class="nav-links"> 1257 1258 <a class="scroll-link " href="/">bespoke</a> 1259 1260 <a class="selected" href="/virtual-kitchen">virtual kitchen</a> 1261 1262 <a class="" href="/menu">menu</a> 1263 1264 <a class="" href="/on-location">on-location</a> 1265 1266 <a class="" href="/inside">inside?</a> 1267 1268 <a class="" href="/sustainability">sustainability</a> 1269 1270 <a class="" href="/contact">contact</a> 1271 </div> 1272 1273 <div class="footer-section contact"> 1274 <!-- 1275 <a href="#whatsapp" class="whatsapp-link"> 1276 <img src="/img/SVG/whatsapp.png" alt="WhatsApp"> 1277 </a> 1278 --> 1279 <h3 class="tel"> 1280 <a href="tel:020 8533 3341">020 8533 3341</a> 1281 </h3> 1282 <a href="mailto:[email protected]">[email protected]</a> 1283 </div> 1284 </div> 1285 1286 <div class="footer-logos"> 1287 <img src="/img/SVG/wolf-lamb-logo-white.svg" alt="Wolf & Lamb Logo"> 1288 <!-- 1289 <img src="/img/SVG/WeWork-logo-white.svg" alt="WeWork Logo"> 1290 --> 1291 </div> 1292 </div> 1293</footer> 1294 1295
1295<script> 1296 window.basePath = ""; 1297 </script>
1297 1298
1298<script src="/script/script.js"></script>
1298 1299 1300 <!-- Intercom --> 1301
1301<script> 1302 window.intercomSettings = { 1303 api_base: "https://api-iam.intercom.io", 1304 app_id: "ytl8k7ay", 1305 }; 1306 </script>
1306 1307 1308
1308<script> 1309 (function() { 1310 var w = window; 1311 var ic = w.Intercom; 1312 if (typeof ic === "function") { 1313 ic('reattach_activator'); 1314 ic('update', w.intercomSettings); 1315 } else { 1316 var d = document; 1317 var i = function() { 1318 i.c(arguments); 1319 }; 1320 i.q = []; 1321 i.c = function(args) { 1322 i.q.push(args); 1323 }; 1324 w.Intercom = i; 1325 var l = function() { 1326 var s = d.createElement('script'); 1327 s.type = 'text/javascript'; 1328 s.async = true; 1329 s.src = 'https://widget.intercom.io/widget/ytl8k7ay'; 1330 var x = d.getElementsByTagName('script')[0]; 1331 x.parentNode.insertBefore(s, x); 1332 }; 1333 if (document.readyState === 'complete') { 1334 l(); 1335 } else if (w.attachEvent) { 1336 w.attachEvent('onload', l); 1337 } else { 1338 w.addEventListener('load', l, false); 1339 } 1340 } 1341 })(); 1342 </script>
1342 1343 1344</body> 1345 1346</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.