/* QuoteIron — iOS "Liquid Glass" theme layer. Active ONLY when . Every rule is scoped under html.ios-glass so the theme is fully inert by default. Brand rule (HARD): glass materials for the CHROME ONLY — top bar, tab bar, sheets, scrim, toast — via real backdrop-filter translucency, iOS radii and the SF system stack for chrome labels. CONTENT (cards / rows / tags / forms) stays EXACTLY as it is: high-contrast iron-on-zinc, never translucent. Torch orange remains the accent. Safe-area insets and prefers-reduced-motion handling from app.css are preserved (this file never overrides insets and its transitions/animations are disabled by app.css's reduced-motion rule). */ html.ios-glass { --ios-sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif; } /* ============================================================ TOP BAR — translucent dark material, hairline bottom edge. (Solid fallback here; glass upgrade in the @supports block.) ============================================================ */ html.ios-glass .topbar { background: var(--iron-950); border-bottom: 0.5px solid rgba(255, 255, 255, 0.10); } /* ============================================================ TAB BAR — translucent dark material, hairline top, SF labels, iOS active tint (torch), larger radius on the action button. ============================================================ */ html.ios-glass .tabbar { background: var(--iron-950); border-top: 0.5px solid rgba(255, 255, 255, 0.10); gap: 4px; } html.ios-glass .tab { font-family: var(--ios-sf); font-weight: 600; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--zinc-300); gap: 3px; border-radius: 12px; transition: color 0.18s ease, transform 0.18s ease; } html.ios-glass .tab__icon { font-size: 21px; line-height: 1; } /* active tab: no pill, tinted torch (icon + label) — iOS tab-bar style */ html.ios-glass .tab--current { color: var(--torch-500); background: transparent; } html.ios-glass .tab--current .tab__icon { color: var(--torch-500); } /* action button: torch, larger iOS radius, soft lift, springy press */ html.ios-glass .tab--action { font-family: var(--ios-sf); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; text-transform: none; color: var(--iron-950); background: var(--torch-500); border-radius: 18px; box-shadow: 0 2px 10px rgba(255, 79, 0, 0.30); } html.ios-glass .tab--action:active { background: var(--torch-600); transform: scale(0.95); } html.ios-glass .tab--action .tab__icon { color: inherit; } /* ============================================================ SHEET — iOS card sheet: light glass over zinc, 20px top radius, grabber handle, gentle slide-up. Scrim gets a blur. ============================================================ */ html.ios-glass .sheet { background: var(--zinc-100); border-top: none; border-radius: 20px 20px 0 0; padding-top: 28px; animation: iosSheetIn 0.30s cubic-bezier(0.32, 0.72, 0, 1); } /* grabber handle bar */ html.ios-glass .sheet::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 38px; height: 5px; border-radius: 3px; background: rgba(60, 60, 67, 0.30); z-index: 2; } @keyframes iosSheetIn { from { transform: translateY(12%); } to { transform: translateY(0); } } /* scrim: dim + blur (solid-dim fallback here, blur in @supports) */ html.ios-glass .sheetwrap__scrim { background: rgba(23, 26, 30, 0.55); } /* wide screens keep the centered-card layout from app.css, with iOS radius and a hairline instead of the heavy iron border + torch top rule. */ @media (min-width: 640px) { html.ios-glass .sheet { border-radius: 20px; border: 0.5px solid rgba(255, 255, 255, 0.16); border-top: none; } } /* ============================================================ TOAST — iOS pill material. ============================================================ */ html.ios-glass .toast { background: var(--iron-950); border: 0.5px solid rgba(255, 255, 255, 0.12); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30); } /* ============================================================ GLASS MATERIALS — applied only where backdrop-filter is supported. Everything above provides the current solid colors as the graceful fallback where it is not. ============================================================ */ @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) { html.ios-glass .topbar { background: rgba(23, 26, 30, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); } html.ios-glass .tabbar { background: rgba(23, 26, 30, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); } html.ios-glass .sheet { background: rgba(245, 247, 249, 0.80); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); } html.ios-glass .sheetwrap__scrim { /* iOS sheets dim the background but keep it legible — depth from dimming, not frost */ background: rgba(23, 26, 30, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } html.ios-glass .toast { background: rgba(23, 26, 30, 0.70); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); } }