/* ───────────────────────────────────────────────────────────────────────── materials.css — the runnable Liquid Glass + standard-materials layer. Single source of truth for how we apply Apple's HIG Materials on the web. Import order matters: tokens first, then these classes. Follows design/apple-hig/materials.md. Dark is the default theme. ───────────────────────────────────────────────────────────────────────── */ @import "../tokens/fonts.css"; @import "../tokens/fig-tokens.css"; @import "../tokens/semantic.css"; @import "../tokens/typography.css"; /* App defaults to dark (set data-theme="dark" on ). The token file's [data-theme="dark"] block re-bases every color for dark. */ :root { color-scheme: light dark; } html[data-theme="dark"] { /* A calm dark backdrop for glass to blur against (never pure #000 flat). */ --app-bg: radial-gradient(1200px 800px at 12% -8%, rgba(0,145,255,0.10), transparent 60%), radial-gradient(1000px 700px at 108% 8%, rgba(109,124,255,0.10), transparent 55%), linear-gradient(180deg, #0b0b0d 0%, #101014 60%, #0b0b0d 100%); --surface-solid: #1c1c1e; /* opaque fallback for content cards */ --glass-bg: rgba(30,30,34,0.55); /* regular Liquid Glass, dark */ --glass-hairline: rgba(255,255,255,0.12); --glass-inner: inset 0 1px 0 rgba(255,255,255,0.10); --material-thin: rgba(40,40,44,0.45); --material-regular: rgba(32,32,36,0.72); --material-thick: rgba(28,28,30,0.92); } html[data-theme="light"] { --app-bg: radial-gradient(1200px 800px at 12% -8%, rgba(0,136,255,0.10), transparent 60%), radial-gradient(1000px 700px at 108% 8%, rgba(97,85,245,0.08), transparent 55%), linear-gradient(180deg, #f4f5f7 0%, #eceef2 60%, #f4f5f7 100%); --surface-solid: #ffffff; --glass-bg: rgba(255,255,255,0.55); --glass-hairline: rgba(255,255,255,0.7); --glass-inner: inset 0 1px 0 rgba(255,255,255,0.5); --material-thin: rgba(255,255,255,0.45); --material-regular: rgba(255,255,255,0.72); --material-thick: rgba(255,255,255,0.92); } body { margin: 0; font: var(--text-body); letter-spacing: var(--tracking-body); color: var(--text-primary); background: var(--app-bg) fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ── Liquid Glass (FUNCTIONAL layer only: nav, toolbars, tab bar, overlays) ── */ .glass { backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); background: var(--glass-bg); box-shadow: 0 0 0 0.5px var(--glass-hairline), 0 8px 24px rgba(0,0,0,0.30), var(--glass-inner); border-radius: 26px; } .glass--control { border-radius: var(--radius-control); backdrop-filter: blur(6px) saturate(1.4); -webkit-backdrop-filter: blur(6px) saturate(1.4); } .glass--prominent { background: var(--accents-blue); color: #fff; box-shadow: 0 8px 24px rgba(0,136,255,0.30), inset 0 1px 0 rgba(255,255,255,0.35); } .glass--clear { background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .glass--clear::before { /* 35% dimming layer for bright media backgrounds */ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); border-radius: inherit; z-index: -1; } /* ── Standard materials (CONTENT layer: cards, sections, KPI tiles, lists) ── */ .material { background: var(--material-regular); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-radius: 18px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 20px rgba(0,0,0,0.18); } .material--thin { background: var(--material-thin); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); } .material--thick { background: var(--material-thick); backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); } .card { /* the everyday content card = a regular material with a hairline */ background: var(--material-regular); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border: 0.5px solid var(--separator); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); } /* ── Vibrancy (legible text/fills on materials) ── */ .v-label { color: var(--text-primary); } .v-label-2 { color: var(--text-secondary); } .v-label-3 { color: var(--text-tertiary); } .v-fill { background: var(--fill-primary); } .v-fill-2 { background: var(--fill-secondary); } .hairline { border-color: var(--separator); } /* ── Controls ── */ .pill { border-radius: var(--radius-control); height: 44px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; font: var(--text-headline); border: 0.5px solid var(--separator); background: var(--fill-secondary); color: var(--text-primary); cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard); } .pill:active { transform: scale(0.97); } .pill--tint { background: var(--accents-blue); color: #fff; border-color: transparent; } /* Semantic money colors */ .amount-in { color: var(--status-success); } .amount-out { color: var(--text-primary); } .amount-neg { color: var(--status-danger); } /* ── Accessibility fallbacks (Apple: respond to these settings) ── */ @media (prefers-reduced-transparency: reduce) { .glass, .glass--control, .material, .material--thin, .material--thick, .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-solid); } } @media (prefers-contrast: more) { .glass, .material, .card { border-color: var(--separator-opaque); } .v-label-2 { color: var(--text-primary); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }