/* =============================== GLOBAL LINKS ================================= */ a { text-decoration: none; color: #BF9742; transition: color 0.2s ease-in-out; } a:hover { color: #75540f; } /* =============================== NAVBAR ================================= */ .navbar { transition: all 0.3s ease-in-out; } .navbar-brand span { font-family: 'Poppins', sans-serif; letter-spacing: 0.5px; } .navbar .nav-link { font-weight: 500; color: var(--bs-body-color); transition: color 0.2s; } .navbar .nav-link:hover, .navbar .nav-link.active { color: #75540f; } .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: #BF9742; transition: width 0.3s ease-in-out; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* default (light mode) */ .logo-light { display: none !important; } .logo-dark { display: inline-block !important; } /* when dark mode is active */ [data-bs-theme="dark"] .logo-light { display: inline-block !important; } [data-bs-theme="dark"] .logo-dark { display: none !important; } .logo-dark, .logo-light { transition: opacity 0.3s ease; } /* =============================== BOOTSTRAP THEME ADAPTATION (Uses data-bs-theme on ) ================================= */ [data-bs-theme="dark"] { color-scheme: dark; --bs-body-bg: #121212; --bs-body-color: #f1f1f1; } [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } [data-bs-theme="dark"] .navbar { background-color: #121212 !important; } [data-bs-theme="dark"] .navbar .nav-link, [data-bs-theme="dark"] .navbar-brand span { color: #f1f1f1 !important; } [data-bs-theme="dark"] .dropdown-menu { background-color: #121212; border-color: #2a2a2a; } [data-bs-theme="dark"] .dropdown-item { color: #f1f1f1; } [data-bs-theme="dark"] .dropdown-item:hover { background-color: #1e1e1e; } /* =============================== FOOTER ================================= */ .footer-links { display: inline-block; margin: 10px 5px; } .footer-links a { padding: 5px 28px; color: #BF9742; border: 1px solid #BF9742; border-radius: 18px; transition: all 0.3s ease-in-out; } .footer-links a:hover { color: #75540f; background: rgba(191, 151, 66, 0.1); border-color: #75540f; } /* Dark mode footer */ [data-bs-theme="dark"] .footer-links a { color: #f1f1f1; border-color: #BF9742; } [data-bs-theme="dark"] .footer-links a:hover { color: #000; background-color: #BF9742; border-color: #BF9742; } /* =============================== BUTTONS ================================= */ .btn-brand { color: #000; border-color: #BF9742; background-color: #BF9742; transition: all 0.3s ease-in-out; } .btn-brand:hover { color: #fff; background-color: #75540f; } .btn-outline-brand { color: #75540f; border-color: #75540f; transition: all 0.3s ease-in-out; } .btn-outline-brand:hover { color: #000; background-color: #BF9742; border-color: #BF9742; } /* Dark mode button tweaks */ [data-bs-theme="dark"] .btn-outline-brand { color: #BF9742; border-color: #BF9742; } [data-bs-theme="dark"] .btn-outline-brand:hover { background-color: #BF9742; color: #000; } /* =============================== FORMS ================================= */ .form-control:focus { outline: none !important; box-shadow: none !important; border-color: #BF9742; } /* =============================== FLOATING THEME TOGGLE (BOTTOM LEFT) ================================= */ .theme-toggle { position: fixed; bottom: 20px; left: 20px; background-color: #BF9742; color: #000; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(191, 151, 66, 0.4); transition: all 0.3s ease-in-out; z-index: 1050; } .theme-toggle:hover { background-color: #75540f; color: #fff; box-shadow: 0 0 12px rgba(191, 151, 66, 0.7); } /* Dark mode toggle look (using data-bs-theme) */ [data-bs-theme="dark"] .theme-toggle { background-color: #121212; color: #f1f1f1; border: 1px solid #BF9742; } [data-bs-theme="dark"] .theme-toggle:hover { background-color: #BF9742; color: #000; } /* =============================== RESPONSIVE ================================= */ @media (max-width: 768px) { .footer-links a { padding: 4px 20px; font-size: 14px; } .theme-toggle { width: 45px; height: 45px; bottom: 15px; left: 15px; } } .text-brand { color: #BF9742; } .hero { background: linear-gradient(to bottom right, #fff8ee, #fdf6e9); } body[data-bs-theme="dark"] .hero { background: #121212; } /* ====================================== ART CARD STYLING ====================================== */ .art-card { border-radius: 14px; overflow: hidden; transition: all 0.3s ease; background: var(--bs-body-bg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } .art-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } body.dark-theme .art-card { background-color: #1e1e1e; box-shadow: 0 4px 10px rgba(255, 255, 255, 0.08); } body.dark-theme .art-card:hover { box-shadow: 0 6px 18px rgba(255, 255, 255, 0.1); } .art-image { position: relative; } .art-image img { transition: transform 0.5s ease; } .art-card:hover .art-image img { transform: scale(1.05); } .art-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); color: #fff; opacity: 0; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); text-decoration: none; font-weight: 500; transition: opacity 0.3s ease; } .art-card:hover .art-overlay { opacity: 1; } .artist-link { color: #BF9742; font-weight: 500; text-decoration: none; } .artist-link:hover { color: #75540f; text-decoration: underline; } /* ====================================== DARK MODE CARD FIX ====================================== */ [data-bs-theme="dark"] .art-card { background-color: #1c1c1c; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] .art-card:hover { box-shadow: 0 6px 18px rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .art-overlay { background: rgba(255, 255, 255, 0.05); } .text-gradient { background: linear-gradient(45deg, #ff7e5f, #feb47b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .zoom-hover { transition: transform 0.4s ease; } .zoom-hover:hover { transform: scale(1.05); } .hover-underline:hover { text-decoration: underline !important; } .fade-in { animation: fadeIn 0.8s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } /* Brand accent */ .accent-brand { accent-color: #75540f; } /* Hover effects */ .hover-glow { transition: all 0.25s ease; } .hover-glow:hover { box-shadow: 0 0 10px rgba(0, 123, 255, 0.25); transform: translateY(-1px); } /* Modern underline animation for links */ .hover-underline { position: relative; } .hover-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: currentColor; transition: width 0.25s ease; } .hover-underline:hover::after { width: 100%; } /* Optional: make checkbox slightly larger and smoother */ .form-check-input { width: 1.2em; height: 1.2em; cursor: pointer; transition: all 0.2s ease; } .form-check-input:checked { background-color: #BF9742; border-color: #BF9742; box-shadow: 0 0 4px #75540f; } .form-check-input:focus { border-color: #75540f; outline: 0; box-shadow: 0 0 0 0.25rem rgba(238, 168, 5, 0.25); } /* Subtle background for light theme */ .bg-light-subtle { background-color: rgba(245, 247, 250, 0.9); } .card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.2); transition: box-shadow 0.3s ease; } .btn-brand:hover { filter: brightness(1.1); transform: translateY(-1px); transition: all 0.2s ease; } #signupFeedback { transition: opacity 0.4s ease; opacity: 0; } #signupFeedback.show { opacity: 1; } .gradient-text { background: linear-gradient(90deg, #BF9742, #75540f 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* --- Modern Revoart Profile Styles --- */ .bg-glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); } .text-gradient { background: linear-gradient(90deg, #ff7b00, #ff006e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn-brand { background: linear-gradient(90deg, #ff7b00, #ff006e); color: #fff; border: none; transition: transform 0.2s, box-shadow 0.2s; } .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 0, 110, 0.3); } .btn-outline-secondary { border: 1px solid rgba(255, 255, 255, 0.2); color: #ccc; transition: all 0.2s ease; } .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .hover-scale:hover { transform: scale(1.05); } .border-brand { border-color: #75540f; } .brand-text { color: #75540f; } .card { transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); }