/* ========================================================= Theme: Liquid Glass Activated by: Philosophy: page and inputs stay clean/readable; glass treatment applied to buttons, cards, panels, modals, and interactive accents only. ========================================================= */ /* ----- Toggle button (both themes) ----- */ .theme-toggle-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: rgba(255, 255, 255, 0.7); width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; cursor: pointer; font-size: 0.8rem; flex-shrink: 0; } .theme-toggle-btn:hover { color: var(--color-accent); border-color: var(--color-accent); background: rgba(201, 168, 76, 0.1); } body.theme-glass .theme-toggle-btn { background: rgba(201, 168, 76, 0.15); border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 8px rgba(201, 168, 76, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ========================================================= Glass theme — buttons (Liquid Glass bubbles) ========================================================= */ body.theme-glass .btn-primary { background: rgba(26, 60, 52, 0.78); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; box-shadow: 0 2px 10px rgba(26, 60, 52, 0.25); color: #fff; transition: all 0.2s; } body.theme-glass .btn-primary:hover, body.theme-glass .btn-primary:focus { background: rgba(45, 106, 79, 0.82); box-shadow: 0 4px 16px rgba(26, 60, 52, 0.3); color: #fff; } body.theme-glass .btn-outline-primary { background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border: 1px solid rgba(45, 106, 79, 0.4); border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); color: var(--color-primary); transition: all 0.2s; } body.theme-glass .btn-outline-primary:hover, body.theme-glass .btn-outline-primary:focus { background: rgba(45, 106, 79, 0.75); color: #fff; box-shadow: 0 2px 10px rgba(26, 60, 52, 0.25); } body.theme-glass .btn-secondary, body.theme-glass .btn-outline-secondary { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07); color: var(--color-primary); transition: background 0.18s, box-shadow 0.18s, border-color 0.18s, transform 0.18s; } body.theme-glass .btn-secondary:hover, body.theme-glass .btn-outline-secondary:hover { background: rgba(45, 106, 79, 0.15); border-color: rgba(45, 106, 79, 0.45); box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.2), 0 4px 14px rgba(26, 60, 52, 0.15); transform: translateY(-1px); color: var(--color-primary); } body.theme-glass .btn-danger { background: rgba(181, 52, 46, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-shadow: 0 2px 10px rgba(181, 52, 46, 0.25); color: #fff; } /* ========================================================= Glass theme — navbar ========================================================= */ body.theme-glass .navbar-bridge { backdrop-filter: blur(32px) saturate(180%) brightness(1.05) !important; -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.05) !important; border-bottom: 1px solid rgba(201, 168, 76, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(0, 0, 0, 0.15); } /* Home page — hero behind navbar, go very transparent */ body.theme-glass:has(.hero-section) .navbar-bridge { background: rgba(26, 60, 52, 0.45) !important; } /* All other pages — cream background behind navbar, stay opaque */ body.theme-glass:not(:has(.hero-section)) .navbar-bridge { background: rgba(26, 60, 52, 0.88) !important; } /* ========================================================= Glass theme — hero content panel ========================================================= */ body.theme-glass .hero-section .col-lg-8 { background: rgba(10, 28, 20, 0.38); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.22); border-radius: 20px; padding: 2.5rem 2rem !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* ========================================================= Glass theme — custom template buttons (defined in per-template