/** * Premium Glassmorphism Theme — PRUNED (design-review 2026-08, backlog #4). * * This legacy sheet once carried ~22 class families; a usage scan * (2026-08-26) found only the classes below referenced anywhere in the * templates. Everything else was dead weight on every page load and was * removed: theme-background-dark/-gradient, glass-nav, premium-transition, * hover-lift, ripple-container, glass-sidebar, glass-modal, glass-footer, * shadow-premium-sm/md/lg/xl, border-glass. * * If you need one of the removed classes back, recover it from git history * rather than re-adding the whole sheet. */ /* ============================================ CSS CUSTOM PROPERTIES (Dynamically Injected) ============================================ */ :root { /* Brand Colors (overridden by base.html's tenant :root, which loads after this sheet). Backlog #11: defaults corrected from the legacy iOS-ish palette (#007AFF/#06B6D4/#A855F7) to the real government defaults, so standalone pages that load the theme sheets without base.html's inline :root don't flash foreign colors through the --gov-* variable chains. */ --primary-color: #3B82A0; --secondary-color: #205493; --accent-color: #FBBF24; --background-color: #F1F5F9; /* Theme Aesthetic Properties */ --glass-opacity: 0.75; --glass-blur: 20px; --glass-border-opacity: 0.2; --shadow-color: rgba(0, 0, 0, 0.1); --gradient-angle: 135deg; /* Animation Properties */ --transition-speed: 300ms; --transition-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Typography */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================ GLASSMORPHIC COMPONENTS (in use) ============================================ */ /* Glass Card Effect */ .glass-card { background: linear-gradient( var(--gradient-angle), rgba(255, 255, 255, var(--glass-opacity)), rgba(255, 255, 255, calc(var(--glass-opacity) - 0.1)) ); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity)); box-shadow: 0 8px 32px 0 var(--shadow-color), inset 0 1px 0 0 rgba(255, 255, 255, 0.5); transition: all var(--transition-speed) var(--transition-easing); } .glass-card:hover { transform: translateY(-2px); box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.6); } /* Glass Button (Primary) */ .glass-button-primary { background: linear-gradient( 135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 80%, var(--secondary-color)) ); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; font-family: var(--font-body); box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: all var(--transition-speed) var(--transition-easing); position: relative; overflow: hidden; } .glass-button-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.2), transparent ); opacity: 0; transition: opacity var(--transition-speed) var(--transition-easing); } .glass-button-primary:hover::before { opacity: 1; } .glass-button-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 122, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .glass-button-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2); } /* Glass Input Fields */ .glass-input { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: none; border-bottom: 2px solid transparent; padding: 0.875rem 1rem; border-radius: 0.5rem; font-family: var(--font-body); transition: all var(--transition-speed) var(--transition-easing); outline: none; } .glass-input:focus { background: rgba(255, 255, 255, 0.95); border-bottom-color: var(--primary-color); box-shadow: 0 4px 16px rgba(0, 122, 255, 0.15), inset 0 -2px 0 var(--primary-color); } .glass-input::placeholder { color: rgba(0, 0, 0, 0.4); } /* Glass Select/Dropdown */ .glass-select { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); padding: 0.875rem 1rem; border-radius: 0.5rem; font-family: var(--font-body); transition: all var(--transition-speed) var(--transition-easing); outline: none; cursor: pointer; } .glass-select:focus, .glass-select:hover { background: rgba(255, 255, 255, 0.95); border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(0, 122, 255, 0.15); } /* ============================================ TYPOGRAPHY ENHANCEMENTS (in use) ============================================ */ .text-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .text-gradient { background: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ MODAL BACKDROP (in use) ============================================ */ .modal-backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================================ LOADING SHIMMER (in use; wins over theme-buzzrfp's by load order) ============================================ */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .loading-shimmer { animation: shimmer 2s infinite linear; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 1000px 100%; } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { :root { --glass-blur: 15px; --transition-speed: 200ms; } .glass-card { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } }