/* ============================================================ Ministry App — Liquid Glass Theme Inspired by Apple's iOS Liquid Glass / Glassmorphism Activated via: ============================================================ */ /* --- Color Palette Override --- */ [data-theme="glass"] { /* Primary: cool translucent blue-grey */ --m-primary: #1a1a2e; --m-primary-light: #3a3a5c; --m-primary-dark: #0d0d1a; /* Accent: iridescent blue-violet */ --m-gold: #7c8cf8; --m-gold-light: #a5b4fc; --m-gold-dark: #5b6abf; /* Surfaces */ --m-cream: #f0f2f8; --m-sand: #e4e7f0; --m-stone: #c8cdd9; /* Spiritual accent — soft violet */ --m-wine: #6d5dac; --m-wine-light: #8b7cc8; /* Text */ --m-text: #1a1a2e; --m-text-muted: #5a5d7a; --m-text-light: #8b8ea8; /* Functional */ --m-success: #34d399; --m-danger: #f87171; --m-warning: #fbbf24; --m-info: #60a5fa; /* Typography */ --m-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --m-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Spacing & Radius — more rounded for glass feel */ --m-radius: 16px; --m-radius-lg: 24px; --m-radius-sm: 12px; /* Glass shadows — softer, more diffused */ --m-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --m-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --m-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); /* Glass-specific variables */ --glass-bg: rgba(255, 255, 255, 0.45); --glass-bg-heavy: rgba(255, 255, 255, 0.65); --glass-bg-light: rgba(255, 255, 255, 0.25); --glass-border: rgba(255, 255, 255, 0.5); --glass-border-subtle: rgba(255, 255, 255, 0.2); --glass-blur: 20px; --glass-blur-heavy: 40px; --glass-shimmer: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.05) 100%); /* Gradients — ethereal, multi-stop */ --m-gradient-nav: linear-gradient(135deg, rgba(26, 26, 46, 0.75) 0%, rgba(58, 58, 92, 0.65) 50%, rgba(109, 93, 172, 0.55) 100%); --m-gradient-hero: linear-gradient(160deg, #0d0d1a 0%, #1a1a2e 30%, #2d2b55 60%, #6d5dac 100%); --m-gradient-gold: linear-gradient(135deg, #5b6abf 0%, #7c8cf8 50%, #a5b4fc 100%); --m-gradient-card: none; } /* --- Animated mesh background --- */ [data-theme="glass"] body { background: radial-gradient(ellipse at 20% 20%, rgba(124, 140, 248, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(109, 93, 172, 0.10) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(165, 180, 252, 0.06) 0%, transparent 60%), var(--m-cream); background-attachment: fixed; font-weight: 400; letter-spacing: 0.01em; } /* --- Glass mixin via utility --- */ [data-theme="glass"] .card, [data-theme="glass"] .auth-card, [data-theme="glass"] .dashboard-card { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border) !important; box-shadow: var(--m-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1); } [data-theme="glass"] .card:hover, [data-theme="glass"] .dashboard-card:hover { background: var(--glass-bg-heavy) !important; box-shadow: var(--m-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-4px); } /* --- Navbar: frosted glass bar --- */ [data-theme="glass"] .ministry-navbar { background: var(--m-gradient-nav) !important; backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15); } [data-theme="glass"] .ministry-navbar .navbar-brand .brand-icon { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--m-gold-light); } [data-theme="glass"] .ministry-navbar .nav-link:hover, [data-theme="glass"] .ministry-navbar .nav-link.active { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-theme="glass"] .ministry-navbar .dropdown-menu { background: var(--glass-bg-heavy); backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border: 1px solid var(--glass-border); box-shadow: var(--m-shadow-lg); } [data-theme="glass"] .ministry-navbar .dropdown-item:hover { background: rgba(124, 140, 248, 0.1); } /* --- Footer: frosted glass --- */ [data-theme="glass"] .ministry-footer { background: var(--m-gradient-nav) !important; backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border-top: 1px solid rgba(255, 255, 255, 0.15) !important; } [data-theme="glass"] .ministry-footer a { color: var(--m-gold-light); } /* --- Card header: subtle glass tint --- */ [data-theme="glass"] .card-header { background: rgba(255, 255, 255, 0.3); border-bottom: 1px solid var(--glass-border-subtle); font-family: var(--m-font-heading); } /* --- Dashboard cards: glass panels with shimmer --- */ [data-theme="glass"] .dashboard-card::before { background: var(--m-gradient-gold); opacity: 0; } [data-theme="glass"] .dashboard-card:hover::before { opacity: 1; } [data-theme="glass"] .dashboard-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--glass-shimmer); border-radius: inherit; pointer-events: none; opacity: 0.5; } /* Dashboard icon variants — glass tinted */ [data-theme="glass"] .icon-navy { background: rgba(124, 140, 248, 0.12); color: var(--m-gold); border: 1px solid rgba(124, 140, 248, 0.2); } [data-theme="glass"] .icon-gold { background: rgba(165, 180, 252, 0.12); color: var(--m-gold-light); border: 1px solid rgba(165, 180, 252, 0.2); } [data-theme="glass"] .icon-wine { background: rgba(109, 93, 172, 0.12); color: var(--m-wine-light); border: 1px solid rgba(109, 93, 172, 0.2); } [data-theme="glass"] .icon-sage { background: rgba(52, 211, 153, 0.12); color: var(--m-success); border: 1px solid rgba(52, 211, 153, 0.2); } [data-theme="glass"] .icon-sky { background: rgba(96, 165, 250, 0.12); color: var(--m-info); border: 1px solid rgba(96, 165, 250, 0.2); } [data-theme="glass"] .dashboard-card .card-icon { border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* --- Buttons: glass-style --- */ [data-theme="glass"] .btn { border-radius: var(--m-radius-sm); font-weight: 500; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-theme="glass"] .btn-primary { background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-primary-light) 100%); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 2px 8px rgba(26, 26, 46, 0.3); } [data-theme="glass"] .btn-primary:hover, [data-theme="glass"] .btn-primary:focus { background: linear-gradient(135deg, var(--m-primary-light) 0%, var(--m-gold-dark) 100%); box-shadow: 0 4px 20px rgba(124, 140, 248, 0.35); transform: translateY(-2px); } [data-theme="glass"] .btn-accent { background: var(--m-gradient-gold); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; box-shadow: 0 2px 12px rgba(124, 140, 248, 0.3); } [data-theme="glass"] .btn-accent:hover { box-shadow: 0 6px 24px rgba(124, 140, 248, 0.45); transform: translateY(-2px); color: #fff; } [data-theme="glass"] .btn-outline-primary { color: var(--m-gold); border-color: var(--m-gold); background: transparent; } [data-theme="glass"] .btn-outline-primary:hover { background: rgba(124, 140, 248, 0.1); border-color: var(--m-gold-light); color: var(--m-gold-light); box-shadow: 0 4px 16px rgba(124, 140, 248, 0.2); } [data-theme="glass"] .btn-outline-secondary { border-color: var(--glass-border); color: var(--m-text-muted); background: var(--glass-bg-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="glass"] .btn-outline-secondary:hover { background: var(--glass-bg); border-color: var(--glass-border); color: var(--m-text); } [data-theme="glass"] .btn-danger { background: linear-gradient(135deg, #ef4444, #f87171); border: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="glass"] .btn-success { background: linear-gradient(135deg, #059669, #34d399); border: 1px solid rgba(255, 255, 255, 0.15); } /* --- Forms: glass inputs --- */ [data-theme="glass"] .form-control, [data-theme="glass"] .form-select { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--m-radius-sm); color: var(--m-text); transition: all 0.3s ease; } [data-theme="glass"] .form-control:focus, [data-theme="glass"] .form-select:focus { background: var(--glass-bg-heavy); border-color: var(--m-gold); box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.2), 0 4px 16px rgba(124, 140, 248, 0.1); } [data-theme="glass"] .form-control::placeholder { color: var(--m-text-light); } [data-theme="glass"] .form-label { color: var(--m-primary-light); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; } /* --- Alerts: glass panels --- */ [data-theme="glass"] .ministry-alert { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border) !important; border-left: 4px solid transparent !important; color: var(--m-text); } [data-theme="glass"] .ministry-alert.alert-success { border-left-color: var(--m-success) !important; background: rgba(52, 211, 153, 0.08) !important; } [data-theme="glass"] .ministry-alert.alert-danger { border-left-color: var(--m-danger) !important; background: rgba(248, 113, 113, 0.08) !important; } [data-theme="glass"] .ministry-alert.alert-warning { border-left-color: var(--m-warning) !important; background: rgba(251, 191, 36, 0.08) !important; } [data-theme="glass"] .ministry-alert.alert-info { border-left-color: var(--m-info) !important; background: rgba(96, 165, 250, 0.08) !important; } /* --- Tables: glass rows --- */ [data-theme="glass"] .table thead th { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--m-gold); color: var(--m-primary-light); font-family: var(--m-font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; } [data-theme="glass"] .table tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } [data-theme="glass"] .table tbody tr:hover { background: rgba(124, 140, 248, 0.06); } /* DataTables glass overrides */ [data-theme="glass"] .dataTables_wrapper .dataTables_filter input { background: var(--glass-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--glass-border) !important; } [data-theme="glass"] .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--m-gold) !important; box-shadow: 0 0 0 3px rgba(124, 140, 248, 0.2) !important; } [data-theme="glass"] .page-item.active .page-link { background: var(--m-gradient-gold); border-color: transparent; } [data-theme="glass"] .page-link { color: var(--m-gold); background: var(--glass-bg-light); border-color: var(--glass-border-subtle); } /* --- Auth pages: glass card --- */ [data-theme="glass"] .auth-card { max-width: 440px; border: 1px solid var(--glass-border) !important; overflow: hidden; } [data-theme="glass"] .auth-card .auth-header { background: var(--m-gradient-hero); position: relative; } [data-theme="glass"] .auth-card .auth-header::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--glass-shimmer); pointer-events: none; } [data-theme="glass"] .auth-card .auth-header .auth-icon { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); } [data-theme="glass"] .auth-card .card-body { background: var(--glass-bg-heavy); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* --- Hero section: glass overlay --- */ [data-theme="glass"] .hero-section { background: var(--m-gradient-hero); position: relative; } [data-theme="glass"] .hero-section::before { background: radial-gradient(ellipse at 30% 40%, rgba(124, 140, 248, 0.2) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(165, 180, 252, 0.15) 0%, transparent 50%); } [data-theme="glass"] .hero-section .hero-cross { color: var(--m-gold-light); text-shadow: 0 0 30px rgba(124, 140, 248, 0.5); } [data-theme="glass"] .hero-section .btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* --- Dashboard welcome: glass banner --- */ [data-theme="glass"] .dashboard-welcome { background: var(--m-gradient-hero); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } [data-theme="glass"] .dashboard-welcome::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--glass-shimmer); pointer-events: none; } [data-theme="glass"] .dashboard-welcome::after { color: var(--m-gold-light); opacity: 0.06; } /* --- Badges: glass pills --- */ [data-theme="glass"] .badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); font-weight: 500; } [data-theme="glass"] .badge.bg-primary { background: rgba(124, 140, 248, 0.2) !important; color: var(--m-gold); } [data-theme="glass"] .badge.bg-success { background: rgba(52, 211, 153, 0.15) !important; color: var(--m-success); } [data-theme="glass"] .badge.bg-danger { background: rgba(248, 113, 113, 0.15) !important; color: var(--m-danger); } [data-theme="glass"] .badge.bg-warning { background: rgba(251, 191, 36, 0.15) !important; color: #92700c; } [data-theme="glass"] .badge.bg-info { background: rgba(96, 165, 250, 0.15) !important; color: var(--m-info); } /* --- Scripture popover: glass --- */ [data-theme="glass"] .scripture-popover { background: var(--glass-bg-heavy); backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border: 1px solid var(--glass-border); box-shadow: var(--m-shadow-lg); } [data-theme="glass"] .scripture-popover-title { color: var(--m-gold); } [data-theme="glass"] .scripture-popover-verse-num { color: var(--m-gold-light); } /* --- Bible styles: glass --- */ [data-theme="glass"] .bible-book-link:hover { background: var(--glass-bg); border-color: var(--m-gold); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="glass"] .bible-verse-num { color: var(--m-gold-light); } [data-theme="glass"] .bible-verse:target { background: rgba(124, 140, 248, 0.12); } /* --- Utility overrides --- */ [data-theme="glass"] .text-gold { color: var(--m-gold-light) !important; } [data-theme="glass"] .text-wine { color: var(--m-wine-light) !important; } [data-theme="glass"] .bg-cream { background-color: var(--m-cream) !important; } [data-theme="glass"] .bg-sand { background-color: var(--m-sand) !important; } [data-theme="glass"] .divider-gold { background: var(--m-gradient-gold); } /* --- Selection color --- */ [data-theme="glass"] ::selection { background: rgba(124, 140, 248, 0.3); color: var(--m-primary-dark); } /* --- Scrollbar: glass style (Webkit) --- */ [data-theme="glass"] ::-webkit-scrollbar { width: 8px; } [data-theme="glass"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="glass"] ::-webkit-scrollbar-thumb { background: rgba(124, 140, 248, 0.25); border-radius: 4px; } [data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: rgba(124, 140, 248, 0.4); } /* --- Theme toggle button --- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; padding: 0; font-size: 1rem; line-height: 1; } /* Classic theme: toggle shows glass icon */ .theme-toggle { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); } .theme-toggle:hover { background: rgba(255, 255, 255, 0.25); color: #fff; transform: scale(1.1); } /* Glass theme: toggle shows classic icon */ [data-theme="glass"] .theme-toggle { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--m-gold-light); } [data-theme="glass"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 20px rgba(124, 140, 248, 0.3); transform: scale(1.1); } /* Spin animation on click */ .theme-toggle.switching { animation: themeSpin 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @keyframes themeSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.8); } 100% { transform: rotate(360deg) scale(1); } } /* --- Smooth theme transition on all elements --- */ [data-theme="glass"] *, [data-theme="glass"] *::before, [data-theme="glass"] *::after { transition-property: background-color, background, border-color, color, box-shadow, backdrop-filter; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Exclude elements that have their own critical transitions */ [data-theme="glass"] .btn, [data-theme="glass"] .nav-link, [data-theme="glass"] .form-control, [data-theme="glass"] .form-select { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* --- Scripture Accordion: glass overrides --- */ [data-theme="glass"] #scriptureAccordion .accordion-item { border-color: var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } [data-theme="glass"] #scriptureAccordion .accordion-button { background: var(--glass-bg); color: var(--m-text); } [data-theme="glass"] #scriptureAccordion .accordion-button:not(.collapsed) { background: rgba(124, 140, 248, 0.15); color: #fff; } [data-theme="glass"] #scriptureAccordion .accordion-body { background: var(--glass-bg); color: var(--m-text); } [data-theme="glass"] #scriptureAccordion .accordion-body blockquote { border-left-color: var(--m-gold-light); } /* --- Identity Page: glass overrides --- */ [data-theme="glass"] .id-hero { background: var(--m-gradient-hero); } [data-theme="glass"] .id-hero-bg { background: radial-gradient(ellipse at 30% 30%, rgba(124, 140, 248, 0.15) 0%, transparent 55%), radial-gradient(ellipse at 70% 70%, rgba(165, 180, 252, 0.1) 0%, transparent 50%); } [data-theme="glass"] .id-hero-accent { background: var(--m-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="glass"] .id-hero-cross { color: var(--m-gold-light); text-shadow: 0 0 30px rgba(124, 140, 248, 0.4); } [data-theme="glass"] .id-hero-verse cite { color: var(--m-gold-light); } [data-theme="glass"] .id-segments { background: var(--m-cream); } [data-theme="glass"] .id-segment-visual { box-shadow: var(--m-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.3); border: 1px solid var(--glass-border); } [data-theme="glass"] .id-segment-visual:hover { box-shadow: var(--m-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-theme="glass"] .id-segment-badge { background: var(--glass-bg-heavy); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-color: var(--glass-border); color: var(--m-gold-light); } [data-theme="glass"] .id-segment-label { background: rgba(124, 140, 248, 0.1); color: var(--m-gold-light); } [data-theme="glass"] .id-segment-quote { border-left-color: var(--m-gold-light); background: rgba(124, 140, 248, 0.04); } [data-theme="glass"] .id-segment-quote cite { color: var(--m-gold-light); } [data-theme="glass"] .id-segment-features li i { color: var(--m-gold-light); } [data-theme="glass"] .id-divider { border-top-color: var(--glass-border); } [data-theme="glass"] .id-cta { background: var(--m-gradient-hero); } [data-theme="glass"] .id-cta-bg { background: radial-gradient(ellipse at 50% 50%, rgba(124, 140, 248, 0.1) 0%, transparent 60%); } [data-theme="glass"] .id-cta-cross { color: var(--m-gold-light); } [data-theme="glass"] .id-cta .btn-outline-light { color: var(--m-gold); border-color: var(--m-gold); } [data-theme="glass"] .id-cta .btn-outline-light:hover { background: rgba(124, 140, 248, 0.1); border-color: var(--m-gold-light); color: var(--m-gold-light); } [data-theme="glass"] .id-cta-footer cite { color: var(--m-gold-light); } /* --- Landing Page: glass overrides --- */ [data-theme="glass"] .landing-hero { background: var(--m-gradient-hero); } [data-theme="glass"] .landing-hero-bg { background: radial-gradient(ellipse at 25% 40%, rgba(124, 140, 248, 0.15) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(165, 180, 252, 0.1) 0%, transparent 50%); } [data-theme="glass"] .landing-hero-accent { background: var(--m-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="glass"] .landing-hero .hero-cross { color: var(--m-gold-light); text-shadow: 0 0 30px rgba(124, 140, 248, 0.4); } [data-theme="glass"] .landing-orb-1 { background: radial-gradient(circle, rgba(124, 140, 248, 0.3), transparent 70%); } [data-theme="glass"] .landing-orb-2 { background: radial-gradient(circle, rgba(165, 180, 252, 0.25), transparent 70%); } [data-theme="glass"] .landing-orb-3 { background: radial-gradient(circle, rgba(109, 93, 172, 0.3), transparent 70%); } [data-theme="glass"] .landing-hero-icon { color: rgba(165, 180, 252, 0.2); } [data-theme="glass"] .landing-features { background: var(--m-cream); } [data-theme="glass"] .landing-feature-card { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border) !important; box-shadow: var(--m-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5); } [data-theme="glass"] .landing-feature-card:hover { background: var(--glass-bg-heavy) !important; box-shadow: var(--m-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6); } [data-theme="glass"] .landing-scripture { background: var(--m-gradient-hero); } [data-theme="glass"] .landing-scripture::before { background: radial-gradient(ellipse at 50% 50%, rgba(124, 140, 248, 0.1) 0%, transparent 60%); } [data-theme="glass"] .landing-quote-icon { color: var(--m-gold-light); } [data-theme="glass"] .landing-verse cite { color: var(--m-gold-light); } [data-theme="glass"] .landing-cta { background: var(--m-cream); } [data-theme="glass"] .landing-cta .btn-outline-light { color: var(--m-gold); border-color: var(--m-gold); } [data-theme="glass"] .landing-cta .btn-outline-light:hover { background: rgba(124, 140, 248, 0.1); border-color: var(--m-gold-light); color: var(--m-gold-light); } /* --- Responsive: glass mobile nav --- */ @media (max-width: 991.98px) { [data-theme="glass"] .ministry-navbar .navbar-collapse { background: rgba(13, 13, 26, 0.85); backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--m-radius); } /* Glass app dock */ [data-theme="glass"] .mobile-dock { background: rgba(13, 13, 26, 0.88); backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border-top-color: rgba(124, 140, 248, 0.3); } [data-theme="glass"] .mobile-dock-icon.active .mobile-dock-bubble { box-shadow: 0 0 0 2px var(--glass-accent), 0 2px 8px rgba(124, 140, 248, 0.3); } [data-theme="glass"] .mobile-dock-icon.active .mobile-dock-label { color: var(--glass-accent); } /* Glass More drawer */ [data-theme="glass"] .mobile-more-drawer { background: rgba(13, 13, 26, 0.92); backdrop-filter: blur(var(--glass-blur-heavy)); -webkit-backdrop-filter: blur(var(--glass-blur-heavy)); border-top-color: rgba(124, 140, 248, 0.15); } /* Glass dashboard mobile grid - remove boxes */ [data-theme="glass"] .dashboard-card { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="glass"] .dashboard-card::before, [data-theme="glass"] .dashboard-card::after { display: none !important; } }