/* ========================================================= FamilyChat glass effect --------------------------------------------------------- Visual-only layer loaded last. - Adds a frosted glass lower nav - Adds softer glass surfaces to main app cards/modals - Does not change layout, sizing, or app logic ========================================================= */ :root { --fc-glass-bg: rgba(255, 255, 255, 0.58); --fc-glass-bg-strong: rgba(255, 255, 255, 0.74); --fc-glass-border: rgba(255, 255, 255, 0.72); --fc-glass-stroke: rgba(110, 91, 220, 0.12); --fc-glass-shadow: 0 24px 70px rgba(31, 34, 61, 0.16); --fc-glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.82); } body { background: radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.16), transparent 31%), radial-gradient(circle at 96% 14%, rgba(86, 140, 255, 0.12), transparent 30%), radial-gradient(circle at 88% 92%, rgba(236, 72, 153, 0.08), transparent 28%), linear-gradient(180deg, #fbfbff 0%, #f5f6ff 100%) !important; } /* Shared glass surfaces. Keep this visual-only: no spacing or size changes. */ .top-header, .smart-header, .left-sidebar, .tab-card, .settings-menu-card, .settings-detail-card, .profile-settings-card, .overview-card, .overview-card-shell, .overview-task-modal, .overview-shopping-modal, .overview-extra-list-modal, .overview-profile-modal, .bug-report-modal, .family-map-brand-pill, .family-map-reset-pill, .family-map-tracking-toggle, .weather-day-popup, .weather-forecast-popup { background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)) !important; border-color: var(--fc-glass-stroke) !important; box-shadow: var(--fc-glass-shadow), var(--fc-glass-inner-highlight) !important; backdrop-filter: blur(22px) saturate(1.35) !important; -webkit-backdrop-filter: blur(22px) saturate(1.35) !important; } /* Keep calendar day boxes and map tiles readable rather than over-glassed. */ .big-calendar-day, .family-map-preview, #familyLeafletMap, .leaflet-container { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Mobile lower navigation: main frosted glass treatment. */ @media (max-width: 820px) { .mobile-bottom-nav { isolation: isolate; overflow: hidden; background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.42) 44%, transparent 68%), linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)) !important; border: 1px solid var(--fc-glass-border) !important; box-shadow: 0 24px 62px rgba(31, 34, 61, 0.22), 0 8px 24px rgba(91, 53, 245, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(91, 53, 245, 0.08) !important; backdrop-filter: blur(30px) saturate(1.55) !important; -webkit-backdrop-filter: blur(30px) saturate(1.55) !important; } .mobile-bottom-nav::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.50), transparent 54%), radial-gradient(circle at 50% -30%, rgba(122, 92, 255, 0.16), transparent 55%); } .mobile-bottom-nav::after { content: ""; position: absolute; left: 12%; right: 12%; top: 7px; z-index: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent); } .mobile-bottom-nav > * { position: relative; z-index: 1; } .mobile-bottom-nav .side-tab { background: transparent !important; border: 1px solid transparent !important; color: rgba(89, 97, 122, 0.82) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); transition: transform 0.16s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important; } .mobile-bottom-nav .side-tab i, .mobile-bottom-nav .side-tab svg, .mobile-bottom-nav .side-tab .nav-label { color: inherit !important; } .mobile-bottom-nav .side-tab.active { background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.30) 62%), linear-gradient(135deg, rgba(118, 87, 255, 0.20), rgba(118, 87, 255, 0.08)) !important; border-color: rgba(255, 255, 255, 0.72) !important; color: #6545f4 !important; box-shadow: 0 14px 32px rgba(91, 53, 245, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(91, 53, 245, 0.10) !important; backdrop-filter: blur(14px) saturate(1.35) !important; -webkit-backdrop-filter: blur(14px) saturate(1.35) !important; } .mobile-bottom-nav .side-tab:active { transform: scale(0.96); } /* If the hide/reveal nav arrows are present, make them match the glass nav. */ .mobile-nav-collapse-button, .mobile-nav-expand-button { background: rgba(255, 255, 255, 0.58) !important; border: 1px solid rgba(255, 255, 255, 0.76) !important; box-shadow: 0 12px 30px rgba(31, 34, 61, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; backdrop-filter: blur(22px) saturate(1.45) !important; -webkit-backdrop-filter: blur(22px) saturate(1.45) !important; } } /* Desktop sidebar gets the same softer glass language without changing layout. */ @media (min-width: 821px) { .left-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56)) !important; backdrop-filter: blur(20px) saturate(1.25) !important; -webkit-backdrop-filter: blur(20px) saturate(1.25) !important; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mobile-bottom-nav, .top-header, .smart-header, .left-sidebar, .tab-card, .settings-menu-card, .settings-detail-card, .profile-settings-card, .overview-card, .overview-card-shell, .overview-task-modal, .overview-shopping-modal, .overview-extra-list-modal, .overview-profile-modal, .bug-report-modal { background: rgba(255, 255, 255, 0.90) !important; } }