/* Live weather backdrop · photo + particles · mode=clear-night · 10:28 */ /* Paint photo+overlay on with NO background-attachment:fixed — iOS Safari flashes when fixed bgs scroll. Browsers tile the photo to fit the html element which auto-stretches to document height. */ html { background: linear-gradient(rgba(7,8,16,0.30), rgba(7,8,16,0.30)), url('/assets/admin-bg/05-vernal-falls.jpg') center center / cover no-repeat, #0b0d18 !important; min-height: 100%; } body { background-color: transparent !important; background-image: none !important; } html::before, html::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; will-change: background-position, opacity; } @media (prefers-reduced-motion: reduce) { html::before, html::after { animation: none !important; } } @media print { html, body { background: white !important; } html::before, html::after { display: none !important; } } /* Every full-width section: NO color, NO image. The html sky shows straight through, giving you the continuous live-weather feel top-to-bottom of the page instead of stacked panels. */ section, .hero, .page-hero, .why, .features, .cta, #services, #about, #contact, #scrap { background: transparent !important; } /* Kill the colored radial-glow pseudo-elements on the hero — those tinted sections blue/purple, breaking the unified weather look. */ .hero::before, .hero::after, .page-hero::before, .page-hero::after { background: none !important; } /* Ticker is a thin strip — keep a near-solid dark band so the marquee text reads. */ .ticker-wrap { background: rgba(10,12,24,.78) !important; } /* Cards & content panels — semi-transparent so the sky bleeds through, but dark enough that text and inputs still read cleanly. */ .svc-card, .svc-cat-card, .scrap-card, .about-badge, .hero-about-badge, .phone-feature, .as-box, .cd-ico, .card, .tools, .studio-canvas-wrap, .studio-side, .step-bar .step, .info-modal, .cs-card, .price-card { background-color: rgba(15,18,32,.55) !important; } /* Contact form has many inputs that already darken its weight — go lighter so the live sky still shows behind it. */ .form-wrap { background-color: rgba(15,18,32,.4) !important; } /* Scrap-metal panel sets an inline multi-stop gradient — replace fully. */ .svc-scrap { background: rgba(15,18,32,.55) !important; } .svc-scrap::before { background: none !important; } /* Site footer — slightly darker so legal/contact text reads clearly. */ footer, .site-footer, .footer-wrap, .footer-bar { background-color: rgba(7,8,16,.85) !important; }