/* ========================================================================== Libre Grow UI — 2026 Design System ========================================================================== Warm, earthy, organic. Olive green accent, cream backgrounds. For permaculture practitioners, regenerative growers, and community gardens. Dual theme via data-theme="dark" | data-theme="light" on . ========================================================================== */ /* ===== DARK THEME ===== */ [data-theme="dark"] { --lb-bg-body: #1a1c14; --lb-bg-surface: #222518; --lb-bg-panel: #262a1c; --lb-bg-panel-end: #232718; --lb-bg-elevated: #2a2e1e; --lb-bg-input: #232718; --lb-bg-input-focus: #262a1c; --lb-text: #d4d0bb; --lb-text-heading: #eee8d5; --lb-text-muted: #908c75; --lb-text-strong: #f5f0dc; --lb-text-placeholder:#5e5b49; --lb-border: rgba(148,140,100,.14); --lb-border-strong: rgba(148,140,100,.25); --lb-accent: #7cb342; --lb-accent-rgb: 124,179,66; --lb-accent-hover: #689f38; --lb-accent-on: #ffffff; --lb-accent-subtle: rgba(124,179,66,.08); --lb-accent-glow: 0 0 0 2px rgba(124,179,66,.2); --lb-link: #7cb342; --lb-link-hover: #9ccc65; --lb-link-nav: #c8c4ac; --lb-link-nav-hover: #eee8d5; --lb-danger: #ef5350; --lb-warning: #fdd835; --lb-info: #7cb342; --lb-success: #66bb6a; --lb-shadow: 0 1px 3px rgba(0,0,0,.3); --lb-shadow-sm: 0 1px 2px rgba(0,0,0,.2); --lb-radius: 10px; --lb-header-bg: #1c1e15; --lb-footer-bg: #1c1e15; --lb-body-gradient: none; --bs-body-bg: #1a1c14; --bs-body-color: #d4d0bb; --bs-border-color: rgba(148,140,100,.14); --lb-logo-filter: none; --lb-close-filter: invert(1) grayscale(1); --lb-dropdown-bg: #262a1c; --lb-dropdown-hover: #2a2e1e; --lb-dropdown-text: #d4d0bb; } /* ===== LIGHT THEME ===== */ [data-theme="light"] { --lb-bg-body: #faf6eb; --lb-bg-surface: #ffffff; --lb-bg-panel: #ffffff; --lb-bg-panel-end: #f5f0e1; --lb-bg-elevated: #f5f0e1; --lb-bg-input: #ffffff; --lb-bg-input-focus: #ffffff; --lb-text: #2d2a1e; --lb-text-heading: #1a1812; --lb-text-muted: #6b654f; --lb-text-strong: #1a1812; --lb-text-placeholder:#9c9578; --lb-border: #e5dfca; --lb-border-strong: #d4cdb4; --lb-accent: #4d771c; --lb-accent-rgb: 77,119,28; --lb-accent-hover: #3d5f16; --lb-accent-on: #ffffff; --lb-accent-subtle: rgba(77,119,28,.08); --lb-accent-glow: 0 0 0 2px rgba(77,119,28,.15); --lb-link: #4d771c; --lb-link-hover: #3d5f16; --lb-link-nav: #4a4633; --lb-link-nav-hover: #1a1812; --lb-danger: #c7372f; --lb-warning: #d4a017; --lb-info: #4d771c; --lb-success: #2e7d32; --lb-shadow: 0 1px 3px rgba(45,42,30,.08); --lb-shadow-sm: 0 1px 2px rgba(45,42,30,.05); --lb-radius: 10px; --lb-header-bg: #faf6eb; --lb-footer-bg: #f0ead6; --lb-body-gradient: none; --bs-body-bg: #faf6eb; --bs-body-color: #2d2a1e; --bs-border-color: #e5dfca; --lb-logo-filter: none; --lb-close-filter: none; --lb-dropdown-bg: #ffffff; --lb-dropdown-hover: #f5f0e1; --lb-dropdown-text: #4a4633; } /* ===== Base ===== */ .lb { background: var(--lb-bg-body); color: var(--lb-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } .lb .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .lb-main { padding: 24px 0 48px; } /* ===== Typography ===== */ .lb a:not(.btn) { color: var(--lb-link); text-decoration: none; } .lb a:not(.btn):hover { text-decoration: underline; color: var(--lb-link-hover); } .lb h1, .lb h2, .lb h3, .lb h4, .lb h5, .lb h6 { color: var(--lb-text-heading); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .lb h1 { font-size: 1.875rem; } .lb h2 { font-size: 1.5rem; } .lb h3 { font-size: 1.25rem; } .lb .text-muted { color: var(--lb-text-muted) !important; } .lb .fw-semibold, .lb .fw-bold { color: var(--lb-text-strong) !important; } .lb .text-body, .lb .text-dark, .lb .text-black { color: var(--lb-text) !important; } .lb strong, .lb b { color: var(--lb-text-strong) !important; } .lb small, .lb .small { color: var(--lb-text-muted) !important; } .lb dt, .lb dd { color: var(--lb-text) !important; } .lb ol, .lb ul, .lb li { color: var(--lb-text); } .lb .link-body-emphasis { color: var(--lb-link) !important; } .lb .link-body-emphasis:hover { color: var(--lb-link-hover) !important; } .lb .link-primary { color: var(--lb-link) !important; } .lb .link-secondary { color: var(--lb-text-muted) !important; } .lb .link-dark { color: var(--lb-text-muted) !important; } .lb .border-top { border-top-color: var(--lb-border) !important; } .lb .border-bottom { border-bottom-color: var(--lb-border) !important; } .lb .border { border-color: var(--lb-border) !important; } .lb video { background: #000; border-radius: 6px; max-width: 100%; height: auto; } /* Explore page heading */ .lb .display-5 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; } .lb .lb-heading { color: var(--lb-text-heading); } .lb .lb-lead { font-size: 1.125rem; color: var(--lb-text-muted); line-height: 1.7; } /* Explore hero */ .lb .lb-hero { border-radius: var(--lb-radius); background: linear-gradient(135deg, var(--lb-accent-subtle) 0%, transparent 60%); border: 1px solid var(--lb-border); } /* Capability icons */ .lb .lb-cap-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--lb-accent-subtle); color: var(--lb-accent); } /* Feature cards (Training / Protocols) */ .lb .lb-feature-card:hover { border-color: var(--lb-accent); } .lb .lb-feature-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; background: var(--lb-accent-subtle); color: var(--lb-accent); } /* ===== Header ===== */ .lb-header { position: sticky; top: 0; z-index: 1000; background: var(--lb-header-bg); height: 56px; border-bottom: 1px solid var(--lb-border); } .lb-header-inner { display: flex; align-items: center; gap: 1rem; height: 100%; } .lb-brand { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; height: 100%; padding: 8px 0; } .lb-brand img, .lb-brand svg { height: 32px; width: 32px; display: block; filter: var(--lb-logo-filter); } .lb-name { font-weight: 700; letter-spacing: -0.01em; color: var(--lb-text-heading); font-size: 1rem; } /* ===== Nav ===== */ .lb-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.875rem; font-weight: 500; } .lb-nav > a, .lb-nav > .dropdown > .lb-nav-link { color: var(--lb-link-nav); padding: 6px 12px; border-radius: 6px; transition: background 0.15s; text-decoration: none; cursor: pointer; } .lb-nav > a:hover, .lb-nav > .dropdown > .lb-nav-link:hover, .lb-nav > .dropdown.show > .lb-nav-link { background: var(--lb-accent-subtle); color: var(--lb-link-nav-hover); text-decoration: none; } /* Nav dropdowns */ .lb-nav .dropdown { position: relative; } .lb-nav .dropdown-toggle::after { font-size: 0.65em; vertical-align: 0.15em; margin-left: 4px; } .lb-nav .dropdown-menu { margin-top: 4px; border-radius: var(--lb-radius); border: 1px solid var(--lb-border); box-shadow: var(--lb-shadow); background: var(--lb-dropdown-bg); font-size: 0.85rem; } /* Mega menu (2-column dropdown) */ .lb-mega-menu { min-width: 360px; padding: 12px; } .lb-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .lb-mega-menu .dropdown-header { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lb-text-muted); padding: 4px 12px; } .lb-mega-menu .dropdown-item { font-size: 0.85rem; padding: 5px 12px; border-radius: 4px; } /* Drawer section headings */ .lb-drawer-section { padding: 8px 8px 2px; letter-spacing: 0.05em; } /* ===== Theme toggle ===== */ .lb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--lb-border); border-radius: 6px; padding: 6px; cursor: pointer; color: var(--lb-text-muted); transition: color 0.15s, border-color 0.15s; } .lb-theme-toggle:hover { color: var(--lb-accent); border-color: var(--lb-accent); } [data-theme="dark"] .lb-icon-sun { display: inline; } [data-theme="dark"] .lb-icon-moon { display: none; } [data-theme="light"] .lb-icon-sun { display: none; } [data-theme="light"] .lb-icon-moon { display: inline; } /* ===== Burger + Drawer (mobile) ===== */ .lb .lb-burger { display: none; margin-left: 0.5rem; background: transparent; border: 0; cursor: pointer; padding: 8px; align-items: center; justify-content: center; } .lb .lb-burger-box { width: 24px; height: 18px; position: relative; display: inline-block; } .lb .lb-burger-line, .lb .lb-burger-line::before, .lb .lb-burger-line::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--lb-text); transition: transform 0.2s ease, opacity 0.2s ease; } .lb .lb-burger-line { top: 50%; transform: translateY(-50%); } .lb .lb-burger-line::before { top: -7px; } .lb .lb-burger-line::after { top: 7px; } .lb .lb-burger.is-open .lb-burger-line { transform: rotate(45deg); } .lb .lb-burger.is-open .lb-burger-line::before { transform: rotate(-90deg) translateX(-7px); } .lb .lb-burger.is-open .lb-burger-line::after { opacity: 0; } .lb .lb-drawer { position: fixed; inset: 0; background: var(--lb-bg-surface); transform: translateY(-100%); transition: transform 0.2s ease; padding-top: 72px; padding-bottom: 24px; z-index: 999; border-top: 1px solid var(--lb-border); overflow-y: auto; -webkit-overflow-scrolling: touch; } .lb .lb-drawer.open { transform: translateY(0); } .lb .lb-drawer-close { position: absolute; top: 18px; right: 16px; background: none; border: none; cursor: pointer; font-size: 1.75rem; line-height: 1; padding: 4px 8px; color: var(--lb-text-muted); } .lb .lb-drawer-close:hover { color: var(--lb-text); } .lb .lb-drawer .container { display: flex; flex-direction: column; gap: 2px; padding-bottom: 40px; } .lb .lb-drawer a { color: var(--lb-text); padding: 10px 8px; border-bottom: 1px solid var(--lb-border); font-weight: 500; font-size: 0.875rem; } .lb body.no-scroll { overflow: hidden; } @media (min-width: 992px) { .lb .lb-burger { display: none; } .lb .lb-drawer { display: none !important; } } @media (max-width: 991.98px) { .lb .lb-nav { display: none; } .lb .lb-burger { display: inline-flex; } .lb .lb-account { display: none !important; } } /* ===== Cards ===== */ .lb .card { background: var(--lb-bg-panel); border: 1px solid var(--lb-border); border-radius: var(--lb-radius); box-shadow: var(--lb-shadow); } .lb .card-header { padding: 12px 16px; border-bottom: 1px solid var(--lb-border); font-weight: 600; font-size: 0.875rem; color: var(--lb-text-heading); background: transparent; } .lb .card-body { padding: 16px; color: var(--lb-text); } .lb .card-title { font-size: 1rem; font-weight: 600; color: var(--lb-text-heading); } .lb .metric { color: var(--lb-accent); font-weight: 700; } /* ===== Buttons ===== */ .lb .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--lb-border); background: var(--lb-bg-panel); color: var(--lb-text); font-weight: 500; font-size: 0.875rem; box-shadow: var(--lb-shadow-sm); transition: all 0.15s; } .lb .btn:hover { border-color: var(--lb-border-strong); } /* Override Bootstrap 5.3 — must set BOTH --bs-btn-* variables AND direct properties because .lb .btn (same specificity) sets background/color. */ .lb .btn-primary, .lb .btn-success, .lb .btn--primary { --bs-btn-color: var(--lb-accent-on); --bs-btn-bg: var(--lb-accent); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--lb-accent-on); --bs-btn-hover-bg: var(--lb-accent-hover); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--lb-accent-on); --bs-btn-active-bg: var(--lb-accent-hover); --bs-btn-active-border-color: transparent; --bs-btn-disabled-color: var(--lb-accent-on); --bs-btn-disabled-bg: var(--lb-accent); --bs-btn-disabled-border-color: transparent; --bs-btn-focus-shadow-rgb: var(--lb-accent-rgb); background: var(--lb-accent) !important; color: #fff !important; border-color: transparent !important; font-weight: 600; box-shadow: none; } .lb .btn-outline-secondary, .lb .btn--ghost { background: transparent; border-color: var(--lb-border); color: var(--lb-link-nav); } .lb .btn-outline-secondary:hover { background: var(--lb-bg-elevated); } .lb .btn-outline-primary { --bs-btn-color: var(--lb-accent); --bs-btn-bg: transparent; --bs-btn-border-color: var(--lb-accent); --bs-btn-hover-color: var(--lb-accent-on); --bs-btn-hover-bg: var(--lb-accent); --bs-btn-hover-border-color: var(--lb-accent); --bs-btn-active-color: var(--lb-accent-on); --bs-btn-active-bg: var(--lb-accent-hover); --bs-btn-active-border-color: var(--lb-accent-hover); --bs-btn-focus-shadow-rgb: var(--lb-accent-rgb); background: transparent !important; color: var(--lb-accent) !important; border-color: var(--lb-accent) !important; } .lb .btn-secondary { --bs-btn-bg: var(--lb-bg-elevated); --bs-btn-border-color: var(--lb-border); --bs-btn-color: var(--lb-text); --bs-btn-hover-bg: var(--lb-bg-elevated); --bs-btn-hover-border-color: var(--lb-border-strong); --bs-btn-hover-color: var(--lb-text); } .lb .btn-danger { --bs-btn-bg: var(--lb-danger); --bs-btn-color: #fff; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--lb-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; } .lb .btn-outline-info { --bs-btn-color: var(--lb-info); --bs-btn-border-color: var(--lb-info); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--lb-info); --bs-btn-hover-border-color: var(--lb-info); } .lb .btn-close { filter: var(--lb-close-filter); } .lb .btn-lg { padding: 10px 24px; font-size: 1rem; } .lb .btn-sm { padding: 5px 12px; font-size: 0.8rem; } /* ===== Lists ===== */ .lb .list-group { background: transparent; } .lb .list-group-item { background: var(--lb-bg-panel); border: 1px solid var(--lb-border); color: var(--lb-text); border-radius: var(--lb-radius); margin-bottom: 4px; } .lb .list-group-item-action:hover, .lb .list-group-item-action:focus { background: var(--lb-bg-elevated); color: var(--lb-text-strong); } .lb .list-group-item-primary { background: var(--lb-accent-subtle); border-color: var(--lb-accent); color: var(--lb-text); } /* ===== Forms ===== */ .lb input, .lb select, .lb textarea, .lb .form-control, .lb .form-select, .lb .input-group-text, body.lb input, body.lb select, body.lb textarea, body.lb .form-control, body.lb .form-select, .lb input[type="text"], .lb input[type="email"], .lb input[type="password"], .lb input[type="number"], .lb input[type="date"], body.lb input[type="text"], body.lb input[type="email"], body.lb input[type="password"] { background: var(--lb-bg-input) !important; border: 1px solid var(--lb-border) !important; color: var(--lb-text-strong) !important; border-radius: 6px; padding: 8px 12px; outline: none; font-size: 0.9rem; -webkit-text-fill-color: var(--lb-text-strong) !important; } .lb input:-webkit-autofill, .lb input:-webkit-autofill:hover, .lb input:-webkit-autofill:focus, .lb input:-webkit-autofill:active, body.lb input:-webkit-autofill, body.lb input:-webkit-autofill:hover, body.lb input:-webkit-autofill:focus, body.lb input:-webkit-autofill:active { -webkit-text-fill-color: var(--lb-text-strong) !important; -webkit-box-shadow: 0 0 0 1000px var(--lb-bg-input) inset !important; box-shadow: 0 0 0 1000px var(--lb-bg-input) inset !important; background: var(--lb-bg-input) !important; color: var(--lb-text-strong) !important; border: 1px solid var(--lb-border) !important; transition: background-color 5000s ease-in-out 0s; } .lb input:focus, .lb select:focus, .lb textarea:focus, .lb .form-control:focus, .lb .form-select:focus, body.lb input:focus, body.lb select:focus, body.lb textarea:focus, body.lb .form-control:focus, body.lb .form-select:focus { border-color: var(--lb-accent) !important; box-shadow: var(--lb-accent-glow) !important; color: var(--lb-text-strong) !important; background: var(--lb-bg-input-focus) !important; -webkit-text-fill-color: var(--lb-text-strong) !important; } .lb input::placeholder, .lb textarea::placeholder, .lb .form-control::placeholder { color: var(--lb-text-placeholder) !important; opacity: 1 !important; } .lb input:disabled, .lb select:disabled, .lb textarea:disabled, .lb .form-control:disabled, .lb .form-select:disabled, .lb input[readonly], .lb textarea[readonly], .lb .form-control[readonly] { background: var(--lb-bg-elevated) !important; color: var(--lb-text-muted) !important; opacity: 1 !important; } .lb .form-check-input { background: var(--lb-bg-input); border: 1px solid var(--lb-border); } .lb .form-check-input:checked { background-color: var(--lb-accent); border-color: var(--lb-accent); } .lb label, .lb .form-label { color: var(--lb-text-strong) !important; font-weight: 500; font-size: 0.875rem; } /* Code / pre */ .lb pre, .lb code { background: var(--lb-bg-panel-end); border: 1px solid var(--lb-border); color: var(--lb-text); border-radius: 6px; font-size: 0.85rem; } /* ===== Bootstrap surface overrides ===== */ .lb .bg-white, .lb .card.bg-white, .lb .list-group-item.bg-white, .lb pre.bg-white, .lb .dropdown-menu, .lb .modal-content, .lb .offcanvas, .lb .accordion-item, .lb .tab-content { background: var(--lb-dropdown-bg) !important; color: var(--lb-text) !important; border-color: var(--lb-border) !important; } .lb .dropdown-item { color: var(--lb-dropdown-text); } .lb .dropdown-item:hover { background: var(--lb-dropdown-hover); color: var(--lb-text-strong); } .lb .nav-tabs .nav-link { color: var(--lb-text-muted); border-color: transparent; background: transparent; border-radius: 6px 6px 0 0; } .lb .nav-tabs .nav-link.active { color: var(--lb-accent-on); background: var(--lb-accent); border-color: transparent; } /* ===== Tables ===== */ .lb table { width: 100%; } .lb thead th { color: var(--lb-text-muted); background: transparent; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--lb-border); } .lb tbody tr { border-bottom: 1px solid var(--lb-border); } .lb tbody td { padding: 10px 12px; color: var(--lb-text); } .lb tbody tr:hover { background: var(--lb-accent-subtle); } /* ===== Badges ===== */ .lb .badge { font-weight: 500; font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; } .lb .badge.bg-secondary { background-color: #4b5563 !important; color: #fff !important; } .lb .badge.bg-info { background-color: var(--lb-info) !important; color: #fff !important; } .lb .badge.bg-success { background-color: var(--lb-success) !important; color: #fff !important; } .lb .badge.bg-warning { background-color: var(--lb-warning) !important; color: #1a202c !important; } .lb .badge.bg-danger { background-color: var(--lb-danger) !important; color: #fff !important; } .lb .badge.bg-primary { background-color: var(--lb-accent) !important; color: var(--lb-accent-on) !important; } .lb .badge.bg-light { background-color: var(--lb-bg-elevated) !important; color: var(--lb-text) !important; } .lb .badge.bg-dark { background-color: #374151 !important; color: #fff !important; } /* ===== Bootstrap utility overrides ===== */ .lb .text-primary { color: var(--lb-accent) !important; } .lb .text-info { color: var(--lb-info) !important; } .lb .border-primary { border-color: var(--lb-accent) !important; } .lb .bg-primary { background-color: var(--lb-accent) !important; } .lb .bg-info { background-color: var(--lb-info) !important; } /* ===== Progress ===== */ .lb .progress { background: var(--lb-bg-panel-end); border-radius: 4px; height: 6px; } .lb .progress-bar { background: var(--lb-accent); } /* ===== Breadcrumbs ===== */ .lb .breadcrumb { --bs-breadcrumb-divider-color: var(--lb-text-muted); color: var(--lb-text-strong) !important; background: transparent; font-size: 0.875rem; } .lb .breadcrumb-item { color: var(--lb-text-strong) !important; } .lb .breadcrumb-item a { color: var(--lb-link) !important; } .lb .breadcrumb-item a:hover { color: var(--lb-link-hover) !important; text-decoration: underline; } .lb .breadcrumb-item.active { color: var(--lb-text-muted) !important; } .lb .breadcrumb-item + .breadcrumb-item::before { color: var(--lb-text-muted) !important; } /* ===== Alerts ===== */ .lb .alert { background: var(--lb-bg-panel-end); border: 1px solid var(--lb-border); color: var(--lb-text); border-radius: var(--lb-radius); } .lb .alert-success { border-color: rgba(45,212,191,.3); } .lb .alert-danger { border-color: rgba(248,113,113,.3); } .lb .alert-info { border-color: rgba(96,165,250,.3); } /* ===== Term picker ===== */ .lb .tp-results { background: var(--lb-dropdown-bg); border: 1px solid var(--lb-border); border-radius: 6px; box-shadow: var(--lb-shadow); color: var(--lb-text); max-height: 240px; overflow-y: auto; } .lb .tp-item { padding: 4px 8px; cursor: pointer; } .lb .tp-item:hover { background: var(--lb-dropdown-hover); } .lb .tp-curie-label { opacity: 0.6; } /* ===== Upload zone ===== */ .upload-zone { border: 2px dashed var(--lb-border-strong); border-radius: var(--lb-radius); background-color: var(--lb-bg-elevated); transition: all 0.15s; cursor: pointer; } .upload-zone:hover { border-color: var(--lb-accent); background-color: var(--lb-accent-subtle); } .upload-zone.border-primary { border-color: var(--lb-accent) !important; background-color: var(--lb-accent-subtle) !important; } /* ===== Status dropdown ===== */ .status-dropdown { position: absolute; background: var(--lb-dropdown-bg); border: 1px solid var(--lb-border); border-radius: 6px; box-shadow: var(--lb-shadow); z-index: 1000; min-width: 150px; } .status-dropdown-item { padding: 8px 16px; cursor: pointer; border-bottom: 1px solid var(--lb-border); color: var(--lb-text); font-size: 0.875rem; } .status-dropdown-item:last-child { border-bottom: none; } .status-dropdown-item:hover { background: var(--lb-dropdown-hover); } .status-dropdown-item.current { background: var(--lb-bg-elevated); font-weight: 600; } /* ===== Footer ===== */ .lb .lb-footer { background: var(--lb-footer-bg); border-top: 1px solid var(--lb-border); padding: 40px 0 24px; margin-top: 48px; } .lb .lb-footer a { color: var(--lb-text-muted); } .lb .lb-footer a:hover { color: var(--lb-accent); text-decoration: none; } .lb .lb-footer h6 { color: var(--lb-text-heading); } /* ===== Search typeahead ===== */ #searchSuggestions { background: var(--lb-dropdown-bg); border: 1px solid var(--lb-border); border-radius: 0 0 6px 6px; overflow: hidden; } #searchSuggestions .list-group-item { background: var(--lb-dropdown-bg); color: var(--lb-text); border-color: var(--lb-border); font-size: 0.85rem; border-radius: 0; margin-bottom: 0; } #searchSuggestions .list-group-item:hover { background: var(--lb-dropdown-hover); } /* ===== User Manual ===== */ .lb .lb-manual-wrap { display: flex; min-height: calc(100vh - 56px); } .lb .lb-manual-sidebar { width: 260px; flex-shrink: 0; background: var(--lb-bg-surface); border-right: 1px solid var(--lb-border); position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; } .lb .lb-manual-sidebar-inner { padding: 24px 16px; } .lb .lb-manual-content { flex: 1; min-width: 0; padding: 32px 48px; max-width: 900px; } .lb .lb-manual-body { } .lb .lb-manual-body h1 { font-size: 1.75rem; margin-bottom: 0.5rem; } .lb .lb-manual-body h2 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--lb-border); padding-bottom: 0.4rem; } .lb .lb-manual-body h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .lb .lb-manual-body p, .lb .lb-manual-body li { line-height: 1.75; } .lb .lb-manual-body code { padding: 2px 6px; font-size: 0.85em; background: var(--lb-bg-elevated); border: 1px solid var(--lb-border); border-radius: 4px; } .lb .lb-manual-body pre code { display: block; padding: 12px 16px; overflow-x: auto; } .lb .lb-manual-body .callout { padding: 12px 16px; border-radius: var(--lb-radius); border: 1px solid var(--lb-border); background: var(--lb-bg-elevated); margin: 1rem 0; } .lb .lb-manual-body .callout-info { border-left: 3px solid var(--lb-info); } .lb .lb-manual-body .callout-tip { border-left: 3px solid var(--lb-success); } .lb .lb-manual-body .callout-warning { border-left: 3px solid var(--lb-warning); } /* Manual sidebar nav */ .lb .lb-manual-nav-group { margin-bottom: 16px; } .lb .lb-manual-nav-heading { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lb-text-muted); padding: 4px 8px; margin-bottom: 2px; } .lb .lb-manual-nav a { display: block; padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; color: var(--lb-text-muted); text-decoration: none; transition: all 0.1s; } .lb .lb-manual-nav a:hover { color: var(--lb-text); background: var(--lb-accent-subtle); text-decoration: none; } .lb .lb-manual-nav a.active { color: var(--lb-accent); background: var(--lb-accent-subtle); font-weight: 600; } /* Manual prev/next pager */ .lb .lb-manual-pager a { font-weight: 500; } @media (max-width: 991px) { .lb .lb-manual-sidebar { display: none; } .lb .lb-manual-content { padding: 24px 16px; } } /* ===== Responsive ===== */ @media (max-width: 768px) { .lb .btn { min-height: 40px; padding: 8px 14px; } .lb .btn-sm { min-height: 34px; padding: 6px 12px; } .lb .container { padding: 0 16px; } .lb-main { padding: 16px 0 32px; } .lb h1 { font-size: 1.5rem; } .lb h2 { font-size: 1.25rem; } .lb .card { margin-bottom: 12px; } .lb .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lb video { width: 100%; height: auto; } .lb .form-control, .lb .form-select { font-size: 16px; } .lb .badge { font-size: 0.7rem; } .lb .display-5 { font-size: 1.75rem; } } @media (max-width: 480px) { .lb h1 { font-size: 1.375rem; } .lb .container { padding: 0 12px; } .lb .btn-group { flex-direction: column; width: 100%; } .lb .btn-group .btn { width: 100%; border-radius: 6px !important; margin-bottom: 4px; } .lb table .d-none-mobile { display: none !important; } } /* ===== Libre Grow — Permaculture-specific overrides ===== */ /* Serif headings for organic feel */ .lb h1, .lb h2, .lb h3, .lb h4, .lb .display-5, .lb .card-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; } /* Softer, warmer cards */ .lb .card { border-radius: 12px; box-shadow: 0 2px 8px rgba(45,42,30,.06); } /* Softer buttons */ .lb .btn { border-radius: 8px; } /* Full-bleed hero support */ .lg-hero-fullbleed { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; position: relative; }