/* DayFood design tokens — remaps Bootstrap 5.3 to the DayFood look. */ :root { --df-ink: #1B1B1F; --df-surface: #FFFFFF; --df-muted: #F5F3F0; --df-muted-text: #6b6b6b; --df-border: rgba(0, 0, 0, .08); --df-shadow: rgba(0, 0, 0, .08); --df-primary: #C1272D; --df-primary-dark: #9c1f24; --df-success: #0F7B3E; --df-warning: #E8A33D; --df-danger: #C1272D; --df-radius-card: 14px; --df-radius-btn: 10px; --df-radius-img: 12px; --bs-primary: var(--df-primary); --bs-primary-rgb: 193, 39, 45; --bs-success: var(--df-success); --bs-warning: var(--df-warning); --bs-danger: var(--df-danger); --bs-body-color: var(--df-ink); --bs-body-bg: var(--df-muted); --bs-border-radius: var(--df-radius-btn); } /* * Dark theme. Driven by Bootstrap 5.3's own [data-bs-theme] color-mode * attribute (set on by the anti-FOUC inline script in each header, * before first paint) rather than a `prefers-color-scheme` media query — * that's what lets the toggle button override the OS preference. Bootstrap * itself already re-themes every stock component (cards, dropdowns, modals, * tables, form controls, offcanvas...) under `[data-bs-theme=dark]`; this * block only needs to cover DayFood's own custom df-* tokens/classes, which * Bootstrap doesn't know about. */ [data-bs-theme="dark"] { --df-ink: #F2F1EE; --df-surface: #221F1F; --df-muted: #171514; --df-muted-text: #9a9a9a; --df-border: rgba(255, 255, 255, .1); --df-shadow: rgba(0, 0, 0, .4); --bs-body-color: var(--df-ink); --bs-body-bg: var(--df-muted); } html, body { max-width: 100%; overflow-x: hidden; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; line-height: 1.55; background-color: var(--bs-body-bg); color: var(--bs-body-color); } h1, h2, h3, h4, h5, h6, .df-display, .section-title, .restaurant-name { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; } /* Buttons */ .btn { border-radius: var(--df-radius-btn); font-weight: 600; } .btn-primary { background-color: var(--df-primary); border-color: var(--df-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--df-primary-dark); border-color: var(--df-primary-dark); } /* Cards */ .card, .df-card { border-radius: var(--df-radius-card); border: 1px solid var(--df-border); box-shadow: none; transition: box-shadow 150ms ease; background-color: var(--df-surface); color: var(--df-ink); } .card:hover, .df-card:hover { box-shadow: 0 6px 20px var(--df-shadow); } .card img, .df-card img { border-radius: var(--df-radius-img); } /* Veg / non-veg marker — Indian square-with-dot convention */ .food-type-marker { display: inline-flex; width: 14px; height: 14px; border: 1.5px solid var(--df-success); border-radius: 2px; align-items: center; justify-content: center; vertical-align: middle; } .food-type-marker .dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--df-success); } .food-type-marker.food-type-nonveg { border-color: #7B3F00; } .food-type-marker.food-type-nonveg .dot { background-color: #7B3F00; border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 8px; height: 8px; } /* Status badges */ .badge-success { background-color: var(--df-success); } .badge-warning { background-color: var(--df-warning); color: #1B1B1F; } .badge-danger { background-color: var(--df-danger); } .badge-secondary { background-color: #8a8a8a; } /* Empty states */ .df-empty-state { text-align: center; padding: 3rem 1rem; color: var(--df-muted-text); } .df-empty-state i { font-size: 2.5rem; color: var(--df-primary); margin-bottom: .75rem; } /* Skeleton loaders */ .df-skeleton { background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.10) 37%, rgba(0,0,0,.06) 63%); background-size: 400% 100%; animation: df-skeleton-loading 1.4s ease infinite; border-radius: var(--df-radius-card); } @keyframes df-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Admin / owner shell layout */ .df-sidebar { background-color: var(--df-surface); min-height: 100vh; border-right: 1px solid var(--df-border); } .df-sidebar .nav-link { color: var(--df-ink); border-radius: var(--df-radius-btn); padding: .5rem .75rem; } .df-sidebar .nav-link.active { background-color: rgba(193, 39, 45, .1); color: var(--df-primary); font-weight: 600; } .df-sidebar .nav-link i { width: 1.25rem; display: inline-block; text-align: center; margin-right: .4rem; } .df-topbar { background-color: var(--df-surface); border-bottom: 1px solid var(--df-border); } .df-topbar-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; } .df-topbar-left { min-width: 0; flex: 1 1 auto; } .df-topbar-left .navbar-brand { min-width: 0; } .df-topbar-right { flex-shrink: 0; margin-left: auto; } /* Sidebar-toggle / icon-only buttons in the topbar (hamburger, etc.) — sized to match .df-theme-toggle so the row reads as one consistent group instead of a bare, unstyled Bootstrap .btn crowding the brand text. */ .btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--df-border); background-color: transparent; color: var(--df-ink); } .btn-icon:hover { background-color: var(--df-muted); color: var(--df-ink); } .btn-icon i { font-size: 1.1rem; } /* Homepage hero header sits on a purple/blue gradient — the icons need to stay white here regardless of --df-ink, unlike .btn-icon everywhere else. */ .homepage-hero .btn-icon { border-color: rgba(255, 255, 255, .35); color: #fff; } .homepage-hero .btn-icon:hover { background-color: rgba(255, 255, 255, .15); color: #fff; } @media (max-width: 575.98px) { .df-topbar { padding-top: .65rem; padding-bottom: .65rem; } .df-topbar-left .navbar-brand { font-size: 1.05rem; } .df-topbar-right { gap: .5rem !important; } } .df-stat-card { border-radius: var(--df-radius-card); background-color: var(--df-surface); padding: 1.25rem; border: 1px solid var(--df-border); overflow: hidden; } .df-stat-card .df-stat-value { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.15rem, 5vw, 1.75rem); font-weight: 700; color: var(--df-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 575.98px) { .df-stat-card { padding: .85rem .75rem; } } .rider-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background-color: var(--df-muted); color: var(--df-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .rider-balance-row { border-top: 1px solid var(--df-border); border-bottom: 1px solid var(--df-border); padding: 0.75rem 0; margin-left: 0; margin-right: 0; } .df-auth-card { max-width: 400px; margin: 8vh auto; border-radius: var(--df-radius-card); background-color: var(--df-surface); color: var(--df-ink); padding: 2rem; box-shadow: 0 6px 20px var(--df-shadow); } /* Show/hide password toggle — see assets/js/password-toggle.js */ .df-password-wrap { position: relative; } .df-password-wrap input { padding-right: 2.75rem; } .df-password-toggle { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); background: none; border: none; padding: .25rem; color: var(--df-muted-text); line-height: 1; } .df-password-toggle:hover { color: var(--df-ink); } /* Theme toggle button in the topbar */ .df-theme-toggle { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--df-border); background-color: transparent; color: var(--df-ink); font-size: 1.05rem; line-height: 1; } .df-theme-toggle:hover { background-color: var(--df-muted); } [data-bs-theme="dark"] .df-theme-toggle .bi-moon-stars-fill, .df-theme-toggle .bi-sun-fill { display: none; } [data-bs-theme="dark"] .df-theme-toggle .bi-sun-fill { display: inline; } /* Toast for cart add/update/remove feedback */ .df-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); /* Always a dark snackbar regardless of page theme (not tied to --df-ink, which flips to a light color in dark mode and would make this invisible: light text on a light background). */ background-color: #1B1B1F; color: #fff; padding: .65rem 1.1rem; border-radius: var(--df-radius-btn); font-size: .875rem; z-index: 1080; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; max-width: 90vw; text-align: center; } .df-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .df-toast.df-toast-error { background-color: var(--df-danger); } .cart-count-badge { display: none; position: absolute; top: -4px; right: -6px; background-color: var(--df-primary); color: #fff; font-size: .65rem; line-height: 1; padding: 3px 5px; border-radius: 999px; min-width: 16px; text-align: center; } /* Cancelled/rejected order state — dailycart's status-icon/status-badge only ship in-progress + delivered variants */ .status-icon.cancelled { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; } .status-badge.cancelled { background-color: rgba(220, 53, 69, 0.2); color: #842029; } [data-bs-theme="dark"] .status-icon.cancelled { background-color: rgba(220, 53, 69, 0.18); color: #ff8189; } [data-bs-theme="dark"] .status-badge.cancelled { background-color: rgba(220, 53, 69, 0.28); color: #ffb3b8; } [data-bs-theme="dark"] .status-icon.in-progress { background-color: rgba(255, 193, 7, 0.15); } [data-bs-theme="dark"] .status-badge.in-progress { color: #ffd873; } [data-bs-theme="dark"] .status-icon.delivered { background-color: rgba(25, 135, 84, 0.18); color: #6fe0a3; } [data-bs-theme="dark"] .status-badge.delivered { background-color: rgba(25, 135, 84, 0.28); color: #a3f0c4; } /* Small camera-badge avatar for the profile-header-card row — dailycart's .avatar-wrapper/.change-photo-btn are sized for the 120px edit-profile layout, too big for the 40px header avatar */ .avatar-wrapper-sm { position: relative; width: 56px; height: 56px; flex-shrink: 0; margin-right: 1rem; } .avatar-wrapper-sm .profile-avatar2 { width: 56px; height: 56px; margin-right: 0; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .avatar-wrapper-sm .change-photo-btn { width: 22px; height: 22px; bottom: -2px; right: -2px; font-size: 0.7rem; padding: 0; } /* Homepage top address bar — long addresses wrap onto 2 lines, then ellipsize, instead of overflowing past the header or getting hard-cut. Clamping the whole link (icon+text+chevron) as ONE box, rather than nesting -webkit-line-clamp inside a flex row, avoids a real cross-browser bug where the clamp's height never actually kicks in inside a flex parent and the text just wraps to as many lines as it needs. */ /* Floating category jump button + popup on restaurant/view (home/store.php). Always a dark chip regardless of page theme, same reasoning as .df-toast: it floats over photos/content, so it needs to stay legible either way. */ .df-cat-fab { position: fixed; right: 16px; bottom: 24px; z-index: 1070; width: 56px; height: 56px; border-radius: 50%; border: none; background-color: #1B1B1F; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); line-height: 1; } .df-cat-fab i { font-size: 1.1rem; } .df-cat-fab span { font-size: .55rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .df-cat-backdrop { position: fixed; inset: 0; z-index: 1065; background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity 150ms ease; } .df-cat-backdrop.show { opacity: 1; pointer-events: auto; } .df-cat-popup { position: fixed; right: 16px; bottom: 90px; z-index: 1070; min-width: 200px; max-width: 80vw; max-height: 60vh; overflow-y: auto; background-color: #1B1B1F; border-radius: var(--df-radius-card); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding: .4rem 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; } .df-cat-popup.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .df-cat-popup-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; color: #f2f1ee; font-size: .875rem; text-decoration: none; white-space: nowrap; } .df-cat-popup-item:hover, .df-cat-popup-item:focus { background-color: rgba(255, 255, 255, .08); color: #fff; } .df-cat-popup-count { color: #9a9a9a; font-size: .8rem; } /* Floating "Proceed to Checkout" bar on restaurant/view (home/store.php). Same always-dark reasoning as .df-cat-fab, but on the LEFT so it never overlaps the category FAB (bottom-right) or its popup. */ .df-checkout-fab { position: fixed; left: 16px; bottom: 24px; z-index: 1071; height: 52px; padding: 0 1.1rem; border-radius: 26px; background-color: var(--df-primary, #1B1B1F); color: #fff; display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); } .df-checkout-fab:hover, .df-checkout-fab:focus { color: #fff; text-decoration: none; } .df-checkout-fab i { font-size: 1rem; } @media (max-width: 380px) { .df-checkout-fab span { display: none; } } /* Closed restaurant card on the homepage (home/home_page.php) — dimmed image instead of hiding the card, so customers still see it's there and when it reopens. */ .restaurant-card-closed .card-image-top img { opacity: .5; } /* Closed restaurant's menu on restaurant/view (home/store.php) — products stay visible (add-to-cart is already disabled server-side) but read as unavailable via grayscale, same idea as the homepage's closed card. */ .store-menu-closed .store-product-card .card-image-top img, .store-menu-closed .store-product-card .card-image-top > div { filter: grayscale(1); opacity: .6; } /* Terms & Conditions page (home/terms.php) */ .df-terms-list { display: flex; flex-direction: column; gap: .6rem; } .df-terms-card { display: flex; align-items: flex-start; gap: .85rem; padding: .9rem 1rem; } .df-terms-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background-color: rgba(193, 39, 45, .1); color: var(--df-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .df-terms-body { min-width: 0; } /* Help & Support page (home/support.php) */ .df-whatsapp-card { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; color: inherit; } .df-whatsapp-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background-color: rgba(37, 211, 102, .12); color: #25D366; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .location-address-link { display: -webkit-box; width: 100%; max-width: 100%; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.3; word-break: break-word; }