/* CODICE SCRITTO DA ANTONINO CAVALLARO */ @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Rye&display=swap'); :root { --alt-font: "Rye", sans-serif; --base-color: #ebc717; --primary-font: 'Montserrat', sans-serif; } .text-lowercase { text-transform: lowercase !important; } header .navbar-brand img { max-height: 74px; } .bg-yellow { background-color: var(--base-color) !important; } .btn { border: none; } .btn.btn-base-color { color: #222; } .text-color-secondary { color: #ebc717; } .center-logo .navbar-nav .nav-link { font-size: unset; } .btn.btn-black-primary-light { border-color: #ebc717; } .btn.btn-brand-color { background-color: var(--base-color); } .hero-page { height: 600px; } .page-content .carte { display: none; } @media (min-width: 992px) { .page-content .carte { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .carta-1 { position: absolute; top: -1.8rem; left: -2rem; } .carta-2 { position: absolute; top: -6.8rem; right: -7rem; width: 360px; } .carta-3 { position: absolute; bottom: 0; left: 0; } .carta-4 { position: absolute; bottom: 0; right: 0; } } .overlay--custom:before { background-color: var(--overlay-background, rgb(0 0 0 / 50%)); } .nav-tabs--custom { scrollbar-color: var(--base-color); scrollbar-width: auto; padding-bottom: .75rem; } .nav-tabs--custom::-webkit-scrollbar { width: 4px; height: 6px; } .nav-tabs--custom::-webkit-scrollbar-thumb { background-color: var(--base-color); border-radius: 10px; } .nav-tabs--custom>li.nav-item>a.nav-link { font-size: 1rem; line-height: 1.2; } .nav-tabs--custom>li.nav-item { width: 150px; flex: 0 0 150px; margin: 1rem 0rem !important; } @keyframes rotateY360 { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .animated-coin { animation: rotateY360 2s linear 2; transform-style: preserve-3d; } .animated-coin--infinite { animation: rotateY360 2s linear infinite; transform-style: preserve-3d; } .page-title-extra-large { z-index: 2; } .header-shop header .navbar { position: sticky; top: 0; background: #3c3c3c; box-shadow: 0 0 15px rgba(0, 0, 0, .15); } .header-shop header .prenota-tavolo { display: none; } header .cart-icon__dot, header .wishlist-icon__dot { top: 23px; } /* STILE PER PAGINA SHOP */ body.header-shop { position: relative; } body.header-shop:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background: url(https://www.pscdn.it//img/137/25/01/35245-bg.webp) no-repeat 0 0; background-size: cover; opacity: .5; } .header-shop .sticky-header { background: transparent; } .header-shop .header-bottom { background-color: transparent; } .header-shop header .head-search-card { opacity: 1; border-radius: 50px; background-color: #ccc; } .header-shop header .head-search-card .form-control { min-height: calc(1em + (1rem + 2px)); padding: .5rem .775rem; } .header-shop header .head-search-card .form-control[placeholder] { text-align: end; } .header-shop header .menu-grey { background-color: #575756; padding: .25rem 1rem; margin-top: 1rem; } .header-shop header .menu-grey .nav-item { padding: 1rem !important; } .header-shop header .menu-grey .nav-link { padding: 0 .5rem; } .header-shop .box-home { min-height: 300px; } .header-shop .box-home--big { min-height: 600px; } .header-shop .overlay-bg { position: relative; z-index: 0; } .header-shop .overlay-bg:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: rgba(0, 0, 0, 1); } .header-shop .overlay-bg--500:before { opacity: .5; } .header-shop .overlay-bg--350:before { opacity: .35; } .header-shop .btn.btn-primary { background-color: #FFD600 !important; border-radius: 50px; padding: .5rem 3rem; border: 1px solid #FFD600; font-weight: 500 !important; color: #575756 !important; } .header-shop .text-secondary { font-family: Rye !important; font-weight: 500; } .header-shop .text-title { font-family: Abril Fatface; font-size: 40px; } .header-shop .color-secondary { color: #D1A900; } .header-shop .img-overlay { max-width: 530px; position: absolute; top: -5rem; left: 35%; } .header-shop .contact-box small { font-size: .7125rem; } .header-shop .borderLeft { position: relative; } .header-shop .borderLeft:before { position: absolute; top: 0; bottom: 0; left: 0; content: ''; width: 1px; height: 100%; background-color: transparent; border: 1px solid #dfdfdf; border-radius: 50%; transform: scaleX(1.4); } .header-shop .footer-newsletter-form { height: 48px; } .header-shop .footer-newsletter-input, .footer-newsletter-btn { background: transparent; } .header-shop .footer-top { border-bottom: 60px solid #D1A900; } .header-shop .icon-circular-background { display: inline-flex; align-items: center; justify-content: center; background-color: #dddddd; border-radius: 50%; width: 40px; height: 40px; text-decoration: none; margin-right: 8px; } .cart-icon__dot, .wishlist-icon__dot { background-color: #d1a900 !important; } .header-shop .breadcrumb_collection { margin-top: 0 !important; } .header-shop .breadcrumb { margin-top: 20px !important; } .header-shop .featured-collection-section.related-products { margin: 70px 0 !important } .header-shop .featured-collection-section.related-product h6 span { font-family: "Rye", sans-serif; } @media (max-width: 768px) { header .navbar { position: relative !important; background: #1a1a1a; box-shadow: 0 0 15px rgba(0, 0, 0, .15); } .prenota-tavolo { display: none; } main #sections>section:first-child { margin-top: 0 !important; } } .sfumatura { background: linear-gradient(to bottom, #F0EEEA, #FFFFFF); } /* css antonino */ ::selection { color: #fff; background-color: #ebc717; } html { scroll-behavior: smooth; } /* ICONE H3 */ .title-container { display: flex; align-items: center; justify-content: center; } .title-icon { width: 60px; height: auto; margin: 0 10px; } h3 { margin: 0; text-align: center; } .left-icon { margin-right: 10px; margin-bottom: 25px; } .right-icon { margin-left: 10px; margin-bottom: 25px; } .bg-gradient-dark-transparent { background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.55) 100%); } /* Stili per l’anchor che pulsa verso il basso */ .scroll-down { display: inline-block; animation: pulseDown 1.5s infinite; } /* Definizione dei keyframes */ @keyframes pulseDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20px); } } .floating-element { position: absolute; animation: float 6s ease-in-out infinite; max-width: 350px; z-index: 1; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } } /* back to top */ .scroll-top-btn { position: fixed; bottom: 40px; right: 40px; cursor: pointer; z-index: 99999; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(180deg) scale(0.8); background: rgba(235, 199, 23, 0.9); border-radius: 50%; padding: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .scroll-top-btn.show { opacity: 1; visibility: visible; transform: rotate(180deg) scale(1); } .scroll-top-img { width: 50px; height: 50px; display: block; transition: transform 0.3s ease; } .scroll-top-btn:hover .scroll-top-img { transform: translateY(5px); } @media (max-width: 767px) { .scroll-top-btn { bottom: 20px; right: 20px; padding: 8px; } .scroll-top-img { width: 40px; height: 40px; } } /* ombra img */ .image-levitate { position: relative; display: inline-block; } .image-levitate::after { content: ""; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 50%; height: 15px; background: rgba(0, 0, 0, 0.35); border-radius: 50%; filter: blur(8px); z-index: -1; } .image-levitate2 img { display: block; transition: transform 0.6s ease; transform-origin: center; } .image-levitate2:hover img { transform: rotate(8deg); } .image-levitate2 { position: relative; display: inline-block; } .image-levitate2::after { content: ""; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 25%; height: 15px; background: rgba(0, 0, 0, 0.35); border-radius: 50%; filter: blur(8px); z-index: -1; } .hover { position: relative; overflow: visible; } .hover::before { content: ""; position: absolute; width: 25px; /* diametro iniziale del cerchio */ height: 25px; background: rgba(235, 199, 23, 0.9); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease-out; pointer-events: none; z-index: -1; } .hover:hover::before { transform: translate(-50%, -50%) scale(15); /* scala abbastanza da coprire l’intero elemento */ } .fixed-hover { position: relative; overflow: visible; } .fixed-hover::before { content: ""; position: absolute; width: 25px; /* diametro base del cerchio */ height: 25px; background: rgba(235, 199, 23, 0.9); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(18); transition: transform 0.4s ease-out; pointer-events: none; z-index: -1; } .fixed-hover:hover::before { transform: translate(-50%, -50%) scale(0); } /* video ricette*/ .video-container { width: 100%; max-width: 400px; aspect-ratio: 4 / 5; margin: auto; } .video-container video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 25px, rgba(0, 0, 0, 0.35) 0px 5px 10px; } @media (max-width: 767px) { .video-container { max-width: 100%; aspect-ratio: 4 / 6; } } /* prodotto consigliato*/ .badge-consigliato { position: absolute; top: 10px; right: 10px; background-color: #ebc717; color: white; font-weight: bold; padding: 5px 10px; font-size: 0.9rem; border-radius: 8px; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .footer-bg { position: relative; background-position: center top; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; background-image: url('https://www.pscdn.it/img/137/25/05/14561-vintage-golden-floral-pattern-.webp'); } .footer-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1; } .wishlist-icon__dot { position: absolute; top: 23px; right: -8px; background-color: #d1a900; width: 18px; height: 18px; border-radius: 50%; line-height: 18px; font-weight: 700; font-size: 10px; text-align: center; cursor: pointer; z-index: 999; color: var(--primary-text-color, #fff); } .wishlist-page { margin-top: 0 !important; } .wishlist-page-inner { padding-top: 100px !important; } /* paginazione ricette */ @keyframes slideFromRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideFromLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } .slide-from-right { animation: slideFromRight 0.5s ease-out forwards; } .slide-from-left { animation: slideFromLeft 0.5s ease-out forwards; } .btn.btn-dark-gray.active { background-color: #ebc717 !important; color: #1a1a1a !important; } .btn.btn-dark-gray:hover { background-color: #ebc717 !important; } .btn.btn-dark-yellow { background-color: #ebc717 !important; color: #1a1a1a !important; } .btn.btn-dark-yellow:hover { background-color: #1a1a1a !important; color: #ebc717 !important } /*pagina shop */ .header-shop header .navbar { background: #0c0c0c; } .filter-sort-wrapper.fixed { transform: none !important; } .breadcrumb_collection { background-color: #ebc717; } .col-breadcrumb__title { font-family: var(--alt-font) !important; } .action-card { background-color: #000 !important; } .action-card svg { color: #fff !important; } .action-card:hover { background-color: #ebc717 !important; color: #000 !important; } .ProgressBarComponent .ProgressBar { background-color: #ebc717; } /* dettaglio prodotto*/ h2.section-heading, .product-tab-link, h2.product-title { font-family: var(--alt-font) !important; } .addtocart-btn:hover, .quickview-btn:hover, .btn-atc:hover { background-color: #ebc717; color: #000; } @media (max-width: 448px) { .hover:hover::before { transform: translate(-50%, -50%) scale(12); } .fixed-hover::before { transform: translate(-50%, -50%) scale(12); } } @media (max-width: 768px) { .floating-element { max-width: 100px; } } @media (max-width: 991px) { .navbar-left, .navbar-right { text-align: center !important; width: 100% !important; } header .navbar [class*=col-] .navbar-nav .nav-item, header .navbar [class*=col-] .navbar-nav .nav-item a { display: block; color: #000; font-weight: 700; } .navbar.header-dark .navbar-collapse { background-color: #ffffff !important; color: #000 !important; background-image: url('https://www.pscdn.it/img/137/25/01/35245-bg.webp'); } .navbar .language-wrapper { margin-top: 20px !important; margin-bottom: 20px !important; } .navbar .language-wrapper button span { color: #000; } } @media (min-width: 1440px) { .fs-100 { font-size: 8.25rem; } .title-icon { width: 50px; } } /* menu style */ .modern-menu-section { font-family: 'Open Sans', sans-serif; color: #333; } .menu-hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; margin-bottom: 40px; } .hero-content { max-width: 800px; padding: 20px; } .restaurant-name { font-size: 3rem; font-weight: 300; margin-bottom: 10px; letter-spacing: 2px; } .menu-title { font-size: 2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 1px; } .restaurant-logo { max-width: 150px; height: auto; margin: 0 auto; } .menu-container { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .menu-sidebar { width: 250px; border-radius: 10px; padding: 20px; margin-right: 30px; position: sticky; top: 20px; height: fit-content; z-index: 10; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .category-list { list-style: none; padding: 0; margin: 0; } .category-item { display: flex; align-items: center; padding: 12px 15px; margin-bottom: 8px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .category-item:hover { background: #e9e9e9; } .category-item.active { background: var(--base-color); color: white; } .category-icon { width: 30px; height: 30px; margin-right: 15px; } .menu-content { flex: 1; } .menu-category { display: none; } .menu-category.active { display: block; } .category-title { font-size: 2rem; color: var(--base-color); margin-bottom: 30px; padding-bottom: 10px; border-bottom: 2px solid #eee; } .category-columns { display: flex; gap: 30px; } .category-column { flex: 1; } .subcategory-title { font-size: 1.5rem; color: #333; margin-bottom: 20px; } .menu-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed #ddd; } /* Nascondo il logo da ogni portata */ .menu-item .item-image { display: none; } .item-header { display: flex; align-items: center; margin-bottom: 10px; } .item-name { flex: 1; font-size: 1.2rem; font-weight: 600; margin: 0; } .item-price { font-size: 1.2rem; font-weight: 600; color: var(--base-color); } .item-description { margin: 0; color: #666; font-size: 1rem; line-height: 1.5; text-transform: lowercase; } @media (max-width: 992px) { .menu-container { flex-direction: column; } .menu-sidebar { width: 100%; margin-right: 0; margin-bottom: 30px; position: static; } .category-columns { flex-direction: column; } } @media (max-width: 768px) { .menu-hero { height: 250px; } .restaurant-name { font-size: 2.2rem; } .menu-title { font-size: 1.5rem; } } /* Desktop Styles */ @media (min-width: 992px) { .desktop-menu { display: block; /* Show on desktop */ } .mobile-menu { display: none; /* Hide on desktop */ } } /* Mobile Styles */ @media (max-width: 991px) { .desktop-menu { display: none; /* Hide on mobile */ } .mobile-menu { display: block; /* Show on mobile */ } .tab-content.anime-complete h2 { color: var(--base-color) !important; text-align: center !important; font-size: 2rem !important; } } /* Rendi la navbar sticky */ .sticky-nav { position: sticky; top: 0; z-index: 1000; background-color: rgba(240, 238, 234, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Base styles */ .list-group { width: 100%; max-width: 280px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; padding: 0; margin: 0 auto; } /* Item styles */ .list-group-item { display: block; padding: 12px 20px; font-size: 16px; font-weight: 500; color: #333; background-color: #fff; border: none; border-bottom: 1px solid #f0f0f0; transition: all 0.3s ease; cursor: pointer; } .list-group-item:last-child { border-bottom: none; } /* Hover and active styles */ .list-group-item:hover, .list-group-item:focus { background-color: #f8f9fa; color: #000; text-decoration: none; } .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { background-color: var(--base-color); color: #fff; font-weight: 600; border-left: 4px solid #ae8e00; border-radius: 0; border-bottom: none !important; } /* Optional: rounded corners for the first and last items */ .list-group-item:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; } .list-group-item:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Responsive adjustments */ @media (max-width: 768px) { .list-group { max-width: 100%; border-radius: 0; box-shadow: none; } } .giftbox-wrapper *:not(.fas) { font-family: Montserrat } .giftbox-wrapper .products-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !IMPORTANT; } .giftbox-wrapper .header-section h1 { font-family: var(--alt-font) !important; } .language-btn { background: transparent; border: 0; outline: none; } @media (max-width: 590px) { .language-wrapper { display: flex; justify-content: center; margin: 0 AUTO; } } /* Effetto hover sulle immagini dei piatti */ .hover-wrapper { display: inline-block; overflow: visible; /* permette box-shadow e levitazione */ } .hover-dynamic { display: block; transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease; cursor: pointer; will-change: transform, filter, box-shadow; /* ottimizza la performance */ } .hover-wrapper:hover .hover-dynamic { transform: scale(1.05) rotate(-2deg) translateY(-10px); /* zoom ridotto */ filter: brightness(1.2) saturate(1.3); box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3); } header .disable-fixed { position: fixed; } .language-wrapper { position: relative; z-index: 9999999; } .language-wrapper * { position: relative; z-index: 9999999; } .phone-block { display: none; } @media screen and (min-width: 1500px){ .phone-block { display: block; } } @media screen and (min-width: 990px) { header a[href="/page/la-matta"] { width: 200px; } header a[href="/page/chi-siamo"] { width: 150px; } }