/* AHARONIS */ /*------------------------------------------/* ROOT /*------------------------------------------*/ :root { --pink: #ff00c3; --yellow: #fff18d; --blue: #caffff; --black: #000000; --grey: #a7adba; --white: #ffffff; --gap-2: 0.104vw; --gap-4: 0.208vw; --gap-6: 0.313vw; --gap-8: 0.417vw; --gap-10: 0.521vw; --gap-12: 0.625vw; --gap-14: 0.729vw; --gap-16: 0.833vw; --gap-18: 0.938vw; --gap-20: 1.042vw; --gap-24: 1.25vw; --gap-28: 1.458vw; --gap-30: 1.563vw; --gap-32: 1.667vw; --gap-36: 1.875vw; --gap-40: 2.083vw; --gap-48: 2.5vw; --gap-52: 2.708vw; --gap-56: 2.917vw; --gap-60: 3.125vw; --gap-64: 3.333vw; --gap-68: 3.542vw; --gap-72: 3.75vw; --gap-76: 3.958vw; --gap-80: 4.167vw; --gap-90: 4.688vw; --gap-96: 5vw; --gap-100: 5.208vw; --gap-120: 6.25vw; --gap-140: 7.292vw; --gap-160: 8.333vw; --gap-180: 9.375vw; --gap-200: 10.417vw; --gap-220: 11.458vw; --gap-240: 12.5vw; --gap-270: 14.063vw; --gap-290: 15.104vw; --fs-13: clamp(1px, 0.677vw, 300px); --fs-20: clamp(1px, 1.042vw, 300px); --fs-25: clamp(1px, 1.302vw, 300px); --fs-26: clamp(1px, 1.354vw, 300px); --fs-30: clamp(1px, 1.563vw, 300px); --fs-32: clamp(1px, 1.667vw, 300px); --fs-35: clamp(1px, 1.823vw, 300px); --fs-40: clamp(1px, 2.083vw, 300px); --fs-41: clamp(1px, 2.135vw, 300px); --fs-43: clamp(1px, 2.24vw, 300px); --fs-50: clamp(1px, 2.604vw, 300px); --fs-55: clamp(1px, 2.865vw, 300px); --fs-65: clamp(1px, 3.385vw, 300px); --fs-70: clamp(40px, 3.646vw, 300px); --fs-106: clamp(1px, 5.521vw, 300px); --fs-110: clamp(70px, 5.729vw, 300px); --fs-140: clamp(1px, 7.292vw, 300px); --fs-150: clamp(1px, 7.813vw, 300px); --fs-230: clamp(1px, 11.979vw, 300px); --font-1: 'oeloftpro-regular'; --font-2: 'hammerpro-300200'; --font-3: 'hammerpro-200200'; --filter-pink: invert(12%) sepia(95%) saturate(7251%) hue-rotate(316deg) brightness(103%) contrast(106%); --filter-yellow: brightness(0) saturate(100%) invert(91%) sepia(91%) saturate(1354%) hue-rotate(359deg) brightness(102%) contrast(105%); } @media(max-width: 1025px) { :root { --gap-2: 2px; --gap-4: 4px; --gap-6: 6px; --gap-8: 8px; --gap-10: 10px; --gap-12: 12px; --gap-14: 14px; --gap-16: 16px; --gap-18: 18px; --gap-20: 20px; --gap-24: 24px; --gap-28: 28px; --gap-30: 30px; --gap-32: 32px; --gap-36: 36px; --gap-40: 40px; --gap-48: 48px; --gap-52: 52px; --gap-56: 56px; --gap-60: 60px; --gap-64: 64px; --gap-68: 68px; --gap-72: 72px; --gap-76: 76px; --gap-80: 80px; --gap-90: 90px; --gap-96: 96px; --gap-100: 100px; --gap-120: 120px; --gap-140: 140px; --gap-160: 160px; --gap-180: 180px; --gap-200: 200px; --gap-220: 220px; --gap-240: 240px; --gap-270: 270px; --gap-290: 290px; --fs-13: 13px; --fs-20: 20px; --fs-25: 25px; --fs-26: 26px; --fs-30: 30px; --fs-32: 32px; --fs-35: 35px; --fs-40: 40px; --fs-41: 41px; --fs-43: 43px; --fs-50: 50px; --fs-55: 55px; --fs-65: 65px; --fs-106: 106px; --fs-140: 140px; --fs-150: 150px; --fs-230: 230px; } } /*------------------------------------------/* GENERAL /*------------------------------------------*/ html { font-size: 62.5%; overflow-x: clip; } body { opacity: 0; color: var(--black); background: white; transition: 0.3s opacity ease; font-family: var(--font-1) !important; font-size: 2rem; zoom: 1 !important; position: relative; transition-delay: 0.5s; } body { font-size: clamp(15px, var(--fs-17),300px); font-family: var(--font-1); line-height: 1.45; letter-spacing: -0.17px; } body.home-page { opacity: 1; } body.shown { opacity: 1; } body, body.modal-open { padding: 0 !important; overflow: clip !important; } .modal { z-index: 10000; } .modal-backdrop.in { opacity: 0.5; } .gallery-cubes-modal { padding: 0 !important; } .gallery-cubes-modal .flexslider .slides { display: flex; align-items: center; flex-wrap: wrap; } .gallery-cubes-modal .flexslider .flex-direction-nav li a { outline: unset; } .gallery-cubes-modal .flexslider a.flex-next:before, .gallery-cubes-modal .flexslider a.flex-prev:before { font-size: 250%; } .grid-box-fulltext :is(p, li), :is(#lobbyText, #text1, #text2, .text1, .text2) :is(p, li), .grid-rows .grid-row-text :is(p, li), :is(#text1, #text2) > span, .section-topText :is(p, li), #catalogText :is(p, li), .project-inner-page .headline-wrapper .cstm-flds .field-row p, .circle-swiper .grid-boxes .grid-boxes .grid-box .grid-box-subtitle span { font-size: clamp(14px,var(--fs-18),300px); position: relative; line-height: 1.45; color: white; letter-spacing: 0.18px; } .section-title, .grid-text-section .section-title { margin: 0; } #SiteContainer { position: relative; z-index: 1; } body:not(:has(#GridTop.noTopImage)) #SiteGrid { padding: 0; } #SiteGridContainer { position: relative; z-index: 2; } #GridWrapInner { max-width: var(--app-width); display: flex; flex-direction: column; } #allSectionsWrapper { z-index: 2; background: var(--white); } .sections .section, section.section { margin-bottom: 0; padding: 0; max-width: var(--app-width); width: 100%; } .grid-rows .grid-row { background: inherit; } .grid-row li.slider-item, .grid-boxes .grid-box-image { padding-bottom: 0; overflow: visible; } .grid-boxes .grid-box-image-container, .grid-row .grid-row-image-container, .grid-short-box-image .image-container { position: relative; height: 100%; } .grid-text.gridHasVideo .grid-iframe-holder { padding: 0; display: flex; overflow: hidden; } .grid-text.gridHasVideo .grid-iframe-holder video { width: 100%; } .grid-boxes { display: flex; margin: 0; width: 100%; } .grid-boxes .grid-box { margin: 0; padding: 0; } .grid-boxes .grid-box-subtitle { font-size: unset; } .grid-boxes .grid-box .grid-box-image, #lobbyview .grid-boxes .grid-box-image, :is(div, #LobbyModule) .grid-boxes .grid-box-image { margin: 0; } .grid-boxes .grid-box-title :is(h2, h3) a { transition: 0.3s ease all; } #lobbyview .grid-boxes, #LobbyModule .grid-boxes { max-width: unset; padding: 0; margin: 0; } #LobbyModule .grid-box { opacity: inherit; font-size: 2rem; margin: 0; } #text1 p:last-child { margin: 0; } #GridPage { padding: 0; background: white; } #main-header .max-width, #GridPage .max-width, .blog-grid #GridPage .max-width, .max-width, .lobby-grid #GridPage .max-width { width: 100%; padding: 0; max-width: 100%; margin: 0; } .grid-text-content, .grid-text .grid-text-content { opacity: initial; margin: 0; width: 100%; padding: 0; } .grid-text p { margin-top: 0; } b, strong { font-weight: unset; font-family: var(--font-2); } li::marker { color: var(--black); } a:hover, a:focus { color: inherit; } .container-fluid { padding: 0; } .gallery-container { width: 100%; } .gallery-cubes { display: flex; } .box-image-animation { outline: unset !important; } .box-image-animation:hover img { transform: none !important; } #GridPromo { width: 100%; margin: 0; padding: 0; } #CatalogModule { padding: 0; } .itemContentWrapper { margin: 0; } .row { margin: 0; } .slick-track::before, .slick-track::after, .grid-boxes::before, .grid-boxes::after, .grid-rows::before, .grid-rows .grid-row::after, #gridshort-view > div::before, #gridshort-view > div::after, .gallery-cubes::before, .gallery-cubes::after, .row::before, .row::after, .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after, .clearfix { display: none !important; } #GridTop, #GridTop.blog { height: calc(100vh - var(--headerHeight)); background-repeat: no-repeat; background-size: cover; margin: 0; width: 100%; margin-top: var(--headerHeight); position: relative; border-radius: 0; } #GridTop.noTopImage.longer { height: 0; overflow: hidden; } #home-gallery .scroll-down { display: none; } #player-controls { display: none; } .cartItemsCounter { background: var(--vivid-blue); } .cartItemsCounter span.CartItems { color: var(--white); left: 50%; top: 60%; } footer { padding: 0; display: block; position: relative; } #SiteFooter { float: none; } h1, .h1, h2, .h2, h3, .h3 { margin: 0; } .gallery-cubes .image-link-container { display: none; } .blog-post { padding: 0; direction: ltr; } #LobbyModule .grid-boxes .grid-box-title h3 { font-size: unset; margin: 0; } :is(div,#LobbyModule) #lobbyview { display: flex; padding-block: var(--gap-80) var(--gap-120); justify-content: center; flex-direction: column; background: var(--white); } #BlogMain { padding-bottom: var(--gap-80); } .gallery-cubes .boxes-images-outer-image { border-radius: 6px; padding: 0; width: 100%; height: auto; aspect-ratio: 1.2; } .gallery-cubes .boxes-images-outer-image { pointer-events: none; } .opacity-layer-slide { display: none; } .GridTop { width: calc(100% - var(--gap-24)); margin-inline: auto; margin-top: var(--gap-12); border-radius: 6px; } .blog-post-title a:focus, .blog-post-title a:hover { text-decoration: none; } .gallery-container .gallery-cubes > div .boxes-images-outer-image:focus:not(:focus-visible) { outline: none; } .owl-carousel .owl-controls .owl-dot { width: 7px; height: 7px; background: white; border-radius: 9.3px; transition: 0.3s ease all; } .owl-carousel .owl-controls .owl-dot.active { width: 32px; } .swiper-pagination span.swiper-pagination-bullet { background: white !important; opacity: 1; border-radius: 0; transition: 0.3s ease all; border: 1px solid var(--black); width: 10px; height: 10px; } .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { width: 10px; height: 10px; background: var(--black) !IMPORTANT; } #ContentGridShortModule .gridshort-view-item { width: 100%; margin: 0; } #ContentGridShortModule .grid-short-box-image a { position: static; } #GridTop.noTopImage, .GridTop.noTopImage { display: none; } #PageBreadCrumps { max-width: 100% !important; padding: 0 !important; text-align: center; background: white; color: #656974; } #PageBreadCrumps span:not(:last-child)::after { content: "/"; width: var(--gap-4); /* height: var(--gap-4); */ aspect-ratio: 1; display: inline-block; /* background: var(--black); */ border-radius: 50%; margin-inline: 0 10px; } #PageBreadCrumps span:not(:last-child) { display: inline-flex; gap: var(--gap-10); align-items: center; } label.error, span.error { left: 0; top: -15%; white-space: nowrap; font-size: 90%; } #ContentRegularModule li { list-style: none; } #ContentRegularModule ul { padding: 0; } #ContentRegularModule li:before { content: ""; width: var(--gap-6); height: auto; aspect-ratio: 1; display: inline-block; background: var(--black); border-radius: 50%; vertical-align: inherit; margin-inline-end: var(--gap-12); } .categories-strip { display: none; } .cookies-disclaimer { width: 18.906vw; background: white; border: 1px solid rgba(17, 18, 42, 0.12); bottom: var(--gap-20); right: var(--gap-20); box-shadow: 0 4px 25px -10px rgba(0, 6, 44, 0.10); border-radius: 0; padding: var(--gap-24); font-size: var(--gap-14); } .cookies-disclaimer .disclaimer-wrapper h2 { font-family: var(--font-2); color: var(--black); font-size: clamp(14px,var(--fs-20),300px); margin-bottom: var(--gap-16); } .cookies-disclaimer .disclaimer-wrapper p { color: var(--black); } .cookies-disclaimer .disclaimer-wrapper button { margin: 0; margin-top: var(--gap-24); min-width: var(--gap-140); height: var(--gap-52); color: var(--black); border: 1px solid var(--vivid-blue); transition: 0.3s ease all; position: relative; overflow: hidden; border-radius: 8px; padding-inline: var(--gap-18); padding-block: var(--gap-10); display: inline-block; font-family: var(--font-3); background: var(--pink); padding: 0; font-size: var(--fs-25); } .cookies-disclaimer .disclaimer-wrapper button:hover { background: var(--yellow); } #BlogModule { overflow: visible; } .pagination { display: flex; justify-content: center; gap: var(--gap-12); margin: 0; margin-bottom: var(--gap-80); } .pagination > li { display: inline-flex; } .pagination > li a, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0; margin: 0; border: 1px solid var(--black); color: var(--black); transition: 0.3s ease all; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: white; background: var(--black); border: 1px solid var(--black); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background: var(--black); color: white !important; } .pagination > li a#NextLink { border: none; background-image: url("https://media.getmood.io/warehouse/dynamic/756706.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } .pagination > li a#NextLink span { opacity: 0; } .pagination > li a#NextLink:hover { background-color: transparent; color: unset; } .pagination > li a#PrevLink { border: none; background-image: url("https://media.getmood.io/warehouse/dynamic/756706.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; transform: scale(-1); } .pagination > li a#PrevLink span { opacity: 0; } .pagination > li a#PrevLink:hover { background-color: transparent; color: unset; } .select-wrapper:after { left: 1%; color: transparent; background-image: url("https://media.getmood.io/warehouse/dynamic/756458.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; width: var(--gap-16); } a:active, a:hover, a:focus:not(:focus-visible) { outline: none; } @media(max-width:1024px){ .cookies-disclaimer { width: auto; left: auto; right: auto; bottom: 0; z-index: 9999; } } /*--------------------/* TEXT SELECTORS /*--------------------*/ /*230-Title*/ .fs-230-bold, body.recipes .grid-box .grid-box-title :is(h2, h3) a, body.recipe #GridTop .top-caption h1 { font-size: var(--fs-230); font-family: var(--font-2); color: var(--black); line-height: 1.06; letter-spacing: normal; } /*150-Title*/ .fs-150-bold, body.about .grid-text-section:not(.video-desktop) .grid-text-content p { font-size: var(--fs-110); font-family: var(--font-2); color: var(--black); line-height: 1.2; letter-spacing: normal; } /*140-Title*/ .fs-140-bold, .grid-gallery-section:not(.image-auto-slider) .section-title h2 { font-size: var(--fs-140); font-family: var(--font-2); color: var(--black); line-height: 1.2; letter-spacing: normal; } /*106-Title*/ .fs-106-bold, .foodi-carousel .grid-boxes .grid-box .grid-box-title h3 a, #main-header .menu-nav #menu.side-menu-mode li[data-cat-mod] a { font-size: var(--fs-106); font-family: var(--font-2); color: var(--black); line-height: 1.2; letter-spacing: normal; } /*65-Title*/ .fs-65-bold, .branches .section-title h2, .branches .section-topText p a, .menu-item .section-title h2, #lobbyview #headline h1, body.restaurants .grid-text:not(.gridTextWithImg) .grid-text-content p:last-child a { font-size: var(--fs-65); font-family: var(--font-2); color: var(--black); line-height: 0.95; letter-spacing: normal; } /*55-Title*/ .fs-55-bold, .branches .grid-boxes .grid-box .grid-box-title h3 a, .menu-item .grid-boxes .grid-box .grid-box-title h3 a, body.recipe #allSectionsWrapper .section .section-title h2, body.recipe #allSectionsWrapper .section.instructions .grid-boxes .grid-box .grid-box-title h3 a, body.faq #allSectionsWrapper .grid-text-section .section-title h2 { font-size: var(--fs-55); font-family: var(--font-3); color: var(--black); line-height: 1.06; } /*50-Title*/ .fs-50-bold, #allSectionsWrapper .section.grid-text-section.circle-text .grid-text p, body.page-404 #subheadline h2 { font-size: var(--fs-50); font-family: var(--font-3); color: var(--black); line-height: 1.2; letter-spacing: normal; } /*50-Title-Tight*/ .foodi-carousel .section-title h2 { font-size: var(--fs-50); font-family: var(--font-3); color: var(--black); line-height: 0.9; letter-spacing: normal; } /*50-Title-Bold*/ body.FormResultPage :is(#headline h1, #text1 p:nth-of-type(1)) { font-size: var(--fs-50); font-family: var(--font-2); color: var(--black); line-height: 1.2; letter-spacing: normal; } /*43-Title*/ .fs-43-bold, .branches .section-topText p:first-child, body.restaurants .grid-text:not(.gridTextWithImg) .grid-text-content p:first-child, body.recipe #lobbyText p { font-size: var(--fs-43); font-family: var(--font-3); color: var(--black); line-height: 1.2; letter-spacing: normal; } /*41-Title*/ .fs-41-bold, body.career #lobbyText p, body.recipe #text2 p { font-size: var(--fs-41); font-family: var(--font-3); color: var(--black); line-height: 1.4; letter-spacing: normal; } /*40-Title*/ .fs-40-bold, .restaurant .section-title h3, body.page-404 #headline h1, .grid-faq .faq-headline .faq-headline-title, .order-popup .order-popup-mode-title, .order-popup .order-popup-mode { font-size: var(--fs-40); font-family: var(--font-2); color: var(--black); line-height: 1; letter-spacing: normal; } /*35-Title*/ .fs-35-bold, .branches .grid-boxes .grid-box .grid-box-subtitle span { font-size: var(--fs-35); font-family: var(--font-3); color: var(--black); line-height: 1.06; letter-spacing: normal; } /*32-Title*/ .fs-32-bold, #main-header .header-center .header-buttons a, #main-header .menu-nav #menu li a, body.recipe #GridTop .top-caption h2, body.career #DynamicFormObject .form-submit { font-size: var(--fs-32); font-family: var(--font-2); color: var(--black); line-height: 1.3; letter-spacing: normal; font-weight: 700; } /*30-Title*/ .fs-30-bold, body.recipe #allSectionsWrapper .section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p { font-size: var(--fs-30); font-family: var(--font-2); color: var(--black); line-height: 1.3; letter-spacing: normal; } /*26-Title*/ .fs-26-bold, #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 li, #SiteFooter .footer-text-divided .footer-text-middle > p:nth-of-type(2) { font-size: var(--fs-26); font-family: var(--font-2); color: var(--black); line-height: 1.06; letter-spacing: normal; } /*26-Reg*/ .fs-26, .restaurant .text1-hours li, body.recipe #allSectionsWrapper .section:is(.groceries, .instructions) .grid-boxes .grid-box .grid-box-fulltext :is(p, h3), body.page-404 #text1 p a, .grid-faq .faq-item-text p, body.FormResultPage .FormResultPageButton { font-size: var(--fs-26); font-family: var(--font-1); color: var(--black); line-height: 1.55; letter-spacing: normal; } body.recipe #allSectionsWrapper .section.groceries .grid-boxes .grid-box .grid-box-fulltext h3 { font-family: var(--font-2); } /*25-Reg*/ .fs-25, .foodi-carousel .grid-boxes .grid-box .grid-box-subtitle span, .menu-item .grid-boxes .grid-box .grid-box-subtitle span { font-size: var(--fs-25); font-family: var(--font-1); color: var(--black); line-height: 1.39; letter-spacing: normal; } /*20-Reg*/ .fs-20, .branches .grid-boxes .grid-box .grid-box-fulltext p, #SiteFooter .footer-text-divided .footer-text-right > ul li a, #SiteFooter .footer-text-divided .footer-text-left > ul li a, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(1) li a, body.career #DynamicFormObject .checkboxField label, body.career #DynamicFormObject .input-wrapper .a11y-label { font-size: var(--fs-20); font-family: var(--font-1); color: var(--black); line-height: 1.39; letter-spacing: normal; } /*20-Reg-Loft*/ #main-header .menu-nav #menu.side-menu-mode .menu-utility :is(.menu-email, .menu-phone, .menu-link) :is(a, span) { font-size: var(--fs-20); font-family: var(--font-1); color: var(--black); line-height: 1.39; letter-spacing: normal; } /*13-Reg*/ .fs-13, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(2) li, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(3) :is(li, a) { font-size: var(--fs-13); font-family: var(--font-1); color: var(--black); line-height: 1.06; letter-spacing: normal; } /*Order-popup*/ .order-popup .order-popup-subtitle { font-size: clamp(16px,var(--fs-40),300px); font-family: var(--font-2); color: var(--black); line-height: 1.2; letter-spacing: normal; } .order-popup .order-popup-branch { font-size: clamp(18px,var(--fs-40),300px); font-family: var(--font-2); color: var(--black); line-height: 1; letter-spacing: normal; } /*------------------------------------------/* BUTTONS /*------------------------------------------*/ .shadow-btn, .sec-button, .content-section-Btn, .foodi-carousel .grid-boxes .grid-box .grid-box-subtitle.button a { position: relative; overflow: hidden; border-radius: 8px; padding-inline: var(--gap-18); padding-block: var(--gap-10); display: inline-block; font-size: var(--fs-32); font-family: var(--font-3); color: var(--black); background: var(--yellow); transition: 0.3s ease all; } /*------------------------------------------/* MOBILE /*------------------------------------------*/ @media(max-width: 1024px) { /*--------------------/* TEXT SELECTORS /*--------------------*/ body.recipe #GridTop .top-caption h1 { font-size: 80px; } .fs-230-bold, body.recipes .grid-box .grid-box-title :is(h2, h3) a { font-size: 56px; line-height: 1.06; letter-spacing: normal; } .fs-150-bold, body.about .grid-text-section:not(.video-desktop) .grid-text-content p { font-size: 48px; line-height: 1.2; letter-spacing: normal; } .fs-140-bold, .grid-gallery-section:not(.image-auto-slider) .section-title h2 { font-size: 59px; line-height: 1.2; letter-spacing: normal; } .fs-106-bold { font-size: 40px; line-height: 1.2; letter-spacing: normal; } #main-header .menu-nav #menu.side-menu-mode li:is([data-cat-mod], .menu-cs, .menu-order) a { font-size: 4.798vh; line-height: 1.2; letter-spacing: normal; } .fs-65-bold, .branches .section-title h2, .branches .section-topText p a, .menu-item .section-title h2, #lobbyview #headline h1 { font-size: 34px; line-height: 0.95; letter-spacing: normal; } .fs-55-bold, .branches .grid-boxes .grid-box .grid-box-title h3 a, .menu-item .grid-boxes .grid-box .grid-box-title h3 a, body.recipe #allSectionsWrapper .section .section-title h2, body.recipe #allSectionsWrapper .section.instructions .grid-boxes .grid-box .grid-box-title h3 a, body.faq #allSectionsWrapper .grid-text-section .section-title h2 { font-size: 30px; line-height: 1.06; letter-spacing: normal; } .fs-50-bold, body.page-404 #subheadline h2, body.career #lobbyText p { font-size: 28px; line-height: 1.2; letter-spacing: normal; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text p { font-size: 26px; line-height: 1.24; letter-spacing: normal; } .foodi-carousel .section-title h2 { font-size: 26px; line-height: 1.06; letter-spacing: normal; max-width: 68vw; } .fs-43-bold, .branches .section-topText p:first-child, body.recipe #lobbyText p { font-size: 26px; line-height: 1.2; letter-spacing: normal; } .fs-41-bold, body.recipe #text2 p { font-size: 25px; line-height: 1.35; letter-spacing: normal; } .fs-40-bold, .restaurant .section-title h3, body.page-404 #headline h1, .grid-faq .faq-headline .faq-headline-title, .order-popup .order-popup-mode-title { font-size: 24px; line-height: 1; letter-spacing: normal; } .fs-35-bold, .branches .grid-boxes .grid-box .grid-box-subtitle span { font-size: 22px; line-height: 1.06; letter-spacing: normal; } .fs-32-bold, body.recipe #GridTop .top-caption h2, body.career #DynamicFormObject .form-submit, body.recipe #allSectionsWrapper .section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p { font-size: 22px; line-height: 1.3; letter-spacing: normal; } .fs-30-bold { font-size: 20px; line-height: 1.3; letter-spacing: normal; } .fs-26-bold, #SiteFooter .footer-text-divided .footer-text-middle > p:nth-of-type(2) { font-size: 18px; line-height: 1.06; letter-spacing: normal; } .fs-26, .restaurant .text1-hours li, body.recipe #allSectionsWrapper .section:is(.groceries, .instructions) .grid-boxes .grid-box .grid-box-fulltext :is(p, h3), body.page-404 #text1 p a, .grid-faq .faq-item-text p { font-size: 18px; line-height: 1.55; letter-spacing: normal; } .order-popup .order-popup-subtitle { font-size: 24px; line-height: 1.2; letter-spacing: normal; } .order-popup .order-popup-branch, .order-popup .order-popup-mode { font-size: 30px; line-height: 1; letter-spacing: normal; } .fs-25, .menu-item .grid-boxes .grid-box .grid-box-subtitle span { font-size: 18px; line-height: 1.39; letter-spacing: normal; } .fs-20, .branches .grid-boxes .grid-box .grid-box-fulltext p, #SiteFooter .footer-text-divided .footer-text-right > ul li a, #SiteFooter .footer-text-divided .footer-text-left > ul li a, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(1) li a { font-size: 16px; line-height: 1.39; letter-spacing: normal; } .fs-13, #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 li, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(2) li, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(3) :is(li, a), body.career #DynamicFormObject .checkboxField label { font-size: 13px; line-height: 1.06; letter-spacing: normal; } #main-header .menu-nav #menu.side-menu-mode .menu-utility :is(.menu-email, .menu-phone, .menu-link, .menu-acc) :is(a, span) { font-size: 16px; line-height: 1.39; letter-spacing: normal; } .menu-item .section-title h2 { font-size: 35px; line-height: 1; letter-spacing: normal; } .menu-item .grid-boxes .grid-box .grid-box-title h3 a { font-size: 29px; line-height: 1; letter-spacing: normal; } .menu-item .grid-boxes .grid-box .grid-box-subtitle span { font-size: 16px; line-height: 1.39; letter-spacing: normal; } .branches .grid-boxes .grid-box .grid-box-title h3 a { font-family: var(--font-2); font-size: 32px; line-height: 1.06; letter-spacing: normal; } .branches .grid-boxes .grid-box .grid-box-subtitle span { font-family: var(--font-2); font-size: 21px; line-height: 1.3; letter-spacing: normal; } .branches .grid-boxes .grid-box .grid-box-fulltext p { font-size: 14px; line-height: 1.39; letter-spacing: normal; } .branches .section-topText p:first-child { font-family: var(--font-2); font-size: 27px; line-height: 1.1; letter-spacing: normal; } body.restaurants .grid-text:not(.gridTextWithImg) .grid-text-content p:first-child { font-size: 27px; line-height: 110%; } body.restaurants .grid-text:not(.gridTextWithImg) .grid-text-content p:last-child a { font-size: 35px; line-height: 1 } body.FormResultPage :is(#headline h1, #text1 p:nth-of-type(1)) { font-size: 27px; line-height: 1.1; letter-spacing: normal; } body.FormResultPage .FormResultPageButton { font-size: 15px; line-height: 1.5; letter-spacing: normal; } } /*------------------------------------------/* ACCESSIBILITY (A-2-Z report) /*------------------------------------------*/ /* keyboard focus ring: black dashed outline + white inner ring, visible on every background */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px dashed var(--black) !important; outline-offset: 2px; box-shadow: 0 0 0 2px var(--white) !important; } /* pause / play toggle (injected by site2258.js before every auto-moving component) */ .a11y-motion-toggle { position: absolute; z-index: 30; top: var(--gap-20); inset-inline-start: var(--gap-20); width: var(--gap-48); height: var(--gap-48); display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 2px solid var(--yellow); border-radius: 50%; background: var(--black); color: var(--yellow); cursor: pointer; box-shadow: 0 0 0 2px var(--black); transition: 0.3s ease all; display:none; } .a11y-motion-toggle .a11y-motion-icon { display: block; width: var(--gap-18); height: var(--gap-18); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='4' height='12'/%3E%3Crect x='10' y='2' width='4' height='12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='4' height='12'/%3E%3Crect x='10' y='2' width='4' height='12'/%3E%3C/svg%3E") center / contain no-repeat; } .a11y-motion-toggle.is-paused .a11y-motion-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2l10 6-10 6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2l10 6-10 6z'/%3E%3C/svg%3E"); margin-inline-start: var(--gap-2); } .a11y-motion-toggle.a11y-motion-fixed { position: fixed; top: calc(var(--headerHeight) + var(--gap-20)); z-index: 1000; } #home-gallery > .a11y-motion-toggle { top: calc(var(--headerHeight) + var(--gap-20)); } .rotating-stamp > .a11y-motion-toggle { top: 0; inset-inline-start: 0; transform: rotate(15deg); width: var(--gap-36); height: var(--gap-36); } .rotating-stamp > .a11y-motion-toggle .a11y-motion-icon { width: var(--gap-14); height: var(--gap-14); } #main-header .menu-nav #menu.side-menu-mode .menu-stamp > .a11y-motion-toggle { top: 0; inset-inline-start: 12%; } /* paused state: freezes every css animation inside the component (video / lottie / gsap are handled in js) */ .is-paused, .is-paused * { animation-play-state: paused !important; } @media(min-width: 1025px) { .a11y-motion-toggle:hover { background: var(--yellow); color: var(--black); border-color: var(--black); } } @media(max-width: 1024px) { .a11y-motion-toggle { width: 40px; height: 40px; top: 12px; inset-inline-start: 12px; } .a11y-motion-toggle .a11y-motion-icon { width: 16px; height: 16px; } .rotating-stamp > .a11y-motion-toggle { width: 30px; height: 30px; } .rotating-stamp > .a11y-motion-toggle .a11y-motion-icon { width: 12px; height: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /**/ /*------------------------------------------/* HEADER /*------------------------------------------*/ #main-header { background: var(--yellow); position: fixed; top: 0; inset-inline: 0; width: 100%; z-index: 1000; padding: var(--gap-24) var(--gap-20); transition: 0.3s ease all; } #main-header .header-container { position: relative; z-index: 2; display: flex; align-items: center; height: var(--gap-80); border-radius: 8px; padding-inline: var(--gap-14); transition: 0.3s ease all; } #main-header .header-left { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; } #main-header .header-left .logoHeader { display: block; width: var(--gap-240); } #main-header .header-left .logoHeader img { width: 100%; height: auto; display: block; } #main-header .header-right .header-right-content { display: none; } #main-header #nav-toggle { width: var(--gap-40); height: var(--gap-40); cursor: pointer; } #main-header #nav-toggle span { display: none; } #main-header .header-center { position: absolute; inset-inline: var(--gap-14); top: 50%; transform: translateY(-50%); z-index: 1; } #main-header .header-center .header-buttons { display: flex; align-items: center; justify-content: space-between; direction: ltr; padding-inline-end: var(--gap-56); } #main-header .header-center .header-buttons a:not(.customer-service-link) { position: relative; background: var(--yellow); color: var(--black); border-radius: 8px; /* padding-block: var(--gap-8) var(--gap-14); */ padding-inline: var(--gap-24); height: 2.6vw; } #main-header .header-center .header-buttons a:not(.customer-service-link)::after { content: ""; position: absolute; inset-inline-start: calc(100% + 2.97vw); top: 50%; transform: translateY(-50%); width: var(--gap-56); height: var(--gap-28); background: var(--yellow); -webkit-mask: url("https://media.getmood.io/warehouse/dynamic/768017.svg") center / contain no-repeat; mask: url("https://media.getmood.io/warehouse/dynamic/768017.svg") center / contain no-repeat; animation: arrowSlide 1.4s ease-in-out infinite !important; } #main-header.open .header-center .header-buttons a::after { background: var(--pink); } @keyframes arrowSlide { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(-2.6vw, -50%); } } #main-header .header-center .header-buttons a.customer-service-link { display: flex; align-items: center; gap: 10px; } #main-header .header-center .header-buttons a.customer-service-link svg { width: 36px } /*--------------------/* TOP STATE - HOME + ABOUT (yellow, hover pink) /*--------------------*/ body:is(.home-page, .about) #main-header { background-color: transparent } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link { color: var(--yellow); } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link svg path { fill: var(--yellow); } body:is(.home-page, .about) #main-header:not(.bg):not(.open) #nav-toggle { background: url("https://media.getmood.io/warehouse/dynamic/768020.svg") center / contain no-repeat; } body:is(.home-page, .about) #main-header:not(.bg):not(.open) #nav-toggle:hover { background: url("https://media.getmood.io/warehouse/dynamic/768019.svg") center / contain no-repeat; } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-left .logoHeader { background: url("https://media.getmood.io/warehouse/dynamic/768023.svg") center / contain no-repeat; } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-left .logoHeader img { opacity: 0; } /*--------------------/* TOP STATE - ALL OTHER PAGES (pink, hover black) /*--------------------*/ body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a:not(.customer-service-link) { background: var(--pink); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a:not(.customer-service-link)::after { background: var(--pink); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link { color: var(--pink); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link svg path { fill: var(--pink); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) #nav-toggle { background: url("https://media.getmood.io/warehouse/dynamic/768019.svg") center / contain no-repeat; } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-left .logoHeader { background: url("https://media.getmood.io/warehouse/dynamic/768022.svg") center / contain no-repeat; } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-left .logoHeader img { opacity: 0; } /*--------------------/* SCROLLED STATE (.bg) - IDENTICAL FOR ALL PAGES: pink header, black text/icons /*--------------------*/ #main-header.bg { background-color: transparent; } #main-header.bg .header-container { box-shadow: 1px 3px 1.5px rgba(0,0,0,0.25); background: var(--pink); } #main-header.bg .header-center .header-buttons a:not(.customer-service-link) { color: var(--black); } #main-header.bg .header-center .header-buttons a:not(.customer-service-link)::after { background: var(--yellow); } #main-header.bg .header-center .header-buttons a.customer-service-link { color: var(--black); } #main-header.bg .header-center .header-buttons a.customer-service-link svg path { fill: var(--black); } #main-header.bg #nav-toggle { background: url("https://media.getmood.io/warehouse/dynamic/768018.svg") center / contain no-repeat; } #main-header.bg #nav-toggle:hover { background: url("https://media.getmood.io/warehouse/dynamic/768020.svg") center / contain no-repeat; } #main-header.bg .header-left .logoHeader { background: url("https://media.getmood.io/warehouse/dynamic/768021.svg") center / contain no-repeat; } #main-header.bg .header-left .logoHeader img { opacity: 0; } #main-header.bg.open .header-center .header-buttons a:not(.customer-service-link)::after { background: var(--pink); } @media(min-width: 1025px) { /* top state hover - home + about -> pink (each element hovers independently; hamburger has no hover asset in Figma, stays as-is) */ body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-center .header-buttons a:not(.customer-service-link):hover { background: var(--pink); } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-center .header-buttons a:not(.customer-service-link):hover::after { background: var(--pink); } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link:hover { color: var(--pink); } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link:hover svg path { fill: var(--pink); } body:is(.home-page, .about) #main-header:not(.bg):not(.open) .header-left .logoHeader:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768022.svg"); } /* top state hover - all other pages -> black (each element hovers independently; hamburger has no hover asset in Figma, stays as-is) */ body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a:not(.customer-service-link):hover { background: var(--black); color: var(--yellow); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a:not(.customer-service-link):hover::after { background: var(--black); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link:hover { color: var(--black); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link:hover svg { background-image: url("https://media.getmood.io/warehouse/dynamic/768024.svg"); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-center .header-buttons a.customer-service-link:hover svg path { fill: var(--black); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) .header-left .logoHeader:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768021.svg"); } body:not(.home-page):not(.about) #main-header:not(.bg):not(.open) #nav-toggle:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768018.svg"); } /* scrolled state hover - identical for all pages -> customer-service + logo pink (per Figma's BlackToPink component naming), order-now text pink; hamburger stays as-is */ #main-header.bg .header-center .header-buttons a:not(.customer-service-link):hover { color: var(--pink); } #main-header.bg .header-center .header-buttons a.customer-service-link:hover { color: var(--yellow); } #main-header.bg .header-center .header-buttons a.customer-service-link:hover svg *:not(mask) path, #main-header.bg .header-center .header-buttons a.customer-service-link:hover svg > path { fill: var(--yellow); } #main-header.bg .header-left .logoHeader:hover { background-image: url(" https://media.getmood.io/warehouse/dynamic/768023.svg "); } #main-header.bg .header-center .header-buttons a.customer-service-link svg { background-image: url("https://media.getmood.io/warehouse/dynamic/768024.svg"); } #main-header.bg .header-center .header-buttons a.customer-service-link svg > * { opacity: 0; } #main-header.bg .header-center .header-buttons a.customer-service-link:hover svg { background-image: url("https://media.getmood.io/warehouse/dynamic/768026.svg"); } #main-header.open #nav-toggle:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/784139.svg"); } #main-header.open .header-left .logoHeader:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768022.svg"); } #main-header.bg.open .header-center .header-buttons a:not(.customer-service-link):hover { background: var(--yellow); } } @media(max-width: 1024px) { #main-header { padding: 0; } #main-header .header-container { height: 61px; padding-inline: 20px; flex-direction: row-reverse; justify-content: space-between; border-radius: 0; } #main-header .header-container .header-left { position: unset; transform: unset; } #main-header .header-left .logoHeader { width: 168px; } #main-header .menu-nav #nav-toggle { width: 21px; height: 21px; } #main-header.bg.open #nav-toggle:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/769262.svg"); } } /**/ /*------------------------------------------/* MOBILE BOTTOM NAV /*------------------------------------------*/ @media(max-width: 1024px) { #main-header .header-center { display: none; } .mobile-bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; height: var(--gap-52); background: var(--pink); border-radius: 3px 3px 0 0; box-shadow: 0 -1px 4px rgba(0,0,0,0.25); } .mobile-bottom-nav .header-buttons { display: flex; direction: rtl; width: 100%; height: 100%; padding: 0; } .mobile-bottom-nav .header-buttons a { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 0; background: transparent; border-radius: 0; color: var(--black); font-family: var(--font-3); font-size: 26px; line-height: 30px; letter-spacing: normal; border-inline-end: 1px solid var(--black); } .mobile-bottom-nav .header-buttons a::after { display: none; } .mobile-bottom-nav .header-buttons a.customer-service-link { border-inline-end: none; flex-direction: row-reverse; gap: 10px; } .mobile-bottom-nav .header-buttons a.customer-service-link svg { width: 24px; } .mobile-bottom-nav .header-buttons a.customer-service-link svg *:not(mask) path, .mobile-bottom-nav .header-buttons a.customer-service-link svg > path { fill: var(--black); } body:has(#main-header.open) .mobile-bottom-nav { display: none; } footer { margin-bottom: var(--gap-52); } } /**/ /*------------------------------------------/* SIDE MENU /*------------------------------------------*/ #main-header .menu-nav #menu.side-menu-mode { position: fixed; inset: 0; z-index: 1; margin: 0; padding: var(--headerHeight, 6.5625vw) 0 0; background: var(--blue); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.3s ease opacity, 0.3s ease visibility; } #main-header.open .menu-nav #menu.side-menu-mode { opacity: 1; visibility: visible; pointer-events: auto; } html:has(#main-header.open) { overflow: hidden; } #main-header .menu-nav #menu.side-menu-mode::before { content: ""; position: absolute; top: var(--headerHeight, 6.5625vw); inset-inline: 0; height: 1px; background: var(--black); z-index: 2; pointer-events: none; } #main-header .menu-nav #menu.side-menu-mode li { margin: 0; } #main-header .menu-nav #menu.side-menu-mode li.logoInMenu, #main-header .menu-nav #menu.side-menu-mode li.social-mobile { display: none; } #main-header .menu-nav #menu.side-menu-mode li[data-cat-mod] { flex: 1; display: flex; align-items: center; margin-inline-end: 20.208vw; border-inline-end: 1px solid var(--black); border-block-start: 1px solid var(--black); } #main-header .menu-nav #menu.side-menu-mode li[data-cat-mod]:first-child { border-block-start: none; } #main-header .menu-nav #menu.side-menu-mode li[data-cat-mod] a { display: block; width: 100%; text-align: start; padding-inline-start: var(--gap-32); } @media(min-width: 1025px) { #main-header .menu-nav #menu.side-menu-mode li[data-cat-mod] a:hover { color: var(--pink); } } @media(max-width: 1024px) { #main-header .menu-nav #menu.side-menu-mode { padding-top: 61px; } #main-header .menu-nav #menu.side-menu-mode::before { top: 61px; } #main-header .menu-nav #menu.side-menu-mode li:is([data-cat-mod], .menu-cs, .menu-order) { text-decoration: none; flex: 0 0 auto; min-height: 7.496vh; display: flex; align-items: center; margin-inline-end: 0; border-inline-end: none; border-block-start: 1px solid var(--black); } #main-header .menu-nav #menu.side-menu-mode li:is([data-cat-mod], .menu-cs, .menu-order) a { display: block; width: 100%; text-align: start; padding-inline: var(--gap-20); } #main-header .menu-nav #menu.side-menu-mode li:is(.menu-cs, .menu-order) a { font-family: var(--font-2); color: var(--black); } #main-header .menu-nav #menu.side-menu-mode li.menu-order { border-block-start: none; } #main-header .menu-nav #menu.side-menu-mode li.menu-order a { display: flex; align-items: center; gap: var(--gap-16); position: relative; } #main-header .menu-nav #menu.side-menu-mode li.menu-order a::after { content: ""; width: var(--gap-56); height: var(--gap-24); /* background: var(--pink); */ /* -webkit-mask: url("https://media.getmood.io/warehouse/dynamic/768017.svg") center / contain no-repeat; */ /* mask: url("https://media.getmood.io/warehouse/dynamic/768017.svg") center / contain no-repeat; */ flex-shrink: 0; background-image: url("https://media.getmood.io/warehouse/dynamic/776014.svg"); background-position: center; background-repeat: no-repeat; animation: arrowSlide 1.4s ease-in-out infinite !important; position: absolute; left: 25%; top: 55%; } #main-header .menu-nav #menu.side-menu-mode li.menu-cs { border-bottom: 1px solid var(--black); } } /**/ /*------------------------------------------/* MENU UTILITY /*------------------------------------------*/ #main-header .menu-nav #menu.side-menu-mode .menu-utility { position: absolute; left: 0; bottom: 0; width: 20.208vw; display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); padding: 0 var(--gap-40) var(--gap-40); direction: rtl; margin: 0; float: none; box-sizing: border-box; } #main-header .menu-nav #menu.side-menu-mode .menu-utility p { margin: 0; text-align: center; width: 100%; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-contact p > * { padding: 0; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-links p > span a { padding: 0; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-links p > a { padding: 0; } #main-header .menu-nav #menu.side-menu-mode .menu-utility :is(.menu-contact, .menu-links) { display: flex; flex-direction: column; align-items: center; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-contact { gap: var(--gap-8); } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-links { gap: var(--gap-12); } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-whatsapp { display: block; width: var(--gap-96); height: var(--gap-96); background: url("https://media.getmood.io/warehouse/dynamic/769671.svg") center / contain no-repeat; transition: 0.3s ease all; padding: 0; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-whatsapp img { display: none; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-social a { display: inline-flex; align-items: center; gap: var(--gap-16); direction: ltr; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-social img { height: var(--gap-32); width: auto; display: block; transition: 0.3s ease all; } #main-header .menu-nav #menu.side-menu-mode .menu-stamp { position: absolute; left: -2%; top: calc(var(--headerHeight) + var(--gap-30)); width: 23.542vw; height: 13.021vw; } @media(min-width: 1025px) { #main-header .menu-nav #menu.side-menu-mode .menu-utility :is(.menu-email, .menu-phone, .menu-link) a:hover { color: var(--pink); } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-whatsapp:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/769670.svg"); } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-social a { -webkit-mask-image: var(--svg-url); mask-image: var(--svg-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: filter 0.3s ease; filter: none; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-social a:hover img { filter: var(--filter-pink); } } @media(max-width: 1024px) { #main-header .menu-nav #menu.side-menu-mode .menu-utility { position: static; inset: auto; width: 100%; align-items: stretch; gap: 20px; padding: 20px 17px; margin-top: auto; } #main-header .menu-nav #menu.side-menu-mode .menu-utility p { text-align: right; } #main-header .menu-nav #menu.side-menu-mode .menu-utility :is(.menu-contact, .menu-whatsapp) { display: none; } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-social { display: flex; flex-direction: row; justify-content: flex-start; gap: var(--gap-20); } #main-header .menu-nav #menu.side-menu-mode .menu-utility .menu-social a { padding: 0; margin: 0; } #main-header .menu-nav #menu.side-menu-mode .menu-stamp { top: auto; bottom: -3%; left: -25%; width: 419px; height: 238px; } } /**/ /*------------------------------------------/* MENU OPEN NAVBAR /*------------------------------------------*/ #main-header.open .header-center { z-index: 2; } #main-header.open .header-center .header-buttons a:not(.customer-service-link) { background: var(--pink); color: var(--black); } #main-header.open .header-center .header-buttons aa:not(.customer-service-link):after { width: var(--gap-100); background-image: url("https://media.getmood.io/warehouse/dynamic/768057.svg"); } #main-header.open .header-center .header-buttons a.customer-service-link { display: none; } #main-header.open .header-left { position: absolute; left: auto; right: calc(var(--gap-40) + var(--gap-32)); top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; } #main-header.open .header-left .logoHeader { width: var(--gap-220); height: var(--gap-40); background: url("https://media.getmood.io/warehouse/dynamic/768021.svg") center / contain no-repeat; } #main-header.open .header-left .logoHeader img { opacity: 0; } #main-header.open #nav-toggle { position: absolute; left: auto; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; background-image: url("https://media.getmood.io/warehouse/dynamic/769262.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; } @media(min-width: 1025px) { #main-header.open .header-center .header-buttons a:not(.customer-service-link) :hover { background: var(--yellow); } #main-header.open .header-center .header-buttons a:not(.customer-service-link):hover { color: var(--pink); background: vaR(--yellow); } } @media(max-width: 1024px) { #main-header.open .header-left { position: unset; right: auto; transform: unset; } #main-header.open .header-left .logoHeader { width: 168px; height: 29px; } #main-header.open #nav-toggle { transform: unset; z-index: 10; position: relative; } } /**/ /*------------------------------------------/* HEADER MENU - SUPERSEDED by home/about vs other-pages top/scroll/hover logic in HEADER block /*------------------------------------------*/ /* body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a:not(.customer-service-link) { background: var(--pink); color: var(--black); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a:not(.customer-service-link):hover { color: var(--yellow); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a:not(.customer-service-link):after { background: var(--pink); -webkit-mask: url("https://media.getmood.io/warehouse/dynamic/768017.svg") center / contain no-repeat; mask: url("https://media.getmood.io/warehouse/dynamic/768017.svg") center / contain no-repeat; } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a.customer-service-link { color: var(--pink); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a.customer-service-link:hover { color: var(--black); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a.customer-service-link svg path { fill:var(--pink); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a.customer-service-link:hover svg *:not(mask) path, body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-center .header-buttons a.customer-service-link:hover svg > path { fill: var(--black); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) #nav-toggle { background-image: url("https://media.getmood.io/warehouse/dynamic/768019.svg"); } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-left .logoHeader { background: url("https://media.getmood.io/warehouse/dynamic/768022.svg") center / contain no-repeat; } body:is(.menu, .restaurants, .recipes, .page-404, .career, .faq,.privacy-policy-page, .accessabilityMainPage, .FormResultPage) #main-header:not(.open) .header-left .logoHeader img { opacity: 0; } @media(min-width: 1025px) { body:is(.menu, .restaurants) #main-header:not(.open) .header-center .header-buttons a:first-child:hover { background: var(--black); } body:is(.menu, .restaurants) #main-header:not(.open) .header-center .header-buttons a:last-child:hover { color: var(--black); } } */ /**/ /*------------------------------------------/* HOME GALLERY BACKGROUND /*------------------------------------------*/ body:is(.home-page) #home-gallery { height: 100vh; position: sticky; top: 0; z-index: 0; } @media(max-width: 1024px) { #home-gallery video { height: 100% !important; } } /**/ /*------------------------------------------/* FOOTER /*------------------------------------------*/ #SiteFooter { width: 100%; background: var(--pink); box-sizing: border-box; padding: var(--gap-90) var(--gap-60) var(--gap-40); } #SiteFooter ul { list-style: none; margin: 0; padding: 0; } #SiteFooter li { margin: 0; } #SiteFooter .site-credit { display: none; } #SiteFooter .footer-text-divided { direction: ltr; display: grid; grid-template-columns: auto 1fr auto 1fr auto; grid-template-rows: auto var(--gap-48) auto var(--gap-270) auto var(--gap-8) auto var(--gap-40) auto; grid-template-areas: "logo logo logo logo logo" ". . . . ." "social . email . nav" ". . . . ." "grouptxt . . . ." ". . . . ." "katsav . . . links" ". . . . ." "markus . . . copy"; align-items: start; } #SiteFooter .footer-text-divided .footer-text-right, #SiteFooter .footer-text-divided .footer-text-middle, #SiteFooter .footer-text-divided .footer-text-left { display: contents; } #SiteFooter .footer-text-divided p:not(:has(*)) { display: none; } #SiteFooter .footer-text-divided .footerSocialIcons { display: none; } #SiteFooter .footer-text-divided .footer-text-right > p:has(img) { grid-area: logo; margin: 0; } #SiteFooter .footer-text-divided .footer-text-right > p:has(img) img { display: block; width: 66.823vw; height: auto; margin-inline-start: auto; -webkit-mask-image: var(--svg-url); mask-image: var(--svg-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: filter 0.3s ease; filter: none; margin: 0; } #SiteFooter .footer-text-divided .footer-text-right > p:has(img) a:hover img { filter: var(--filter-yellow); opacity: 0; } #SiteFooter .footer-text-divided .footer-text-right > ul { grid-area: nav; direction: rtl; display: grid; grid-template-columns: repeat(3, auto); column-gap: var(--gap-120); row-gap: var(--gap-8); } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) { grid-area: social; direction: rtl; text-align: left; font-size: 0; margin: 0; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) a + a { margin-inline-start: var(--gap-16); } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) img { display: inline-block; vertical-align: middle; height: var(--gap-32); width: auto; } #SiteFooter .footer-text-divided .footer-text-left > ul { grid-area: email; direction: rtl; text-align: right; display: flex; flex-direction: column; gap: var(--gap-8); } #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(1) { grid-area: links; direction: rtl; display: grid; grid-template-columns: repeat(3, auto); column-gap: var(--gap-120); } #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(2) { grid-area: copy; direction: rtl; text-align: right; } #SiteFooter .footer-text-divided .footer-text-middle > p:nth-of-type(2) { display: block; grid-area: grouptxt; direction: rtl; text-align: right; transform: translateY(-10px); } #SiteFooter .footer-text-divided .footer-text-middle > p:has(img) { grid-area: katsav; direction: rtl; margin: 0; } #SiteFooter .footer-text-divided .footer-text-middle > p:has(img) img { display: block; width: var(--gap-240); height: auto; } #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(3) { grid-area: markus; direction: rtl; text-align: left; } #SiteFooter .footer-text-divided :is(.footer-text-right > ul, .footer-text-middle > ul:nth-of-type(1)) li a { display: block; } @media(min-width: 1025px) { #SiteFooter .footer-text-divided .footer-text-right > ul li a:hover, #SiteFooter .footer-text-divided .footer-text-left > ul li a:hover, #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(1) li a:hover { /*text-decoration: underline;*/ color: var(--yellow) } /*#SiteFooter .footer-text-divided .footer-text-middle > p img, .footer-text-left img { transition: filter 0.3s ease; filter: none; } #SiteFooter .footer-text-divided .footer-text-middle > p a:hover img, .footer-text-left a:hover img { -webkit-mask-image: url('https://media.getmood.io/warehouse/dynamic/768043.svg'); mask-image: url('https://media.getmood.io/warehouse/dynamic/768043.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--yellow); filter: brightness(0) saturate(100%) invert(91%) sepia(91%) saturate(1354%) hue-rotate(359deg) brightness(102%) contrast(105%); } .footer-text-left a[title="fb"]:hover img { -webkit-mask-image: url('https://media.getmood.io/warehouse/dynamic/768039.svg'); mask-image: url('https://media.getmood.io/warehouse/dynamic/768039.svg'); } .footer-text-left a[title="tiktok"]:hover img { -webkit-mask-image: url('https://media.getmood.io/warehouse/dynamic/768045.svg'); mask-image: url('https://media.getmood.io/warehouse/dynamic/768045.svg'); } .footer-text-left a[title="instagram"]:hover img { -webkit-mask-image: url('https://media.getmood.io/warehouse/dynamic/768041.svg'); mask-image: url('https://media.getmood.io/warehouse/dynamic/768041.svg'); } .footer-text-left a[title="whatsapp"]:hover img { -webkit-mask-image: url('https://media.getmood.io/warehouse/dynamic/768047.svg'); mask-image: url('https://media.getmood.io/warehouse/dynamic/768047.svg'); } */ #SiteFooter .footer-text-divided .footer-text-middle > p img, .footer-text-left img { -webkit-mask-image: var(--svg-url); mask-image: var(--svg-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: filter 0.3s ease; filter: none; } #SiteFooter .footer-text-divided .footer-text-middle > p a:hover img, #SiteFooter .footer-text-divided .footer-text-middle > p img:hover, #SiteFooter .footer-text-divided .footer-text-middle > p:has(img) a:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768044.svg"); background-position: center; background-size: contain; display: flex; background-position: right; background-repeat: no-repeat; } #SiteFooter .footer-text-divided .footer-text-middle > p:has(img) a:hover img { opacity: 0; } .footer-text-left a:hover img, .footer-text-left img:hover { filter: var(--filter-yellow); } #SiteFooter .footer-text-divided .footer-text-right > p:has(img) a { display: flex; justify-content: flex-end; width: fit-content; margin-inline-start: auto; } #SiteFooter .footer-text-divided .footer-text-right > p:has(img) a:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768038.svg"); background-position: right; background-repeat: no-repeat; background-size: contain; } } @media(max-width: 1024px) { #SiteFooter { padding: var(--gap-40) var(--gap-20); } #SiteFooter .footer-text-divided { grid-template-columns: auto 1fr; grid-template-rows: auto var(--gap-20) auto 76px auto 104px auto var(--gap-8) auto var(--gap-16) auto var(--gap-8) auto; grid-template-areas: "logo logo" ". ." "social nav" ". ." "email email" ". ." "grouptxt grouptxt" ". ." "katsav links" ". ." "copy copy" ". ." "markus markus"; column-gap: var(--gap-20); align-items: start; justify-items: stretch; text-align: right; padding-block: 0; } #SiteFooter .footer-text-divided .footer-text-right > p:has(img) img { width: 100%; margin-inline: 0; } #SiteFooter .footer-text-divided .footer-text-right > ul { justify-self: end; grid-template-columns: repeat(2, auto); column-gap: var(--gap-32); row-gap: var(--gap-8); text-align: right; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) { justify-self: start; display: flex; flex-wrap: wrap; width: 64px; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) a { display: inline-flex; justify-content: center; width: var(--gap-24); margin: 0 0 var(--gap-12); } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) a:nth-of-type(odd) { margin-inline-end: var(--gap-16); } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) a + a { margin-inline-start: 0; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a) img { height: var(--gap-24); width: auto; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a:nth-child(4)) { display: grid; grid-template-columns: repeat(2,1fr); width: fit-content; column-gap: 19px; row-gap: 22px; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a:nth-child(4)) a { margin: 0; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a:nth-child(4)) a[title="whatsapp"] { order: 1; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a:nth-child(4)) a[title="instagram"] { order: 2; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a:nth-child(4)) a[title="tiktok"] { order: 3; } #SiteFooter .footer-text-divided .footer-text-left > p:has(a:nth-child(4)) a[title="fb"] { order: 4; } #SiteFooter .footer-text-divided .footer-text-left > ul { justify-self: end; text-align: right; flex-direction: column-reverse; } #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(1) { justify-self: end; grid-template-columns: auto; row-gap: var(--gap-8); text-align: right; margin-top: -27px; } #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(2) { text-align: right; } #SiteFooter .footer-text-divided .footer-text-middle > p:has(img) { justify-self: start; } #SiteFooter .footer-text-divided .footer-text-middle > p:has(img) img { width: 112px; margin-inline: 0; } #SiteFooter .footer-text-divided .footer-text-middle > ul:nth-of-type(3) { text-align: right; } #SiteFooter .footer-text-divided .footer-text-middle > p:nth-of-type(2) { text-align: left; transform: translateY(0px); } } /**/ /*------------------------------------------/* SECTIONS /*------------------------------------------*/ body:is(.home-page) #allSectionsWrapper { background: transparent; } body:is(.menu) #allSectionsWrapper { background: var(--yellow); } #allSectionsWrapper .section.grid-content-section.foodi-carousel { position: relative; box-sizing: border-box; display: flex; flex-direction: column; background: var(--yellow); padding-block: var(--gap-200) var(--gap-270); padding-inline: var(--gap-100); overflow: hidden; } #allSectionsWrapper .section.grid-content-section.foodi-carousel::before { content: ""; position: absolute; z-index: 0; top: var(--gap-200); left: 50%; transform: translateX(-50%); width: 56.25vw; height: 46.094vw; background: var(--white); border-radius: var(--gap-30); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .section-title { position: relative; z-index: 1; text-align: center; max-width: 46.146vw; margin-inline: auto; margin-top: var(--gap-48); margin-bottom: var(--gap-72); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes { position: relative; z-index: 1; direction: ltr; height: 27.865vw; margin-bottom: var(--gap-140); touch-action: pan-y; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; flex-direction: column; align-items: center; width: 24.271vw; transition: 0.45s ease left, 0.45s ease width, 0.4s ease opacity; pointer-events: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box:is(.is-prev, .is-center, .is-next) { display: flex; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-prev { left: calc(50% - 28.125vw); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-next { left: calc(50% + 28.125vw); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center { z-index: 2; width: 35.938vw; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-leaving { z-index: 0; pointer-events: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box .grid-box-image { position: relative; z-index: 2; width: 100%; height: auto; aspect-ratio: 690 / 535; margin: 0; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box .grid-box-image .box-image-animation { display: block; height: 100%; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box .grid-box-image img { width: 100%; height: 100%; object-fit: contain; display: block; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box .grid-box-title, #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box .grid-box-subtitle { display: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-title { display: block; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); bottom: calc(100% - var(--gap-100)); width: 100%; text-align: center; animation: foodiFadeUp 0.5s ease both; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle { display: block; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; animation: foodiFadeUp 0.5s ease 0.06s both; display: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle:not(.button) { top: calc(100% - var(--gap-8)); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle span { color: var(--pink); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle:not(.button) span { display: inline-block; width: var(--gap-200); aspect-ratio: 159 / 30; font-size: 0; background: url("https://media.getmood.io/warehouse/dynamic/768064.svg") center no-repeat; background-size: contain; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle.button { top: calc(100% + var(--gap-40)); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle.button a { background: var(--pink); padding: var(--gap-8) var(--gap-24) var(--gap-14); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: var(--gap-40); height: var(--gap-40); padding: 0; border: none; background: transparent url("https://media.getmood.io/warehouse/dynamic/768057.svg") center no-repeat; background-size: contain; cursor: pointer; z-index: 3; transition: 0.3s ease all; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow-prev { left: var(--gap-68); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow-next { right: var(--gap-68); transform: translateY(-50%) rotate(180deg); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow.is-disabled { opacity: 0.25; pointer-events: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-title { background-size: cover; background-position: center; background-repeat: no-repeat; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-title h3 { opacity: 0; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.leg .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/768061.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.bucket .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/768063.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.sandwich .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/768060.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.backet-two .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/768058.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.fries .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/768062.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.corn .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/768059.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn { padding-block: 0; position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); background: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn a.sec-button { background: var(--pink); padding-block: 0; min-height: var(--gap-52); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn:before { content: ""; display: block; background-image: url("https://media.getmood.io/warehouse/dynamic/768064.svg"); height: var(--gap-30); background-position: center; background-repeat: no-repeat; margin-bottom: var(--gap-18); } #allSectionsWrapper .section.grid-content-section.branches { display: flex; flex-direction: column; background: var(--blue); padding-block: var(--gap-180) var(--gap-220); padding-inline: var(--gap-180); box-sizing: border-box; } #allSectionsWrapper .section.grid-content-section.branches .section-title { order: 1; text-align: center; margin-bottom: var(--gap-72); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes { order: 2; display: flex; gap: var(--gap-30); width: 100%; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes::-webkit-scrollbar { display: none; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box { flex: 1; width: auto; display: flex; flex-direction: column; box-sizing: border-box; background: var(--white); border-radius: 8px; padding: var(--gap-36) var(--gap-48) var(--gap-32); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-title { text-align: start; pointer-events: none; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-subtitle { margin-top: var(--gap-10); text-align: start; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext { position: relative; margin-top: var(--gap-40); text-align: start; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p { margin: 0; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext img { display: inline-block; vertical-align: middle; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:nth-child(1) { margin-bottom: var(--gap-12); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:nth-child(1) img { width: var(--gap-24); height: auto; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:nth-child(5) { display: none; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:nth-child(6) { position: absolute; left: 0; bottom: calc(var(--gap-30) + var(--gap-12)); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:nth-child(7) { position: absolute; left: 0; bottom: 0; font-size: 0; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:nth-child(7) a + a { margin-inline-start: var(--gap-12); } #allSectionsWrapper .section.grid-content-section.branches .section-topText { order: 3; text-align: center; margin-top: var(--gap-60); } #allSectionsWrapper .section.grid-content-section.branches .section-topText p { margin: 0; } #allSectionsWrapper .section.grid-content-section.branches .section-topText p a { font-size: var(--fs-32); font-family: var(--font-2); color: var(--black); line-height: 1.3; letter-spacing: normal; font-weight: 700; display: flex; justify-content: center; align-items:center;} #allSectionsWrapper .section.grid-text-section.note { padding-block: var(--gap-120); } #allSectionsWrapper .section.grid-text-section.note .grid-text .grid-text-content { display: flex; flex-direction: column; gap: var(--gap-32); font-size: var(--fs-20); } @media(max-width: 1024px) { #allSectionsWrapper .section.grid-content-section.branches { padding-block: var(--gap-64); padding-inline: 0; } #allSectionsWrapper .section.grid-content-section.branches .section-title { margin-bottom: var(--gap-40); padding-inline: var(--gap-20); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--gap-14); padding-inline: var(--gap-40); scroll-snap-type: x mandatory; scrollbar-width: none; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box { flex: 0 0 auto; width: 296px; min-height: 250px; padding: var(--gap-20); border-radius: 3px; scroll-snap-align: center; } #allSectionsWrapper .section.grid-content-section.branches .section-topText { margin-top: var(--gap-40); padding-inline: var(--gap-20); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn { bottom: 29px; width: 100%; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn a.sec-button { min-height: 48px; font-size: 26px; align-content: center; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn:before { height: 26px; background-size: contain; margin-bottom: 10px; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box:is(.is-next,.is-prev) { transform: translate(-50%, -50%) scale(1.3); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.sandwich .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/784261.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.backet-two .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/784295.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.bucket .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/784296.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.fries .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/784263.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.leg .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/784262.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.corn .grid-box-title { background-image: url("https://media.getmood.io/warehouse/dynamic/784260.svg"); } } @media(min-width: 1024px) { #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a { min-height: var(--gap-28); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a:hover { background-position: center; background-size: auto; background-repeat: no-repeat; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a:hover img { opacity: 0; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a[title="wolt"]:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768055.svg"); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext p:has(a) { display: flex; } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a[title="whatsapp"]:hover { background-image: url("https://media.getmood.io/warehouse/dynamic/768053.svg"); } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a[title="whatsapp"]:hover img { } #allSectionsWrapper .section.grid-content-section.branches .grid-boxes .grid-box .grid-box-fulltext a[title="waze"] { background-image: url("https://media.getmood.io/warehouse/dynamic/768051.svg"); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .content-section-Btn a.sec-button:hover { background: var(--yellow); } } /*--------------------/* MENU ITEM /*--------------------*/ #LobbyModule #lobbyview #headline { text-align: center; } #allSectionsWrapper .section.grid-content-section.menu-item { box-sizing: border-box; padding-inline: var(--gap-290); } #allSectionsWrapper .section.grid-content-section.menu-item .grid-boxes {pointer-events:none} #allSectionsWrapper .section.grid-content-section.menu-item section.restaurant { width: 100%; margin-bottom: 54px; max-height: 630px; } #allSectionsWrapper .section.grid-content-section.menu-item .section-title { text-align: center; padding-bottom: var(--gap-40); border-bottom: 5px solid var(--pink); margin-bottom: var(--gap-52); } #allSectionsWrapper .section.grid-content-section.menu-item .grid-boxes .grid-box .grid-box-subtitle { margin: 0; } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes .grid-box .grid-box-subtitle span { color: var(--pink); font-family: var(--font-1); } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) { padding-block: 0 var(--gap-160); } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap-30); row-gap: var(--gap-52); align-items: stretch; } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes .grid-box { width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; gap: var(--gap-24); padding-bottom: var(--gap-40); border-bottom: 3px solid var(--pink); pointer-events: none; } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes .grid-box.lastItem { grid-column: 2; } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(2) { float: right; width: 50%; padding-inline: var(--gap-290) var(--gap-16); padding-block: 0 var(--gap-180); } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(3) { float: left; width: 50%; padding-inline: var(--gap-16) var(--gap-290); padding-block: 0 var(--gap-180); } #allSectionsWrapper .section.grid-content-section.menu-item:is(:nth-of-type(2), :nth-of-type(3)) .grid-boxes { display: flex; flex-direction: column; align-items: center; gap: var(--gap-40); } #allSectionsWrapper .section.grid-content-section.menu-item:is(:nth-of-type(2), :nth-of-type(3)) .grid-boxes .grid-box { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; /*gap: var(--gap-24);*/ } #allSectionsWrapper .section.grid-content-section:is(.menu-item:nth-of-type(4), .menu-item:nth-of-type(5)) { clear: both; padding-block: 0 var(--gap-140); } #allSectionsWrapper .section.grid-content-section:is(.menu-item:nth-of-type(4), .menu-item:nth-of-type(5)) .grid-boxes { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--gap-24) var(--gap-32); } #allSectionsWrapper .section.grid-content-section:is(.menu-item:nth-of-type(4), .menu-item:nth-of-type(5)) .grid-boxes .grid-box { width: auto; text-align: center; } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(5) .grid-boxes .grid-box:last-child { width: 100%; } .menu #allSectionsWrapper .section.grid-text-section.note { padding: 0 var(--gap-24) var(--gap-72); } .menu #allSectionsWrapper .section.grid-text-section.note .grid-text .grid-text-content { color: var(--pink); font-size: var(--fs-20); gap: var(--gap-12); } .menu #allSectionsWrapper .section.grid-text-section.note .grid-text .grid-text-content img { width: 25px; aspect-ratio: 1 / 1; } @media(max-width: 1024px) { #allSectionsWrapper .section.grid-content-section.menu-item { float: none; width: 100%; clear: both; padding-inline: var(--gap-20); padding-block: 0 var(--gap-80); } #allSectionsWrapper .section.grid-content-section.menu-item:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) { padding-block: 0 var(--gap-80); } #allSectionsWrapper .section.grid-content-section.menu-item:is(:nth-of-type(2), :nth-of-type(3)) { float: none; width: 100%; padding-inline: var(--gap-20); } #allSectionsWrapper .section.grid-content-section.menu-item .section-title { padding-bottom: var(--gap-10); margin-bottom: var(--gap-20); border-bottom: 3px solid var(--pink); } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes { grid-template-columns: 1fr; row-gap: var(--gap-24); } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes .grid-box { gap: var(--gap-6); padding-bottom: var(--gap-20); } #allSectionsWrapper .section.grid-content-section.menu-item:nth-of-type(1) .grid-boxes .grid-box.lastItem { grid-column: auto; } #allSectionsWrapper .section.grid-content-section:is(.menu-item:nth-of-type(4), .menu-item:nth-of-type(5)) .grid-boxes { flex-direction: column; align-items: center; gap: var(--gap-32); } #allSectionsWrapper .section.grid-content-section:is(.menu-item:nth-of-type(4), .menu-item:nth-of-type(5)) .grid-boxes .grid-box img { width: 20px; } .menu #allSectionsWrapper .section.grid-text-section.note .grid-text .grid-text-content { font-size: 13px } .menu #allSectionsWrapper .section.grid-text-section.note .grid-text .grid-text-content img { width: 16px; } #allSectionsWrapper .section.grid-content-section.menu-item section.restaurant { height: 228px; margin-bottom: 30px; } #allSectionsWrapper .section.grid-content-section.menu-item section.restaurant .gallery-container::after { background: rgba(0, 0, 0, 0.15); } } /**/ #allSectionsWrapper .section.grid-text-section.circle-text { background: var(--yellow); border-radius: 1000px 1000px 0 0; height: 35.94vw; height: 36.7vw; display: flex; justify-content: center; align-items: center; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text { text-align: center; max-width: 61.3vw; margin-top: 5.99vw; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text lottie-player#crunchy-bite { display: block; width: 43.073vw; margin-inline: auto; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text lottie-player#crunchy-bite svg { width: 100% !important; height: fit-content !important; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text .grid-text-content h2 { font-size: var(--fs-70); margin-block: var(--gap-14); font-family: var(--font-3); } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text lottie-player#crunchy-bite + .grid-text-content h2 { letter-spacing: 0; line-height: 1.2; } @media(max-width: 1024px) { #allSectionsWrapper .section.grid-text-section.circle-text { height: auto; border-radius: 1000px 1000px 0 0; padding-block: var(--gap-80) var(--gap-32); padding-inline: var(--gap-24); box-sizing: border-box; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text { max-width: 100%; margin-top: 0; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text lottie-player#crunchy-bite { width: 59.808vw; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text .grid-text-content h2 { font-size: 35px; } #allSectionsWrapper .section.grid-text-section.circle-text .grid-text lottie-player#crunchy-bite + .grid-text-content h2 { line-height: 1.25; } } /*------------------------------------------/* ROTATING STAMP /*------------------------------------------*/ .rotating-stamp { position: relative; display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; width: 13.802vw; transform: rotate(-15deg); } .rotating-stamp .rotating-stamp-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: stamp-spin 20s linear infinite; } .rotating-stamp .rotating-stamp-letter { position: relative; width: 48%; height: auto; } @keyframes stamp-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* location: home — foodi-carousel top-left (section already position:relative; keep inside its overflow:hidden) */ #allSectionsWrapper .section.grid-content-section.foodi-carousel > .rotating-stamp.stamp-home { position: absolute; z-index: 2; top: 3vw; left: 14vw; } /* location: recipe — below the share column */ body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe { position: relative; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe > .rotating-stamp.stamp-recipe { position: absolute; z-index: 2; top: 100%; left: 40px; margin-top: var(--gap-56); width: 10vw; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p a { display: flex; align-items: center; gap: 12px; } @media(max-width: 1024px) { .rotating-stamp { width: 87px; } #allSectionsWrapper .section.grid-content-section.foodi-carousel > .rotating-stamp.stamp-home { top: var(--gap-24); left: var(--gap-20); display: none } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe > .rotating-stamp.stamp-recipe { margin-top: 0; top: 110px; left: 20px; width: 87px; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p img:first-child { display: none; } } /**/ /*------------------------------------------/* ORDER POPUP /*------------------------------------------*/ #order-popup .modal-content { position: relative; width: 26.25vw; margin-inline: auto; padding-block: var(--gap-24) 0; background: var(--yellow); border: none; border-radius: 10px; box-sizing: border-box; } :is(#order-popup, #order-popup-mode) .close { position: absolute; top: var(--gap-16); left: var(--gap-16); width: var(--gap-20); height: var(--gap-20); margin: 0; padding: 0; opacity: 1; background-image: url("https://media.getmood.io/warehouse/dynamic/769262.svg"); cursor: pointer; background-position: center; background-size: contain; } :is(#order-popup, #order-popup-mode) .close svg { opacity: 0; } :is(#order-popup, #order-popup-mode) .close svg { display: block; width: 100%; height: 100%; } #order-popup .order-popup-head { padding-inline: var(--gap-24); padding-bottom: var(--gap-20); text-align: center; } #order-popup .order-popup-title { display: block; width: 18.542vw; height: auto; margin: 0 auto var(--gap-10); } #order-popup .order-popup-title-mobile { display: none; } #order-popup .order-popup-branches { display: flex; flex-direction: column; } #order-popup .order-popup-branch { display: block; padding-block: var(--gap-24); text-align: center; border-top: 2px solid rgba(0,0,0,0.1); transition: 0.3s ease all; } #order-popup-mode .modal-content { position: relative; width: 26.042vw; margin-inline: auto; padding: 0; background: var(--yellow); border: none; border-radius: var(--gap-14); box-sizing: border-box; overflow: hidden; } #order-popup-mode .order-popup-mode-head { padding: var(--gap-12) var(--gap-14) var(--gap-20); text-align: center; } #order-popup-mode .order-popup-mode-head .order-popup-mode-title { margin: 0; } #order-popup-mode .order-popup-modes { display: flex; border-top: 2px solid var(--black); } #order-popup-mode .order-popup-mode { flex: 1; height: var(--gap-76); display: grid; place-items: center; text-align: center; transition: 0.3s ease all; } #order-popup-mode .order-popup-mode:first-child { border-inline-end: 2px solid var(--black); } @media(min-width: 1025px) { :is(#order-popup .order-popup-branch, #order-popup-mode .order-popup-mode):hover { background: rgba(0,0,0,0.05); color: var(--pink) } } @media(max-width: 1024px) { #order-popup .modal-content { width: 78.6vw; padding-block: var(--gap-20); } #order-popup .order-popup-title-desktop { display: none; } #order-popup .order-popup-title-mobile { display: block; width: 60vw; } #order-popup .order-popup-branch { padding-block: var(--gap-20); } #order-popup-mode .modal-content { width: 78.6vw; } #order-popup-mode .order-popup-mode { height: 64px; } } /**/ #allSectionsWrapper .section.grid-text-section.infinite-slider { background: var(--blue); overflow: hidden; display: flex; align-items: center; padding-block: var(--gap-18) 0; /* animation: scrollTextInvert 30s linear infinite; */ } #allSectionsWrapper .section.grid-text-section.infinite-slider .section-title { display: none; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text { width: 100%; max-width: 100%; margin: 0; padding: 0; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content { direction: ltr; display: flex; justify-content: flex-end; width: 100%; padding: 0; animation: scrollTextInvert 12s linear infinite; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content .grid-text-content-wrapper { display: flex; align-items: center; width: max-content; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content p { margin: 0; white-space: nowrap; font-size: 0; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content :is(img, span) { background: transparent !important; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img { display: inline-block; vertical-align: middle; width: auto; margin-inline: var(--gap-12); } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img[alt="עוף"] { height: var(--gap-72); } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img[alt="עופו על ×–×”"] { height: var(--gap-56); } #allSectionsWrapper .section.grid-text-section.infinite-slider.food-truck .grid-text-content img { cursor: pointer; height: var(--gap-64); } .food-truck-popup { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; } .food-truck-popup.open { display: flex; } .food-truck-popup .food-truck-popup-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); cursor: pointer; } .food-truck-popup .food-truck-popup-link { position: relative; z-index: 1; display: block; max-width: 90vw; max-height: 85vh; } .food-truck-popup .food-truck-popup-link img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider { overflow: hidden; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-container { width: 100%; overflow: hidden; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes { direction: ltr; justify-content: flex-end; flex-wrap: nowrap; width: 100%; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes .grid-boxes-wrapper { display: flex; flex-wrap: nowrap; width: max-content; animation: scrollTextInvert 250s linear infinite; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes .col-xs-6 { width: auto; flex: 0 0 auto; padding: 0; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes .boxes-images-outer-image { width: auto; height: calc(100vh - var(--headerHeight)); border-radius: 0; background-repeat: no-repeat !important; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes .boxes-images-outer-image img { display: block; height: 100%; width: auto; display: none; } body:is(.restaurants) #allSectionsWrapper .food-truck .gridTextWithImg .grid-text-content { top: -0.85vw; } @media(max-width:1024px) { #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img { height: 40px; } #allSectionsWrapper .section.grid-text-section.infinite-slider.food-truck .grid-text-content { width: fit-content; animation: scrollTextInvert 160s linear infinite; justify-content: flex-start; direction: rtl; } #allSectionsWrapper .section.grid-text-section.infinite-slider.food-truck .grid-text-content img { height: 60px; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider { background: var(--blue); } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes .boxes-images-outer-image { height: 300px; } body:is(.restaurants) #allSectionsWrapper .food-truck .gridTextWithImg .grid-text-content { top: -3vw; } #allSectionsWrapper .section.grid-text-section.infinite-slider:not(.food-truck) { padding-block: 18px; } } @media(min-width:1025px) { #allSectionsWrapper .section.grid-text-section.infinite-slider:not(.food-truck) { padding-bottom: var(--gap-18); } } /*--------------------/* RESTAURANT CARDS /*--------------------*/ body:is(.restaurants) #GridPage, body:is(.restaurants) #allSectionsWrapper { background: var(--yellow); } body:is(.restaurants, .recipes) #SiteContainer #lobbyText { width: 69.844vw; margin-inline: auto; max-width: 1600px; } body:is(.restaurants, .recipes) #lobbyText p { color: var(--black); font-size: var(--fs-50); font-family: var(--font-3); line-height: 1.2; } body:is(.restaurants) #allSectionsWrapper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-4); } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section { width: 100%; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) { position: relative; width: calc(50% - var(--gap-4) / 2); aspect-ratio: 958 / 630; overflow: hidden; box-sizing: border-box; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .gallery-container { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .gallery-container::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0); transition: 0.3s ease all; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .gallery-cubes { display: block; width: 100%; height: 100%; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .gallery-cubes .col-xs-6 { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; transition: 0.6s ease all; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .gallery-cubes .col-xs-6.is-active { opacity: 1; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .gallery-cubes .boxes-images-outer-image { width: 100%; height: 100%; aspect-ratio: unset; border-radius: 0; background-size: cover; background-position: center; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .section-title { position: absolute; inset: 0; z-index: 2; pointer-events: none; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .section-title h2 { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; color: var(--yellow); text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); white-space: nowrap; } #allSectionsWrapper .section.grid-gallery-section:not(.restaurant):not(.image-auto-slider) .section-title h3 { display: none; } #allSectionsWrapper .section.grid-gallery-section.restaurant .section-title h3 { position: absolute; top: var(--gap-30); left: 0; right: 0; padding-inline: var(--gap-40); text-align: center; color: var(--yellow); opacity: 0; transform: translateY(-160%); transition: 0.4s ease all; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 { position: absolute; left: 0; right: 0; bottom: var(--gap-30); z-index: 2; margin: 0; padding-inline: var(--gap-40); opacity: 0; transform: translateY(160%); transition: 0.4s ease all; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--gap-20); } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-hours { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--gap-40); row-gap: var(--gap-8); } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-links { display: flex; align-items: center; justify-content: center; gap: var(--gap-24); direction: ltr; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 li { margin: 0; color: var(--yellow); } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-links li a { display: block; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-links li a img { display: block; height: var(--gap-30); width: auto; filter: brightness(0) saturate(100%) invert(93%) sepia(29%) saturate(628%) hue-rotate(340deg) brightness(103%) contrast(103%); } @media(min-width: 1025px) { #allSectionsWrapper .section.grid-gallery-section.restaurant:hover .gallery-container::after { background: rgba(0, 0, 0, 0.35); } #allSectionsWrapper .section.grid-gallery-section.restaurant:hover .section-title h3 { transform: translateY(0); opacity: 1; } #allSectionsWrapper .section.grid-gallery-section.restaurant:hover .text1 { transform: translateY(0); opacity: 1; } #allSectionsWrapper .section.grid-gallery-section.restaurant:focus-within .gallery-container::after { background: rgba(0, 0, 0, 0.35); } #allSectionsWrapper .section.grid-gallery-section.restaurant:focus-within .section-title h3 { transform: translateY(0); opacity: 1; } #allSectionsWrapper .section.grid-gallery-section.restaurant:focus-within .text1 { transform: translateY(0); opacity: 1; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-links li a img { -webkit-mask-image: var(--svg-url); mask-image: var(--svg-url); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: filter 0.3s ease; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-links li a:hover img { filter: var(--filter-pink) } } @media(max-width: 1024px) { body:is(.restaurants, .recipes) #SiteContainer #lobbyText { width: 100%; max-width: 100%; padding-inline: var(--gap-24) } body:is(.restaurants, .recipes) #lobbyText p { font-size: var(--fs-26) } body:is(.restaurants) #allSectionsWrapper { flex-direction: column; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) { width: 100%; aspect-ratio: 375/ 375; } #allSectionsWrapper .section.grid-gallery-section:not(.image-auto-slider) .section-title h2 { white-space: normal; } #allSectionsWrapper .section.grid-gallery-section.restaurant .gallery-container::after { background: rgba(0, 0, 0, 0.6); } #allSectionsWrapper .section.grid-gallery-section.restaurant .section-title h3 { transform: none; opacity: 1; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 { transform: none; opacity: 1; padding-inline: 30px; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 ul { flex-direction: column-reverse; } #allSectionsWrapper .section.grid-gallery-section.restaurant .text1 .text1-hours { gap: 8px; } } /*--------------------/* CONTACT + FOOD TRUCK /*--------------------*/ body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) { text-align: center; padding-block: var(--gap-100); } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) .grid-text-content { display: flex; flex-direction: column; align-items: center; gap: var(--gap-16); } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) .grid-text-content p { margin: 0; } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section:has(.gridTextWithImg) { overflow: hidden; padding-block: var(--gap-40); background: var(--yellow); } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .gridTextImgContainer { display: none; } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .grid-text-content { direction: ltr; width: max-content; padding: 0; display: flex; animation: foodTruckMarquee 60s linear infinite; } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .grid-text-content .food-truck-track { display: flex; align-items: center; gap: var(--gap-24); flex: 0 0 auto; width: max-content; } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .grid-text-content .food-truck-track p { display: flex; align-items: center; gap: var(--gap-24); margin: 0; width: max-content; white-space: nowrap; } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .grid-text-content .food-truck-track p span { display: none; } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .grid-text-content .food-truck-track p img { display: inline-block; vertical-align: middle; height: var(--gap-40); width: auto; background: transparent !important; } body:is(.restaurants) #allSectionsWrapper .gridTextWithImg .grid-text-content .food-truck-track p img:not([alt="תמונת פוד טראק"]) { padding-bottom: var(--gap-8); } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) .grid-text-content a { font-size: var(--fs-32); font-family: var(--font-2); color: var(--black); line-height: 1.3; letter-spacing: normal; font-weight: 700; display: flex; justify-content: center; align-items:center; } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) .grid-text-content { gap: 0; } @keyframes foodTruckMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media(min-width: 1025px) { #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow-prev:hover { transform: translateY(-50%) scale(1.15); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow-next:hover { transform: translateY(-50%) rotate(180deg) scale(1.15); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle.button a:hover { background: var(--yellow); } } @media(max-width: 1024px) { body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) { padding-block: var(--gap-64); } body:is(.restaurants) #allSectionsWrapper .section.grid-text-section .grid-text:not(.gridTextWithImg) .grid-text-content { gap: 0; } #allSectionsWrapper .section.grid-content-section.foodi-carousel { min-height: auto; padding-inline: var(--gap-20); padding-block: var(--gap-40) var(--gap-100); } #allSectionsWrapper .section.grid-content-section.foodi-carousel::before { top: var(--gap-20); bottom: var(--gap-20); left: var(--gap-16); right: var(--gap-16); width: auto; height: auto; transform: none; border-radius: 3px; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .section-title { max-width: 100%; margin-top: 0; margin-bottom: var(--gap-48); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes { min-height: 240px; height: auto; margin-bottom: 0; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box { width: 24vw; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-prev { left: -7%; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-next { left: 107%; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center { width: 58vw; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box .grid-box-image { height: 130px; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-image { height: 240px; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-title { bottom: calc(100% - var(--gap-100)); background-size: contain; animation: none; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle.button { top: calc(100% + var(--gap-24)); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle.button a { font-size: 26px; } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-title h3 a { color: var(--pink); font-size: var(--fs-65); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .grid-box.is-center .grid-box-subtitle:not(.button) span { width: var(--gap-140); } #allSectionsWrapper .section.grid-content-section.foodi-carousel .grid-boxes .foodi-arrow { display: none; } } /**/ @media(max-width: 1024px) { /*#allSectionsWrapper .section.grid-text-section.infinite-slider { padding-block: var(--gap-12); }*/ #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content { gap: var(--gap-16); } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content .grid-text-content-wrapper { gap: var(--gap-16); } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img { margin-inline: var(--gap-8); } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img[alt="עוף"] { height: 40px; } #allSectionsWrapper .section.grid-text-section.infinite-slider .grid-text-content img[alt="עופו על ×–×”"] { height: 32px; } #allSectionsWrapper .section.grid-gallery-section.image-auto-slider .gallery-cubes .grid-boxes-wrapper { animation-duration: 120s; } } /* PAGES */ body:is(.menu, .restaurants, .recipes, .page-404, .faq) :is(div,#LobbyModule) #lobbyview { margin-top: var(--headerHeight); background: var(--yellow); } /* SUPERSEDED - conflicted with the home/about vs other-pages header color logic in the HEADER block: body:is(.menu, .restaurants, .recipes, .page-404, .faq, .FormResultPage) #main-header { background: var(--yellow); } */ @media(max-width: 1024px) { body:is(.menu, .restaurants, .recipes, .page-404, .faq) :is(div,#LobbyModule) #lobbyview { padding-block: 28px; } } /*--------------------/* Q&A PAGE /*--------------------*/ body.faq #GridPage { background: var(--yellow); } body.faq :is(div, #LobbyModule) #lobbyview { padding-block: var(--gap-100) var(--gap-72); } body.faq #LobbyModule #lobbyview #headline { padding-inline-start: 15.052vw; box-sizing: border-box; text-align: start; } body.faq #allSectionsWrapper { background: var(--yellow); } body.faq #allSectionsWrapper .section.grid-faq-section { padding-block: 0 7.031vw; background: var(--yellow); } body.faq #allSectionsWrapper .section.grid-faq-section .grid-faq { max-width: 73.021vw; margin-inline: auto; box-sizing: border-box; } body.faq #allSectionsWrapper .section.grid-faq-section .grid-faq-inner { padding: var(--gap-30); } body.faq #allSectionsWrapper .section.grid-faq-section .panel-group { display: flex; flex-direction: column; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-item { border-bottom: 1px solid var(--pink); background: var(--yellow); box-shadow: none; margin: 0 !important; padding-block: var(--gap-32); border-radius: 0; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-body, body.faq #allSectionsWrapper .section.grid-faq-section .faq-body-inner { background: var(--yellow); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-8); padding: 0; cursor: pointer; background: var(--yellow); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-item:first-child { padding-top: 0; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline .button-open { width: var(--gap-20); height: var(--gap-20); flex-shrink: 0; background: url("https://media.getmood.io/warehouse/dynamic/768213.svg") center / contain no-repeat; font-size: 0; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline .button-open::before { content: none; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline.open .button-open { background-image: url("https://media.getmood.io/warehouse/dynamic/768212.svg"); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline .faq-headline-title { flex: 1; margin: 0; transition: all 0.35s ease; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline.open .faq-headline-title { color: var(--pink); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-body-inner { padding: 0; padding-bottom: var(--gap-24); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-item-text p { margin: 0; } body.faq #allSectionsWrapper .section.grid-text-section { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 0; } body.faq #allSectionsWrapper .section.grid-text-section .section-title { margin-bottom: var(--gap-32); } body.faq #allSectionsWrapper .section.grid-text-section .grid-text { width: 100%; } body.faq #allSectionsWrapper .section.grid-text-section .grid-text-content { display: flex; justify-content: center; padding: 0; } body.faq #allSectionsWrapper .section.grid-text-section .grid-text-content .sec-button { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: var(--gap-10); background: var(--pink); color: var(--yellow); font-size: var(--fs-32); padding-block: var(--gap-8) var(--gap-14); padding-inline: var(--gap-24); } body.faq #allSectionsWrapper .section.grid-text-section .grid-text-content .sec-button::after { content: ""; width: var(--gap-36); height: var(--gap-36); flex-shrink: 0; background: var(--yellow); -webkit-mask: url("https://media.getmood.io/warehouse/dynamic/768047.svg") center / contain no-repeat; mask: url("https://media.getmood.io/warehouse/dynamic/768047.svg") center / contain no-repeat; } body.faq #allSectionsWrapper .section.grid-image-section { display: flex; justify-content: flex-start; padding-block: var(--gap-200) var(--gap-160); height: unset; } body.faq #allSectionsWrapper .section.grid-image-section .image-section-data { width: 76.927vw; height: auto; } body.faq #allSectionsWrapper .section.grid-image-section .image-section-data img { width: 100%; height: auto; display: block; margin: 0 !important; } @media(min-width: 1025px) { body.faq #allSectionsWrapper .section.grid-faq-section .faq-item:hover .faq-headline-title { color: var(--pink); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-body-inner { max-width: 75%; } body.faq #allSectionsWrapper .section.grid-text-section .grid-text-content .sec-button:hover { color: var(--yellow); } } @media(max-width: 1024px) { body.faq :is(div, #LobbyModule) #lobbyview { padding-block: var(--gap-72) var(--gap-48); } body.faq #LobbyModule #lobbyview #headline { max-width: 100%; padding-inline: var(--gap-20); box-sizing: border-box; } body.faq #allSectionsWrapper .section.grid-faq-section { padding-block: 0 var(--gap-60); } body.faq #allSectionsWrapper .section.grid-faq-section .grid-faq { max-width: 100%; } body.faq #allSectionsWrapper .section.grid-faq-section .grid-faq-inner { padding: var(--gap-20) var(--gap-24); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-item { padding-block: var(--gap-20); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-body-inner { padding: 0; } body.faq #allSectionsWrapper .section.grid-faq-section .faq-item .faq-headline { margin-bottom: var(--gap-8); } body.faq #allSectionsWrapper .section.grid-faq-section .faq-headline .button-open { left: 0; top: 50%; transform: translateY(-50%); } body.faq #allSectionsWrapper .section.grid-text-section { padding-block: 0; padding-inline: var(--gap-24); box-sizing: border-box; } body.faq #allSectionsWrapper .section.grid-text-section .section-title { margin-bottom: var(--gap-24); } body.faq #allSectionsWrapper .section.grid-image-section { padding-block: var(--gap-100) var(--gap-80); } body.faq #allSectionsWrapper .section.grid-image-section .image-section-data { width: 100%; } body.faq #allSectionsWrapper .section.grid-text-section .grid-text-content .sec-button { font-size: var(--fs-26); padding: var(--gap-8) var(--gap-14); } } /**/ /*--------------------/* RECIPES PAGE /*--------------------*/ body.recipes :is(div, #LobbyModule) #lobbyview { text-align: center; } body.recipes #lobbyText { width: 69.844vw; margin-inline: auto; max-width: 1600px; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes { flex-direction: column; gap: var(--gap-4); background: var(--yellow); } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box { position: relative; width: 100%; aspect-ratio: 1920 / 859; overflow: hidden; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-image { position: absolute; inset: 0; z-index: 0; margin: 0; height: 100%; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-image .grid-box-image-container { height: 100%; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-image .box-image-animation { display: block; height: 100%; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-image img { width: 100%; height: 100%; object-fit: cover; display: block; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-title { position: absolute; inset: 0; z-index: 2; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-title :is(h2, h3) a { pointer-events: auto; color: var(--yellow); text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); } @media(max-width: 1024px) { body.recipes #lobbyText { width: 100%; padding-inline } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box { aspect-ratio: 375 / 375; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-title :is(h2, h3) a { font-size: 65px; } } @media(min-width: 1024px) { body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box .grid-box-image:after { content: ""; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background: var(--black); opacity: 0; transition: 0.3s ease all; } body.recipes #allSectionsWrapper .section.grid-content-section .grid-boxes .grid-box:hover .grid-box-image:after { opacity: 0.4; } } /**/ /*--------------------/* SINGLE RECIPE PAGE /*--------------------*/ body.recipe #GridTop { position: sticky; top: 0; height: 100dvh; margin-top: 0; z-index: 0; } body.recipe #GridPage { position: relative; z-index: 1; background: var(--yellow); } body.recipe #GridTop .top-caption { position: absolute; top: 50%; z-index: 2; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; /*gap: var(--gap-16);*/ text-align: center; padding-inline: var(--gap-60); box-sizing: border-box; width: 100%; } body.recipe #GridTop .top-caption h1 { color: var(--yellow); text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); transform: translateY(-20px); } body.recipe #GridTop .top-caption h2 { display: inline-block; background: var(--pink); color: var(--black); border-radius: 6px; padding: var(--gap-4) var(--gap-8); } body.recipe #lobbyText { margin: 0; background: var(--pink); padding-block: var(--gap-24); padding-inline: var(--gap-60); text-align: center; box-sizing: border-box; } body.recipe #GridTop #lobbyText { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; max-width: unset; } body.recipe #lobbyText p { margin: 0; } body.recipe :is(div, #LobbyModule) #lobbyview { margin-top: 0; padding: 0; background: var(--yellow); display: flex; flex-direction: column; text-align: center; } body.recipe #lobbyview > h2 { display: none; } body.recipe #text2 { max-width: 69.844vw; margin-inline: auto; padding-block: var(--gap-100) var(--gap-140); } body.recipe #text2 p { margin: 0; } body.recipe #text2 p a { color: var(--pink); } body.recipe #allSectionsWrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; column-gap: var(--gap-30); row-gap: var(--gap-120); padding-top: var(--gap-40); padding-inline: var(--gap-32); background: var(--yellow); position: relative; z-index: 1; } body.recipe #allSectionsWrapper .section.grid-content-section.groceries { width: 22.24vw; } body.recipe #allSectionsWrapper .section.grid-content-section.instructions { width: 58.02vw; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe { width: 10.365vw; } body.recipe #allSectionsWrapper .section.grid-content-section .section-title { margin-bottom: var(--gap-40); padding-bottom: var(--gap-20); border-bottom: 5px solid var(--pink); text-align: start; } body.recipe #allSectionsWrapper .section.grid-content-section.groceries .grid-boxes { display: block; } body.recipe #allSectionsWrapper .section.grid-content-section.groceries .grid-boxes .grid-box { width: 100%; } body.recipe #allSectionsWrapper .section.grid-content-section.groceries .grid-boxes .grid-box .grid-box-fulltext { text-align: start; } body.recipe #allSectionsWrapper .section.grid-content-section.groceries .grid-boxes .grid-box .grid-box-fulltext :is(p, h3) { margin: 0; } body.recipe #allSectionsWrapper .section.grid-content-section.instructions .grid-boxes { display: flex; flex-direction: column; gap: var(--gap-24); } body.recipe #allSectionsWrapper .section.grid-content-section.instructions .grid-boxes .grid-box { width: 100%; display: flex; flex-direction: column; gap: var(--gap-8); } body.recipe #allSectionsWrapper .section.grid-content-section.instructions .grid-boxes .grid-box .grid-box-title { text-align: start; line-height: 1; } body.recipe #allSectionsWrapper .section.grid-content-section.instructions .grid-boxes .grid-box .grid-box-fulltext { text-align: start; } body.recipe #allSectionsWrapper .section.grid-content-section.instructions .grid-boxes .grid-box .grid-box-fulltext p { margin: 0; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes { display: block; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box { width: 100%; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-title { display: none; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext { display: flex; flex-direction: column; gap: var(--gap-16); } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p { margin: 0; display: flex; align-items: center; gap: var(--gap-10); } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p:not(:has(img)) { display: none; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p img { display: inline-block; width: auto; height: var(--gap-28); } body.recipe .grid-image-section { max-width: 100vw; width: 100vw; margin-inline: -32px; height: 100vh; } body.recipe .grid-image-section .image-section-data { height: 100%; } body.recipe .grid-image-section .image-section-data > img { min-height: 130vh; width: auto; } body.recipe .grid-image-section .grid-box-fulltext p { font-family: var(--font-2); font-size: var(--fs-55); line-height: 1.06; font-feature-settings: 'liga' off, 'clig' off; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.55); } body.recipe .grid-image-section .grid-box-fulltext p a { line-height: 1.55; font-size: clamp(14px, var(--fs-26), 300px); font-family: var(--font-1); text-decoration: underline; text-underline-offset: 10px; } body.recipe .grid-image-section .grid-box-fulltext p a:hover { color: var(--pink); } @media(min-width: 1025px) { body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p img:nth-child(2) { display: none; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p:hover img:nth-child(2) { display: block; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p:hover img:nth-child(1) { display: none; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext p:hover { color: var(--pink); } } @media(max-width: 1024px) { body.recipe #text2 { max-width: 100%; padding-inline: var(--gap-20); padding-block: var(--gap-48) var(--gap-60); box-sizing: border-box; } body.recipe #lobbyText { padding-inline: var(--gap-20); bottom: 52px !important; height: 52px; display: flex; justify-content: center; align-items: center; } body.recipe #GridTop .top-caption { padding-inline: var(--gap-20); gap: var(--gap-10); } body.recipe #allSectionsWrapper { flex-direction: column; align-items: stretch; row-gap: var(--gap-48); padding-top: 0; padding-inline: 0; } body.recipe #allSectionsWrapper .section.grid-content-section:is(.groceries, .instructions, .share-recipe) { width: 100%; padding-inline: 25px; box-sizing: border-box; margin-bottom: 60px; } body.recipe #allSectionsWrapper .section.grid-content-section .section-title { margin-bottom: var(--gap-24); padding-bottom: var(--gap-12); } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext { display: grid; grid-template-columns: 1fr 1fr; } body.recipe #allSectionsWrapper .section.grid-content-section.share-recipe .grid-boxes .grid-box .grid-box-fulltext { width: fit-content; } body.recipe .grid-image-section { margin-inline: 0px; height: auto; } body.recipe .grid-image-section .image-section-data > img { min-height: 0; } body.recipe .grid-image-section .grid-box-fulltext p { font-size: var(--fs-26); } body.recipe .grid-image-section .image-section-data .grid-box-fulltext { width: 100%; padding-inline: 50px; } body.recipe .grid-image-section .image-section-data .grid-box-fulltext img { max-width: 180px; } body.recipe .grid-image-section .grid-box-fulltext p a { font-size: 15px; line-height: 1.45; } } /**/ /*--------------------/* ABOUT PAGE /*--------------------*/ /* SUPERSEDED - scrolled header background must be pink for all pages incl. about, per HEADER block: body:is(.about) #main-header.bg { background: var(--yellow); } */ body.about :is(div, #LobbyModule) #lobbyview { display: none; } body.about #GridPage { background: transparent; } body.about #allSectionsWrapper { position: relative; z-index: 2; background: transparent; } body.about #allSectionsWrapper .section.grid-text-section.video-desktop { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 0; margin: 0; overflow: hidden; } body.about #allSectionsWrapper .section.grid-text-section.video-desktop::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.45); pointer-events: none; } body.about #allSectionsWrapper .section.grid-text-section.video-desktop .grid-text, body.about #allSectionsWrapper .section.grid-text-section.video-desktop .grid-text-content { position: static; width: 100%; height: 100%; padding: 0; margin: 0; } body.about #allSectionsWrapper .section.grid-text-section.video-desktop .grid-text-content > *:not(h2):not(.moreText) { display: none; } body.about #allSectionsWrapper .section.grid-text-section.video-desktop .moreText { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; } body.about #allSectionsWrapper .section.grid-text-section.video-desktop .moreText iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100vh; min-height: 100dvh; } body.about #allSectionsWrapper .section.grid-text-section:has(.gridHasVideo) { display: none; } body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) { position: relative; z-index: 1; margin-top: calc(100vh - var(--gap-100) - 1.2 * var(--fs-110) - var(--gap-60)); margin-top: calc(100dvh - var(--gap-100) - 1.2 * var(--fs-110)); padding-block: var(--gap-100) var(--gap-160); } body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text { width: 80vw; margin-inline: var(--gap-60) auto; } body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text-content { text-align: start; } body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text-content p { margin: 0; color: var(--yellow); } /*body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text-content p:first-child { margin-bottom: var(--gap-60); }*/ body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text-content p :is(strong,a) { color: var(--pink); } body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text-content :is(b, strong, span) { color: var(--yellow); font-family: inherit; font-weight: inherit; letter-spacing: inherit; background: transparent; } body.about footer { z-index: 2; } @media(max-width: 1024px) { body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) { margin-top: calc(100vh - var(--gap-60) - 1.2 * 48px - var(--gap-60)); margin-top: calc(100dvh - var(--gap-60) - 1.2 * 48px - var(--gap-60)); padding-block: var(--gap-60) var(--gap-100); } body.about #allSectionsWrapper .section.grid-text-section:not(.video-desktop):not(:has(.gridHasVideo)) .grid-text { width: 80vw; margin-inline: var(--gap-20) auto; box-sizing: border-box; } body.about #allSectionsWrapper .section.grid-text-section[data-id="25754"] { position: fixed; width: 100vw; height: 100vh; bottom: 0; left: 0; display: block; } body.about #allSectionsWrapper .section.grid-text-section[data-id="25754"]::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.45); pointer-events: none; } body.about #allSectionsWrapper .section.grid-text-section[data-id="25754"] .grid-text { width: 100%; height: 100%; position: relative; } body.about #allSectionsWrapper .section.grid-text-section[data-id="25754"] .grid-text.gridHasVideo .grid-iframe-holder iframe { display: block; position: relative !important; } body.about #allSectionsWrapper .section.grid-text-section[data-id="25754"] .grid-text .grid-iframe-holder { width: 123%; height: 111%; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%,50%); } } /**/ /*--------------------/* 404 PAGE /*--------------------*/ body.page-404 #GridPage { background: var(--yellow); } body.page-404 .page-not-found { display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; padding-block: calc(var(--headerHeight) + var(--gap-100)) var(--gap-120); padding-inline: var(--gap-20); } body.page-404 .page-not-found #headline { order: 2; display: none; } body.page-404 .page-not-found #headline h1 { color: var(--pink); } body.page-404 .page-not-found #subheadline { order: 3; margin-bottom: -30px; } body.page-404 .page-not-found #text1 { display: contents; } body.page-404 .page-not-found #text1 p { margin: 0; } body.page-404 .page-not-found #text1 p:has(img) { order: 1; display: flex; justify-content: center; } body.page-404 .page-not-found #text1 p:has(img) img { display: block; width: 58.316vw; height: auto; } body.page-404 .page-not-found #text1 p:has(img):nth-child(2) img { width: 5.5vw; } body.page-404 .page-not-found #text1 p:not(:has(*)) { display: none; } body.page-404 .page-not-found #text1 p:has(a) { order: 4; margin-top: var(--gap-40); } body.page-404 .page-not-found #text1 p:has(a) a { display: inline-block; border-bottom: 2px solid var(--black); padding-bottom: var(--gap-4); } @media(max-width: 1024px) { .page-404 #SiteGridContainer { min-height: auto; } body.page-404 .page-not-found #headline { margin: 0; } body.page-404 .page-not-found { padding-block: calc(var(--headerHeight) + var(--gap-40)) var(--gap-80); } body.page-404 .page-not-found #subheadline { /*margin-top: var(--gap-12);*/ margin: 0 } body.page-404 .page-not-found #text1 p:has(img) img { width: 90%; } body.page-404 .page-not-found #text1 p:has(img):nth-child(2) img { width: 66px; margin-block: 30px 10px; } body.page-404 .page-not-found #text1 p:has(a) { margin-top: var(--gap-14); } } /**/ /*--------------------/* THANK YOU (FORM RESULT) PAGE /*--------------------*/ body.FormResultPage #GridPage { background: var(--yellow); } body.FormResultPage #FormResultPage, body.FormResultPage #pageview { width: 100%; } body.FormResultPage #FormResultPage .container-fluid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100vh; box-sizing: border-box; background: var(--yellow); padding-block: calc(var(--headerHeight) + var(--gap-40)) var(--gap-100); padding-inline: var(--gap-20); } body.FormResultPage #text1 { display: contents; } body.FormResultPage #headline { order: 2; margin-top: var(--gap-48); } body.FormResultPage #text1 p { margin: 0; } body.FormResultPage #text1 p:nth-of-type(3) { order: 1; width: auto; } body.FormResultPage #text1 p:nth-of-type(3) img { display: block; width: 13.021vw; height: auto; } body.FormResultPage #text1 p:nth-of-type(1) { order: 3; color: var(--black); } body.FormResultPage #text1 p:nth-of-type(2) { display: none; } body.FormResultPage .FormResultPageButton { order: 4; display: inline-block; color: var(--black); margin-top: var(--gap-40) !important; border-bottom: 2px solid var(--black); padding-bottom: var(--gap-4); } @media(max-width: 1024px) { body.FormResultPage #headline { margin-top: var(--gap-32); } body.FormResultPage #text1 p:nth-of-type(3) img { width: 120px; } body.FormResultPage .FormResultPageButton { margin-top: var(--gap-32) !important; } } /**/ /*--------------------/* CAREER PAGE /*--------------------*/ body.career #GridPage { background: var(--yellow); } body.career #SiteGrid { padding: 0; } body.career #LobbyModule { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; direction: ltr; min-height: 66.146vw; background: var(--yellow); padding-left: var(--gap-90); } body.career #LobbyModule #headline { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body.career :is(div, #LobbyModule) #lobbyview { display: block; width: 37.969vw; margin: 0; padding: calc(var(--headerHeight) + var(--gap-52)) 0 0; background: transparent; direction: rtl; position: relative; z-index: 1; } body.career #lobbyview .lobbyTextContainer { margin: 0; } body.career #lobbyText { display: flex; flex-direction: column; text-align: start; } body.career #lobbyText p { margin: 0; } body.career #lobbyText p:first-child { margin-bottom: var(--gap-24); } body.career #lobbyText p:has(img) img { display: inline-block; width: 26.094vw; height: auto; } body.career #allSectionsWrapper { width: 37.969vw; margin-top: 2.865vw; background: transparent; direction: rtl; position: relative; z-index: 1; } body.career #allSectionsWrapper .section.grid-form-section { width: 100%; margin: 0; padding: 0; } body.career #allSectionsWrapper .form-container-wide { width: 36.198vw; margin: 0; padding: 0; } body.career #DynamicFormObject { width: 100%; margin: 0; padding: 0; } body.career #DynamicFormObject .dynamicFormObjectTitleAndText, body.career #DynamicFormObject .top-form, body.career #DynamicFormObject .dynamicFormEndText { display: none; } body.career #DynamicFormObject .dynamicFormObjectFields { margin: 0; padding: 0; } body.career #DynamicFormObject form { width: 100%; } body.career #DynamicFormObject fieldset { display: flex; flex-wrap: wrap; gap: var(--gap-16); margin: 0; padding: 0; border: none; } body.career #DynamicFormObject fieldset .dynamicFormObjectSubmit { width: 100%; text-align: end; } body.career #DynamicFormObject :is(.dynamicFormObjectField, .dynamicFormObjectSubmit) { margin: 0; padding: 0; } body.career #DynamicFormObject .dynamicFormObjectField { width: 100%; } body.career #DynamicFormObject .dynamicFormObjectField:has(#name-2), body.career #DynamicFormObject .dynamicFormObjectField:has(#name-3) { width: calc(50% - var(--gap-16) / 2); } body.career #DynamicFormObject .dynamicFormObjectField .input-wrapper { width: 100%; margin: 0; position: relative; } body.career #DynamicFormObject .dynamicFormObjectField .input-wrapper .error { top: 10px; left: 10px; font-size: var(--fs-13); } body.career #DynamicFormObject .dynamicFormObjectField:not(.checkboxField) .input-data { width: 100%; height: var(--gap-56); box-sizing: border-box; background: var(--white); border: 1px solid var(--pink); border-radius: 8px; box-shadow: none; padding-inline: var(--gap-14); text-align: right; color: var(--black); font-size: var(--fs-20); font-family: var(--font-1); margin-bottom: 0; } body.career #DynamicFormObject .dynamicFormObjectField:not(.checkboxField) .input-data::placeholder { color: var(--grey); opacity: 1; } body.career #DynamicFormObject .dynamicFormObjectField .input-wrapper .a11y-label { position: absolute; top: 50%; inset-inline-start: var(--gap-14); transform: translateY(-50%); margin: 0; z-index: 1; pointer-events: none; color: var(--grey); line-height: 1; transition: 0.2s ease all; } body.career #DynamicFormObject .dynamicFormObjectField .input-wrapper:is(:focus-within, .is-filled) .a11y-label { top: var(--gap-8); transform: none; font-size: var(--fs-13); color: var(--black); } body.career #DynamicFormObject .dynamicFormObjectField .input-wrapper:has(.a11y-label) .input-data { padding-top: var(--gap-16); } body.career #DynamicFormObject .dynamicFormObjectField .input-wrapper.must:has(.a11y-label)::before { display: none; } body.career #DynamicFormObject .a11y-required { color: var(--pink); } body.career #DynamicFormObject .checkboxField { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--gap-8); } body.career #DynamicFormObject .checkboxField input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: var(--gap-20); height: var(--gap-20); margin: 0; background: var(--white); border: 1px solid var(--pink); border-radius: var(--gap-8); cursor: pointer; flex-shrink: 0; transition: 0.3s ease all; } body.career #DynamicFormObject .checkboxField input[type="checkbox"]:checked { background: var(--pink); } body.career #DynamicFormObject .checkboxField label { margin: 0; } body.career #DynamicFormObject .checkboxField label .policy-highlight { color: var(--pink); } body.career #DynamicFormObject .dynamicFormObjectSubmit { display: flex; justify-content: flex-end; margin-top: var(--gap-30); } body.career #DynamicFormObject .dynamicFormObjectSubmit .spinner { display: none; } body.career #DynamicFormObject .form-submit { display: inline-flex; align-items: center; justify-content: center; min-width: var(--gap-160); padding: var(--gap-8) var(--gap-24) var(--gap-14); background: var(--pink); color: var(--black); border: none; border-radius: 8px; cursor: pointer; transition: 0.3s ease all; } body.career #LobbyModule .gridFormImgContainer { position: absolute; top: 0; bottom: 0; right: 0; width: 51.875vw; margin: 0; z-index: 0; } body.career #LobbyModule .gridFormImgContainer img { width: 100%; height: 100%; object-fit: cover; display: block; } body.career #allSectionsWrapper .form-container-wide #DynamicFormObject { width: 100%; border: none !important; } body.career #allSectionsWrapper .form-container-wide #DynamicFormObject::after { display: none; } body.career #allSectionsWrapper .form-container-wide #DynamicFormObject .dynamicFormObjectTitleAndText { display: none; } body.career #DynamicFormObject fieldset .must::before { right: 9px; top: 20%; } @media(min-width: 1025px) { body.career #DynamicFormObject .form-submit:hover { color: var(--yellow); } } @media(max-width: 1024px) { body.career #LobbyModule { flex-direction: column; align-items: stretch; direction: rtl; min-height: 0; padding: 0; } body.career :is(div, #LobbyModule) #lobbyview { width: 100%; padding: 0px 25px 30px; order: 1; } body.career #lobbyText p:has(img) img { width: 100%; } body.career #allSectionsWrapper { width: 100%; margin-top: var(--gap-32); padding-inline: 25px; box-sizing: border-box; order: 2; } body.career #allSectionsWrapper .form-container-wide { width: 100%; } body.career #DynamicFormObject fieldset { gap: var(--gap-24); margin-bottom: var(--gap-40); } body.career #DynamicFormObject .dynamicFormObjectField:has(#name-2), body.career #DynamicFormObject .dynamicFormObjectField:has(#name-3) { width: calc(50% - var(--gap-24) / 2); } body.career #DynamicFormObject .dynamicFormObjectField:not(.checkboxField) .input-data { height: 45px; border-radius: 2px; margin: 0; } body.career #DynamicFormObject .form-submit { min-width: 116px; height: 49px; padding-block: 0; } body.career #LobbyModule .gridFormImgContainer { position: static; width: 100%; margin: 0; order: 3; } body.career #LobbyModule .gridFormImgContainer img { height: auto; aspect-ratio: 5 / 7; } body.career #DynamicFormObject fieldset .dynamicFormObjectSubmit { margin: 0; } body.career #DynamicFormObject .checkboxField input[type="checkbox"] { width: var(--gap-16); height: var(--gap-16); border-radius: var(--gap-4); } } /**/ @keyframes foodiFadeUp { from { opacity: 0; transform: translateX(-50%) translateY(var(--gap-16)); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes scrollTextInvert { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } /**/ /*--------------------/* SIMPLE CONTENT PAGES /*--------------------*/ body:is(.privacy-policy-page, .accessabilityMainPage) { /* background-color: var(--yellow); */ } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage { background-color: var(--yellow); padding: 240px 290px; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:has(#headline) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 80px; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage #headline { margin: 0; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage #headline h1 { font-family: var(--font-2); font-size: var(--fs-65); line-height: 0.95; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) { max-width: 100%; text-align: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--gap-140); } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage .text-group { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) :is(h2,h3,h4,h5,h6) { min-width: 22vw; font-family: var(--font-3); font-size: clamp(26px,var(--fs-43),400px); line-height: 1.2; margin: 0; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage .group-non-title-elements { flex-grow: 1; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) :is(p,span) { font-size: clamp(16px,var(--fs-26),300px); color: #000; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) p img { } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) a { } @media(max-width: 1024px) { body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage { padding: var(--gap-40) var(--gap-20); } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:has(#headline) { gap: var(--gap-28); } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage #headline h1 { font-size: 35px; line-height: 1; letter-spacing: normal; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) { gap: var(--gap-60); } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage .text-group { flex-direction: column; gap: 0; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) :is(h2,h3,h4,h5,h6) { min-width: unset; line-height: 1.4; letter-spacing: normal; font-size: 26px; } body:is(.privacy-policy-page, .accessabilityMainPage) #GridPage div:is(#text1,#text2) :is(p,span) { font-size: 15px; line-height: 1.5; letter-spacing: normal; } } /*------------------------------------------/* PRINT — RECIPE PAGE /*------------------------------------------*/ @media print { @page { margin: 12mm; } body.recipe :is(#uni-toolbar, #main-header, #SiteFooter, .cookies-disclaimer, .mobile-bottom-nav, .a11y-motion-toggle, .rotating-stamp, .modal, .food-truck-popup, #allSectionsWrapper .section.share-recipe, #allSectionsWrapper .section.grid-image-section) { display: none !important; } body.recipe, body.recipe #GridPage { background: #fff !important; } body.recipe #GridTop { position: static; height: auto; margin: 0; padding-block: 0 var(--gap-40); } body.recipe #GridTop .top-caption { position: static; transform: none; padding-inline: 0; } body.recipe #GridTop .top-caption h1 { transform: none; color: #000; text-shadow: none; } body.recipe #GridTop #lobbyText { position: static; transform: none; margin-top: var(--gap-20); } body.recipe #lobbyText p, body.recipe #text2 p { color: #000; } body.recipe a[href]::after { content: none !important; } body.recipe #SiteGridContainer { min-height: 0; } body.recipe #allSectionsWrapper { row-gap: var(--gap-20); } body.recipe #allSectionsWrapper .section { margin-bottom: 0 !important; } body.recipe #allSectionsWrapper .section.groceries .grid-boxes .grid-box { display: block; } body.recipe #allSectionsWrapper .section.instructions .grid-boxes .grid-box { break-inside: avoid; } } #uni-toolbar:not(.uni-toolbar-disabled) #style_selector .style-toggle { top: 90vh !important; left: 15px !important; }