/* ========================================================================= The Forge — persistent living background ("cosmos") The Helios animation is the permanent site background on every page. Include on all pages; add class="cosmos" to on the light (styles.css) pages to flip them to a dark glass theme that sits over the animation. ========================================================================= */ .site-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0B0A09;pointer-events:none} .site-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .site-bg .scrim{position:absolute;inset:0; background:radial-gradient(125% 95% at 50% 42%,rgba(11,10,9,.32),rgba(11,10,9,.74) 100%)} /* keep all page content above the living background */ body.cosmos{background:#0B0A09;color:#ECE7DF} body.cosmos > *:not(.site-bg){position:relative;z-index:1} /* ---- dark "glass over cosmos" theme for the light (styles.css) pages ---- */ body.cosmos .site-header{border-bottom-color:rgba(234,88,12,.55);background:rgba(11,10,9,.38);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)} body.cosmos .brand .wordmark{color:#F8F6F2} body.cosmos .site-header .tagline{color:#B8B0A6} /* surfaces → translucent dark glass */ body.cosmos .hero-copy, body.cosmos .card, body.cosmos .messaging, body.cosmos .doc .callout{ background:rgba(18,16,14,.64); border-color:rgba(234,88,12,.22); -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); } body.cosmos .hero .wrap{border-color:rgba(234,88,12,.22);background:rgba(11,10,9,.26);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} body.cosmos .build-menu{background:rgba(12,11,9,.7);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)} body.cosmos .contact .block{background:rgba(12,11,9,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} body.cosmos .card{border-color:rgba(234,222,212,.16)} /* text → light */ body.cosmos h1,body.cosmos h2,body.cosmos h3,body.cosmos h4{color:#F8F6F2} body.cosmos p,body.cosmos li, body.cosmos .hero-copy .subhead, body.cosmos .lede, body.cosmos .section-head p, body.cosmos .card p, body.cosmos .step p, body.cosmos .messaging p, body.cosmos .messaging li, body.cosmos .doc p,body.cosmos .doc li{color:#D8D2CA} body.cosmos .eyebrow, body.cosmos .section-label, body.cosmos .messaging .fineprint, body.cosmos .doc .updated, body.cosmos .hero-cta .note, body.cosmos .offer-desc{color:#A89F94} body.cosmos .offer-name .name{color:#F8F6F2} body.cosmos .messaging .section-label{color:var(--ember-bright)} body.cosmos .doc .callout p{color:#F8F6F2} /* dividers / footer → translucent */ body.cosmos .step{border-top-color:rgba(234,88,12,.5)} body.cosmos .doc h2{border-top-color:rgba(234,222,212,.14)} body.cosmos .site-footer{border-top-color:rgba(234,222,212,.14);background:rgba(11,10,9,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} body.cosmos .site-footer .entity{color:#F8F6F2} body.cosmos .site-footer .msg{color:#B8B0A6} body.cosmos .site-footer .meta{border-top-color:rgba(234,222,212,.14);color:#B8B0A6} /* legal/doc body → readable dark sheet over the cosmos (compliance must stay legible) */ body.cosmos .doc .wrap{ background:rgba(14,12,11,.76); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(234,222,212,.12); border-radius:14px; padding:44px 42px 56px; margin-block:28px 52px; } /* floating section intros / steps stay legible over bright cosmos */ body.cosmos .section-head h2, body.cosmos .section-head p, body.cosmos .step h3, body.cosmos .step p{ text-shadow:0 2px 16px rgba(0,0,0,.75) }