/* ========== Thème Cavishop Moderne pour Vendeur ========== */ /* ✅ Variables pour personnalisation */ :root { --primary-color: #198754; /* Vert par défaut */ --secondary-color: #0d6efd; /* Bleu */ --light-bg: #f8f9fa; --dark-bg: #212529; --light-text: #ffffff; --dark-text: #343a40; } /* ✅ Thème clair par défaut */ body { background-color: var(--light-bg); font-family: 'Segoe UI', Roboto, sans-serif; color: var(--dark-text); padding-top: 70px; transition: background-color 0.3s ease, color 0.3s ease; } /* ✅ Navbar vendeur */ .navbar-vendeur { background-color: var(--primary-color); color: white; } .navbar-vendeur .nav-link, .navbar-vendeur .navbar-brand { color: #fff; } .navbar-vendeur .nav-link:hover { color: #e2e6ea; } /* ✅ Boutons personnalisés */ .btn-custom { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; border-radius: 30px; transition: 0.3s; } .btn-custom:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } /* ✅ Cartes produit */ .card-produit { border: none; border-radius: 0.5rem; box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease-in-out; } .card-produit:hover { transform: scale(1.02); } .card-produit .card-title { font-size: 1.2rem; font-weight: 600; color: #212529; } .card-produit .card-text { font-size: 0.95rem; color: #6c757d; } .prix { font-size: 1.1rem; font-weight: bold; color: var(--primary-color); } /* ✅ Footer */ .footer-vendeur { background-color: #212529; color: #adb5bd; padding: 2rem 0; text-align: center; font-size: 0.875rem; } /* ✅ Icônes sociaux */ .social-icons a { margin: 0 10px; color: #fff; font-size: 1.2rem; transition: 0.3s; } .social-icons a:hover { color: #ffc107; } /* ✅ Formulaires */ .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); } /* ✅ Titres */ h1, h2, h3 { font-weight: 600; color: var(--primary-color); } /* ✅ Responsive */ @media (max-width: 768px) { .card-produit { margin-bottom: 1.5rem; } .navbar-brand { font-size: 1.2rem; } } /* ========== Mode sombre activé sur ========== */ body.dark-mode { background-color: var(--dark-bg); color: var(--light-text); } body.dark-mode .navbar-vendeur, body.dark-mode .footer-vendeur { background-color: #000; color: var(--light-text); } body.dark-mode .card-produit { background-color: #2c2f33; color: var(--light-text); } /* ========== Témoignages et Slider ========== */ .temoignage-slider { background-color: var(--primary-color); padding: 3rem 1rem; color: white; text-align: center; animation: fadeIn 1s ease-in-out; } .temoignage { max-width: 600px; margin: auto; font-style: italic; animation: slideUp 0.8s ease; } /* ✅ Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ========== Thèmes secondaires ========== */ .theme-blue { --primary-color: #0d6efd; --secondary-color: #6610f2; } .theme-red { --primary-color: #dc3545; --secondary-color: #c82333; } .theme-purple { --primary-color: #6f42c1; --secondary-color: #5a32a3; } /* ✅ Bouton dark mode flottant */ .switch-dark { position: fixed; bottom: 20px; right: 20px; z-index: 1000; background: var(--primary-color); border: none; padding: 10px 15px; color: white; border-radius: 20px; cursor: pointer; }