/** * Secured-card section — lander globe clouds (image-32 / image-33) behind * the blue disc + card iconography (top-left). Mosey via interactive-motion * (.card-globe-cloud*). Visible in light AND dark (unlike lander clouds). * * Full-page ground wash is scroll-driven via --scc-page-bg (secured-card-bg.js). */ /* * Page ground follows the secured-card section (entire viewport). * JS paints --scc-page-bg on ; apply to html/body and to opaque * section plates (.white-background) that would otherwise cover the wash. */ html.scc-page-wash-active, html.scc-page-wash-active body { background-color: var(--scc-page-bg); } html[data-theme="dark"].scc-page-wash-active body { background-color: var(--scc-page-bg); } html.scc-page-wash-active .white-background, html[data-theme="dark"].scc-page-wash-active .white-background { background-color: var(--scc-page-bg) !important; } /* * Section plate is no longer the effect (full-page wash replaces it). * Keep the node for layout/theme toggles but never paint a hard band. */ .secured-card-content-section.gray-bg .mid-section-bg { opacity: 0; pointer-events: none; } .card-globe-cloud, .card-globe-cloud-2 { display: block; pointer-events: none; position: absolute; background-color: transparent; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; z-index: 0; } /* Primary puff — top-left of the blue circle */ .card-globe-cloud { background-image: url("../images/image-32.avif"); width: 56%; height: 34%; top: -4%; left: -6%; } /* Secondary puff — slightly lower / further left, like lander cloud-2 */ .card-globe-cloud-2 { background-image: url("../images/image-33.avif"); width: 70%; height: 44%; top: 2%; left: -22%; } /* Keep circle + art above the floating clouds */ .secured-card-content-section .behind-lander-globe-container-for-card { position: relative; z-index: 1; } .secured-card-content-section .card-go-anywhere, .secured-card-content-section .card-iconography, .secured-card-content-section .top-lander-card { z-index: 2; } /* * Card stage sizing: desktop is 570×500. Layout shrinks * `.landing-section-inner-content-animation-box` at ≤991 (375×329) and * again at ≤767 (width:100% + fixed logo) — reads as weird downscaling. * Keep desktop proportions on tablet + wide-mobile; leave ≤479 (vertical * mobile stack) to network-layout — that layout is correct. */ @media screen and (max-width: 991px) and (min-width: 480px) { .secured-card-content-section .landing-section-inner-content-animation-box { width: 570px; height: 500px; flex-shrink: 0; } .secured-card-content-section .top-lander-card { /* Undo vw-based background-size hacks from tablet/wide-mobile rules */ background-size: auto; background-position: 50% 50%; } .secured-card-content-section .logo-on-card { width: 80%; height: 30%; } .secured-card-content-section .behind-lander-globe-container-for-card { margin-left: 7%; margin-right: 0; margin-top: 0; margin-bottom: 0; } .secured-card-content-section .card-logo-container { grid-column-gap: 14px; grid-row-gap: 16px; } } /* * Wide-mobile / narrow tablet (≤900, >479): a 570px stage beside copy * cannot fit — stack so the card keeps desktop size instead of flex-crushing. * (Uses 900, not 767, so 768-wide viewports are included.) */ @media screen and (max-width: 900px) and (min-width: 480px) { .secured-card-content-section .midsection-content-wrapper-flex.right-left { flex-flow: column; align-items: center; width: 90%; max-width: none; } .secured-card-content-section .landing-section-inner-content-bullets { width: 100%; max-width: 570px; } }