/* === COLOR PALETTE === */ :root { /* blue 5 subsection */ --blue-5: #070713; --blue-5-70: rgba(7, 7, 19, 0.7); --blue-5-30: rgba(7, 7, 19, 0.3); /* blue 15 subsection */ --blue-15: #151439; --blue-15-70: rgba(21, 20, 57, 0.7); --blue-15-30: rgba(21, 20, 57, 0.3); /* blue 50 subsection */ --blue-50: #4642BD; --blue-50-70: rgba(60, 56, 189, 0.7); --blue-50-30: rgba(60, 56, 189, 0.3); /* blue 70 subsection */ --blue-70: #817DE8; --blue-70-70: rgba(126, 122, 232, 0.7); --blue-70-30: rgba(126, 122, 232, 0.3); /* blue 85 subsection */ --blue-85: #C0BEF4; --blue-85-70: rgba(192, 190, 244, 0.7); --blue-85-30: rgba(192, 190, 244, 0.3); /* blue 95 subsection */ --blue-95: #EAE9FB; /* the white that goes over the blue-5 */ --blue-95-70: rgba(234, 233, 251, 0.7); --blue-95-30: rgba(234, 233, 251, 0.3); /* --- Pinks (highlights) --- */ --pink: #FF3276; --pink-70: rgba(255, 50, 118, 0.7); --pink-30: rgba(255, 50, 118, 0.3); /* --- Oranges (highlights) --- */ --orange: #F67055; --orange-30: rgba(246, 112, 85, 0.3); } /* === FONTS & TYPOGRAPHY VARIABLES === */ /* */ @font-face { font-family: 'Kaftan'; src: url('../vendor/fonts/kaftan-trial.otf') format('opentype'); font-weight: normal; font-style: normal; } /* typography for mobile & small-tablet (and the one that doesn't change at all on larger devices) */ :root { /* headings */ --Typography-h1: 2.5rem; /* 40px */ --Typography-h2: 2rem; /* 32px */ --Typography-h3: 1.75rem; /* 28px */ --Typography-h4: 1.5rem; /* 24px */ --Typography-h5: 1.125rem; /* 18px */ --Typography-h6: 0.75rem; /* 12px */ --Heading-color: var(--blue-95); /* color of all headers */ /* text content */ --Typography-body-lead: 1.125rem; /* 18px */ --Typography-body-l: 1.5rem; /* 24px */ --Typography-captions: 0.875rem; /* captions, chips and allergens */ --Text-color: var(--blue-95); /* links & buttons */ --Typography-link: 1rem; /* 16px */ } /* typography for large-tablet & desktop */ @media only screen and (min-width: 992px) { :root { /* headings */ --Typography-h1: 3rem; /* 48px */ --Typography-h2: 2.5rem; /* 40px */ --Typography-h3: 2rem; /* 32px */ /* h4, h5, h6 remain unchanged */ /* links & buttons */ --Typography-link: 1.125rem; /* 18px */ } } /* */ html { height: 100%; width: 100%; overflow-x: hidden; } body { background-color: var(--blue-5); font-family: 'Manrope', sans-serif; color: var(--Text-color); font-size: 1.125rem; line-height: 1.35rem; overflow-x: clip; } body.offcanvas-open { overflow: visible !important; padding-right: 0 !important; } body.no-scroll { overflow: hidden !important; height: 100vh !important; } /* == Typography == */ /* = headings = */ h1, h2, h3 { font-family: 'Kaftan', sans-serif; font-weight: 400; } h4, h5, h6 { font-weight: 700; } h1 { font-size: var(--Typography-h1); } h2 { font-size: var(--Typography-h2); } h3 { font-size: var(--Typography-h3); } h4 { font-size: var(--Typography-h4); line-height: 2rem; } h5 { font-size: var(--Typography-h5); line-height: 1.5rem; } h6 { font-size: var(--Typography-h6); line-height: 1rem; } h3.h4 { line-height: 2rem; color: var(--blue-95, #EAE9FB); font-family: "Kaftan Serif - Trial", serif; font-size: var(--Typography-h4, 1.5rem); font-style: normal; font-weight: 400; } h3.h5 { font-family: 'Manrope', sans-serif; font-size: var(--Typography-h5) !important; line-height: 1.5rem !important; font-weight: 700 !important; } h3.h6 { font-family: 'Manrope', sans-serif; font-size: var(--Typography-h6); line-height: 1rem; font-weight: 700; } /* = content = */ .body-lead { font-size: var(--Typography-body-lead); line-height: 1.8rem; font-weight: 400; } .caption, .chips, [class^="allergen"], [class^="preference"] { font-size: var(--Typography-captions); line-height: 1.05rem; font-weight: 400; } .link { font-size: var(--Typography-link) !important; line-height: 1.5rem; font-weight: bold; } .body-l { font-size: var(--Typography-body-l); } /* Style for anchors */ a { text-decoration: none; /* remove default text's underline */ padding: 1px 6px; } /* */ /* === CURSOR EFFECTS === */ /* */ /* circle effect around cursor */ .circle { --circle-size: 50px; background-image: radial-gradient(circle, var(--pink), transparent, transparent); position: fixed; height: var(--circle-size); width: var(--circle-size); border-radius: 100%; top: calc(var(--circle-size) / 2 * -1); left: calc(var(--circle-size) / 2 * -1); pointer-events: none; transition: border, opacity 0.3s; z-index: 900000000000; } /* remove cursor's circle on device with no mouse */ @media (hover: none) and (pointer: coarse) { .circle { display: none !important; visibility: hidden !important; opacity: 0 !important; } } @media (max-width: 992px) { .circle { display: none !important; } } body.is-touch-device .circle { display: none !important; } /* decrease opacity upon entering an hoverable item */ .hovered { opacity: 0.3; } /* */ /* === OFFCANVAS FULLPAGE (the opened hamburger menu) === */ /* */ #offCanvasFull { width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; position: fixed; overflow: hidden !important; background-color: rgba(7, 7, 19, 0.9); color: var(--blue-95) !important; border: none !important; } #offCanvasFull .offcanvas-body { overflow: hidden !important; height: 100%; display: flex; flex-direction: column; padding: 0; } /* */ /* === BUTTONS === */ /* */ /* regular buttons */ .btn { color: var(--blue-95); width: fit-content; z-index: 10; background-color: var(--blue-50-30); gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 100px; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; position: relative; /* required if .btn and .liquidGlass-wrapper are used together */ overflow: visible; line-height: 1; font-weight: bold; } /* nav menu buttons */ .btn-nav { color: var(--blue-95); width: fit-content; background-color: var(--blue-15-30); /* style is partially duplicated due to an issue in assigning both btn and btn-nav to the same element */ gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 100px; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; position: relative; /* required if .btn and .liquidGlass-wrapper are used together */ overflow: visible; line-height: 1; } /* alternate buttons */ .btn-secondary { color: var(--blue-95); border: none; background-color: transparent; text-decoration: underline; } /* allergens & preferences buttons */ .btn-filter { margin-right: 0.5rem; } /* round music buttons */ .btn-circular { aspect-ratio: 1 / 1; } /* focus for accessibility */ .btn:focus-visible { outline: 3px solid rgba(234, 233, 251, 0.12); outline-offset: 3px; } .btn:hover, .btn-nav:hover { background-image: radial-gradient(var(--pink), transparent); } .btn-empty { background-color: transparent !important; color: var(--blue-95); border: none; box-shadow: none !important; } /* sound button */ .btn-plate, .btn-sound { position: relative; z-index: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform 0.3s ease-out, background 0.3s ease-out; /* Smooth interaction */ /* Base background state (Default) */ background: linear-gradient(0deg, var(--blue-50-30) 0%, var(--blue-50-30) 100%), radial-gradient(50.67% 80.74% at 50% 50%, var(--pink) 0%, rgba(246, 112, 85, 0.00) 85%); } /* Common pseudo-element for the pulsing animation */ .btn-plate::before, .btn-sound::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0; transition: opacity 0.9s ease-in-out; /* Slow fade for the 'breath' effect */ /* Animation state background (Vibrant pink) */ background: linear-gradient(0deg, var(--blue-50-30), var(--blue-50-30)), radial-gradient(62.44% 72.74% at 50% 50%, var(--pink) 0%, rgba(255, 50, 118, 0) 100%); } /* Pill-shaped buttons (Timeline & Save) */ .btn-plate { border-radius: 28px; padding: 16px 24px; } /* Round buttons (Audio descriptions) */ .btn-sound { border-radius: 50%; aspect-ratio: 1 / 1 !important; padding: 1rem; } /* Hover state: updates the base background instantly for feedback */ .btn-plate:hover, .btn-sound:hover { background: linear-gradient(0deg, var(--blue-50-30), var(--blue-50-30)), radial-gradient(55.44% 72.74% at 50% 50%, var(--pink) 0%, rgba(255, 50, 118, 0) 100%) !important; } /* Active animation: triggers the pulsing opacity on the pseudo-element */ .ourIsActive::before { animation: pulseOpacity 1.8s infinite ease-in-out; } @keyframes pulseOpacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* */ /* === NAVBAR === */ /* */ /* navbar element (inside) */ .navbar { position: relative; width: 100%; background: transparent; padding: 0; z-index: 99999 !important; } .navbar.liquid-glass { border-radius: 20px; z-index: 1000; } /* navbar's wrapper (to make it sticky) */ .navbar-wrapper { position: fixed; top: 0; left: 0; display: flex; justify-content: center; width: 100%; padding: 0.5rem 0; z-index: 999 !important; } /* adjustment for videos that are too centered (they should be shifted right) */ .hero-to-right { display: flex; width: 100%; justify-content: end; overflow: visible; } /* adjustments for other videos that are too centered (once again, to shift them to the right) */ .hero-width-75 { width: 75%; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%); mask-image: linear-gradient(to right, transparent 0%, black 20%); } /* adjustment for some of the plates description's videos */ .hero-width-75-10 { padding-right: -20%; } /* Navbar glass morphism */ .custom-navbar { position: relative; border-radius: 100px; overflow: hidden; background: var(--blue-5-70); } /* navbar's custom button */ .btn-close-custom { background: none; border: none; color: var(--blue-95); font-size: 2rem; cursor: pointer; } .btn-close-custom:hover { opacity: 0.8; transition: 0.2s ease; } /* to not make the navbar go over a sticky element (used in 's sticky elements) */ .spaceFromNavbar { top: 6.5rem; } /* */ /* === LIQUID GLASS EFFECT (using SVG) === */ /* */ /* liquid glass wrapper (positions the layers) */ .liquidGlass-wrapper { position: relative; /* anchor for internal absolute elements */ overflow: hidden; color: inherit; /* lets text color be inherited from .btn */ display: flex; align-items: center; white-space: wrap; justify-content: center; isolation: isolate; /* prevents backdrop/filter from affecting external elements */ } /* effects (behind the text) */ .liquidGlass-effect { position: absolute; border-radius: 1000px; inset: 0; z-index: 0; /* put it behind the tint, the shine and especially the text */ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); /* more evident blur for contrast */ filter: url(#glass-distortion); /* using svg filter for distortion */ pointer-events: none; /* does not intercept clicks */ opacity: 1; } /* liquid glass effect background class */ .liquidGlass-effect-bg { position: absolute; inset: 0; z-index: 0; /* put it behind the tint, the shine and especially the text */ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); filter: url(#glass-distortion); pointer-events: none; opacity: 1; } /* a slight tint over the blur to increase text/background contrast */ .liquidGlass-tint { position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.06); /* slight layer to increase contrast */ pointer-events: none; } /* light/inset highlight over the tint but always behind the text */ .liquidGlass-shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; box-shadow: inset 0 0 0.5px rgba(255, 255, 255, 0.5), inset 0.5px -1px 0.5px rgba(255, 255, 255, 0.5); pointer-events: none; mix-blend-mode: normal; opacity: 0.9; } /* text (in front) */ .liquidGlass-text { position: relative; /* positioning above layers */ z-index: 10; /* put in front of everything */ color: inherit; /* inherits color set on .btn (blue-95) */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; pointer-events: auto; /* text must be clickable when inside a button */ display: inline-flex; align-items: center; gap: .5rem; padding: 0 .25rem; /* small internal padding for safety */ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); /* improves readability on complex backgrounds */ } /* fix to ensure buttons can't be pressed when nearby but only when on top of the actual button */ .liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine { pointer-events: none !important; } /* */ /* === VIDEO BACKGROUND STYLES === */ /* */ /* to set header's height in all pages (but home) */ .full-y { height: 60svh; } /* override heder's height in home (as it contains an additional button) */ #home-header { height: 45svh; } .header-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .header-wrapper img { width: 100%; height: 100%; object-fit: cover; } .bg-video { width: 100vw; height: 100%; object-fit: cover; position: fixed; overflow: hidden; } .bg-video-menu { width: 100%; height: 100%; object-fit: cover; } [class^="allergen"] { color: var(--blue-95); margin-right: 0.5rem; } .top-overlay { z-index: 10; background-color: var(--blue-5); } .header-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(7, 7, 19, 0) 0%, var(--blue-5) 60%, var(--blue-5) 100%); z-index: 1; pointer-events: none; overflow: hidden; } /* */ /* === SECTION STYLES === */ /* */ .section-bg-transparent { background-color: var(--blue-5-70) !important; } .section-bg-blue-gradient { background: linear-gradient( 180deg, var(--blue-5, #070713) 0%, var(--blue-5-70) 50%, var(--blue-5, #070713) 100% ); } .filter-luminosity { mix-blend-mode: luminosity; } /* Restaurant's values section (ristorante.html) */ #values-section-wrapper { border-radius: 0 !important; } #values-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #070713, transparent, #070713); z-index: 10; } /* critics reviews scroll buttons adjustment (info.html) */ #review-button-1, #review-button-2 { top: 50% !important; } /* Restaurant's a-la-carte menu section (menu.html) */ #a-la-carte-menu { background: linear-gradient( 180deg, var(--blue-5, #070713) 0%, rgba(7, 7, 19, 0.85) 50%, var(--blue-5, #070713) 100% ); } /* circle for indicate news in menu */ .news-menu { aspect-ratio: 1/1; height: 35px; border-radius: 50%; background-image: radial-gradient(circle, var(--orange), transparent, transparent); cursor: help; } /* Restaurant's a-la-carte menu last
element (menu.html) */ #last-hr { margin-top: 1em; margin-bottom: 0; } /* */ /* === TIMELINE ELEMENT === */ /* */ /* timeline's container */ .timeline-container { position: relative; z-index: 0; } /* timeline's item */ .timeline-item { z-index: 10; } /* Draw vertical line in the timeline */ .timeline-container::before { content: ""; position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--blue-15); transform: translateX(-50%); z-index: -10; } /* Dynamic line filling */ .timeline-fill { position: absolute; left: 50%; top: 0; width: 4px; height: 0; /* modified via JS */ background: var(--blue-15); transform: translateX(-50%); z-index: -1; transition: height 0.2s linear; /* smooth animation */ } /* responsive colors based on screen's size */ @media (min-width: 768px) { .timeline-container::before { width: 2px; background-color: var(--blue-15); } .timeline-fill { width: 2px; background: var(--blue-95); } } /* vertical height limitation on some elements */ .reduce-size-menu { max-height: 400px; } /* Timeline dots */ .timeline-dot { position: absolute; left: 50%; /* vertical line */ width: 28px; height: 28px; background: var(--blue-15); /* initial color */ border-radius: 50%; transform: translate(-50%, 0%); z-index: 0; transition: all 0.3s ease; /* smooth animation */ } /* Active dot */ .timeline-dot.active { background-color: var(--blue-95); /* active color */ transform: translate(-50%, -50%) scale(1.2); /* slight enlargement */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* colors & responsive adjustments on larger screens */ @media (min-width: 768px) { .reduce-size-menu { max-height: 600px; } /* Active dot */ .timeline-dot.active { background-color: var(--blue-95); /* active color */ transform: translate(-50%, -50%) scale(1.2); /* slight enlargement */ } } /* timeline's music buttons adjustment */ .music-button { aspect-ratio: 1; height: 1.2rem; } /* */ /* === INPUTS === */ /* */ input, select, .was-validated .form-control.ignore-validation:valid, .was-validated .form-control.ignore-validation:invalid { /* Reset browser's default style */ appearance: none; -webkit-appearance: none; outline: none; /* border is transparent for the linear gradient effect */ border: 1px solid transparent !important; border-radius: 1000px !important; padding: 0.5rem 1rem; width: 100%; box-sizing: border-box; color: var(--blue-95); !important; font-family: inherit; font-size: 1rem; /* linear gradient */ background: linear-gradient(var(--blue-5), var(--blue-5)) padding-box, linear-gradient(to right, var(--blue-70-30), var(--blue-5)) border-box !important; transition: all 0.3s ease; } input::placeholder { color: var(--blue-95-70, rgba(234, 233, 251, 0.70)) !important; } input:focus, select:focus { background: linear-gradient(var(--blue-5), var(--blue-5)) padding-box, linear-gradient(to right, var(--blue-70-70), var(--blue-5)) border-box !important; box-shadow: none !important; } /* Style for input error */ .input-error { background: linear-gradient(var(--blue-5), var(--blue-5)) padding-box, linear-gradient(to right, var(--orange), var(--orange)) border-box !important; box-shadow: none !important; } .form-select { /* again, we had to delete some of default styles */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 2.25rem !important; } /* */ /* === CAROUSEL STYLES (swiperJS default's style adaptation) === */ /* */ /* = swiper reviews style = */ .swiper-reviews .swiper-button-prev, .swiper-reviews .swiper-button-next { z-index: 9999 !important; pointer-events: auto !important; transform: translateY(-50%); } .swiper-home .swiper-button-prev, .swiper-home .swiper-button-next, .swiper-images .swiper-button-prev, .swiper-images .swiper-button-next { z-index: 9999 !important; pointer-events: auto !important; transform: translateY(-50%); } .swiper-reviews * { pointer-events: auto !important; } /* progress bar container */ .swiper-reviews .swiper-pagination-progressbar { background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */ height: 4px !important; position: absolute; bottom: 0 !important; top: auto !important; /* Forces it to the bottom */ left: 0; width: 100%; z-index: 10; /* To make sure it's above the slides */ } /* fill for the progress bar */ .swiper-reviews .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--pink) !important; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: left top; display: block; } /* Forces the animation origin to the left */ .swiper-reviews .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: left top !important; left: 0 !important; right: auto !important; } .swiper-navigation-icon { display: none; } .swiper-reviews .swiper-slide { display: none; } .swiper-reviews .swiper-slide-active { display: block; } /* */ /* === FOOTER === */ footer { background: var(--blue-5); } /* === CHIPS (allergens) === */ /* */ .chips { background-color: transparent !important; border-radius: 1000px !important; padding: 0.5rem; border: none; color: var(--blue-95) !important; } .chips.allergen:not(.chips-active):hover { background-image: radial-gradient(var(--orange-30), transparent); } .chips.preference:not(.chips-active):hover { background-image: radial-gradient(var(--blue-70-30), transparent); } .chips.allergen.chips-active, .allergen-active { background-image: radial-gradient(circle, var(--orange), transparent); } .chips.preference.chips-active, .preference-active { background-image: radial-gradient(circle, var(--blue-50), transparent); } .allergen-active, .preference-active { width: fit-content; border-radius: 1000px; } /* background color for allergens */ .chips.allergen.chips-active, .allergen-active { border-radius: 1rem; background: radial-gradient(50.68% 81.45% at 50% 50%, var(--orange, #F67055) 0%, rgba(246, 112, 85, 0.00) 100%); } /* backgroun color for preferences */ .chips.preference.chips-active, .preference-active { border-radius: 1rem; background: radial-gradient(50.68% 81.45% at 50% 50%, var(--blue-50, #4642BD) 0%, rgba(70, 66, 189, 0.00) 100%); } /* allergens and preferences wrapper section */ #allergens { background-color: var(--blue-15-30); border-radius: 28px; display: block; } /* allergens and preferences spacing */ [class^="allergen-"], [class="preference-"] { margin-right: 1rem !important; } /* */ /* === VIDEOS (mostly backgrounds and bubbles) === */ video { mix-blend-mode: screen !important; } /* === MAP (prenota.html) === */ /* */ /* Map's container */ #map-container { width: 100vw; height: 70vh; position: relative; background-color: var(--blue-15); overflow: hidden; } /* Ex-nations style */ .country { fill: var(--blue-5); stroke-width: 0.5px; transition: all 0.3s ease; cursor: crosshair; /* Change mouse icon to a cross upon hovering over a country */ /* smooth corner joints and blur edges to make it look more "round" */ stroke-linejoin: round; stroke-linecap: round; filter: blur(0.25px); } /* hover effect on ex-nations */ .country:hover { fill: var(--blue-50-30); } /* sea labels */ .sea-label-text { border-radius: 0.5rem; font-family: 'Manrope', sans-serif; fill: var(--blue-95); /* The white that goes over the dark blue */ font-size: 1.125rem; line-height: 1.35rem; overflow-x: hidden; opacity: 0.8; transition: all 0.3s ease; cursor: help; /* makes the cursor a question mark (?) when hovering over a sea name */ } /* hover effect on seas (P1) */ .sea-group { cursor: help; /* makes the cursor a question mark (?) when hovering over all sea-group elements */ } /* hover effect on seas (P2) */ .sea-group:hover .sea-label-text { fill: var(--blue-95); opacity: 1; } /* Pop-up tooltip for various elements */ .map-tooltip { position: absolute; z-index: 1000; /* To put tooltips in front of the map (rather than behind it) */ background: var(--blue-5-70); /* Dark semi-transparent background */ color: var(--blue-95); padding: 8px 12px; border-radius: 0.5rem; pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: 0 1px 4px var(--blue-50-30); /* Mid-blue/transparent shadow glow */ transform: translate(-50%, -150%); /* text style */ font-family: 'Manrope', sans-serif; font-size: var(--Typography-captions, 0.875rem); font-style: normal; font-weight: 400; line-height: 1rem; /* blur background (to improve legibility & readability) */ backdrop-filter: blur(2px); } /* Riff's tooltip variant (orange) */ .map-tooltip.riff-variant { border-color: var(--orange); box-shadow: 0 1px 4px rgba(246, 112, 85, 0.5); color: var(--blue-95); } /* = Riff Marker Style (Orange Glowing Orb) = */ /* container style */ .location-group { cursor: pointer; transition: all 0.3s ease; } /* Riff's glowing marker */ .riff-marker { fill: rgba(246, 112, 85, 0.9); /* var(--orange) with 0.9 opacity */ stroke: none; filter: blur(2px) drop-shadow(0 0 2px var(--orange)) drop-shadow(0 0 10px rgba(246, 112, 85, 0.6)); opacity: 0.9; transition: all 0.4s ease-in-out; mix-blend-mode: screen; } /* Riff Label */ .location-label { font-family: 'Kaftan', sans-serif; fill: var(--orange); font-size: 1.2rem; text-anchor: middle; font-weight: 400; pointer-events: none; transform: translateY(-20px); letter-spacing: 1px; } /* Hover effect container */ .location-group:hover .riff-marker { filter: blur(2px) drop-shadow(0 0 2px var(--orange)) drop-shadow(0 0 10px rgba(246, 112, 85, 0.6)); scale: 1.2; animation: riffHoverColorPulse 0.8s infinite alternate ease-in-out; } .location-group:hover .location-label { text-shadow: 0 0 10px var(--orange); /* Text glows when the label is shown */ } /* Pulse animation for "living" effect */ .location-group .riff-marker { animation: riffPulse 3s infinite ease-in-out; } @keyframes riffPulse { 0% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.9; } } @keyframes riffHoverColorPulse { 0% { fill: var(--orange); filter: blur(2px) drop-shadow(0 0 2px var(--orange)) drop-shadow(0 0 10px rgba(246, 112, 85, 0.6)); } 100% { fill: var(--pink); filter: blur(2px) drop-shadow(0 0 5px var(--pink)) drop-shadow(0 0 15px rgba(255, 50, 118, 0.8)); } } /* = Gmaps button style = */ /* Style of the "open google maps" button, the one bottom-right over the D3 map */ #map { position: relative !important; /* Indispensabile per ancorare il bottone alla mappa */ overflow: hidden; } .map-action-btn { position: absolute !important; right: 1rem !important; left: auto !important; bottom: 30px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important; display: inline-flex !important; align-items: center; white-space: nowrap !important; width: auto !important; min-width: max-content !important; flex-shrink: 0; margin-left: auto !important; margin-right: 0 !important; z-index: 50; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); box-sizing: border-box; } /* 3. ADJUSTMENT PER SCHERMI GRANDI (Desktop) */ @media only screen and (min-width: 992px) { .map-action-btn { right: 5rem !important; left: auto !important; } } /* = Instructions Panel Style = */ /* controls hint-panel main style */ .controls-hint { position: absolute; left: 1rem; bottom: 30px; padding: 0.75rem 1.5rem; border-radius: 4px; background: transparent; color: var(--blue-70); font-family: 'Manrope', sans-serif; font-size: 0.85rem; pointer-events: none; /* Clicks pass through */ user-select: none; display: flex; flex-direction: column; gap: 6px; z-index: 50; } /* rows within controls hint-panel */ .key-row { color: var(--blue-95); display: flex; align-items: center; gap: 8px; } /* spans within rows within controls hint-panel */ .key-row span { color: var(--blue-95); font-size: var(--Typography-link); font-style: normal; font-weight: 500; line-height: 1.5rem; } /* style after "tooltip and circle hide when moving map" fix */ /* change cursor to the "hand-grabbing" one when dragging the map */ body.is-map-interacting { cursor: grabbing; /* Note: class 'is-map-interacting' is assigned to the body when user is dragging the map */ } /* disable tooltip when dragging the map */ body.is-map-interacting #map-tooltip { opacity: 0 !important; /* makes the tooltip transparent, must use important to override D3's inline-style */ transition: opacity 0.2s ease; /* transition animation to make the element disappear smoothly */ } /* disable the circle following the mouse when dragging the map */ body.is-map-interacting .circle { opacity: 0 !important; transition: opacity 0.2s ease; } /* = implementing gradient for only = */ /* Set container container to relative (+ no spill) to make the gradient visibile */ #map-container { position: relative; overflow: hidden; } /* Gradient must show on a device that supports hover, so it's a @media (hover:hover) */ @media (hover: hover) { /* To make the gradient appear when not-hovered */ #map-container::after { content: ""; position: absolute; inset: 0; /* compact notation for top:0, right:0, bottom:0, left:0 */ z-index: 10; background: linear-gradient(180deg, var(--blue-5, #070713) 0%, rgba(21, 20, 57, 0.00) 50%, var(--blue-5, #070713) 100%); opacity: 1; /* visible by default */ transition: opacity 0.3s ease-in-out; /* transition animation between visible / not visible */ pointer-events: none; /* to make the mouse pass through the gradient - otherwise it captures the hovers */ } /* To make the gradient disappear when map is hovered (anywhere) */ #map:hover #map-container::after { opacity: 0; } } /* */ /* === ACCORDION (info.html) === */ /* */ /* section wrapper */ #accordionFAQ, .review-container { position: relative; /* container (#accordionFAQ) must be relative for the glass filter to work on the rest of the accordion */ overflow: hidden; /* to not make the image spill outside the container */ z-index: 1; /* to make the element stay under the glass filter */ } /* image wrapper */ .accordion-bg-decoration { position: absolute; bottom: 0; left: 0; z-index: -1; /* -1 to make the image stay behind the text */ width: auto; max-height: 100%; /* image resizes automatically in width, but never exceeding height = 100% */ overflow: hidden; /* overflow hidden so it doesn't spill */ } #reviewsCarousel{ background-image: linear-gradient(to top, var(--blue-5), transparent, var(--blue-5)); } .background-review { background-image: linear-gradient(to top, var(--blue-5), transparent, var(--blue-5)); position: absolute; bottom: 0; left: 0; height: 100%; z-index: -1; /* -1 to make the image stay behind the text */ width: auto; max-height: 100%; /* image resizes automatically in width, but never exceeding height = 100% */ overflow: hidden; /* overflow hidden so it doesn't spill */ mix-blend-mode: screen; } .background-review img { /* for Safari compatibility */ -webkit-mask-image: linear-gradient( var(--blue-5) ); /* Standard */ mask-image: linear-gradient(var(--blue-5)); ): filter: brightness(50%); object-fit: cover; /* This prevents it from stretching (on Safari) */ width: 100%; /* Ensures it fills width */ height: 100%; /* Ensures it fills height */ } /* image wrapper's linear-gradient filter (to make it go over the image) */ .accordion-bg-decoration::after, .background-review::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* to make the gradient go over the image, which was z-index: -1 */ background: linear-gradient( 180deg, var(--blue-5, #070713) 0%, rgba(21, 20, 57, 0.0) 50%, var(--blue-5, #070713) 100% ); } /* style of the image in the accordion */ .accordion-bg-decoration img { display: block; /* removes extra space below inline images */ width: 100%; height: auto; } /* accordion container {reminder: !important are unfortunately needed, especially for the last accordion element} */ .accordion-glass-item { background: transparent !important; /* remove white background (default in Bootstrap accordion) */ border: none !important; /* Remove borders (default in Boostrap accordion) */ width: 100% !important; display: flex; flex-direction: column; align-items: stretch !important; /* stretch to fit the whole accordion (width: 100% didn't suffice) */ justify-content: flex-start !important; border-radius: 50px !important; overflow: hidden; /* To contain background effects */ position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* box-shadow: X-offset-of-shadow, Y-offset, blur-radius, color */ } /* alignment and size for liquid-glass accordion items */ .accordion-glass-item .liquidGlass-text { display: flex !important; flex-direction: column !important; align-items: stretch !important; /* to make items fit the entire width of the container */ width: 100% !important; padding: 0 !important; /* padding handled by bootstrap */ gap: 0 !important; } /* heavy styling for the accordion's "button" */ .accordion-glass-button { background-color: var(--blue-5-70) !important; box-shadow: none !important; /* the default blue shadow was causing an issue when opening the accordion */ color: var(--blue-95) !important; /* --blue-95 is actually the white that goes over the blue-5 background */ padding: 1.25rem 2rem; width: 100%; /* text style (out of Figma) */ font-family: 'Manrope', sans-serif; font-size: var(--Typography-link, 1rem); font-style: normal; font-weight: 500; /* Figma said 700, but it was too much - it feels more like 500 */ line-height: 1.5rem; text-align: left; display: flex; align-items: center; justify-content: space-between; /* to make the text be on the left and the be on the right */ } /* Chevron (arrow) handling */ .accordion-glass-button::after { filter: invert(1) brightness(2); /* Makes the arrow white */ margin-left: auto; } /* Fighting Bootstrap's default style for an accordion again */ .accordion-button:not(.collapsed) { background-color: var(--blue-5-70) !important; /* override default color */ /* it was casting a gray shadow that I removed */ box-shadow: none !important; border-bottom: none !important; } /* Style of content within the accordion (once opened) */ .accordion-glass-body { background-color: var(--blue-5-70); color: var(--blue-95-70); padding: 1.5rem 2rem 1.5rem 2rem; /* padding for elements within the accordion */ text-align: left; border-top: 1px solid rgba(192, 190, 244, 0.1); /* line between title (button) and text (accordion content), made semi-transparent */ } /* */ /* === POPUPS (NEWSLETTER & BOOKING FORMS) === */ /* */ /* Container Animation Logic */ .valid-popup-container, .invalid-popup-container { /* override Bootstrap utilities to allow collapsing to 0 */ display: flex !important; /* Override d-none */ overflow: hidden; /* iInitial state is hidden and collapsed */ max-height: 0; opacity: 0; transform: translateX(50px); /* fade-in animations starts from the right (and goes to left) */ /* remove spacing so it doesn't take up space when hidden */ margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; /* transition animation */ transition: max-height 0.5s ease-out, margin-top 0.5s ease-out, padding 0.5s ease-out, opacity 0.4s ease-in, transform 0.5s ease-in-out; /* layout alignment */ justify-content: flex-end; border-radius: 50px; } /* active state of the popup (triggered by JS) */ .popup-active { /* Restore space */ max-height: 150px; margin-top: 3rem !important; /* replaces mt-5 */ padding-top: 1rem !important; /* replaces py-3 */ padding-bottom: 1rem !important; opacity: 1; /* becomes visible */ transform: translateX(0); /* slides in the right position (from right to left) */ } /* valid popup visual style (blue) */ .valid-popup { text-align: center; border-radius: 12px; padding: 15px 30px; background: radial-gradient(ellipse, var(--blue-50), var(--blue-50-30), transparent, transparent); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), inset 0 0 20px 5px rgba(7, 7, 19, 0.9); backdrop-filter: blur(10px); } /* invalid popup visual style (orange) */ .invalid-popup { text-align: center; border-radius: 12px; padding: 15px 30px; background: radial-gradient(ellipse, var(--orange), var(--orange-30), transparent, transparent); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), inset 0 0 20px 5px rgba(7, 7, 19, 0.9); backdrop-filter: blur(10px); } /* input field text-error look */ .invalid-feedback { color: var(--orange); } /* input field error orange highlighting */ .invalid-input { border-color: var(--orange) !important; } /* fix to prevent bootstrap's default icon from padding too much the text */ #validationCustomUsername.is-invalid, .was-validated #validationCustomUsername:invalid, #validationCustomUsername.is-valid, .was-validated #validationCustomUsername:valid { background-image: none !important; /* Ensures no ghost icon (from bootstrap's defaults) conflict */ padding-right: 1rem !important; /* Resets padding to match the left side */ } /* */ /* === CUSTOM BOOTSTRAP TOOLTIP STYLE === */ /* */ /* Tooltip wrapper */ .tooltip { z-index: 1000000 !important; font-family: 'Manrope', sans-serif; font-size: 0.9rem; font-weight: 500; opacity: 1 !important; } /* Tooltip content */ .tooltip-inner { display: inline-flex; padding: 0.25rem 0.5rem; justify-content: center; align-items: center; gap: 0.5rem; border-radius: 1rem; background: radial-gradient(61.55% 98.93% at 50% 50%, var(--orange, rgba(246, 103, 85, 0.30)) 0%, rgba(246, 112, 85, 0.00) 100%); } /* Hide the default arrow because it breaks the gradient look */ .tooltip-arrow { display: none !important; } /* */ /* == PLATE DESCRIPTION BUBBLES == */ /* */ .bubble-box { position: relative; transform: translate(-25%, -50%); left: 0; width: 100%; } @media (min-width: 768px) and (max-width: 991.98px) { #percorso .bubble-box { position: relative; transform: translate(-25%, -30%); left: 0; scale: 1.2; width: 100%; } } .home .bubble-box{ transform: translate(0%, 0%) !important; } .home .platePageOneBubble{ transform: none !important; height: 100%; } .bubble-box-descr{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .bubble-box-descr img{ position: absolute; top: 0; right: 0; height: 100%; } .platePageOneBubble, .platePageTwoBubble, .platePageThreeBubble { transform: translate(0%, 0%) !important; overflow: hidden !important; position: relative !important; top: inherit !important; } .platePageOneBubble img, .platePageTwoBubble img, .platePageThreeBubble img{ scale: 1.2; } /* Responsive adjustments of bubbles for large screens */ @media (min-width: 992px) { .platePageOneBubble, .platePageTwoBubble, .platePageThreeBubble{ overflow: hidden !important; position: absolute !important; max-width: unset !important; width: 100%; } .platePageTwoBubble img, .platePageThreeBubble img { scale: 1.1; } .platePageOneBubble img, .platePageTwoBubble img, .platePageThreeBubble img{ transform: translateX(20%); } .platePageOneBubble{ right: 0; } .home .platePageOneBubble{ transform: none !important; position: relative !important; } .home .platePageOneBubble img{ transform: none !important; scale: 1.8; } } /* Reservation edit page confirmation message's style */ #confirmed { background-image: radial-gradient(ellipse, var(--blue-50), var(--blue-50), transparent, transparent); font-size: var(--Typography-body-lead); } /* */ /* == BOOKING (prenota.html & gestisci-prenotazione.html) == */ /* */ .liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine { pointer-events: none !important; } .booking-section { background: linear-gradient( 180deg, var(--blue-5, #070713) 0%, rgba(21, 20, 57, 0.00) 50%, var(--blue-5, #070713) 100% ), url("../media/img/booking-background-form-1.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; backface-visibility: inherit; padding-top: 50px; padding-bottom: 50px; } .booking-section-2 { background: linear-gradient( 180deg, var(--blue-5, #070713) 0%, rgba(21, 20, 57, 0.00) 50%, var(--blue-5, #070713) 100% ), url("../media/img/booking-background-form-2.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; backface-visibility: inherit; padding-top: 50px; padding-bottom: 50px; } .reservation-container { border-radius: 16px; overflow-y: visible; scrollbar-width: none; height: max-content; } .reservation-container .liquidGlass-shine { background: var(--blue-5-70); } .reservation-container .liquidGlass-effect, .reservation-container .liquidGlass-shine, .reservation-container .liquidGlass-tint { border-radius: 20px; } .reservation-container .liquidGlass-text { position: relative; z-index: 2; } .liquidGlass-wrapper { position: relative; } /* Error message */ .was-validated input:invalid, .was-validated .select-selected.is-invalid, input.form-control.is-invalid { border: 1px solid var(--orange, #F67055) !important; } /* Error display (feedback is shown ONLY when the form has been validate AND the field is actually invalid) */ .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-select:invalid ~ .invalid-feedback, .was-validated .select-selected.is-invalid ~ .invalid-feedback, /* Specific fix for the datepicker inside input-groups */ .was-validated .input-group .form-control:invalid ~ .invalid-feedback, .was-validated .input-group .is-invalid ~ .invalid-feedback { display: block !important; color: var(--orange, #F67055) !important; font-size: 12px !important; line-height: 12px !important; margin-top: 0.35rem !important; } .custom-error { margin-top: 6px; color: var(--orange); font-size: 12px; line-height: 12px; } .input-group img{ z-index: 100; margin-top: 18px } .form-control { color: var(--blue-95) !important; } .form-control::placeholder { color: var(--blue-95-70) !important; opacity: 1; } .form-control:focus { color: var(--blue-95) !important; background-color: var(--blue-5); } /* Custom selects */ .select-selected { color: var(--blue-95) !important; } .select-selected.is-placeholder { color: var(--blue-95-70) !important; } /* */ /* DATEPICKER Custom Palette */ /* */ .datepicker-input { color: var(--blue-95); } /* Overwrites the background of the main container */ .datepicker-dropdown.datepicker { border-radius: 8px !important; box-shadow: 0 4px 12px var(--blue-5-70); } .datepicker-picker { background-color: var(--blue-5) !important; padding: 0; } /* Specific rule for the calendar header (where the arrows are) */ .datepicker-header { background-color: var(--blue-5-70) !important; } /* Rule for the main area (days) */ .datepicker-main { padding: 16px; background-color: var(--blue-5-70) !important; } /* Text color in the calendar */ .datepicker table tr td, .datepicker table tr th { color: var(--blue-5) !important; font-weight: 500; } /* Style for the month/year header and days of the week */ .datepicker table tr th { color: var(--blue-5); font-weight: 700; } /* Navigation buttons (arrows and month/year) */ .datepicker table tr th.datepicker-title, .datepicker table tr th.prev, .datepicker table tr th.next, .datepicker table tr th.picker-switch { color: var(--blue-70); transition: background-color 0.2s ease; } /* Hover on navigation buttons */ .datepicker table tr th.prev:hover, .datepicker table tr th.next:hover, .datepicker table tr th.picker-switch:hover { background-color: var(--blue-50-30); border-radius: 4px; } /* Style for date cells (days) */ .datepicker table tr td.day { padding: 8px 10px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; } /* Hover on available days */ .datepicker table tr td.day:hover { background-color: var(--blue-50-30) !important; color: var(--blue-95); cursor: pointer; } /* */ /* --- STYLES FOR DAYS --- */ /* */ /* Selected day (today's date) */ .datepicker table tr td.day.today, .datepicker-cell.day.today, .datepicker-cell.month.focused { background-color: var(--blue-15-70) !important; color: var(--blue-95) !important; border-radius: 50%; border: 1px solid var(--blue-70); } .datepicker-cell.month { height: auto !important; aspect-ratio: 1/1; } /* Active month */ .datepicker-cell.month.focused { background-color: var(--blue-15-70) !important; color: var(--blue-95) !important; border-radius: 50%; border: 1px solid var(--blue-70); padding: 0 !important; } /* Hover on available days */ .datepicker-cell:not(.disabled):hover { background: radial-gradient(circle, var(--blue-50-70), var(--blue-50-70), transparent, transparent) !important; color: var(--blue-95) !important; cursor: pointer; } /* Handling hover on today's date */ .datepicker table tr td.day.today:hover, .datepicker-cell.day.today:hover { background-image: radial-gradient(circle, var(--blue-50), var(--blue-50), transparent, transparent); color: var(--blue-95); } /* normal selected day and hover */ .datepicker-cell.selected, .datepicker-cell.selected:hover { background: radial-gradient(circle, var(--orange), var(--orange), transparent, transparent) !important; color: var(--blue-95) !important; font-weight: 600; } .datepicker-cell.focused:not(.selected) { background: transparent !important; } /* Day selected by the user */ .datepicker table tr td.selected, .datepicker table tr td.selected:hover { background-image: radial-gradient(circle, var(--blue-50), var(--blue-70), transparent); } /* Inactive days or days outside the current month (reduced opacity) */ .datepicker table tr td.old, .datepicker table tr td.new { color: var(--blue-70-30); } /* Disabled days (Mondays and days prior to the current day) */ .datepicker-cell.day.disabled, /* NEW SELECTOR FOR SPAN CELLS */ .datepicker-cell.day.disabled:hover { color: var(--blue-70-30) !important; background-color: transparent; cursor: not-allowed; } .datepicker-picker button { background-color: var(--blue-70-30) !important; padding: 0 !important; margin: 8px !important; } .datepicker-picker button:hover { background-color: var(--blue-70-30) !important; background-image: radial-gradient(ellipse, var(--orange), transparent, transparent) !important; color: var(--blue-95) !important; padding: 0 !important; } .datepicker-picker .view-switch { border-radius: 1000px !important; } /* */ /* SELECT */ /* */ /* Hide real select (as suggested by the professor) */ .custom-hidden-select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: -1px; overflow: hidden; } /* --- CUSTOM SELECT (SIMULATED DIV) --- */ /* --- VISIBLE WRAPPER AND SELECTED FIELD --- */ .custom-select-wrapper { position: relative; width: 100%; z-index: 1; } .custom-select-wrapper img { pointer-events: none; width: 20px; z-index: 5; } /* Applies a very high z-index to the wrapper of the OPEN select */ /* when the selected field has the class 'select-arrow-active' */ .select-selected.select-arrow-active:hover { border-color: var(--blue-70); } .custom-select-wrapper .select-selected.select-arrow-active { z-index: 1000; /* High value to go on top of everything */ position: relative; /* Ensures that z-index works */ } /* Fixes the stacking context for open selects */ .custom-select-wrapper.select-is-open { z-index: 100; /* Must be greater than any other z-index in the context */ } /* Style of the display field (replaces the unopened input/select) */ .select-selected { /* Resets the browser default style */ appearance: none; -webkit-appearance: none; outline: none; border: 1px solid transparent !important; border-radius: 1000px !important; padding: 0.5rem 1rem; width: 100%; box-sizing: border-box; color: var(--blue-95) !important; font-family: inherit; font-size: 1rem; background: /* dark background */ linear-gradient(var(--blue-5), var(--blue-5)) padding-box, /* gradient cut border */ linear-gradient(to right, var(--blue-70-30), var(--blue-5)) border-box !important; transition: all 0.3s ease; } /* Hover/Focus style on the selected field */ .select-selected:hover, .select-selected.select-arrow-active { border-color: var(--blue-70); } /* Color for the placeholder state in custom selects */ .select-selected.is-placeholder { color: var(--blue-95-70) !important; } /* --- 3. CONTAINER AND OPEN OPTIONS (THE DROPDOWN) --- */ /* Options container (the open dropdown) */ .select-items { position: absolute; transform: translateY(-10%); padding-top: 20px; background-color: var(--blue-5); /* Very dark background for options */ margin-top: 1px; width: 100%; border-top: none; border-radius: 8px; box-shadow: 0 4px 8px var(--blue-5-70); z-index: 99; max-height: 200px; overflow-y: auto; scrollbar-width: none; } /* Style of every single option */ .select-items div { padding: 0.375rem 0.75rem; cursor: pointer; color: var(--blue-95); /* Light text */ transition: background-color 0.15s ease; } /* Style of options on hover or when selected */ .select-items div:hover { background-image: radial-gradient(ellipse, var(--blue-50-30), var(--blue-50-30), transparent, transparent); } .same-as-selected { background-color: var(--blue-50-30) !important; } /* Class to hide the dropdown */ .select-hide { display: none; } /* Selects both