/* :root variables for the default Light Theme */ :root { --primary-color: #8B4513; /* SaddleBrown */ --secondary-color: #D2B48C; /* Tan */ --accent-color: #C0A080; --background-color: #FDFBF7; --surface-color: #FFFFFF; /* For cards, headers, etc. */ --text-color: #4A4A4A; --heading-color: #2F2F2F; --border-color: #EAEAEA; --footer-bg: #2C2C2C; --white-color: #FFFFFF; --font-family-sans-serif: 'Montserrat', sans-serif; --body-font: 'Montserrat', sans-serif; } /* Variables for the Dark Theme We will apply these by adding a class="dark" to the tag */ html.dark { --primary-color: #C0A080; /* Lighter tan for accents in dark mode */ --secondary-color: #8B4513; /* Darker brown */ --accent-color: #D2B48C; --background-color: #1A1A1A; /* Very dark grey, almost black */ --surface-color: #2C2C2C; /* Dark grey for cards and surfaces */ --text-color: #D5D5D5; /* Light grey for body text */ --heading-color: #FFFFFF; /* White for headings */ --border-color: #444444; /* Grey for borders */ --footer-bg: #111111; /* Even darker for footer */ } body { font-family: var(--body-font); background-color: var(--background-color); color: var(--text-color); line-height: 1.7; font-weight: 400; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--heading-color); } a { color: var(--primary-color); text-decoration: none; transition: all 0.3s ease; } a:hover { color: var(--accent-color); text-decoration: none; } /* --- Buttons --- */ .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--background-color); /* To have contrast in both themes */ padding: 12px 30px; font-weight: 600; border-radius: 50px; transition: all 0.3s ease-in-out; } html.dark .btn-primary { color: var(--heading-color); } .btn-primary:hover, .btn-primary:focus { background-color: var(--secondary-color); border-color: var(--secondary-color); box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-2px); } .btn-outline-primary { border-color: var(--primary-color); color: var(--primary-color); padding: 12px 30px; font-weight: 600; border-radius: 50px; } .btn-outline-primary:hover { background-color: var(--primary-color); color: var(--white-color); } /* --- Header --- */ .site-header { background-color: var(--surface-color); box-shadow: 0 2px 15px rgba(0,0,0,0.05); border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease; position: sticky; top: 0; z-index: 1020; } html.dark .site-header { box-shadow: 0 2px 15px rgba(0,0,0,0.2); } .site-header .nav-link, .site-header a { color: var(--text-color) !important; font-weight: 500; font-size: 16px; padding: 8px 12px; position: relative; } .site-header a.active, .site-header a:hover { color: var(--primary-color) !important; } .site-header .badge { background-color: var(--primary-color) !important; color: var(--background-color) !important; } html.dark .site-header .badge { color: var(--heading-color) !important; } /* --- Footer --- */ .site-footer { background-color: var(--footer-bg); color: #AFAFAF; } .site-footer h5 { color: var(--heading-color); } .site-footer a { color: #AFAFAF !important; } .site-footer a:hover { color: var(--white-color) !important; } .site-footer .border-top { border-color: var(--border-color) !important; } /* --- Product Card --- */ .product-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 15px; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 5px 20px rgba(0,0,0,0.04); } html.dark .product-card { box-shadow: 0 5px 20px rgba(0,0,0,0.15); } .product-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); } html.dark .product-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.25); } .product-card .product-image img { transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-card .product-info { padding: 20px; } .product-card .product-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: var(--heading-color); } .product-card .product-price { font-size: 1.2rem; font-weight: 700; color: var(--primary-color); } /* --- Product Page Color Swatches --- */ .color-swatches .btn-check + .btn { border: 2px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; display: inline-block; padding: 0; font-size: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .color-swatches .btn-check:checked + .btn { transform: scale(1.15); box-shadow: 0 0 0 3px var(--surface-color), 0 0 0 5px var(--primary-color); } /* Handle specific colors that need border in light mode */ .color-swatches [style*="#FFFFFF"] + label, .color-swatches [style*="#ffffff"] + label { border-color: #dedede; } html.dark .color-swatches [style*="#000000"] + label { border-color: #555; } /* --- Admin panel dark theme overrides --- */ .bg-dark { background-color: var(--background-color) !important; } .bg-dark-2 { background-color: var(--surface-color) !important; } .form-control.bg-dark { background-color: var(--background-color) !important; color: var(--text-color) !important; border-color: var(--border-color); } .form-control.bg-dark:focus { background-color: var(--background-color) !important; color: var(--text-color) !important; border-color: var(--primary-color); box-shadow: none; } /* --- Product Image Aspect Ratio --- */ .product-image { overflow: hidden; position: relative; background-color: var(--border-color); /* Placeholder bg */ aspect-ratio: 3 / 4; /* Enforce 3:4 aspect ratio */ } .product-image img { width: 100%; height: 100%; object-fit: cover; /* This will crop the image to fit */ } /* --- Responsive Design --- */ @media (max-width: 768px) { /* About Us Mobile */ #about-us .display-5 { font-size: 2rem; } #about-us .fs-5 { font-size: 1.1rem; } .display-3 { font-size: 2.5rem; } .display-4 { font-size: 2rem; } .product-card .product-info { padding: 15px; } .site-footer { text-align: center; } .site-footer .col-lg-2, .site-footer .col-lg-3, .site-footer .col-lg-4 { margin-bottom: 30px; } } /* --- Header Icon Fixes for Dark Mode --- */ /* Ensure theme toggle and other header buttons are visible in dark mode */ html.dark .site-header .btn { color: var(--text-color); /* Use the light text color from dark theme variables */ } html.dark .site-header .btn:hover { color: var(--primary-color); /* Use a hover color */ } /* Fix for bootstrap's default hamburger icon in dark mode */ html.dark .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%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Fix for the border color of the toggler button itself */ html.dark .navbar-toggler { border-color: rgba(255, 255, 255, 0.15); } @media (max-width: 767.98px) { .social-icons { justify-content: center; } } /* --- Custom Gold Button --- */ .btn-outline-gold { border-color: #D4AF37; /* Gold */ color: #D4AF37; padding: 12px 30px; font-weight: 600; border-radius: 50px; transition: all 0.3s ease-in-out; } .btn-outline-gold:hover { background-color: #D4AF37; color: var(--white-color); } html.dark .btn-outline-gold { border-color: var(--accent-color); color: var(--accent-color); } html.dark .btn-outline-gold:hover { background-color: var(--accent-color); color: var(--heading-color); } /* --- Hero Section Text --- */ .hero-section { position: relative; height: 70vh; display: flex; align-items: center; background: url('../assets/pasted-20251201-135328-2aedc448.jpg') no-repeat center center/cover; } .hero-section .container { width: 100%; text-align: center; } .hero-section .row { justify-content: flex-end; } .hero-section h1, .hero-section p { color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* --- About Us Section Text Color Fix for Dark Mode --- */ html.dark #about-us h2, html.dark #about-us p { color: var(--heading-color) !important; /* Use a light, readable color */ }