/* ATLAS AFTER BLUE — HOME HERO UPGRADE Load AFTER style.css and home.css. Overrides the old two-column hero (Earth as a separate framed image) with a full-bleed Earth background, fixes CSS conflicts, and adds interaction styles. */ /* ---------- Header floats over the hero, turns solid on scroll ---------- */ .site-header{margin-bottom:-77px;transition:background .3s,border-color .3s,box-shadow .3s} .site-header.is-over-hero{background:transparent;border-bottom-color:transparent} .site-header.is-scrolled{background:rgba(11,31,58,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(3,10,19,.25)} .site-nav a[aria-current=page]{border-bottom-color:var(--flood)} /* ---------- Hero: image is the background ---------- */ .hero{ min-height:min(100vh,880px); padding:0; display:flex;flex-direction:column; background:#050E1C; isolation:isolate; } .hero:before{display:none} /* old grid texture, replaced by .hero-shade */ .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .hero-bg-img{ position:absolute;inset:-3%; width:106%;height:106%;max-width:none; object-fit:cover;object-position:72% 50%; transform:translate3d(calc(var(--mx,0)*-16px),calc(var(--my,0)*-10px + var(--sy,0)*1px),0) scale(1.04); transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; } .hero-shade{ position:absolute;inset:0; background: linear-gradient(90deg,rgba(4,12,25,.94) 0%,rgba(4,12,25,.78) 30%,rgba(4,12,25,.28) 58%,rgba(4,12,25,0) 78%), linear-gradient(180deg,rgba(4,12,25,.65) 0%,rgba(4,12,25,0) 24%,rgba(4,12,25,0) 66%,rgba(4,12,25,.85) 100%); } .hero-glow{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px circle at var(--px,70%) var(--py,45%),rgba(41,182,246,.16),transparent 65%); mix-blend-mode:screen;transition:background-position .2s; } .hero-scan{ position:absolute;left:0;right:0;height:140px;top:-140px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(41,182,246,.07),transparent); animation:scan 7s linear infinite; } @keyframes scan{to{transform:translateY(calc(100vh + 280px))}} .hero-grid{ flex:1;display:flex;align-items:center; grid-template-columns:none;gap:0; padding-top:77px; /* header height (header overlaps hero) */ } .hero-copy{max-width:640px;padding:48px 0 70px} /* Fix: style.css `.hero p{...}` (0,1,1) was beating these single-class rules */ .hero .hero-index{font-size:11px;color:#8FA6C1;max-width:none;margin:30px 0 10px} .hero .hero-lead{font-size:17px;line-height:1.8;color:#D3DEEB;max-width:620px;margin:24px 0 0} .hero .eyebrow{color:#7FD0F7} .hero h1{text-shadow:0 4px 40px rgba(0,0,0,.45)} .hero h1 span{color:var(--flood)} /* Staggered entrance */ .hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both} .hero-copy>:nth-child(1){animation-delay:.05s} .hero-copy>:nth-child(2){animation-delay:.15s} .hero-copy>:nth-child(3){animation-delay:.25s} .hero-copy>:nth-child(4){animation-delay:.38s} .hero-copy>:nth-child(5){animation-delay:.5s} .hero-copy>:nth-child(6){animation-delay:.62s} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* Primary CTA */ .button-primary{ background:linear-gradient(135deg,#29B6F6,#1976D2);color:#fff;border:0;padding:14px 22px;font-size:15px; box-shadow:0 10px 30px rgba(41,182,246,.35); } .button-primary:hover{box-shadow:0 14px 38px rgba(41,182,246,.5)} .button-primary span{transition:transform .2s} .button-primary:hover span{transform:translateX(5px)} .quiet-link{position:relative;text-decoration:none;padding-bottom:4px} .quiet-link:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--flood);transform:scaleX(.35);transform-origin:left;transition:transform .3s} .quiet-link:hover:after{transform:scaleX(1)} /* Scroll cue */ .scroll-cue{position:absolute;left:50%;bottom:62px;width:24px;height:40px;margin-left:-12px;border:2px solid rgba(211,222,235,.55);border-radius:14px;z-index:2} .scroll-cue span{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite} @keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}} .hero-bottom-grid{margin-top:0;border-top:1px solid rgba(213,222,232,.2);background:rgba(4,12,25,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#9FB3C8} /* ---------- Scroll reveal (only when JS is running) ---------- */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)} .js .reveal.in{opacity:1;transform:none} /* keep card hover lift working after reveal */ .js .metric-card.reveal.in{transition:opacity .7s ease var(--d,0ms),transform .22s,box-shadow .22s,border-color .22s} /* ---------- Metric cards: cursor glow + count numbers ---------- */ .metric-card:after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s; background:radial-gradient(260px circle at var(--cx,50%) var(--cy,0%),rgba(41,182,246,.14),transparent 60%); } .metric-card:hover:after{opacity:1} .metric-value .count{font:inherit;letter-spacing:inherit} /* ---------- Fix: nav layout between 721px and 860px ---------- style.css turns