/* ============================================== LIQUID GLASS DESIGN SYSTEM Main Entry Point Import order matters: 1. Tokens (design primitives) 2. Base (reset and defaults) 3. Components (UI elements) 4. Utilities (helper classes) ============================================== */ /* ------------------------------------------ TOKENS ------------------------------------------ */ /* ============================================== COLOR TOKENS Liquid Glass Design System Key insight: Fills are almost invisible. The edge and blur do the work. ============================================== */ :root { /* ------------------------------------------ GLASS FILLS Near-invisible, GRADED toward the light: brighter upper-left, falling off at 135deg. Use only in background: shorthand (these are images, not colors). ------------------------------------------ */ --glass-fill-clear: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 65%); --glass-fill-subtle: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); --glass-fill-light: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); --glass-fill-medium: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.08) 65%); --glass-fill-solid: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.13) 65%); /* Default for most glass elements */ --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* ------------------------------------------ EDGE SYSTEM Borders define shape ONLY. The luminous lip lives in the shadow rim tokens (--shadow-rim-*), not in the border. ------------------------------------------ */ --edge-glow: rgba(255, 255, 255, 0.4); --edge-glow-subtle: rgba(255, 255, 255, 0.34); --edge-glow-bright: rgba(255, 255, 255, 0.5); --edge-glow-intense: rgba(255, 255, 255, 0.65); /* ------------------------------------------ ACTIVE STATE FILLS Solid fills for selected/pressed states. These ARE visible - contrast with glass. ------------------------------------------ */ --fill-active-white: rgba(255, 255, 255, 0.92); --fill-active-gold: rgba(212, 175, 55, 0.95); --fill-active-blue: rgba(0, 122, 255, 0.95); --fill-active-green: rgba(52, 199, 89, 0.95); --fill-active-red: rgba(255, 59, 48, 0.95); --fill-active-orange: rgba(255, 149, 0, 0.95); --fill-active-purple: rgba(175, 82, 222, 0.95); --fill-active-teal: rgba(0, 199, 190, 0.95); /* ------------------------------------------ SEMANTIC COLORS For status badges and indicators only. Glass elements stay white/transparent. ------------------------------------------ */ --color-primary: rgba(212, 175, 55, 0.95); --color-success: rgba(52, 199, 89, 0.95); --color-warning: rgba(255, 149, 0, 0.95); --color-error: rgba(255, 59, 48, 0.95); --color-info: rgba(0, 122, 255, 0.95); --color-premium: rgba(212, 175, 55, 0.95); /* ------------------------------------------ TEXT COLORS White hierarchy on dark/blurred backgrounds. High contrast for legibility. ------------------------------------------ */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.5); --text-placeholder: rgba(255, 255, 255, 0.4); --text-disabled: rgba(255, 255, 255, 0.25); /* For active/solid fill states */ --text-inverse: rgba(0, 0, 0, 0.9); --text-inverse-secondary: rgba(0, 0, 0, 0.6); /* ------------------------------------------ ICON COLORS Icons inherit text color by default. Always white on glass elements. ------------------------------------------ */ --icon-primary: rgba(255, 255, 255, 0.95); --icon-secondary: rgba(255, 255, 255, 0.7); --icon-tertiary: rgba(255, 255, 255, 0.5); } /* ============================================== TYPOGRAPHY TOKENS Liquid Glass Design System ============================================== */ :root { /* ------------------------------------------ FONT FAMILIES ------------------------------------------ */ --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; /* ------------------------------------------ FONT SIZES 15px base for mobile readability ------------------------------------------ */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 17px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 40px; /* ------------------------------------------ FONT WEIGHTS ------------------------------------------ */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ------------------------------------------ LINE HEIGHTS ------------------------------------------ */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* ------------------------------------------ LETTER SPACING ------------------------------------------ */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; --letter-spacing-caps: 0.1em; } /* ============================================== SPACING TOKENS Liquid Glass Design System 4px base unit ============================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; } /* ============================================== BORDER RADIUS TOKENS Liquid Glass Design System Two shape types only: - Circles: Single-action atomic elements - Pills: Containers and compound elements No small-radius rectangles. Everything soft. ============================================== */ :root { /* ------------------------------------------ SHAPE RADII Generous curves, never sharp. ------------------------------------------ */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --radius-3xl: 32px; /* Full radius for circles and pills */ --radius-pill: 9999px; --radius-circle: 50%; /* ------------------------------------------ SEMANTIC RADII Use these for consistency. ------------------------------------------ */ /* Atomic buttons (icon-only, single action) */ --radius-button-icon: 50%; /* Text buttons and inputs */ --radius-button: 9999px; --radius-input: 24px; /* Cards and panels */ --radius-card: 28px; --radius-panel: 32px; /* Tiles (square interactive) */ --radius-tile: 24px; } /* ============================================== SHADOW TOKENS Liquid Glass Design System DIRECTIONAL LIGHT: one source, upper-left. The edge is a LIP, not a stroke: a soft inset rim brightest on the lit side, with a faint counter-rim where light exits lower-right. Two offset blurred insets overlap at the corners - that overlap is what reads as a lip. No omnidirectional glow: luminosity lives in the rim, never in a halo. ============================================== */ :root { /* ------------------------------------------ LIT RIM Blurred inset from the upper-left. ------------------------------------------ */ --shadow-rim-lit-subtle: inset 1px 1px 1px rgba(255, 255, 255, 0.4); --shadow-rim-lit: inset 1px 1px 1px rgba(255, 255, 255, 0.55); --shadow-rim-lit-strong: inset 1.5px 1.5px 1.5px rgba(255, 255, 255, 0.62); /* ------------------------------------------ COUNTER RIM Faint light exiting the lower-right edge. Always dimmer than the lit rim. ------------------------------------------ */ --shadow-rim-counter-subtle: inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14); --shadow-rim-counter: inset -0.5px -0.75px 1px rgba(255, 255, 255, 0.2); --shadow-rim-counter-strong: inset -1px -1px 1.5px rgba(255, 255, 255, 0.24); /* ------------------------------------------ SPECULAR HAIRLINE A crisp 1px inner stroke, even all round. This is the clean-cut lip: it draws the sharp perimeter the blurred rim alone lacks. Keep it thin and low-alpha so it reads as a cut edge catching light, not a bright outline. ------------------------------------------ */ --shadow-rim-spec-subtle: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-rim-spec: inset 0 0 0 1px rgba(255, 255, 255, 0.12); --shadow-rim-spec-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.16); /* ------------------------------------------ CAST SHADOW Wide, soft lift off the background. ------------------------------------------ */ --shadow-relief-cast: 0 6px 18px rgba(0, 0, 0, 0.22); --shadow-relief-cast-strong: 0 10px 28px rgba(0, 0, 0, 0.28); /* ------------------------------------------ PRESSED STATE Inverted relief - pressed INTO glass; the shadow falls in from the lit side. ------------------------------------------ */ --shadow-pressed: inset 2px 3px 4px rgba(0, 0, 0, 0.18), inset -1px -1px 2px rgba(0, 0, 0, 0.08); /* ------------------------------------------ COMPOSITE SHADOWS Pre-combined for common use cases. ------------------------------------------ */ /* Subtle glass - for nested/secondary elements (cards, buttons, inputs) */ --shadow-glass-subtle: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); /* Standard glass element (tiles, panels) */ --shadow-glass: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 1px 1px 1px rgba(255, 255, 255, 0.55), inset -0.5px -0.75px 1px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.22); /* Elevated glass (modals, overlays) */ --shadow-glass-elevated: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 1.5px 1.5px 1.5px rgba(255, 255, 255, 0.62), inset -1px -1px 1.5px rgba(255, 255, 255, 0.24), 0 10px 28px rgba(0, 0, 0, 0.28); /* Pressed/active state - PRESSED INTO GLASS */ --shadow-glass-pressed: inset 2px 3px 4px rgba(0, 0, 0, 0.18), inset -1px -1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.1); /* ------------------------------------------ ICON RELIEF Drop shadows for embossed icon effect. Use with filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); ------------------------------------------ */ --icon-relief: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); --icon-relief-subtle: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* ============================================== BLUR TOKENS Liquid Glass Design System Strong blur is essential. The reference uses aggressive blur (25-40px) with saturation boost to keep background colors vibrant. ============================================== */ :root { /* ------------------------------------------ BLUR AMOUNTS Err on the side of more blur, not less. ------------------------------------------ */ --blur-subtle: 16px; --blur-regular: 20px; --blur-strong: 30px; --blur-intense: 50px; /* ------------------------------------------ SATURATION + BRIGHTNESS Gaussian blur preserves brightness and chroma -- averaging bright pixels stays bright -- so light backdrop colours can only be muted here, in the transfer: moderate saturation (was a 180% boost) plus a slight dim so pale regions stop punching through the glass. ------------------------------------------ */ --saturation-boost: 120%; --backdrop-brightness: 0.92; /* ------------------------------------------ COMPOSITE BACKDROP FILTERS Pre-combined for consistency. Always include -webkit- prefix. Mirror any change in scripts/ generate-hero-frost.mjs (the TV bake). ------------------------------------------ */ /* Standard glass blur */ --backdrop-glass: blur(20px) saturate(120%) brightness(0.92); /* Subtle blur for secondary elements */ --backdrop-glass-subtle: blur(16px) saturate(120%) brightness(0.92); /* Strong blur for panels/modals */ --backdrop-glass-strong: blur(30px) saturate(120%) brightness(0.92); } /* ============================================== EDGE TOKENS Liquid Glass Design System Borders define SHAPE only - low-alpha hairlines. The luminous lip is drawn by the shadow rim tokens (--shadow-rim-*); a bright uniform border reads as an outline, not glass. ============================================== */ :root { /* ------------------------------------------ EDGE WIDTHS Thicker than typical borders. Must be visible to create glass effect. ------------------------------------------ */ --edge-width-hairline: 1px; --edge-width-thin: 1.5px; --edge-width: 2px; --edge-width-thick: 2.5px; /* ------------------------------------------ COMPOSITE EDGES Pre-combined border shorthand. ------------------------------------------ */ /* Standard glass edge */ --edge-glass: 1px solid rgba(255, 255, 255, 0.4); /* Hairline edge for nested/secondary elements (cards, buttons, inputs) */ --edge-glass-hairline: 1px solid rgba(255, 255, 255, 0.34); /* Subtle edge for standalone secondary elements (tiles, visual cards) */ --edge-glass-subtle: 1px solid rgba(255, 255, 255, 0.34); /* Bright edge for primary/focused elements */ --edge-glass-bright: 1.5px solid rgba(255, 255, 255, 0.5); /* Intense edge for hero elements */ --edge-glass-intense: 1.5px solid rgba(255, 255, 255, 0.65); } /* ============================================== ANIMATION TOKENS Liquid Glass Design System Apple's secret: spring physics, not linear. Things have mass and momentum. ============================================== */ :root { /* ------------------------------------------ EASING FUNCTIONS Spring-inspired curves - never use linear ------------------------------------------ */ /* Standard deceleration - most UI uses this */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Smooth both ends - repositioning, view transitions */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Overshoot and settle - interactive feedback */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Playful bounce - attention-grabbing */ --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1); /* Legacy alias */ --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* Default for most transitions */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* ------------------------------------------ DURATIONS ------------------------------------------ */ --duration-instant: 100ms; /* Micro-feedback (opacity, color) */ --duration-fast: 200ms; /* Quick responses (button press) */ --duration-normal: 300ms; /* Standard transitions (page, modal) */ --duration-slow: 500ms; /* Deliberate motion (drawer, sheet) */ --duration-dramatic: 800ms; /* Attention-grabbing (onboarding) */ /* ------------------------------------------ COMPOSITE TRANSITIONS Pre-built for common patterns ------------------------------------------ */ /* Standard glass transition - covers all interactive properties */ --transition-glass: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1); /* Quick state changes */ --transition-instant: 100ms cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1); --transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================== FOCUS TOKENS Liquid Glass Design System On TV, focus IS the cursor. It must be unmistakable from 10 feet away. ============================================== */ :root { /* ------------------------------------------ FOCUS RING Visible indicator for keyboard/remote nav ------------------------------------------ */ --focus-ring-width: 3px; --focus-ring-offset: 4px; --focus-ring-color: rgba(255, 255, 255, 0.9); --focus-ring-glow: 0 0 20px rgba(255, 255, 255, 0.4); /* TV needs stronger indicators */ --focus-ring-width-tv: 4px; --focus-ring-offset-tv: 6px; /* ------------------------------------------ FOCUS SCALE Focused elements lift slightly ------------------------------------------ */ --focus-scale: 1.02; /* Subtle lift */ --focus-scale-card: 1.03; /* Cards get more emphasis */ --focus-scale-hero: 1.05; /* Hero elements pop */ /* ------------------------------------------ TOUCH TARGETS Minimum sizes for comfortable interaction ------------------------------------------ */ --touch-target-min: 44px; /* Apple HIG minimum */ --touch-target-tablet: 48px; --touch-target-tv: 56px; /* Larger for remote precision */ } /* ------------------------------------------ TV BREAKPOINT OVERRIDES Stronger focus for 10-foot viewing ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { :root { --focus-ring-width: 4px; --focus-ring-offset: 6px; --touch-target-min: 56px; } } /* ============================================== Z-INDEX TOKENS Liquid Glass Design System ============================================== */ :root { --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* ------------------------------------------ BASE ------------------------------------------ */ /* ============================================== CSS RESET Liquid Glass Design System ============================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } /* ============================================== BODY STYLES Liquid Glass Design System ============================================== */ html, body { height: 100%; overflow: hidden; overscroll-behavior-y: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.95); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent overscroll bounce on iOS */ overscroll-behavior: none; /* Safe area for notched devices */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ------------------------------------------ COMPONENTS ------------------------------------------ */ /* ============================================== GLASS TILE Square interactive element with icon and label. Use for grid-based navigation (home screens). KEY: Almost invisible fill, subtle border, tiny upper-left highlight. The backdrop blur does most of the work. ============================================== */ .glass-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; aspect-ratio: 1; /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* Frosted glass blur - this is the main effect */ backdrop-filter: blur(20px) saturate(120%) brightness(0.92); -webkit-backdrop-filter: blur(20px) saturate(120%) brightness(0.92); /* Pronounced bezel border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 24px; /* Raised relief - full 3D glass effect */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 1px 1px 1px rgba(255, 255, 255, 0.55), inset -0.5px -0.75px 1px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.22); /* White text/icons only */ color: rgba(255, 255, 255, 0.95); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; font-size: 13px; font-weight: 500; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; /* Smooth transitions */ transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ------------------------------------------ HOVER STATE Slightly brighter fill and border. ------------------------------------------ */ .glass-tile:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 1.5px 2.5px 3px rgba(255, 255, 255, 0.5), inset -1px -1.5px 2.5px rgba(255, 255, 255, 0.14), 0 6px 16px rgba(0, 0, 0, 0.18); } /* ------------------------------------------ FOCUS STATE (Keyboard/Remote) Must be visible from 10 feet on TV. ------------------------------------------ */ .glass-tile:focus { outline: none; } .glass-tile:focus-visible { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.3); outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 4px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), inset 1.5px 2.5px 3px rgba(255, 255, 255, 0.5), inset -1px -1.5px 2.5px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.2); transform: scale(1.02); } /* ------------------------------------------ ACTIVE/PRESSED STATE Scale down, slightly brighter. ------------------------------------------ */ .glass-tile:active { transform: scale(0.95); background: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.08) 65%); border-color: rgba(255, 255, 255, 0.25); box-shadow: inset 2px 3px 4px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1); transition-duration: 100ms; } /* ------------------------------------------ SELECTED STATE (White) Solid fill - maximum contrast with glass. ------------------------------------------ */ .glass-tile.selected { background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.9); box-shadow: inset 1.5px 2.5px 3px rgba(255, 255, 255, 0.9), inset -1px -1.5px 2.5px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.2); } .glass-tile.selected .tile-icon { color: rgba(0, 0, 0, 0.9); filter: none; } /* ------------------------------------------ COLOR VARIANTS For semantic/accent selections. ------------------------------------------ */ .glass-tile.selected-gold { background: rgba(212, 175, 55, 0.95); border-color: rgba(255, 200, 80, 0.4); color: #fff; } .glass-tile.selected-blue { background: rgba(0, 122, 255, 0.95); border-color: rgba(100, 170, 255, 0.4); color: #fff; } .glass-tile.selected-green { background: rgba(52, 199, 89, 0.95); border-color: rgba(100, 220, 130, 0.4); color: #fff; } /* ------------------------------------------ TILE ICON White, sized for touch targets. Relief effect makes icons appear embossed. ------------------------------------------ */ .tile-icon { width: 44px; height: 44px; color: inherit; fill: currentColor; flex-shrink: 0; /* Raised relief - icon appears embossed from glass */ filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } .tile-icon.sm { width: 32px; height: 32px; } .tile-icon.lg { width: 56px; height: 56px; } /* ------------------------------------------ TILE LABEL ------------------------------------------ */ .tile-label { line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================== GLASS CARD Horizontal list item for navigation. Use in scrollable lists and menus. KEY: Almost invisible fill, subtle border, tiny upper-left highlight. ============================================== */ .glass-card { display: flex; align-items: center; gap: 12px; padding: 20px 24px; /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* Frosted glass blur */ /* Subtle uniform border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 28px; /* Subtle glass shadow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); /* White text */ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; color: rgba(255, 255, 255, 0.95); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ------------------------------------------ HOVER STATE ------------------------------------------ */ .glass-card:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.35), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.12); } /* ------------------------------------------ FOCUS STATE (Keyboard/Remote) Must be visible from 10 feet on TV. ------------------------------------------ */ .glass-card:focus { outline: none; } .glass-card:focus-visible { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.24); outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 4px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), inset 1px 1.5px 2px rgba(255, 255, 255, 0.4), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.15); transform: scale(1.03); } /* ------------------------------------------ ACTIVE/PRESSED STATE ------------------------------------------ */ .glass-card:active { transform: scale(0.98); background: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.08) 65%); box-shadow: inset 1.5px 2px 3px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08); transition-duration: 100ms; } /* ------------------------------------------ CARD ICON Raised relief - icon appears embossed. ------------------------------------------ */ .card-icon { width: 36px; height: 36px; flex-shrink: 0; color: rgba(255, 255, 255, 0.95); fill: currentColor; /* Raised relief - icon appears embossed from glass */ filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } /* ------------------------------------------ CARD CONTENT Uses gap for title/subtitle spacing (gap-only contract) ------------------------------------------ */ .card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; } .card-title { font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.95); } .card-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.7); } /* ------------------------------------------ CARD BADGE Solid fill - stands out from glass. ------------------------------------------ */ .card-badge { background: rgba(212, 175, 55, 0.95); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 9999px; } .card-badge.success { background: rgba(52, 199, 89, 0.95); } .card-badge.info { background: rgba(0, 122, 255, 0.95); } .card-badge.warning { background: rgba(255, 149, 0, 0.95); } .card-badge.error { background: rgba(255, 59, 48, 0.95); } /* ------------------------------------------ CARD CHEVRON Subtle relief for secondary icons. ------------------------------------------ */ .card-chevron { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.5); fill: currentColor; flex-shrink: 0; /* Subtle relief for secondary icons */ filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* ============================================== GLASS BUTTON Action buttons in two forms: - Pill: Text buttons (default) - Circle: Icon-only buttons KEY: Almost invisible fill, subtle border, tiny upper-left highlight. Backdrop blur does most of the work. ============================================== */ .glass-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; min-height: 44px; /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* Frosted glass blur */ /* Subtle uniform border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 9999px; /* Subtle glass shadow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); /* White text */ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.95); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ------------------------------------------ HOVER STATE ------------------------------------------ */ .glass-button:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.35), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.12); } /* ------------------------------------------ FOCUS STATE (Keyboard/Remote) Must be visible from 10 feet on TV. ------------------------------------------ */ .glass-button:focus { outline: none; } .glass-button:focus-visible { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.24); outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 4px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), inset 1px 1.5px 2px rgba(255, 255, 255, 0.4), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.15); transform: scale(1.02); } /* ------------------------------------------ ACTIVE/PRESSED STATE ------------------------------------------ */ .glass-button:active { transform: scale(0.96); background: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.08) 65%); box-shadow: inset 1.5px 2px 3px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08); transition-duration: 100ms; } /* ------------------------------------------ DISABLED STATE ------------------------------------------ */ .glass-button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* ------------------------------------------ PRIMARY VARIANT Solid gold fill - the main CTA. Use sparingly, one per screen. ------------------------------------------ */ .glass-button.primary { background: rgba(212, 175, 55, 0.95); border-color: rgba(255, 200, 80, 0.3); color: #fff; box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.3), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.15); } .glass-button.primary:hover { background: rgba(230, 190, 60, 0.95); border-color: rgba(255, 215, 100, 0.4); } .glass-button.primary:active { background: rgba(190, 155, 45, 0.95); } /* ------------------------------------------ SECONDARY VARIANT Subtler glass for de-emphasized actions. ------------------------------------------ */ .glass-button.secondary { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 65%); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.15), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.08); } .glass-button.secondary:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.95); } /* ------------------------------------------ DESTRUCTIVE VARIANT Solid red for dangerous actions. ------------------------------------------ */ .glass-button.destructive { background: rgba(255, 59, 48, 0.95); border-color: rgba(255, 100, 90, 0.3); color: #fff; box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.25), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.15); } .glass-button.destructive:hover { border-color: rgba(255, 120, 110, 0.4); } /* ------------------------------------------ SUCCESS VARIANT Solid green for confirmations. ------------------------------------------ */ .glass-button.success { background: rgba(52, 199, 89, 0.95); border-color: rgba(100, 220, 130, 0.3); color: #fff; box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.25), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.15); } .glass-button.success:hover { border-color: rgba(120, 230, 150, 0.4); } /* ------------------------------------------ SIZE: SMALL ------------------------------------------ */ .glass-button.sm { padding: 8px 16px; min-height: 36px; font-size: 13px; } /* ------------------------------------------ SIZE: LARGE ------------------------------------------ */ .glass-button.lg { padding: 16px 24px; min-height: 52px; font-size: 17px; } /* ------------------------------------------ SHAPE: ICON-ONLY (Circle) For single-action atomic buttons. Icon fills ~60-62% of button for refined look. Minimum 44px touch target (Apple HIG). ------------------------------------------ */ .glass-button.icon-only { padding: 0; width: 44px; height: 44px; min-height: auto; border-radius: 50%; } /* Small variant still meets touch target minimum */ .glass-button.icon-only.sm { width: 44px; height: 44px; } /* Smaller icon inside small button */ .glass-button.icon-only.sm .btn-icon { width: 20px; height: 20px; } .glass-button.icon-only.lg { width: 56px; height: 56px; } /* ------------------------------------------ BUTTON ICON Scales with button size for proper ratio. Raised relief - icon appears embossed. ------------------------------------------ */ .btn-icon { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; /* Raised relief - subtle for smaller icons */ filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* Smaller icon for small buttons */ .glass-button.sm .btn-icon { width: 20px; height: 20px; } /* Larger icon for large buttons */ .glass-button.lg .btn-icon { width: 28px; height: 28px; } /* ============================================== GLASS PANEL Container for grouped content. Can contain child glass elements (nested glass). KEY: Almost invisible fill, subtle border, stronger blur for containers. ============================================== */ .glass-panel { /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* Stronger blur for panels */ backdrop-filter: blur(30px) saturate(120%) brightness(0.92); -webkit-backdrop-filter: blur(30px) saturate(120%) brightness(0.92); /* Subtle uniform border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 32px; /* Raised relief - full 3D glass effect */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 1px 1px 1px rgba(255, 255, 255, 0.55), inset -0.5px -0.75px 1px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.22); /* Layout: gap-only spacing for children */ display: flex; flex-direction: column; gap: 12px; padding: 12px; } /* ------------------------------------------ NESTED GLASS Child glass elements inside panel. Slightly subtler treatment to create hierarchy. ------------------------------------------ */ .glass-panel .glass-button, .glass-panel .glass-tile { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 65%); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); } .glass-panel .glass-button:hover, .glass-panel .glass-tile:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.18); } /* ------------------------------------------ PANEL HEADER ------------------------------------------ */ .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .panel-title { font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, 0.95); } .panel-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.7); } /* ------------------------------------------ PANEL CONTENT Uses gap for all child spacing. ------------------------------------------ */ .panel-content { display: flex; flex-direction: column; gap: 16px; } /* ------------------------------------------ PANEL ACTIONS Row of buttons at bottom. Parent must use gap to space this from content above. ------------------------------------------ */ .panel-actions { display: flex; align-items: center; gap: 12px; } /* ------------------------------------------ PANEL FOOTER Separator + actions. Parent must use gap to space this from content above. ------------------------------------------ */ .panel-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); } /* ============================================== GLASS INPUT Text input with glass treatment. KEY: Almost invisible fill, subtle border, tiny upper-left highlight. ============================================== */ .glass-input { width: 100%; padding: 16px 20px; min-height: 52px; /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* Frosted glass blur */ /* Subtle uniform border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 24px; /* Subtle glass shadow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); /* White text */ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; font-size: 17px; color: rgba(255, 255, 255, 0.95); outline: none; -webkit-appearance: none; } /* ------------------------------------------ PLACEHOLDER Lower opacity than regular text. ------------------------------------------ */ .glass-input::placeholder { color: rgba(255, 255, 255, 0.4); } /* ------------------------------------------ FOCUS STATE Brighter edge indicates focus. ------------------------------------------ */ .glass-input:focus { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.24); box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.35), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 3px 12px rgba(0, 0, 0, 0.12); } /* ------------------------------------------ DISABLED STATE ------------------------------------------ */ .glass-input:disabled { opacity: 0.4; cursor: not-allowed; } /* ------------------------------------------ ERROR STATE ------------------------------------------ */ .glass-input.error { border-color: rgba(255, 80, 70, 0.5); } .glass-input.error:focus { border-color: rgba(255, 80, 70, 0.7); } /* ------------------------------------------ INPUT WITH ICON ------------------------------------------ */ .input-with-icon { position: relative; } .input-with-icon .glass-input { padding-right: calc(20px + 24px + 16px); } .input-with-icon .input-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: rgba(255, 255, 255, 0.5); pointer-events: none; } .input-with-icon .input-icon.clickable { pointer-events: auto; cursor: pointer; color: rgba(255, 255, 255, 0.7); } .input-with-icon .input-icon.clickable:hover { color: rgba(255, 255, 255, 0.95); } /* ------------------------------------------ INPUT WRAPPER Label + input + hint/error. ------------------------------------------ */ .input-wrapper { display: flex; flex-direction: column; gap: 8px; } .input-label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); padding-left: 8px; } .input-hint { font-size: 11px; color: rgba(255, 255, 255, 0.5); padding-left: 8px; } .input-error { font-size: 11px; color: rgba(255, 59, 48, 0.95); padding-left: 8px; } /* ============================================== GLASS TOGGLE On/off switch control. KEY: Almost invisible fill, subtle border, tiny highlight from the upper-left. ============================================== */ .glass-toggle { position: relative; width: 56px; height: 32px; /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); /* Frosted glass blur */ /* Subtle uniform border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 9999px; /* Subtle glass shadow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ------------------------------------------ TOGGLE THUMB Solid white circle that slides. ------------------------------------------ */ .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.92); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ------------------------------------------ ACTIVE STATE Solid green track. ------------------------------------------ */ .glass-toggle.active { background: rgba(52, 199, 89, 0.95); border-color: rgba(100, 220, 130, 0.3); box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.25), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.12); } .glass-toggle.active .toggle-thumb { transform: translateX(24px); } /* ------------------------------------------ HOVER STATE ------------------------------------------ */ .glass-toggle:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.08) 65%); border-color: rgba(255, 255, 255, 0.18); } .glass-toggle.active:hover { background: rgba(60, 210, 100, 0.95); } /* ------------------------------------------ DISABLED STATE ------------------------------------------ */ .glass-toggle.disabled { opacity: 0.4; cursor: not-allowed; } /* ------------------------------------------ SIZE: LARGE ------------------------------------------ */ .glass-toggle.lg { width: 68px; height: 40px; } .glass-toggle.lg .toggle-thumb { top: 4px; left: 4px; width: 30px; height: 30px; } .glass-toggle.lg.active .toggle-thumb { transform: translateX(28px); } /* ============================================== GLASS SLIDER Vertical slider for controls like brightness, volume, temperature. KEY: Almost invisible fill, subtle border, tiny upper-left highlight. ============================================== */ .glass-slider { position: relative; width: 70px; height: 180px; /* Almost invisible fill */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); /* Frosted glass blur */ /* Subtle uniform border */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 9999px; /* Subtle glass shadow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ------------------------------------------ SLIDER FILL Solid white, rises from bottom. ------------------------------------------ */ .slider-fill { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.92); border-radius: 0 0 calc(9999px - 3px) calc(9999px - 3px); } /* ------------------------------------------ SLIDER ICON At bottom of track, inverts on fill. ------------------------------------------ */ .slider-icon { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; color: rgba(0, 0, 0, 0.9); z-index: 2; } /* When fill is low, icon should be white */ .glass-slider[data-value="low"] .slider-icon { color: rgba(255, 255, 255, 0.95); } /* ------------------------------------------ SLIDER VALUE LABEL ------------------------------------------ */ .slider-value { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, 0.95); z-index: 2; } /* ------------------------------------------ SLIDER LABEL ------------------------------------------ */ .slider-label { position: absolute; top: calc(16px + 20px + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.02em; z-index: 2; } /* ------------------------------------------ SIZE: COMPACT ------------------------------------------ */ .glass-slider.compact { width: 60px; height: 140px; } .glass-slider.compact .slider-icon { width: 24px; height: 24px; bottom: 16px; } /* ------------------------------------------ SIZE: LARGE ------------------------------------------ */ .glass-slider.lg { width: 80px; height: 220px; } .glass-slider.lg .slider-icon { width: 32px; height: 32px; } /* ============================================== GLASS VISUAL CARD Large image card with title overlay. Use for Pattern A: Direct Display (e.g., Dine & Drink venues) KEY: Hero image is the visual, text overlays at bottom with gradient for legibility. Glass edge treatment. ============================================== */ .glass-visual-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; overflow: hidden; /* Glass edge treatment */ border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 28px; /* Subtle glass shadow */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ------------------------------------------ BACKGROUND IMAGE ------------------------------------------ */ .visual-card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background-size: cover; background-position: center; z-index: 0; /* Smooth zoom on hover */ transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); } /* Gradient overlay for text legibility */ .glass-visual-card::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 100% ); z-index: 1; pointer-events: none; } /* ------------------------------------------ CONTENT OVERLAY ------------------------------------------ */ .visual-card-content { position: relative; z-index: 2; padding: 16px; display: flex; flex-direction: column; gap: 2px; } .visual-card-title { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .visual-card-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* ------------------------------------------ HOVER STATE ------------------------------------------ */ .glass-visual-card:hover { border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 1px 1.5px 2px rgba(255, 255, 255, 0.35), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 6px 20px rgba(0, 0, 0, 0.25); } .glass-visual-card:hover .visual-card-image { transform: scale(1.05); } /* ------------------------------------------ FOCUS STATE (Keyboard/Remote) ------------------------------------------ */ .glass-visual-card:focus { outline: none; } .glass-visual-card:focus-visible { border-color: rgba(255, 255, 255, 0.3); outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 4px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), inset 1px 1.5px 2px rgba(255, 255, 255, 0.4), inset -0.5px -1px 1.5px rgba(255, 255, 255, 0.1), 0 6px 24px rgba(0, 0, 0, 0.3); transform: scale(1.03); } .glass-visual-card:focus-visible .visual-card-image { transform: scale(1.05); } /* ------------------------------------------ ACTIVE/PRESSED STATE ------------------------------------------ */ .glass-visual-card:active { transform: scale(0.98); box-shadow: inset 1.5px 2px 3px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15); transition-duration: 100ms; } .glass-visual-card:active .visual-card-image { transform: scale(1.02); } /* ------------------------------------------ TV MODE - Larger cards ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { .glass-visual-card { min-height: 200px; } .visual-card-title { font-size: 24px; } .visual-card-subtitle { font-size: 15px; } } /* ============================================== GLASS INFO CARD Single card displaying multiple key/value pairs. Use for Pattern B: Info Categories (e.g., Stay Details) KEY: Comprehensive info on one card, no further drilling down. Optional hero image at top. ============================================== */ .glass-info-card { display: flex; flex-direction: column; overflow: hidden; /* Glass treatment */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); } /* ------------------------------------------ HERO IMAGE (Optional) ------------------------------------------ */ .info-card-image { height: 160px; background-size: cover; background-position: center; border-radius: 28px 28px 0 0; margin: -1px -1px 0 -1px; /* Overlap border */ } /* ------------------------------------------ HEADER (Title only - subtitle removed as redundant) ------------------------------------------ */ .info-card-header { padding: 16px 16px 0; } .info-card-title { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, 0.95); } .info-card-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.7); } /* Large value display (e.g., room number) */ .info-card-value-large { font-size: 32px; font-weight: 700; color: rgba(255, 255, 255, 0.95); text-align: center; padding: 16px 0; } /* ------------------------------------------ CONTENT ROWS ------------------------------------------ */ .info-card-content { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 0; } .info-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .info-row:last-child { border-bottom: none; } .info-label { font-size: 13px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 1; min-width: 0; } .info-value { font-size: 15px; color: rgba(255, 255, 255, 0.95); text-align: right; word-break: break-word; } /* Monospace variant for codes/passwords */ .info-value.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; letter-spacing: 0.05em; } /* ------------------------------------------ SECTIONS (Groups within card) ------------------------------------------ */ .info-section { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .info-section:first-of-type, .info-section-group + .info-section { border-top: none; } .info-section-title { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.95); } .info-section-content { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.7; } /* Group divider used inside info-screen renders to label sub-groups (e.g. hotel-guide groups like "Restaurants", "Spa"). Sits flush against the card edge, not indented like info-section. */ .info-section-group { padding: 12px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.1); } .info-section-group:first-of-type { border-top: none; } /* Compact info-section used when an item has 2+ details and we drop to a stacked layout. Less padding than the full info-section, name renders like a row label rather than a section heading. */ .info-section-compact { padding: 8px 16px; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .info-section-compact .info-section-title { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.95); padding-bottom: 4px; } .info-section-compact .info-row { padding: 4px 0; border-bottom: none; } .info-section-compact .info-row .info-label { font-size: 11px; color: rgba(255, 255, 255, 0.5); } .info-section-compact .info-row .info-value { font-size: 13px; } /* Items with no detail value (just a name + optional group label) -- the right column shows the group as muted text or stays blank. */ .info-row-name-only .info-value { min-height: 1em; } .info-value-muted { color: rgba(255, 255, 255, 0.5); font-size: 13px; font-weight: normal; text-transform: none; letter-spacing: 0; } /* ------------------------------------------ NOTE (inline, no special styling) ------------------------------------------ */ .info-note { padding: 8px 0; } .info-note p { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.7; margin: 0; } /* ------------------------------------------ BADGE (Included / Extra Charge) ------------------------------------------ */ .info-badge { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 600; } .info-badge.included { background: rgba(56, 161, 105, 0.2); color: rgba(0, 199, 190, 0.95); } .info-badge.supplement { background: rgba(237, 137, 54, 0.2); color: rgba(255, 149, 0, 0.95); } /* ------------------------------------------ GUARDIAN DIETARY CARD (turquoise glass tint) ------------------------------------------ */ .glass-guardian { background: linear-gradient( 135deg, rgba(56, 161, 105, 0.08) 0%, linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%) 60% ); border-color: rgba(56, 161, 105, 0.15); } .glass-guardian .info-card-subtitle { font-size: 11px; color: rgba(56, 161, 105, 0.7); letter-spacing: 0.02em; } /* ------------------------------------------ DIETARY PREFERENCE PILLS ------------------------------------------ */ .dietary-pills { display: flex; flex-wrap: wrap; gap: 8px; } .dietary-pill { display: inline-flex; align-items: center; justify-content: center; /* Tighter horizontal padding packs more pills per row; vertical padding held at --space-2 to keep a comfortable tap target. */ padding: 8px; /* Never let a long custom Opera description (e.g. "Severe Tree Nut and Peanut Allergy") stretch a single pill past the card and clip under the panel's overflow-x:hidden -- it wraps inside the pill instead. */ max-width: 100%; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); font-size: 13px; text-align: center; cursor: pointer; } .dietary-pill.active { background: rgba(56, 161, 105, 0.25); color: rgba(255, 255, 255, 0.95); border-color: rgba(0, 199, 190, 0.95); } .dietary-pill.saving { opacity: 0.5; } .dietary-pill:disabled { cursor: wait; } .dietary-loading { color: rgba(255, 255, 255, 0.5); font-size: 13px; } .guardian-empty { color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.5; margin: 0; } /* ------------------------------------------ TV MODE ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { .info-card-image { height: 200px; } .info-card-title { font-size: 24px; } .info-card-value-large { font-size: 44px; } } /* ============================================== GLASS DIVIDER Section divider with optional centered text. Use to separate groups within a list (e.g., Restaurants | Bars) KEY: Subtle lines that don't span full width, centered text label. Matches glass aesthetic. ============================================== */ .glass-divider { display: flex; align-items: center; gap: 16px; padding: 16px 0; } /* Lines on either side of text */ .glass-divider::before, .glass-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0.25) 80%, transparent 100% ); } /* ------------------------------------------ DIVIDER TEXT ------------------------------------------ */ .divider-text { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } /* ------------------------------------------ VARIANT: No Text (Line Only) ------------------------------------------ */ .glass-divider.line-only::before, .glass-divider.line-only::after { flex: none; width: 60%; margin: 0 auto; } .glass-divider.line-only::after { display: none; } /* ------------------------------------------ VARIANT: Full Width ------------------------------------------ */ .glass-divider.full-width::before, .glass-divider.full-width::after { background: rgba(255, 255, 255, 0.15); } /* ------------------------------------------ TV MODE ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { .divider-text { font-size: 15px; } } /* ============================================== GLASS CHAT WhatsApp-style conversation thread with glass treatment. Used in the Messages top panel. KEY: Bubbles are glass elements with directional tails. Outgoing slightly brighter to distinguish. ============================================== */ /* ------------------------------------------ CHAT VIEW Override panel-view defaults for chat layout. Panel-view is absolute-positioned; chat needs flex column with no parent scroll. ------------------------------------------ */ .chat-view { display: flex; flex-direction: column; overflow: hidden; /* 8px inset on the sides + bottom; flush under the header at the top. */ padding: 0 8px 8px; } .chat-view.active { opacity: 1; pointer-events: auto; } /* ------------------------------------------ MESSAGES PANEL LAYOUT (standard chat panel) The panel is a FIXED 65% of the viewport; the header + input bar are pinned and ONLY the thread scrolls. Overrides the default top-panel (which shrinks to content and scrolls the whole wrapper). Toggled by .is-chat on #topPanel (app.openTopPanel for 'messages'). ------------------------------------------ */ .top-panel.is-chat { height: 75vh; height: 75dvh; } .top-panel.is-chat .panel-container { height: 100%; max-height: 100%; } .top-panel.is-chat .service-header { flex-shrink: 0; } /* Wrapper fills the container and does NOT scroll -- the thread does. */ .top-panel.is-chat .panel-content-wrapper { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Chat view fills the wrapper as a bounded flex column (override the content-driven top-panel panel-view). */ .top-panel.is-chat .chat-view { position: absolute; inset: 0; height: auto; overflow: hidden; } /* ------------------------------------------ CHAT CONTAINER Flex column: thread fills space, input bar sticks to bottom. ------------------------------------------ */ .chat-container { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } /* ------------------------------------------ CHAT THREAD Scrollable message area between header and input bar. ------------------------------------------ */ .chat-thread { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ------------------------------------------ DAY MARKER Reuses glass-divider pattern inline. ------------------------------------------ */ .chat-day-marker { display: flex; align-items: center; gap: 16px; padding: 12px 0; align-self: stretch; } .chat-day-marker::before, .chat-day-marker::after { content: ''; flex: 1; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0.25) 80%, transparent 100% ); } .chat-day-marker:first-child { padding-top: 0; } .chat-day-text { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } /* ------------------------------------------ CHAT BUBBLE (base) Glass treatment with directional tail via asymmetric border-radius. ------------------------------------------ */ .chat-bubble { max-width: 80%; padding: 8px 12px; /* Glass treatment */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); /* Text */ font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; font-size: 15px; color: rgba(255, 255, 255, 0.95); line-height: 1.5; /* No word overflow */ word-wrap: break-word; overflow-wrap: break-word; } /* ------------------------------------------ INCOMING (hotel messages) -- left aligned ------------------------------------------ */ .chat-bubble.incoming { align-self: flex-start; border-bottom-left-radius: 12px; } /* ------------------------------------------ OUTGOING (guest messages) -- right aligned, slightly brighter fill to distinguish ------------------------------------------ */ .chat-bubble.outgoing { align-self: flex-end; border-bottom-right-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05) 65%); border-color: rgba(255, 255, 255, 0.18); } /* ------------------------------------------ REQUEST / STATUS bubble (TLP-083) System-generated, one-way status updates for guest requests. Styled DISTINCTLY from the rounded free-text bubbles -- blocky (square) corners + a quiet reference line. Final visual treatment is deferred (TLP-083); this is the slot. No left-accent border (house rule). ------------------------------------------ */ .chat-bubble.chat-request { align-self: flex-start; /* Blocky vs the rounded free-text bubble. */ border-radius: 12px; /* Tighter than the default bubble so status text has more room. */ padding: 8px 12px; } /* Status bubbles carry the reference + time on ONE normal-flow meta row (not the absolute .chat-meta-inline), so the text doesn't reserve bottom padding. */ .chat-bubble.chat-request .chat-bubble-text { padding-bottom: 0; } .chat-request-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; font-size: 11px; line-height: 1; } .chat-request-ref { font-weight: 600; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.04em; } .chat-request-time { margin-left: auto; color: rgba(255, 255, 255, 0.35); white-space: nowrap; } /* ------------------------------------------ CHAT META (inline, inside bubble) Floated into the bottom-right corner of the bubble text. Spacer reserves room so text wraps around the meta naturally. ------------------------------------------ */ .chat-bubble { position: relative; } .chat-bubble-text { display: block; padding-bottom: 10px; } .chat-meta-inline { position: absolute; bottom: 4px; right: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.35); white-space: nowrap; line-height: 1; letter-spacing: 0.01em; } .chat-status { font-size: 11px; color: rgba(255, 255, 255, 0.35); margin-left: 1px; } .chat-status.read { color: rgba(0, 122, 255, 0.6); } /* ------------------------------------------ CHAT INPUT BAR Fixed at bottom of chat container. ------------------------------------------ */ .chat-input-bar { display: flex; align-items: center; gap: 8px; /* No bottom padding -- the input row sits at the bottom of the bar. */ padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.15); flex-shrink: 0; } .chat-input-bar .glass-input { flex: 1; /* Match the send icon's height; even 8px internal padding all round. */ height: 44px; min-height: 44px; padding: 8px; } .chat-input-bar .glass-button { flex-shrink: 0; } /* One-way this phase: the guest can't send. Disabled input + send read as inert. */ .chat-input-bar .glass-input:disabled, .chat-input-bar .glass-button:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ------------------------------------------ UNREAD BADGE On the header Messages button. Same pattern as order-badge. ------------------------------------------ */ /* Badge wrapper -- backdrop-filter on glass-button creates an implicit clip context in WebKit/Safari. We wrap the button + badge in a positioned container so the badge sits outside the button's filter scope. */ .messages-btn-wrap { position: relative; display: inline-flex; } .chat-unread-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; background: rgba(255, 59, 48, 0.95); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9999px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; } /* ------------------------------------------ EMPTY STATE When no messages yet. ------------------------------------------ */ .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; } .chat-empty-icon { width: 48px; height: 48px; color: rgba(255, 255, 255, 0.5); fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } .chat-empty-text { font-size: 15px; color: rgba(255, 255, 255, 0.7); line-height: 1.7; } /* ------------------------------------------ TV MODE ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { .chat-bubble { max-width: 65%; } .chat-thread { padding: 16px; gap: 12px; } } /* ------------------------------------------ REDUCED MOTION ------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .chat-bubble, .chat-input-bar { transition: none; } } /* ============================================== GLASS CAROUSEL Full-screen slideshow inside the detail modal. Grouped slides: divider (title) + image (content). Swipe/snap navigation with dot indicators. ============================================== */ /* ------------------------------------------ CAROUSEL MODAL OVERRIDES When the modal hosts a carousel, remove its default padding/scroll so the carousel owns the viewport. ------------------------------------------ */ .detail-modal.carousel-active { padding: 0; overflow: hidden; /* Force tall: content-driven height won't work because background-image slides have no intrinsic height */ height: 80vh; max-width: 480px; } .detail-modal.carousel-active .modal-content { padding: 0; gap: 0; height: 100%; } /* ------------------------------------------ CAROUSEL CONTAINER ------------------------------------------ */ .carousel { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* ------------------------------------------ GROUP LABEL (current section indicator) ------------------------------------------ */ .carousel-group-label { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 4px 16px; /* Tint only -- NO backdrop-filter: this lives inside the modal stack (transformed .detail-modal ancestor = backdrop root on WebKit/old Blink), and the overlay already supplies the stack's one blur. */ background: rgba(0, 0, 0, 0.5); border-radius: 9999px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------ TRACK (horizontal scroll-snap) ------------------------------------------ */ .carousel-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } /* ------------------------------------------ SLIDE (base) ------------------------------------------ */ .carousel-slide { flex: 0 0 100%; width: 100%; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* ------------------------------------------ DIVIDER SLIDE (section title) Tint only -- NO backdrop-filter (one blur per modal stack; a live blur here is also dead under the transformed .detail-modal on WebKit). ------------------------------------------ */ .carousel-slide-divider { background: rgba(0, 0, 0, 0.4); padding: 24px; text-align: center; gap: 12px; } .carousel-slide-divider .slide-group-title { font-size: 24px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.02em; } .carousel-slide-divider .slide-group-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.7); max-width: 280px; } /* Decorative line above title */ .carousel-slide-divider .slide-group-title::before { content: ''; display: block; width: 40px; height: 2px; background: rgba(212, 175, 55, 0.95); margin: 0 auto 16px; border-radius: 1px; } /* ------------------------------------------ IMAGE SLIDE (full-bleed photo + overlay) ------------------------------------------ */ .carousel-slide-image { background-size: cover; background-position: center; background-color: rgba(0, 0, 0, 0.6); } /* Dark gradient for text legibility */ .carousel-slide-image::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.05) 60%, transparent 100% ); z-index: 1; pointer-events: none; } /* Content overlay at bottom */ .carousel-slide-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 24px 16px; padding-bottom: calc(24px + 40px); display: flex; flex-direction: column; gap: 8px; } .carousel-slide-content .slide-title { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .carousel-slide-content .slide-description { font-size: 13px; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* CTA note */ .carousel-slide-cta { font-size: 11px; color: rgba(212, 175, 55, 0.95); font-weight: 500; padding-top: 4px; } /* ------------------------------------------ NAVIGATION BAR (dots + arrows) ------------------------------------------ */ .carousel-nav { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; background: linear-gradient( to top, rgba(0, 0, 0, 0.4) 0%, transparent 100% ); } /* Arrow buttons */ .carousel-arrow { width: 32px; height: 32px; min-height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: rgba(255, 255, 255, 0.8); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } .carousel-arrow:hover { background: rgba(255, 255, 255, 0.25); } .carousel-arrow:active { transform: scale(0.9); } .carousel-arrow:disabled { opacity: 0.3; cursor: default; } .carousel-arrow svg { width: 16px; height: 16px; } /* Dots container */ .carousel-dots { display: flex; align-items: center; gap: 6px; max-width: 200px; overflow: hidden; } .carousel-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .carousel-dot.active { width: 18px; background: rgba(255, 255, 255, 0.9); } /* Divider dots get a subtle gold tint */ .carousel-dot.divider-dot.active { background: rgba(212, 175, 55, 0.95); } /* ------------------------------------------ COUNTER (slide number) ------------------------------------------ */ .carousel-counter { position: absolute; top: 16px; right: 16px; z-index: 3; font-size: 11px; color: rgba(255, 255, 255, 0.6); pointer-events: none; } /* ------------------------------------------ CLOSE BUTTON OVERRIDE Position close button above carousel ------------------------------------------ */ .detail-modal.carousel-active .modal-close { z-index: 4; /* Tint only -- see the group-label note (one blur per modal stack). */ background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.22); } .detail-modal.carousel-active .modal-close .btn-icon { color: #fff; } /* ------------------------------------------ TV MODE ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { .detail-modal.carousel-active { max-width: 600px; height: 80vh; } .carousel-slide-divider .slide-group-title { font-size: 32px; } .carousel-slide-divider .slide-group-subtitle { font-size: 15px; max-width: 400px; } .carousel-slide-content .slide-title { font-size: 24px; } .carousel-slide-content .slide-description { font-size: 15px; } .carousel-arrow { width: 44px; height: 44px; min-height: 44px; } .carousel-arrow svg { width: 20px; height: 20px; } .carousel-dot { width: 8px; height: 8px; } .carousel-dot.active { width: 24px; } .carousel-group-label { font-size: 13px; } } /* ------------------------------------------ REDUCED MOTION ------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } } /* ============================================== GLASS VENUE CARD Extended card for restaurants and events. Hero image + details + per-meal booking rows. Structure: .glass-venue-card .venue-card-hero .venue-card-body .venue-card-title .venue-card-subtitle .venue-card-desc .venue-card-info .venue-info-row (label + value) .venue-card-meals .venue-meal-row (label + time + book btn) ============================================== */ .glass-venue-card { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 65%); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14); color: rgba(255, 255, 255, 0.95); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; } /* Menu carousel variant: card expands to fit info slide content. Menu slides scroll internally for long menus. */ .glass-venue-card.has-menu { min-height: 0; } /* ------------------------------------------ HERO IMAGE ------------------------------------------ */ .venue-card-hero { height: 120px; background-size: cover; background-position: center; flex-shrink: 0; } /* ------------------------------------------ BODY (title, subtitle, description, info) ------------------------------------------ */ .venue-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px; } .venue-card-title { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, 0.95); } .venue-card-subtitle { font-size: 15px; color: rgba(255, 255, 255, 0.7); margin-top: -4px; } /* Full description shown on the card (TLP-476): no line-clamp, no disclosure -- the description renders in full, consistent with showing detail up front. */ .venue-card-desc { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.7; } /* Info rows: cuisine, location, dress code */ .venue-card-info { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; } .venue-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .venue-info-label { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; } .venue-info-value { font-size: 15px; color: rgba(255, 255, 255, 0.95); text-align: right; } /* ------------------------------------------ MEAL ROWS (bottom section) Separated from body by a subtle border. ------------------------------------------ */ .venue-card-meals { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.1); } .venue-meal-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .venue-meal-row:last-child { border-bottom: none; } .venue-meal-label { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; min-width: 56px; } .venue-meal-time { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.95); flex: 1; } /* Book Now pill -- 44px minimum touch target */ .venue-book-btn { padding: 8px 16px; min-height: 44px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(212, 175, 55, 0.95); border: none; border-radius: 9999px; cursor: pointer; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; } .venue-book-btn:hover { background: rgba(212, 175, 55, 1); } .venue-book-btn:active { transform: scale(0.94); transition-duration: 100ms; } /* ------------------------------------------ VENUE CARD GRID Full-width single column on mobile with scroll-snap for clean card-to-card swiping. ------------------------------------------ */ .venue-card-grid { display: flex; flex-direction: column; gap: 16px; } /* ------------------------------------------ TV BREAKPOINT ------------------------------------------ */ @media (min-width: 1200px) and (orientation: landscape) { .glass-venue-card.has-menu { min-height: 0; } .venue-card-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; } .venue-card-grid > * { -webkit-flex: 1 1 380px; flex: 1 1 380px; margin: 10px; } .venue-card-hero { height: 180px; } .venue-card-title { font-size: 24px; } .venue-card-subtitle { font-size: 17px; } .venue-card-desc { font-size: 17px; } .venue-info-label { font-size: 13px; min-width: 64px; } .venue-info-value { font-size: 17px; } .venue-meal-label { font-size: 13px; min-width: 64px; } .venue-meal-time { font-size: 17px; } .venue-book-btn { padding: 12px 20px; min-height: 48px; font-size: 15px; } } /* ------------------------------------------ 4K TV ------------------------------------------ */ @media (min-width: 1920px) and (orientation: landscape) { .glass-venue-card.has-menu { min-height: 0; } .venue-card-grid { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); } .venue-card-hero { height: 220px; } } /* ============================================== GLASS VENUE MENU CAROUSEL Horizontal carousel within venue cards showing restaurant info (slide 0) and menu slides (1..N). Uses CSS scroll-snap for native swipe support. Structure: .glass-venue-card.has-menu .venue-carousel-track .venue-carousel-slide.venue-slide-info .venue-carousel-slide.venue-slide-menu .menu-slide-header .menu-slide-content .menu-course .menu-course-title .menu-category-title .menu-item-row .venue-carousel-dots .venue-carousel-dot ============================================== */ /* ------------------------------------------ CAROUSEL TRACK (horizontal scroll-snap) ------------------------------------------ */ .venue-carousel-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 0 0 auto; min-height: 0; } .venue-carousel-track::-webkit-scrollbar { display: none; } /* ------------------------------------------ SLIDES (base) ------------------------------------------ */ .venue-carousel-slide { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-x: hidden; min-height: 0; } /* Info slide: no internal scroll -- card expands to fit */ .venue-slide-info { display: flex; flex-direction: column; overflow-y: visible; } /* Menu slide: scrolls internally for long menus */ .venue-slide-menu { display: flex; flex-direction: column; overflow-y: auto; max-height: 45vh; } /* ------------------------------------------ MENU SLIDE HEADER Meal type name + service hours ------------------------------------------ */ .menu-slide-header { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .menu-slide-title { font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.02em; } .menu-slide-title::before { content: ''; display: block; width: 28px; height: 2px; background: rgba(212, 175, 55, 0.95); margin: 0 auto 8px; border-radius: 1px; } .menu-slide-hours { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; } /* ------------------------------------------ MENU SLIDE CONTENT (scrollable area) ------------------------------------------ */ .menu-slide-content { flex: 1; overflow-y: auto; padding: 8px 12px 12px; } .menu-empty { padding: 24px; text-align: center; font-size: 15px; color: rgba(255, 255, 255, 0.5); } /* ------------------------------------------ COURSE SECTION (collapsible
) ------------------------------------------ */ .menu-course { padding-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .menu-course:last-child { border-bottom: none; } .menu-course-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(212, 175, 55, 0.95); text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .menu-course-title::-webkit-details-marker { display: none; } .menu-course-name { flex: 1; min-width: 0; } .menu-course-count { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 1px 5px; line-height: 1; } .menu-course-chevron { width: 14px; height: 14px; flex-shrink: 0; overflow: hidden; color: rgba(255, 255, 255, 0.5); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); } .menu-course[open] > .menu-course-title .menu-course-chevron { transform: rotate(180deg); } .menu-course-items { padding-bottom: 8px; } .menu-category-title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; } /* ------------------------------------------ MENU ITEM ROW Name + description left, badges + price right Rendered as