/* ============================================================ GLASS THEME — optional liquid-glass UI skin Adapted from "Pure CSS Glassmorphism Liquid Glass UI Kit" by Margarita — https://codepen.io/Margarita-the-solid/pen/NPRPBjd MIT License (see docs/THIRD_PARTY_LICENSES.md) Scoped entirely under [data-ui="glass"] on so it never affects the default "Classic" look. Toggled by js/ui-theme.js. Re-skins the existing site markup/classes rather than duplicating content — no separate glass-mode HTML needed. ============================================================ */ :root[data-ui="glass"] { --glass-white: rgba(255, 255, 255, 0.62); --glass-white-md: rgba(255, 255, 255, 0.78); --glass-white-lg: rgba(255, 255, 255, 0.92); --glass-border: rgba(15, 23, 42, 0.14); --glass-border-bright: rgba(15, 23, 42, 0.22); --blur-sm: blur(8px); --blur-md: blur(18px); --blur-lg: blur(32px); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.08); --ease-glass: cubic-bezier(0.22, 0.68, 0, 1.2); --dur-mid: 360ms; --glass-bg: #eaf1fb; } /* Animated gradient-blob background, fixed behind all content */ .scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: none; } [data-ui="glass"] .scene { display: block; } .scene__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: glass-blob-drift var(--dur, 20s) ease-in-out infinite alternate; } .scene__blob--1 { width: 700px; height: 700px; background: radial-gradient(circle, #5ee7df, #3b82f6); top: -200px; left: -150px; --dur: 22s; } .scene__blob--2 { width: 600px; height: 600px; background: radial-gradient(circle, #b490f5, #ec4899); bottom: -200px; right: -100px; --dur: 17s; animation-delay: -8s; } .scene__blob--3 { width: 400px; height: 400px; background: radial-gradient(circle, #ffd27f, #f7a8c4); top: 40%; left: 50%; --dur: 25s; animation-delay: -13s; } @keyframes glass-blob-drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.08); } 66% { transform: translate(-40px, 60px) scale(0.94); } 100% { transform: translate(30px, 30px) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .scene__blob { animation: none !important; } } [data-ui="glass"] body { background: var(--glass-bg); } [data-ui="glass"] .hero { background: transparent; } [data-ui="glass"] .section.alt { background: transparent; } [data-ui="glass"] .site-header { background: var(--glass-white-md); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border-bottom: 1px solid var(--glass-border); } [data-ui="glass"] .listing-card, [data-ui="glass"] .detail-card, [data-ui="glass"] .admin-listing-card, [data-ui="glass"] .hero-facts li, [data-ui="glass"] .hero-stats, [data-ui="glass"] .interest-form, [data-ui="glass"] .skeleton-card, [data-ui="glass"] .admin-card { background: var(--glass-white); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); transition: transform var(--dur-mid) var(--ease-glass), box-shadow var(--dur-mid) var(--ease-glass), background var(--dur-mid); } [data-ui="glass"] .listing-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-float); background: var(--glass-white-md); } [data-ui="glass"] .hero-stat-divider { background: var(--glass-border); } /* Room cards are photo-first now (the image fills the card), so they get border/shadow/hover-lift like the other glass cards but no background tint of their own — that would just sit invisibly behind the photo. */ [data-ui="glass"] .room-card { border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass); transition: transform var(--dur-mid) var(--ease-glass), box-shadow var(--dur-mid) var(--ease-glass); } [data-ui="glass"] .room-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-float); } /* Extra frosted-glass strength on the photo-overlay caption panels */ [data-ui="glass"] .room-card__body, [data-ui="glass"] .listing-card-caption { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } [data-ui="glass"] .btn-primary { background: linear-gradient(135deg, rgba(94, 231, 223, 0.85) 0%, rgba(59, 130, 246, 0.85) 100%); border: 1px solid rgba(94, 231, 223, 0.5); box-shadow: 0 4px 24px rgba(94, 231, 223, 0.35); color: #0f172a; } [data-ui="glass"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(94, 231, 223, 0.5); background: linear-gradient(135deg, rgba(94, 231, 223, 1) 0%, rgba(59, 130, 246, 1) 100%); } [data-ui="glass"] .btn-ghost { background: var(--glass-white); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border-color: var(--glass-border); color: var(--ink); } [data-ui="glass"] .btn-ghost:hover { background: var(--glass-white-md); transform: translateY(-2px); } [data-ui="glass"] .pill, [data-ui="glass"] .badge, [data-ui="glass"] .coming-soon-badge { background: var(--glass-white); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border-color: var(--glass-border); } [data-ui="glass"] input, [data-ui="glass"] textarea, [data-ui="glass"] select { background: rgba(255, 255, 255, 0.55); border-color: var(--glass-border); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } [data-ui="glass"] input:focus, [data-ui="glass"] textarea:focus, [data-ui="glass"] select:focus { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } [data-ui="glass"] .site-footer { background: rgba(15, 23, 42, 0.85); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); } /* Classic/Glass switch control */ [data-ui="glass"] .ui-theme-toggle { background: linear-gradient(135deg, rgba(94, 231, 223, 0.9), rgba(59, 130, 246, 0.9)); color: #0f172a; border-color: transparent; backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }