/* ============================================= TINT LORI — Glassmorphism & Card Animations glass.css — loaded last; overrides card surfaces ============================================= */ /* ---------- Glass Variables ---------- */ :root { --glass-bg: rgba(255, 255, 255, 0.66); --glass-border: rgba(34, 26, 20, 0.08); --glass-blur: blur(16px); --glass-highlight: rgba(255, 255, 255, 0.7); } /* ---------- Ambient Orb Layer ---------- */ /* Injected into by components.js — provides content for backdrop-filter to blur */ .orb-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .orb { position: absolute; border-radius: 50%; animation: orbDrift 12s ease-in-out infinite alternate; } .orb-1 { width: 600px; height: 600px; top: -150px; left: -150px; background: radial-gradient(circle, rgba(244,192,30,0.16) 0%, transparent 70%); filter: blur(80px); animation-delay: 0s; } .orb-2 { width: 500px; height: 500px; bottom: -100px; right: -100px; background: radial-gradient(circle, rgba(158,28,28,0.10) 0%, transparent 70%); filter: blur(80px); animation-delay: -5s; } .orb-3 { width: 350px; height: 350px; top: 40%; left: 20%; background: radial-gradient(circle, rgba(244,192,30,0.08) 0%, transparent 70%); filter: blur(80px); animation-delay: -3s; animation-duration: 16s; } @keyframes orbDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.08); } } /* ---------- Pulse Border Keyframes ---------- */ @keyframes glassPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,192,30,0.5), 0 14px 36px rgba(34,26,20,0.12); border-color: rgba(244,192,30,0.6); } 50% { box-shadow: 0 0 0 7px rgba(244,192,30,0), 0 14px 36px rgba(34,26,20,0.12); border-color: rgba(158,28,28,0.5); } } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { .orb { animation: none; } .service-card::before, .trust-item::before, .testimonial-card::before, .service-select-card::before { transition: none; } .service-card:hover, .trust-item:hover, .testimonial-card:hover, .service-block:hover, .service-select-card:hover, .film-card:hover { animation: none; transform: none; } } /* ============================================ GLASS SURFACE — applied to all card types Overrides solid backgrounds from home.css / services.css / booking.css / simulator.css. glass.css loads last so same specificity wins via cascade order. ============================================ */ .service-card, .trust-item, .testimonial-card, .service-block, .service-select-card, .film-card { background: rgba(255, 255, 255, 0.92); /* fallback: readable light surface for browsers without backdrop-filter */ backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 20px rgba(34,26,20,0.08); position: relative; overflow: hidden; } /* service-select-card keeps 2px — its selected/active state needs the heavier border */ .service-select-card { border-width: 2px; } /* Override fallback with true glass bg only when backdrop-filter is supported */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .service-card, .trust-item, .testimonial-card, .service-block, .service-select-card, .film-card { background: var(--glass-bg); } } /* ============================================ SHINE SWEEP — ::before pseudo-element Sweeps a light sheen across the card on hover. Applied to: service-card, trust-item, testimonial-card, service-select-card NOT applied to: service-block (image zoom is the reward), film-card (horizontal flex row clips awkwardly) ============================================ */ .service-card::before, .trust-item::before, .testimonial-card::before, .service-select-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(244, 192, 30, 0.18) 50%, transparent 80% ); transform: skewX(-15deg); transition: left 0.55s ease; z-index: 1; pointer-events: none; } .service-card:hover::before, .trust-item:hover::before, .testimonial-card:hover::before, .service-select-card:hover::before { left: 140%; } /* Explicitly suppress sweep on service-block (already has overflow:hidden but ::before must not show) */ .service-block::before { display: none; } /* ============================================ HOVER — Lift + Pulse Border ============================================ */ /* Standard cards: lift 7px + sweep (above) + pulse */ .service-card, .trust-item, .testimonial-card, .service-select-card { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .service-card:hover, .trust-item:hover, .testimonial-card:hover, .service-select-card:hover { transform: translateY(-7px); animation: glassPulse 0.9s ease infinite; } /* service-block: lift + pulse only (existing image zoom stays from services.css) */ .service-block { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .service-block:hover { transform: translateY(-7px); animation: glassPulse 0.9s ease infinite; } /* film-card: glass + pulse only — no lift, no sweep (compact sidebar item) */ .film-card { transition: border-color 0.3s ease; } .film-card:hover { animation: glassPulse 0.9s ease infinite; }