glassmorphism

# Glassmorphism Design Spec ## 4 Core Elements 1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4` 2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect 3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges 4. **Shadow** — Soft layered `box-shadow` for depth separation from background ## CSS Tokens Reference: [references/tokens.css](references/tokens.css) Use CSS custom properties from `tokens.css` for consistent theming: ```css @import 'references/tokens.css'; .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); } ``` ## Component Examples ### Card ```css .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); padding: 1.5rem; } ``` ### Navbar ```css .glass-nav { background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); border-bottom: var(--glass-border); box-shadow: var(--glass-shadow); position: sticky; top: 0; z-index: 100; } ``` ### Modal Overlay ```css .glass-modal-backdrop { background: rgba(0, 0, 0,...