/* Import Poppins font (include in of HTML) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --background: #FFFBF9; --content1: #FFFFFF; --content2: #FFF5F2; --content3: #FFE9E4; --content4: #FFD9D1; --divider: rgba(17, 17, 17, 0.15); --focus: #B74D75; --foreground: #11181C; --primary: #7B173F; --secondary: #47A9FF; --success: #17c964; --warning: #f5a524; --danger: #f31260; } body { background-color: var(--background); color: var(--foreground); font-family: 'Inter', sans-serif; } /* Navbar Styles */ .navbar { position: sticky; top: 0; /* Required for sticky to work */ z-index: 1030; /* Make sure it stays above other content */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: #fff; /* Or use your theme variable */ } .navbar-brand { color: var(--primary) !important; font-weight: 700; } .nav-link { color: var(--foreground) !important; transition: color 0.3s ease; } .nav-link:hover { color: var(--primary) !important; } .nav-link:active{ color: var(--primary) !important; font-weight: bold; } /* Button Styles */ .btn-primary { background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover { background-color: var(--focus); border-color: var(--focus); } .btn-secondary { background-color: var(--secondary); border-color: var(--secondary); } /* Card Styles */ .card { border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); } /* Banner Styles */ .banner { /* background-color: var(--content2); */ padding: 4rem 0; margin-bottom: 2rem; } /* Product Card Styles */ .product-card { height: 100%; } .product-card .card-img-top { height: 200px; object-fit: cover; } /* Form Styles */ .form-control:focus { border-color: var(--focus); box-shadow: 0 0 0 0.2rem rgba(255, 143, 125, 0.25); } /* Footer Styles */ footer { background-color: var(--content1); padding: 2rem 0; margin-top: 3rem; } /* Responsive Adjustments */ @media (max-width: 768px) { .banner { padding: 2rem 0; } .product-card .card-img-top { height: 150px; } } /* Admin Dashboard Styles */ .admin-sidebar { background-color: var(--content2); min-height: 100vh; padding: 1rem; } .admin-content { padding: 2rem; } /* Custom Utilities */ .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .border-primary { border-color: var(--primary) !important; } .btn-outline-orange { color: var(--primary); border: 2px solid var(--primary); } .btn-outline-orange:hover { background-color: var(--primary); color: #fff; } .btn-orange { background-color: var(--primary); color: #fff; border: none; padding: 0.6rem 1.2rem; border-radius: 12px; font-weight: 500; transition: background-color 0.3s ease, box-shadow 0.3s ease; font-family: 'Poppins', sans-serif; } .btn-orange:hover { background-color: var(--primary); box-shadow: 0 4px 10px rgba(255, 99, 71, 0.3); color: #fff; } .icon-primary { color: var(--primary) !important; }