/* ============================================================ Floor Plan Elementor Widget — Frontend Styles ============================================================ */ /* ── Grid ────────────────────────────────────────────────── */ .fpw-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* overridden by Elementor selectors */ gap: 20px; width: 100%; box-sizing: border-box; } /* ── Item card ────────────────────────────────────────────── */ .fpw-item { cursor: pointer; border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; outline: none; } .fpw-item:hover, .fpw-item:focus-visible { transform: translateY(-3px); } .fpw-item:focus-visible { box-shadow: 0 0 0 3px rgba(0, 112, 240, 0.5); } .fpw-item-inner { display: flex; flex-direction: column; height: 100%; } /* ── Image wrapper ────────────────────────────────────────── */ .fpw-item-image { position: relative; overflow: hidden; height: 240px; /* overridden by Elementor selector */ flex-shrink: 0; } .fpw-item-image img { width: 100%; height: 100%; object-fit: cover; /* overridden by Elementor selector */ display: block; transition: transform 0.35s ease; } .fpw-item:hover .fpw-item-image img { transform: scale(1.05); } .fpw-item-placeholder { width: 100%; height: 100%; background: #e5e5e5; } /* ── Hover overlay ────────────────────────────────────────── */ .fpw-item-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; } .fpw-item:hover .fpw-item-overlay, .fpw-item:focus-visible .fpw-item-overlay { opacity: 1; } /* ── Zoom icon ────────────────────────────────────────────── */ .fpw-zoom-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; color: #fff; transition: transform 0.2s ease; } .fpw-item:hover .fpw-zoom-icon { transform: scale(1.1); } .fpw-zoom-icon svg { width: 24px; height: 24px; fill: currentColor; } /* ── Item title ───────────────────────────────────────────── */ .fpw-item-title { display: block; padding: 10px 14px; text-align: center; } /* ============================================================ Lightbox / Popup These rules use CSS custom properties so they can be overridden per-widget via JS (the popup lives in ). ============================================================ */ .fpw-lightbox { /* CSS variables — default values; overwritten by JS */ --fpw-overlay: rgba(0, 0, 0, 0.88); --fpw-bg: #ffffff; --fpw-radius: 12px; --fpw-title-color: #222222; --fpw-arrow-color: #ffffff; --fpw-arrow-bg: rgba(0, 0, 0, 0.45); --fpw-arrow-size: 48px; --fpw-close-color: #ffffff; position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .fpw-lightbox.fpw-is-open { opacity: 1; visibility: visible; } /* ── Backdrop ─────────────────────────────────────────────── */ .fpw-lightbox-backdrop { position: absolute; inset: 0; background: var(--fpw-overlay); cursor: pointer; } /* ── Content container ────────────────────────────────────── */ .fpw-lightbox-container { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1100px; max-height: 90vh; padding: 0 64px; box-sizing: border-box; z-index: 1; } /* ── Inner body (image + title + counter) ─────────────────── */ .fpw-lightbox-body { background: var(--fpw-bg); border-radius: var(--fpw-radius); overflow: hidden; display: flex; flex-direction: column; max-width: 100%; max-height: 85vh; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } /* ── Image ────────────────────────────────────────────────── */ .fpw-lightbox-image-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 100px; } .fpw-lightbox-img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; transition: opacity 0.2s ease; } .fpw-lightbox-img.fpw-loading { opacity: 0.4; } /* ── Title ────────────────────────────────────────────────── */ .fpw-lightbox-title { color: var(--fpw-title-color); text-align: center; padding: 14px 20px 4px; font-size: 1.05em; font-weight: 600; } /* ── Counter ──────────────────────────────────────────────── */ .fpw-lightbox-counter { color: var(--fpw-title-color); text-align: center; padding: 4px 20px 14px; font-size: 0.8em; opacity: 0.6; } /* ── Navigation arrows ────────────────────────────────────── */ .fpw-lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: var(--fpw-arrow-size); height: var(--fpw-arrow-size); background: var(--fpw-arrow-bg); color: var(--fpw-arrow-color); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; flex-shrink: 0; z-index: 2; padding: 0; } .fpw-lightbox-arrow:hover { background: rgba(0, 0, 0, 0.75); transform: translateY(-50%) scale(1.08); } .fpw-lightbox-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .fpw-lightbox-arrow svg { width: 55%; height: 55%; fill: currentColor; display: block; } .fpw-lightbox-prev { left: 0; } .fpw-lightbox-next { right: 0; } .fpw-lightbox-arrow[disabled] { opacity: 0.3; cursor: default; pointer-events: none; } /* ── Close button ─────────────────────────────────────────── */ .fpw-lightbox-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; background: transparent; color: var(--fpw-close-color); border: 2px solid currentColor; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; padding: 0; z-index: 2; } .fpw-lightbox-close:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.1); } .fpw-lightbox-close:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .fpw-lightbox-close svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { .fpw-grid { grid-template-columns: repeat(2, 1fr); /* tablet default */ } .fpw-lightbox-container { padding: 0 44px; max-height: 95vh; } .fpw-lightbox-body { max-height: 90vh; } .fpw-lightbox-img { max-height: 60vh; } .fpw-lightbox-close { top: auto; bottom: calc(100% + 8px); } } @media (max-width: 480px) { .fpw-grid { grid-template-columns: 1fr; /* mobile default */ } .fpw-lightbox-container { padding: 0 36px; } .fpw-lightbox-arrow { width: calc(var(--fpw-arrow-size) * 0.75); height: calc(var(--fpw-arrow-size) * 0.75); } }