/* ============================================================================ * mobile-fixes.css — MOBILE-ONLY responsive corrections * ---------------------------------------------------------------------------- * EVERY rule in this file lives inside `@media (max-width: 480px)`. * It therefore CANNOT affect tablet (>=768px) or desktop (>=1024px) — those * layouts are finished and must stay pixel-identical. * * Loaded LAST in on each edited page so it wins the cascade over the * page's own styles. Fixes are grouped by source page; shared fixes (footer, * the row-style cross-sell card, dark CTA headings) are written once. * ========================================================================== */ @media (max-width: 480px) { /* ==================================================================== * SHARED — applies anywhere the pattern appears * ================================================================== */ /* Cross-sell card laid out as a flex ROW collides its text + link on narrow widths (credentials "Looking for meal plans", commerce "Need the credential itself?"). Stack it into a clean single column. */ .xsell .xcard[style*="flex-direction:row"] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } /* Footer newsletter: keep the email input from forcing horizontal overflow and let the Subscribe button drop cleanly if space is tight. */ .footer-newsletter { flex-wrap: wrap; max-width: 100%; } .footer-newsletter input { min-width: 0; flex: 1 1 100%; } .footer-newsletter button { flex: 1 1 auto; } /* (Dark CTA strip headings are now fixed at all widths in page.css.) */ /* ==================================================================== * index.html — animated hero (Credentials / Commerce scenes) * ================================================================== */ /* Credentials scene: the 940px min-height left a big black gap above the bottom-anchored phone art. Drop the forced height and tighten the visual block so the device sits close under the copy. */ .hero { min-height: 0; } /* Hero already has its own 68px top padding to clear the fixed nav, so the copy block only needs a small gap below it — not another ~90px, which left a big void above the "Connected credentials." tagline. */ .hero .banner-copy { padding-top: 24px; padding-bottom: 4px; } .hero-scene .banner-visual { min-height: 420px; } /* Commerce scene: the BalanceU phone crop was `cover`/bleed-right, so it sat off-center and clipped. Show it fully and centered. */ .hero-scene[data-scene="commerce"] .hbm-img { object-fit: contain; object-position: bottom center; } /* ==================================================================== * credentials.html * ================================================================== */ /* Hero "One identity. Every form." — kill the fixed 700px H1 width that ran off the right edge. */ .cat-hero-copy h1 { width: auto !important; } /* Mobile Wallet pillar header — fixed 1176px / 1000px widths and a white-space:nowrap headline all overflowed. Let them wrap to the viewport. */ #mobile .pillar-head .pl { width: auto !important; } #mobile .pillar-head h2 { white-space: normal !important; } #mobile .pillar-head .pl p { width: auto !important; } /* Physical ID hero — shrink the overlaid title and lift it into the dark upper area of the photo so it no longer sits on top of the cards or clip on the right. */ .phys-hero-title { font-size: clamp(26px, 8vw, 40px); top: 19%; } /* RemotePhoto — the inline `height:605px` on the stage crammed the intro copy and the phones into one fixed box, causing the text to be overlapped. Let the stacked layout size to its content. */ .rp-stage { height: auto !important; } /* ==================================================================== * cardpulse.html * ================================================================== */ /* Nerd Mode — the desktop tile is a wide interactive console whose min-content width forced the ENTIRE section to bleed off the right edge (even the copy column got dragged wide). On mobile we drop the interactive console and show a compact, self-contained looping animation of the event chain instead. */ .cp-nerd { padding-block: 44px !important; } .cp-nerd-grid { grid-template-columns: 1fr !important; gap: 24px; } .cp-nerd-grid > * { min-width: 0; } /* let the track shrink to the viewport */ .cp-nerd-copy h2 { font-size: clamp(26px, 7.4vw, 32px); overflow-wrap: break-word; } .cp-nerd-copy > p { overflow-wrap: break-word; font-size: 15px; } .cp-nerd-list { font-size: 14px; } /* Hide the interactive console, its instructional callout, and the CTA that drives it — none work without the live (now-removed) window. */ .cp-nerd-mock, .cp-nerd-callout, #cp-nerd-trigger { display: none !important; } /* Compact looping event-chain animation (mobile only) */ .cp-nerd-mobile { display: block; background: #0b0b0d; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; } .cp-nm-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); } .cp-nm-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .cp-nm-bar .dot.r { background: #ff5f57; } .cp-nm-bar .dot.a { background: #febc2e; } .cp-nm-bar .dot.g { background: #28c840; } .cp-nm-evt { margin-left: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #6BCF6F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-nm-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .cp-nm-card { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #fff; } .cp-nm-pill { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffa657; background: rgba(255,166,87,0.14); border: 1px solid rgba(255,166,87,0.38); border-radius: 999px; padding: 2px 9px; } .cp-nm-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .cp-nm-chain li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; color: rgba(255,255,255,0.28); } .cp-nm-chain li .ic { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; } .cp-nm-chain li .ic .mdi { font-size: 15px; line-height: 1; color: currentColor; } .cp-nm-chain li b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; color: currentColor; } .cp-nm-chain li .nm { color: rgba(255,255,255,0.86); font-size: 12.5px; } .cp-nm-chain li.ok { animation: cpnmGreen 6s ease-in-out infinite; } .cp-nm-chain li.retry { animation: cpnmRetry 6s ease-in-out infinite; } .cp-nm-chain li.retry .ic .mdi { animation: cpnmSpin 1.1s linear infinite; } .cp-nm-chain li:nth-child(1) { animation-delay: 0.2s; } .cp-nm-chain li:nth-child(2) { animation-delay: 1.0s; } .cp-nm-chain li:nth-child(3) { animation-delay: 1.8s; } .cp-nm-chain li:nth-child(4) { animation-delay: 2.6s; } .cp-nm-chain li:nth-child(5) { animation-delay: 4.0s; } .cp-nm-done { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6BCF6F; background: rgba(107,207,111,0.06); border: 1px solid rgba(107,207,111,0.20); border-radius: 8px; padding: 10px 12px; opacity: 0; animation: cpnmDone 6s ease-in-out infinite; } .cp-nm-done .mdi { font-size: 16px; flex: none; } @keyframes cpnmGreen { 0%,7% { color: rgba(255,255,255,0.28); } 15%,84% { color: #6BCF6F; } 93%,100% { color: rgba(255,255,255,0.28); } } @keyframes cpnmRetry { 0%,7% { color: rgba(255,255,255,0.28); } 15%,48% { color: #ffa657; } 56%,84% { color: #6BCF6F; } 93%,100% { color: rgba(255,255,255,0.28); } } @keyframes cpnmSpin { to { transform: rotate(360deg); } } @keyframes cpnmDone { 0%,60% { opacity: 0; transform: translateY(4px); } 72%,90% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } } /* Person Search / Population Builder flip cards — the fixed 5:4 aspect-ratio + overflow:hidden clipped the "Flip the card" CTA. Let the card size to the front face's content (the back face stays absolutely positioned and fits within that height). */ .cp-flipgrid .cp-flipcard { aspect-ratio: auto; } .cp-flipgrid .cp-flipcard-front { position: relative; inset: auto; } /* ==================================================================== * google-wallet.html — "Tap your Android phone." tap animation * ================================================================== */ /* Center the phone frame explicitly and re-anchor the NFC graphic on the same vertical axis so the tap waves sit directly above the device. */ .gw-tap-frame { display: block; width: -webkit-fit-content; width: fit-content; margin-inline: auto; } .gw-tap-phone { width: min(74vw, 300px); } .gw-tap-nfc { left: 50%; transform: translate(-50%, -45%); } /* ==================================================================== * about.html — "FutureState" cursive hero * ================================================================== */ /* The live-drawn signature SVG had a 440px MIN width — wider than a phone, so it clipped on the right and read off-center. Fit it to the viewport. Also reduce the 92vh min-height that left a large empty gap. */ .about-hero { min-height: auto; padding-bottom: 56px; } /* The bottom "Scroll" cue is absolutely positioned; with the shorter mobile hero it collided with the signature/headline. It adds nothing on a touch device, so drop it on mobile. */ .about-scroll-cue { display: none; } .about-signature-svg { width: clamp(240px, 80vw, 440px); } .about-signature.about-signature-fallback { font-size: clamp(60px, 16vw, 110px); } .about-hero-title { font-size: clamp(26px, 7vw, 34px) !important; margin-top: 40px; } .about-hero-trio { letter-spacing: 0.16em; } /* ==================================================================== * balanceu.html * ================================================================== */ /* "More choice, day one." Trove section — the empty visual column added a tall block of dead space, and the portal background was pushed off to the left. Drop the empty column and center the portal art. */ .trove-section .trove-visual { display: none; } .trove-section { background-position: center top; background-size: cover; } } /* Reduced-motion: show the mobile Nerd Mode chain in its settled state. */ @media (max-width: 480px) and (prefers-reduced-motion: reduce) { .cp-nm-chain li, .cp-nm-chain li.retry .ic .mdi, .cp-nm-done { animation: none !important; } .cp-nm-chain li { color: #6BCF6F; } .cp-nm-done { opacity: 1; } }