/* Global Styles & Font Imports */ /* Google Fonts are imported in HTML */ :root { --primary-color: #a82868; --secondary-color: #c75d93; --background-light: #fdf5f9; /* Default light background for index.html */ --text-dark: #3d1d2a; --text-light: #ffffff; --navbar-text-scrolled: #a82868; /* Primary color for inactive links on scrolled navbar */ --accent-color: #f0ac01; --footer-bg: #3d1d2a; --font-headings: "Poppins", sans-serif; --font-body: "Open Sans", sans-serif; /* Gradient variable for the footer */ --footer-gradient: linear-gradient( 160deg, var(--primary-color) 0%, var(--footer-bg) 70%, var(--footer-bg) 100% ); --menu-slider-height: 450px; /* Height needed for the dots area, including some space above/below dots */ --menu-dots-visual-area-height: 35px; /* Gradient colors for the hero button animation */ --hero-btn-grad-1: var(--accent-color); --hero-btn-grad-2: #ffc107; --hero-btn-grad-3: #ffd54f; /* Menu Page Specific Colors & Styles */ --menu-page-bg: rgb(37, 2, 17); /* Dark background for menu.html */ --menu-page-section-title-color: var( --text-light ); /* Light color for section titles on menu page */ --menu-page-category-title-color: var( --text-light ); /* Light color for h3 category titles on menu page */ --menu-category-btn-bg: #4a1e34; /* Darker pink, less saturated for buttons */ --menu-category-btn-text: rgb( 233, 199, 217 ); /* Lighter pink for text on buttons */ --menu-category-btn-active-bg: var( --secondary-color ); /* Brighter pink for active button */ --menu-category-btn-active-text: var(--text-light); --menu-item-border: #5c3d4c; /* Border for item cards and category separators on dark bg */ --menu-item-card-bg: #2e0f20; /* Slightly lighter than page bg for cards */ --menu-item-name-color: var(--text-light); --menu-item-description-color: #d1abd3; /* Light pink for description */ --menu-item-price-color: var(--menu-category-btn-text); --add-to-cart-btn-bg: var(--accent-color); /* Gold for add button */ --add-to-cart-btn-text: #333333; /* Dark Gray for "Tambah" button text */ --quantity-btn-bg: #5c3d4c; /* Darker pink for quantity buttons */ --quantity-btn-text: var(--text-light); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-dark); background-color: var(--background-light); /* Default for index.html */ line-height: 1.6; } /* Specific background for menu.html */ body.body-menu { background-color: var(--menu-page-bg); color: var(--text-light); /* Default text color for menu page */ } body.body-menu .section-title { /* Override default section title for menu page */ color: var(--menu-page-section-title-color); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--primary-color); /* Default heading color */ margin-bottom: 0.75rem; } section { padding: 60px 20px; overflow-x: hidden; } .container { max-width: 1100px; margin: 0 auto; padding: 0 15px; } /* Navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background-color: transparent; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; opacity: 0; transform: translateY(-100%); animation: slideDownFadeIn 0.8s ease-out 0.5s forwards; } @keyframes slideDownFadeIn { to { opacity: 1; transform: translateY(0); } } .navbar.scrolled { background-color: rgba(253, 245, 249, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 0.75rem 2rem; } .navbar-logo { display: inline-block; text-decoration: none; transition: transform 0.3s ease; } .navbar-logo .logo-image { display: block; max-height: 40px; width: auto; transition: filter 0.4s ease, max-height 0.4s ease; } .navbar.scrolled .navbar-logo .logo-image { max-height: 35px; } .navbar-logo:hover { transform: scale(1.05); } .navbar-links { list-style: none; display: flex; } .navbar-links li { margin-left: 0; opacity: 0; transform: translateY(-20px); } .navbar-links li:nth-child(1) { animation: navLinkFade 0.5s ease forwards 0.8s; } .navbar-links li:nth-child(2) { animation: navLinkFade 0.5s ease forwards 1s; } .navbar-links li:nth-child(3) { animation: navLinkFade 0.5s ease forwards 1.2s; } .navbar-links li:nth-child(4) { animation: navLinkFade 0.5s ease forwards 1.4s; } @keyframes navLinkFade { to { opacity: 1; transform: translateY(0); } } /* --- NAVBAR LINK STYLING --- */ .navbar-links a { text-decoration: none; color: var( --text-light ); /* Default: Light text for hero state (transparent navbar bg) */ font-weight: 600; padding: 0.5rem 1rem; transition: color 0.4s ease, background-color 0.3s ease; border-radius: 4px; position: relative; } /* When navbar is NOT scrolled (on hero, transparent background) */ .navbar:not(.scrolled) .navbar-links a:hover { color: var(--secondary-color); /* Lighter pink on hover */ } .navbar:not(.scrolled) .navbar-links a.active { color: var(--secondary-color); /* Lighter pink for active page */ font-weight: 700; } /* When navbar IS scrolled (white background) */ .navbar.scrolled .navbar-links a { /* Default for INACTIVE links when scrolled */ color: var(--navbar-text-scrolled); /* Dark Orange for inactive links */ background-color: transparent; } .navbar.scrolled .navbar-links a:not(.active):hover { /* Hover for INACTIVE links when scrolled */ color: var(--text-light); background-color: var(--secondary-color); } .navbar.scrolled .navbar-links a.active { /* ACTIVE link when scrolled */ color: var(--text-light); /* White text for active link */ background-color: var( --primary-color ); /* Primary color background for active link */ } .navbar.scrolled .navbar-links a.active:hover { /* Hover for ACTIVE link when scrolled */ background-color: var(--secondary-color); color: var(--text-light); } /* --- END NAVBAR LINK STYLING --- */ .nav-toggle { display: none; cursor: pointer; font-size: 1.5rem; color: var(--text-light); user-select: none; transition: color 0.4s ease; } .navbar.scrolled .nav-toggle { color: var(--navbar-text-scrolled); } /* Ensure mobile nav links are always light on their dark background */ .navbar-links.active a, .navbar-links.active a:hover { color: var(--text-light) !important; } .navbar-links.active a:hover { background-color: var(--secondary-color); } /* Hero Section */ .hero { min-height: 100vh; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--text-light); padding: 0 20px; position: relative; transition: background-image 1s ease-in-out; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .hero-content { position: relative; z-index: 1; opacity: 0; transform: translateY(30px); animation: fadeInSlideUp 1s ease-out 1.5s forwards; } @keyframes fadeInSlideUp { to { opacity: 1; transform: translateY(0); } } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-light); } .hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin: 0 auto 50px; } /* Hero Button with Animated Gradient */ .hero-button { color: var(--text-dark); padding: 0.8rem 1.8rem; text-decoration: none; font-family: var(--font-headings); font-weight: 600; font-size: 1.1rem; border-radius: 50px; display: inline-flex; align-items: center; gap: 0.75rem; border: none; position: relative; overflow: hidden; background: linear-gradient( 120deg, var(--hero-btn-grad-1), var(--hero-btn-grad-2), var(--hero-btn-grad-3), var(--hero-btn-grad-2), var(--hero-btn-grad-1) ); background-size: 300% 100%; animation: animatedGradient 4s linear infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; } @keyframes animatedGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero-button-icon { width: 1.2em; height: 1.2em; fill: var(--text-dark); vertical-align: middle; z-index: 1; position: relative; } .hero-button span { position: relative; z-index: 1; } .hero-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); } /* Scroll Down Arrow for Hero Section */ .scroll-down-arrow { position: absolute; bottom: 40px; /* Adjust distance from bottom */ left: 50%; transform: translateX(-50%); z-index: 5; /* Ensure it's above hero overlay but below other interactive elements if any */ cursor: pointer; /* Optional: if you want to make it clickable to scroll */ } .scroll-down-arrow svg { width: 36px; /* Adjust size */ height: 36px; fill: var(--text-light); /* White arrow */ animation: bounceArrow 2s infinite; } @keyframes bounceArrow { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Box Link Section / Specialties */ #specialties { background-color: var(--background-light); } /* .section-title is defined globally, color will be var(--primary-color) */ /* If menu.html has a section with id="specialties", its .section-title will be light due to body.body-menu .section-title */ .box-link-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .box-link-item { position: relative; height: 250px; background-size: cover; background-position: center; border-radius: 8px; overflow: hidden; text-decoration: none; transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; justify-content: center; align-items: center; } .box-link-item:hover { transform: scale(1.03); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .box-link-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); transition: background 0.3s ease; } .box-link-item:hover::before { background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); } .box-link-item h3 { position: relative; z-index: 1; color: var(--text-light); font-size: 1.8rem; text-align: center; transition: transform 0.3s ease; } .box-link-item:hover h3 { transform: translateY(-10px); } /* Menu Section - Slider Styles (Homepage) */ #menu { text-align: center; background-color: #fff; } #menu .container > p { max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .menu-slider-container { position: relative; max-width: 700px; margin: 0 auto; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); height: var(--menu-slider-height); } .menu-slider { display: flex; height: 100%; transition: transform 0.5s ease-in-out; } .menu-slide { min-width: 100%; height: 100%; position: relative; } .menu-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .menu-slide-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient( transparent, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.9) 100% ); color: var(--text-light); padding: 10px 15px calc(var(--menu-dots-visual-area-height) + 5px); text-align: center; box-sizing: border-box; z-index: 11; } .menu-slide-caption h4 { margin: 0; font-size: 1.1rem; color: var(--text-light); padding-bottom: 5px; } .menu-slider-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.3); color: white; border: none; padding: 8px 12px; font-size: 1.3rem; cursor: pointer; z-index: 15; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .menu-slider-button:hover { background-color: rgba(0, 0, 0, 0.6); } .menu-slider-button.prev { left: 15px; } .menu-slider-button.next { right: 15px; } .menu-slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 12; padding: 5px; } .menu-slider-dot { cursor: pointer; height: 10px; width: 10px; margin: 0 4px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; display: inline-block; transition: background-color 0.3s ease, transform 0.3s ease; } .menu-slider-dot.active, .menu-slider-dot:hover { background-color: var(--text-light); transform: scale(1.2); } /* Location Section */ #location { background-color: var(--background-light); } .location-content { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; } .location-address p { font-size: 1.1rem; margin-bottom: 0.5rem; } .location-address h2 { margin-bottom: 1rem; } .map-container { position: relative; overflow: hidden; padding-top: 56.25%; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Footer - Gradient Background Design with 3-Column Main Content */ .footer { background: var(--footer-gradient); color: var(--text-light); text-align: center; padding: 30px 0 0; } .footer-main { padding: 0 20px 30px; } .footer-main-content { display: flex; flex-direction: column; gap: 30px; } .footer-column h4 { font-size: 1.1rem; color: var(--text-light); margin-bottom: 12px; font-weight: 600; } .footer-branding .footer-logo { display: inline-block; margin-bottom: 10px; text-decoration: none; } .footer-branding .footer-logo img { display: block; max-height: 80px; width: auto; } .footer-tagline { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.5; } .footer-address-contact p { font-size: 0.9rem; margin-bottom: 6px; color: rgba(255, 255, 255, 0.85); } .footer-address-contact p:last-child { margin-bottom: 0; } .footer-social-order .footer-social { display: flex; justify-content: center; gap: 18px; margin-bottom: 15px; } .footer-social-order .social-icon { width: 26px; height: 26px; fill: var(--text-light); transition: opacity 0.3s ease, transform 0.3s ease; } .footer-social-order a:hover .social-icon { opacity: 0.8; transform: scale(1.15); } .footer-social-order .footer-quick-contact p { margin: 0; font-size: 0.95rem; color: var(--text-light); } .footer-social-order .footer-quick-contact a { color: var(--text-light); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity 0.3s ease; } .footer-social-order .footer-quick-contact a:hover { opacity: 0.8; } .footer-copyright { padding: 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .footer-copyright p { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); } /* Scroll Animations */ .animate-on-scroll { opacity: 0; transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .animate-fade-in { transform: translateY(30px); } .animate-slide-in-left { transform: translateX(-50px); } .animate-slide-in-right { transform: translateX(50px); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0) translateX(0); } /* --- STYLES FOR MENU.HTML PAGE --- */ #menu-page-content { padding-top: 100px; padding-bottom: 120px; } body.body-menu #menu-ordering-section .section-title { color: var(--menu-page-section-title-color); text-align: center; } .menu-categories-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 50px; padding-bottom: 15px; justify-content: center; } .category-btn { padding: 10px 20px; font-family: var(--font-headings); font-size: 0.95rem; font-weight: 600; border: 1px solid var(--menu-category-btn-bg); background-color: var(--menu-category-btn-bg); color: var(--menu-category-btn-text); border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .category-btn:hover { background-color: var(--secondary-color); color: var(--text-light); transform: translateY(-2px); } .category-btn.active { background-color: var(--menu-category-btn-active-bg); color: var(--menu-category-btn-active-text); border-color: var(--menu-category-btn-active-bg); } .menu-items-list .menu-category-section { margin-bottom: 40px; } .menu-items-list .menu-category-section h3 { font-size: 1.6rem; color: var(--menu-page-category-title-color); margin-bottom: 20px; text-align: left; padding-bottom: 10px; } .menu-item-card { display: flex; flex-direction: column; /* Default for mobile, image on top */ border-radius: 8px; margin-bottom: 20px; background-color: var(--menu-item-card-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease; overflow: hidden; /* To ensure image border radius is applied */ gap: 0; } .menu-item-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .menu-item-image { width: 100%; /* Image takes full width of the card */ height: 180px; /* Increased height for bigger image ratio on mobile */ object-fit: cover; border-top-left-radius: 8px; /* Match card radius */ border-top-right-radius: 8px; /* Match card radius */ display: block; margin-bottom: 0; /* Ensure no margin if image is direct child */ } .menu-item-info { padding: 15px; text-align: left; width: 100%; } .menu-item-name { font-size: 1.1rem; font-weight: 600; color: var(--menu-item-name-color); margin-bottom: 5px; } .menu-item-description { font-size: 0.85rem; color: var(--menu-item-description-color); margin-bottom: 8px; line-height: 1.4; } .menu-item-price { font-size: 1rem; font-weight: 600; color: var(--menu-item-price-color); margin-bottom: 10px; } .menu-item-actions { display: flex; align-items: center; justify-content: flex-end; padding: 0 15px 15px; width: 100%; margin-top: auto; /* Push actions to the bottom if info content is short */ } /* Tombol Tambah dan Hover */ .add-to-cart-btn { background-color: var(--add-to-cart-btn-bg); color: var(--add-to-cart-btn-text); /* Now uses the updated dark gray */ border: none; padding: 8px 15px; font-size: 0.9rem; font-weight: 600; border-radius: 20px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease; } .add-to-cart-btn:hover { background-color: green; color: var(--text-light); /* Text becomes white on green hover */ transform: scale(1.05); } .quantity-selector button { background-color: var(--quantity-btn-bg); color: var(--quantity-btn-text); border: none; width: 30px; height: 30px; padding: 0; font-size: 1.1rem; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } .quantity-selector button:hover { background-color: #555; transform: scale(1.05); } .quantity-selector { display: flex; align-items: center; gap: 8px; } .quantity-selector .item-quantity { font-size: 1rem; font-weight: 600; min-width: 20px; text-align: center; color: var(--text-light); } /* Floating Cart Summary */ .floating-cart-summary { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--primary-color); color: var(--text-light); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); z-index: 999; transform: translateY(100%); transition: transform 0.3s ease-in-out; } .floating-cart-summary.visible { transform: translateY(0); } .floating-cart-info { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .floating-cart-info .fa-shopping-bag { font-size: 1.2rem; } .floating-cart-total { font-weight: 600; font-size: 0.9rem; } .view-cart-btn { background-color: var(--text-light); color: var(--primary-color); border: none; padding: 8px 15px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .view-cart-btn:hover { background-color: var(--secondary-color); color: var(--text-light); } /* Cart Modal */ .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal.visible { display: flex; align-items: center; justify-content: center; } .modal-content { background-color: #fff; color: var(--text-dark); margin: auto; padding: 25px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); position: relative; animation: slideInModal 0.3s ease-out; } @keyframes slideInModal { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .close-modal-btn { color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; transition: color 0.3s ease; } .close-modal-btn:hover, .close-modal-btn:focus { color: #333; text-decoration: none; cursor: pointer; } .modal-content h2 { margin-top: 0; margin-bottom: 20px; text-align: center; color: var(--primary-color); } #cart-items-container { max-height: 300px; overflow-y: auto; margin-bottom: 20px; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; /* border-bottom: 1px solid var(--menu-item-border); */ } .cart-item:last-child { border-bottom: none; } .cart-item-details { flex-grow: 1; } .cart-item-name { font-weight: 600; font-size: 0.95rem; color: var(--text-dark); } .cart-item-price { font-size: 0.9rem; color: #555; } .cart-item-quantity-controls { display: flex; align-items: center; gap: 8px; } .cart-item-quantity-controls button { background-color: var(--quantity-btn-bg); color: var(--quantity-btn-text); border: none; width: 25px; height: 25px; font-size: 1rem; border-radius: 50%; cursor: pointer; } .cart-item-remove-btn { background: none; border: none; color: var(--secondary-color); font-size: 1.1rem; cursor: pointer; margin-left: 10px; } .cart-item-remove-btn:hover { color: var(--primary-color); } .empty-cart-message { text-align: center; color: #777; padding: 20px 0; } .cart-summary { margin-top: 20px; padding-top: 15px; border-top: 2px solid var(--primary-color); text-align: right; } .cart-summary p { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; color: var(--text-dark); } .checkout-button { background-color: var(--accent-color); color: var(--text-dark); border: none; padding: 12px 25px; font-size: 1rem; font-weight: 600; border-radius: 25px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; width: 100%; } .checkout-button:hover { background-color: #ffc107; transform: scale(1.02); } #text-center { text-align: center; } #custom-order-section { max-width: 800px; background-color: var(--menu-item-card-bg); padding: 30px; border-radius: 8px; margin: 0 auto; } .custom-order-card { display: flex; flex-direction: column; align-items: center; gap: 20px; } .custom-order-description { text-align: center; margin-bottom: 12px; max-width: 550px; } .none { display: none; } /* Responsive Design */ @media (max-width: 768px) { .navbar { padding: 1rem; } .navbar.scrolled { padding: 0.75rem 1rem; } .nav-toggle { display: block; z-index: 1001; } .navbar-links { position: fixed; top: 0; left: -100%; width: 70%; max-width: 300px; height: 100vh; background-color: var(--primary-color); flex-direction: column; justify-content: center; align-items: center; transition: left 0.5s ease-in-out; box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2); } .navbar-links.active { left: 0; } .navbar-links li { margin: 1.5rem 0; opacity: 1; transform: none; } .navbar-links.active a, .navbar-links.active a:hover { color: var(--text-light) !important; } .navbar-links.active a:hover { background-color: var(--secondary-color); } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .section-title { font-size: 1.8rem; } /* Ensure menu page section title is light on dark bg */ body.body-menu .section-title { color: var(--menu-page-section-title-color); } .box-link-item h3 { font-size: 1.5rem; } .footer-column { text-align: center; } .footer-social-order .footer-social { justify-content: center; } :root { --menu-slider-height-mobile: 300px; --menu-dots-visual-area-height-mobile: 30px; } .menu-slider-container { max-width: 90vw; height: var(--menu-slider-height-mobile); } .menu-slide-caption { padding: 8px 10px calc(var(--menu-dots-visual-area-height-mobile) + 3px); bottom: 0; background: linear-gradient( transparent, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.85) 100% ); } .menu-slide-caption h4 { font-size: 0.9rem; padding-bottom: 3px; } .menu-slider-button { padding: 6px 10px; font-size: 1.1rem; width: 35px; height: 35px; } .menu-slider-button.prev { left: 10px; } .menu-slider-button.next { right: 10px; } .menu-slider-dots { bottom: 8px; } .menu-slider-dot { height: 8px; width: 8px; } .navbar-logo .logo-image { max-height: 35px; } .navbar.scrolled .navbar-logo .logo-image { max-height: 30px; } /* Menu Page Mobile Adjustments */ .menu-categories-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 10px; white-space: nowrap; } .category-btn { padding: 8px 15px; font-size: 0.9rem; } /* === UPDATED MENU ITEM CARD FOR MOBILE === */ .menu-item-card { flex-direction: column; /* Image on top, info below */ align-items: stretch; /* Make children stretch to card width */ padding: 0; /* Remove card padding, will be handled by children */ text-align: left; /* Default text align to left for info */ gap: 0; /* Remove gap for mobile as padding is on children */ } .menu-item-image { width: 100%; /* Image takes full width of the card */ max-width: none; /* Override any previous max-width */ height: 180px; /* Increased height for bigger image ratio */ object-fit: cover; border-top-left-radius: 8px; /* Match card radius */ border-top-right-radius: 8px; /* Match card radius */ margin-bottom: 0; /* Remove bottom margin if any */ } .menu-item-info { text-align: left; /* Ensure info text is left aligned */ padding: 15px; /* Add padding to info section */ } .menu-item-actions { justify-content: flex-end; /* Align button to the right */ padding: 0 15px 15px; /* Add padding to actions section */ margin-left: 0; /* Reset margin if any */ margin-top: auto; /* Push actions to bottom if info is short */ } /* === END UPDATED MENU ITEM CARD FOR MOBILE === */ .floating-cart-info, .floating-cart-total { font-size: 0.8rem; } .view-cart-btn { padding: 6px 12px; font-size: 0.85rem; } } @media (min-width: 769px) { .navbar-links li { margin-left: 20px; } .box-link-grid { grid-template-columns: repeat(3, 1fr); } .location-content { grid-template-columns: 1fr 1.5fr; text-align: left; } .location-address h2 { text-align: left; } .footer-main-content { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 20px; } .footer-column { flex: 1; text-align: left; } .footer-column.footer-address-contact { text-align: center; } .footer-column.footer-social-order { text-align: right; } .footer-social-order .footer-social { justify-content: flex-end; } .footer-copyright .container p { text-align: center; } /* Menu Page Desktop Adjustments */ .menu-items-list { /* Revert to flex row for desktop if needed, or use grid */ /* Example: if you want 2 columns on desktop for menu items */ /* display: grid; */ /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */ /* gap: 20px; */ } .menu-item-card { /* Revert to row layout for desktop */ flex-direction: row; align-items: flex-start; padding: 15px; /* Restore padding for desktop */ gap: 15px; /* Add horizontal gap for desktop */ } .menu-item-image { /* Adjust image size for desktop */ width: 100px; height: 100px; border-radius: 6px; /* Restore individual image radius */ margin-bottom: 0; } .menu-item-info { padding: 0; /* Remove extra padding if card has padding */ } .menu-item-actions { justify-content: flex-end; padding: 0; /* Remove extra padding if card has padding */ margin-left: auto; margin-top: 0; /* Reset margin-top for desktop */ } }