/* ================================================================= File: 04-glass.css Purpose: The "liquid glass" look. Reusable utility classes that any template or widget can apply to look part of the system. Classes: .glass - basic frosted surface .glass--strong - higher opacity (when content must be readable) .glass--dark - dark variant (e.g. over light hero images) .glass-card - glass + radius + padding + hover lift .glass-pill - small rounded glass chip (badges) .glass-divider - horizontal hairline w/ glass gradient .liquid-bg - animated low-opacity blob background layer Fallback: when backdrop-filter isn't supported, surfaces render semi-opaque white so the design never "breaks". ================================================================= */ /* Base glass surface */ .glass { background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-highlight); border-radius: var(--radius); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, 0.92); } } .glass--sm { -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%); backdrop-filter: blur(var(--glass-blur-sm)) saturate(130%); } .glass--lg { -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(150%); backdrop-filter: blur(var(--glass-blur-lg)) saturate(150%); } .glass--strong { background: var(--glass-bg-strong); } .glass--dark { background: var(--glass-bg-dark); border: 1px solid rgba(255, 255, 255, 0.10); color: #fff; box-shadow: 0 12px 40px -8px rgba(0,0,0,0.35), inset 1px 1px 0 rgba(255,255,255,0.08); } /* Reusable padded card */ .glass-card { composes: glass; /* not real CSS but documents intent */ background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-highlight); border-radius: var(--radius-lg); padding: var(--space-5); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .glass-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-lg), var(--glass-highlight); } /* Small pill / badge */ .glass-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--glass-bg-strong); border: var(--glass-border-soft); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); } /* Divider */ .glass-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), var(--c-line), rgba(255,255,255,0.7), transparent ); border: 0; margin-block: var(--space-5); } /* Animated liquid background — sits BEHIND the page, behind product surfaces. Add just inside . */ .liquid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(60% 40% at 15% 25%, rgba(11, 107, 203, 0.10), transparent 60%), radial-gradient(50% 35% at 85% 15%, rgba(201, 162, 74, 0.08), transparent 60%), radial-gradient(70% 50% at 50% 110%, rgba(11, 107, 203, 0.06), transparent 60%), var(--c-surface-0); animation: liqui-bg-drift 24s ease-in-out infinite alternate; } @keyframes liqui-bg-drift { 0% { background-position: 0 0, 100% 0, 50% 100%; } 50% { background-position: 5% 10%, 90% 5%, 55% 95%; } 100% { background-position: -5% -5%, 105% 10%, 45% 105%; } } /* Page-flow gradient canvas — a soft multi-hue field painted on , the same look as the account / cart / checkout pages. Switched on site-wide by the "Page gradient background" Theme Option, or per page via Liqui Page Options — either way it adds .liqui-page-gradient to . The body's own opaque page colour is cleared and the animated .liquid-bg layer hidden so the gradient shows through behind the cards. */ html:has(.liqui-page-gradient) { background: var(--page-flow-gradient); background-attachment: fixed; } .liqui-page-gradient { background: transparent; } .liqui-page-gradient .liquid-bg { display: none; } /* Noise overlay (very low opacity) gives that "real glass" texture. Add next to .liquid-bg if desired. */ .liquid-noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } /* Modal primitive (used by quick-view + B2B inquiry confirmations) */ .liqui-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; } /* Centre with FLEXBOX, not transform. The panel's open animation animates `transform`, so transform-based centering here gets overridden once the animation takes over — that is what pushed the panel to the bottom-right. */ .liqui-modal.is-open { display: flex; align-items: center; justify-content: center; } .liqui-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: liqui-fade-in var(--dur) var(--ease) both; } .liqui-modal__panel { position: relative; z-index: 1; width: min(960px, 92vw); max-height: 88vh; overflow-y: auto; padding: var(--space-5); background: var(--glass-bg-strong); border: var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow-lg); -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(150%); backdrop-filter: blur(var(--glass-blur-lg)) saturate(150%); animation: liqui-fade-up var(--dur-slow) var(--ease) both; } /* Liquid-glass close button. Position lives on this TWO-class selector on purpose — `.liqui-icon-btn` (05-buttons.css, loaded later) sets `position:relative`, which out-cascades a single-class `.liqui-modal__close` rule and drops the button back into the top-left corner. (0,2,0) wins. */ .liqui-modal .liqui-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); left: auto; z-index: 2; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--c-ink); cursor: pointer; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .liqui-modal .liqui-modal__close:hover { background: rgba(255, 255, 255, 0.72); transform: scale(1.08); } .liqui-modal .liqui-modal__close:active { transform: scale(0.95); } html.is-modal-open { overflow: hidden; } /* Quick-view layout — just the content grid INSIDE the modal panel. No card of its own (the panel is the card) and no padding of its own (the panel already provides it) — otherwise it reads as a box-in-a-box. */ .liqui-quick-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; } @media (max-width: 768px) { .liqui-quick-view { grid-template-columns: 1fr; } } .liqui-quick-view__media { background: var(--c-surface-1); border-radius: var(--radius); padding: var(--space-4); position: relative; } /* Inner glass highlight pseudo for product cards / heroes — gives a subtle light-from-top-left lens edge. Apply to anything with .has-lens. */ .has-lens { position: relative; } .has-lens::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.05) 100%); mix-blend-mode: overlay; }