/* ===================== BEFORE / AFTER SLIDER Injected by layout.ejs at the end of via buildThemeCSS() ===================== */ /* Header */ .ba-header { margin-bottom: 48px; } /* Slider wrapper */ .ba-slider-wrap { margin-bottom: 40px; position: relative; } /* Drag hint text */ .ba-cursor-hint { text-align: center; font-size: 12px; color: var(--fg-subtle); letter-spacing: 0.04em; margin-bottom: 12px; opacity: 0.7; } /* Comparison container: explicit height so children know their size */ .ba-comparison { position: relative; overflow: hidden; border-radius: 6px; cursor: col-resize; user-select: none; /* Dimensions set by inline style on the element — no max-width/fixed height here */ } /* Portrait modifier: taller container for portrait-orientation images */ .ba-comparison--portrait { height: 480px; max-width: 400px; } /* Services page: full-width sliders (override portrait max-width constraint) */ .gallery-strip .services-sliders .ba-comparison--portrait { max-width: none !important; width: 100% !important; height: 480px; } .ba-comparison--portrait .ba-gallery-img-wrap { aspect-ratio: 3 / 4; } /* All images fill 100% of the container */ .ba-comparison img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* Before layer: static, fills container, z-index 1 */ .ba-before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* After layer: clipped, slides from left edge, z-index 3 */ .ba-after { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 3; } /* Slider handle bar */ .ba-handle { position: absolute; top: 0; height: 100%; width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); z-index: 5; } .ba-handle-line { width: 1px; flex: 1; background: rgba(255,255,255,0.4); } .ba-handle-knob { width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.2); flex-shrink: 0; letter-spacing: 0; font-family: monospace; line-height: 1; } /* Tag overlays on both images */ .ba-before .ba-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; background: rgba(26,26,26,0.75); color: #fff; pointer-events: none; } .ba-after .ba-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; background: rgba(201,93,43,0.9); color: #fff; pointer-events: none; } /* Caption below slider */ .ba-caption { margin-top: 12px; font-size: 13px; color: var(--fg-muted); font-style: italic; max-width: 720px; } /* CTA row */ .ba-cta { display: flex; align-items: center; gap: 24px; margin: 40px 0 48px; flex-wrap: wrap; } .ba-cta-text { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--fg); font-style: italic; } .btn-primary { display: inline-block; padding: 14px 32px; background: var(--accent); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 3px; transition: background 0.2s; letter-spacing: 0.02em; white-space: nowrap; } .btn-primary:hover { background: var(--accent-dark); } /* Empty state */ .ba-empty-state { text-align: center; padding: 48px 24px; border: 1px dashed var(--border); border-radius: 6px; max-width: 480px; } .ba-empty-icon { margin-bottom: 16px; display: flex; justify-content: center; opacity: 0.6; } .ba-empty-text { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--fg-muted); margin-bottom: 8px; } .ba-empty-sub { font-size: 13px; color: var(--fg-subtle); } /* ===================== AUTO-SLIDING GALLERY ===================== */ .ba-gallery-header { margin-top: 48px; margin-bottom: 32px; } .ba-gallery-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; margin-top: 8px; } /* Horizontal scrolling track */ .ba-gallery-wrap { position: relative; overflow: hidden; border-radius: 4px; } .ba-gallery-track { display: flex; gap: 0; animation: ba-slide 10s linear infinite; } /* Each "slide" = one before+after side-by-side pair */ .ba-gallery-slide { display: flex; gap: 16px; min-width: 100%; align-items: center; } .ba-gallery-img-wrap { position: relative; flex: 1; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 9; background: var(--cream-dark); } .ba-gallery-img-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .ba-gallery-img-wrap .ba-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; background: rgba(26,26,26,0.75); color: #fff; pointer-events: none; } .ba-gallery-caption { text-align: center; font-size: 13px; color: var(--fg-muted); font-style: italic; margin-top: 10px; padding: 0 16px; } /* Slide animation — no zoom/scale, just translate */ @keyframes ba-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Pause on hover */ .ba-gallery-wrap:hover .ba-gallery-track { animation-play-state: paused; } /* Responsive */ @media (max-width: 768px) { .ba-comparison { height: 280px; } .ba-cta { flex-direction: column; align-items: flex-start; gap: 16px; } .ba-handle-knob { width: 32px; height: 32px; font-size: 14px; } .ba-gallery-slide { gap: 8px; } .ba-gallery-img-wrap { aspect-ratio: 4 / 3; } } /* ===================== HERO STATIC PAIR (side-by-side, no slider) ===================== */ .hero-pair-static { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; } .static-box { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--cream-dark); } .static-box img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .static-tag { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: rgba(26,26,26,0.75); color: #fff; pointer-events: none; } .hero-caption { margin-top: 10px; font-size: 12px; color: var(--fg-subtle); font-style: italic; } /* ===================== BEFOREAFTER SECTION STATIC PAIR ===================== */ .ba-static-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 720px; margin-bottom: 0; } .ba-static-box { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--cream-dark); } .ba-static-box img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-static-box .ba-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; background: rgba(26,26,26,0.75); color: #fff; pointer-events: none; } /* ===================== MORE RESTORATIONS — per-pair sliders (removed) ===================== */ .ba-gallery-header { margin-top: 48px; margin-bottom: 32px; } .ba-gallery-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; margin-top: 8px; } .ba-gallery-pairs { display: flex; flex-direction: column; gap: 48px; } .ba-gallery-pair { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 768px) { .hero-pair-static { gap: 8px; } .ba-static-pair { gap: 12px; } }