/* ============================================================= SO FLO FOTOS — Three.js Background + Glassmorphism Only activates when JS adds .sff-three-active to ============================================================= */ /* ── Canvas: fixed fullscreen layer behind everything ── */ #sff-three-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; will-change: transform; /* hint to browser: don't composite with page layers */ } /* ============================================================= SECTION BACKGROUNDS — semi-transparent so canvas peeks through Falls back silently if JS never runs (no .sff-three-active). ============================================================= */ .sff-three-active .sff-services { background: rgba(245, 240, 232, 0.83); } .sff-three-active .sff-about { background: rgba(255, 255, 255, 0.86); } .sff-three-active .sff-portfolio-teaser { background: rgba(245, 240, 232, 0.80); } .sff-three-active .sff-why { background: rgba(240, 234, 224, 0.82); } .sff-three-active .sff-reviews-section { background: rgba(255, 255, 255, 0.84); } /* Hero + CTA banner: keep fully opaque — photos / dark bg own those sections */ .sff-three-active .sff-hero, .sff-three-active .sff-cta-banner { /* no change — these sections already have full visual fills */ } /* ============================================================= GLASSMORPHISM — HEADER ============================================================= */ /* Scrolled / solid header → frosted cream glass */ .sff-three-active .sff-header--solid, .sff-three-active .sff-header.is-scrolled { background: rgba(245, 240, 232, 0.78) !important; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(194, 113, 79, 0.06); } /* Transparent homepage header → very subtle dark glass over hero photo */ .sff-three-active .sff-header--transparent { backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); } /* ============================================================= GLASSMORPHISM — CONTENT CARDS ============================================================= */ /* Review cards → frosted white glass */ .sff-three-active .sff-review-card { background: rgba(255, 255, 255, 0.60); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70); transition: box-shadow var(--t-base), transform var(--t-base); } .sff-three-active .sff-review-card:hover { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.80); transform: translateY(-2px); } /* Why/process items → lightweight glass tiles */ .sff-three-active .sff-why__item { background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 2px; padding: var(--sp-8) var(--sp-6); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); transition: background var(--t-base), box-shadow var(--t-base); } .sff-three-active .sff-why__item:hover { background: rgba(255, 255, 255, 0.46); box-shadow: 0 4px 28px rgba(0, 0, 0, 0.09); } /* About section content pane → warm frosted glass */ .sff-three-active .sff-about__content { background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 1px solid rgba(255, 255, 255, 0.50); } /* Services section header text block — no glass, just let section bg carry it */ /* Mobile drawer → match frosted cream glass */ .sff-three-active .sff-drawer { background: rgba(245, 240, 232, 0.94); backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); } /* ============================================================= INVESTMENT / PRICING CARDS (if they exist on other pages) ============================================================= */ .sff-three-active .sff-pricing-card, .sff-three-active .sff-package-card { background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07); } /* ============================================================= CONTACT / FORM CONTAINERS ============================================================= */ .sff-three-active .sff-contact-form, .sff-three-active .entry-content .wpcf7, .sff-three-active .sff-form-wrap { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.50); border-radius: 2px; box-shadow: 0 6px 40px rgba(0, 0, 0, 0.08); padding: var(--sp-10); } /* ============================================================= PERFORMANCE — disable expensive filters on low-end devices ============================================================= */ /* Disable backdrop-filter on small screens (battery + GPU concern) */ @media (max-width: 480px) { .sff-three-active .sff-review-card, .sff-three-active .sff-why__item, .sff-three-active .sff-header--solid, .sff-three-active .sff-header.is-scrolled, .sff-three-active .sff-header--transparent, .sff-three-active .sff-about__content, .sff-three-active .sff-drawer, .sff-three-active .sff-pricing-card, .sff-three-active .sff-package-card, .sff-three-active .sff-contact-form, .sff-three-active .entry-content .wpcf7, .sff-three-active .sff-form-wrap { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Disable all effects for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { #sff-three-canvas { display: none; } .sff-three-active .sff-review-card, .sff-three-active .sff-why__item, .sff-three-active .sff-header--solid, .sff-three-active .sff-header.is-scrolled, .sff-three-active .sff-header--transparent, .sff-three-active .sff-about__content, .sff-three-active .sff-drawer { backdrop-filter: none; -webkit-backdrop-filter: none; } }