/* ============================================================================ ShopperAI liquid glass layer — assets/css/shopperai-glass.css Lahav's "template line": translucent surfaces that refract ambient brand-coloured glows, over a faded brand pattern. Requires shopperai-tokens.css. Opt in with . ============================================================================ */ /* ── Ambient glows the glass refracts (fixed, behind everything) ─────────── */ body.sa-glass-ui { position: relative; isolation: isolate; } body.sa-glass-ui::before { content: ""; position: fixed; inset: 0; z-index: var(--sa-z-bg); pointer-events: none; background: radial-gradient(40rem 40rem at 13% 14%, var(--sa-glow-1), transparent 60%), radial-gradient(34rem 34rem at 88% 18%, var(--sa-glow-2), transparent 60%), radial-gradient(42rem 42rem at 74% 94%, var(--sa-glow-3), transparent 62%); } [dir="rtl"] body.sa-glass-ui::before { background: radial-gradient(40rem 40rem at 87% 14%, var(--sa-glow-1), transparent 60%), radial-gradient(34rem 34rem at 12% 18%, var(--sa-glow-2), transparent 60%), radial-gradient(42rem 42rem at 26% 94%, var(--sa-glow-3), transparent 62%); } /* ── Faded brand pattern: colour via mask, anchored to the START edge, natural size, tiled vertically only — never scales with the viewport ─────────────── */ .sa-bg-pattern { position: fixed; inset: 0; z-index: var(--sa-z-bg); pointer-events: none; background-color: var(--sa-bgp-color); opacity: var(--sa-bgp-opacity); -webkit-mask: url("../pattern/bg-pattern-tile.svg") left top / auto repeat-y; mask: url("../pattern/bg-pattern-tile.svg") left top / auto repeat-y; } [dir="rtl"] .sa-bg-pattern { -webkit-mask-position: right top; mask-position: right top; } .sa-bg-pattern.sa-bg-pattern--full { -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Everything else sits above the two background layers */ .sa-app, .sa-page { position: relative; z-index: var(--sa-z-app); } /* ── The glass recipe ────────────────────────────────────────────────────── */ .sa-glass, body.sa-glass-ui .sa-card, body.sa-glass-ui .sa-chart-card, body.sa-glass-ui .sa-table-card, body.sa-glass-ui .sa-panel { background-color: var(--sa-glass); border: 1px solid var(--sa-glass-border); border-radius: var(--sa-r-lg); -webkit-backdrop-filter: blur(var(--sa-glass-blur)) saturate(160%); backdrop-filter: blur(var(--sa-glass-blur)) saturate(160%); box-shadow: var(--sa-shadow), inset 0 1px 0 var(--sa-glass-hi), 0 0 0 1px var(--sa-glass-ring); transition: background-color var(--sa-t-fast), border-color var(--sa-t-fast), transform var(--sa-t-fast), box-shadow var(--sa-t-fast); } /* Liquid top sheen (42% of height) */ .sa-glass, body.sa-glass-ui .sa-card, body.sa-glass-ui .sa-chart-card, body.sa-glass-ui .sa-panel { position: relative; overflow: hidden; } .sa-glass::after, body.sa-glass-ui .sa-card::after, body.sa-glass-ui .sa-chart-card::after, body.sa-glass-ui .sa-panel::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 42%; pointer-events: none; background: linear-gradient(180deg, var(--sa-glass-sheen), transparent); } .sa-glass > *, body.sa-glass-ui .sa-card > *, body.sa-glass-ui .sa-chart-card > *, body.sa-glass-ui .sa-panel > * { position: relative; z-index: 1; } .sa-glass--flat, body.sa-glass-ui .sa-table-card { overflow: hidden; } /* tables: no sheen (would tint header rows) */ /* Solid brand-red KPI card stays solid (the one number that matters) */ body.sa-glass-ui .sa-card.sa-card--red { background-color: var(--sa-red); border-color: rgba(255,255,255,.18); box-shadow: var(--sa-shadow-red), inset 0 1px 0 rgba(255,255,255,.35); } body.sa-glass-ui .sa-card.sa-card--red::after { background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); } body.sa-glass-ui .sa-card.sa-card--red.sa-clickable:hover { background-color: var(--sa-red-hover); } /* Hover lift on clickable glass */ .sa-glass.sa-clickable:hover, body.sa-glass-ui .sa-card.sa-clickable:hover { background-color: var(--sa-glass-strong); border-color: var(--sa-glass-hi); transform: translateY(-3px); box-shadow: var(--sa-shadow-lg), inset 0 1px 0 var(--sa-glass-hi), 0 0 0 1px var(--sa-glass-ring); } /* ── Glass bars ──────────────────────────────────────────────────────────── */ body.sa-glass-ui .sa-topbar { background: var(--sa-glass); border-bottom: 1px solid var(--sa-glass-border); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } body.sa-glass-ui .sa-sidebar { background: var(--sa-glass-strong); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } .sa-bar-glass { /* mobile bottom nav / composer / banners */ background: var(--sa-bar-bg); border-top: 1px solid var(--sa-glass-border); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .sa-banner-glass { background: var(--sa-banner-bg); border: 1px solid var(--sa-glass-border); border-radius: var(--sa-r-lg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 12px 30px rgba(0,0,0,.25), inset 0 1px 0 var(--sa-glass-hi); } /* ── Glass message bubbles (chat / WhatsApp views) ───────────────────────── */ .sa-bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; border: 1px solid var(--sa-glass-border); box-shadow: 0 5px 18px rgba(0,0,0,.12), inset 0 1px 0 var(--sa-glass-hi); -webkit-backdrop-filter: blur(13px) saturate(150%); backdrop-filter: blur(13px) saturate(150%); } .sa-bubble--in { background: var(--sa-glass-strong); border-end-end-radius: 6px; margin-inline-end: auto; } .sa-bubble--out { background: linear-gradient(150deg, #F03A2C, var(--sa-red-hover)); color: #fff; border-color: rgba(255,255,255,.18); border-end-start-radius: 6px; margin-inline-start: auto; } /* ── Fallback when backdrop-filter is unsupported: go opaque, stay legible ── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sa-glass, body.sa-glass-ui .sa-card, body.sa-glass-ui .sa-chart-card, body.sa-glass-ui .sa-table-card, body.sa-glass-ui .sa-panel, body.sa-glass-ui .sa-topbar, body.sa-glass-ui .sa-sidebar, .sa-bar-glass, .sa-banner-glass, .sa-bubble--in { background: var(--sa-surface-1); } } @media (prefers-reduced-motion: reduce) { .sa-glass, body.sa-glass-ui .sa-card { transition: none; } .sa-glass.sa-clickable:hover, body.sa-glass-ui .sa-card.sa-clickable:hover { transform: none; } }