/* * Gonzalez & Lopez: visual effects (PREVIEW). * Every rule is scoped to a class on that gl-effects.js adds only * while preview mode is on, so the live site is unchanged until approved. */ :root { --gl-gold: #c18f59; --gl-gold-light: #e8c27a; } /* 1. Fade-in on scroll */ html.gl-fx-reveal .gl-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--gl-delay, 0s); } html.gl-fx-reveal .gl-reveal.gl-in { opacity: 1; transform: none; } /* 2. 3D tilt on service boxes */ html.gl-fx-tilt .gl-tilt { transform: perspective(900px) rotateX(var(--gl-rx, 0deg)) rotateY(var(--gl-ry, 0deg)) translateZ(0); transition: transform 0.25s ease, box-shadow 0.25s ease; transform-style: preserve-3d; border-radius: 10px; will-change: transform; } html.gl-fx-tilt .gl-tilt.gl-tilting { transition: transform 0.08s linear, box-shadow 0.25s ease; box-shadow: 0 18px 40px rgba(11, 64, 118, 0.18), 0 4px 12px rgba(193, 143, 89, 0.25); } /* 3. Smooth page transitions: the new page fades in, the old one fades out. The fade-out uses its own animation because a finished fade-in animation would otherwise keep holding the page at full opacity. */ html.gl-fx-page body { animation: gl-page-in 0.6s ease both; } html.gl-fx-page.gl-leaving body { animation: gl-page-out 0.35s ease forwards; } @keyframes gl-page-in { from { opacity: 0; } to { opacity: 1; } } @keyframes gl-page-out { from { opacity: 1; } to { opacity: 0; } } /* 4. Buttons lift and glow gold on hover */ html.gl-fx-buttons .elementor-button, html.gl-fx-buttons .color-overlay-link { transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important; } html.gl-fx-buttons .elementor-button:hover, html.gl-fx-buttons .color-overlay-link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(193, 143, 89, 0.45), 0 0 0 1px rgba(232, 194, 122, 0.6); filter: brightness(1.06); } /* Visitors who ask their device for less motion get none of the movement */ @media (prefers-reduced-motion: reduce) { html.gl-fx-reveal .gl-reveal { opacity: 1; transform: none; transition: none; } html.gl-fx-tilt .gl-tilt { transform: none; } html.gl-fx-page body, html.gl-fx-page.gl-leaving body { animation: none; } html.gl-fx-buttons .elementor-button:hover, html.gl-fx-buttons .color-overlay-link:hover { transform: none; } } /* Preview panel (only shown in preview mode) */ .gl-fx-panel { position: fixed; left: 16px; bottom: 16px; z-index: 99999; background: #0b1f3a; color: #fff; border: 1px solid var(--gl-gold); border-radius: 10px; padding: 12px 14px; width: 250px; max-width: calc(100vw - 32px); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .gl-fx-panel strong { display: block; color: var(--gl-gold-light); margin-bottom: 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } .gl-fx-panel label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; } .gl-fx-panel input { accent-color: var(--gl-gold); width: 16px; height: 16px; } .gl-fx-panel .gl-fx-row { display: flex; gap: 8px; margin-top: 8px; } .gl-fx-panel button { flex: 1; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; padding: 5px 6px; cursor: pointer; font: inherit; font-size: 12px; } .gl-fx-panel button:hover { border-color: var(--gl-gold); color: var(--gl-gold-light); } .gl-fx-panel.gl-min > :not(strong) { display: none; } .gl-fx-panel.gl-min { width: auto; cursor: pointer; } .gl-fx-panel.gl-min strong { margin: 0; }