/* ───────────────────────────────────────────────────────────── Porters Place — Visual Enhancement Layer Shared knock-back imagery + glassmorphism layered on top of the existing static page styles. Additive only. ───────────────────────────────────────────────────────────── */ /* Section background image — set per-page by adding a body class (e.g. ) or per-section via

. Defaults shown below. */ body { position: relative; isolation: isolate; } /* Ambient page-wide background image, very low opacity, behind all sections */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: var(--page-bg, url('/assets/bg-architecture.jpg')); background-size: cover; background-position: center center; background-attachment: fixed; filter: saturate(0.55) blur(1px); opacity: 0.18; } /* Dark scrim to keep text legible */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at top, transparent 0%, rgba(13,13,13,0.45) 70%), linear-gradient(180deg, rgba(13,13,13,0.45) 0%, rgba(13,13,13,0.8) 100%); } /* Page-specific image swaps via body class */ body.bg-aerial { --page-bg: url('/assets/bg-aerial-city.jpg'); } body.bg-topographic { --page-bg: url('/assets/bg-topographic.jpg'); } body.bg-marble { --page-bg: url('/assets/bg-marble.jpg'); } body.bg-architecture{ --page-bg: url('/assets/bg-architecture.jpg'); } /* Glass pane: layered semi-transparent fill + blur + hairline border. Designed to drop-in over existing card classes used in static pages. */ .letter, .h-panel, .prob-item, .tile, .box, .card, .compare .card, .cta { background: rgba(22, 22, 22, 0.55) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.5), 0 2px 12px -2px rgba(0,0,0,0.3); transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease; } /* Hover lift on cards */ .tile:hover, .box:hover, .card:hover, .compare .card:hover, .prob-item:hover { transform: translateY(-2px); border-color: rgba(123, 185, 42, 0.32) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 30px 80px -20px rgba(123, 185, 42, 0.18), 0 8px 20px -4px rgba(0,0,0,0.35); } /* Sections need to sit above the page bg layers */ section, main, footer, nav { position: relative; z-index: 1; } /* Nav already has translucency — strengthen the glass and add hairline */ nav { background: rgba(13, 13, 13, 0.55) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border-bottom: 1px solid rgba(255,255,255,0.06); transition: padding .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; } nav.scrolled { padding-top: .75rem !important; padding-bottom: .75rem !important; background: rgba(13, 13, 13, 0.78) !important; border-bottom-color: rgba(255,255,255,0.1); box-shadow: 0 4px 24px -12px rgba(0,0,0,0.5); } /* Quiet ambient orbs in hero */ .hero { position: relative; } .hero::after { content: ''; position: absolute; pointer-events: none; top: 15%; right: -120px; width: 480px; height: 480px; border-radius: 9999px; background: radial-gradient(circle, rgba(123,185,42,0.18), transparent 70%); filter: blur(60px); z-index: 0; } .hero > *:not(.scan) { position: relative; z-index: 1; } .hero > .scan { position: absolute; z-index: 0; } /* Respect reduced motion / transparency */ @media (prefers-reduced-transparency: reduce) { .letter, .h-panel, .prob-item, .tile, .box, .card, .compare .card, .cta, nav { background: rgba(22, 22, 22, 0.95) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body::before { opacity: 0.08; } } @media (prefers-reduced-motion: reduce) { body::before { background-attachment: scroll; } .tile:hover, .box:hover, .card:hover, .compare .card:hover, .prob-item:hover { transform: none !important; } } /* Mobile: ease off blur to keep things smooth */ @media (max-width: 768px) { .letter, .h-panel, .prob-item, .tile, .box, .card, .compare .card, .cta { backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); } body::before { background-attachment: scroll; opacity: 0.12; } }