/* ========================================================================= SHEFA theme + UI polish - Product status badge positioning fix (no longer overlaps name/category) - App settings dropdown (topbar) + mobile settings block - Dark theme (pure black) driven by Light mode is the default; every surface has an explicit dark counterpart so all content stays visible in both modes. ========================================================================= */ /* ---------- Product status badge (bottom-left of the card image) ---------- */ .product-card .position-relative, .farm-card .card-img-container { /* Give absolutely-positioned badges a reliable box to anchor to. */ min-height: 1px; } .product-status-badge { position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px); } .product-status-badge .badge { font-size: 0.78rem; padding: 0.4em 0.7em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); white-space: nowrap; } /* Keep the category chip clear of the status badge on very small cards. */ .product-badge { z-index: 3; } /* ---------- Topbar layout: brand left, actions right ---------- */ .shefa-topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; } .shefa-topbar-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } /* Sign In / Sign Up — text link, no filled background */ .shefa-auth-link { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0.35rem 0.5rem !important; font-weight: 600; color: var(--primary-green, #5b8c52) !important; text-decoration: none; white-space: nowrap; } .shefa-auth-link:hover { color: var(--dark-green, #40613a) !important; text-decoration: underline; } /* Mobile quick links inside the hamburger menu */ .shefa-mobile-quicklinks { border-bottom: 1px solid #eee; padding: 0.75rem 1rem 0.25rem; } .shefa-mobile-quicklinks .nav-link { padding: 0.55rem 0; font-weight: 500; } /* ---------- App settings control ---------- */ .shefa-settings-toggle { border: none; background: transparent; color: #4a4a4a; font-size: 1.15rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: 50%; transition: background 0.2s, color 0.2s, transform 0.2s; } .shefa-settings-toggle:hover { background: rgba(91, 140, 81, 0.12); color: var(--primary-green, #5b8c52); transform: rotate(20deg); } .shefa-settings-menu { min-width: 250px; border-radius: 1rem; border: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16); padding: 0.75rem; } .shefa-settings-menu .settings-title { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa0a6; padding: 0.25rem 0.5rem; } .shefa-theme-options { display: flex; gap: 0.5rem; padding: 0.35rem 0.5rem 0.15rem; } .shefa-theme-option { flex: 1 1 0; border: 2px solid #e3e6ea; border-radius: 0.75rem; background: #fff; padding: 0.6rem 0.4rem; cursor: pointer; text-align: center; font-size: 0.85rem; font-weight: 600; color: #444; transition: border-color 0.2s, background 0.2s, color 0.2s; } .shefa-theme-option i { display: block; font-size: 1.15rem; margin-bottom: 0.25rem; } .shefa-theme-option:hover { border-color: var(--primary-green, #5b8c52); } .shefa-theme-option.active { border-color: var(--primary-green, #5b8c52); background: rgba(91, 140, 81, 0.10); color: var(--primary-green, #5b8c52); } /* Mobile settings block inside the app menu */ .shefa-mobile-settings { border-top: 1px solid #eee; padding: 1rem; } .shefa-mobile-settings .settings-title { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa0a6; margin-bottom: 0.5rem; } /* ========================================================================= DARK THEME (pure black) ========================================================================= */ html[data-bs-theme="dark"] { --primary-green: #7fc06f; --light-green: #0d0d0d; --dark-green: #5b8c52; --shefa-surface: #000000; --shefa-surface-2: #1a1a1a; --shefa-card: #2a2a2a; --shefa-border: #3a3a3a; --shefa-text: #f0f0f0; --shefa-text-muted: #a6a6a6; color-scheme: dark; } html[data-bs-theme="dark"], html[data-bs-theme="dark"] body { background-color: #000 !important; color: var(--shefa-text) !important; } /* Generic surfaces — page is pure black, cards are dark grey */ html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light, html[data-bs-theme="dark"] .bg-body, html[data-bs-theme="dark"] .navbar.bg-white, html[data-bs-theme="dark"] .main-header, html[data-bs-theme="dark"] .list-group-item, html[data-bs-theme="dark"] .input-group-text, html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] section, html[data-bs-theme="dark"] .container, html[data-bs-theme="dark"] main { background-color: #000 !important; color: var(--shefa-text) !important; } html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .plan-card, html[data-bs-theme="dark"] .plan-card .card-body, html[data-bs-theme="dark"] .farm-card, html[data-bs-theme="dark"] .product-card { background-color: var(--shefa-card) !important; color: var(--shefa-text) !important; border-color: var(--shefa-border) !important; } html[data-bs-theme="dark"] .dropdown-menu:not(.shefa-settings-menu) { background-color: var(--shefa-card) !important; color: var(--shefa-text) !important; border-color: var(--shefa-border) !important; } /* The two navbars + mobile menu */ html[data-bs-theme="dark"] .navbar, html[data-bs-theme="dark"] .bottom_menu_block, html[data-bs-theme="dark"] #mobile-menu-app, html[data-bs-theme="dark"] .menu-header, html[data-bs-theme="dark"] .menu-left, html[data-bs-theme="dark"] .fixedHeader .bottom_menu_block { background-color: #000 !important; border-color: var(--shefa-border) !important; } /* Hero search cards — dark grey like other cards in dark mode */ html[data-bs-theme="dark"] .bnrbox { background-color: var(--shefa-card) !important; color: var(--shefa-text) !important; border: 1px solid var(--shefa-border); } html[data-bs-theme="dark"] .bnrbox h2 { color: var(--primary-green) !important; } html[data-bs-theme="dark"] .bnrbox .font2, html[data-bs-theme="dark"] .bnrbox p { color: var(--shefa-text-muted) !important; } html[data-bs-theme="dark"] .bnrbox .form-control { background-color: var(--shefa-surface-2) !important; color: var(--shefa-text) !important; border-color: var(--shefa-border) !important; } html[data-bs-theme="dark"] .bnrbox .btn-primary, html[data-bs-theme="dark"] .bnrbox .btn-success { color: #fff !important; } /* Kill stray white / light-grey page sections in dark mode */ html[data-bs-theme="dark"] .get-started-section, html[data-bs-theme="dark"] .get-started-section [style*="background"], html[data-bs-theme="dark"] footer, html[data-bs-theme="dark"] .footer, html[data-bs-theme="dark"] .menu-left, html[data-bs-theme="dark"] .menu-right, html[data-bs-theme="dark"] #mobile-menu-app, html[data-bs-theme="dark"] .farm-info-hover, html[data-bs-theme="dark"] [style*="background:#fff"], html[data-bs-theme="dark"] [style*="background: #fff"], html[data-bs-theme="dark"] [style*="background:#ffffff"], html[data-bs-theme="dark"] [style*="background-color:#fff"], html[data-bs-theme="dark"] [style*="background-color: #fff"], html[data-bs-theme="dark"] [style*="background-color:#ffffff"], html[data-bs-theme="dark"] [style*="background: linear-gradient(135deg, #e8f5e9"] { background: #000 !important; background-color: #000 !important; background-image: none !important; } html[data-bs-theme="dark"] .farm-info-hover { background-color: var(--shefa-card) !important; color: var(--shefa-text) !important; } html[data-bs-theme="dark"] .shefa-layout-option { background: var(--shefa-surface-2); border-color: var(--shefa-border); color: var(--shefa-text); } /* Hero / spotlight / gradient sections → neutral dark */ html[data-bs-theme="dark"] .hero, html[data-bs-theme="dark"] .spotlight-section, html[data-bs-theme="dark"] .spotlight-section2, html[data-bs-theme="dark"] .get-started-section, html[data-bs-theme="dark"] section[style*="background"], html[data-bs-theme="dark"] div[style*="background: linear-gradient"], html[data-bs-theme="dark"] div[style*="background:#fff"], html[data-bs-theme="dark"] div[style*="background: #fff"], html[data-bs-theme="dark"] .p-4[style*="background"] { background: var(--shefa-surface) !important; background-color: var(--shefa-surface) !important; background-image: none !important; } /* Text helpers */ html[data-bs-theme="dark"] .text-dark, html[data-bs-theme="dark"] .text-body, html[data-bs-theme="dark"] .text-black { color: var(--shefa-text) !important; } html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary, html[data-bs-theme="dark"] small.text-muted { color: var(--shefa-text-muted) !important; } /* Keep the brand greens legible on black */ html[data-bs-theme="dark"] .text-success, html[data-bs-theme="dark"] .navbar-brand, html[data-bs-theme="dark"] .nav-link { color: var(--primary-green) !important; } html[data-bs-theme="dark"] a { color: var(--primary-green); } /* Forms */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: var(--shefa-surface-2) !important; color: var(--shefa-text) !important; border-color: var(--shefa-border) !important; } html[data-bs-theme="dark"] .form-control::placeholder { color: #7d7d7d !important; } /* Buttons: keep solid success readable, fix outline contrast */ /* Buttons: green/success must keep white label text in dark mode */ html[data-bs-theme="dark"] .btn-success, html[data-bs-theme="dark"] .btn-primary, html[data-bs-theme="dark"] .btn-success:hover, html[data-bs-theme="dark"] .btn-success:focus, html[data-bs-theme="dark"] .btn-primary:hover, html[data-bs-theme="dark"] .btn-primary:focus, html[data-bs-theme="dark"] .signup-btn-primary, html[data-bs-theme="dark"] .signup-btn-success, html[data-bs-theme="dark"] .signup-btn-warning, html[data-bs-theme="dark"] .plan-header, html[data-bs-theme="dark"] .plan-header h4, html[data-bs-theme="dark"] .plan-header .plan-price { color: #fff !important; } html[data-bs-theme="dark"] .shefa-auth-link { color: var(--primary-green) !important; } html[data-bs-theme="dark"] .btn-outline-success { color: var(--primary-green) !important; border-color: var(--primary-green) !important; } html[data-bs-theme="dark"] .btn-outline-secondary { color: #cfcfcf !important; border-color: #4a4a4a !important; } html[data-bs-theme="dark"] .btn-light, html[data-bs-theme="dark"] .bg-light.rounded-3 { background-color: var(--shefa-surface-2) !important; color: var(--shefa-text) !important; } /* Cards / borders / dividers */ html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .shadow-sm, html[data-bs-theme="dark"] .shadow { border-color: var(--shefa-border) !important; } html[data-bs-theme="dark"] hr, html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--shefa-border) !important; } /* Dropdown items */ html[data-bs-theme="dark"] .dropdown-item { color: var(--shefa-text) !important; } html[data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--shefa-surface-2) !important; color: var(--primary-green) !important; } /* Tables */ html[data-bs-theme="dark"] table, html[data-bs-theme="dark"] .table { color: var(--shefa-text) !important; } /* Settings menu — dark grey panel in dark mode */ html[data-bs-theme="dark"] .shefa-settings-menu { background-color: #2a2a2a !important; border: 1px solid #3d3d3d !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55) !important; } html[data-bs-theme="dark"] .shefa-settings-menu .settings-title { color: #9aa0a6 !important; } html[data-bs-theme="dark"] .shefa-mobile-settings, html[data-bs-theme="dark"] .shefa-mobile-quicklinks { border-color: var(--shefa-border) !important; } /* Settings menu surfaces in dark mode */ html[data-bs-theme="dark"] .shefa-theme-option { background: var(--shefa-surface-2); border-color: var(--shefa-border); color: var(--shefa-text); } html[data-bs-theme="dark"] .shefa-settings-toggle { color: #cfcfcf; } html[data-bs-theme="dark"] #menu-toggle { color: #e8e8e8 !important; } /* Light mode page background (plans etc.) */ body { background-color: #f7fafc; } /* Category tiles / images keep their own bg but ensure captions show */ html[data-bs-theme="dark"] .cat_name, html[data-bs-theme="dark"] .farm-name, html[data-bs-theme="dark"] .card-title { color: var(--shefa-text) !important; } /* Product/category chips stay green branded */ html[data-bs-theme="dark"] .product-badge { background: var(--dark-green) !important; color: #fff !important; }