/* ----------------------------------------------------------------------- 1. DESIGN TOKENS ----------------------------------------------------------------------- */ :root { /* --background-main: #1B1310; */ /* near-black — nav, hero, footer */ /* --background-section: #2A1E18; */ /* raised dark panels */ /* --background-main: #7C2030; */ /* primary restaurant accent */ /* --primary-dark: #57141F; */ /* --primary-light: #A6394B; */ /* --secondary-color: #C7A050; */ /* brass / antique gold — CTAs, price, dividers */ /* --secondary-light: #E6CC8E; */ /* --secondary-dark: #9C7A34; */ /* --sage: #5F7350; */ /* fresh / veg accent */ /* --sage-light: #7C9268; */ --cream: #FBF6EC; --cream-deep: #fffcd4; --heading-color: #241B14; --text-muted: #77685A; --paper: #FFFFFF; --card-bg: #dcdcdc; --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --ease: cubic-bezier(.4, 0, .2, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 26px; --shadow-soft: 0 10px 28px rgba(27, 19, 16, .10); --shadow-lift: 0 22px 46px rgba(27, 19, 16, .22); --nav-height: 82px; } /* ----------------------------------------------------------------------- 1b. RESTAURANT THEMES — switched on by the toggle JS. Restaurant 1: white + light green + light blue Restaurant 2: white + maroon + gold Restaurant 3: white + yellow + black Every section keys off the same --background-main / --secondary-color / --background-main / --cream tokens, so flipping these on re-colours the whole site at once. ----------------------------------------------------------------------- */ body, body .hero-section, body .category-section, body .footer-section, body #quick-order .card-header, body .restaurant-toggle-btn, body .btn, body .section-tag, body .feature-icon { transition: background .7s var(--ease), background-color .7s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } /* ========================================================================= HOW TO CHANGE A RESTAURANT'S COLOURS ------------------------------------------------------------------------- Each block below (theme-1 / theme-2 / theme-3) = one restaurant toggle. Every line has a comment telling you EXACTLY what that colour is used for. Just replace the hex code (the #XXXXXX part) with a new one — don't rename anything on the left side of the ":". ========================================================================= */ /* ============== TOGGLE 1 — Emerald + Gold ============== */ body.theme-1 { /* ================================ TERRACOTTA + WARM GOLD THEME ================================ */ /* Main page background — bright warm cream */ --background-main: #FFF6EB; /* Main section background — clean white */ --background-section: #FFFFFF; /* Primary terracotta — main brand color */ --primary-dark: #e0502c; /* Terracotta — buttons, active states, highlights */ --primary-light: #C24E2A; /* Warm gold — premium accent */ --secondary-color: #E0B24C; /* Soft gold — lighter highlights */ --secondary-light: #f4dea7; /* Deep gold — hover / active depth */ --secondary-dark: #B88727; /* Soft peach — badges / subtle backgrounds */ --sage: #FFE3D1; /* Very light peach — soft panels */ --sage-light: #FFF0E6; /* Pure / soft white — cards and forms */ --cream: #FFFFFF; /* Warm cream — alternate section background */ --cream-deep: #FFF6EB; /* Dark brown — headings and primary text */ --heading-color: #4f3222; /* Muted brown — secondary text */ --text-muted: #76665D; /* Main button — terracotta */ --button-main: #C24E2A; /* Button hover — darker terracotta */ --button-dark: #9E351C; /* Form icons — warm gold */ --form-icon-color: #E0B24C; /* --background-main: #ffdf00; /* deep emerald — hero / nav / footer dark background */ /* --background-section: #000060; */ /* rich emerald — section gradient */ /* --primary-dark: #D10000; */ /* darker emerald — hover / depth */ /* --primary-light: #D10000; */ /* lighter emerald — accent blend */ /* --secondary-color: #D10000; */ /* warm gold — CTAs and highlights */ /* --secondary-light: #F2C76C; */ /* soft gold — lighter highlights */ /* --secondary-dark: #B9771E; */ /* deeper gold — hover state */ /* --sage: #75af71; */ /* muted sage — badges */ /* --sage-light: #B7D2B0; */ /* light sage — soft badges */ /* --cream: #FCFCF8; */ /* soft warm ivory — page background */ /* --cream-deep: #fffcd4; */ /* pale green tint — soft panels */ /* --heading-color: #14261F; */ /* dark forest tone — body text */ /* --text-muted: #567062; */ /* muted green-grey — secondary text */ /* --button-main: #FFDF00; */ /* --button-dark: #FFEF00; */ /* --form-icon-color: #FFDF00; */ } /* ============== TOGGLE 2 — Maroon + Gold ============== */ body.theme-2 { /* --background-main: #D10000; */ /* deep emerald — hero / nav / footer dark background */ /* --background-section: #FFEF00; */ /* rich emerald — section gradient */ /* --primary-dark: #D10000; */ /* darker emerald — hover / depth */ /* --primary-light: #D10000; */ /* lighter emerald — accent blend */ /* --secondary-color: #D10000; */ /* warm gold — CTAs and highlights */ /* --secondary-light: #F2C76C; */ /* soft gold — lighter highlights */ /* --secondary-dark: #B9771E; */ /* deeper gold — hover state */ /* --sage: #75af71; */ /* muted sage — badges */ /* --sage-light: #B7D2B0; */ /* light sage — soft badges */ /* --cream: #FCFCF8; */ /* soft warm ivory — page background */ /* --cream-deep: #fffcd4; */ /* pale green tint — soft panels */ /* --heading-color: #14261F; */ /* dark forest tone — body text */ /* --text-muted: #567062; */ /* muted green-grey — secondary text */ /* --button-main: #FFEF00; --button-dark: #FFEF00; --form-icon-color: #D10000; */ /*--background-main: #5c0b27;*/ /* deep maroon — hero / nav / footer dark background */ /*--background-section: #781735;*/ /* richer maroon — section gradient */ /*--primary-dark: #54142A;*/ /* darker maroon — hover / depth */ /*--primary-light: #781735;*/ /* muted rose — accent blend */ /*--secondary-color: #D79A5A;*/ /* warm gold — CTAs and highlights */ /*--secondary-light: #E8C38E;*/ /* soft gold — lighter highlights */ /*--secondary-dark: #92622F;*/ /* deeper gold — hover state */ /*--sage: #8D6B56;*/ /* muted warm tone — badges */ /*--sage-light: #D5B8A0;*/ /* soft beige — soft badges */ /*--cream: #FFF7F4;*/ /* soft ivory — page background */ /*--cream-deep: #F8E6E2;*/ /* warm blush tint — soft panels */ /*--heading-color: #2B1418;*/ /* dark maroon — body text */ /*--text-muted: #785D57;*/ /* muted brown-grey — secondary text */ /*--button-main: #8A2F42;*/ /*--button-dark: #781735;*/ /*--form-icon-color: #EFBF04;*/ } /* ============== TOGGLE 3 — Ocean Blue + Sky ============== */ body.theme-3 { /* --background-main: #D10000; */ /* deep emerald — hero / nav / footer dark background */ /* --background-section: #FFEF00; */ /* rich emerald — section gradient */ /* --primary-dark: #D10000; */ /* darker emerald — hover / depth */ /* --primary-light: #D10000; */ /* lighter emerald — accent blend */ /* --secondary-color: #D10000; */ /* warm gold — CTAs and highlights */ /* --secondary-light: #F2C76C; */ /* soft gold — lighter highlights */ /* --secondary-dark: #B9771E; */ /* deeper gold — hover state */ /* --sage: #75af71; */ /* muted sage — badges */ /* --sage-light: #B7D2B0; */ /* light sage — soft badges */ /* --cream: #FCFCF8; */ /* soft warm ivory — page background */ /* --cream-deep: #fffcd4; */ /* pale green tint — soft panels */ /* --heading-color: #14261F; */ /* dark forest tone — body text */ /* --text-muted: #567062; */ /* muted green-grey — secondary text */ /* --button-main: #FFEF00; --button-dark: #FFEF00; --form-icon-color: #D10000; */ /*--background-main: #052c5c;*/ /* deep blue — hero / nav / footer dark background */ /*--background-section: #003274;*/ /* richer navy — section gradient */ /*--primary-dark: #052c5c;*/ /* darker blue — hover / depth */ /*--primary-light: #003274;*/ /* steel blue — accent blend */ /*--secondary-color: #D79A5A;*/ /* sky blue — CTAs and highlights */ /*--secondary-light: #F2C76C;*/ /* soft sky — lighter highlights */ /*--secondary-dark: #2F7BAB;*/ /* deeper blue — hover state */ /*--sage: #79a0d3;*/ /* muted blue-grey — badges */ /*--sage-light: #B9C8DA;*/ /* pale blue — soft badges */ /*--cream: #F8FBFF;*/ /* soft ivory — page background */ /*--cream-deep: #EAF2FC;*/ /* pale sky tint — soft panels */ /*--heading-color: #101F34;*/ /* deep navy — body text */ /*--text-muted: #5B677F;*/ /* muted steel-grey — secondary text */ /*--button-main: #003274;*/ /*--button-dark: #265592;*/ /*--form-icon-color: #EFBF04;*/ } /* ----------------------------------------------------------------------- 2. BASE / RESET ----------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); overflow-x: clip; } body { font-family: var(--font-body); color: var(--heading-color); background: radial-gradient(1100px 650px at 88% -8%, color-mix(in srgb, var(--secondary-color) 22%, white), transparent 58%), radial-gradient(950px 620px at -8% 28%, color-mix(in srgb, var(--background-main) 14%, white), transparent 55%), var(--cream); background-attachment: fixed; -webkit-font-smoothing: antialiased; overflow-x: clip; font-size: 1rem; line-height: 1.7; position: relative; isolation: isolate; } body::before, body::after { content: ""; position: fixed; width: min(32vw, 320px); height: min(32vw, 320px); border-radius: 50%; filter: blur(70px); opacity: .16; pointer-events: none; z-index: -1; animation: float-orb 10s ease-in-out infinite alternate; } body::before { top: -8%; right: -8%; background: var(--secondary-color); } body::after { bottom: 2%; left: -8%; background: var(--background-main); animation-delay: 2.2s; } @keyframes float-orb { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(12px, -20px, 0) scale(1.08); } } section:not(.hero-section):not(.footer-section) { position: relative; } section:not(.hero-section):not(.footer-section)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(84%, 920px); height: 18px; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--secondary-color) 14%, transparent) 20%, color-mix(in srgb, var(--secondary-color) 4%, transparent) 45%, color-mix(in srgb, var(--secondary-color) 14%, transparent) 80%, transparent 100%); opacity: .35; pointer-events: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--primary-dark); font-weight: 700; letter-spacing: .1px; text-wrap: balance; } h1 { font-weight: 800; letter-spacing: -.5px; } h2.section-title { font-weight: 800; letter-spacing: -.3px; } p { color: var(--text-muted); line-height: 1.85; text-wrap: pretty; } .fw-premium { font-family: var(--font-display); font-weight: 600; } a { color: var(--background-main); text-decoration: none; transition: color .25s var(--ease); } a:hover { color: var(--secondary-dark); } ::selection { background: var(--secondary-color); color: var(--background-main); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--cream-deep); } ::-webkit-scrollbar-thumb { background: var(--background-main); border-radius: 10px; border: 2px solid var(--cream-deep); } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-dark); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus, .form-select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary-color) 40%, transparent); border-color: var(--secondary-color); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------- CARD INNER-TEXT FADE — once a card scrolls into view and pops in, its title / price / description fade-up in a quick cascade, instead of the text just appearing flat with the card. ----------------------------------------------------------------------- */ .category-content h5, .category-content small, .menu-row h5, .menu-row .menu-price, .menu-row p, .menu-card h4, .menu-card p, .menu-card .badge, .feature-card h4, .feature-card p { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .category-content h5 { transition-delay: .1s; } .category-content small { transition-delay: .18s; } .menu-row h5 { transition-delay: .1s; } .menu-row .menu-price { transition-delay: .16s; } .menu-row p { transition-delay: .22s; } .menu-card .badge { transition-delay: .08s; } .menu-card h4 { transition-delay: .16s; } .menu-card p { transition-delay: .24s; } .feature-card h4 { transition-delay: .18s; } .feature-card p { transition-delay: .26s; } .reveal.is-visible.category-card .category-content h5, .reveal.is-visible.category-card .category-content small, .reveal.is-visible.menu-row h5, .reveal.is-visible.menu-row .menu-price, .reveal.is-visible.menu-row p, .reveal.is-visible.menu-card h4, .reveal.is-visible.menu-card p, .reveal.is-visible.menu-card .badge, .reveal.is-visible.feature-card h4, .reveal.is-visible.feature-card p { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .category-content h5, .category-content small, .menu-row h5, .menu-row .menu-price, .menu-row p, .menu-card h4, .menu-card p, .menu-card .badge, .feature-card h4, .feature-card p { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } .reveal-up { transform: translateY(34px); } .reveal-left { transform: translateX(-46px); } .reveal-right { transform: translateX(46px); } .reveal-down { transform: translateY(-38px); } .reveal-zoom { transform: scale(.82); transition: opacity .7s var(--ease), transform .7s var(--ease-bounce); } .reveal-flip { transform: perspective(900px) rotateX(16deg) translateY(28px); transform-origin: top center; transition: opacity .7s var(--ease), transform .8s var(--ease-bounce); } .reveal-flip.is-visible { transform: perspective(900px) rotateX(0deg) translateY(0); } /* ----------------------------------------------------------------------- 3. SECTION HEADERS — ornament divider (signature detail) ----------------------------------------------------------------------- */ .section-tag { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary-light); padding: .55rem .95rem; border: none; border-radius: 999px; background: transparent; box-shadow: none; } .section-tag::before, .section-tag::after { content: ""; width: 26px; height: 1px; background: var(--primary-light); display: inline-block; } .section-tag .diamond { width: 6px; height: 6px; background: var(--primary-light); transform: rotate(45deg); display: inline-block; } .section-title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: .55rem; font-weight: 700; } .section-title em { color: var(--primary-light); font-style: italic; font-weight: 600; } .section-subtitle { color: var(--heading-color); max-width: 560px; margin: 0 auto; font-size: 1.02rem; } /* ----------------------------------------------------------------------- 4. NAVBAR + RESPONSIVE OFFCANVAS (fixes hamburger / no sidebar overlap) ----------------------------------------------------------------------- */ .navbar { position: sticky; top: 0; left: 0; width: 100%; z-index: 1100; padding: .75rem 0 .5rem; border-radius: 0 0 22px 22px; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); } .navbar::before { content: ""; position: absolute; inset: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); } .navbar .container, .navbar .container-fluid { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .navbar .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--cream); letter-spacing: 1px; text-transform: uppercase; transition: color .45s var(--ease); } .navbar .logo img { object-fit: contain; border-radius: 8px; margin-left: 10px; } .nav-link.active { color: var(--secondary-light) !important; font-weight: 700; } .navbar-nav .nav-link { color: rgba(251, 246, 236, .92) !important; font-weight: 500; font-size: .95rem; letter-spacing: .3px; margin: 0 .3rem; padding: .55rem 1rem !important; position: relative; border-radius: 999px; border: 1px solid transparent; /* background: rgba(255, 255, 255, .03); */ transition: color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .navbar-nav .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; background: var(--secondary-color); transition: width .3s var(--ease), left .3s var(--ease); } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--cream) !important; background: rgba(255, 255, 255, .14); box-shadow: 0 18px 32px rgba(0, 0, 0, .18); } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { width: 68%; left: 16%; } .navbar-toggler { border: 1px solid rgba(251, 246, 236, .25) !important; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); padding: .55rem .65rem; border-radius: 14px; transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .navbar-toggler:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(251,246,236,0.95)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 1.3em; height: 1.3em; } .navbar.navbar-scrolled { background: color-mix(in srgb, var(--background-main) 90%, black 10%); backdrop-filter: blur(16px); box-shadow: 0 18px 42px rgba(0, 0, 0, .24); padding-top: .55rem !important; padding-bottom: .55rem !important; border-bottom: 1px solid color-mix(in srgb, var(--secondary-light) 20%, transparent); animation: navbar-slide .45s var(--ease) both; } @keyframes navbar-slide { from { transform: translateY(-10px); opacity: .88; } to { transform: translateY(0); opacity: 1; } } /* Responsive offcanvas: inline nav at lg+, true slide-in panel below lg. This is Bootstrap's own supported pattern — no custom overlay code, so there's no z-index / sidebar-overlap bug on mobile. */ @media (max-width: 991.98px) { .offcanvas-lg { background: linear-gradient(180deg, var(--background-main), #0F0A08) !important; width: min(78vw, 320px); } .offcanvas-lg .navbar-nav { margin-top: 1rem; } .offcanvas-lg .nav-link { padding: .8rem 1rem !important; font-size: 1.02rem; } .offcanvas-header { border-bottom: 1px solid rgba(251, 246, 236, .12); } .offcanvas-title { font-family: var(--font-display); color: var(--cream); font-size: 1.3rem; } .btn-close { filter: invert(1) grayscale(1) brightness(2); } } /* ----------------------------------------------------------------------- 5. HERO SECTION ----------------------------------------------------------------------- */ .hero-section { position: relative; min-height: 94vh; display: flex; align-items: flex-start; flex-direction: column; background: radial-gradient(1200px 720px at 88% -8%, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent 62%), linear-gradient(135deg, color-mix(in srgb, var(--background-main) 90%, black) 0%, var(--primary-dark) 58%, color-mix(in srgb, var(--background-main) 94%, black) 100%); overflow: hidden; box-shadow: inset 0 -120px 120px rgba(0, 0, 0, .16); } .hero-section::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: radial-gradient(circle at 2px 2px, #fff 1.4px, transparent 1.6px); background-size: 28px 28px; pointer-events: none; } .hero-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.06) 55%, transparent 100%); pointer-events: none; } /* .hero-section .overlay { position: absolute; inset: 0; background: radial-gradient(1000px 700px at 50% 40%, color-mix(in srgb, var(--background-main) 22%, transparent), transparent 70%); pointer-events: none; } */ /* Premium restaurant-photo hero background — now the star of the show in the centred layout. A vertical dark wash keeps the centred headline readable no matter where the photo's bright spots land. */ .hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; filter: saturate(1.12) contrast(1.05); animation: hero-ken-burns 22s ease-in-out infinite alternate; transition: opacity .3s ease; pointer-events: none; } /* .hero-bg-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--background-main) 92%, transparent) 0%, color-mix(in srgb, var(--primary-dark) 55%, transparent) 45%, color-mix(in srgb, var(--background-main) 88%, transparent) 100%), radial-gradient(900px 600px at 50% 45%, transparent 0%, color-mix(in srgb, var(--background-main) 55%, transparent) 100%); } */ @keyframes hero-ken-burns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.12) translate(-1.5%, -1%); } } /* Hero content plays its own entrance sequence on load (not scroll-based, since it's already in view) -- each element staggers in. */ .hero-eyebrow { animation: hero-fade-up .8s var(--ease) .15s both; } .hero-content h1 { animation: hero-title-reveal .95s var(--ease) .25s both; } .hero-content p { animation: hero-subtitle-reveal 1s var(--ease) .45s both; } .hero-cta { animation: none; } .hero-cta .btn { animation: hero-button-reveal .9s var(--ease) .6s both; } .hero-cta .btn:first-child { animation-delay: .6s; } .hero-cta .btn:last-child { animation-delay: .76s; } .hero-stats { animation: hero-stats-fade 1s var(--ease) .82s both; } .hero-frame { animation: hero-zoom-in 1.1s var(--ease) .35s both; } .restaurant-toggle { animation: hero-fade-up .8s var(--ease) .05s both; } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-title-reveal { from { opacity: 0; transform: translateY(30px) scale(.96) skewY(1.5deg); } to { opacity: 1; transform: translateY(0) scale(1) skewY(0deg); } } @keyframes hero-subtitle-reveal { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes hero-button-reveal { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes hero-stats-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-zoom-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } .hero-section .container { position: relative; z-index: 1046; width: 100%; } /* We switched the hero wrapper from Bootstrap's ".container" to ".container-fluid" (full-bleed layout) — that old rule above only matched ".container", so the hero content (incl. the restaurant toggle) had no explicit stacking order above .hero-bg-image. Fixing it here explicitly so the toggle + text always paint on top. */ .hero-section .container-fluid { position: relative; z-index: 1046; width: 100%; } .hero-content { min-height: calc(94vh - var(--nav-height)); padding-block: 2rem 4rem; opacity: 0; transform: translateY(32px); animation: hero-fade-up .9s var(--ease) .1s both; will-change: opacity, transform; } .hero-content .col-lg-8 { padding: clamp(1.5rem, 3vw, 2.4rem); background: transparent; backdrop-filter: none; border: none; border-radius: 0; box-shadow: none; } /* Logo lives here now (not in the nav) — bigger, centered, sitting right above the "Fresh Cloud Kitchen & Fast Pickup" badge. Same fade-up entrance as the eyebrow, just a touch earlier. object-fit:contain + no fixed width means any logo shape (square, round, wide banner-style) scales cleanly on every screen without cropping or distortion. */ .hero-logo-wrap { display: flex; justify-content: center; animation: hero-fade-up .8s var(--ease) .05s both; } .hero-logo { max-width: min(260px, 70%); max-height: 120px; width: auto; height: auto; object-fit: contain; margin-bottom: 1.2rem; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); } .hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--secondary-light); font-size: .78rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border: 1px solid rgba(230, 204, 142, .35); padding: .45rem 1rem; border-radius: 50px; margin-bottom: 1.4rem; } .hero-content h1 { color: var(--cream); font-size: clamp(2.5rem, 5.2vw, 4.1rem); line-height: 1.1; margin-bottom: 1.1rem; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; border: none; box-shadow: none; transition: color .4s var(--ease); } .hero-content h1::before { display: none; } .hero-content h1:hover { transform: none; box-shadow: none; background: transparent; } .hero-content h1 em { color: var(--secondary-light); font-style: italic; } .hero-content p { color: var(--cream); font-size: 1.15rem; max-width: 620px; margin: 0 auto 2rem; transition: transform .8s var(--ease), opacity .8s var(--ease), color .4s var(--ease); } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .hero-cta .btn { transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .35s var(--ease), color .35s var(--ease), filter .45s var(--ease); } .hero-cta .btn:hover { transform: translateY(-5px) scale(1.02); filter: brightness(1.04); color: var(--cream); } .hero-frame { position: relative; border-radius: var(--radius-lg); } .hero-frame::before { content: ""; position: absolute; inset: 8%; background: radial-gradient(circle, color-mix(in srgb, var(--secondary-color) 40%, transparent), transparent 70%); filter: blur(30px); z-index: -1; } .hero-coffee { max-width: 138%; filter: drop-shadow(0 35px 45px rgba(0, 0, 0, .5)); animation: float-plate 5s ease-in-out infinite; } @keyframes float-plate { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(1deg); } } .hero-stats { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; justify-content: center; } .hero-stats .stat { min-width: 130px; padding: .95rem 1.05rem; border-radius: 18px; background: var(--cream); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); } .hero-stats .stat b { display: block; font-family: var(--font-display); color: #000000; font-size: 1.5rem; font-weight: 700; } .hero-stats .stat span { display: block; margin-top: .2rem; color: #000000; font-size: .82rem; letter-spacing: .3px; } /* ----------------------------------------------------------------------- 5b. RESTAURANT TOGGLE (single-page, multi-restaurant switcher) ----------------------------------------------------------------------- */ .restaurant-toggle { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin: .5rem 0 2.2rem; } /* Big round avatar-style toggle — logo fills most of the circle, identical look on every breakpoint (mobile through desktop). */ .restaurant-toggle-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; padding: 6px; background: rgba(251, 246, 236, .1); border: 2px solid rgba(251, 246, 236, .28); border-radius: 60px; color: var(--cream); cursor: pointer; overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); } .restaurant-toggle-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .16)); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .restaurant-toggle-plate { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .restaurant-toggle-btn img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3)); transition: transform .35s var(--ease); } .restaurant-toggle-btn .toggle-fallback-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--secondary-color); color: var(--background-main); font-size: 1.3rem; } .restaurant-toggle-btn:hover { transform: translateY(-4px); border-color: var(--secondary-light); background: rgba(230, 204, 142, .16); box-shadow: 0 14px 28px rgba(0, 0, 0, .28); } .restaurant-toggle-btn:hover img { transform: scale(1.07); } .restaurant-toggle-btn.active { background: rgba(251, 246, 236, .97); border-color: var(--background-section); transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 3px color-mix(in srgb, var(--background-section) 55%, transparent), 0 16px 30px rgba(0, 0, 0, .32); } .restaurant-toggle-btn.active::before { opacity: 1; } /* Only the selected restaurant's categories / menu / offers / gallery show */ .restaurant-panel { display: none; } /* Fallback: default restaurant shows even before/without JS running. NOTE: this used to be "display:block" which silently broke every card grid below it (block-level .col-* children stack vertically instead of sitting side by side even though their % width is correct) — that was the root cause of menu/offers/gallery cards stacking one-under-another. Bootstrap rows need flex; our new grid-row sections need grid. */ .restaurant-panel.default-restaurant-panel { display: flex; flex-wrap: wrap; } .grid-row.restaurant-panel.default-restaurant-panel { display: grid; } .catalog-browser-panel.restaurant-panel.default-restaurant-panel { display: block; } .category-scroller.restaurant-panel.default-restaurant-panel { display: grid; } /* ========================================================================= RESPONSIVE CARD GRID — used by Menu / Offers / Gallery. Swiggy/Zomato-style dense grid: small cards, many per row. mobile 4-5 | tablet 5-6 | laptop 6 | desktop 7 ========================================================================= */ .grid-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; width: 100%; } @media (min-width: 401px) { .grid-row { grid-template-columns: repeat(5, 1fr); gap: .8rem; } } @media (min-width: 768px) { .grid-row { grid-template-columns: repeat(6, 1fr); gap: 1rem; } } @media (min-width: 992px) { .grid-row { grid-template-columns: repeat(6, 1fr); gap: 1.1rem; } } @media (min-width: 1280px) { .grid-row { grid-template-columns: repeat(7, 1fr); gap: 1.2rem; } } .menuItem { min-width: 0; } /* Menu cards were too narrow at the denser column counts — widen them specifically (offers/gallery keep the denser grid, menu items get more breathing room per the reference sketch: ~3 mobile / 4 tablet / 5 desktop). */ .menu-grid, .catalog-items-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } @media (min-width: 401px) { .menu-grid, .catalog-items-grid { grid-template-columns: repeat(3, 1fr); gap: .9rem; } } @media (min-width: 768px) { .menu-grid, .catalog-items-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } } @media (min-width: 992px) { .menu-grid, .catalog-items-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } } @media (min-width: 1280px) { .menu-grid, .catalog-items-grid { grid-template-columns: repeat(5, 1fr); gap: 1.3rem; } } .catalog-items-grid { display: grid; width: 100%; } /* ========================================================================= CATALOG BROWSER — type tabs (Categories/Offers/Specials/Juices), category pills, and headings ========================================================================= */ .catalog-type-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1.8rem; } .catalog-type-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border: 1.5px solid color-mix(in srgb, var(--primary-dark) 75%, transparent); border-radius: 999px; background: var(--cream); color: var(--primary-dark); font-weight: 700; font-size: .95rem; font-family: var(--font-display, inherit); cursor: pointer; transition: all .25s var(--ease, ease); } .catalog-type-btn i { font-size: 1.05rem; } .catalog-type-btn:hover:not(.active) { border-color: var(--cream); color: var(--cream); background: var(--primary-dark); } .catalog-type-btn.active { background: var(--primary-dark); border-color: var(--background-main); color: var(--cream); box-shadow: 0 6px 16px color-mix(in srgb, var(--background-main) 35%, transparent); } .catalog-heading { font-family: var(--font-display, inherit); font-weight: 800; color: var(--primary-dark); margin-bottom: 1rem; } .catalog-cat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.2rem; } .cat-pill { padding: .45rem 1.1rem; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--primary-dark) 45%, transparent); background: #fff; color: var(--text-muted, #666); font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .2s ease; } .cat-pill:hover { background: var(--primary-dark); color: var(--cream); } .cat-pill.active { background: var(--primary-dark); border-color: var(--background-main); color: var(--cream); } .catalog-subheading { color: var(--primary-dark); font-weight: 800; margin: 1.4rem 0 1.2rem; } /* ========================================================= CATALOG SEPARATE BOXES ========================================================= */ .catalog-section { background: var(--sage-light); } /* Common box */ .catalog-box { background: var(--cream-deep); border: 1px solid #eeeeee; border-radius: 24px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16); margin-bottom: 24px; } /* ========================================================= 1. EXPLORE OUR MENU BOX ========================================================= */ .catalog-explore-box { padding: 30px 25px; } /* ========================================================= 2. CATALOG TYPE BUTTON BOX ========================================================= */ .catalog-type-box { padding: 20px 25px; } .catalog-type-tabs { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; } /* ========================================================= 3. CATEGORY BOX ========================================================= */ .catalog-category-box { padding: 25px 25px 28px; } .catalog-category-box .catalog-heading { margin-top: 0; margin-bottom: 20px; } /* Category pills */ .catalog-category-box .catalog-cat-pills { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; } /* ========================================================= 4. MENU BOX ========================================================= */ .catalog-menu-box { padding: 28px 25px 32px; } /* Menu heading */ .catalog-menu-box .catalog-subheading { margin-top: 0; margin-bottom: 25px; } /* Menu grid */ .catalog-menu-box .catalog-items-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } /* ========================================================= REMOVE OLD OUTER PANEL LOOK ========================================================= */ .catalog-browser-panel { background: transparent; border: none; box-shadow: none; padding: 0; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .catalog-menu-box .catalog-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .catalog-box { border-radius: 18px; margin-bottom: 16px; } .catalog-explore-box { padding: 24px 15px; } .catalog-type-box { padding: 15px; } .catalog-category-box { padding: 20px 15px; } .catalog-menu-box { padding: 20px 15px; } .catalog-menu-box .catalog-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 480px) { .catalog-menu-box .catalog-items-grid { grid-template-columns: 1fr; } } /* ========================================================= MOBILE - COMPACT MENU CARDS 3 CARDS PER ROW ========================================================= */ @media (max-width: 767px) { .catalog-menu-box { padding: 12px 8px 18px; } .catalog-menu-box .catalog-items-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } /* Menu card */ .catalog-menu-box .menu-card-v2 { width: 100%; min-width: 0; border-radius: 10px; overflow: hidden; } /* Image */ .catalog-menu-box .menu-card-v2-thumb { width: 100%; height: 95px; overflow: hidden; } .catalog-menu-box .menu-card-v2-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Body */ .catalog-menu-box .menu-card-v2-body { padding: 7px 6px; } /* Item name */ .catalog-menu-box .menu-card-v2-body h5 { font-size: 11px; line-height: 1.2; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Description */ .catalog-menu-box .menu-card-v2-body p { font-size: 9px; line-height: 1.2; margin: 0 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Footer */ .catalog-menu-box .menu-card-v2-footer { display: flex; flex-direction: column; align-items: stretch; gap: 5px; } /* Price */ .catalog-menu-box .menu-price { font-size: 11px; font-weight: 700; } /* Quantity area */ .catalog-menu-box .menuQtyArea { width: 100%; display: flex; align-items: center; justify-content: space-between; } .catalog-menu-box .menuQtyArea button { width: 21px; height: 21px; min-width: 21px; padding: 0; font-size: 9px; border-radius: 5px; } .catalog-menu-box .menuQtyArea input { width: 25px; height: 21px; padding: 0; text-align: center; font-size: 9px; } } .offers-empty, .gallery-grid:empty { grid-column: 1 / -1; padding: 2rem 0; } /* Offer cards are content-heavier than menu cards, so give them a touch more room at every breakpoint (roughly 2 fewer columns than the menu grid). */ .offers-grid { grid-template-columns: repeat(2, 1fr); } @media (min-width: 401px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 576px) { .offers-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .offers-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 992px) { .offers-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1280px) { .offers-grid { grid-template-columns: repeat(5, 1fr); } } .offer-card-wrap { min-width: 0; } .offer-card-wrap .menu-card { border-radius: 16px; overflow: hidden; } .offer-card-wrap .card-img-top { height: 140px; object-fit: cover; } .offer-card-wrap .card-body { padding: .8rem .9rem; } .offer-card-wrap .card-body h4 { font-size: .92rem; margin-bottom: .2rem; } .offer-card-wrap .card-body p { font-size: .74rem; } .offer-card-wrap .badge { font-size: .62rem; } /* Gallery grid stays dense like the menu grid */ .gallery-grid { grid-template-columns: repeat(4, 1fr); } @media (min-width: 401px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 992px) { .gallery-grid { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1280px) { .gallery-grid { grid-template-columns: repeat(7, 1fr); } } .gallery-grid .gallery-card { margin: 0; } .gallery-grid .gallery-card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; height: 100%; } /* ----------------------------------------------------------------------- 6. BUTTONS ----------------------------------------------------------------------- */ .btn { font-family: var(--font-body); font-weight: 600; letter-spacing: .3px; border-radius: 50px; padding: .72rem 1.7rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); border: none; } .btn:active { transform: translateY(1px) scale(.98); } .btn-warning, .btn-dark, .btn-success { position: relative; overflow: hidden; isolation: isolate; } .btn-warning::before, .btn-dark::before, .btn-success::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .65s var(--ease); z-index: 1; pointer-events: none; } .btn-warning:hover::before, .btn-dark:hover::before, .btn-success:hover::before { left: 140%; } .btn-warning, .btn-dark { background: var(--primary-dark); color: var(--cream) !important; border: 1.5px solid rgba(255, 255, 255, .12) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); } .btn-warning:hover, .btn-dark:hover { background: linear-gradient(135deg, var(--button-dark), var(--button-main)); transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); color: #ffffff !important; } .btn-success { background: linear-gradient(135deg, var(--sage-light), var(--sage)); color: var(--paper) !important; box-shadow: 0 10px 22px rgba(95, 115, 80, .35); } .btn-success:hover { background: linear-gradient(135deg, var(--sage), #45532E); transform: translateY(-3px); box-shadow: 0 16px 28px rgba(95, 115, 80, .4); } .btn-outline-light { border: 1.5px solid rgba(251, 246, 236, .55) !important; color: #000000 !important; background: #ffffff; } .btn-outline-light:hover { color: var(--cream); background: var(--primary-dark) !important; transform: translateY(-2px); } .btn-outline-secondary { border: 1.5px solid var(--cream-deep); background: var(--paper); color: var(--background-main); } .btn-outline-secondary:hover { background: var(--cream-deep); color: var(--primary-dark); border-color: var(--secondary-color); } .btn-outline-danger { border: 1.5px solid #e3c9c9; color: var(--primary-dark); background: var(--paper); } .btn-outline-danger:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--paper); transform: translateY(-2px); } /* ----------------------------------------------------------------------- 7. WHY CHOOSE US ----------------------------------------------------------------------- */ .why-section { background: var(--cream-deep); } .feature-card { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); border-radius: var(--radius-md); padding: 2.3rem 1.6rem; text-align: center; height: 100%; box-shadow: var(--shadow-soft); border: 1px solid transparent; transform: perspective(700px); transition: opacity .7s var(--ease), transform .5s var(--ease-bounce), box-shadow .4s var(--ease), border-color .4s var(--ease); } .feature-card::before { content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, color-mix(in srgb, var(--secondary-color) 22%, transparent), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); z-index: 1; pointer-events: none; } .feature-card:hover::before { left: 140%; } .feature-card:hover { transform: perspective(700px) translateY(-10px) rotateX(4deg); box-shadow: var(--shadow-lift); border-color: var(--secondary-color); } .feature-icon { width: 74px; height: 74px; margin: 0 auto 1.3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--cream-deep), var(--paper)); color: var(--primary-dark); font-size: 1.85rem; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--secondary-color) 30%, transparent); transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-bounce), box-shadow .4s var(--ease); } .feature-card:hover .feature-icon { background: linear-gradient(135deg, var(--secondary-light), var(--secondary-color)); color: var(--background-main); transform: rotate(-8deg) scale(1.12); box-shadow: inset 0 0 0 2px var(--secondary-color), 0 0 0 8px color-mix(in srgb, var(--secondary-color) 18%, transparent); } .feature-card h4 { font-size: 1.25rem; margin-bottom: .6rem; } .feature-card p { font-size: .95rem; margin-bottom: 0; } /* ----------------------------------------------------------------------- 8. CATEGORIES — full-width grid, 6 per row, no scrolling ----------------------------------------------------------------------- */ .category-section { background: linear-gradient(160deg, #ffffff, var(--cream-deep)); position: relative; padding-block: 5rem 4.2rem; overflow: hidden; } .category-section::before { content: ""; position: absolute; top: -12%; right: -6%; width: 260px; height: 260px; border-radius: 50%; background: color-mix(in srgb, var(--secondary-color) 18%, transparent); filter: blur(40px); pointer-events: none; } .category-section .section-title, .category-section .section-title em { color: var(--cream); } .category-section .section-subtitle { color: rgba(251, 246, 236, .62); } .category-section .section-tag { color: var(--secondary-light); } .category-scroller { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; padding: .5rem 0 .5rem; } .category-card { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; text-align: center; border-radius: var(--radius-md); padding: 1.6rem 1rem 1.5rem; background: linear-gradient(145deg, var(--card-bg), var(--card-bg)); border: 1px solid var(--heading-color); backdrop-filter: blur(12px); transform: perspective(700px) translateY(24px) scale(.95); opacity: 0; box-shadow: 0 14px 26px rgba(0, 0, 0, .12); transition: opacity .7s var(--ease), transform .6s var(--ease-bounce), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .category-card.reveal.is-visible, .reveal.is-visible.category-card { opacity: 1; transform: perspective(700px) translateY(0) scale(1); } .category-card::before { content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .18), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); z-index: 2; pointer-events: none; } .category-card:hover::before { left: 140%; } .category-card:hover { transform: perspective(700px) translateY(-8px) rotateX(5deg) scale(1.02); border-color: color-mix(in srgb, var(--secondary-color) 50%, transparent); } .category-card.activeCategory { background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04)); border-color: var(--cream); transform: perspective(700px) translateY(-6px); } .category-image { width: 120px; height: 120px; margin: 0 auto 1.1rem; border-radius: 50%; overflow: hidden; background: var(--background-section); border: 3px solid color-mix(in srgb, var(--secondary-color) 40%, transparent); transition: box-shadow .4s var(--ease), border-color .4s var(--ease); } /* Category ku photo illama, oru simple icon mattum kaatum bothu */ .category-image-icon { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--background-main); } .category-card:hover .category-image { box-shadow: 0 0 0 6px color-mix(in srgb, var(--secondary-color) 20%, transparent); animation: category-glow-pulse 1.6s ease-in-out infinite; } @keyframes category-glow-pulse { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--secondary-color) 16%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--secondary-color) 26%, transparent); } } .category-card.activeCategory .category-image { border-color: var(--secondary-color); } .category-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .category-card:hover .category-image img { transform: scale(1.1); } .category-content h5 { font-size: 1.12rem; margin-bottom: .25rem; color: var(--heading-color); } .category-content small { letter-spacing: .3px; font-size: .85rem; color: var(--heading-color) !important; } .category-card.activeCategory .category-content h5, .category-card.activeCategory .category-content small { color: #000000 !important; } /* ----------------------------------------------------------------------- 9. MENU — dotted-leader list (classic printed-menu signature) ----------------------------------------------------------------------- */ #menus { background: var(--cream-deep); } .menu-row { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: 1.1rem; align-items: flex-start; background: linear-gradient(145deg, var(--paper), color-mix(in srgb, var(--cream-deep) 70%, white)); border: 1px solid color-mix(in srgb, var(--secondary-color) 12%, transparent); border-radius: var(--radius-md); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-soft); height: 100%; transform: perspective(700px); transition: opacity .7s var(--ease), transform .5s var(--ease-bounce), box-shadow .4s var(--ease); } .menu-row::before { content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%; background: linear-gradient(115deg, transparent, color-mix(in srgb, var(--secondary-color) 16%, transparent), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); z-index: 1; pointer-events: none; } .menu-row:hover::before { left: 140%; } .menu-row:hover { transform: perspective(700px) translateY(-7px) rotateX(2.5deg); box-shadow: var(--shadow-lift); } .menu-row .menu-thumb { width: 78px; height: 78px; flex: 0 0 auto; border-radius: 14px; overflow: hidden; background: var(--cream-deep); } .menu-row .menu-thumb img { width: 100%; height: 100%; object-fit: cover; } .menu-row .menu-body { flex: 1 1 auto; min-width: 0; } .menu-row .menu-title-line { display: flex; align-items: baseline; gap: .5rem; } .menu-row h5 { font-size: 1.08rem; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-row .dot-leader { flex: 1 1 auto; border-bottom: 2px dotted var(--secondary-dark); opacity: .55; min-width: 16px; transform: translateY(-6px); } .menu-row .menu-price { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--background-main); white-space: nowrap; } .menu-row p { font-size: .88rem; margin: .3rem 0 .7rem; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .menuQtyArea { display: flex; align-items: center; gap: 10px; } .menuQtyArea button { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--background-main); color: #fff; font-size: 15px; transition: .3s; display: inline-flex; align-items: center; justify-content: center; } .menuQtyArea button:hover { transform: scale(1.08); background: #000; } .menuQty { width: 42px; height: 34px; border: none; background: var(--cream-deep); border-radius: 8px; text-align: center; font-size: 15px; font-weight: 700; color: var(--heading-color); } .qtyPlusCard, .specialPlusCard { background: var(--primary-dark) !important; } .qtyPlusCard:hover, .specialPlusCard:hover { background: var(--primary-dark) !important; } .qtyMinusCard, .specialMinusCard { background: var(--primary-dark) !important; } .qtyMinusCard:hover, .specialMinusCard:hover { background: var(--primary-dark) !important; } /* ----------------------------------------------------------------------- 10. OFFERS ----------------------------------------------------------------------- */ #offers { background: var(--cream-deep); } .menu-card { border: none !important; border-radius: var(--radius-md) !important; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-soft) !important; transform: perspective(700px); transition: opacity .7s var(--ease), transform .5s var(--ease-bounce), box-shadow .4s var(--ease); position: relative; } .menu-card::before { content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); z-index: 2; pointer-events: none; } .menu-card:hover::before { left: 140%; } .menu-card:hover { transform: perspective(700px) translateY(-9px) rotateX(3deg); box-shadow: var(--shadow-lift) !important; } .menu-card .card-img-top { transition: transform .5s var(--ease); } .menu-card:hover .card-img-top { transform: scale(1.06); } .menu-card .card-body { padding: 1.4rem; } .menu-card h4 { font-size: 1.3rem; } #offers .badge.bg-danger { position: absolute; top: 14px; left: -6px; background: var(--background-main) !important; font-weight: 600; letter-spacing: .3px; padding: .5em 1em .5em .9em; font-size: .72rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-dark) 40%, transparent); } #offers .badge.bg-danger::after { content: ""; position: absolute; left: 0; top: 100%; border: 6px solid transparent; border-top-color: var(--primary-dark); border-left-color: var(--primary-dark); } .qty-box { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 15px; } .qty-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--button-main); color: #000000; font-size: 20px; font-weight: 700; cursor: pointer; transition: .3s; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); } .qty-btn:hover { background: var(--secondary-color); color: var(--background-main); transform: scale(1.08); } .qty-btn:active { transform: scale(.95); } .text-success { --bs-text-opacity: 1; color: var(--background-main) !important; } .offerQty { width: 40px; text-align: center; font-size: 20px; font-weight: 700; color: var(--heading-color); user-select: none; } /* ----------------------------------------------------------------------- 11. QUICK ORDER + FORMS ----------------------------------------------------------------------- */ #quick-order { background: var(--cream-deep) !important; } #quick-order .card { border-radius: var(--radius-lg) !important; overflow: hidden; box-shadow: var(--shadow-lift) !important; } #quick-order .card-header { background: linear-gradient(135deg, var(--background-main), var(--primary-dark)) !important; border-bottom: 3px solid var(--secondary-color); } #quick-order .card-header h2 { color: var(--cream) !important; font-size: 1.65rem; } .quick-order-subtitle { color: var(--cream) !important; font-size: .85rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; } .takeaway-badge { display: flex; align-items: center; gap: .8rem; /* background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 14%, white), var(--paper)); */ border: 1.5px solid color-mix(in srgb, var(--sage) 35%, transparent); border-radius: var(--radius-sm); padding: .75rem 1rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } /* .bi-cart3, .bi-cart-x, .bi-clock, .bi-bag-check-fill, .bi-bag-check, .takeaway-badge i { color: #e3aa00 !important; fill: #ffc107 !important; } */ .takeaway-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .takeaway-badge i { font-size: 1.5rem; color: var(--primary-dark); } .takeaway-badge strong { display: block; font-family: var(--font-display); color: var(--primary-dark); font-size: 1rem; } .takeaway-badge span { display: block; font-size: .8rem; color: var(--text-muted); } /* Order Type toggle (Take Away / Dine In) - segmented pill control */ .ot-toggle { display: flex; gap: .5rem; padding: .3rem; background: color-mix(in srgb, var(--background-main) 6%, #fff); border: 1.5px solid color-mix(in srgb, var(--background-main) 18%, transparent); border-radius: 999px; } .ot-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .5rem; border: none; border-radius: 999px; background: transparent; color: var(--charcoal, #333); font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .2px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease); } .ot-btn i { font-size: 1.05rem; color: inherit; } .ot-btn:hover:not(.active) { background: color-mix(in srgb, var(--background-main) 10%, transparent); } .ot-btn:active { transform: scale(.97); } .ot-btn.active { background: var(--primary-dark); color: var(--cream); box-shadow: 0 4px 12px color-mix(in srgb, var(--background-main) 45%, transparent); } #quick-order .card-body { padding: clamp(1.4rem, 4vw, 3rem); } #quick-order .bi-clock, #quick-order .bi-bag-check-fill, #quick-order .quick-order-subtitle i { /* color: ; */ } .form-label, #quick-order label, label { font-weight: 600; color: var(--heading-color); font-size: .92rem; margin-bottom: .4rem; } .form-control, .form-select { border: 2px solid color-mix(in srgb, var(--primary-dark) 28%, transparent); border-radius: var(--radius-sm); padding: .68rem 1rem; background: var(--paper); color: var(--heading-color); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .form-control:hover, .form-select:hover { border-color: var(--secondary-color); } .form-control::placeholder { color: var(--text-muted); } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary-color) 18%, transparent); border-color: var(--secondary-color); transform: translateY(-1px); } .form-check-input { border-color: var(--background-main); } .form-check-input:checked { background-color: var(--background-main); border-color: var(--background-main); } .form-check-label { font-weight: 500; color: var(--heading-color); } /* Cart rows (rendered by script.js — classes must stay exact) */ .cartItem { background: var(--cream-deep); padding: 16px; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .20); } .cartTop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cartTitle { font-size: 1.02rem; font-weight: 700; font-family: var(--font-display); color: var(--primary-dark); } .cartDelete { border: none; background: none; color: var(--primary-dark); font-size: 1.15rem; cursor: pointer; } .cartDelete:hover { color: var(--primary-dark); } .cartBottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .cartQtyBox { display: flex; align-items: center; gap: 10px; } .cartQtyBox button { width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--primary-dark); color: #fff; } .cartQtyBox button:hover { background: var(--primary-dark); } .cartQty { font-size: 1.05rem; font-weight: 700; min-width: 22px; text-align: center; } .cartPrice { font-size: .92rem; font-weight: 600; color: var(--text-muted); } .cartAmount { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); } .grandTotal { font-size: 1.3rem; font-weight: 700; color: var(--primary-dark); } /* ============================== Custom Delivery Time Picker ============================== */ .tp-wrap { position: relative; width: 100%; } .tp-field { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 15px; border: 2px solid color-mix(in srgb, var(--primary-dark) 28%, transparent); border-radius: 8px; background: #fff; cursor: pointer; user-select: none; transition: .25s; } .tp-field:hover { border-color: #a27b32; } .tp-field.open { border-color: #a27b32; box-shadow: 0 0 0 .15rem rgba(162, 123, 50, .15); } .tp-field-text { font-size: 15px; color: #333; } .tp-field-text.placeholder { color: #999; } .tp-field i { color: var(--primary-dark); font-size: 18px; } .tp-panel { position: absolute; left: 0; top: 100%; margin-top: 8px; width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, .12); display: none; z-index: 9999; } .tp-panel.show { display: block; } .tp-columns { display: flex; padding: 15px; gap: 10px; } .tp-col { flex: 1; } .tp-col-label { text-align: center; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #777; } .tp-scroll { max-height: 180px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; } .tp-item { padding: 8px; text-align: center; cursor: pointer; user-select: none; transition: .2s; } .tp-item:hover { background: #f5f5f5; } .tp-item.selected { background: #a27b32; color: #fff; font-weight: 600; } .tp-period-col { max-width: 80px; } .tp-ampm { display: flex; flex-direction: column; gap: 8px; } .tp-ampm-btn { border: 1px solid #ddd; background: #fff; border-radius: 6px; padding: 8px; cursor: pointer; transition: .2s; } .tp-ampm-btn.active { background: #a27b32; color: #fff; border-color: #a27b32; } .tp-footer { display: flex; justify-content: space-between; padding: 12px 15px; border-top: 1px solid #eee; } .tp-now, .tp-done { border: none; border-radius: 6px; padding: 8px 18px; cursor: pointer; } .tp-now { background: #f5f5f5; } .tp-done { background: #a27b32; color: #fff; } .tp-scroll::-webkit-scrollbar { width: 6px; } .tp-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } .tp-scroll::-webkit-scrollbar-track { background: #f7f7f7; } .tp-item, .tp-field, .tp-ampm-btn { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } @media(max-width:576px) { .tp-columns { gap: 6px; padding: 10px; } .tp-scroll { max-height: 150px; } } /* ----------------------------------------------------------------------- 12. GALLERY ----------------------------------------------------------------------- */ .gallery-section { background: var(--cream-deep); } .gallery-card { position: relative; isolation: isolate; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); cursor: pointer; transform: perspective(700px); transition: opacity .7s var(--ease), transform .5s var(--ease-bounce), box-shadow .4s var(--ease); } .gallery-card::before { content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); z-index: 2; pointer-events: none; } .gallery-card:hover::before { left: 140%; } .gallery-card:hover { transform: perspective(700px) translateY(-6px) rotateX(3deg) scale(1.02); box-shadow: var(--shadow-lift); } .gallery-card::after { content: "\f52a"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--cream); background: rgba(27, 19, 16, 0); opacity: 0; transition: opacity .35s var(--ease), background .35s var(--ease); pointer-events: none; } .gallery-card:hover::after { opacity: 1; background: color-mix(in srgb, var(--primary-dark) 50%, transparent); } .gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--ease); } .gallery-card:hover .gallery-img { transform: scale(1.08); } .lightbox { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(12, 7, 5, .94); align-items: center; justify-content: center; animation: fade-in .3s var(--ease); } .lightbox.active { display: flex; } .lightbox img { max-width: 88vw; max-height: 84vh; border-radius: var(--radius-sm); box-shadow: 0 25px 60px rgba(0, 0, 0, .5); animation: zoom-in .35s var(--ease); } .close-lightbox { position: absolute; top: 22px; right: 32px; font-size: 2.4rem; line-height: 1; color: var(--cream); cursor: pointer; transition: color .25s var(--ease), transform .25s var(--ease); } .close-lightbox:hover { color: var(--secondary-light); transform: rotate(90deg); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes zoom-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ----------------------------------------------------------------------- 13. CONTACT ----------------------------------------------------------------------- */ #contact { background: var(--cream-deep) !important; } #contact .form-control { background: var(--paper); } .feedback-star-picker { font-size: 2.1rem; letter-spacing: .25rem; cursor: pointer; } .feedback-star-picker i { color: #ddd0b8; transition: color .15s ease, transform .15s ease; } .feedback-star-picker i.active { color: var(--button-main); } .feedback-star-picker i:hover { transform: scale(1.12); } /* ----------------------------------------------------------------------- 14. FOOTER ----------------------------------------------------------------------- */ .footer-section { background: var(--primary-light); padding: 2rem 0 1rem; position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .footer-section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(86%, 920px); height: 12px; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 25%, color-mix(in srgb, var(--secondary-color) 6%, transparent) 50%, color-mix(in srgb, var(--secondary-color) 18%, transparent) 75%, transparent 100%); box-shadow: 0 0 22px rgba(0, 0, 0, .12); opacity: .25; } /* Footer logo keeps its 56px height (set via HTML attribute) but is width-capped so a wide banner-style logo never overflows the column on small screens; object-fit:contain avoids any cropping. */ #footerLogo { max-width: 100%; width: auto; object-fit: contain; } .footer-section h4 { color: var(--cream); font-size: .95rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: .9rem; } #footerCafeName { color: #ffffff; } .footer-section p { color: rgba(255, 255, 255, .86); font-size: .95rem; margin-bottom: .5rem; line-height: 1.6; } .footer-section p i { color: var(--cream); width: 18px; margin-right: .4rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: .5rem; } .footer-links a { color: rgba(255, 255, 255, .86); font-size: .95rem; transition: color .25s var(--ease), padding-left .25s var(--ease); } .footer-links a:hover { color: var(--secondary-color); padding-left: 6px; } .footer-section hr { border-color: rgba(255, 255, 255, .12); margin: 1.8rem 0 1.25rem; } .footer-section .col-md-6 a[href] { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--cream); margin-left: .5rem; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .footer-section .col-md-6 a[href]:hover { background: rgba(255, 255, 255, .12); color: var(--secondary-color); transform: translateY(-4px); } .footer-section .row:first-child { justify-content: space-between; align-items: flex-start; } .footer-section .col-lg-3 { flex: 0 0 32%; max-width: 32%; } .footer-links-section { margin: 30px 0; } .footer-links-inline { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; list-style: none; padding: 0; margin-top: 20px; } .footer-links-inline li { margin: 0; } .footer-links-inline a { color: rgba(255, 255, 255, .92); text-decoration: none; transition: .3s; } .footer-links-inline a:hover { color: var(--secondary-color); } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; margin: 0 10px; font-size: 22px; color: var(--cream); background: rgba(255, 255, 255, .06); border-radius: 50%; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .footer-social a:hover { color: var(--secondary-color); background: rgba(255, 255, 255, .12); transform: translateY(-4px); } /* Desktop Only */ @media(min-width:992px) { .footer-section { text-align: center; } .footer-links-section, .footer-social { text-align: center; } } /* =================================================== FOOTER ALIGNMENT ===================================================*/ .footer-section .row:first-child { max-width: 1200px; margin: auto; } .footer-section .col-lg-4 { text-align: center; } .footer-section .col-lg-4 h4 { margin-bottom: 12px; } .footer-section .col-lg-4 p { line-height: 1.6; } .footer-links-wrapper { padding: 4px 0; } .footer-links-inline { list-style: none; display: flex; justify-content: center; align-items: center; gap: 28px; padding: 0; margin: 10px 0 0; flex-wrap: wrap; } .footer-links-inline li { margin: 0; } .footer-links-inline a { color: rgba(251, 246, 236, .75); text-decoration: none; transition: .3s; } .footer-links-inline a:hover { color: var(--secondary-color); } .footer-social { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 4px 0; } .footer-social a { width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 22px; border-radius: 50%; transition: .3s; } .footer-social a:hover { color: var(--secondary-color); transform: translateY(-4px); } .footer-section hr { max-width: 900px; margin: 18px auto; border-color: rgba(255, 255, 255, .15); } #footerText { text-align: center; margin-bottom: 0; } /* =================================================== MOBILE FOOTER — COMPACT + SIDE-BY-SIDE ===================================================*/ @media (max-width: 767.98px) { .footer-section { padding: 1.3rem 0 .8rem; } .footer-section .row:first-child { --bs-gutter-y: .6rem; --bs-gutter-x: .5rem; display: flex; flex-wrap: wrap; justify-content: center; } /* Brand block stays full width on its own line */ .footer-section .row:first-child>div:nth-child(1) { flex: 0 0 100%; max-width: 100%; } /* Contact + Opening Hours sit side by side */ .footer-section .row:first-child>div:nth-child(2), .footer-section .row:first-child>div:nth-child(3) { flex: 0 0 50%; max-width: 50%; padding-left: .4rem; padding-right: .4rem; } #footerLogo { height: 40px !important; margin-bottom: .4rem !important; } #footerCafeName { font-size: 1.05rem; margin-bottom: .15rem; } .footer-section h4 { font-size: .74rem; letter-spacing: 1px; margin-bottom: .5rem; } .footer-section p, .footer-section .col-lg-4 p { font-size: .74rem; line-height: 1.45; margin-bottom: .3rem; } .footer-section p i { font-size: .8rem; width: auto; margin-right: .25rem; } .footer-section hr { margin: 10px auto; } .footer-links-wrapper { padding: 0; } .footer-links-wrapper h4 { margin-bottom: .3rem; } .footer-links-inline { gap: 10px 16px; margin-top: 6px; } .footer-links-inline a { font-size: .78rem; } .footer-social { gap: 12px; padding: 0; } .footer-social a { width: 34px; height: 34px; font-size: 15px; } #footerText { font-size: .72rem; } } /* ----------------------------------------------------------------------- 15. FLOATING WHATSAPP + BACK TO TOP ----------------------------------------------------------------------- */ .whatsapp-container { position: fixed; right: 24px; bottom: 26px; z-index: 1500; display: flex; align-items: center; gap: .7rem; } .floating-whatsapp { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #25D366, #128C4A); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 12px 28px rgba(18, 140, 74, .45); position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .floating-whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .6); animation: pulse-ring 2.2s ease-out infinite; } .floating-whatsapp:hover { transform: scale(1.08) rotate(6deg); box-shadow: 0 16px 34px rgba(18, 140, 74, .55); } @keyframes pulse-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } .whatsapp-tooltip { background: var(--background-main); color: var(--cream); padding: .5rem 1rem; border-radius: 50px; font-size: .85rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-soft); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); } .whatsapp-container:hover .whatsapp-tooltip { opacity: 1; transform: translateX(0); } .back-to-top { position: fixed; right: 24px; bottom: 94px; width: 46px; height: 46px; border-radius: 50%; background: var(--background-main); color: var(--secondary-light); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: none; box-shadow: var(--shadow-soft); z-index: 1500; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s var(--ease); } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); margin-right: 44px; } .back-to-top:hover { background: var(--secondary-color); color: var(--background-main); } /* .preloader { position: fixed; inset: 0; z-index: 3000; background: #343434; display: flex; align-items: center; justify-content: center; transition: opacity .3s var(--ease), visibility .3s; } .preloader.hide { opacity: 0; visibility: hidden; } .preloader-cup { width: 44px; height: 44px; border: 4px solid rgba(251, 246, 236, .2); border-top-color: var(--secondary-color); border-radius: 50%; animation: spin .4s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .activeCategory { transition: .3s; } */ .preloader { position: fixed; inset: 0; z-index: 3000; background: #ffffff; display: flex; align-items: center; justify-content: center; transition: opacity .5s ease, visibility .5s; } .preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-icon i { display: inline-block; font-size: 3.4rem; color: #EFBF04; animation: cookingToss 1s ease-in-out infinite; } @keyframes cookingToss { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-16px) rotate(-14deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(-16px) rotate(14deg); } } @media (prefers-reduced-motion: reduce) { .preloader-icon i { animation-duration: .001ms !important; } } body.preloader-lock { overflow: hidden; } /* ----------------------------------------------------------------------- 16. RESPONSIVE ----------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .navbar .logo { font-size: 1.6rem; } .restaurant-toggle { gap: 18px; } } @media (max-width: 991.98px) { .navbar .logo { font-size: 1.5rem; } :root { --nav-height: 70px; } .hero-content { text-align: center; padding-bottom: 3rem; } .hero-content p { margin-inline: auto; } .hero-cta { justify-content: center; } .hero-stats { justify-content: center; } .hero-frame { margin-top: 2rem; } .footer-section [class^="col-"] { text-align: center; } .footer-section p i { margin-right: .3rem; } .category-card { padding: 1rem .5rem .9rem; } .category-image { width: 64px; height: 64px; border-width: 2px; } .category-content h5 { font-size: .82rem; } .category-content small { font-size: .68rem; } .restaurant-toggle { justify-content: center; gap: 14px; } } @media (max-width: 767.98px) { .navbar .logo { font-size: 1.4rem; } .section-title { font-size: 1.65rem; } .hero-section { min-height: auto; padding-bottom: 2rem; } #quick-order .card-header h2 { font-size: 1.3rem; } .whatsapp-container { right: 16px; bottom: 18px; } .floating-whatsapp { width: 50px; height: 50px; font-size: 1.35rem; } .back-to-top { right: 16px; bottom: 80px; width: 40px; height: 40px; } .menu-row { flex-direction: column; padding: .8rem .8rem .9rem; border-radius: 12px; } .menu-row .menu-thumb { width: 100%; height: 96px; border-radius: 10px; } .menu-row .menu-title-line { flex-wrap: wrap; } .menu-row h5 { font-size: .88rem; white-space: normal; } .menu-row .menu-price { font-size: .92rem; } .menu-row p { font-size: .74rem; margin: .2rem 0 .5rem; line-clamp: 2; -webkit-line-clamp: 2; } .menu-row .dot-leader { display: none; } .menuQtyArea button { width: 26px; height: 26px; font-size: 11px; } .menuQty { width: 32px; height: 26px; font-size: 12px; } .menu-card .card-body { padding: .8rem; } .menu-card h4 { font-size: .95rem; } .menu-card p { font-size: .75rem; } .menu-card .card-img-top { height: 110px !important; } .qty-btn { width: 28px; height: 28px; font-size: 14px; } .feature-card { padding: 1.3rem .8rem; } .feature-icon { width: 54px; height: 54px; font-size: 1.3rem; margin-bottom: .8rem; } .feature-card h4 { font-size: .95rem; } .feature-card p { font-size: .78rem; } .gallery-card { border-radius: 10px; } .category-card { padding: .9rem .45rem .8rem; } .category-image { width: 58px; height: 58px; } .category-content h5 { font-size: .78rem; } .category-content small { font-size: .64rem; } } @media (max-width: 575.98px) { .navbar .logo { font-size: 1.3rem; } .whatsapp-tooltip { display: none; } .category-card { padding: .75rem .35rem .65rem; border-radius: 12px; } .category-image { width: 50px; height: 50px; border-width: 2px; margin-bottom: .5rem; } .category-content h5 { font-size: .7rem; line-height: 1.2; } .category-content small { font-size: .58rem; } @media(max-width:767px) { .hero-frame { display: flex; justify-content: center; align-items: center; } .hero-coffee { max-width: 90%; margin: auto; display: block; } } } /* =========================================== DESKTOP RESTAURANT TOGGLE — same round style as mobile, just bigger =========================================== */ @media (min-width: 992px) { .restaurant-toggle { display: flex; justify-content: center; align-items: center; gap: 22px; } .restaurant-toggle-btn { width: 124px; height: 124px; border-radius: 60px; } } /* ================= PRELOADER ================= */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; display: flex; justify-content: center; align-items: center; z-index: 999999; transition: .5s; } #preloader.hide { opacity: 0; visibility: hidden; } .loader { width: 100px; height: 80px; position: relative; display: flex; justify-items: center; align-items: center; } .loader .cup { position: absolute; width: 25px; height: 18px; background-color: #fff; border: 1px solid #2e2e2e; z-index: 1; border-radius: 2px 2px 10px 10px; animation: expansion 6s infinite ease-in-out; transform-origin: center; } .cup::after { content: ""; position: absolute; top: -2px; width: calc(100% - 2px); height: 2px; background: #fed59fca; border: 1px solid #2e2e2ebe; border-radius: 50%; } .cup::before { content: ""; position: absolute; top: 15px; width: calc(100% - 2px); height: 4px; background: #fff; border: 1px solid #2e2e2e; border-top: none; border-radius: 50%; z-index: -1; } .loader .cup .cup-handle { position: absolute; width: 5px; height: 10px; background-color: #fff; border: 1px solid #2e2e2e; right: -5px; top: 2px; border-radius: 2px 10px 20px 2px; } .loader .cup .smoke { position: absolute; bottom: 100%; left: 50%; width: 15px; height: 25px; background: rgba(107, 102, 102, 0.433); border-radius: 50%; transform: translateX(-50%); animation: rise 6s infinite ease-in-out; filter: blur(8px); } .loader .cup .smoke.one { animation-delay: 0s; } .loader .cup .smoke.two { animation-delay: 1s; } .loader .cup .smoke.three { animation-delay: 2s; } .loader .load { position: absolute; font-size: 10px; opacity: 0.7; top: 45%; left: 50%; transform: translateX(-50%); z-index: -1; } @keyframes expansion { 0% { width: 25px; transform: translateX(0); } 40% { width: 100%; transform: translateX(0); } 80% { width: 25px; transform: translateX(64px); } 90% { width: 100%; transform: translateX(0); } 100% { width: 25px; transform: translateX(0); } } @keyframes rise { 0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; } 30% { opacity: 0.7; } 60% { opacity: 0.4; } 100% { transform: translate(-50%, -120px) scale(1); opacity: 0; } } /* ========================================================================= NEW BUILD — sticky sidebar + sticky quick-order layout Theme repainted to match the reference cloud-kitchen POS screenshot: fresh green + white + charcoal. Single restaurant (toggle removed). Appended below the original stylesheet so these rules win the cascade. ========================================================================= */ :root { --background-main: #17a05a; /* POS green — nav/hero/footer dark surfaces */ --background-section: #12874c; --primary-dark: #0e7a44; --primary-light: #22c56e; --secondary-color: #ffb020; /* amber accent — CTAs, badges */ --secondary-light: #ffcf6b; --secondary-dark: #d68e08; --sage: #1fae63; --sage-light: #dff7e8; --cream: #f5faf6; --cream-deep: #e9f7ee; --heading-color: #16241d; --text-muted: #6b7d73; --card-bg: #ffffff; --brand-green: #FFEF00; --brand-green-dark: #FFEF00; --brand-green-light: #e7f8ee; } body { background: var(--cream); } /* ---------- kill the old multi-restaurant toggle & top navbar (unused now) --------- */ .navbar-toggler, .offcanvas { display: none !important; } /* ========================================================================= APP SHELL — desktop: sidebar | content | quick-order, all sticky ========================================================================= */ .app-shell { display: grid; grid-template-columns: 128px minmax(0, 1fr) 380px; align-items: start; width: 100%; max-width: 100%; margin: 0; } .main-top { grid-column: 2; grid-row: 1; min-width: 0; } .main-bottom { grid-column: 2; grid-row: 2; min-width: 0; } /* ---------------------------- SIDE NAV (left, sticky) ---------------------------- */ .side-nav { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--cream-deep); border-right: 1px solid rgba(0, 0, 0, .06); box-shadow: 4px 0 18px rgba(16, 40, 26, .05); z-index: 500; padding: 1.1rem 0; } .side-nav-logo { width: 76px; height: 76px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--brand-green-light); margin-bottom: 1.8rem; overflow: hidden; transition: transform .3s var(--ease); flex-shrink: 0; padding: 6px; box-sizing: border-box; } .side-nav-logo:hover { transform: scale(1.06) rotate(-3deg); } /* object-fit:contain (not cover) so ANY logo shape/size uploaded from Settings — square, round, or a wide banner-style logo — always shows fully inside this fixed 76x76 slot instead of being cropped. The slot size never changes, so the side-nav layout stays untouched. */ .side-nav-logo img { width: 100%; height: 100%; object-fit: contain; } .side-nav-logo-fallback { font-size: 2.1rem; } .side-nav-links { display: flex; flex-direction: column; gap: .4rem; flex: 1; width: 100%; align-items: center; overflow-y: auto; scrollbar-width: none; } .side-nav-links::-webkit-scrollbar { display: none; } .side-nav-link { width: 74px; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .3rem; border-radius: 14px; color: var(--primary-dark); text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .2px; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .side-nav-link i { font-size: 1.48rem; transition: transform .25s var(--ease-bounce); } .side-nav-link:hover { background: var(--primary-dark); color: var(--cream); transform: translateX(2px); } .side-nav-link:hover i { transform: scale(1.15); } .side-nav-link.active { background: var(--primary-dark); color: var(--cream); box-shadow: 0 8px 6px #282525; } .side-nav-order-btn { margin-top: .7rem; width: 98px; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .3rem; border-radius: 14px; background: var(--heading-color); color: var(--cream); text-decoration: none; font-size: .74rem; font-weight: 700; box-shadow: 0 10px 20px rgba(255, 176, 32, .35); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease); } .side-nav-order-btn i { font-size: 1.45rem; } .side-nav-order-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 26px rgba(255, 176, 32, .45); } /* mobile top-bar hidden on desktop (side-nav replaces it) */ .mobile-topbar { display: none; } .mobile-bottom-nav { display: none; } /* ---------------------------- QUICK ORDER PANEL (right, sticky) ---------------------------- */ .quick-order-panel { grid-column: 3; grid-row: 1; position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); padding: 20px 16px 20px 8px; } .qo-card { background: #ffffff; border-radius: 22px; box-shadow: 0 18px 40px rgba(16, 40, 26, .14); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 80px); border: 1px solid rgba(31, 174, 99, .1); } .qo-header { background: linear-gradient(120deg, var(--primary-dark), var(--primary-dark)); color: var(--cream); padding: 1.1rem 1.3rem; text-align: center; flex-shrink: 0; } .qo-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--cream); } .qo-header .qo-subtitle { font-size: .78rem; opacity: .9; } .qo-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .qo-scroll-fields { padding: 1rem 1.2rem .5rem; overflow-y: auto; flex: 1; min-height: 0; } .qo-scroll-fields label { font-size: .78rem; font-weight: 600; color: var(--heading-color); margin-bottom: .25rem; display: block; } .qo-scroll-fields .form-control { padding: .5rem .75rem; font-size: .88rem; border-radius: 10px; height: 52px; } .qo-cart-heading { font-size: .92rem; font-weight: 700; color: var(--heading-color); margin: .6rem 0 .5rem; } .qo-cart-heading i { color: var(--background-main); } /* ---- THE KEY REQUIREMENT: cart list scrolls after 3 items, totals stay fixed ---- */ .qo-cart-scroll { max-height: 246px; /* ~3 cart item rows */ overflow-y: auto; padding-right: 4px; border-radius: 12px; } .qo-cart-scroll::-webkit-scrollbar { width: 5px; } .qo-cart-scroll::-webkit-scrollbar-thumb { background: var(--brand-green); border-radius: 10px; } .qo-cart-scroll::-webkit-scrollbar-track { background: transparent; } .qo-totals { flex-shrink: 0; padding: .9rem 1.2rem 1.2rem; border-top: 1px solid rgba(0, 0, 0, .06); background: #fbfffc; } .qo-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .18rem 0; color: var(--heading-color); } .qo-row.qo-grand { font-size: 1.02rem; font-weight: 800; color: var(--heading-color); border-top: 1px dashed rgba(0, 0, 0, .12); margin-top: .35rem; padding-top: .5rem; } .qo-totals .btn-dark { background: var(--primary-dark); border: none; border-radius: 12px; font-weight: 700; } .qo-totals .btn-dark:hover { background: var(--brand-green); } /* ========================================================================= CATEGORY CAROUSEL — horizontal scroll with left/right arrows, small pill/plate style matching the reference screenshot. ========================================================================= */ .category-section { background: var(--cream-deep); } .category-section .section-title, .category-section .section-title em { color: var(--heading-color); } .category-section .section-subtitle { color: var(--text-muted); } .category-section .section-tag { color: var(--background-main); } .category-carousel-wrap { position: relative; display: block; padding: 0; } /* Switched from a horizontal-scroll carousel to a plain grid per the reference sketch — every category visible at once, no arrows, no side gaps eaten up by scroll buttons. */ .category-scroller { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; width: 100%; padding: .25rem 0 .5rem; } @media (min-width: 401px) { .category-scroller { grid-template-columns: repeat(4, 1fr); gap: .9rem; } } @media (min-width: 768px) { .category-scroller { grid-template-columns: repeat(5, 1fr); gap: 1rem; } } @media (min-width: 992px) { .category-scroller { grid-template-columns: repeat(6, 1fr); gap: 1.1rem; } } @media (min-width: 1280px) { .category-scroller { grid-template-columns: repeat(6, 1fr); gap: 1.2rem; } } .category-scroller::-webkit-scrollbar { display: none; } /* Arrows are no longer needed now that categories sit in a grid */ .cat-scroll-btn { display: none; } .category-card { width: 100%; scroll-snap-align: start; padding: 1rem .6rem 1rem; background: #ffffff; border: 1px solid rgba(31, 174, 99, .12); box-shadow: 0 10px 22px rgba(16, 40, 26, .08); } .category-card:hover { border-color: var(--brand-green); } .category-card.activeCategory { background: linear-gradient(150deg, var(--brand-green), var(--brand-green-dark)); border-color: var(--brand-green); } .category-image { width: 74px; height: 74px; border: 3px solid var(--brand-green-light); background: var(--brand-green-light); } .category-image-all { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--brand-green); } .category-card.activeCategory .category-image { border-color: rgba(255, 255, 255, .5); } .category-card.activeCategory .category-image-all { color: #fff; } .category-content h5 { font-size: .88rem; } .category-content small { font-size: .72rem; } .cat-scroll-btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(31, 174, 99, .25); background: #fff; color: var(--brand-green-dark); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(16, 40, 26, .1); transition: transform .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease); } .cat-scroll-btn:hover { background: var(--brand-green); color: #fff; transform: scale(1.08); } .cat-scroll-btn.is-disabled { opacity: .3; pointer-events: none; } /* ========================================================================= MENU CARDS (v2) — compact catalogue-style cards for the grid ========================================================================= */ .menu-card-v2 { background: var(--sage-light); border-radius: 18px; overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(20, 75, 30, .25); border: 1px solid rgba(0, 0, 90, .20); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .menu-card-v2:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16, 40, 26, .16); } .menu-card-v2-thumb { aspect-ratio: 1.2/1; overflow: hidden; flex-shrink: 0; } .menu-card-v2-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .menu-card-v2:hover .menu-card-v2-thumb img { transform: scale(1.08); } .menu-card-v2-body { padding: .75rem .85rem .9rem; display: flex; flex-direction: column; flex: 1; } .menu-card-v2-body h5 { font-size: .92rem; margin-bottom: .2rem; color: var(--heading-color); font-weight: 850; } .menu-card-v2-body p { font-size: .74rem; color: var(--heading-color); margin-bottom: .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .menu-card-v2-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; } .menu-card-v2-footer .menu-price { font-weight: 800; color: var(--primary-light); font-size: .86rem; white-space: nowrap; } .menuQtyArea { display: flex; align-items: center; gap: .25rem; } .menuQtyArea button { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--primary-dark); background: var(--primary-light); color: var(--cream); font-size: .65rem; display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease), background .15s var(--ease); } .menuQtyArea button:hover { background: var(--primary-dark); color: #fff; } .menuQtyArea button:active { transform: scale(.88); } .menuQtyArea .menuQty { width: 20px; text-align: center; border: none; background: transparent; font-weight: 700; font-size: .78rem; padding: 0; } /* denser grid on wide screens = shrink cards a touch further */ @media (min-width: 1280px) { .menu-card-v2-body { padding: .6rem .65rem .7rem; } .menu-card-v2-body h5 { font-size: .82rem; } .menu-card-v2-body p { font-size: .68rem; -webkit-line-clamp: 1; } } /* .bi::before, [class*=" bi-"]::before, [class^=bi-]::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; color: var(--primary-dark); -moz-osx-font-smoothing: grayscale; } */ /* ========================================================================= HERO — re-toned to the green POS palette ========================================================================= */ .hero-section { min-height: 78vh; } .hero-section::before { background: linear-gradient(180deg, rgba(15, 61, 40, .55), rgba(15, 61, 40, .82)); } .hero-eyebrow { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); } .hero-cta .btn-warning { background: var(--secondary-color); border-color: var(--secondary-color); color: #17241a; } .hero-cta .btn-warning:hover { background: var(--secondary-dark); } /* ========================================================================= RESPONSIVE — TABLET / MOBILE below 992px: side-nav becomes a bottom bar, quick-order becomes an inline block that sits right after the Offers section (its natural DOM position), grid collapses to one column. ========================================================================= */ @media (max-width: 991.98px) { .app-shell { grid-template-columns: 1fr; display: block; } .main-top, .quick-order-panel, .main-bottom { grid-column: 1; grid-row: auto; width: 100%; } .side-nav { display: none; } .mobile-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; padding: 10px 16px; /* fixed height regardless of logo shape/size uploaded in Settings, so the navbar itself never grows or shrinks */ min-height: 68px; gap: 10px; } .mobile-topbar .brand { display: flex; align-items: center; flex: 1; min-width: 0; } .mobile-topbar .brand img { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; } .mobile-topbar .brand-name { margin-left: 12px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-topbar .order-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 12px; } /* Logo badge: a fixed-height "slot" that any uploaded logo (square, circular, or a wide banner-style logo like a restaurant name lockup) sits inside via object-fit:contain. Width auto-adjusts up to a cap so wide logos never push the order button off-screen or stretch the navbar taller — height is what stays constant. */ .mobile-topbar-logo { height: 48px; width: auto; max-width: 120px; min-width: 48px; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; box-sizing: border-box; flex-shrink: 0; } .mobile-topbar-logo-fallback { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: rgba(255, 255, 255, .12); flex-shrink: 0; } .order-now-btn-mobile { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-bounce); } .order-now-btn-mobile img { width: 100%; height: 100%; object-fit: cover; } .order-now-btn-mobile:active { transform: scale(.92); } .quick-order-panel { position: static; max-height: none; padding: 0 1rem 2rem; } .qo-card { max-height: none; border-radius: 20px; } .qo-scroll-fields { overflow-y: visible; } .qo-cart-scroll { max-height: 220px; } /* ===== MOBILE BOTTOM NAV — fixed, full-width, smooth active state ===== */ .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; background: #ffffff; border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 -8px 24px rgba(16, 40, 26, .1); padding: .5rem .4rem calc(.5rem + env(safe-area-inset-bottom, 0)); margin: 0; z-index: 9999; box-sizing: border-box; } .mb-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: .45rem .2rem; border-radius: 12px; font-size: .7rem; font-weight: 700; color: var(--primary-dark); text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .mb-nav-link i { font-size: 1.35rem; transition: transform .25s var(--ease-bounce); } .mb-nav-link:active { transform: scale(.92); } .mb-nav-link.active { color: var(--cream); background: var(--primary-dark); } .mb-nav-link.active i { transform: translateY(-2px) scale(1.1); } body { padding-bottom: 78px; } /* Category grid — cards fill their grid column (3 per row on phones) */ .category-card { width: 100%; padding: .7rem .35rem; } .category-image { width: 52px; height: 52px; } .category-content h5 { font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .category-content small { font-size: .58rem; } .cat-scroll-btn { width: 30px; height: 30px; } /* Menu cards — base mobile tightening (≤991px) */ .menu-card-v2-body { padding: .55rem .55rem .65rem; } .menu-card-v2-body h5 { font-size: .74rem; line-height: 1.25; margin-bottom: .2rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .menu-card-v2-body p { display: none; } .menu-card-v2-footer { flex-direction: column; align-items: flex-start; gap: .4rem; } .menu-card-v2-footer .menu-price { font-size: .82rem; } .menuQtyArea { width: 100%; justify-content: space-between; } .menuQtyArea button { width: 24px; height: 24px; } } /* Tablet (576–991px) has more room per card — show the description again and let price + qty sit on one tidy row instead of stacking. */ @media (min-width: 576px) and (max-width: 991.98px) { .menu-card-v2-body h5 { font-size: .82rem; } .menu-card-v2-body p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: .7rem; } .menu-card-v2-footer { flex-direction: row; align-items: center; justify-content: space-between; } .menuQtyArea { width: auto; } } @media (max-width: 400px) { .category-card { width: 100%; padding: .55rem .25rem; } .category-image { width: 44px; height: 44px; } } /*===================================================== HERO MOBILE V2 - PART 1 ======================================================*/ @media (max-width:991.98px) { /* Hero */ .hero-section { min-height: 90vh !important; padding-top: 20px !important; padding-bottom: 10px !important; } /* Hero wrapper */ .hero-content { min-height: auto !important; padding: 20px 0 25px !important; text-align: left !important; transform: none !important; } /* Restaurant Toggle */ .restaurant-toggle { justify-content: center !important; gap: 18px !important; margin: 15px 0 18px !important; } /* Logo, above the badge — smaller on phones so it doesn't crowd the headline underneath */ .hero-logo-wrap { justify-content: center !important; } .hero-logo { max-width: min(190px, 60%) !important; max-height: 82px !important; margin-bottom: .9rem !important; } /* Badge */ .hero-eyebrow { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; font-size: 11px !important; letter-spacing: 1px !important; margin: 0 auto 25px !important; padding: 10px 18px !important; } /* NEW HERO LAYOUT */ .hero-middle { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; max-width: 100%; } /* LEFT */ .hero-left { width: 60%; flex: 1 1 auto; min-width: 0; } /* RIGHT */ .hero-right { width: 155px; flex: 0 0 155px; max-width: 40%; display: flex; flex-direction: column; gap: 30px; } /* Heading */ #heroTitle { font-size: 29px !important; line-height: 1.08 !important; text-align: left !important; margin-bottom: 0 !important; } /* Paragraph */ #heroSubtitle { text-align: center; max-width: 100%; margin: 0 auto 22px; font-size: 15px; line-height: 1.8; } /* Buttons */ .hero-right .btn { width: 100%; border-radius: 14px !important; padding: 12px !important; font-size: 12px; font-weight: 700; } /* Stats */ .hero-stats { margin-top: 15px !important; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; } .hero-stats .stat { min-width: unset !important; padding: 14px 8px !important; border-radius: 16px !important; text-align: center; } .hero-stats .stat b { font-size: 22px !important; } .hero-stats .stat span { font-size: 11px !important; } }