/*
Boutique Dairy & Sweets Catalog - Style System
Colors, typography, glassmorphism, transitions and animations
*/
/* Fonts are loaded via + in the HTML
(faster than @import, which forces an extra render-blocking round-trip). */
:root {
/* Dynamic Palette */
--bg-primary: #FAF8F5;
--bg-secondary: #FFFDFB;
--bg-glass: rgba(255, 253, 251, 0.75);
--border-glass: rgba(197, 168, 128, 0.15);
--border-light: rgba(139, 94, 60, 0.08);
--text-primary: #2B2520;
--text-secondary: #655E58;
--text-muted: #9C948D;
--accent-gold: #C5A880;
--accent-gold-hover: #B5966B;
--accent-brown: #8B5E3C;
--accent-brown-hover: #734D31;
--accent-cream: #F5EFEB;
--accent-green: #5B8266;
--accent-red: #D96B62;
--shadow-sm: 0 4px 6px -1px rgba(139, 94, 60, 0.05);
--shadow-md: 0 10px 15px -3px rgba(139, 94, 60, 0.08), 0 4px 6px -2px rgba(139, 94, 60, 0.04);
--shadow-lg: 0 20px 25px -5px rgba(139, 94, 60, 0.12), 0 10px 10px -5px rgba(139, 94, 60, 0.08);
--shadow-glass: 0 8px 32px 0 rgba(139, 94, 60, 0.08);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 9999px;
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Outfit', sans-serif;
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Core Settings */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
line-height: 1.5;
overflow-x: hidden;
transition: background-color var(--transition-normal), color var(--transition-normal);
}
/* Typography elements */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
letter-spacing: -0.01em;
}
a {
color: inherit;
text-decoration: none;
}
button, input, textarea, select {
font-family: inherit;
font-size: inherit;
outline: none;
}
button {
cursor: pointer;
border: none;
background: none;
transition: all var(--transition-fast);
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-brown);
}
/* Premium Layout & Containers */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* Navigation Bar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background: var(--bg-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-glass);
z-index: 100;
display: flex;
align-items: center;
transition: background var(--transition-normal), border var(--transition-normal);
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-brown);
font-family: var(--font-serif);
}
.logo span {
color: var(--accent-gold);
}
.logo-icon {
width: 40px;
height: 40px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.logo-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-link {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-secondary);
position: relative;
padding: 8px 0;
transition: color var(--transition-fast);
}
.nav-link:hover, .nav-link.active {
color: var(--text-primary);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-gold);
transition: width var(--transition-fast);
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
/* Rounded Action Buttons */
.btn-round {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-cream);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: var(--shadow-sm);
}
.btn-round:hover {
background: var(--accent-gold);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-round .badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--accent-red);
color: white;
font-size: 0.75rem;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-primary);
animation: pulse-badge 2s infinite;
}
/* Hero Section */
.hero {
padding-top: 140px;
padding-bottom: 80px;
background: linear-gradient(180deg, var(--accent-cream) 0%, var(--bg-primary) 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(197, 168, 128, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
z-index: 0;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content {
max-width: 620px;
}
.hero-tag {
display: inline-block;
padding: 6px 16px;
background: var(--accent-cream);
color: var(--accent-brown);
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 20px;
border: 1px solid var(--border-glass);
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.75rem);
line-height: 1.15;
color: var(--text-primary);
margin-bottom: 24px;
}
.hero-title span {
color: var(--accent-brown);
font-style: italic;
}
.hero-description {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 36px;
line-height: 1.6;
}
.hero-actions {
display: flex;
gap: 16px;
}
.btn-primary {
padding: 14px 28px;
background: linear-gradient(135deg, var(--accent-brown), #5c3b24);
color: white;
font-weight: 600;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, #9C6C48, var(--accent-brown));
}
.btn-secondary {
padding: 14px 28px;
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-glass);
font-weight: 600;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--accent-cream);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.hero-image-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image-bg {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(197, 168, 128, 0.2), rgba(139, 94, 60, 0.1));
border-radius: 40% 60% 60% 40% / 50% 30% 70% 50%;
animation: morph-blob 12s infinite alternate ease-in-out;
z-index: 0;
filter: blur(10px);
}
.hero-img {
width: 100%;
max-width: 460px;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 1;
object-fit: cover;
transition: transform var(--transition-slow);
}
.hero-image-wrapper:hover .hero-img {
transform: scale(1.03) rotate(1deg);
}
.section-header {
text-align: center;
margin-bottom: 48px;
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.section-subtitle {
color: var(--accent-gold);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.section-title {
font-size: 2.25rem;
color: var(--text-primary);
margin-bottom: 16px;
}
.section-desc {
color: var(--text-secondary);
}
/* Order Again / Reorder Section */
.reorder-section {
padding: 60px 0 0;
}
.reorder-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 24px;
}
.reorder-header .section-subtitle {
display: block;
}
.reorder-header .section-title {
margin-bottom: 0;
}
.reorder-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.reorder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.reorder-card {
background: var(--bg-secondary);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 14px;
display: flex;
align-items: center;
gap: 14px;
transition: all var(--transition-normal);
position: relative;
}
.reorder-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--accent-gold);
}
.reorder-card-img {
width: 64px;
height: 64px;
border-radius: var(--radius-md);
object-fit: cover;
flex-shrink: 0;
}
.reorder-card-body {
flex-grow: 1;
min-width: 0;
}
.reorder-card-title {
font-size: 1rem;
margin-bottom: 2px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reorder-card-meta {
font-size: 0.75rem;
color: var(--text-muted);
display: block;
margin-bottom: 4px;
}
.reorder-card-price {
font-size: 1.05rem;
font-weight: 700;
color: var(--accent-brown);
font-family: var(--font-sans);
}
.reorder-badge {
display: inline-block;
background: var(--accent-cream);
color: var(--accent-brown);
font-size: 0.68rem;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
margin-left: 6px;
}
.reorder-last-meta {
margin-top: 20px;
font-size: 0.85rem;
color: var(--text-muted);
}
.reorder-empty {
grid-column: 1 / -1;
text-align: center;
padding: 32px 0;
color: var(--text-secondary);
}
/* Catalog Filter & Search Section */
.catalog-section {
padding: 80px 0;
}
.catalog-controls {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
background: var(--bg-secondary);
padding: 16px 24px;
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
}
.search-box {
position: relative;
max-width: 320px;
width: 100%;
}
.search-input {
width: 100%;
padding: 12px 16px 12px 48px;
background: var(--bg-primary);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.search-input:focus {
border-color: var(--accent-gold);
box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15);
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
}
.filter-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
max-width: 100%;
}
.filter-tab {
padding: 10px 20px;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-secondary);
background: transparent;
white-space: nowrap;
}
.filter-tab:hover {
background: var(--accent-cream);
color: var(--text-primary);
}
.filter-tab.active {
background: var(--accent-brown);
color: white;
}
/* Products Grid */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.product-card {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
position: relative;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--accent-gold);
}
.product-tag {
position: absolute;
top: 16px;
left: 16px;
background: var(--accent-gold);
color: white;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-full);
z-index: 2;
box-shadow: var(--shadow-sm);
}
.product-img-wrapper {
width: 100%;
aspect-ratio: 1 / 1; /* fixed square box — reserves space, prevents layout shift (CLS) */
overflow: hidden;
position: relative;
background: #FBF9F6; /* neutral backdrop so contained pack-shots look intentional */
}
.product-img {
width: 100%;
height: 100%;
object-fit: contain; /* show the whole product instead of cropping it */
object-position: center; /* keep it centred in the square */
padding: 8px;
transition: transform var(--transition-slow);
}
.product-card:hover .product-img {
transform: scale(1.05);
}
.product-info {
padding: 14px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-rating {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
color: #F5B041;
margin-bottom: 8px;
}
.product-rating span {
color: var(--text-muted);
}
.product-title {
font-size: 0.95rem;
margin-bottom: 6px;
line-height: 1.25;
color: var(--text-primary);
}
.product-desc {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 16px;
line-height: 1.4;
flex-grow: 1;
}
.product-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.product-price-box {
display: flex;
flex-direction: column;
}
.product-price {
font-size: 1.05rem;
font-weight: 700;
color: var(--accent-brown);
font-family: var(--font-sans);
}
.product-unit {
font-size: 0.75rem;
color: var(--text-muted);
}
.btn-add-cart {
width: 32px;
height: 32px;
font-size: 0.85rem;
border-radius: var(--radius-md);
background: var(--accent-cream);
color: var(--accent-brown);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.btn-add-cart:hover {
background: var(--accent-brown);
color: white;
transform: scale(1.08);
}
.no-results {
grid-column: 1 / -1;
text-align: center;
padding: 80px 0;
color: var(--text-secondary);
}
.no-results-icon {
font-size: 3rem;
color: var(--text-muted);
margin-bottom: 16px;
}
/* Shopping Cart Drawer */
.cart-drawer {
position: fixed;
top: 0;
right: -420px;
width: 100%;
max-width: 420px;
height: 100%;
background: var(--bg-secondary);
border-left: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
z-index: 200;
display: flex;
flex-direction: column;
transition: right var(--transition-normal);
}
.cart-drawer.open {
right: 0;
}
.cart-header {
padding: 24px;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h3 {
font-size: 1.5rem;
}
.btn-close {
font-size: 1.5rem;
color: var(--text-secondary);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.btn-close:hover {
background: var(--accent-cream);
color: var(--text-primary);
}
.cart-items {
flex-grow: 1;
overflow-y: auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.cart-item {
display: flex;
gap: 16px;
align-items: center;
border-bottom: 1px solid var(--border-light);
padding-bottom: 16px;
}
.cart-item-img {
width: 70px;
height: 70px;
border-radius: var(--radius-md);
object-fit: cover;
}
.cart-item-details {
flex-grow: 1;
}
.cart-item-title {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 4px;
}
.cart-item-price {
color: var(--accent-brown);
font-weight: 600;
font-size: 0.9rem;
}
.cart-item-qty {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.qty-btn {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent-cream);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: var(--accent-brown);
}
.qty-btn:hover {
background: var(--accent-gold);
color: white;
}
.cart-item-remove {
color: var(--text-muted);
font-size: 0.9rem;
}
.cart-item-remove:hover {
color: var(--accent-red);
}
.cart-footer {
padding: 24px;
border-top: 1px solid var(--border-light);
background: var(--bg-primary);
}
.cart-summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-weight: 500;
}
.cart-summary-row.total {
font-size: 1.25rem;
font-weight: 700;
color: var(--accent-brown);
margin-bottom: 24px;
border-top: 1px solid var(--border-light);
padding-top: 12px;
}
.btn-checkout {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--accent-brown), #5c3b24);
color: white;
border-radius: var(--radius-md);
font-weight: 600;
box-shadow: var(--shadow-md);
}
.btn-checkout:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-checkout:disabled {
background: var(--text-muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.cart-empty {
text-align: center;
padding: 80px 0;
color: var(--text-secondary);
}
.cart-empty-icon {
font-size: 3rem;
color: var(--text-muted);
margin-bottom: 16px;
}
/* Modal Overlay & Card sheets */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(18, 17, 16, 0.6);
backdrop-filter: blur(8px);
z-index: 300;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay.open {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-glass);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 500px;
overflow: hidden;
position: relative;
transform: scale(0.9);
transition: transform var(--transition-normal);
}
.modal-overlay.open .modal-content {
transform: scale(1);
}
.modal-body {
padding: 32px;
}
.modal-title {
font-size: 1.75rem;
margin-bottom: 12px;
color: var(--accent-brown);
}
.modal-subtitle {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 24px;
}
/* Form Styles */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
margin-bottom: 8px;
}
.form-control {
width: 100%;
padding: 12px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.form-control:focus {
border-color: var(--accent-gold);
background: var(--bg-secondary);
box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15);
}
.cod-notice {
display: flex;
align-items: flex-start;
gap: 8px;
background: var(--accent-cream);
color: var(--accent-brown);
border: 1px solid var(--accent-gold);
border-radius: var(--radius-md);
padding: 12px 14px;
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 20px;
}
.checkout-options {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 24px;
}
.btn-checkout-opt {
padding: 14px;
border-radius: var(--radius-md);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: var(--shadow-sm);
text-align: center;
}
.btn-checkout-opt.owner-alert {
background: var(--accent-gold);
color: white;
}
.btn-checkout-opt.owner-alert:hover {
background: var(--accent-gold-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Owner Dashboard Specific Styling */
.owner-body {
padding-top: 100px;
}
.owner-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 32px;
margin-top: 40px;
}
/* Analytics Row Cards */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin-bottom: 32px;
}
.stat-card {
background: var(--bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--border-light);
padding: 24px;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 20px;
}
.stat-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--accent-cream);
color: var(--accent-brown);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.stat-info {
display: flex;
flex-direction: column;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.stat-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
/* Orders List View */
.orders-section {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 32px;
box-shadow: var(--shadow-md);
}
.orders-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.orders-title {
font-size: 1.5rem;
}
.orders-actions {
display: flex;
gap: 12px;
}
.orders-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-card {
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
background: var(--bg-primary);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.order-card.new-alert {
border-color: var(--accent-gold);
animation: border-pulse 2s infinite;
}
.order-card-header {
padding: 16px 20px;
background: var(--accent-cream);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-light);
flex-wrap: wrap;
gap: 12px;
}
.order-id-time {
display: flex;
flex-direction: column;
}
.order-id {
font-weight: 600;
color: var(--accent-brown);
}
.order-time {
font-size: 0.8rem;
color: var(--text-muted);
}
.order-controls {
display: flex;
align-items: center;
gap: 16px;
}
.order-status-select {
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--bg-secondary);
border: 1px solid var(--border-glass);
color: var(--text-primary);
font-weight: 500;
font-size: 0.85rem;
}
.order-card-body {
padding: 20px;
}
.customer-detail-row {
margin-bottom: 16px;
font-size: 0.95rem;
}
.customer-detail-row span {
font-weight: 600;
color: var(--text-secondary);
display: inline-block;
width: 80px;
}
.order-items-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 0.9rem;
}
.order-items-table th, .order-items-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.order-items-table th {
font-weight: 600;
color: var(--text-muted);
background: var(--bg-secondary);
}
.order-items-table td.num {
text-align: right;
}
.order-items-table tr.total-row td {
border-bottom: none;
font-weight: 700;
font-size: 1rem;
color: var(--accent-brown);
padding-top: 16px;
}
.btn-delete-order {
color: var(--text-muted);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.btn-delete-order:hover {
background: var(--accent-red);
color: white;
}
.no-orders {
text-align: center;
padding: 60px 0;
color: var(--text-muted);
}
.no-orders-icon {
font-size: 3rem;
margin-bottom: 12px;
}
/* Sidebar dashboard info */
.owner-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
.panel-card {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
padding: 24px;
box-shadow: var(--shadow-md);
}
.panel-title {
font-size: 1.25rem;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.chart-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.chart-info {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
}
.chart-bar-container {
height: 8px;
background: var(--bg-primary);
border-radius: var(--radius-full);
overflow: hidden;
}
.chart-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent-gold), var(--accent-brown));
border-radius: var(--radius-full);
width: 0;
transition: width 1s ease-out;
}
/* Footer Section */
.footer {
background: var(--bg-secondary);
border-top: 1px solid var(--border-light);
padding: 60px 0 30px;
margin-top: 80px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 48px;
margin-bottom: 40px;
}
.footer-brand {
max-width: 320px;
}
.footer-logo {
margin-bottom: 16px;
}
.footer-desc {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 20px;
}
.footer-links-title {
font-size: 1.1rem;
margin-bottom: 20px;
font-weight: 600;
color: var(--text-primary);
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-link {
font-size: 0.9rem;
color: var(--text-secondary);
transition: color var(--transition-fast);
}
.footer-link:hover {
color: var(--accent-gold);
}
.footer-bottom {
border-top: 1px solid var(--border-light);
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
font-size: 0.85rem;
color: var(--text-muted);
}
/* Success notification toast */
.toast {
position: fixed;
bottom: 24px;
left: 24px;
background: var(--accent-green);
color: white;
padding: 16px 24px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 12px;
z-index: 400;
transform: translateY(100px);
opacity: 0;
transition: all var(--transition-normal);
}
.toast.show {
transform: translateY(0);
opacity: 1;
}
.toast-icon {
font-size: 1.2rem;
}
/* Audio control badge inside owner */
.sound-toggle-btn {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--radius-full);
background: var(--accent-cream);
color: var(--accent-brown);
}
.sound-toggle-btn.muted {
color: var(--text-muted);
background: var(--border-light);
}
/* Animations */
@keyframes pulse-badge {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(217, 107, 98, 0.7);
}
70% {
transform: scale(1.1);
box-shadow: 0 0 0 6px rgba(217, 107, 98, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(217, 107, 98, 0);
}
}
@keyframes border-pulse {
0% {
border-color: var(--border-glass);
}
50% {
border-color: var(--accent-gold);
box-shadow: 0 0 10px rgba(197, 168, 128, 0.3);
}
100% {
border-color: var(--border-glass);
}
}
@keyframes morph-blob {
0% {
border-radius: 40% 60% 60% 40% / 50% 30% 70% 50%;
}
100% {
border-radius: 60% 40% 30% 70% / 60% 50% 45% 40%;
}
}
/* Responsive Overrides */
@media(max-width: 991px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.hero-content {
margin: 0 auto;
}
.hero-actions {
justify-content: center;
}
.hero-img {
max-width: 380px;
}
.owner-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Hero photo carousel */
.hero-carousel {
position: relative;
width: 100%;
max-width: 460px;
height: 420px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
z-index: 1;
}
.hero-carousel img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.9s ease;
}
.hero-carousel img.active {
opacity: 1;
}
/* Shop by Category cards */
.category-section {
padding: 48px 0 0;
}
.category-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.category-card-mini {
position: relative;
height: 110px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
padding: 0;
}
.category-card-mini:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.category-card-mini img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.category-card-mini span {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 10px;
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(26,24,23,0.8) 100%);
color: white;
font-weight: 600;
font-size: 0.85rem;
text-align: left;
}
/* Best sellers: horizontal scroll row */
.bestseller-section {
padding: 48px 0 0;
}
.bestseller-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 185px;
gap: 14px;
overflow-x: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.bestseller-card {
width: 185px;
}
.bestseller-card .product-img-wrapper {
aspect-ratio: 1 / 1; /* keep best-seller thumbnails square too */
}
/* Floating WhatsApp button */
.whatsapp-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: 54px;
height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-brown), #5c3b24);
border: 2px solid var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
z-index: 149;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.whatsapp-fab:hover {
transform: scale(1.08);
box-shadow: 0 0 0 4px var(--accent-cream), var(--shadow-lg);
}
/* Floating cart bar */
.cart-bottom-bar {
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%) translateY(120px);
display: flex;
align-items: center;
gap: 18px;
background: linear-gradient(135deg, var(--accent-brown), #5c3b24);
color: white;
padding: 14px 22px;
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
z-index: 150;
font-weight: 600;
font-size: 0.95rem;
transition: transform var(--transition-normal);
white-space: nowrap;
}
.cart-bottom-bar.show {
transform: translateX(-50%) translateY(0);
}
.cart-bar-cta {
background: rgba(255, 255, 255, 0.18);
padding: 6px 14px;
border-radius: var(--radius-full);
}
.forgot-password-link {
display: block;
width: 100%;
text-align: center;
margin-top: 14px;
font-size: 0.85rem;
color: var(--accent-brown);
background: transparent;
text-decoration: underline;
}
/* Larger phones / small tablets: three cards per row */
@media(min-width: 481px) and (max-width: 767px) {
.products-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media(max-width: 767px) {
.container {
padding: 0 14px;
}
.cart-bottom-bar {
width: calc(100% - 24px);
justify-content: space-between;
padding: 13px 18px;
}
/* Keep the WhatsApp button above the full-width cart bar */
.whatsapp-fab {
bottom: 84px;
right: 14px;
width: 48px;
height: 48px;
}
.navbar {
height: 64px;
}
.nav-links {
display: none; /* Home/Catalog links hidden on phones; everything is reachable by scrolling */
}
.logo {
font-size: 1.15rem;
}
.btn-round {
width: 38px;
height: 38px;
}
.nav-actions {
gap: 8px;
}
.hero {
padding-top: 96px;
padding-bottom: 40px;
}
.hero-description {
font-size: 1rem;
margin-bottom: 24px;
}
.hero-img {
max-width: 300px;
}
.hero-carousel {
max-width: 320px;
height: 300px;
margin: 0 auto;
}
.section-header {
margin-bottom: 28px;
}
.category-section,
.bestseller-section {
padding-top: 32px;
}
.category-cards {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.category-card-mini {
height: 90px;
}
.reorder-grid {
grid-template-columns: 1fr;
}
.reorder-header {
align-items: flex-start;
}
.reorder-header .btn-primary {
width: 100%;
text-align: center;
}
.catalog-controls {
flex-direction: column;
align-items: stretch;
padding: 12px 14px;
}
.search-box {
max-width: 100%;
}
/* Always two product cards per row on phones */
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-img-wrapper {
aspect-ratio: 1 / 1; /* stay square on mobile so the grid never shifts */
}
.product-info {
padding: 10px;
}
.product-title {
font-size: 0.85rem;
}
.product-price {
font-size: 0.95rem;
}
.btn-add-cart {
width: 30px;
height: 30px;
font-size: 0.8rem;
}
.modal-body {
padding: 20px;
}
.modal-overlay {
padding: 12px;
}
.checkout-options {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* User Menu and Dropdown inside Navbar */
.user-menu-container {
position: relative;
display: flex;
align-items: center;
}
.user-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: var(--bg-secondary);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
display: none;
flex-direction: column;
min-width: 160px;
z-index: 150;
overflow: hidden;
}
.user-dropdown-menu.show {
display: flex;
}
.dropdown-item {
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 500;
text-align: left;
width: 100%;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
background: transparent;
border-radius: 0;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background: var(--accent-cream);
color: var(--text-primary);
}
/* Modal Tab Styles */
.modal-tabs {
display: flex;
border-bottom: 1px solid var(--border-light);
margin-bottom: 24px;
}
.modal-tab-btn {
flex: 1;
padding: 12px;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-muted);
text-align: center;
border-bottom: 2px solid transparent;
background: transparent;
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-tab-btn.active {
border-bottom-color: var(--accent-brown);
color: var(--accent-brown);
}
/* Order History Specific Elements */
.profile-order-card {
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 16px;
background: var(--bg-primary);
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.profile-order-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.profile-order-id {
color: var(--accent-brown);
}
.badge-status {
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
.status-pending {
background: rgba(197, 168, 128, 0.15);
color: #c58d40;
}
.status-preparing {
background: rgba(139, 94, 60, 0.15);
color: var(--accent-brown);
}
.status-delivery {
background: rgba(91, 130, 102, 0.15);
color: var(--accent-green);
}
.status-completed {
background: rgba(91, 130, 102, 0.25);
color: var(--accent-green);
}
.profile-order-details {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.4;
}
.profile-order-items {
margin-top: 6px;
padding-left: 16px;
font-size: 0.85rem;
color: var(--text-muted);
}
/* --- Order History Panel --- */
.history-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-glass);
}
.history-toggle {
display: inline-flex;
background: var(--bg-primary);
border: 1px solid var(--border-glass);
border-radius: var(--radius-full);
padding: 3px;
}
.history-toggle-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 5px 14px;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
border-radius: var(--radius-full);
transition: all 0.2s ease;
}
.history-toggle-btn.active {
background: var(--accent-brown);
color: #fff;
}
.history-list {
display: flex;
flex-direction: column;
max-height: 320px;
overflow-y: auto;
}
.history-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
padding: 10px 4px;
border-bottom: 1px solid var(--border-glass);
font-size: 0.85rem;
}
.history-row:last-child {
border-bottom: none;
}
.history-period {
font-weight: 600;
color: var(--text-secondary);
}
.history-count {
color: var(--text-muted);
font-size: 0.8rem;
white-space: nowrap;
}
.history-revenue {
font-weight: 700;
color: var(--accent-brown);
text-align: right;
white-space: nowrap;
}
.history-empty {
font-size: 0.85rem;
color: var(--text-muted);
padding: 8px 0;
}
/* ============================================
Order History page
============================================ */
.history-controls {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 16px;
}
.history-search {
position: relative;
flex: 1 1 280px;
min-width: 220px;
}
.history-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 0.9rem;
pointer-events: none;
opacity: 0.7;
}
.history-search .form-control {
padding-left: 40px;
}
.history-control-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.history-control-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.history-control-group .order-status-select {
min-width: 130px;
}
.history-table-wrap {
overflow-x: auto;
border-radius: var(--radius-md);
}
.history-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
min-width: 720px;
}
.history-table thead th {
text-align: left;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
padding: 12px 16px;
border-bottom: 2px solid var(--border-light);
white-space: nowrap;
}
.history-table thead th.num,
.history-table tbody td.num {
text-align: right;
}
.history-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
color: var(--text-secondary);
}
.history-table tbody tr:hover {
background: var(--accent-cream);
}
.hist-id {
font-weight: 700;
color: var(--text-primary);
font-family: var(--font-sans);
}
.hist-date {
white-space: nowrap;
color: var(--text-muted);
font-size: 0.82rem;
}
.hist-cust-name {
font-weight: 600;
color: var(--text-primary);
}
.hist-user {
font-weight: 400;
color: var(--text-muted);
font-size: 0.8rem;
}
.hist-cust-phone {
font-size: 0.8rem;
color: var(--text-muted);
}
.hist-total {
font-weight: 700;
color: var(--text-primary);
}
.hist-status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.hist-status-badge.status-pending {
background: rgba(217, 107, 98, 0.12);
color: var(--accent-red);
}
.hist-status-badge.status-preparing {
background: rgba(197, 168, 128, 0.18);
color: var(--accent-brown);
}
.hist-status-badge.status-out-for-delivery {
background: rgba(139, 94, 60, 0.12);
color: var(--accent-brown-hover);
}
.hist-status-badge.status-completed {
background: rgba(91, 130, 102, 0.15);
color: var(--accent-green);
}
@media (max-width: 640px) {
.history-controls {
gap: 12px;
}
.history-control-group,
.history-search {
flex: 1 1 100%;
}
.history-control-group .order-status-select {
width: 100%;
}
}
.history-full-link {
font-size: 0.78rem;
font-weight: 600;
color: var(--accent-brown);
text-decoration: none;
white-space: nowrap;
transition: color var(--transition-fast);
}
.history-full-link:hover {
color: var(--accent-brown-hover);
}
/* ---------- Order Success Modal ---------- */
.order-success-content { animation: successPop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes successPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-check {
width: 96px; height: 96px; margin: 8px auto 20px;
border-radius: 50%;
background: rgba(197, 168, 128, 0.14);
display: flex; align-items: center; justify-content: center;
}
.success-check svg { width: 62px; height: 62px; }
.success-check-circle {
stroke: var(--accent-gold); stroke-width: 2.5;
stroke-dasharray: 151; stroke-dashoffset: 151;
animation: successCircle 0.6s ease forwards;
}
.success-check-mark {
stroke: var(--accent-gold); stroke-width: 4;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 40; stroke-dashoffset: 40;
animation: successMark 0.3s 0.5s ease forwards;
}
@keyframes successCircle { to { stroke-dashoffset: 0; } }
@keyframes successMark { to { stroke-dashoffset: 0; } }
.success-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* ---------- Compact Order History on mobile ---------- */
.history-view-all-bottom {
display: block;
text-align: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-glass);
}
@media (max-width: 768px) {
/* Show ~2-3 dated rows, scroll for the rest, then the "view complete" link */
.history-list { max-height: 148px; }
}
/* ---------- Order Success: extra animation ---------- */
.success-check { position: relative; }
.success-check::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--accent-gold);
opacity: 0;
animation: successRipple 0.9s 0.25s ease-out forwards;
}
@keyframes successRipple {
0% { transform: scale(0.85); opacity: 0.55; }
100% { transform: scale(1.7); opacity: 0; }
}
/* Staggered entrance of the modal content */
#order-success-modal.open .modal-title,
#order-success-modal.open #success-order-msg,
#order-success-modal.open #success-order-id,
#order-success-modal.open .success-actions {
animation: successRise 0.5s ease both;
}
#order-success-modal.open .modal-title { animation-delay: 0.35s; }
#order-success-modal.open #success-order-msg { animation-delay: 0.45s; }
#order-success-modal.open #success-order-id { animation-delay: 0.55s; }
#order-success-modal.open .success-actions { animation-delay: 0.62s; }
@keyframes successRise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.success-check::after,
#order-success-modal.open .modal-title,
#order-success-modal.open #success-order-msg,
#order-success-modal.open #success-order-id,
#order-success-modal.open .success-actions { animation: none; }
}