/* ========================================================================== CryoFlux Technologies — pages.css Page-level adjustments only. Shared rules live in components.css. Each carries a page class, e.g. . ========================================================================== */ /* Homepage ---------------------------------------------------------------- */ .page-home .hero { min-height: min(96vh, 960px); } .page-home .hero__media { inset: 0 0 0 34%; } /* Architecture ------------------------------------------------------------- */ .page-architecture .hero { min-height: min(74vh, 700px); padding-bottom: 80px; } .page-architecture .hero__media { inset: 0 0 0 42%; } .page-architecture .hero__copy .btn-row { margin-top: 32px; } /* The Proof ---------------------------------------------------------------- */ /* The machine spans the full frame on this page, so the image is full-bleed. */ .page-proof .hero { min-height: min(80vh, 760px); } .page-proof .hero__media { inset: 0; } .page-proof .hero__media::after { background: linear-gradient(90deg, rgba(7, 9, 12, 0.96) 0%, rgba(7, 9, 12, 0.8) 38%, rgba(7, 9, 12, 0.35) 70%, rgba(7, 9, 12, 0.62) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.5) 0%, rgba(7, 9, 12, 0.1) 40%, rgba(7, 9, 12, 0.78) 100%); } /* About -------------------------------------------------------------------- */ .page-about .hero { min-height: min(94vh, 920px); align-items: flex-start; } .page-about .hero__media { inset: 0 0 0 44%; } .page-about .hero__media::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 9, 12, 0.95) 28%, rgba(7, 9, 12, 0.45) 60%, rgba(7, 9, 12, 0.15) 85%, rgba(7, 9, 12, 0.4) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.5) 0%, rgba(7, 9, 12, 0) 40%, rgba(7, 9, 12, 0.55) 100%); } /* Applications -------------------------------------------------------------- */ /* Copy sits on the dark field, imagery arrives in the card row below. */ .page-applications .intro { padding-top: calc(var(--nav-h) + clamp(64px, 9vw, 120px)); } /* CryoWorx ------------------------------------------------------------------ */ .page-cryoworx .hero { min-height: min(86vh, 840px); } .page-cryoworx .hero__media { inset: 0 0 0 38%; } /* Investors ----------------------------------------------------------------- */ .page-investors .hero { min-height: min(92vh, 900px); } .page-investors .hero__media { inset: 0 0 0 36%; } .page-investors .hero__media::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 9, 12, 0.95) 26%, rgba(7, 9, 12, 0.5) 58%, rgba(7, 9, 12, 0.18) 82%, rgba(7, 9, 12, 0.45) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.55) 0%, rgba(7, 9, 12, 0) 38%, rgba(7, 9, 12, 0.65) 100%); } /* Contact -------------------------------------------------------------------- */ .page-contact .intro { padding-top: calc(var(--nav-h) + clamp(64px, 9vw, 116px)); } /* Intro sections (Applications, Contact) ----------------------------------- */ .intro .lede { margin-top: 32px; } .intro .display + .lede { max-width: 46rem; } /* Proof page: lighter hero scrim so the test article reads (Founder note Sep 9) */ .page-proof .hero__media::after { background: linear-gradient(90deg, rgba(7, 9, 12, 0.82) 0%, rgba(7, 9, 12, 0.45) 38%, rgba(7, 9, 12, 0.10) 62%, rgba(7, 9, 12, 0.22) 100%); } /* About page: lighter hero scrim over the portrait side (Founder note Sep 9) */ .page-about .hero__media::after { background: linear-gradient(90deg, rgba(7, 9, 12, 0.85) 0%, rgba(7, 9, 12, 0.50) 35%, rgba(7, 9, 12, 0.06) 65%, rgba(7, 9, 12, 0.15) 100%); } /* About portrait, mobile: bias crop to the top so the head crown survives */ @media (max-width: 760px) { .page-about .hero__media img { object-position: center 12%; } } /* Investors, mobile: seat the word rail up in the blank dark field at the lower left of the Earth image instead of floating below it (Founder note Sep 9) */ @media (max-width: 760px) { .page-investors .hero__extras .rail { position: relative; z-index: 3; margin-top: -120px; margin-left: 28px; } } /* CryoWorx: lighter hero scrim so the facility reads (Founder note Sep 9) */ .page-cryoworx .hero__media::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 9, 12, 0.9) 24%, rgba(7, 9, 12, 0.38) 52%, rgba(7, 9, 12, 0.08) 78%, rgba(7, 9, 12, 0.28) 100%), linear-gradient(180deg, rgba(7, 9, 12, 0.38) 0%, rgba(7, 9, 12, 0) 40%, rgba(7, 9, 12, 0.45) 100%); }