@font-face{ font-family: "Red Hat Display"; src: url("/assets/fonts/red-hat/RedHatDisplay-VF.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face{ font-family: "Red Hat Text"; src: url("/assets/fonts/red-hat/RedHatText-VF.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face{ font-family: "Red Hat Mono"; src: url("/assets/fonts/red-hat/RedHatMono-VF.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ========================================================= UBUNTU FONT FAMILY Self-hosted website fonts. ========================================================= */ @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-Th.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-L.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-LI.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-R.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-RI.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-M.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-MI.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-B.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu"; src: url("/assets/fonts/ubuntu/Ubuntu-BI.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Ubuntu Condensed */ @font-face{ font-family: "Ubuntu Condensed"; src: url("/assets/fonts/ubuntu/Ubuntu-C.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Ubuntu Mono */ @font-face{ font-family: "Ubuntu Mono"; src: url("/assets/fonts/ubuntu/UbuntuMono-R.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu Mono"; src: url("/assets/fonts/ubuntu/UbuntuMono-RI.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face{ font-family: "Ubuntu Mono"; src: url("/assets/fonts/ubuntu/UbuntuMono-B.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face{ font-family: "Ubuntu Mono"; src: url("/assets/fonts/ubuntu/UbuntuMono-BI.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ========================================================= HOME PAGE STYLES Consolidated from home-hero.css + home-cards.css. Original order preserved: hero first, cards/sections second. ========================================================= */ /* ========================================================= Index (Home) — Robinhood-style hero Scoped to: ========================================================= */ .page--home{ --cas-font-display: "Red Hat Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cas-font-text: "Red Hat Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cas-font-mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: var(--cas-font-text); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .page--home button, .page--home input, .page--home select, .page--home textarea{ font-family: inherit; } /* ========================================================= HOME HERO — Robinhood IPO-style access hero ========================================================= */ .page--home .cas-ipo-hero{ position: relative; height: 825px; min-height: 825px; overflow: hidden; background: radial-gradient(900px 520px at 63% 46%, rgba(255,255,255,.62) 0%, rgba(238,243,246,.42) 34%, rgba(221,229,234,0) 72%), radial-gradient(1200px 720px at 88% 12%, rgba(245,248,250,.58) 0%, rgba(224,232,237,.42) 42%, rgba(206,216,222,0) 76%), radial-gradient(900px 620px at 8% 0%, rgba(190,201,207,.52) 0%, rgba(207,217,223,.32) 42%, rgba(214,223,228,0) 74%), #d8e1e6; color: #000; } .page--home .cas-ipo-hero__inner{ position: relative; z-index: 1; width: 100%; height: 825px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(650px, 1fr); align-items: start; padding: 175px 88px 0; } .page--home .cas-ipo-hero__copy{ position: relative; z-index: 2; } .page--home .cas-ipo-hero__visual{ position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: min(56vw, 980px); height: 100%; overflow: hidden; pointer-events: none; } .page--home .cas-ipo-hero__chain{ position: absolute; display: block; background: transparent; --poster-color: transparent; pointer-events: none; user-select: none; } .page--home .cas-ipo-hero__chain::part(default-progress-bar){ display: none; } .page--home .cas-ipo-hero__chain--desktop{ top: -6%; right: -8%; /* * Render the WebGL canvas at twice the displayed dimensions, * then reduce it to the exact original visible size. */ width: 232%; height: 224%; scale: 0.5; transform-origin: top right; transform: translate3d(0, 45px, 0); } /* Very narrow desktop */ @media (min-width: 860px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(665px, 45px, 0); } } /* Very narrow desktop */ @media (min-width: 870px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(655px, 45px, 0); } } /* Very narrow desktop */ @media (min-width: 880px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(645px, 45px, 0); } } /* Narrow desktop */ @media (min-width: 901px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(635px, 45px, 0); } } /* Narrow desktop */ @media (min-width: 920px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(625px, 45px, 0); } } /* Narrow desktop */ @media (min-width: 931px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(615px, 45px, 0); } } /* Narrow-to-medium desktop */ @media (min-width: 946px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(625px, 45px, 0); } } /* Medium desktop */ @media (min-width: 1001px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(465px, 45px, 0); } } /* Medium desktop */ @media (min-width: 1021px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(435px, 45px, 0); } } /* Wider medium desktop */ @media (min-width: 1041px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(405px, 45px, 0); } } /* Wider medium desktop */ @media (min-width: 1061px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(405px, 45px, 0); } } /* Wider medium desktop */ @media (min-width: 1081px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(425px, 45px, 0); } } /* Wider medium desktop */ @media (min-width: 1101px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(405px, 45px, 0); } } /* Wider medium desktop */ @media (min-width: 1121px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(390px, 45px, 0); } } /* Wider medium desktop */ @media (min-width: 1201px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(324px, 45px, 0); } } /* Full-width desktop */ @media (min-width: 1280px){ .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(0, 45px, 0); } } .page--home .cas-ipo-hero__chain--mobile{ display: none; } .page--home .cas-ipo-hero__eyebrow{ margin: 0 0 16px; color: #000; font-family: var(--cas-font-text); font-size: 22px; font-weight: 700; line-height: 1; } .page--home .cas-ipo-hero h1{ width: 8.78em; max-width: 8.78em; margin: 0; color: #000; font-family: var(--cas-font-display); font-size: 74px; font-weight: 500; letter-spacing: -.065em; line-height: 1.02; } .page--home .cas-ipo-hero__sub{ width: 740px; max-width: 740px; margin: 38px 0 0; color: #000; font-family: var(--cas-font-text); font-size: 24px; font-weight: 700; line-height: 1.35; } .page--home .cas-ipo-hero__disclosure{ display: flex; align-items: center; width: max-content; gap: 6px; margin-top: 33px; color: rgba(0,0,0,.72); font-family: var(--cas-font-text); font-size: 12px; font-weight: 550; line-height: 1; text-decoration: none; } .page--home .cas-ipo-hero__disclosure:hover span:last-child{ text-decoration: underline; } .page--home .cas-ipo-hero__info{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: rgba(0,0,0,.68); font-size: 9px; font-weight: 800; line-height: 1; } .page--home .cas-ipo-hero__info::before{ content: ""; position: absolute; left: 0; top: -1.5px; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.42); border-radius: 50%; pointer-events: none; } .page--home .cas-ipo-hero__btn{ display: flex; align-items: center; justify-content: center; width: max-content; min-width: 118px; height: 44px; margin-top: 36px; padding: 0 34px; border-radius: 999px; background: #050505; color: #fff; font-family: var(--cas-font-text); font-size: 16px; font-weight: 800; line-height: 1; text-decoration: none; } .page--home .cas-ipo-hero__btn:hover{ transform: translateY(-1px); } .page--home .cas-ipo-hero__visual{ min-height: 1px; } /* Disclosure popup */ .page--home .cas-disclosureModal{ position: fixed; inset: 0; z-index: 99999; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 160ms ease, visibility 160ms ease; } .page--home .cas-disclosureModal:target{ visibility: visible; opacity: 1; pointer-events: auto; } .page--home .cas-disclosureModal__shade{ position: absolute; inset: 0; display: block; background: rgba(0,0,0,.72); } .page--home .cas-disclosureModal__panel{ position: absolute; top: 50%; left: 50%; width: 620px; min-height: 312px; transform: translate(-50%, -50%); background: #fff; color: #000; padding: 72px 80px 64px; box-shadow: 0 28px 80px rgba(0,0,0,.34); } .page--home .cas-disclosureModal__close{ position: absolute; top: 34px; right: 42px; color: #000; font-family: var(--cas-font-text); font-size: 38px; font-weight: 400; line-height: 1; text-decoration: none; } .page--home .cas-disclosureModal__panel h2{ margin: 0 0 22px; color: #000; font-family: var(--cas-font-display); font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; } .page--home .cas-disclosureModal__panel p{ margin: 0; color: #000; font-family: var(--cas-font-text); font-size: 16px; font-weight: 700; line-height: 1.45; } .page--home .cas-disclosureModal__panel p + p{ margin-top: 30px; } .page--home .cas-disclosureModal__panel a{ color: #000; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 860px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: 820px; min-height: 820px; } .page--home .cas-ipo-hero__inner{ box-sizing: border-box; grid-template-columns: 1fr; padding: 118px clamp(32px, 6.511628vw, 56px) 0; } .page--home .cas-ipo-hero__copy{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 0; width: 100%; max-width: 640px; min-width: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .page--home .cas-ipo-hero h1{ flex: none; width: 100%; max-width: 540px; min-width: 0; margin: 0; font-size: 60px; white-space: normal; overflow-wrap: normal; word-break: normal; text-wrap: balance; } .page--home .cas-ipo-hero__sub{ flex: none; box-sizing: border-box; width: 100%; max-width: 640px; height: auto; min-height: 0; margin: 30px 0 0; white-space: normal; overflow-wrap: break-word; word-break: normal; } .page--home .cas-ipo-hero__btn{ flex: none; box-sizing: border-box; max-width: 100%; margin: 28px 0 0; white-space: nowrap; } .page--home .cas-ipo-hero__visual{ display: block; top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: calc(34% + 20px); overflow: hidden; } .page--home .cas-ipo-hero__chain--desktop{ display: none; } .page--home .cas-ipo-hero__chain--mobile{ display: block; left: -20%; bottom: -14%; width: 140%; height: 130%; } } @media (max-width: 660px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: 810px; min-height: 810px; } .page--home .cas-ipo-hero__inner{ padding: 112px clamp(28px, 6.060606vw, 40px) 0; } .page--home .cas-ipo-hero__copy{ max-width: 100%; } .page--home .cas-ipo-hero h1{ max-width: 540px; font-size: 58px; } .page--home .cas-ipo-hero__sub{ max-width: 100%; margin-top: 28px; font-size: 21px; } .page--home .cas-ipo-hero__btn{ margin-top: 26px; } .page--home .cas-ipo-hero__visual{ height: 35%; } .page--home .cas-ipo-hero__chain--mobile{ left: -21%; bottom: -12%; width: 142%; height: 132%; } } /* Slightly smaller hero title and tighter spacing: 545px and below */ @media (max-width: 545px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: 825px; min-height: 825px; } .page--home .cas-ipo-hero__inner{ padding-top: 110px; } .page--home .cas-ipo-hero h1{ font-size: 54px; } .page--home .cas-ipo-hero__sub{ margin-top: 26px; font-size: 19px; } .page--home .cas-ipo-hero__btn{ margin-top: 24px; } } @media (max-width: 520px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: max(850px, calc(100svh - 48px)); min-height: max(850px, calc(100svh - 48px)); } .page--home .cas-ipo-hero__inner{ padding: 110px 28px 0; } .page--home .cas-ipo-hero__copy, .page--home .cas-ipo-hero h1, .page--home .cas-ipo-hero__sub{ width: 100%; max-width: 100%; } .page--home .cas-ipo-hero__eyebrow{ font-size: 23px; } .page--home .cas-ipo-hero h1{ font-size: 52px; } .page--home .cas-ipo-hero__sub{ margin-top: 25px; font-size: 18px; } .page--home .cas-ipo-hero__btn{ min-width: 170px; height: 50px; margin-top: 24px; padding: 0 38px; font-size: 17px; } .page--home .cas-ipo-hero__visual{ bottom: 24px; height: 35%; } .page--home .cas-ipo-hero__chain--mobile{ left: -23%; bottom: -9%; width: 146%; height: 136%; transform: translateY(-16px); } .page--home .cas-disclosureModal__panel{ width: calc(100vw - 40px); min-height: 280px; padding: 52px 28px 38px; } .page--home .cas-disclosureModal__close{ top: 22px; right: 24px; } } @media (max-width: 460px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: max(870px, calc(100svh - 48px)); min-height: max(870px, calc(100svh - 48px)); } .page--home .cas-ipo-hero__inner{ padding: 106px 26px 0; } .page--home .cas-ipo-hero__eyebrow{ font-size: 22px; } .page--home .cas-ipo-hero h1{ font-size: 50px; } .page--home .cas-ipo-hero__sub{ margin-top: 24px; font-size: 17.5px; } .page--home .cas-ipo-hero__btn{ min-width: 164px; height: 48px; margin-top: 23px; padding: 0 35px; font-size: 16.5px; } .page--home .cas-ipo-hero__visual{ bottom: 32px; height: 36%; } .page--home .cas-ipo-hero__chain--mobile{ left: -25%; bottom: -7%; width: 150%; height: 138%; transform: translateY(-22px); } } @media (max-width: 400px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: max(900px, calc(100svh - 48px)); min-height: max(900px, calc(100svh - 48px)); } .page--home .cas-ipo-hero__inner{ padding: 102px 24px 0; } .page--home .cas-ipo-hero__eyebrow{ font-size: 21px; } .page--home .cas-ipo-hero h1{ font-size: 47px; } .page--home .cas-ipo-hero__sub{ margin-top: 23px; font-size: 17px; } .page--home .cas-ipo-hero__btn{ min-width: 158px; height: 46px; margin-top: 22px; padding: 0 32px; font-size: 16px; } .page--home .cas-ipo-hero__visual{ bottom: 40px; height: 37%; } .page--home .cas-ipo-hero__chain--mobile{ left: -27%; bottom: -5%; width: 154%; height: 141%; transform: translateY(-28px); } } /* Laptop-height desktop hero: reproduces the proportions of 90% browser zoom at 100% */ @media (min-width: 1280px) and (max-height: 950px){ .page--home .cas-ipo-hero, .page--home .cas-ipo-hero__inner{ height: 742.5px; min-height: 742.5px; } .page--home .cas-ipo-hero{ background: radial-gradient(810px 468px at 63% 46%, rgba(255,255,255,.62) 0%, rgba(238,243,246,.42) 34%, rgba(221,229,234,0) 72%), radial-gradient(1080px 648px at 88% 12%, rgba(245,248,250,.58) 0%, rgba(224,232,237,.42) 42%, rgba(206,216,222,0) 76%), radial-gradient(810px 558px at 8% 0%, rgba(190,201,207,.52) 0%, rgba(207,217,223,.32) 42%, rgba(214,223,228,0) 74%), #d8e1e6; } .page--home .cas-ipo-hero__inner{ grid-template-columns: minmax(0, 1fr) minmax(585px, 1fr); padding: 157.5px 79.2px 0; } .page--home .cas-ipo-hero__visual{ width: min(56vw, 882px); } .page--home .cas-ipo-hero__chain--desktop{ transform: translate3d(0, 40.5px, 0); } .page--home .cas-ipo-hero__eyebrow{ margin-bottom: 14.4px; font-size: 19.8px; } .page--home .cas-ipo-hero h1{ width: 8.78em; max-width: 8.78em; font-size: 66.6px; } .page--home .cas-ipo-hero__sub{ width: 666px; max-width: 666px; margin-top: 34.2px; font-size: 21.6px; } .page--home .cas-ipo-hero__disclosure{ gap: 5.4px; margin-top: 29.7px; font-size: 10.8px; } .page--home .cas-ipo-hero__info{ width: 12.6px; height: 12.6px; font-size: 8.1px; } .page--home .cas-ipo-hero__info::before{ top: -1.35px; width: 12.6px; height: 12.6px; } .page--home .cas-ipo-hero__btn{ min-width: 106.2px; height: 39.6px; margin-top: 32.4px; padding-right: 30.6px; padding-left: 30.6px; font-size: 14.4px; } } .page--home .rh-hero { position: relative; min-height: 100vh; overflow: hidden; background: #000; } /* Background gradient like the screenshot (gray -> blue -> black) */ .page--home .rh-hero__bg { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% -10%, rgba(140, 180, 210, 0.28), transparent 60%), radial-gradient(900px 600px at 85% 10%, rgba(185, 255, 44, 0.10), transparent 55%), radial-gradient(900px 600px at 15% 15%, rgba(255, 255, 255, 0.06), transparent 60%), linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 35%, rgba(0,0,0,0.88) 100%); pointer-events: none; filter: saturate(1.02) contrast(1.03); } /* Vignette for depth */ .page--home .rh-hero__bg::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 50% 35%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.92) 100%); pointer-events: none; } .page--home .rh-hero__inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: clamp(84px, 10vh, 120px) 20px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Big Robinhood-like headline */ .page--home .rh-hero__title { margin: 0; color: rgba(255,255,255,0.95); font-family: var(--cas-font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(44px, 6.2vw, 86px); } .page--home .rh-hero__title span { display: inline-block; } /* Small caption text */ .page--home .rh-hero__sub { margin: 18px 0 18px; max-width: 620px; color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.5; } /* Neon green pill button */ .page--home .rh-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 16px 38px; border-radius: 999px; background: #59E00B; color: #0b0c0d; font-family: var(--cas-font-text); text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 0 18px 60px rgba(0,0,0,0.55); } .page--home .rh-btn:hover { transform: translateY(-1px); } .page--home .rh-hero__fineprint { margin: 16px 0 0; color: rgba(255,255,255,0.55); font-size: 13px; } /* Make sure your old hero image/canvas art doesn't fight this */ .page--home .rh-hero.hero--full { background-image: none !important; } .page--home .rh-hero .hero-art, .page--home .rh-hero #pinBurst, .page--home .rh-hero #lockFade { display: none !important; } @media (max-width: 520px) { .page--home .rh-hero__sub { font-size: 13px; } } /* =========================== 3D phone (INDEX hero) — CLEAN =========================== */ .page--home .rh-hero__device { width: min(340px, 76vw); margin: 0 0 26px 0; perspective: 1400px; perspective-origin: 50% 35%; } .page--home .rh-deviceStage { position: relative; width: 100%; transform-style: preserve-3d; display: grid; place-items: center; } /* shadow on the “floor” */ .page--home .rh-deviceShadow { position: absolute; inset: auto 16% -18px 16%; height: 46px; background: radial-gradient(closest-side, rgba(0,0,0,0.70), transparent 70%); filter: blur(12px); transform: translateZ(-60px); opacity: 0.85; } /* wrapper we rotate/tilt (JS writes transform here AFTER entrance) */ .page--home .rh-deviceWrap { position: relative; transform-style: preserve-3d; transform-origin: 50% 62%; will-change: transform; display: grid; place-items: center; } /* --------------------------- The CLEAN CSS phone (more like your reference) --------------------------- */ .page--home .rh-deviceTilt { transform-style: preserve-3d; transform-origin: 50% 60%; will-change: transform; transform: rotateX(0deg) rotateY(0deg); position: relative; display: grid; place-items: center; } .page--home .rh-deviceGlow{ position: absolute; inset: -24% -28%; background: radial-gradient(closest-side at var(--mx, 50%) var(--my, 45%), rgba(255,255,255,0.10), transparent 58%), radial-gradient(closest-side at 55% 40%, rgba(255,255,255,0.06), transparent 65%), radial-gradient(closest-side at 45% 55%, rgba(140,180,210,0.10), transparent 68%); filter: blur(22px); transform: translateZ(-10px); opacity: 0.45; pointer-events: none; mix-blend-mode: screen; } .page--home .rh-phone3d { width: min(270px, 62vw); aspect-ratio: 9 / 18.5; /* ~20% shorter (cuts bottom “2/10” off the silhouette) */ position: relative; transform-style: preserve-3d; /* reflection control (JS updates these) */ --mx: 50%; --my: 45%; } .page--home .rh-phone3d__body { position: relative; width: 100%; height: 100%; border-radius: 44px; background: #000; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 62px 170px rgba(0,0,0,0.84), 0 24px 74px rgba(0,0,0,0.64), inset 0 0 0 1px rgba(255,255,255,0.06); overflow: visible; transform: translateZ(26px); backface-visibility: hidden; } /* subtle edge darkening for depth */ .page--home .rh-phone3d__body::after { content: ""; position: absolute; inset: 0; border-radius: 44px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.1); pointer-events: none; } /* thickness/side planes (L + R) */ .page--home .rh-phone3d__side{ position: absolute; top: 12px; bottom: 12px; width: 18px; pointer-events: none; filter: drop-shadow(0 28px 76px rgba(0,0,0,0.55)); } .page--home .rh-phone3d__side--l{ left: 0; border-radius: 30px 0 0 30px; background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 30%, rgba(0,0,0,0.88) 100%), linear-gradient(to left, rgba(255,255,255,0.10), rgba(0,0,0,0.0)); border-right: 1px solid rgba(255,255,255,0.10); transform-origin: 100% 50%; transform: translateZ(26px) rotateY(-90deg); } .page--home .rh-phone3d__side--r{ right: 0; border-radius: 0 30px 30px 0; background: linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(0,0,0,0.90) 100%), linear-gradient(to right, rgba(255,255,255,0.10), rgba(0,0,0,0.0)); border-left: 1px solid rgba(255,255,255,0.10); transform-origin: 0% 50%; transform: translateZ(26px) rotateY(90deg); } /* --- Layer order: sides/buttons behind bezel/screen --- */ .page--home .rh-phone3d__side { z-index: 2; } .page--home .rh-phone3d__btn, .page--home .rh-phone3d__btnR { z-index: 3; } .page--home .rh-phone3d__bezel { z-index: 6; } .page--home .rh-phone3d__screen{ z-index: 7; } /* bezel + screen */ .page--home .rh-phone3d__bezel { position: absolute; inset: 10px; border-radius: 34px; background: rgba(0,0,0,0.72); border: 1px solid rgba(255,255,255,0.09); overflow: hidden; } .page--home .rh-phone3d__screen { position: absolute; inset: 10px; border-radius: 24px; background: linear-gradient(180deg, #15171b 0%, #0a0b0d 55%, #050607 100%); border: 1px solid rgba(255,255,255,0.10); overflow: hidden; /* crisp glass depth */ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 22px 38px rgba(255,255,255,0.04), inset 0 -28px 46px rgba(0,0,0,0.55); } /* main specular streak */ .page--home .rh-phone3d__screen::before { content: ""; position: absolute; inset: -30% -25%; background: linear-gradient( 135deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.16) 18%, rgba(255,255,255,0.06) 30%, transparent 55% ); transform: translateY(-6%) rotate(-10deg); opacity: 0.55; mix-blend-mode: screen; pointer-events: none; } /* edge gloss + subtle lens bloom */ .page--home .rh-phone3d__screen::after { content: ""; position: absolute; inset: -10%; background: radial-gradient(closest-side at 30% 20%, rgba(255,255,255,0.18), transparent 62%), radial-gradient(closest-side at 70% 75%, rgba(25,85,125,0.16), transparent 70%); opacity: 0.35; mix-blend-mode: screen; pointer-events: none; } /* moving “glass reflection” layer */ .page--home .rh-phone3d__screen::before { content: ""; position: absolute; inset: -18%; background: /* crisp main streak */ linear-gradient( 125deg, transparent 0%, rgba(255,255,255,0.22) 34%, rgba(255,255,255,0.10) 42%, transparent 58% ), /* small hotspot that follows mouse */ radial-gradient( closest-side at var(--mx, 50%) var(--my, 45%), rgba(255,255,255,0.18), transparent 58% ); opacity: 0.38; mix-blend-mode: screen; filter: blur(0.6px); transform: translateZ(1px); pointer-events: none; } .page--home .rh-phone3d__screenGlow { position: absolute; inset: -25%; background: radial-gradient(closest-side at 55% 35%, rgba(255,255,255,0.08), transparent 62%), radial-gradient(closest-side at 45% 55%, rgba(25,85,125,0.14), transparent 60%); filter: blur(22px); opacity: 0.35; mix-blend-mode: screen; pointer-events: none; } /* notch + speaker (subtle like the reference) */ .page--home .rh-phone3d__notch { position: absolute; left: 50%; top: 7px; width: 40%; height: 16px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: rgba(0,0,0,0.92); border: 1px solid rgba(255,255,255,0.05); opacity: 0.95; } /* clean specular shine (also moves) */ .page--home .rh-phone3d__shine { position: absolute; inset: -18% -18%; background: linear-gradient( 140deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 26%, transparent 46% ), radial-gradient( closest-side at var(--mx, 50%) calc(var(--my, 45%) - 10%), rgba(255,255,255,0.10), transparent 62% ); opacity: 0.42; mix-blend-mode: screen; filter: blur(0.8px); transform: translateZ(28px); pointer-events: none; } /* =========================== Fly-in entrance (CSS ONLY) Outer wrapper moves + fades =========================== */ /* Start state before .is-in */ .page--home .js-tilt-card .rh-deviceWrap { opacity: 0; transform-style: preserve-3d; will-change: transform, opacity; transform: translate3d(260px, 0, -320px) rotateY(-34deg) rotateX(18deg) scale(0.90); } /* Shadow starts faint/smaller */ .page--home .js-tilt-card .rh-deviceShadow { opacity: 0; transform: translateZ(-40px) scale(0.85); will-change: transform, opacity; } /* When visible */ .page--home .js-tilt-card.is-in .rh-deviceWrap { animation: rhFlyIn 1800ms linear forwards; } .page--home .js-tilt-card.is-in .rh-deviceShadow { animation: rhShadowIn 3600ms linear forwards; } .page--home .js-tilt-card.is-in .rh-deviceWrap{ filter: none; } @keyframes rhFlyIn { 0% { filter: blur(1.2px); } 75% { filter: blur(1.0px); } 100% { filter: none; } 0% { opacity: 0; transform: translate3d(440px, 0, -720px) rotateY(-58deg) rotateX(28deg) scale(0.84); } 6% { opacity: 0; transform: translate3d(360px, 0, -610px) rotateY(-54deg) rotateX(26deg) scale(0.86); } 12% { opacity: 0; transform: translate3d(300px, 0, -500px) rotateY(-48deg) rotateX(22deg) scale(0.88); } 18% { opacity: 0.00; transform: translate3d(250px, 0, -380px) rotateY(-44deg) rotateX(20deg) scale(0.90); } 24% { opacity: 0.02; transform: translate3d(210px, 0, -320px) rotateY(-38deg) rotateX(18deg) scale(0.92); } 30% { opacity: 0.05; transform: translate3d(170px, 0, -270px) rotateY(-32deg) rotateX(16deg) scale(0.93); } 36% { opacity: 0.08; transform: translate3d(140px, 0, -230px) rotateY(-28deg) rotateX(14deg) scale(0.945); } 42% { opacity: 0.10; transform: translate3d(125px, 0, -205px) rotateY(-26deg) rotateX(13deg) scale(0.955); } 46% { opacity: 0.12; transform: translate3d(120px, 0, -190px) rotateY(-24deg) rotateX(12deg) scale(0.96); } 52% { opacity: 0.18; transform: translate3d(88px, 0, -150px) rotateY(-19deg) rotateX(10deg) scale(0.965); } 58% { opacity: 0.28; transform: translate3d(62px, 0, -118px) rotateY(-15deg) rotateX(8deg) scale(0.972); } 64% { opacity: 0.40; transform: translate3d(42px, 0, -85px) rotateY(-12deg) rotateX(7deg) scale(0.98); } 70% { opacity: 0.55; transform: translate3d(26px, 0, -55px) rotateY(-10deg) rotateX(6deg) scale(0.99); } 76% { opacity: 0.68; transform: translate3d(18px, 0, -34px) rotateY(-7deg) rotateX(4deg) scale(0.995); } 82% { opacity: 0.78; transform: translate3d(12px, 0, -22px) rotateY(-5deg) rotateX(3deg) scale(0.998); } 86% { opacity: 0.86; transform: translate3d(10px, 0, -18px) rotateY(-4deg) rotateX(2deg) scale(1); } 90% { opacity: 0.92; transform: translate3d(6px, 0, -10px) rotateY(-2.5deg) rotateX(1.2deg) scale(1); } 94% { opacity: 0.96; transform: translate3d(4px, 0, -6px) rotateY(-1.5deg) rotateX(0.6deg) scale(1); } 97% { opacity: 0.985; transform: translate3d(2px, 0, -3px) rotateY(-0.7deg) rotateX(0.25deg) scale(1); } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1); } } @keyframes rhShadowIn { 0% { opacity: 0; transform: translateZ(-40px) scale(0.88); } 60% { opacity: 0.55; transform: translateZ(-40px) scale(0.98); } 100% { opacity: 0.85; transform: translateZ(-40px) scale(1); } } /* Mobile: less travel */ @media (max-width: 520px) { .page--home .js-tilt-card .rh-deviceWrap { transform: translate3d(180px, 0, -240px) rotateY(-22deg) rotateX(14deg) scale(0.92); } } /* Reduced motion: keep FADE, remove motion/tilt */ @media (prefers-reduced-motion: reduce) { /* start hidden */ .page--home .js-tilt-card .rh-deviceWrap { animation: none !important; transform: none !important; /* no travel */ opacity: 0 !important; /* allow fade */ transition: opacity 500ms ease !important; } /* fade in when .is-in is added */ .page--home .js-tilt-card.is-in .rh-deviceWrap { animation: none !important; transform: none !important; opacity: 1 !important; } /* keep shadow subtle + stable */ .page--home .js-tilt-card .rh-deviceShadow { animation: none !important; transform: translateZ(-40px) scale(1) !important; opacity: 0.85 !important; } /* no interactive tilt */ .page--home .rh-deviceTilt { transform: none !important; } } /* ========================================================= Screen logo (flat, normal colors) + shine ========================================================= */ .page--home .rh-phone3d__screen{ /* allows centering overlay */ display: grid; place-items: center; } .page--home .rh-screenLogo{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(0.96); pointer-events: none; } .page--home .rh-screenLogo__img{ width: min(66%, 210px); height: auto; opacity: 0.98; filter: none; /* returns to original logo colors */ } /* bring it in while phone is flying in */ .page--home .js-tilt-card.rh-seq .rh-screenLogo{ animation: rhScreenLogoIn 900ms cubic-bezier(.18,.95,.2,1) forwards; animation-delay: calc(var(--rh-logo-lead) + 220ms); } @keyframes rhScreenLogoIn{ 0% { opacity: 0; transform: scale(0.94); filter: brightness(1.22) saturate(1.10); } 55% { opacity: 1; transform: scale(1.02); filter: brightness(1.18) saturate(1.06); } 100% { opacity: 1; transform: scale(1); filter: none; } } /* shine sweep on the screen logo */ .page--home .rh-screenLogo__shine{ position: absolute; width: min(66%, 210px); height: min(66%, 210px); background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0) 45%, transparent 100%); opacity: 0; mix-blend-mode: screen; -webkit-mask-image: url("/assets/logo_website_final_cropped2.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("/assets/logo_website_final_cropped2.png"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .page--home .js-tilt-card.rh-seq .rh-screenLogo__shine{ animation: rhScreenShine 900ms ease-out forwards; animation-delay: calc(var(--rh-logo-lead) + 260ms); } @keyframes rhScreenShine{ 0% { opacity: 0; transform: translateX(-60%); } 20% { opacity: 0.22; } 60% { opacity: 0.28; transform: translateX(20%); } 100% { opacity: 0; transform: translateX(70%); } } /* Reduced motion: skip spin, just fade logo on-screen */ @media (prefers-reduced-motion: reduce){ .page--home .rh-logoSeq{ display: none !important; } .page--home .rh-screenLogo{ opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================= CAS 3D GLB SEQUENCE (model-viewer) ========================================================= */ .page--home{ --cas-model-size: min(270px, 62vw); --cas-dock-ms: 950ms; --cas-dock-drop: clamp(52px, 8vh, 86px); --cas-dock-scale: 0.72; } /* Make sure the stage can anchor absolute children */ .page--home .rh-deviceStage{ position: relative; } /* Floating 3D logo wrapper (starts hidden) */ .page--home .cas-modelWrap{ position: absolute; left: 50%; top: 44%; width: var(--cas-model-size); height: var(--cas-model-size); transform: translate3d(-50%, -50%, 160px) scale(1); opacity: 0; z-index: 8; pointer-events: none; will-change: transform, opacity; /* defaults for landing nudges + scale */ --cas-land-x: 0px; --cas-land-y: 0px; --cas-land-scale: 1.00; /* spin glow drivers */ --casGlow: 0; --casShine: 0; --casBlue: 1; isolation: isolate; /* keep pseudo stacking contained */ } .page--home .js-tilt-card.cas-seq .cas-modelWrap{ opacity: 1; animation: casModelAppear 240ms ease-out forwards; } @keyframes casModelAppear{ from { opacity: 0; transform: translate(-50%, -50%) translateZ(140px) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%) translateZ(140px) scale(1); } } /* The model itself */ .page--home model-viewer.cas-model{ width: 100%; height: 100%; display: block; background: transparent; filter: drop-shadow(0 40px 120px rgba(0,0,0,0.70)); } .page--home model-viewer.cas-model::part(default-progress-bar){ display: none; } /* ========================================================= CAS GLB sequence (spin x2 -> dock -> hide -> show screen logo) ========================================================= */ .page--home .rh-hero__device.js-tilt-card{ position: relative; } .page--home .js-tilt-card.cas-seq .cas-modelWrap{ opacity: 1; transition: opacity 220ms ease; } .page--home .js-tilt-card.cas-hideModel .cas-modelWrap{ opacity: 0; transition: opacity 240ms ease; } /* Screen logo: ONLY show after dock */ .page--home .js-tilt-card.cas-docked .rh-screenLogo{ opacity: 1; transform: scale(1); animation: casScreenLogoIn 1200ms cubic-bezier(.18,.95,.2,1) forwards; } @keyframes casScreenLogoIn{ 0% { opacity: 0; transform: scale(0.985); filter: none; } 70% { opacity: 1; transform: scale(1.00); filter: none; } 100% { opacity: 1; transform: scale(1.00); filter: none; } } .page--home .js-tilt-card.cas-docked .rh-screenLogo__shine{ animation: casScreenShine 750ms ease-out forwards; } @keyframes casScreenShine{ 0% { opacity: 0; transform: translateX(-60%); } 20% { opacity: 0.22; } 60% { opacity: 0.28; transform: translateX(20%); } 100% { opacity: 0; transform: translateX(70%); } } @keyframes casImpactSparks{ 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.90) rotate(-6deg); } 14% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.02) rotate(6deg); } 40% { opacity: 0.32; transform: translate(-50%, -50%) scale(1.06) rotate(12deg); } 70% { opacity: 0.18; transform: translate(-50%, -50%) scale(1.08) rotate(18deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.10) rotate(22deg); } } /* ========================================================= CAS GLB SPIN GLOW (driven by JS via --casGlow 0..1) - MERGED INTO ::before so ::after stays reserved for PNG overlay ========================================================= */ .page--home .cas-modelWrap::before{ content: ""; position: absolute; inset: -34%; border-radius: 999px; pointer-events: none; z-index: 0; background: radial-gradient(closest-side at 50% 50%, rgba(13,116,245,0.75), transparent 62%), radial-gradient(closest-side at 60% 55%, rgba(89,224,11,0.55), transparent 64%), /* extra blue reinforcement (THIS USED TO BREAK YOUR FILE BY OVERRIDING ::after) */ radial-gradient(closest-side at 50% 50%, rgba(13,116,245,0.95), transparent 60%); opacity: calc(var(--casGlow) * 0.14); filter: blur(calc(10px + (var(--casGlow) * 24px))); mix-blend-mode: screen; } /* make sure the model stays above the glow */ .page--home model-viewer.cas-model{ filter: drop-shadow(0 40px 120px rgba(0,0,0,0.70)) brightness(calc(1 + (var(--casShine) * 0.28))) contrast(calc(1 + (var(--casShine) * 0.22))) saturate(calc(1 + (var(--casShine) * 0.30))) drop-shadow(0 0 calc(10px + (var(--casShine) * 28px)) rgba(13,116,245,0.42)) drop-shadow(0 0 calc(8px + (var(--casShine) * 18px)) rgba(89,224,11,0.18)); will-change: filter; } /* if you force-hide the model, also kill glow */ .page--home .js-tilt-card.cas-hideModel .cas-modelWrap::before{ opacity: 0 !important; } /* ========================================================= SCREEN CLEANUP (solid black + no fog) + SHARP REFLECTION ========================================================= */ .page--home .rh-phone3d{ --scr-refl: 0.05; --body-shine: 0.10; } .page--home .rh-phone3d__screen{ background: #000 !important; border-color: transparent !important; box-shadow: inset 0 -18px 34px rgba(0,0,0,0.78), inset 0 18px 34px rgba(0,0,0,0.86) !important; } .page--home .rh-phone3d__screen::before{ content: "" !important; position: absolute; inset: -10%; pointer-events: none; background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.00) 34%, rgba(255,255,255,0.16) 45%, rgba(13,116,245,0.10) 50%, rgba(255,255,255,0.06) 56%, transparent 66% ), radial-gradient( closest-side at var(--mx, 50%) var(--my, 45%), rgba(255,255,255,0.10), transparent 58% ); mix-blend-mode: screen; opacity: var(--scr-refl, 0.05); transform: translateZ(1px); filter: blur(0.18px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 62%, transparent 80%); mask-image: radial-gradient(circle at 50% 50%, #000 0 62%, transparent 80%); } .page--home .rh-phone3d__screen::after{ content: "" !important; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 22%, transparent 55%), radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 22%, transparent 55%); } .page--home .rh-phone3d__screenGlow{ display: none !important; } .page--home .rh-phone3d__shine{ opacity: var(--body-shine, 0.10); filter: blur(0.15px); } /* ========================================================= SIDE BUTTONS — centered on the SIDE WALL (not the screen seam) ========================================================= */ .page--home .rh-phone3d{ --rh-side-w: 18px; --rh-side-half: 9px; --rh-btn-w: 3.2px; --rh-btn-protrude: 2.3px; --rh-btn-z: 26px; --rh-btn-hide: 54%; --rh-btn-seat: 2px; } .page--home .rh-phone3d__btn, .page--home .rh-phone3d__btnR{ position: absolute; width: var(--rh-btn-w); border-radius: 999px; pointer-events: none; overflow: hidden; background: linear-gradient( to bottom, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 12%, rgba(0,0,0,0.92) 42%, rgba(0,0,0,0.995) 100% ), radial-gradient( 140% 90% at var(--btn-hot-x, 42%) 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 64% ); box-shadow: 0 14px 26px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(0,0,0,0.94), inset 1px 0 0 rgba(255,255,255,0.10), inset -1px 0 0 rgba(0,0,0,0.88), inset 0 0 0 1px rgba(255,255,255,0.08); opacity: 0.98; transform: translateZ(var(--rh-btn-z)); filter: contrast(1.12) saturate(1.06); } .page--home .rh-phone3d__btn{ left: calc(-1.35 * var(--rh-btn-protrude)); transform: translate3d(calc(- var(--rh-btn-seat) * (var(--rh-side-half) - var(--rh-btn-seat))), 0, var(--rh-btn-z)); -webkit-clip-path: inset(0 var(--rh-btn-hide) 0 0); clip-path: inset(0 var(--rh-btn-hide) 0 0); -webkit-mask-image: linear-gradient( to right, #000 0 calc(100% - var(--rh-btn-hide)), transparent calc(100% - var(--rh-btn-hide)) 100% ); mask-image: linear-gradient( to right, #000 0 calc(100% - var(--rh-btn-hide)), transparent calc(100% - var(--rh-btn-hide)) 100% ); } .page--home .rh-phone3d__btnR{ right: calc(2.25 * var(--rh-btn-protrude)); transform: translate3d(calc(var(--rh-side-half) - var(--rh-btn-seat)), 0, var(--rh-btn-z)); -webkit-clip-path: inset(0 0 0 var(--rh-btn-hide)); clip-path: inset(0 0 0 var(--rh-btn-hide)); -webkit-mask-image: linear-gradient( to left, #000 0 calc(100% - var(--rh-btn-hide)), transparent calc(100% - var(--rh-btn-hide)) 100% ); mask-image: linear-gradient( to left, #000 0 calc(100% - var(--rh-btn-hide)), transparent calc(100% - var(--rh-btn-hide)) 100% ); } .page--home .rh-phone3d__btn { --btn-hot-x: 38%; --btn-tilt: -12deg; } .page--home .rh-phone3d__btnR { --btn-hot-x: 62%; --btn-tilt: 12deg; } .page--home .rh-phone3d__btn::before, .page--home .rh-phone3d__btnR::before{ content:""; position:absolute; left: -1px; right: -1px; top: -1px; height: 14%; border-radius: inherit; pointer-events:none; background: linear-gradient( to bottom, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.10) 38%, rgba(255,255,255,0.00) 100% ), linear-gradient( 165deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1.00) 24%, rgba(255,255,255,0.18) 42%, rgba(255,255,255,0.00) 78% ), radial-gradient( 120% 90% at var(--btn-hot-x) 0%, rgba(255,255,255,0.92), rgba(255,255,255,0.00) 62% ); mix-blend-mode: screen; opacity: 1; transform: translateY(-16%) rotate(var(--btn-tilt)); filter: blur(0.03px); } .page--home .rh-phone3d__btn::after, .page--home .rh-phone3d__btnR::after{ content:""; position:absolute; top: 1px; bottom: 1px; width: 1px; border-radius: 999px; background: rgba(255,255,255,0.18); opacity: 0.62; } .page--home .rh-phone3d__btn::after{ left: 1px; } .page--home .rh-phone3d__btnR::after{ right: 1px; } .page--home .rh-phone3d__btn--top{ top: 20%; height: 14px; border-radius: 8px; } .page--home .rh-phone3d__btn--mid{ top: 31%; height: 26px; } .page--home .rh-phone3d__btn--bot{ top: 39%; height: 26px; } .page--home .rh-phone3d__btnR { top: 32%; height: 48px; } @media (max-width: 520px){ .page--home .rh-phone3d{ --rh-btn-w: 2.9px; --rh-btn-protrude: 2.0px; --rh-btn-z: 26px; } } /* Optional: reduce concentric “double outline” */ .page--home .rh-phone3d__bezel{ border-color: rgba(255,255,255,0.06); } .page--home .rh-phone3d__screen{ border-color: rgba(255,255,255,0.05) !important; } .page--home .rh-phone3d__body::after{ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.62), inset 0 0 0 1px rgba(255,255,255,0.035); } /* ========================================================= RESPONSIVE + SEQUENCE RESET (single source of truth) ========================================================= */ /* --- Swap timing --- */ .page--home{ --cas-logo-out-ms: 500ms; --cas-content-in-ms: 500ms; --cas-overlap-ms: 100ms; --cas-content-delay: calc(var(--cas-logo-out-ms) - var(--cas-overlap-ms)); } .page--home .rh-screenContent{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(0.985); pointer-events: none; z-index: 1; } .page--home .rh-screenContent__img{ width: 120%; height: 120%; object-fit: contain; object-position: top center; transform: translateZ(0); backface-visibility: hidden; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; -webkit-user-drag: none; user-select: none; } .page--home .rh-screenLogo{ z-index: 2; } .page--home .js-tilt-card.cas-swap .rh-screenLogo{ animation: casLogoOut var(--cas-logo-out-ms) ease-in forwards; } .page--home .js-tilt-card.cas-swap .rh-screenContent{ animation: casContentIn var(--cas-content-in-ms) ease-out forwards; animation-delay: var(--cas-content-delay); } @keyframes casLogoOut{ from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.992); } } @keyframes casContentIn{ from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } } .page--home .js-tilt-card.cas-content .rh-screenLogo{ opacity: 0 !important; } .page--home .js-tilt-card.cas-content .rh-screenContent{ opacity: 1 !important; transform: none !important; animation: none !important; } /* ========================================================= FIT HERO TO ONE VIEWPORT (header-aware) — cleaned ========================================================= */ .page--home{ --site-header-h: 120px; --rh-copy-top: -7svh; --rh-hero-pad-top: clamp(10px, 1.8vh, 18px); --rh-hero-pad-bot: clamp(26px, 4vh, 44px); --rh-device-gap: clamp(10px, 1.6vh, 16px); --rh-device-w: min(300px, 70vw); --rh-phone-w: min(228px, 54vw); --rh-device-scale: 0.82; --rh-device-nudgeY: -36px; --rh-focus-scale: 1.83; --rh-focus-shiftY: 185px; --rh-screen-fade-top: 44%; --rh-screen-fade-mid: 70%; --rh-screen-fade-opa: 0.92; --rh-phone-fade-top: 48%; --rh-phone-fade-mid: 58%; --rh-phone-fade-opa: 1.00; } .page--home .rh-hero{ min-height: calc(100svh - var(--site-header-h)); } .page--home .rh-hero__inner{ padding-top: var(--rh-hero-pad-top); padding-bottom: var(--rh-hero-pad-bot); } .page--home .rh-hero__device{ width: var(--rh-device-w); margin: 0 0 var(--rh-device-gap) 0; transform: translate3d(0, var(--rh-device-nudgeY), 0) scale(var(--rh-device-scale)); transform-origin: 50% 65%; position: relative; isolation: isolate; } .page--home .rh-deviceStage::after{ content: ""; position: absolute; inset: -14% -28% -18% -28%; pointer-events: none; z-index: 50; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) var(--rh-phone-fade-top), rgba(0,0,0,var(--rh-phone-fade-opa)) var(--rh-phone-fade-mid), rgba(0,0,0,1) 100% ); opacity: 0; transition: opacity 650ms ease; } .page--home .js-tilt-card.cas-focus .rh-deviceStage::after{ opacity: 1; } .page--home .rh-phone3d{ width: var(--rh-phone-w); } .page--home .rh-hero__title{ font-size: clamp(34px, 5.2vw, 74px); line-height: 0.93; } .page--home .rh-hero__sub{ margin: 14px 0 14px; font-size: 15px; } .page--home .rh-btn{ margin-top: 6px; padding: 11px 24px; } .page--home .rh-hero__fineprint{ margin-top: 12px; } .page--home .rh-deviceStage{ transform-origin: 50% 78%; will-change: transform; transition: transform 900ms cubic-bezier(.18,.95,.2,1); transform: translate3d(var(--rh-stage-x, 0px), var(--rh-stage-y, 0px), 0); } .page--home .js-tilt-card.cas-focus .rh-deviceStage{ transform: translate3d( calc(var(--rh-stage-x, 0px) + var(--rh-focus-shiftX, 0px)), calc(var(--rh-stage-y, 0px) + var(--rh-focus-shiftY, 0px)), 0 ) scale(var(--rh-focus-scale)); --rh-stage-x: 0px; --rh-stage-y: 0px; --rh-focus-shiftX: 0px; } .page--home .js-tilt-card.cas-focus .rh-phone3d{ --scr-refl: 0 !important; --body-shine: 0 !important; } .page--home .rh-screenFade{ position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 650ms ease; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) var(--rh-screen-fade-top), rgba(0,0,0,0.45) var(--rh-screen-fade-mid), rgba(0,0,0,var(--rh-screen-fade-opa)) 100% ); } .page--home .js-tilt-card.cas-focus .rh-screenFade{ opacity: 1; } .page--home .rh-hero__title, .page--home .rh-hero__sub, .page--home .rh-btn, .page--home .rh-hero__fineprint{ position: relative; top: var(--rh-copy-top); } @media (max-height: 900px){ .page--home{ --rh-device-scale: 0.76; --rh-device-nudgeY: -22px; --site-header-h: 120px; } .page--home .rh-hero__title{ font-size: clamp(32px, 5vw, 66px); } } @media (max-height: 800px){ .page--home{ --rh-device-scale: 0.70; --rh-device-nudgeY: -24px; } .page--home .rh-hero__title{ font-size: clamp(30px, 4.8vw, 62px); } .page--home .rh-hero__sub{ margin: 12px 0 12px; } } @media (max-height: 720px){ .page--home{ --rh-device-scale: 0.64; --rh-device-nudgeY: -26px; --rh-device-gap: 16px; } .page--home .rh-hero__title{ font-size: clamp(28px, 4.6vw, 58px); } } /* Phones */ @media (max-width: 520px){ .page--home{ --site-header-h: 96px; --rh-device-w: min(340px, 94vw); --rh-phone-w: min(270px, 82vw); --rh-device-scale: 1.00; --rh-device-nudgeY: -10px; --rh-device-gap: clamp(8px, 1.2vh, 14px); --rh-focus-scale: 1.08; --rh-focus-shiftY: 24px; --rh-screen-fade-top: 62%; --rh-screen-fade-mid: 84%; --rh-phone-fade-top: 56%; --rh-phone-fade-mid: 76%; } } /* Ultra-wide monitors */ @media (min-width: 1600px){ .page--home{ --rh-device-w: min(360px, 52vw); --rh-device-scale: 1.2; --rh-device-nudgeY: -14px; --rh-focus-scale: 1.24; --rh-focus-shiftY: 70px; } } @media (min-width: 1600px){ .page--home .rh-hero__sub { margin: 18px 0 18px; max-width: 1000px; color: rgba(255,255,255,0.78); font-size: 24px; line-height: 1.75; } } /* ========================================================= DESKTOP/LAPTOP LOCK (KEEP — unchanged from your file) ========================================================= */ @media (min-width: 860px) { .page--home{ --rh-focus-scale: 1.62; --rh-focus-shiftY: 220px; --cas-model-size: min(340px, 76vw); } .page--home .rh-hero__inner{ max-width: 1400px; padding-left: 24px; padding-right: 24px; position: relative; isolation: isolate; } .page--home .rh-hero__title{ width: 100%; max-width: 1400px !important; margin-left: auto; margin-right: auto; word-spacing: -0.02em; letter-spacing: 0.005em; line-height: 1.18; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; text-wrap: initial !important; } .page--home .rh-hero__sub{ max-width: 750px !important; font-size: 16px; line-height: 1.6; margin: 22px 0 18px; color: #FFFFFF; } .page--home .rh-btn{ padding: 13px 32px; font-size: 14px; margin-top: 12px; } .page--home .rh-hero__fineprint{ font-size: 12px; margin-top: 20px; color: #FFFFFF; } .page--home .rh-hero__device.js-tilt-card::after{ display: none !important; } .page--home .rh-hero__inner::after{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 54%, rgba(0,0,0,0.88) 66%, rgba(0,0,0,1) 82%, rgba(0,0,0,1) 100% ); } .page--home .rh-hero__device{ position: relative; z-index: 1; } .page--home .rh-hero__title, .page--home .rh-hero__sub, .page--home .rh-btn, .page--home .rh-hero__fineprint{ position: relative; z-index: 3; } .page--home .cas-modelWrap{ width: var(--cas-model-size) !important; height: var(--cas-model-size) !important; } .page--home model-viewer.cas-model{ width: 100% !important; height: 100% !important; } } /* ========================================================= IMPORTANT: <860px keep 3D logo from getting too small (YOUR REQUEST) - also fixes 860px overlap by using 859px max ========================================================= */ @media (min-width: 521px) and (max-width: 859px){ .page--home{ /* BEFORE */ --rh-device-w: min(340px, 78vw); --rh-phone-w: min(260px, 60vw); --rh-device-scale: 0.92; --rh-device-nudgeY: -20px; /* AFTER */ --rh-focus-scale: 1.36; --rh-focus-shiftY: 140px; /* keep the 3D logo BIG in this band */ --cas-model-size: clamp(300px, 46vw, 340px); } /* docked size bump in this band so it never looks “tiny” */ .page--home .js-tilt-card.cas-dock, .page--home .js-tilt-card.cas-docked{ --cas-land-scale: 1.28; } } @media (max-height: 800px){ .page--home{ --rh-focus-scale: 1.45; --rh-focus-shiftY: 170px; } } @media (max-height: 720px){ .page--home{ --rh-focus-scale: 1.35; --rh-focus-shiftY: 150px; } } /* Ultra-wide monitors (>=1600px): shrink + lift so it clears the title */ @media (min-width: 1600px){ .page--home{ --rh-device-scale: 0.95; --rh-focus-scale: 1.5; --rh-device-nudgeY: -42px; --rh-focus-shiftY: 240px; } } /* EXTRA-THIN phones (<=360px): prevent the phone from looking ridiculously tall */ @media (max-width: 360px){ .page--home .rh-phone3d{ aspect-ratio: 9 / 17.2; } .page--home{ --rh-device-nudgeY: -20px; --rh-device-gap: 12px; --rh-device-scale: 0.85; --rh-focus-scale: 1; --rh-focus-shiftY: 150px; --cas-land-scale: 1.00; } } /* Scale 3D logo ONLY at dock, without affecting positioning */ .page--home .js-tilt-card{ --cas-land-scale: 1; } .page--home model-viewer.cas-model{ transform: scale(var(--cas-land-scale)); transform-origin: 50% 50%; } .page--home .js-tilt-card.cas-dock, .page--home .js-tilt-card.cas-docked{ --cas-land-scale: 1.18; } @media (max-width: 520px){ .page--home .js-tilt-card.cas-dock, .page--home .js-tilt-card.cas-docked{ --cas-land-scale: 1.24; } } /* CTA button – unchanged */ @media (min-width: 521px) and (max-width: 800px){ .page--home .rh-btn{ padding: 18px 46px; font-size: 16px; font-weight: 800; } } /* SVG container – controls size (CENTERED) */ .page--home .rh-screenContent__obj{ display: block; width: 120%; max-width: 870px; /* 725 * 1.2 */ aspect-ratio: 725 / 1413; height: auto; /* critical: center the oversized grid item */ justify-self: center; align-self: center; /* grid centering does the work; no auto-margins needed */ margin: 0; } /* SVG itself – NEVER overscale */ .page--home .rh-screenContent__svg{ width: 100%; height: auto; display: block; /* Critical Safari-safe rules */ transform: none !important; backface-visibility: visible; text-rendering: optimizeLegibility; shape-rendering: auto; vector-effect: none; overflow: visible; /* prevents descender clipping */ } /* Remove all GPU hacks from SVG parents */ .page--home .rh-screenContent{ transform: none !important; filter: none !important; } /* ========================================================= FIX: 3D logo landing alignment (350px–859px) ========================================================= */ /* 521–859px (tablets / small laptops) */ @media (min-width: 521px) and (max-width: 859px){ .page--home .cas-modelWrap{ --cas-land-x: 0px; --cas-land-y: 10px; } } /* 350–520px (phones) */ @media (min-width: 350px) and (max-width: 520px){ .page--home .cas-modelWrap{ --cas-land-x: 0px; --cas-land-y: 16px; } } /* ultra-thin phones */ @media (max-width: 349px){ .page--home .cas-modelWrap{ --cas-land-x: 0px; --cas-land-y: 18px; } } /* ========================================================= IMPORTANT: Use translate/scale transform-2 properties only if supported (so it won't “break the whole thing” on any weird engine) ========================================================= */ @supports (translate: 1px 1px){ .page--home .cas-modelWrap{ translate: var(--cas-land-x) var(--cas-land-y); scale: var(--cas-land-scale); } } /* ========================================================= CLEANUP: remove the extra special effects that were added (no sparks, no aura glow, no PNG overlay, no extra filter stacks) ========================================================= */ /* Remove CAS spin aura glow (was cas-modelWrap::before) */ .page--home .cas-modelWrap::before{ content: none !important; display: none !important; } /* ========================================================= SIZE FIX: 3D is too small in 3 bands (<=349, 350–520, 521–859) - replicate desktop behavior: bigger model size + bigger dock scale ========================================================= */ /* 521–859px */ @media (min-width: 521px) and (max-width: 859px){ .page--home{ /* Make the 3D logo wrapper bigger (same idea as desktop, just not tiny) */ --cas-model-size: min(420px, 86vw); } /* Make the docked model larger */ .page--home .js-tilt-card.cas-dock, .page--home .js-tilt-card.cas-docked{ --cas-land-scale: 1.42; } /* Prevent accidental double-scaling if your browser supports scale: */ .page--home .cas-modelWrap{ scale: 1 !important; } } /* 350–520px */ @media (min-width: 350px) and (max-width: 520px){ .page--home{ --cas-model-size: min(400px, 92vw); } .page--home .js-tilt-card.cas-dock, .page--home .js-tilt-card.cas-docked{ --cas-land-scale: 1.52; --rh-device-nudgeY: -24px; } .page--home .cas-modelWrap{ scale: 1 !important; } } /* <=349px */ @media (max-width: 349px){ .page--home{ --cas-model-size: min(360px, 94vw); } .page--home .js-tilt-card.cas-dock, .page--home .js-tilt-card.cas-docked{ --cas-land-scale: 1.58; } .page--home .cas-modelWrap{ scale: 1 !important; } } /* ========================================================= HOME BELOW-HERO: Robinhood-style feature sequence Replaces old quad cards / accordion / hub band. Scoped to: ========================================================= */ .page--home .cas-rh-page{ background: #000; color: #f7f8f2; overflow: hidden; } .page--home .cas-rh-page *, .page--home .cas-rh-page *::before, .page--home .cas-rh-page *::after{ box-sizing: border-box; } .page--home .cas-rh-page a{ color: inherit; } .page--home .cas-rh-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; } .page--home .cas-rh-actions--center{ justify-content: center; } .page--home .cas-rh-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font-family: var(--cas-font-text); text-decoration: none; font-size: 15px; font-weight: 800; line-height: 1; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } .page--home .cas-rh-btn:hover{ transform: translateY(-1px); } .page--home .cas-rh-btn--green{ background: #C6FF00; color: #050505 !important; border-color: transparent; } .page--home .cas-rh-btn--dark{ background: #050505; color: #f7f8f2; border-color: rgba(255,255,255,.16); } .page--home .cas-rh-btn--outline{ background: transparent; color: #f7f8f2; border: 1px solid rgba(255,255,255,.74); border-radius: 999px; } .page--home .cas-rh-btn--outline:hover{ border-color: rgba(255,255,255,.96); } .page--home .cas-rh-link{ color: rgba(255,255,255,.82); font-family: var(--cas-font-text); font-size: 15px; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.42); } .page--home .cas-rh-link:hover{ color: #fff; border-bottom-color: #59E00B; } .page--home .cas-rh-sectionTitle{ max-width: 960px; margin: 0 auto clamp(28px, 4vw, 52px); padding: 0 20px; text-align: center; } .page--home .cas-rh-sectionTitle h2{ margin: 0; color: #fff; font-family: var(--cas-font-display); font-size: clamp(44px, 6vw, 86px); font-weight: 500; letter-spacing: -.035em; line-height: .95; } /* ========================================================= Robinhood-style two-card access section ========================================================= */ /* ========================================================= Robinhood-style two-card access section ========================================================= */ .page--home .cas-rh-away{ background: #000; color: #fff; padding: clamp(70px, 7.4vw, 106px) 0 clamp(68px, 7.4vw, 98px); border-top: 1px solid rgba(255,255,255,18); } .page--home .cas-rh-away__inner{ width: min(1120px, calc(100% - 56px)); margin: 0 auto; } .page--home .cas-rh-away h2{ max-width: 720px; margin: 0 auto clamp(56px, 5.6vw, 78px); color: #fff; text-align: center; font-family: var(--cas-font-display); font-size: clamp(38px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.035em; line-height: .96; } .page--home .cas-rh-away__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .page--home .cas-rh-awayCard{ position: relative; isolation: isolate; display: block; aspect-ratio: auto; min-height: 680px; overflow: hidden; border: 1px solid rgba(255,255,255,48); border-radius: 20px; background: #000; color: #fff; text-decoration: none; } .page--home .cas-rh-awayCard__content{ position: relative; z-index: 2; display: flex; height: 100%; padding: clamp(44px, 4.5vw, 64px) 30px 36px; flex-direction: column; align-items: center; text-align: center; } .page--home .cas-rh-awayCard h3{ margin: 0; color: #fff; font-family: var(--cas-font-display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.035em; line-height: 1; } .page--home .cas-rh-awayCard p{ max-width: 470px; margin: 30px auto 0; color: #fff; font-size: clamp(14px, 1.1vw, 17px); font-weight: 700; line-height: 1.42; } .page--home .cas-rh-awayCard__btn{ display: inline-flex; align-items: center; justify-content: center; min-width: 142px; min-height: 42px; margin-top: 30px; padding: 0 25px; border-radius: 999px; background: #C6FF00; color: #050505; font-family: var(--cas-font-text); font-size: 15px; font-weight: 700; line-height: 1; } .page--home .cas-rh-awayCard:hover .cas-rh-awayCard__btn{ transform: translateY(-1px); } .page--home .cas-rh-awayCard__media{ position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 220px; margin-top: 20px; pointer-events: none; } .page--home .cas-rh-awayCard__media img{ position: relative; left: auto; bottom: auto; display: block; width: auto; max-width: var(--cas-away-art-max, 100%); max-height: 100%; margin: 0 auto; object-fit: contain; transform: none; } .page--home .cas-rh-awayCard__media img{ bottom: -18px; width: min(80%, 425px); } /* * Proportionally scale the complete two-card composition between * 861px and 1578px. The 1578px screenshot is the full-size * reference, including its large left and right outer gutters. */ @media (min-width: 1101px) and (max-width: 1578px){ .page--home .cas-rh-away{ padding: 6.717364vw 0 6.210393vw; } .page--home .cas-rh-away__inner{ width: 70.975919vw; } .page--home .cas-rh-away h2{ max-width: 45.627376vw; margin-bottom: 4.942966vw; font-size: 4.055767vw; } .page--home .cas-rh-away__grid{ gap: 1.774398vw; } .page--home .cas-rh-awayCard{ min-height: 43.092522vw; border-radius: 1.267427vw; } .page--home .cas-rh-awayCard__content{ box-sizing: border-box; padding: 1.055767vw 0.401141vw 1.267427vw; } .page--home .cas-rh-awayCard__eyebrow{ margin-bottom: 0.253485vw; } .page--home .cas-rh-awayCard h3{ font-size: 2.408112vw; } .page--home .cas-rh-awayCard p{ max-width: 29.784537vw; margin-top: 1.901141vw; font-size: 1.077313vw; } .page--home .cas-rh-awayCard__media{ display: flex; flex: 1 1 13.941698vw; align-items: center; justify-content: center; height: auto; min-height: 0; } .page--home .cas-rh-awayCard__points, .page--home .cas-rh-awayCard__btn{ flex: 0 0 auto; } .page--home .cas-rh-awayCard__btn{ min-width: 8.998733vw; min-height: 2.661597vw; margin-top: 1.901141vw; padding: 0 1.584284vw; font-size: .950570vw; } .page--home .cas-rh-awayCard__media img{ bottom: -1.140684vw; width: min(80%, 26.932826vw); } } /* * Below 1101px, freeze the full card composition at its * 1101px dimensions. Only the empty outer gutters continue * shrinking as the viewport approaches the stacked layout. */ @media (min-width: 861px) and (max-width: 1100px){ .page--home .cas-rh-away{ padding: 73.958px 0 68.376px; } .page--home .cas-rh-away__inner{ width: min(781.445px, calc(100% - 56px)); } .page--home .cas-rh-away h2{ max-width: 502.357px; margin-bottom: 54.422px; font-size: 44.654px; } .page--home .cas-rh-away__grid{ gap: 19.536px; } .page--home .cas-rh-awayCard{ min-height: 474.449px; border-radius: 13.954px; } .page--home .cas-rh-awayCard__content{ box-sizing: border-box; padding: 22.654px 11.932px 13.954px; } .page--home .cas-rh-awayCard__eyebrow{ margin-bottom: 2.8px; } .page--home .cas-rh-awayCard h3{ font-size: 26.513px; } .page--home .cas-rh-awayCard p{ max-width: 327.928px; margin-top: 20.932px; font-size: 11.861px; } .page--home .cas-rh-awayCard__media{ display: flex; flex: 1 1 153.498px; align-items: center; justify-content: center; height: auto; min-height: 0; } .page--home .cas-rh-awayCard__points, .page--home .cas-rh-awayCard__btn{ flex: 0 0 auto; } .page--home .cas-rh-awayCard__btn{ min-width: 99.076px; min-height: 29.304px; margin-top: 20.932px; padding: 0 17.443px; font-size: 10.466px; } .page--home .cas-rh-awayCard__media img{ bottom: -12.559px; width: min(80%, 296.530px); } } /* Hold the composition at its full screenshot reference size. */ @media (min-width: 1579px){ .page--home .cas-rh-away{ padding: 106px 0 98px; } .page--home .cas-rh-away__inner{ width: 1120px; } .page--home .cas-rh-away h2{ max-width: 720px; margin-bottom: 78px; font-size: 64px; } .page--home .cas-rh-away__grid{ gap: 28px; } .page--home .cas-rh-awayCard{ min-height: 680px; border-radius: 20px; } .page--home .cas-rh-awayCard__content{ padding: 16px 15px 14px; } .page--home .cas-rh-awayCard__eyebrow{ margin-bottom: 4px; } .page--home .cas-rh-awayCard h3{ font-size: 38px; } .page--home .cas-rh-awayCard p{ max-width: 470px; margin-top: 30px; font-size: 17px; } .page--home .cas-rh-awayCard__btn{ min-width: 142px; min-height: 42px; margin-top: 30px; padding: 0 25px; font-size: 15px; } .page--home .cas-rh-awayCard__media img{ bottom: -18px; width: min(80%, 425px); } } /* * STACKED CARD LAYOUT * * Through 660px, the entire stacked composition scales proportionally. * From 661px through 860px, the composition remains frozen at its * exact 660px dimensions while the outer left and right gutters grow. */ /* Continuously scale the complete composition through 660px. */ @media (max-width: 660px){ .page--home .cas-rh-away{ padding: 11.507192vw 0; } .page--home .cas-rh-away__inner{ width: 88.461538vw; } .page--home .cas-rh-away h2{ max-width: 100%; margin-bottom: 7.191995vw; font-size: 6.472795vw; } .page--home .cas-rh-away__grid{ grid-template-columns: 1fr; gap: 3.595997vw; } .page--home .cas-rh-awayCard{ aspect-ratio: auto; height: auto; min-height: clamp(570px, 112vw, 650px); border-radius: 3.056598vw; } .page--home .cas-rh-awayCard__content{ box-sizing: border-box; height: auto; min-height: clamp(570px, 112vw, 650px); padding: 3.832395vw 1.795997vw clamp(14px, 3vw, 20px); } .page--home .cas-rh-awayCard h3{ max-width: 100%; font-size: 6.2vw; } .page--home .cas-rh-awayCard p{ max-width: 100%; margin-top: clamp(16px, 3vw, 20px); font-size: 14.5px; } .page--home .cas-rh-awayCard__media{ display: flex; flex: 0 1 auto; align-items: center; justify-content: center; width: 100%; height: clamp(170px, 31vw, 205px); min-height: 150px; max-height: 205px; margin-top: clamp(16px, 3.3vw, 22px); } .page--home .cas-rh-awayCard__media img{ position: relative; left: auto; bottom: auto; display: block; width: auto; height: auto; max-width: var(--cas-away-art-max, 100%); max-height: 100%; margin: 0 auto; object-fit: contain; transform: none; } .page--home .cas-rh-awayCard__points, .page--home .cas-rh-awayCard__btn{ flex: 0 0 auto; } .page--home .cas-rh-awayCard__btn{ min-width: 156.642px; min-height: 47.467px; margin-top: 16px; padding: 0 27.294px; font-size: 16.614px; } .page--home .cas-rh-awayCard:hover .cas-rh-awayCard__btn{ transform: translateY(-1.187px); } } /* * Freeze the complete stacked composition at its 660px dimensions. * Only the empty left and right space increases as the viewport widens. */ @media (min-width: 661px) and (max-width: 860px){ .page--home .cas-rh-away{ padding: 75.947px 0; } .page--home .cas-rh-away__inner{ width: 583.846px; } .page--home .cas-rh-away h2{ max-width: 100%; margin-bottom: 47.467px; font-size: 42.720px; } .page--home .cas-rh-away__grid{ grid-template-columns: 1fr; gap: 23.734px; } .page--home .cas-rh-awayCard{ aspect-ratio: auto; height: auto; min-height: 650px; border-radius: 20.174px; } .page--home .cas-rh-awayCard__content{ box-sizing: border-box; height: auto; min-height: 650px; padding: 26.094px 11.734px 40px; } .page--home .cas-rh-awayCard h3{ font-size: 30.854px; } .page--home .cas-rh-awayCard p{ max-width: 403.471px; margin-top: 30.854px; font-size: 16.614px; } .page--home .cas-rh-awayCard__media{ display: flex; flex: 1 1 190px; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 160px; margin-top: 16px; margin-bottom: -18px; } .page--home .cas-rh-awayCard__media img{ position: relative; left: auto; bottom: auto; display: block; width: auto; height: auto; max-width: var(--cas-away-art-max, 100%); max-height: 100%; margin: 0 auto; object-fit: contain; transform: none; } .page--home .cas-rh-awayCard__points, .page--home .cas-rh-awayCard__btn{ flex: 0 0 auto; } .page--home .cas-rh-awayCard__btn{ min-width: 156.642px; min-height: 47.467px; margin-top: 30.854px; padding: 0 27.294px; font-size: 16.614px; } .page--home .cas-rh-awayCard:hover .cas-rh-awayCard__btn{ transform: translateY(-1.187px); } } /* ========================================================= Duo modules ========================================================= */ .page--home .cas-rh-duo[hidden]{ display: none !important; } .page--home .cas-rh-duo{ padding: clamp(86px, 11vw, 150px) 0 clamp(54px, 7vw, 100px); background: #000; } .page--home .cas-rh-duo__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 34px); width: min(1280px, calc(100% - 40px)); margin: 0 auto; } .page--home .cas-rh-miniFeature{ display: grid; grid-template-rows: minmax(330px, 36vw) auto; min-height: 700px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); background: #111416; color: #fff; text-decoration: none; } .page--home .cas-rh-miniFeature__visual{ position: relative; overflow: hidden; background: radial-gradient(circle at 50% 20%, rgba(89,224,11,.16), transparent 38%), radial-gradient(circle at 70% 72%, rgba(13,116,245,.16), transparent 34%), #15191d; } .page--home .cas-rh-miniFeature__visual::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%); } .page--home .cas-rh-miniFeature__body{ padding: clamp(28px, 4vw, 48px); background: #f4f1e8; color: #050505; } .page--home .cas-rh-miniFeature__body h3{ margin: 0; font-family: var(--cas-font-display); font-size: clamp(34px, 4.2vw, 58px); font-weight: 500; letter-spacing: -.03em; line-height: .96; } .page--home .cas-rh-miniFeature__body p{ margin: 18px 0 0; max-width: 56ch; color: rgba(0,0,0,.72); font-size: 17px; line-height: 1.48; } .page--home .cas-rh-textCta{ display: inline-flex; margin-top: 26px; color: #050505; font-weight: 900; border-bottom: 2px solid #050505; } .page--home .cas-rh-chain{ position: absolute; inset: 12%; z-index: 2; display: grid; align-content: center; gap: 18px; } .page--home .cas-rh-chain span{ position: relative; display: block; width: min(360px, 82%); padding: 18px 20px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.32); color: #fff; font-size: clamp(16px, 1.6vw, 22px); font-weight: 900; letter-spacing: .04em; } .page--home .cas-rh-chain span:nth-child(2){ margin-left: 12%; } .page--home .cas-rh-chain span:nth-child(3){ margin-left: 24%; } .page--home .cas-rh-chain span:nth-child(4){ margin-left: 36%; color: #59E00B; } .page--home .cas-rh-chain span::after{ content: ""; position: absolute; left: 30px; bottom: -19px; width: 2px; height: 19px; background: rgba(89,224,11,.58); } .page--home .cas-rh-chain span:last-child::after{ display: none; } .page--home .cas-rh-certStack{ position: absolute; left: 50%; top: 52%; z-index: 2; width: min(330px, 66%); height: min(420px, 78%); transform: translate(-50%, -50%) rotate(-4deg); } .page--home .cas-rh-certStack__sheet{ position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.16); background: #f4f1e8; box-shadow: 0 40px 80px rgba(0,0,0,.38); } .page--home .cas-rh-certStack__sheet--back{ transform: translate(34px, 28px) rotate(7deg); opacity: .55; } .page--home .cas-rh-certStack__sheet--mid{ transform: translate(17px, 14px) rotate(3deg); opacity: .78; } .page--home .cas-rh-certStack__sheet--front{ display: grid; align-content: start; gap: 14px; padding: 34px; } .page--home .cas-rh-certStack__sheet--front strong{ color: #050505; font-size: 14px; font-weight: 900; letter-spacing: .16em; } .page--home .cas-rh-certStack__sheet--front i{ display: block; height: 13px; background: rgba(0,0,0,.14); } .page--home .cas-rh-certStack__sheet--front i:nth-child(2){ width: 92%; } .page--home .cas-rh-certStack__sheet--front i:nth-child(3){ width: 74%; } .page--home .cas-rh-certStack__sheet--front i:nth-child(4){ width: 48%; } /* ========================================================= Product hero panels ========================================================= */ .page--home .cas-rh-productHero{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr); min-height: clamp(720px, 94vh, 980px); overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); } .page--home .cas-rh-productHero--sanitize{ grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } .page--home .cas-rh-productHero--reporting{ grid-template-columns: minmax(520px, 1.05fr) minmax(390px, .95fr); min-height: clamp(680px, 57.5vw, 850px); border-top: 0; background: #000000; } .page--home .cas-rh-productHero--reporting::after{ display: none; } .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual{ min-height: clamp(575px, 49.5vw, 750px); overflow: visible; } .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual::before{ display: none; } .page--home .cas-rh-reportClipboard{ position: absolute; left: clamp(18px, 5.2vw, 86px); bottom: 0; z-index: 2; width: min(57vw, 820px); transform: translateY(0); pointer-events: none; } .page--home .cas-rh-reportClipboard__image{ position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 44px rgba(0,0,0,.30)); user-select: none; } .page--home .cas-rh-reportClipboard__reflection{ display: none !important; } .page--home .cas-rh-productHero__content--reporting{ max-width: 610px; padding: clamp(58px, 7vw, 96px) clamp(28px, 6vw, 88px) 94px clamp(10px, 2vw, 32px); color: #fff; } .page--home .cas-rh-productHero__content--reporting h2{ width: 620px; max-width: 620px; margin: 0; color: #fff; font-family: var(--cas-font-display); font-size: 54px; font-weight: 400; letter-spacing: -.025em; line-height: 1.02; font-synthesis: none; } .page--home .cas-rh-productHero__content--reporting h2 span{ display: block; } .page--home .cas-rh-productHero__content--reporting p{ max-width: 505px; margin: 22px 0 0; color: rgba(255,255,255,.88); font-family: var(--cas-font-text); font-size: 15px; font-weight: 600; line-height: 1.45; } .page--home .cas-rh-btn--reporting{ display: inline-flex; align-items: center; justify-content: center; min-width: 116px; min-height: 36px; margin-top: 22px; padding: 0 24px; border-radius: 999px; background: #C6FF00; color: #050505 !important; border-color: transparent; font-family: var(--cas-font-text); font-size: 13px; font-weight: 650; line-height: 1; } @media (min-width: 1579px){ .page--home .cas-rh-productHero__content--reporting .cas-rh-btn--reporting{ min-width: 142px; min-height: 42px; padding: 0 25px; font-size: 15px; } } .page--home .cas-rh-reportingFineprint{ position: absolute; left: calc(50% + clamp(118px, 7.2vw, 138px)); bottom: 18px; z-index: 3; width: min(520px, calc(50% - 80px)); margin: 0; transform: none; color: rgba(0,0,0,.86); font-family: var(--cas-font-text); font-size: 10px; font-weight: 800; line-height: 1.35; text-align: left; } .page--home .cas-rh-reportingFineprint a, .page--home .cas-rh-reportingFineprint a:link, .page--home .cas-rh-reportingFineprint a:visited{ color: #000 !important; font-weight: 800; text-decoration: underline; text-decoration-color: #000; text-underline-offset: 2px; } .page--home .cas-rh-reportingFineprint a:hover, .page--home .cas-rh-reportingFineprint a:focus, .page--home .cas-rh-reportingFineprint a:active{ color: #000 !important; text-decoration: underline; text-decoration-color: #000; opacity: 1; } .page--home .cas-rh-productHero--sanitize{ position: relative; isolation: isolate; background: #000; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual::before{ display: none; } .page--home .cas-rh-productHero__content--sanitize{ width: 100%; max-width: none; min-width: 0; padding: clamp(58px, 7vw, 96px) clamp(28px, 6vw, 88px) 94px clamp(10px, 2vw, 32px); color: #fff; } .page--home .cas-rh-productHero__content--sanitize h2{ width: 100%; max-width: 620px; margin: 0; color: #fff; font-family: var(--cas-font-display); font-size: 62px; font-weight: 400; letter-spacing: -.025em; line-height: 1.02; font-synthesis: none; } .page--home .cas-rh-productHero__content--sanitize p{ width: 100%; max-width: 505px; margin: 22px 0 0; color: rgba(255,255,255,.88); font-family: var(--cas-font-text); font-size: 15px; font-weight: 600; line-height: 1.45; } .page--home .cas-rh-sanitizeResourceLink{ color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .page--home .cas-rh-sanitizeResourceLink:hover, .page--home .cas-rh-sanitizeResourceLink:focus, .page--home .cas-rh-sanitizeResourceLink:active{ color: #fff; text-decoration: underline; } .page--home .cas-rh-actions--sanitize{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: max-content; max-width: 100%; gap: 12px; margin-top: 26px; } .page--home .cas-rh-btn--sanitizeLearn{ flex: 0 0 auto; width: auto; min-width: 132px; min-height: 42px; margin-top: 0; padding: 0 28px; font-size: 14px; white-space: nowrap; } .page--home .cas-rh-btn--sanitizeOutline{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; min-width: 158px; min-height: 42px; margin-top: 0; padding: 0 28px; border: 1px solid rgba(255,255,255,.74); border-radius: 999px; background: #000; color: #fff !important; font-family: var(--cas-font-text); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; } .page--home .cas-rh-btn--sanitizeOutline:hover{ border-color: rgba(255,255,255,.96); background: rgba(255,255,255,.06); color: #fff !important; text-decoration: none; transform: translateY(-1px); } /* ========================================================= Sanitize media spotlight loop ========================================================= */ .page--home .cas-rh-productHero__visual--mediaLoop{ position: relative; display: grid; place-items: center; min-height: 560px; overflow: hidden; background: #000; } .page--home .cas-rh-mediaLoop{ position: absolute; inset: 0; overflow: hidden; background: #000; --cas-media-slide: min(34vw, 320px); } .page--home .cas-rh-mediaLoop::before{ content: ""; position: absolute; left: 50%; top: -30%; z-index: 1; width: min(760px, 92%); height: 132%; transform: translateX(-50%); pointer-events: none; background: radial-gradient( ellipse at 50% 31%, rgba(255,255,255,.255) 0%, rgba(246,255,238,.145) 19%, rgba(214,255,183,.060) 38%, rgba(89,224,11,.018) 57%, rgba(0,0,0,0) 78% ); filter: blur(28px); opacity: .92; } .page--home .cas-rh-mediaLoop::after{ content: ""; position: absolute; left: 50%; top: 53%; z-index: 1; width: min(660px, 82%); height: 260px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient( ellipse at 50% 50%, rgba(255,255,255,.205) 0%, rgba(246,255,238,.105) 29%, rgba(198,255,153,.038) 51%, rgba(89,224,11,.012) 65%, rgba(0,0,0,0) 82% ); filter: blur(30px); opacity: .88; } .page--home .cas-rh-mediaLoop__slot{ position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, transparent 16%, #000 34%, #000 66%, transparent 84%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, transparent 16%, #000 34%, #000 66%, transparent 84%, transparent 100% ); } .page--home .cas-rh-mediaLoop__item{ display: block; width: min(420px, 62%); max-height: 340px; object-fit: contain; opacity: 0; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.06) contrast(1.14) drop-shadow(0 34px 74px rgba(0,0,0,.74)); will-change: transform, opacity, filter; user-select: none; pointer-events: none; } .page--home .cas-rh-mediaLoop__item.is-active{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .page--home .cas-rh-mediaLoop__item.is-entering{ animation: casMediaLoopEnter 650ms cubic-bezier(.16,.96,.18,1) both; } .page--home .cas-rh-mediaLoop__item.is-exiting{ animation: casMediaLoopExit 520ms cubic-bezier(.58,.02,.92,.42) both; } .page--home .cas-rh-mediaLoop[data-media-kind="ssd"] .cas-rh-mediaLoop__item{ width: min(430px, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="usb"] .cas-rh-mediaLoop__item{ width: min(360px, 54%); } .page--home .cas-rh-mediaLoop[data-media-kind="hdd"] .cas-rh-mediaLoop__item{ width: min(430px, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="cassette"] .cas-rh-mediaLoop__item{ width: min(440px, 64%); } .page--home .cas-rh-mediaLoop[data-media-kind="dvd"] .cas-rh-mediaLoop__item{ width: min(300px, 48%); } .page--home .cas-rh-mediaLoop[data-media-kind="microsd"] .cas-rh-mediaLoop__item{ width: min(350px, 54%); } @keyframes casMediaLoopEnter{ 0%{ opacity: 0; transform: translate3d(calc(-1 * var(--cas-media-slide)), 0, 0) scale(.985); filter: brightness(.34) contrast(1.04) drop-shadow(0 28px 62px rgba(0,0,0,.80)); } 54%{ opacity: 1; filter: brightness(1.08) contrast(1.16) drop-shadow(0 34px 74px rgba(0,0,0,.74)); } 100%{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.06) contrast(1.14) drop-shadow(0 34px 74px rgba(0,0,0,.74)); } } @keyframes casMediaLoopExit{ 0%{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.06) contrast(1.14) drop-shadow(0 34px 74px rgba(0,0,0,.74)); } 100%{ opacity: 0; transform: translate3d(var(--cas-media-slide), 0, 0) scale(.985); filter: brightness(.28) contrast(1.02) drop-shadow(0 28px 62px rgba(0,0,0,.82)); } } @media (max-width: 980px){ .page--home .cas-rh-productHero__visual--mediaLoop{ min-height: 430px; } .page--home .cas-rh-mediaLoop{ --cas-media-slide: min(46vw, 280px); } .page--home .cas-rh-mediaLoop__item{ max-height: 270px; } } @media (max-width: 520px){ .page--home .cas-rh-productHero__visual--mediaLoop{ min-height: 340px; } .page--home .cas-rh-mediaLoop__item{ max-height: 210px; } } @media (prefers-reduced-motion: reduce){ .page--home .cas-rh-mediaLoop__item{ animation: none !important; opacity: 1; transform: none; } } .page--home .cas-rh-productHero--managed{ position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(560px, 1.06fr) minmax(390px, .94fr); align-items: center; min-height: clamp(560px, 72vh, 820px); overflow: hidden; background: radial-gradient(1100px 560px at 8% 92%, rgba(188,205,216,0.46) 0%, rgba(188,205,216,0) 64%), radial-gradient(900px 520px at 92% 8%, rgba(74,96,116,0.28) 0%, rgba(74,96,116,0) 66%), radial-gradient(1000px 560px at 44% 42%, rgba(160,181,196,0.20) 0%, rgba(160,181,196,0) 68%), linear-gradient(180deg, #7d94a6 0%, #879eb1 48%, #98adbe 100%); border-top: 0; } .page--home .cas-rh-productHero--managed::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); background-size: 180px 180px; } .page--home .cas-rh-managedLeaves{ position: absolute; left: 0; top: 50%; bottom: auto; z-index: 2; width: min(54vw, 860px); pointer-events: none; overflow: visible; transform: translateY(-50%); } .page--home .cas-rh-managedLeaves img{ display: block; width: 100%; height: auto; max-width: none; object-fit: contain; object-position: left center; user-select: none; filter: drop-shadow(0 34px 54px rgba(0,0,0,.24)); -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.90) 84%, rgba(0,0,0,.48) 93%, rgba(0,0,0,0) 100% ); mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.90) 84%, rgba(0,0,0,.48) 93%, rgba(0,0,0,0) 100% ); } .page--home .cas-rh-productHero__content--managed{ position: relative; z-index: 3; grid-column: 2; width: 880px; max-width: none; margin: 0; padding: clamp(58px, 7vw, 96px) 28px 94px clamp(10px, 2vw, 32px); color: #050505; } .page--home .cas-rh-productHero__content--managed h2{ color: #050505; font-size: 42px; line-height: 1.04; } .page--home .cas-rh-productHero__content--managed > p:not(.cas-rh-label):not(.cas-rh-fineprint){ width: auto; max-width: 505px; margin: 24px 0 0; color: rgba(0,0,0,.78); font-family: var(--cas-font-text); font-size: 17px; font-weight: 600; line-height: 1.45; } .page--home .cas-rh-label{ margin: 0 0 14px; color: rgba(0,0,0,0.72); font-size: 20px; font-weight: 800; letter-spacing: .01em; } .page--home .cas-rh-fineprint{ margin: 16px 0 0; max-width: 620px; color: rgba(0,0,0,0.58); font-size: 13px; line-height: 1.45; } .page--home .cas-rh-complianceNote{ display: flex; align-items: center; width: max-content; gap: 6px; margin-top: 26px; color: rgba(0,0,0,.72); font-family: var(--cas-font-text); font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none; } .page--home .cas-rh-complianceNote:hover span:last-child{ text-decoration: underline; } .page--home .cas-rh-complianceNote__info{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: rgba(0,0,0,.68); font-size: 9px; font-weight: 800; line-height: 1; } .page--home .cas-rh-complianceNote__info::before{ content: ""; position: absolute; left: 0; top: -1.5px; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.42); border-radius: 50%; pointer-events: none; } .page--home .cas-rh-productHero__content--managed .cas-rh-btn--dark{ margin-top: 24px; background: #050505; color: #fff !important; border-color: rgba(0,0,0,.18); } .page--home .cas-rh-productHero::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 76%, #000 100%); pointer-events: none; } .page--home .cas-rh-productHero--managed::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 52%, rgba(152,173,190,0.48) 74%, rgba(152,173,190,0.92) 100%), linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 42%, rgba(255,255,255,0.08) 100%); } .page--home .cas-rh-productHero__visual{ position: relative; min-height: 560px; overflow: hidden; } .page--home .cas-rh-productHero__visual::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%); } .page--home .cas-rh-productHero__content{ position: relative; z-index: 2; align-self: center; max-width: 680px; padding: clamp(54px, 8vw, 120px) clamp(22px, 6vw, 88px); } .page--home .cas-rh-dashboard{ position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; grid-template-columns: 104px 1fr; width: min(740px, 82%); min-height: 430px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)), #07090b; box-shadow: 0 48px 120px rgba(0,0,0,.58); transform: translate(-50%, -50%) rotate(-2deg); } .page--home .cas-rh-dashboard__sidebar{ display: grid; gap: 18px; align-content: start; padding: 28px 22px; border-right: 1px solid rgba(255,255,255,.10); } .page--home .cas-rh-dashboard__sidebar span{ height: 52px; border: 1px solid rgba(89,224,11,.25); background: rgba(89,224,11,.06); } .page--home .cas-rh-dashboard__main{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 28px; } .page--home .cas-rh-dashboard__metric{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035); padding: 22px; } .page--home .cas-rh-dashboard__metric strong{ display: block; color: #59E00B; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.04em; } .page--home .cas-rh-dashboard__metric span{ display: block; margin-top: 4px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .page--home .cas-rh-dashboard__chart{ grid-column: 1 / -1; display: flex; align-items: end; gap: 16px; min-height: 190px; padding: 22px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.025); } .page--home .cas-rh-dashboard__chart span{ flex: 1; height: var(--h); min-height: 34px; background: linear-gradient(180deg, #59E00B, rgba(89,224,11,.18)); } .page--home .cas-rh-driveArray{ position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); gap: 18px; width: min(620px, 78%); transform: translate(-50%, -50%) rotate(2deg); } .page--home .cas-rh-driveArray__drive{ position: relative; min-height: 190px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)), #090b0d; box-shadow: 0 28px 70px rgba(0,0,0,.42); } .page--home .cas-rh-driveArray__drive::before{ content: ""; position: absolute; left: 18px; top: 18px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.04); } .page--home .cas-rh-driveArray__drive i{ position: absolute; left: 18px; right: 18px; bottom: 18px; height: 4px; background: rgba(255,255,255,.14); } .page--home .cas-rh-driveArray__drive.is-clean{ border-color: rgba(89,224,11,.30); } .page--home .cas-rh-driveArray__drive.is-lock{ border-color: rgba(13,116,245,.34); } .page--home .cas-rh-driveArray__drive.is-shred{ border-color: rgba(245,158,11,.34); } .page--home .cas-rh-driveArray__drive.is-clean i{ background: #59E00B; } .page--home .cas-rh-driveArray__drive.is-lock i{ background: #4a9dff; } .page--home .cas-rh-driveArray__drive.is-shred i{ background: #f59e0b; } /* ========================================================= Protection guarantee ========================================================= */ .page--home .cas-rh-protection{ padding: clamp(33px, 3.3vw, 51px) 0 clamp(70px, 7vw, 104px); background: #3A3A3A; color: #fff; border-top: 0; } .page--home .cas-rh-protection__inner{ width: min(620px, calc(100% - 56px)); margin: 0 auto; } .page--home .cas-rh-protection__head{ text-align: center; margin-bottom: clamp(124px, 9vw, 148px); } .page--home .cas-rh-protection__head h2{ max-width: 590px; margin: 0 auto; color: #fff; text-align: center; font-family: var(--cas-font-display); font-size: clamp(44px, 3.45vw, 60px); font-weight: 450; letter-spacing: -.020em; line-height: 1.03; } .page--home .cas-rh-protection__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(64px, 5.7vw, 94px); row-gap: clamp(116px, 10vw, 146px); width: min(545px, 100%); margin: 0 auto; } .page--home .cas-rh-prop{ display: flex; flex-direction: column; align-items: center; text-align: center; } .page--home .cas-rh-prop__art{ display: block; width: 258px; height: 198px; object-fit: contain; margin: 0 auto 24px; user-select: none; pointer-events: none; transform: translateX(-12px); } .page--home .cas-rh-prop--pyramidlock{ transform: translateX(-54px); } .page--home .cas-rh-prop--hexagonshapes{ transform: translateX(54px); } .page--home .cas-rh-prop--circlesbetween{ transform: translateX(-54px); } .page--home .cas-rh-prop--3donuts{ transform: translateX(54px); } .page--home .cas-rh-prop--pyramidlock .cas-rh-prop__art{ width: 256px; } .page--home .cas-rh-prop--hexagonshapes .cas-rh-prop__art{ width: 248px; } .page--home .cas-rh-prop--circlesbetween .cas-rh-prop__art{ width: 256px; } .page--home .cas-rh-prop--3donuts .cas-rh-prop__art{ width: 286px; } .page--home .cas-rh-prop h3{ width: max-content; max-width: 360px; margin: 0 auto; color: #fff; font-family: var(--cas-font-text); font-size: 24px; font-weight: 500; letter-spacing: -.04em; line-height: 1.04; text-align: center; transform: translateX(-62px); } .page--home .cas-rh-prop p{ display: none; } /* ========================================================= Learn section ========================================================= */ .page--home .cas-rh-learn{ display: grid; grid-template-columns: minmax(420px, .96fr) minmax(0, 1.04fr); min-height: clamp(640px, 78vh, 840px); background: linear-gradient( 180deg, #010101 0%, #010101 32%, #07070a 40%, #1e202b 50%, #33394b 60%, #4a516b 70%, #656c85 80%, #80879a 90%, #9ca2b1 100% ); border-top: 1px solid rgba(255,255,255,.08); } .page--home .cas-rh-learn__copy{ align-self: center; padding: clamp(54px, 8vw, 120px) clamp(22px, 6vw, 88px); position: relative; z-index: 2; color: #fff; } .page--home .cas-rh-learn__label{ margin: 0 0 14px; color: rgba(255,255,255,.72); font-size: 20px; font-weight: 800; letter-spacing: .01em; } .page--home .cas-rh-learn__copy h2{ width: 620px; max-width: 620px; margin: 0; color: #fff; font-family: var(--cas-font-display); font-size: 62px; font-weight: 400; letter-spacing: -.025em; line-height: 1.02; font-synthesis: none; } .page--home .cas-rh-learn__copy > p:not(.cas-rh-learn__label):not(.cas-rh-learnFineprint){ max-width: 780px; margin: 12px 0 0; color: rgba(255,255,255,.82); font-family: var(--cas-font-text); font-size: 17px; font-weight: 450; line-height: 1.48; } .page--home .cas-rh-learn__copy .cas-rh-btn--green{ margin-top: 26px; background: #C6FF00; color: #050505 !important; border-color: transparent; } @media (max-width: 860px){ .page--home .cas-rh-learn__copy .cas-rh-btn--green{ margin-top: 15px; } } .page--home .cas-rh-learnFineprint{ margin: 16px 0 0; max-width: 620px; color: rgba(255,255,255,.58); font-family: var(--cas-font-text); font-size: 13px; font-weight: 450; line-height: 1.45; } @media (min-width: 981px){ .page--home .cas-rh-learn__copy{ align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-sizing: border-box; } .page--home .cas-rh-learnFineprint{ position: absolute; left: clamp(22px, 6vw, 88px); right: clamp(22px, 6vw, 88px); bottom: clamp(12px, 1.2vw, 18px); width: auto; max-width: 620px; margin: 0; } } @media (min-width: 981px) and (max-width: 1500px){ .page--home .cas-rh-learn__copy > p:not(.cas-rh-learn__label):not(.cas-rh-learnFineprint){ width: 544px; max-width: 544px; } .page--home .cas-rh-learnFineprint{ right: auto; width: 544px; max-width: 544px; } } .page--home .cas-rh-learn__phone{ position: relative; min-height: 580px; display: grid; place-items: center; overflow: visible; } .page--home .cas-rh-learn__phone::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 360px at 48% 48%, rgba(255,255,255,0.10), transparent 62%), radial-gradient(520px 420px at 54% 56%, rgba(198,255,0,0.055), transparent 66%); opacity: 0.78; } .page--home .cas-rh-learn__phone--sphere .cas-rh-app{ display: none !important; } /* ========================================================= Learn section — 3-ring sphere replacement ========================================================= */ .page--home .cas-rh-sphereRig{ position: relative; z-index: 2; width: min(560px, 76%); height: min(580px, 68vh); min-height: 460px; display: grid; place-items: center; margin: 18px auto -10px; pointer-events: none; isolation: isolate; overflow: visible; } .page--home .cas-rh-sphereRig__model{ position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; min-width: 260px; min-height: 260px; margin: auto; background: transparent; visibility: visible; opacity: 1; transform: translateY(14px) scale(1); transform-origin: 50% 50%; contain: layout paint; filter: drop-shadow(0 24px 64px rgba(0,0,0,0.38)) drop-shadow(0 0 28px rgba(220,230,240,0.06)); } .page--home .cas-rh-sphereRig__model::part(default-progress-bar){ display: none; } .page--home .cas-rh-sphereRig__shadow{ position: absolute; left: 50%; bottom: 8%; z-index: 1; width: min(305px, 52%); height: 44px; transform: translateX(-50%); border-radius: 999px; background: radial-gradient( closest-side, rgba(238,242,246,0.24) 0%, rgba(190,198,208,0.15) 38%, rgba(0,0,0,0.13) 66%, transparent 100% ); filter: blur(12px); opacity: 0.68; } @media (min-width: 861px) and (max-width: 1400px){ .page--home .cas-rh-learn{ --cas-rh-learn-scale: calc(100vw / 1400px); --cas-rh-learn-base-height: clamp(640px, 78vh, 840px); grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); min-height: 0; border-top-width: calc(1px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__copy{ align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-sizing: border-box; padding: calc(112px * var(--cas-rh-learn-scale)) calc(84px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__label{ margin: 0 0 calc(14px * var(--cas-rh-learn-scale)); font-size: calc(20px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__copy h2{ width: calc(620px * var(--cas-rh-learn-scale)); max-width: calc(620px * var(--cas-rh-learn-scale)); font-size: calc(62px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__copy > p:not(.cas-rh-learn__label):not(.cas-rh-learnFineprint){ width: calc(544px * var(--cas-rh-learn-scale)); max-width: calc(544px * var(--cas-rh-learn-scale)); margin: calc(12px * var(--cas-rh-learn-scale)) 0 0; font-size: calc(17px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__copy .cas-rh-btn--green{ min-height: calc(50px * var(--cas-rh-learn-scale)); margin-top: clamp(20.145px, 1.829697vw, 26px); padding: 0 calc(26px * var(--cas-rh-learn-scale)); border-width: calc(1px * var(--cas-rh-learn-scale)); font-size: calc(15px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__copy .cas-rh-btn--green:hover{ transform: translateY(calc(-1px * var(--cas-rh-learn-scale))); } .page--home .cas-rh-learnFineprint{ position: absolute; left: calc(84px * var(--cas-rh-learn-scale)); right: auto; bottom: calc(16.8px * var(--cas-rh-learn-scale)); width: calc(544px * var(--cas-rh-learn-scale)); max-width: calc(544px * var(--cas-rh-learn-scale)); margin: 0; font-size: calc(13px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__phone{ min-height: calc(580px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-learn__phone::before{ background: radial-gradient( calc(520px * var(--cas-rh-learn-scale)) calc(360px * var(--cas-rh-learn-scale)) at 48% 48%, rgba(255,255,255,0.10), transparent 62% ), radial-gradient( calc(520px * var(--cas-rh-learn-scale)) calc(420px * var(--cas-rh-learn-scale)) at 54% 56%, rgba(198,255,0,0.055), transparent 66% ); } .page--home .cas-rh-sphereRig{ width: 76%; height: calc(580px * var(--cas-rh-learn-scale)); min-height: calc(460px * var(--cas-rh-learn-scale)); margin: calc(18px * var(--cas-rh-learn-scale)) auto calc(-10px * var(--cas-rh-learn-scale)); } .page--home .cas-rh-sphereRig__model{ min-width: calc(260px * var(--cas-rh-learn-scale)); min-height: calc(260px * var(--cas-rh-learn-scale)); transform: translateY(calc(14px * var(--cas-rh-learn-scale))) scale(1); filter: drop-shadow( 0 calc(24px * var(--cas-rh-learn-scale)) calc(64px * var(--cas-rh-learn-scale)) rgba(0,0,0,0.38) ) drop-shadow( 0 0 calc(28px * var(--cas-rh-learn-scale)) rgba(220,230,240,0.06) ); } .page--home .cas-rh-sphereRig__shadow{ width: 52%; height: calc(44px * var(--cas-rh-learn-scale)); filter: blur(calc(12px * var(--cas-rh-learn-scale))); } } @media (min-width: 1401px) and (max-width: 1420px){ .page--home .cas-rh-learn__copy .cas-rh-btn--green{ margin-top: 1.829697vw; } } /* * Keep the section's full 1400px-reference height through 1201px. */ @media (min-width: 1201px) and (max-width: 1400px){ .page--home .cas-rh-learn{ height: var(--cas-rh-learn-base-height); } } /* * Begin decreasing the section height proportionately from * 1200px through 1101px. */ @media (min-width: 1101px) and (max-width: 1200px){ .page--home .cas-rh-learn{ height: calc( var(--cas-rh-learn-base-height) * (100vw / 1200px) ); } } /* * Freeze the section height from 1100px through 951px. */ @media (min-width: 951px) and (max-width: 1100px){ .page--home .cas-rh-learn{ height: calc( var(--cas-rh-learn-base-height) * (1101px / 1200px) ); } } /* * Resume the proportional section-height decrease from * 950px through 861px. */ @media (min-width: 861px) and (max-width: 950px){ .page--home .cas-rh-learn{ height: calc( var(--cas-rh-learn-base-height) * (1101px / 1200px) * (100vw / 950px) ); } } /* * Stacked layout below the 861px threshold: * centered content above and the 3D sphere below. */ @media (max-width: 860px){ .page--home .cas-rh-learn{ grid-template-columns: minmax(0, 1fr); } .page--home .cas-rh-learn__copy{ width: 100%; min-width: 0; max-width: 100%; margin: 0 auto; padding: 60px 20px 70px; box-sizing: border-box; text-align: center; } .page--home .cas-rh-learn__copy h2{ width: min(620px, 100%); max-width: 100%; margin-right: auto; margin-left: auto; } .page--home .cas-rh-learn__copy > p:not(.cas-rh-learn__label):not(.cas-rh-learnFineprint){ width: min(780px, 100%); max-width: 100%; margin-right: auto; margin-left: auto; } .page--home .cas-rh-learnFineprint{ width: min(620px, 100%); max-width: 100%; margin-right: auto; margin-left: auto; } .page--home .cas-rh-learn__copy .cas-rh-btn--green{ display: inline-flex; width: max-content; max-width: 100%; box-sizing: border-box; } .page--home .cas-rh-learn__phone{ min-height: 464px; } .page--home .cas-rh-sphereRig{ width: min(470px, 88vw); height: min(470px, 60vh); min-height: 390px; margin: -8px auto 22px; } } /* * Narrow only the main Rescue Tech paragraph on the * stacked tablet layout from 641px through 860px. */ @media (min-width: 641px) and (max-width: 860px){ .page--home .cas-rh-learn__copy > p:not(.cas-rh-learn__label):not(.cas-rh-learnFineprint){ width: min(700px, calc(100% - 48px)); max-width: min(700px, calc(100% - 48px)); margin-right: auto; margin-left: auto; } } @media (max-width: 520px){ .page--home .cas-rh-learn__phone{ min-height: 390px; } .page--home .cas-rh-sphereRig{ width: min(420px, 100vw); height: 400px; min-height: 360px; margin: -12px auto 14px; } .page--home .cas-rh-sphereRig__shadow{ width: 62%; height: 38px; bottom: 9%; } } .page--home .cas-rh-app{ position: absolute; left: 50%; top: 50%; z-index: 2; width: min(320px, 64vw); aspect-ratio: 9 / 18.5; padding: 22px; border-radius: 42px; border: 1px solid rgba(255,255,255,.18); background: #050505; box-shadow: 0 58px 140px rgba(0,0,0,.72), inset 0 0 0 8px rgba(255,255,255,.04); transform: translate(-50%, -50%) rotate(4deg); } .page--home .cas-rh-app::before{ content: ""; position: absolute; left: 50%; top: 16px; width: 82px; height: 18px; border-radius: 999px; background: #000; transform: translateX(-50%); z-index: 3; } .page--home .cas-rh-app__top, .page--home .cas-rh-app__metric, .page--home .cas-rh-app__list{ position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.045); } .page--home .cas-rh-app__top{ margin-top: 24px; padding: 16px; color: rgba(255,255,255,.78); font-size: 13px; } .page--home .cas-rh-app__top span{ display: block; width: 42px; height: 5px; margin-bottom: 10px; background: #59E00B; } .page--home .cas-rh-app__metric{ margin-top: 14px; padding: 20px 16px; } .page--home .cas-rh-app__metric strong{ display: block; color: #59E00B; font-family: var(--cas-font-display); font-size: 46px; font-weight: 500; } .page--home .cas-rh-app__metric span{ color: rgba(255,255,255,.62); font-size: 13px; } .page--home .cas-rh-app__list{ display: grid; gap: 10px; margin-top: 14px; padding: 16px; } .page--home .cas-rh-app__list span{ display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.76); font-size: 13px; } .page--home .cas-rh-app__list i{ width: 8px; height: 8px; border-radius: 999px; background: #59E00B; } /* ========================================================= Final CTA ========================================================= */ .page--home .cas-rh-finalCta{ position: relative; min-height: clamp(560px, 72vh, 780px); display: grid; place-items: center; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); background: #000; } .page--home .cas-rh-finalCta__media{ display: none; } .page--home .cas-rh-finalCta__media::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.05), rgba(0,0,0,.90) 72%), linear-gradient(180deg, rgba(0,0,0,.10), #000 92%); } .page--home .cas-rh-finalCta__grid{ position: absolute; inset: -12%; background: linear-gradient(rgba(89,224,11,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(89,224,11,.10) 1px, transparent 1px); background-size: 58px 58px; transform: perspective(800px) rotateX(58deg) translateY(6%); transform-origin: center bottom; opacity: .7; } .page--home .cas-rh-finalCta__orb{ position: absolute; border-radius: 999px; filter: blur(4px); } .page--home .cas-rh-finalCta__orb--one{ left: 18%; top: 24%; width: 220px; height: 220px; background: rgba(89,224,11,.24); } .page--home .cas-rh-finalCta__orb--two{ right: 16%; bottom: 18%; width: 320px; height: 320px; background: rgba(13,116,245,.17); } .page--home .cas-rh-finalCta__content{ position: relative; z-index: 2; max-width: 950px; padding: 70px 20px; text-align: center; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 980px){ .page--home .cas-rh-spotlight, .page--home .cas-rh-productHero, .page--home .cas-rh-productHero--sanitize{ grid-template-columns: 1fr; } .page--home .cas-rh-productHero--managed{ grid-template-columns: 1fr; min-height: 720px; } .page--home .cas-rh-managedLeaves{ left: 50%; top: 34%; width: min(1160px, 122vw); opacity: .36; transform: translate(-50%, -50%); } .page--home .cas-rh-managedLeaves img{ -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.48) 56%, rgba(0,0,0,0) 100% ); mask-image: linear-gradient( to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.48) 56%, rgba(0,0,0,0) 100% ); } .page--home .cas-rh-productHero__content--managed{ grid-column: 1; max-width: 620px; margin: 0 auto; padding: 44px 28px 70px; } .page--home .cas-rh-spotlight::after{ background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78) 64%, #000 100%); } .page--home .cas-rh-spotlight__content, .page--home .cas-rh-productHero__content{ max-width: none; padding: 44px 20px 70px; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__content{ order: 2; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual{ order: 1; } .page--home .cas-rh-productHero--reporting{ min-height: auto; } .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual{ min-height: 470px; } .page--home .cas-rh-reportClipboard{ left: 50%; bottom: 0; width: min(680px, 86vw); transform: translateX(-50%); } .page--home .cas-rh-productHero__content--reporting{ max-width: 620px; margin: 0 auto; padding: 28px 28px 88px; text-align: center; } .page--home .cas-rh-productHero__content--reporting p{ margin-left: auto; margin-right: auto; } .page--home .cas-rh-duo__grid{ grid-template-columns: 1fr; } .page--home .cas-rh-miniFeature{ min-height: 620px; } .page--home .cas-rh-protection__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .page--home .cas-rh-pickupMap{ width: min(320px, 58vw); } } /* * REPORTING PANEL — PROPORTIONAL DESKTOP/LAPTOP SCALE * * The complete 1578px desktop composition is the reference. * Every dimensional value scales together from 1578px through * 861px while the two-column layout remains intact. */ @media (min-width: 861px) and (max-width: 1578px){ .page--home .cas-rh-productHero--reporting{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); height: 53.865653vw; min-height: 0; } .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual{ height: 100%; min-height: 0; overflow: visible; } .page--home .cas-rh-reportClipboard{ left: 5.2vw; bottom: 0; width: 51.964512vw; transform: none; } .page--home .cas-rh-reportClipboard__image{ filter: drop-shadow( 0 2.154626vw 2.788340vw rgba(0,0,0,.30) ); } .page--home .cas-rh-productHero__content--reporting{ align-self: center; width: 43.092522vw; max-width: 43.092522vw; margin: 0; padding: 7.604563vw 5.576679vw; text-align: left; } .page--home .cas-rh-productHero__content--reporting h2{ width: 39.290241vw; max-width: 39.290241vw; font-size: 3.422053vw; } .page--home .cas-rh-productHero__content--reporting p{ max-width: 32.002535vw; margin: 1.394170vw 0 0; font-size: .950570vw; } .page--home .cas-rh-productHero__content--reporting .cas-rh-btn--reporting{ min-width: 8.998733vw; min-height: 2.661597vw; margin-top: 1.394170vw; padding: 0 1.584284vw; font-size: .950570vw; } .page--home .cas-rh-productHero__content--reporting .cas-rh-btn--reporting:hover{ transform: translateY(-.063371vw); } .page--home .cas-rh-reportingFineprint{ left: calc(50% + 7.477820vw); bottom: 1.140684vw; width: 32.953105vw; font-size: .633714vw; } .page--home .cas-rh-reportingFineprint a, .page--home .cas-rh-reportingFineprint a:link, .page--home .cas-rh-reportingFineprint a:visited{ text-underline-offset: .126743vw; } } @media (min-width: 861px) and (max-width: 1100px){ .page--home .cas-rh-productHero__content--reporting .cas-rh-btn--reporting{ min-width: 99.076px; min-height: 29.304px; padding: 0 17.443px; font-size: 10.466px; } } @media (max-width: 640px){ .page--home .cas-rh-actions{ align-items: stretch; flex-direction: column; } .page--home .cas-rh-btn, .page--home .cas-rh-link{ width: 100%; text-align: center; } .page--home .cas-rh-sectionTitle h2, .page--home .cas-rh-spotlight__content h2, .page--home .cas-rh-productHero__content h2, .page--home .cas-rh-learn__copy h2, .page--home .cas-rh-finalCta__content h2, .page--home .cas-rh-protection__head h2{ font-size: 42px; line-height: .98; } .page--home .cas-rh-spotlight__media, .page--home .cas-rh-productHero__visual{ min-height: 430px; } .page--home .cas-rh-learn__phone{ min-height: 414px; } .page--home .cas-rh-terminal{ left: 18px; top: 16%; width: calc(100% - 36px); } .page--home .cas-rh-terminal__row{ grid-template-columns: 1fr; gap: 6px; } .page--home .cas-rh-pickupMap{ right: 18px; bottom: 22px; width: 190px; } .page--home .cas-rh-dashboard{ grid-template-columns: 1fr; width: calc(100% - 36px); min-height: 360px; } .page--home .cas-rh-dashboard__sidebar{ display: none; } .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual{ min-height: 360px; } .page--home .cas-rh-reportClipboard{ bottom: 0; width: min(520px, 96vw); } .page--home .cas-rh-productHero__content--reporting h2{ width: 540px; max-width: calc(100vw - 112px); font-size: 48px; font-weight: 450; letter-spacing: -.065em; line-height: 1.02; font-synthesis: none; } .page--home .cas-rh-productHero__content--reporting p{ font-size: 12px; } .page--home .cas-rh-reportingFineprint{ bottom: 14px; font-size: 9px; } .page--home .cas-rh-driveArray{ grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 44px); } .page--home .cas-rh-driveArray__drive{ min-height: 128px; } .page--home .cas-rh-protection__grid{ grid-template-columns: 1fr; } .page--home .cas-rh-miniFeature{ grid-template-rows: 300px auto; min-height: auto; } .page--home .cas-rh-miniFeature__body{ padding: 28px 20px 34px; } } @media (prefers-reduced-motion: reduce){ .page--home .cas-rh-btn, .page--home .cas-rh-miniFeature, .page--home .cas-rh-awayCard, .page--home .cas-rh-productHero *, .page--home .cas-rh-protection *, .page--home .cas-rh-finalCta *{ transition: none !important; animation: none !important; } .page--home .cas-rh-sphereRig, .page--home .cas-rh-sphereRig *, .page--home .cas-rh-sphereRig__model{ visibility: visible !important; opacity: 1 !important; } .page--home .cas-rh-sphereRig__model{ display: block !important; } } /* * REPORTING PANEL — STACKED TABLET / MOBILE LAYOUT * * Applies from 860px downward. The clipboard becomes part of the * normal layout so its upper edge cannot be clipped, while the * built-in lower reflection fades away before the text begins. */ @media (max-width: 860px){ .page--home .cas-rh-productHero--reporting{ grid-template-columns: 1fr; height: auto; min-height: 0; } .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual{ height: auto; min-height: 0; padding-top: clamp(8px, 1.395349vw, 12px); overflow: hidden; } .page--home .cas-rh-reportClipboard{ position: relative; left: auto; bottom: auto; width: min(780px, 92vw); aspect-ratio: 1.18 / 1; margin: 0 auto; overflow: hidden; transform: translateX(clamp(-48px, -4.6vw, -24px)); } .page--home .cas-rh-reportClipboard__image{ position: relative; display: block; width: 100%; height: auto; filter: drop-shadow( 0 clamp(18px, 2.790698vw, 24px) clamp(26px, 4.186047vw, 36px) rgba(0,0,0,.28) ); -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 68%, rgba(0,0,0,.96) 72%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.30) 88%, transparent 96% ); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient( to bottom, #000 0%, #000 68%, rgba(0,0,0,.96) 72%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.30) 88%, transparent 96% ); mask-repeat: no-repeat; mask-size: 100% 100%; } .page--home .cas-rh-productHero__content--reporting{ align-self: auto; width: 100%; max-width: 740px; margin: 0 auto; padding: clamp(18px, 2.558140vw, 22px) clamp(24px, 4.186047vw, 36px) clamp(112px, 14.186047vw, 122px); text-align: center; } .page--home .cas-rh-productHero__content--reporting h2{ width: auto; max-width: 760px; margin: 0 auto; color: #fff; font-family: var(--cas-font-display); font-size: clamp(46px, 7.209302vw, 62px); font-weight: 400; letter-spacing: -.025em; line-height: 1.02; text-align: center; font-synthesis: none; } .page--home .cas-rh-productHero__content--reporting p{ max-width: 710px; margin: clamp(20px, 2.558140vw, 22px) auto 0; color: rgba(255,255,255,.88); font-family: var(--cas-font-text); font-size: clamp(16px, 2.441860vw, 21px); font-weight: 600; letter-spacing: normal; line-height: 1.45; text-align: center; font-synthesis: none; } .page--home .cas-rh-btn--reporting{ width: max-content; min-width: clamp(136px, 19.069767vw, 164px); min-height: clamp(42px, 5.581395vw, 48px); margin-top: clamp(20px, 2.558140vw, 22px); padding: 0 clamp(28px, 3.720930vw, 32px); font-family: var(--cas-font-text); font-size: clamp(15px, 2.034884vw, 17.5px); font-weight: 650; letter-spacing: normal; line-height: 1; font-synthesis: none; } .page--home .cas-rh-reportingFineprint{ left: 50%; bottom: clamp(18px, 2.558140vw, 22px); width: min(700px, calc(100% - 56px)); max-width: 700px; margin: 0; transform: translateX(-50%); font-family: var(--cas-font-text); font-size: clamp(11.5px, 1.744186vw, 15px); font-weight: 800; letter-spacing: normal; line-height: 1.35; text-align: left; font-synthesis: none; } .page--home .cas-rh-reportingFineprint a, .page--home .cas-rh-reportingFineprint a:link, .page--home .cas-rh-reportingFineprint a:visited{ text-underline-offset: 2px; } } /* * REPORTING PANEL — PROPORTIONAL PHONE SCALE * * The exact rendered layout at 521px is the reference. * Every visible dimension scales by viewport width below 521px. */ @media (max-width: 520px){ .page--home .cas-rh-productHero--reporting .cas-rh-productHero__visual{ padding-top: 1.535509vw; } .page--home .cas-rh-reportClipboard{ width: 92vw; transform: translateX(-4.606526vw); } .page--home .cas-rh-reportClipboard__image{ filter: drop-shadow( 0 3.454894vw 4.990403vw rgba(0,0,0,.28) ); } .page--home .cas-rh-productHero__content--reporting{ width: 100%; max-width: 100%; padding: 3.454894vw 4.606526vw 21.497121vw; } .page--home .cas-rh-productHero__content--reporting h2{ width: 100%; max-width: 100%; font-size: 7.689927vw; } .page--home .cas-rh-productHero__content--reporting p{ width: 100%; max-width: 100%; margin-top: 3.838772vw; font-size: 3.071017vw; } .page--home .cas-rh-btn--reporting{ width: max-content; min-width: 26.103647vw; min-height: 8.061420vw; margin-top: 3.838772vw; padding: 0 5.374280vw; font-size: 2.879079vw; } .page--home .cas-rh-btn--reporting:hover{ transform: translateY(-0.191939vw); } .page--home .cas-rh-reportingFineprint{ bottom: 3.454894vw; width: 89.251440vw; max-width: 89.251440vw; font-size: 2.207294vw; } .page--home .cas-rh-reportingFineprint a, .page--home .cas-rh-reportingFineprint a:link, .page--home .cas-rh-reportingFineprint a:visited{ text-underline-offset: 0.383877vw; } } /* ========================================================= PHASE 9 — RESPONSIVE ADDITIONS (mobile/tablet gaps) Added for missing width ranges below 860px. These rules only ADD behavior — no existing rules are modified. ========================================================= */ /* ---- Overflow safety for all homepage sections ---- */ .page--home .cas-rh-protection, .page--home .cas-rh-learn, .page--home .cas-rh-finalCta, .page--home .cas-rh-spotlight, .page--home .cas-rh-productHero, .page--home .cas-rh-duo{ overflow-x: clip; } /* ---- Protection guarantee section: tablet/mobile fixes ---- */ /* * From 641px through 860px, use the exact one-column * composition reached at the 640px breakpoint. * The cards remain the same size while only the outer * left and right space increases with the viewport. */ @media (min-width: 641px) and (max-width: 860px){ .page--home .cas-rh-protection__grid{ grid-template-columns: 1fr; row-gap: 116px; } .page--home .cas-rh-prop--pyramidlock, .page--home .cas-rh-prop--hexagonshapes, .page--home .cas-rh-prop--circlesbetween, .page--home .cas-rh-prop--3donuts{ transform: none; } .page--home .cas-rh-prop h3{ width: auto; max-width: 100%; font-size: 24px; transform: none; } .page--home .cas-rh-prop__art{ width: 258px; height: auto; margin-bottom: 16px; transform: none; } .page--home .cas-rh-protection__head{ margin-bottom: 89.6px; } .page--home .cas-rh-protection__inner{ width: min(620px, calc(100% - 32px)); } } @media (max-width: 640px){ .page--home .cas-rh-protection__head h2{ width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; font-size: clamp(29px, 7.8vw, 44px); line-height: .98; text-wrap: balance; } .page--home .cas-rh-prop--pyramidlock, .page--home .cas-rh-prop--hexagonshapes, .page--home .cas-rh-prop--circlesbetween, .page--home .cas-rh-prop--3donuts{ transform: none; } .page--home .cas-rh-prop h3{ transform: none; width: auto; max-width: 100%; font-size: clamp(18px, 5.5vw, 24px); } .page--home .cas-rh-prop__art{ width: clamp(160px, 50vw, 258px); height: auto; margin-bottom: 16px; transform: none; } .page--home .cas-rh-protection__head{ margin-bottom: clamp(56px, 14vw, 124px); } .page--home .cas-rh-protection__inner{ width: min(620px, calc(100% - 32px)); } } @media (max-width: 390px){ .page--home .cas-rh-prop__art{ width: clamp(130px, 42vw, 180px); } .page--home .cas-rh-prop h3{ font-size: clamp(16px, 4.8vw, 20px); } } /* ---- Learn section: fluid heading on mobile ---- */ @media (max-width: 640px){ .page--home .cas-rh-learn__copy h2{ width: auto; max-width: 100%; font-size: clamp(32px, 9vw, 42px); } .page--home .cas-rh-learn__label{ font-size: clamp(14px, 4.2vw, 20px); } .page--home .cas-rh-learn__copy > p:not(.cas-rh-learn__label):not(.cas-rh-learnFineprint){ font-size: clamp(14px, 4vw, 17px); } .page--home .cas-rh-learn__copy{ padding: calc(clamp(32px, 8vw, 54px) + 16px) clamp(16px, 4vw, 22px) clamp(32px, 8vw, 54px); } } @media (max-width: 520px){ .page--home .cas-rh-learn__copy .cas-rh-btn--green{ flex: 0 0 auto; width: max-content; min-width: 0; max-width: none; min-height: clamp(42px, calc(32px + 3.46vw), 50px); margin-top: clamp(13px, calc(10px + 0.96vw), 15px); padding-right: clamp(20px, calc(14px + 2.3vw), 26px); padding-left: clamp(20px, calc(14px + 2.3vw), 26px); border-width: 1px; font-size: clamp(13px, calc(10px + 0.96vw), 15px); white-space: nowrap; } .page--home .cas-rh-learn__copy .cas-rh-btn--green:hover{ transform: translateY(-1px); } } @media (max-width: 390px){ .page--home .cas-rh-learn__copy h2{ font-size: clamp(28px, 8vw, 34px); } } /* ---- Final CTA: mobile refinements ---- */ @media (max-width: 640px){ .page--home .cas-rh-finalCta{ min-height: clamp(560px, 72vh, 780px); background: #000; } .page--home .cas-rh-finalCta__content{ padding: clamp(40px, 10vw, 70px) clamp(16px, 4vw, 20px); } .page--home .cas-rh-finalCta__content h2{ font-size: clamp(32px, 9vw, 42px); } .page--home .cas-rh-finalCta .cas-rh-actions--center{ flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; width: auto; max-width: none; gap: clamp(8px, 2.5vw, 16px); margin-top: clamp(20px, calc(14px + 1.875vw), 26px); } .page--home .cas-rh-finalCta .cas-rh-btn{ flex: 0 0 auto; width: max-content; min-width: 0; max-width: none; min-height: clamp(42px, calc(34px + 2.5vw), 50px); padding-right: clamp(16px, calc(8px + 2.8125vw), 26px); padding-left: clamp(16px, calc(8px + 2.8125vw), 26px); font-size: clamp(12px, calc(9px + 0.9375vw), 15px); white-space: nowrap; } .page--home .cas-rh-finalCta .cas-rh-btn--outline{ display: inline-flex; } } @media (max-width: 390px){ .page--home .cas-rh-finalCta__content h2{ font-size: clamp(26px, 7.5vw, 32px); } } /* ---- awayCard pathway cards: small phone overflow fixes ---- */ @media (max-width: 390px){ .page--home .cas-rh-awayCard__content{ padding: clamp(28px, 7vw, 45px) clamp(16px, 4vw, 22px) 14px; } .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ font-size: clamp(22px, 6.5vw, 30px); } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ max-width: 100%; margin-top: 12px; font-size: 14.5px; line-height: 1.25; } .page--home .cas-rh-awayCard__points h3{ font-size: 14px; line-height: 1.14; } .page--home .cas-rh-awayCard__btn{ min-width: 156.642px; min-height: 47.467px; padding: 0 27.294px; font-size: 16.614px; } .page--home .cas-rh-awayCard__media img{ left: auto; bottom: auto; width: auto; max-width: var(--cas-away-art-max, 100%); } } /* ---- awayCard pathway cards: preserve stable CTA from 520px through 441px ---- */ @media (min-width: 441px) and (max-width: 520px){ .page--home .cas-rh-awayCard__btn{ min-width: 156.642px; min-height: 47.467px; padding: 0 27.294px; font-size: 16.614px; } .page--home .cas-rh-awayCard:hover .cas-rh-awayCard__btn{ transform: translateY(-1.187px); } .page--home .cas-rh-awayCard__media img{ left: auto; bottom: auto; width: auto; max-width: var(--cas-away-art-max, 100%); } } /* ---- awayCard pathway cards: preserve stable CTA at 440px and below ---- */ @media (max-width: 440px){ .page--home .cas-rh-awayCard__btn{ min-width: 156.642px; min-height: 47.467px; padding: 0 27.294px; font-size: 16.614px; } .page--home .cas-rh-awayCard:hover .cas-rh-awayCard__btn{ transform: translateY(-1.187px); } .page--home .cas-rh-awayCard__media img{ left: auto; bottom: auto; width: auto; max-width: var(--cas-away-art-max, 100%); } } /* ---- Media loop: small phone image sizing ---- */ @media (max-width: 390px){ .page--home .cas-rh-mediaLoop__item{ max-height: 180px; } .page--home .cas-rh-mediaLoop{ --cas-media-slide: min(42vw, 220px); } } /* ---- Duo grid & mini features: tablet gap ---- */ @media (min-width: 521px) and (max-width: 860px){ .page--home .cas-rh-duo__grid{ grid-template-columns: 1fr; gap: clamp(18px, 3vw, 28px); } .page--home .cas-rh-miniFeature{ min-height: 540px; } } /* ========================================================= MANAGED PROGRAM PANEL — TRUE 1301PX STAGE SCALE Above 1300px: display: contents makes the wrapper layout-neutral, so the original desktop layout remains exactly unchanged. 1001px–1300px: the complete 1301px composition is scaled as one object. No individual element is allowed to reflow independently. 1000px and below: display: contents becomes active again, allowing the existing 861px–1000px and mobile logic to remain unchanged. ========================================================= */ .page--home .cas-rh-managedStage{ display: contents; } @media (min-width: 1001px) and (max-width: 1300px){ .page--home .cas-rh-productHero--managed{ display: block; } .page--home .cas-rh-managedStage{ --cas-managed-scale: calc(100vw / 1301px); position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: minmax(560px, 1.06fr) minmax(390px, .94fr); align-items: center; width: 1301px; transform: scale(var(--cas-managed-scale)); transform-origin: left center; } .page--home .cas-rh-managedLeaves{ position: absolute; left: 0; top: 50%; bottom: auto; z-index: 2; /* * Exact value of 54vw at the 1301px reference: * 1301 × 0.54 = 702.54px. * * The complete stage then scales this value uniformly. */ width: 702.54px; margin: 0; opacity: 1; pointer-events: none; overflow: visible; transform: translateY(-50%); } .page--home .cas-rh-managedLeaves img{ display: block; width: 100%; height: auto; max-width: none; object-fit: contain; object-position: left center; user-select: none; filter: drop-shadow(0 34px 54px rgba(0,0,0,.24)); -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.90) 84%, rgba(0,0,0,.48) 93%, rgba(0,0,0,0) 100% ); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.90) 84%, rgba(0,0,0,.48) 93%, rgba(0,0,0,0) 100% ); mask-repeat: no-repeat; mask-size: 100% 100%; } .page--home .cas-rh-productHero__content--managed{ position: relative; z-index: 2; grid-column: 2; align-self: center; width: 880px; max-width: 680px; margin: 0; box-sizing: border-box; /* * Exact effective padding at the 1301px reference: * * vertical: 8vw = 104.08px * horizontal: 6vw = 78.06px * * These are the values applied by the later general * .cas-rh-productHero__content rule at 1301px. */ padding: 104.08px 78.06px; color: #050505; text-align: left; transform: none; } .page--home .cas-rh-productHero__content--managed .cas-rh-label{ margin: 0 0 14px; font-size: 20px; text-align: left; } .page--home .cas-rh-productHero__content--managed h2{ width: auto; max-width: none; margin: 0; font-size: 42px; line-height: 1.04; text-align: left; } .page--home .cas-rh-productHero__content--managed > p:not(.cas-rh-label):not(.cas-rh-fineprint){ width: auto; max-width: 505px; margin: 24px 0 0; color: rgba(0,0,0,.78); font-family: var(--cas-font-text); font-size: 17px; font-weight: 600; line-height: 1.45; text-align: left; } .page--home .cas-rh-productHero__content--managed .cas-rh-btn--dark{ width: max-content; min-height: 50px; margin-top: 24px; padding: 0 26px; border-width: 1px; font-size: 15px; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote{ justify-content: flex-start; width: max-content; gap: 6px; margin-top: 26px; font-size: 12px; text-align: left; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote__info{ width: 14px; height: 14px; font-size: 9px; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote__info::before{ top: -1.5px; width: 14px; height: 14px; border-width: 1px; } } /* --------------------------------------------------------- Frozen right-side content: 861px–1000px All content measurements are the exact values reached at 1001px. The artwork continues decreasing more quickly so its overlap with the content continuously reduces. --------------------------------------------------------- */ @media (min-width: 861px) and (max-width: 1000px){ .page--home .cas-rh-productHero--managed{ position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, calc(100vw - 523.19754px)) 523.19754px; align-items: center; width: 100%; height: auto; min-height: calc( clamp(560px, 72vh, 820px) - 720.72px + 72vw ); padding: 0; overflow: hidden; } .page--home .cas-rh-managedLeaves{ position: absolute; left: 0; top: 50%; bottom: auto; z-index: 2; width: max( 0px, calc( 100vw - 523.19754px - clamp(0px, calc(14.285714vw - 123px), 20px) ) ); margin: 0; opacity: 1; pointer-events: none; overflow: visible; transform: translateY(-50%); } .page--home .cas-rh-managedLeaves img{ display: block; width: 100%; height: auto; max-width: none; object-fit: contain; object-position: left center; user-select: none; filter: drop-shadow( 0 calc(5.185612vw - 25.748101px) calc(8.235972vw - 40.894043px) rgba(0,0,0,.24) ); -webkit-mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.90) 84%, rgba(0,0,0,.48) 93%, rgba(0,0,0,0) 100% ); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient( to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 76%, rgba(0,0,0,.90) 84%, rgba(0,0,0,.48) 93%, rgba(0,0,0,0) 100% ); mask-repeat: no-repeat; mask-size: 100% 100%; } .page--home .cas-rh-productHero__content--managed{ position: relative; z-index: 3; grid-column: 2; grid-row: 1; justify-self: start; align-self: center; width: 100%; max-width: 523.19754px; margin: 0; padding: 80.08px 60.06px; box-sizing: border-box; color: #050505; font-size: 16px; text-align: left; transform: none; } .page--home .cas-rh-productHero__content--managed .cas-rh-label{ width: auto; margin: 0 0 10.771714px; color: rgba(0,0,0,.72); font-size: 15.388163px; text-align: left; } .page--home .cas-rh-productHero__content--managed h2{ width: auto; max-width: none; margin: 0; color: #050505; font-size: 32.315142px; line-height: 1.04; text-align: left; } .page--home .cas-rh-productHero__content--managed > p:not(.cas-rh-label):not(.cas-rh-fineprint){ width: auto; max-width: 388.551115px; margin: 18.465795px 0 0; color: rgba(0,0,0,.78); font-family: var(--cas-font-text); font-size: 13.41px; font-weight: 600; line-height: 1.45; text-align: left; } .page--home .cas-rh-productHero__content--managed .cas-rh-btn--dark{ display: inline-flex; align-items: center; justify-content: center; width: max-content; min-width: 0; height: auto; min-height: 38.470407px; margin-top: 18.465795px; padding: 0 20.004612px; border: .769408px solid rgba(0,0,0,.18); border-radius: 769.408148px; background: #050505; color: #fff !important; font-size: 11.541122px; line-height: 1; white-space: nowrap; } .page--home .cas-rh-productHero__content--managed .cas-rh-btn--dark:hover{ transform: translateY(-.769408px); } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote{ display: flex; align-items: center; justify-content: flex-start; width: max-content; gap: 4.616449px; margin-top: 20.004612px; color: rgba(0,0,0,.72); font-size: 9.232898px; line-height: 1; text-align: left; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote__info{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 10.771714px; height: 10.771714px; color: rgba(0,0,0,.68); font-size: 6.924673px; line-height: 1; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote__info::before{ content: ""; position: absolute; left: 0; top: -1.154112px; width: 10.771714px; height: 10.771714px; box-sizing: border-box; border: .769408px solid rgba(0,0,0,.42); border-radius: 50%; pointer-events: none; } } @media (max-width: 860px){ .page--home .cas-rh-productHero--managed{ grid-template-columns: 1fr; align-items: stretch; height: auto; min-height: 0; padding-top: clamp(12px, 2.790698vw, 24px); } .page--home .cas-rh-productHero--managed::after{ background: linear-gradient( 180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 46%, rgba(152,173,190,.24) 72%, rgba(152,173,190,.58) 100% ); } .page--home .cas-rh-managedLeaves{ position: relative; left: auto; top: auto; bottom: auto; grid-column: 1; grid-row: 1; justify-self: stretch; width: 100%; max-width: none; margin: 0; opacity: 1; overflow: hidden; transform: none; } .page--home .cas-rh-managedLeaves img{ width: 100%; height: auto; filter: drop-shadow( 0 clamp(18px, 2.790698vw, 24px) clamp(28px, 4.186047vw, 36px) rgba(0,0,0,.24) ); -webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 70%, rgba(0,0,0,.94) 77%, rgba(0,0,0,.66) 86%, rgba(0,0,0,.24) 93%, transparent 100% ); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient( to bottom, #000 0%, #000 70%, rgba(0,0,0,.94) 77%, rgba(0,0,0,.66) 86%, rgba(0,0,0,.24) 93%, transparent 100% ); mask-repeat: no-repeat; mask-size: 100% 100%; } .page--home .cas-rh-productHero__content--managed{ grid-column: 1; grid-row: 2; justify-self: center; align-self: auto; width: 100%; max-width: 740px; margin: 0 auto; padding: clamp(18px, 2.558140vw, 22px) clamp(24px, 4.186047vw, 36px) clamp(72px, 9.069767vw, 78px); font-size: 16px; text-align: center; } .page--home .cas-rh-productHero__content--managed .cas-rh-label{ margin: 0 auto clamp(12px, 1.627907vw, 14px); font-size: clamp(17px, 2.325581vw, 20px); text-align: center; } .page--home .cas-rh-productHero__content--managed h2{ width: 100%; max-width: 760px; margin: 0 auto; font-size: clamp(38px, 4.883721vw, 42px); line-height: 1.04; text-align: center; } .page--home .cas-rh-productHero__content--managed > p:not(.cas-rh-label):not(.cas-rh-fineprint){ width: 100%; max-width: 710px; margin: clamp(20px, 2.558140vw, 22px) auto 0; color: rgba(0,0,0,.78); font-family: var(--cas-font-text); font-size: clamp(16px, 2.441860vw, 21px); font-weight: 600; line-height: 1.45; text-align: center; } .page--home .cas-rh-productHero__content--managed .cas-rh-btn--dark{ width: max-content; min-width: calc(113.927969px + 4.194422vw); min-height: calc(32.619618px + 1.788416vw); margin: calc(24.805236px + .604042vw) auto 0; padding: 0 calc(21.746412px + 1.192278vw); font-size: calc(13.397768px + .302585vw); } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote{ justify-content: center; width: max-content; gap: 6px; margin: clamp(22px, 3.023256vw, 26px) auto 0; font-size: clamp(11.5px, 1.395349vw, 12px); text-align: center; } } @media (max-width: 520px){ .page--home .cas-rh-productHero--managed{ padding-top: 2.303263vw; } .page--home .cas-rh-managedLeaves{ width: 100%; max-width: none; margin-left: 0; margin-right: 0; } .page--home .cas-rh-managedLeaves img{ filter: drop-shadow( 0 3.454894vw 5.374280vw rgba(0,0,0,.24) ); } .page--home .cas-rh-productHero__content--managed{ width: 100%; max-width: 100%; padding: 3.454894vw 4.606526vw 14.971209vw; } .page--home .cas-rh-productHero__content--managed .cas-rh-label{ margin-bottom: 2.303263vw; font-size: clamp(15px, 3.262956vw, 17px); } .page--home .cas-rh-productHero__content--managed h2{ width: 100%; max-width: 100%; font-size: clamp(28px, 7.293666vw, 38px); } .page--home .cas-rh-productHero__content--managed > p:not(.cas-rh-label):not(.cas-rh-fineprint){ width: 100%; max-width: 100%; margin: 3.838772vw auto 0; color: rgba(0,0,0,.78); font-family: var(--cas-font-text); font-size: 3.071017vw; font-weight: 600; line-height: 1.45; text-align: center; } .page--home .cas-rh-productHero__content--managed .cas-rh-btn--dark{ width: max-content; min-width: 26.103647vw; min-height: 8.061420vw; margin: 5.374280vw auto 0; padding: 0 5.374280vw; font-size: 2.879079vw; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote{ gap: 1.151631vw; margin-top: 4.222649vw; font-size: clamp(11px, 2.303263vw, 12px); } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote__info{ width: 2.687140vw; height: 2.687140vw; font-size: 1.727447vw; } .page--home .cas-rh-productHero__content--managed .cas-rh-complianceNote__info::before{ top: -.287908vw; width: 2.687140vw; height: 2.687140vw; } } /* ========================================================= SANITIZATION PANEL — EXACT LEGACY 861PX+ RESTORATION This recreates the effective sanitize-section styling from the older home.css, including its original 980px layout breakpoint and its original unequal button behavior. ========================================================= */ @media (min-width: 861px){ .page--home .cas-rh-productHero--sanitize{ position: relative; isolation: isolate; grid-template-columns: minmax(430px, .82fr) minmax(0, 1fr); height: auto; min-height: clamp(720px, 94vh, 980px); overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); background: #000; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__content{ order: 0; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual{ order: 0; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual::before{ display: none; } .page--home .cas-rh-productHero__content--sanitize{ position: relative; z-index: 2; align-self: center; width: auto; max-width: 680px; min-width: auto; margin: 0; padding: clamp(54px, 8vw, 120px) clamp(22px, 6vw, 88px); color: #fff; text-align: left; } .page--home .cas-rh-productHero__content--sanitize h2{ width: 620px; max-width: 620px; margin: 0; color: #fff; font-family: var(--cas-font-display); font-size: 62px; font-weight: 400; letter-spacing: -.025em; line-height: 1.02; text-align: left; font-synthesis: none; } .page--home .cas-rh-productHero__content--sanitize p{ width: auto; max-width: 505px; margin: 22px 0 0; color: rgba(255,255,255,.88); font-family: var(--cas-font-text); font-size: 15px; font-weight: 600; line-height: 1.45; text-align: left; } .page--home .cas-rh-sanitizeResourceLink{ color: #fff; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .page--home .cas-rh-sanitizeResourceLink:hover, .page--home .cas-rh-sanitizeResourceLink:focus, .page--home .cas-rh-sanitizeResourceLink:active{ color: #fff; text-decoration: underline; } .page--home .cas-rh-actions--sanitize{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: normal; width: auto; max-width: none; gap: 14px; margin-top: 26px; } .page--home .cas-rh-btn--sanitizeLearn{ flex: 0 1 auto; width: auto; min-width: 125.714px; max-width: none; height: 40px; min-height: 40px; margin-top: 0; padding: 0 26.666px; font-size: 13.334px; white-space: normal; } .page--home .cas-rh-btn--sanitizeOutline{ display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; width: auto; min-width: 150.476px; max-width: none; height: 40px; min-height: 40px; margin-top: 0; padding: 0 26.666px; border: 1px solid rgba(255,255,255,.74); border-radius: 999px; background: #000; color: #fff !important; font-family: var(--cas-font-text); font-size: 13.334px; font-weight: 700; line-height: 1; text-decoration: none; white-space: normal; } .page--home .cas-rh-btn--sanitizeOutline:hover{ border-color: rgba(255,255,255,.96); background: rgba(255,255,255,.06); color: #fff !important; text-decoration: none; transform: translateY(-1px); } .page--home .cas-rh-productHero__visual--mediaLoop{ position: relative; display: grid; place-items: center; width: auto; height: auto; min-height: 560px; overflow: hidden; background: #000; } .page--home .cas-rh-mediaLoop{ position: absolute; inset: 0; width: auto; height: auto; overflow: hidden; background: #000; --cas-media-slide: min(34vw, 320px); } .page--home .cas-rh-mediaLoop::before{ content: ""; position: absolute; left: 50%; top: -30%; z-index: 1; width: min(760px, 92%); height: 132%; transform: translateX(-50%); pointer-events: none; background: radial-gradient( ellipse at 50% 31%, rgba(255,255,255,.255) 0%, rgba(246,255,238,.145) 19%, rgba(214,255,183,.060) 38%, rgba(89,224,11,.018) 57%, rgba(0,0,0,0) 78% ); filter: blur(28px); opacity: .92; } .page--home .cas-rh-mediaLoop::after{ content: ""; position: absolute; left: 50%; top: 53%; z-index: 1; width: min(660px, 82%); height: 260px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient( ellipse at 50% 50%, rgba(255,255,255,.205) 0%, rgba(246,255,238,.105) 29%, rgba(198,255,153,.038) 51%, rgba(89,224,11,.012) 65%, rgba(0,0,0,0) 82% ); filter: blur(30px); opacity: .88; } .page--home .cas-rh-mediaLoop__slot{ position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, transparent 16%, #000 34%, #000 66%, transparent 84%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, transparent 16%, #000 34%, #000 66%, transparent 84%, transparent 100% ); } .page--home .cas-rh-mediaLoop__item{ display: block; width: min(420px, 62%); max-height: 340px; object-fit: contain; opacity: 0; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.06) contrast(1.14) drop-shadow(0 34px 74px rgba(0,0,0,.74)); will-change: transform, opacity, filter; user-select: none; pointer-events: none; } .page--home .cas-rh-mediaLoop__item.is-active{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .page--home .cas-rh-mediaLoop__item.is-entering{ animation: casMediaLoopEnter 650ms cubic-bezier(.16,.96,.18,1) both; } .page--home .cas-rh-mediaLoop__item.is-exiting{ animation: casMediaLoopExit 520ms cubic-bezier(.58,.02,.92,.42) both; } .page--home .cas-rh-mediaLoop[data-media-kind="ssd"] .cas-rh-mediaLoop__item{ width: min(430px, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="usb"] .cas-rh-mediaLoop__item{ width: min(360px, 54%); } .page--home .cas-rh-mediaLoop[data-media-kind="hdd"] .cas-rh-mediaLoop__item{ width: min(430px, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="cassette"] .cas-rh-mediaLoop__item{ width: min(440px, 64%); } .page--home .cas-rh-mediaLoop[data-media-kind="dvd"] .cas-rh-mediaLoop__item{ width: min(300px, 48%); } .page--home .cas-rh-mediaLoop[data-media-kind="microsd"] .cas-rh-mediaLoop__item{ width: min(350px, 54%); } } /* ========================================================= SANITIZATION PANEL — RESPONSIVE DESKTOP SCALING 1351px and above: The original legacy desktop design remains unchanged. 1101px–1350px: The entire section, including its copy, buttons, spacing, carousel, effects, and height, scales proportionally from the exact 1351px desktop presentation. 861px–1100px: The left-side copy freezes at its 1101px dimensions. The section height and carousel continue scaling down. ========================================================= */ /* --------------------------------------------------------- Shared scaling for the section and carousel: 861px–1350px --------------------------------------------------------- */ @media (min-width: 861px) and (max-width: 1350px){ .page--home .cas-rh-productHero--sanitize{ grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); height: 72.538860vw; min-height: 72.538860vw; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__content{ order: 0; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual{ order: 0; } .page--home .cas-rh-productHero__visual--mediaLoop{ width: auto; height: 100%; min-height: 0; } .page--home .cas-rh-mediaLoop{ position: absolute; inset: 0; width: auto; height: auto; --cas-media-slide: 23.686158vw; --sanitize-media-shadow-y: 2.516654vw; --sanitize-media-shadow-blur: 5.477424vw; --sanitize-media-shadow-y-dim: 2.072539vw; --sanitize-media-shadow-blur-dim: 4.589193vw; } .page--home .cas-rh-mediaLoop::before{ width: min(56.254626vw, 92%); filter: blur(2.072539vw); } .page--home .cas-rh-mediaLoop::after{ width: min(48.852702vw, 82%); height: 19.245004vw; filter: blur(2.220577vw); } .page--home .cas-rh-mediaLoop__item{ width: min(31.088083vw, 62%); max-height: 25.166543vw; filter: brightness(1.06) contrast(1.14) drop-shadow( 0 var(--sanitize-media-shadow-y) var(--sanitize-media-shadow-blur) rgba(0,0,0,.74) ); } .page--home .cas-rh-mediaLoop__item.is-entering{ animation: casMediaLoopEnterSanitizeScaled 650ms cubic-bezier(.16,.96,.18,1) both; } .page--home .cas-rh-mediaLoop__item.is-exiting{ animation: casMediaLoopExitSanitizeScaled 520ms cubic-bezier(.58,.02,.92,.42) both; } .page--home .cas-rh-mediaLoop[data-media-kind="ssd"] .cas-rh-mediaLoop__item{ width: min(31.828275vw, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="usb"] .cas-rh-mediaLoop__item{ width: min(26.646928vw, 54%); } .page--home .cas-rh-mediaLoop[data-media-kind="hdd"] .cas-rh-mediaLoop__item{ width: min(31.828275vw, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="cassette"] .cas-rh-mediaLoop__item{ width: min(32.568468vw, 64%); } .page--home .cas-rh-mediaLoop[data-media-kind="dvd"] .cas-rh-mediaLoop__item{ width: min(22.205774vw, 48%); } .page--home .cas-rh-mediaLoop[data-media-kind="microsd"] .cas-rh-mediaLoop__item{ width: min(25.906736vw, 54%); } } /* --------------------------------------------------------- Shared scaling for the section and carousel: 861px–1420px --------------------------------------------------------- */ @media (min-width: 861px) and (max-width: 1420px){ .page--home .cas-rh-productHero--sanitize{ grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); height: 68.965517vw; min-height: 68.965517vw; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__content{ order: 0; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual{ order: 0; } .page--home .cas-rh-productHero__visual--mediaLoop{ width: auto; height: 100%; min-height: 0; } .page--home .cas-rh-mediaLoop{ position: absolute; inset: 0; width: auto; height: auto; --cas-media-slide: 22.519353vw; --sanitize-media-shadow-y: 2.392681vw; --sanitize-media-shadow-blur: 5.207600vw; --sanitize-media-shadow-y-dim: 1.970443vw; --sanitize-media-shadow-blur-dim: 4.363125vw; } .page--home .cas-rh-mediaLoop::before{ width: min(53.483462vw, 92%); filter: blur(1.970443vw); } .page--home .cas-rh-mediaLoop::after{ width: min(46.446165vw, 82%); height: 18.296974vw; filter: blur(2.111189vw); } .page--home .cas-rh-mediaLoop__item{ width: min(29.556650vw, 62%); max-height: 23.926812vw; filter: brightness(1.06) contrast(1.14) drop-shadow( 0 var(--sanitize-media-shadow-y) var(--sanitize-media-shadow-blur) rgba(0,0,0,.74) ); } .page--home .cas-rh-mediaLoop__item.is-entering{ animation: casMediaLoopEnterSanitizeScaled 650ms cubic-bezier(.16,.96,.18,1) both; } .page--home .cas-rh-mediaLoop__item.is-exiting{ animation: casMediaLoopExitSanitizeScaled 520ms cubic-bezier(.58,.02,.92,.42) both; } .page--home .cas-rh-mediaLoop[data-media-kind="ssd"] .cas-rh-mediaLoop__item{ width: min(30.260380vw, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="usb"] .cas-rh-mediaLoop__item{ width: min(25.334272vw, 54%); } .page--home .cas-rh-mediaLoop[data-media-kind="hdd"] .cas-rh-mediaLoop__item{ width: min(30.260380vw, 62%); } .page--home .cas-rh-mediaLoop[data-media-kind="cassette"] .cas-rh-mediaLoop__item{ width: min(30.964110vw, 64%); } .page--home .cas-rh-mediaLoop[data-media-kind="dvd"] .cas-rh-mediaLoop__item{ width: min(21.111893vw, 48%); } .page--home .cas-rh-mediaLoop[data-media-kind="microsd"] .cas-rh-mediaLoop__item{ width: min(24.630542vw, 54%); } } /* --------------------------------------------------------- Full proportional scaling: 1101px–1420px --------------------------------------------------------- */ @media (min-width: 1101px) and (max-width: 1420px){ .page--home .cas-rh-productHero__content--sanitize{ align-self: center; width: auto; max-width: 47.853624vw; min-width: 0; margin: 0; padding: 8vw 6vw; text-align: left; } .page--home .cas-rh-productHero__content--sanitize h2{ width: 43.631246vw; max-width: 43.631246vw; margin: 0; font-size: 4.363125vw; text-align: left; } .page--home .cas-rh-productHero__content--sanitize p{ width: auto; max-width: 35.538353vw; margin: 1.548205vw 0 0; font-size: 1.055595vw; text-align: left; } .page--home .cas-rh-sanitizeResourceLink{ text-underline-offset: .211119vw; } .page--home .cas-rh-actions--sanitize{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: max-content; max-width: 100%; gap: .844476vw; margin-top: 1.829697vw; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeLearn, .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeOutline{ flex: 0 0 auto; width: auto; max-width: none; height: 2.814919vw; min-height: 2.814919vw; margin-top: 0; padding: 0 1.876612vw; font-size: .938306vw; white-space: nowrap; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeLearn{ min-width: 8.846889vw; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeOutline{ min-width: 10.589457vw; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeLearn:hover, .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeOutline:hover{ transform: translateY(-.070373vw); } } /* --------------------------------------------------------- Frozen left copy; continuing carousel scale: 861px–1100px --------------------------------------------------------- */ @media (min-width: 861px) and (max-width: 1100px){ .page--home .cas-rh-productHero--sanitize{ grid-template-columns: 526.868px minmax(0, 1fr); } .page--home .cas-rh-productHero__content--sanitize{ align-self: center; width: 526.868px; max-width: 526.868px; min-width: 0; margin: 0; padding: 88.08px 66.06px; text-align: left; } .page--home .cas-rh-productHero__content--sanitize h2{ width: 480.38px; max-width: 480.38px; margin: 0; font-size: 48.038px; text-align: left; } .page--home .cas-rh-productHero__content--sanitize p{ width: 391.277px; max-width: 391.277px; margin: 17.046px 0 0; font-size: 11.622px; text-align: left; } .page--home .cas-rh-sanitizeResourceLink{ text-underline-offset: 2.324px; } .page--home .cas-rh-actions--sanitize{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: max-content; max-width: 100%; gap: 9.297px; margin-top: 20.145px; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeLearn, .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeOutline{ flex: 0 0 auto; width: auto; max-width: none; height: 30.992px; min-height: 30.992px; margin-top: 0; padding: 0 20.662px; font-size: 10.330px; white-space: nowrap; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeLearn{ min-width: 97.404px; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeOutline{ min-width: 116.590px; } .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeLearn:hover, .page--home .cas-rh-actions--sanitize .cas-rh-btn--sanitizeOutline:hover{ transform: translateY(-.775px); } .page--home .cas-rh-mediaLoop{ transform: translateX( calc((1101px - 100vw) * .375) ); } } /* --------------------------------------------------------- Proportionally scaled sanitize-carousel animation --------------------------------------------------------- */ @keyframes casMediaLoopEnterSanitizeScaled{ 0%{ opacity: 0; transform: translate3d(calc(-1 * var(--cas-media-slide)), 0, 0) scale(.985); filter: brightness(.34) contrast(1.04) drop-shadow( 0 var(--sanitize-media-shadow-y-dim) var(--sanitize-media-shadow-blur-dim) rgba(0,0,0,.80) ); } 54%{ opacity: 1; filter: brightness(1.08) contrast(1.16) drop-shadow( 0 var(--sanitize-media-shadow-y) var(--sanitize-media-shadow-blur) rgba(0,0,0,.74) ); } 100%{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.06) contrast(1.14) drop-shadow( 0 var(--sanitize-media-shadow-y) var(--sanitize-media-shadow-blur) rgba(0,0,0,.74) ); } } @keyframes casMediaLoopExitSanitizeScaled{ 0%{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1.06) contrast(1.14) drop-shadow( 0 var(--sanitize-media-shadow-y) var(--sanitize-media-shadow-blur) rgba(0,0,0,.74) ); } 100%{ opacity: 0; transform: translate3d(var(--cas-media-slide), 0, 0) scale(.985); filter: brightness(.28) contrast(1.02) drop-shadow( 0 var(--sanitize-media-shadow-y-dim) var(--sanitize-media-shadow-blur-dim) rgba(0,0,0,.82) ); } } /* ========================================================= SANITIZATION PANEL — STACKED TABLET / MOBILE LAYOUT At 860px and below, the media loop moves above the centered copy and both buttons remain together in one centered row. ========================================================= */ @media (max-width: 860px){ .page--home .cas-rh-productHero--sanitize{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; box-sizing: border-box; height: 847px; min-height: 847px; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__visual{ order: 1; } .page--home .cas-rh-productHero--sanitize .cas-rh-productHero__content{ order: 2; } .page--home .cas-rh-productHero__visual--mediaLoop{ width: 100%; height: clamp(340px, 50vw, 430px); min-height: 0; overflow: hidden; } .page--home .cas-rh-mediaLoop{ position: relative; inset: auto; width: 100%; height: 100%; --cas-media-slide: min(46vw, 280px); } .page--home .cas-rh-mediaLoop__slot{ -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 18%, #000 82%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 18%, #000 82%, transparent 100% ); } .page--home .cas-rh-mediaLoop__item{ max-height: clamp(210px, 31.395349vw, 270px); } .page--home .cas-rh-productHero__content--sanitize{ align-self: auto; width: 100%; max-width: 740px; margin: 0 auto; padding: clamp(18px, 2.558140vw, 22px) clamp(24px, 4.186047vw, 36px) clamp(64px, 9.069767vw, 78px); text-align: center; } .page--home .cas-rh-productHero__content--sanitize h2{ width: 100%; max-width: 760px; margin: 0 auto; font-size: clamp(46px, 7.209302vw, 62px); font-weight: 400; letter-spacing: -.025em; line-height: 1.02; text-align: center; } .page--home .cas-rh-productHero__content--sanitize p{ width: 100%; max-width: 710px; margin: clamp(20px, 2.558140vw, 22px) auto 0; font-size: clamp(16px, 2.441860vw, 21px); line-height: 1.45; text-align: center; } .page--home .cas-rh-actions--sanitize{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; max-width: 100%; gap: clamp(12px, 1.627907vw, 14px); margin-top: clamp(20px, 3.023256vw, 26px); } .page--home .cas-rh-actions--sanitize .cas-rh-btn{ flex: 0 0 auto; width: auto; max-width: none; min-height: clamp(42px, 5.581395vw, 48px); margin-top: 0; padding: 0 clamp(28px, 3.720930vw, 32px); font-size: clamp(15px, 2.034884vw, 17.5px); white-space: nowrap; } .page--home .cas-rh-btn--sanitizeLearn{ min-width: clamp(136px, 19.069767vw, 164px); } .page--home .cas-rh-btn--sanitizeOutline{ min-width: clamp(168px, 23.488372vw, 202px); } } /* ========================================================= SANITIZATION PANEL — PROPORTIONAL PHONE SCALE The exact rendered layout at 521px is the reference. Every visible dimension scales by viewport width below 521px. ========================================================= */ @media (max-width: 520px){ .page--home .cas-rh-productHero--sanitize{ height: 162.571977vw; min-height: 162.571977vw; } .page--home .cas-rh-productHero__visual--mediaLoop{ height: 65.259117vw; } .page--home .cas-rh-mediaLoop{ --cas-media-slide: 42.226487vw; } .page--home .cas-rh-mediaLoop__item{ max-height: 40.307102vw; } .page--home .cas-rh-productHero__content--sanitize{ width: 100%; max-width: 100%; padding: 3.454894vw 4.606526vw 13.435701vw; } .page--home .cas-rh-productHero__content--sanitize h2{ width: 100%; max-width: 100%; font-size: 8.829175vw; } .page--home .cas-rh-productHero__content--sanitize p{ width: 100%; max-width: 100%; margin-top: 3.838772vw; font-size: 3.071017vw; } .page--home .cas-rh-actions--sanitize{ gap: 2.687140vw; margin-top: 4.990403vw; } .page--home .cas-rh-actions--sanitize .cas-rh-btn{ width: auto; min-height: 8.061420vw; margin-top: 0; padding: 0 5.374280vw; font-size: 2.879079vw; } .page--home .cas-rh-btn--sanitizeLearn{ min-width: 26.103647vw; } .page--home .cas-rh-btn--sanitizeOutline{ min-width: 32.245681vw; } .page--home .cas-rh-btn--sanitizeLearn:hover, .page--home .cas-rh-btn--sanitizeOutline:hover{ transform: translateY(-.191939vw); } } @media (max-width: 460px){ .page--home .cas-rh-productHero--sanitize{ height: calc(300.191938px + 97.312860vw); min-height: calc(300.191938px + 97.312860vw); } .page--home .cas-rh-productHero__visual--mediaLoop{ height: 300.191938px; } .page--home .cas-rh-mediaLoop{ --cas-media-slide: 194.241840px; } .page--home .cas-rh-mediaLoop__item{ max-height: 185.412669px; } } /* ========================================================= AWAY CARDS — H2 TITLES + H3 BULLET BENEFITS ========================================================= */ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ width: calc(100% - clamp(32px, 5vw, 48px)); max-width: 470px; margin: 0 auto; color: #fff; text-align: center; font-family: var(--cas-font-display); font-size: clamp(20px, 2.0vw, 28px); font-weight: 700; letter-spacing: -.035em; line-height: 1; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ width: calc(100% - clamp(32px, 5vw, 48px)); max-width: 470px; margin: 11px auto 0; color: #fff; font-size: clamp(12px, .9vw, 14px); font-weight: 300; line-height: 1.3; } .page--home .cas-rh-awayCard__points{ display: grid; width: min(100%, 470px); margin: 9px auto 0; padding: 0; gap: 4px; list-style: none; text-align: left; } .page--home .cas-rh-awayCard__points li{ display: grid; grid-template-columns: 6px minmax(0, 1fr); align-items: start; gap: 8px; min-width: 0; } .page--home .cas-rh-awayCard__points li::before{ content: ""; width: 6px; height: 6px; margin-top: .48em; border-radius: 50%; background: #C6FF00; } .page--home .cas-rh-awayCard__points h3{ min-width: 0; margin: 0; color: #fff; text-align: left; font-family: var(--cas-font-display); font-size: clamp(12px, .9vw, 14px); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; overflow-wrap: anywhere; } .page--home .cas-rh-awayCard__btn{ margin-top: 11px; } .page--home .cas-rh-awayCard{ --cas-away-art-max: min(80%, 425px); } .page--home .cas-rh-awayCard__media img{ width: auto; max-width: var(--cas-away-art-max, 100%); max-height: 100%; object-fit: contain; } @media (min-width: 1101px) and (max-width: 1578px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ font-size: 2.408112vw; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ max-width: 29.784537vw; margin-top: clamp(8px, .697085vw, 11px); font-size: clamp(10.5px, .887199vw, 14px); } .page--home .cas-rh-awayCard__points{ width: min(100%, 29.784537vw); margin-top: clamp(6px, .570342vw, 9px); gap: clamp(2px, .253485vw, 4px); } .page--home .cas-rh-awayCard__points li{ grid-template-columns: clamp(4px, .380228vw, 6px) minmax(0, 1fr); gap: clamp(6px, .506971vw, 8px); } .page--home .cas-rh-awayCard__points li::before{ width: clamp(4px, .380228vw, 6px); height: clamp(4px, .380228vw, 6px); } .page--home .cas-rh-awayCard__points h3{ font-size: clamp(10.5px, .887199vw, 14px); } .page--home .cas-rh-awayCard__btn{ margin-top: clamp(7px, .697085vw, 11px); } .page--home .cas-rh-awayCard{ --cas-away-art-max: min(80%, 26.932826vw); } } @media (min-width: 861px) and (max-width: 1100px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ font-size: 26.513px; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ max-width: 327.928px; margin-top: 8px; font-size: 10.5px; } .page--home .cas-rh-awayCard__points{ width: min(100%, 327.928px); margin-top: 6px; gap: 2px; } .page--home .cas-rh-awayCard__points li{ grid-template-columns: 5px minmax(0, 1fr); gap: 7px; } .page--home .cas-rh-awayCard__points li::before{ width: 5px; height: 5px; } .page--home .cas-rh-awayCard__points h3{ font-size: 10.5px; line-height: 1.12; } .page--home .cas-rh-awayCard__btn{ margin-top: 7px; } .page--home .cas-rh-awayCard{ --cas-away-art-max: min(80%, 296.530px); } } @media (max-width: 660px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__eyebrow{ margin-bottom: 6px; } .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ max-width: 100%; font-size: 6.2vw; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ max-width: 100%; margin-top: 16px; font-size: 14.5px; line-height: 1.25; } .page--home .cas-rh-awayCard__points{ width: 100%; margin-top: 4px; gap: 5px; } .page--home .cas-rh-awayCard__points li{ grid-template-columns: 6px minmax(0, 1fr); gap: 9px; } .page--home .cas-rh-awayCard__points li::before{ width: 6px; height: 6px; } .page--home .cas-rh-awayCard__points h3{ font-size: 14px; line-height: 1.14; } .page--home .cas-rh-awayCard__btn{ margin-top: 16px; } .page--home .cas-rh-awayCard{ --cas-away-art-max: 59.959350%; } } @media (min-width: 661px) and (max-width: 860px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ font-size: 30.854px; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ max-width: 403.471px; margin-top: 12px; font-size: 14.5px; } .page--home .cas-rh-awayCard__points{ width: min(100%, 403.471px); margin-top: 4px; gap: 5px; } .page--home .cas-rh-awayCard__points li{ grid-template-columns: 6px minmax(0, 1fr); gap: 9px; } .page--home .cas-rh-awayCard__points h3{ font-size: 14px; } .page--home .cas-rh-awayCard__btn{ margin-top: 16px; } .page--home .cas-rh-awayCard{ --cas-away-art-max: 59.959350%; } } @media (max-width: 520px){ .page--home .cas-rh-awayCard{ --cas-away-art-max: 59.959350%; } } @media (max-width: 390px){ .page--home .cas-rh-awayCard__content{ padding: clamp(20px, 6vw, 24px) clamp(12px, 4vw, 16px) clamp(14px, 4vw, 20px); } .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ font-size: clamp(20px, 5.7vw, 22px); } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ margin-top: clamp(5px, 1.8vw, 7px); font-size: clamp(10px, 3vw, 12px); line-height: 1.2; } .page--home .cas-rh-awayCard__points li{ grid-template-columns: 5px minmax(0, 1fr); gap: 7px; } .page--home .cas-rh-awayCard__points li::before{ width: 5px; height: 5px; } .page--home .cas-rh-awayCard__points h3{ font-size: clamp(10px, 3vw, 12px); line-height: 1.1; } .page--home .cas-rh-awayCard__btn{ min-height: clamp(28px, 8vw, 34px); font-size: clamp(10px, 3vw, 12px); } } /* Final away-card alignment and spacing correction. Keep this at the absolute bottom of home.css. */ .page--home .cas-rh-awayCard .cas-rh-awayCard__points{ display: grid; width: fit-content; max-width: 100%; margin: clamp(18px, 1.4vw, 24px) auto 0; padding: 0; gap: clamp(4px, .45vw, 7px); list-style: none; text-align: left; } .page--home .cas-rh-awayCard .cas-rh-awayCard__points li{ width: fit-content; max-width: 100%; justify-self: start; } .page--home .cas-rh-awayCard .cas-rh-awayCard__btn{ margin-top: clamp(18px, 1.4vw, 24px); } @media (max-width: 660px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__points{ width: fit-content; max-width: 100%; margin-top: clamp(14px, 3.6vw, 20px); gap: clamp(3px, 1vw, 6px); } .page--home .cas-rh-awayCard .cas-rh-awayCard__btn{ margin-top: clamp(15px, 3.8vw, 21px); } } @media (max-width: 390px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__points{ margin-top: 13px; gap: 3px; } .page--home .cas-rh-awayCard .cas-rh-awayCard__btn{ margin-top: 14px; } } /* ========================================================= AWAY CARDS — THREE-CARD DESKTOP ROW ========================================================= */ @media (min-width: 861px){ .page--home .cas-rh-away__inner{ width: min(1440px, calc(100% - 56px)); } .page--home .cas-rh-away__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } /* * Default desktop alignment from 1041px through 1578px: * reserve three title lines and four paragraph lines. */ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ min-height: 3em; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ min-height: 5.2em; } } /* * Narrow desktop alignment from 861px through 1040px: * reserve four title lines and five paragraph lines. */ @media (min-width: 861px) and (max-width: 1040px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ min-height: 4em; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ min-height: 6.5em; } } /* * Full desktop alignment from 1579px upward: * preserve the existing two-title-line and * four-paragraph-line composition. */ @media (min-width: 1579px){ .page--home .cas-rh-awayCard .cas-rh-awayCard__title{ min-height: 2em; } .page--home .cas-rh-awayCard .cas-rh-awayCard__intro{ min-height: 5.2em; } } /* ========================================================= COMPLETE ITAD SOLUTIONS Mirrors the six service cards used on faqs.html. ========================================================= */ .page--home .cas-home-itad-solutions, .page--home .cas-home-itad-solutions *, .page--home .cas-home-itad-solutions *::before, .page--home .cas-home-itad-solutions *::after{ box-sizing: border-box; } .page--home .cas-home-itad-solutions{ width: 100%; padding: 100px 0; background: #121313; color: #ffffff; font-family: var(--cas-font-text); } .page--home .cas-home-itad-solutions__container{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 60px; } .page--home .cas-home-itad-solutions__heading{ text-align: center; } .page--home .cas-home-itad-solutions__heading h2{ margin: 0 0 48px; color: #ffffff; font-family: var(--cas-font-display); font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1.1; } .page--home .cas-home-itad-solutions__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .page--home .cas-home-itad-card{ display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 52px 40px; border: 2px solid rgba(255,255,255,.14); border-radius: 20px; background: #0f110d; color: inherit; text-align: center; text-decoration: none; transition: border-color .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1); } .page--home .cas-home-itad-card:hover{ border-color: #59E00B; box-shadow: 0 20px 48px rgba(0,0,0,.52); transform: translateY(-8px); } .page--home .cas-home-itad-card:focus-visible{ outline: 2px solid #59E00B; outline-offset: 3px; } .page--home .cas-home-itad-card__icon{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 68px; height: 68px; margin: 0 0 28px; border-radius: 18px; background: linear-gradient( 135deg, #59E00B 0%, #45B909 100% ); color: #0f110d; font-size: 30px; transition: transform .35s cubic-bezier(.4,0,.2,1); } .page--home .cas-home-itad-card:hover .cas-home-itad-card__icon{ transform: scale(1.1) rotate(-5deg); } .page--home .cas-home-itad-svg-icon{ display: inline-block; flex: 0 0 1em; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; } .page--home .cas-home-itad-card h3{ margin: 0 0 12px; color: #ffffff; font-family: var(--cas-font-display); font-size: 20px; font-weight: 700; letter-spacing: normal; line-height: normal; } .page--home .cas-home-itad-card p{ margin: 0; color: #b9b9b9; font-family: var(--cas-font-text); font-size: 15px; font-weight: 400; line-height: 1.7; } .page--home .cas-home-itad-card__action{ display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: #59E00B; font-family: var(--cas-font-text); font-size: 14px; font-weight: 600; line-height: normal; transition: gap .3s ease; } .page--home .cas-home-itad-card:hover .cas-home-itad-card__action{ gap: 14px; } /* Match the FAQ card breakpoint exactly: three columns above 1200px, one column at 1200px and below. */ @media (max-width: 1200px){ .page--home .cas-home-itad-solutions__grid{ grid-template-columns: 1fr; } } @media (max-width: 1024px){ .page--home .cas-home-itad-solutions__container{ padding-right: 32px; padding-left: 32px; } .page--home .cas-home-itad-solutions__heading h2{ font-size: 40px; } } @media (max-width: 968px){ .page--home .cas-home-itad-solutions__container{ padding-right: 30px; padding-left: 30px; } } @media (max-width: 520px){ .page--home .cas-home-itad-solutions{ padding: 72px 0; } .page--home .cas-home-itad-solutions__heading h2{ margin-bottom: 36px; } } /* ========================================================= SPECIALIZED COMPLIANCE SOLUTIONS Black home-page version of the supplied reference layout. ========================================================= */ .page--home .cas-home-compliance, .page--home .cas-home-compliance *, .page--home .cas-home-compliance *::before, .page--home .cas-home-compliance *::after{ box-sizing: border-box; } .page--home .cas-home-compliance{ width: 100%; padding: 112px 0 120px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: #121313; color: #ffffff; font-family: var(--cas-font-text); } .page--home .cas-home-compliance__inner{ width: min(1320px, calc(100% - 120px)); margin: 0 auto; } .page--home .cas-home-compliance__header{ max-width: 790px; margin: 0 auto; text-align: center; } .page--home .cas-home-compliance__header h2{ margin: 0; color: #ffffff; font-family: var(--cas-font-display); font-size: clamp(42px, 4vw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; } .page--home .cas-home-compliance__header p{ max-width: 760px; margin: 26px auto 0; color: rgba(255,255,255,.68); font-family: var(--cas-font-text); font-size: 17px; font-weight: 450; line-height: 1.65; } .page--home .cas-home-compliance__grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 66px; } .page--home .cas-home-complianceCard{ display: flex; min-width: 0; min-height: 164px; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); text-align: center; transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .page--home .cas-home-complianceCard:hover{ border-color: rgba(198,255,0,.78); background: linear-gradient( 145deg, rgba(198,255,0,.09), rgba(255,255,255,.03) ); box-shadow: 0 20px 48px rgba(0,0,0,.36); transform: translateY(-5px); } .page--home .cas-home-complianceCard__icon{ display: flex; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; margin-bottom: 18px; border: 1px solid rgba(198,255,0,.34); border-radius: 14px; background: rgba(198,255,0,.09); color: #C6FF00; } .page--home .cas-home-complianceCard__icon svg{ display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .page--home .cas-home-complianceCard h3{ margin: 0; color: #ffffff; font-family: var(--cas-font-display); font-size: 17px; font-weight: 750; letter-spacing: -.015em; line-height: 1.2; } @media (max-width: 1100px){ .page--home .cas-home-compliance__inner{ width: min(900px, calc(100% - 64px)); } .page--home .cas-home-compliance__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px){ .page--home .cas-home-compliance{ padding: 88px 0 94px; } .page--home .cas-home-compliance__inner{ width: calc(100% - 56px); } .page--home .cas-home-compliance__header h2{ font-size: clamp(36px, 8vw, 48px); } .page--home .cas-home-compliance__header p{ margin-top: 22px; font-size: 15px; line-height: 1.6; } .page--home .cas-home-compliance__grid{ margin-top: 48px; gap: 16px; } .page--home .cas-home-complianceCard{ min-height: 148px; } } @media (max-width: 520px){ .page--home .cas-home-compliance{ padding: 72px 0 78px; } .page--home .cas-home-compliance__inner{ width: calc(100% - 40px); } .page--home .cas-home-compliance__header h2{ font-size: clamp(31px, 9vw, 40px); } .page--home .cas-home-compliance__header p{ font-size: 14px; } .page--home .cas-home-compliance__grid{ grid-template-columns: 1fr; margin-top: 38px; } .page--home .cas-home-complianceCard{ min-height: 126px; padding: 22px 20px; } .page--home .cas-home-complianceCard__icon{ width: 40px; height: 40px; flex-basis: 40px; margin-bottom: 14px; } .page--home .cas-home-complianceCard__icon svg{ width: 21px; height: 21px; } .page--home .cas-home-complianceCard h3{ font-size: 16px; } } /* Specialized Compliance Solutions eyebrow */ .page--home .cas-home-compliance__eyebrow{ margin: 0 0 20px; color: #C6FF00; font-family: var(--cas-font-text); font-size: 12px; font-weight: 800; letter-spacing: .24em; line-height: 1; text-align: center; text-transform: uppercase; } @media (max-width: 760px){ .page--home .cas-home-compliance__eyebrow{ margin-bottom: 16px; font-size: 11px; letter-spacing: .2em; } } /* ========================================================= EQUIPMENT WE PROCESS Home-page version of the contact equipment section. ========================================================= */ .page--home .cas-home-equipment, .page--home .cas-home-equipment *, .page--home .cas-home-equipment *::before, .page--home .cas-home-equipment *::after{ box-sizing: border-box; } .page--home .cas-home-equipment{ width: 100%; padding: 104px 0 112px; border-bottom: 1px solid rgba(255,255,255,.08); background: #050505; color: #ffffff; font-family: var(--cas-font-text); } .page--home .cas-home-equipment__inner{ width: min(1320px, calc(100% - 120px)); margin: 0 auto; } .page--home .cas-home-equipment__header{ max-width: 790px; margin: 0 auto; text-align: center; } .page--home .cas-home-equipment__eyebrow{ margin: 0 0 20px; color: #C6FF00; font-family: var(--cas-font-text); font-size: 12px; font-weight: 800; letter-spacing: .24em; line-height: 1; text-align: center; text-transform: uppercase; } .page--home .cas-home-equipment__header h2{ margin: 0; color: #ffffff; font-family: var(--cas-font-display); font-size: clamp(42px, 4vw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; } .page--home .cas-home-equipment__header > p:last-child{ max-width: 680px; margin: 24px auto 0; color: rgba(255,255,255,.68); font-family: var(--cas-font-text); font-size: 17px; font-weight: 450; line-height: 1.65; } .page--home .cas-home-equipment__grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 60px auto 0; } .page--home .cas-home-equipmentCard{ display: flex; min-width: 0; min-height: 142px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); color: inherit; text-align: center; text-decoration: none; transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .page--home .cas-home-equipmentCard:hover{ border-color: rgba(198,255,0,.78); background: linear-gradient( 145deg, rgba(198,255,0,.09), rgba(255,255,255,.03) ); box-shadow: 0 20px 48px rgba(0,0,0,.36); transform: translateY(-5px); } .page--home .cas-home-equipmentCard:focus-visible{ border-color: #C6FF00; outline: 2px solid #C6FF00; outline-offset: 4px; } .page--home .cas-home-equipmentCard i{ color: #C6FF00; font-size: 32px; line-height: 1; transition: transform 220ms ease; } .page--home .cas-home-equipmentCard:hover i{ transform: scale(1.08); } .page--home .cas-home-equipmentCard span{ color: #ffffff; font-family: var(--cas-font-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; } @media (max-width: 1100px){ .page--home .cas-home-equipment__inner{ width: min(900px, calc(100% - 64px)); } .page--home .cas-home-equipment__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px){ .page--home .cas-home-equipment{ padding: 88px 0 94px; } .page--home .cas-home-equipment__inner{ width: calc(100% - 56px); } .page--home .cas-home-equipment__eyebrow{ margin-bottom: 16px; font-size: 11px; letter-spacing: .2em; } .page--home .cas-home-equipment__header h2{ font-size: clamp(36px, 8vw, 48px); } .page--home .cas-home-equipment__header > p:last-child{ margin-top: 22px; font-size: 15px; line-height: 1.6; } .page--home .cas-home-equipment__grid{ gap: 16px; margin-top: 48px; } .page--home .cas-home-equipmentCard{ min-height: 132px; } } @media (max-width: 520px){ .page--home .cas-home-equipment{ padding: 72px 0 78px; } .page--home .cas-home-equipment__inner{ width: calc(100% - 40px); } .page--home .cas-home-equipment__header h2{ font-size: clamp(31px, 9vw, 40px); } .page--home .cas-home-equipment__header > p:last-child{ font-size: 14px; } .page--home .cas-home-equipment__grid{ grid-template-columns: 1fr; margin-top: 38px; } .page--home .cas-home-equipmentCard{ min-height: 112px; padding: 24px 20px; } .page--home .cas-home-equipmentCard i{ font-size: 28px; } .page--home .cas-home-equipmentCard span{ font-size: 15px; } } /* ========================================================= ITAD TERMINOLOGY Home-page version of the FAQ glossary section. ========================================================= */ .page--home .cas-home-glossary, .page--home .cas-home-glossary *, .page--home .cas-home-glossary *::before, .page--home .cas-home-glossary *::after{ box-sizing: border-box; } .page--home .cas-home-glossary{ position: relative; width: 100%; overflow: hidden; padding: 100px 0; background: linear-gradient( 135deg, #07131e 0%, #06100b 50%, #020503 100% ); color: #ffffff; font-family: var(--cas-font-text); } .page--home .cas-home-glossary::before{ position: absolute; inset: 0; z-index: 0; background: radial-gradient( ellipse at 70% 30%, rgba(13,116,245,.16) 0%, transparent 60% ); content: ""; pointer-events: none; } .page--home .cas-home-glossary__inner{ position: relative; z-index: 1; width: min(1280px, calc(100% - 120px)); margin: 0 auto; } .page--home .cas-home-glossary__header{ margin: 0; text-align: center; } .page--home .cas-home-glossary__eyebrow{ margin: 0 0 20px; color: #86f24a; font-family: var(--cas-font-text); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; line-height: 1; text-transform: uppercase; } .page--home .cas-home-glossary__header h2{ margin: 0 0 20px; color: #ffffff; font-family: var(--cas-font-display); font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1.1; } .page--home .cas-home-glossary__header > p:last-child{ max-width: 650px; margin: 0 auto; color: rgba(255,255,255,.65); font-family: var(--cas-font-text); font-size: 18px; line-height: 1.7; } .page--home .cas-home-glossary__image{ display: block; width: 100%; max-width: 1100px; height: 280px; margin: 0 auto 48px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; object-fit: cover; object-position: center; } .page--home .cas-home-glossary__grid{ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .page--home .cas-home-glossaryCard{ min-width: 0; padding: 32px 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.06); transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .page--home .cas-home-glossaryCard:hover{ border-color: rgba(89,224,11,.35); background: rgba(255,255,255,.10); box-shadow: 0 8px 24px rgba(0,0,0,.2); transform: translateY(-4px); } .page--home .cas-home-glossaryCard h3{ margin: 0 0 12px; color: #86f24a; font-family: var(--cas-font-display); font-size: 17px; font-weight: 700; line-height: 1.3; } .page--home .cas-home-glossaryCard p{ margin: 0; color: rgba(255,255,255,.72); font-family: var(--cas-font-text); font-size: 14px; line-height: 1.75; } @media (max-width: 1200px){ .page--home .cas-home-glossary__inner{ width: min(900px, calc(100% - 64px)); } .page--home .cas-home-glossary__grid{ grid-template-columns: 1fr; } } @media (max-width: 760px){ .page--home .cas-home-glossary{ padding: 88px 0; } .page--home .cas-home-glossary__inner{ width: calc(100% - 56px); } .page--home .cas-home-glossary__eyebrow{ margin-bottom: 16px; font-size: 11px; letter-spacing: .2em; } .page--home .cas-home-glossary__header h2{ font-size: 40px; } .page--home .cas-home-glossary__header > p:last-child{ font-size: 16px; } .page--home .cas-home-glossary__image{ height: 230px; margin-bottom: 38px; border-radius: 14px; } .page--home .cas-home-glossaryCard{ padding: 28px 30px; } } @media (max-width: 520px){ .page--home .cas-home-glossary{ padding: 72px 0; } .page--home .cas-home-glossary__inner{ width: calc(100% - 40px); } .page--home .cas-home-glossary__header h2{ font-size: clamp(31px, 9vw, 38px); letter-spacing: -1.25px; } .page--home .cas-home-glossary__header > p:last-child{ font-size: 14px; } .page--home .cas-home-glossary__image{ height: 190px; margin-bottom: 30px; } .page--home .cas-home-glossary__grid{ gap: 14px; } .page--home .cas-home-glossaryCard{ padding: 24px; } .page--home .cas-home-glossaryCard h3{ font-size: 16px; } .page--home .cas-home-glossaryCard p{ font-size: 13px; line-height: 1.7; } }