/* ========================================================= Index (Home) — Robinhood-style hero Scoped to: ========================================================= */ .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: ui-serif, Georgia, "Times New Roman", Times, serif; 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; 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 */ .page--home .rh-screenContent__obj{ width: 100%; max-width: 725px; /* matches SVG design width */ aspect-ratio: 725 / 1413; height: auto; margin: 0 auto; } /* 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; } } /* ========================================================= CAS QUAD CARDS (NEW + ISOLATED) — right-angle, hover lift ========================================================= */ .cas-quadGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap: clamp(18px, 2.2vw, 32px); align-items:stretch; } /* Collapse to 1 per row when it makes sense */ @media (max-width: 860px){ .cas-quadGrid{ grid-template-columns:1fr; } } .cas-quadCard{ /* per-card accent (set via modifier classes below) */ --accent: var(--blue); --card-bg: var(--panel); --card-border: var(--panel); /* border matches background (invisible) */ position:relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0; /* right angle corners */ padding: 28px 26px 26px; min-height: 190px; box-shadow: 0 10px 26px rgba(0,0,0,.35); transform: translateY(0); transition: transform .22s ease, box-shadow .22s ease; } /* the “under-line” effect (like your screenshot) */ .cas-quadCard::after{ content:""; position:absolute; left:0; right:0; bottom:0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } /* hover lift + underline reveal */ .cas-quadCard:hover{ transform: translateY(-10px); box-shadow: 0 18px 46px rgba(0,0,0,.55); } .cas-quadCard:hover::after{ transform: scaleX(1); } /* icon circle */ .cas-quadIcon{ width: 54px; height: 54px; border-radius: 999px; background: var(--accent); display:grid; place-items:center; margin: 0 0 14px 0; color: #0b0d10; /* if you use monochrome icons, this is the icon color */ } /* If your icons are SVGs, this makes them inherit color cleanly */ .cas-quadIcon svg{ width: 26px; height: 26px; display:block; fill: currentColor; } /* text styling */ .cas-quadTitle{ margin: 0 0 8px 0; font-size: 20px; line-height: 1.2; font-weight: 750; color: var(--text); } .cas-quadText{ margin: 0; color: var(--muted); max-width: 52ch; } /* Make sure focus also looks good */ .cas-quadCard:focus-within{ outline: 2px solid color-mix(in oklab, var(--accent) 65%, transparent); outline-offset: 3px; } /* ---- color modifiers (use yours; swap anytime) ---- */ .cas-quadCard.is-blue { --accent: var(--blue); } .cas-quadCard.is-green { --accent: var(--green); } /* Two extra accents (pick any of your existing vars later) */ .cas-quadCard.is-violet { --accent: #8b5cf6; } .cas-quadCard.is-amber { --accent: #f59e0b; } /* ===== CAS Quad Cards (isolated) ===== */ .cas-quadGrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; } @media (max-width: 900px){ .cas-quadGrid{ grid-template-columns:1fr; } } .cas-quadCard{ /* you can tune this one number to increase/decrease spacing above the badge row */ --cas-quad-badge-gap: 22px; position:relative; padding:26px; border-radius:0; /* hard corners */ background: var(--panel, #101419); border:1px solid var(--panel, #101419); /* border same as background */ box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: transform .22s ease, box-shadow .22s ease; } .cas-quadCard:hover{ transform: translateY(-8px); box-shadow: 0 22px 52px rgba(0,0,0,.36); } /* bottom accent line like your example */ .cas-quadCard::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: var(--quad-accent); } /* theme accents (2 are your vars, 2 are easy placeholders you can change later) */ .cas-quadCard.is-blue{ --quad-accent: var(--blue, #0D74F5); } .cas-quadCard.is-green{ --quad-accent: var(--green, #59E00B); } .cas-quadCard.is-violet{--quad-accent: #8b5cf6; } .cas-quadCard.is-amber{ --quad-accent: #f59e0b; } .cas-quadIcon{ width:52px; height:52px; border-radius:999px; display:grid; place-items:center; background: var(--quad-accent); margin-bottom:14px; } .cas-quadIcon svg{ width:22px; height:22px; fill:#fff; opacity:.98; } .cas-quadTitle{ margin: 0 0 10px 0; } .cas-quadText{ margin: 0; /* keep clean; spacing handled by actions row */ } /* THIS controls the spacing between the paragraph and the badge row */ .cas-quadActions{ margin-top: var(--cas-quad-badge-gap); display:flex; align-items:flex-end; justify-content:space-between; gap:14px; } .cas-quadBadge{ display:block; height:auto; max-height: 44px; /* optional guardrail */ } /* bottom-right CTA (down chevron -> right chevron + "Read more") */ .cas-quadCta{ display:inline-flex; align-items:center; gap:10px; color: var(--quad-accent); text-decoration:none; font-weight:650; letter-spacing:.2px; padding:6px 8px; border-radius:0; /* keep hard corners */ } .cas-quadCta:focus-visible{ outline:2px solid var(--quad-accent); outline-offset:3px; } .cas-quadCtaMark{ width:16px; height:16px; display:inline-grid; place-items:center; transition: transform .22s ease; } .cas-quadCtaMark svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* starts as DOWN chevron */ .cas-quadCtaMark{ transform: rotate(0deg); } /* text is hidden until hover */ .cas-quadCtaText{ overflow:hidden; max-width:0; opacity:0; transform: translateX(-6px); transition: max-width .22s ease, opacity .18s ease, transform .22s ease; white-space:nowrap; } /* when hovering the CARD, rotate chevron to RIGHT and reveal text */ .cas-quadCard:hover .cas-quadCtaMark{ transform: rotate(-90deg); } .cas-quadCard:hover .cas-quadCtaText{ max-width: 120px; opacity:1; transform: translateX(0); } /* Make the entire card clickable (overlay link) */ .cas-quadCard{ position: relative; /* required for overlay positioning */ } /* Full-card link overlay */ .cas-quadLink{ position: absolute; inset: 0; z-index: 3; border-radius: 0; /* hard corners */ text-decoration: none; color: inherit; } /* keyboard focus ring for the entire card */ .cas-quadLink:focus-visible{ outline: 2px solid var(--quad-accent); outline-offset: 4px; } /* Keep CTA visuals above background but BELOW the overlay is fine (overlay handles click) */ .cas-quadActions{ position: relative; z-index: 2; } /* CTA visual should not capture clicks; overlay does */ .cas-quadCta{ pointer-events: none; } /* Make sure text/content sits above background */ .cas-quadCard > *{ position: relative; z-index: 2; } /* ===== QUAD CARDS: make the entire card the link ===== */ .cas-quadCard{ display:block; /* becomes a block card */ position: relative; text-decoration: none; color: inherit; border-radius: 0; /* hard corners */ cursor: pointer; } /* keyboard focus */ .cas-quadCard:focus-visible{ outline: 2px solid var(--quad-accent); outline-offset: 4px; } /* spacing between text and badge (THIS is what you asked for) */ .cas-quadActions{ margin-top: 18px; /* increase this to add more space */ } /* Bottom row layout: badge left, CTA right */ .cas-quadActions{ display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; } /* CTA (bottom-right chevron + "Read more") */ .cas-quadCta{ display:flex; align-items:center; gap: 10px; color: var(--quad-accent); user-select:none; white-space:nowrap; } /* chevron icon */ .cas-quadCtaMark svg{ width: 18px; height: 18px; display:block; stroke: currentColor; stroke-width: 2.5; fill: none; transition: transform 220ms ease, opacity 220ms ease; transform: rotate(0deg); /* down */ opacity: 0.95; } /* "Read more" text is hidden until hover */ .cas-quadCtaText{ max-width: 0; overflow:hidden; opacity: 0; transform: translateX(-6px); transition: max-width 240ms ease, opacity 220ms ease, transform 220ms ease; } /* On hover: chevron becomes ">" (rotate to right) + reveal Read more */ .cas-quadCard:hover .cas-quadCtaMark svg{ transform: rotate(0deg); /* points right */ } .cas-quadCard:hover .cas-quadCtaText{ max-width: 120px; /* enough room for "Read more" */ opacity: 1; transform: translateX(0); } .page--home{ --site-header-h: 96px; --rh-copy-top: -7svh; --rh-hero-pad-top: clamp(0px, 0vh, 0px); --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.90; --rh-device-nudgeY: -40x; --rh-focus-scale: 1.68; --rh-focus-shiftY: 245px; --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; } /* Make sure hero overlays NEVER steal clicks */ .page--home .rh-hero__bg, .page--home .rh-hero__bg::after, .page--home .rh-hero__inner::after, .page--home .rh-screenFade, .page--home .rh-deviceStage::after{ pointer-events: none !important; } /* Force the CTA above everything + clickable */ .page--home .rh-btn{ position: relative !important; z-index: 999 !important; pointer-events: auto !important; } /* ========================================================= HOME SPLIT ACCORDION (NEW / INDEPENDENT) Scoped to: body.page--home ========================================================= */ .page--home .home-splitSection{ margin-top: clamp(26px, 4vw, 54px); } .page--home .home-split{ display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(18px, 3vw, 44px); align-items: center; } @media (max-width: 980px){ .page--home .home-split{ grid-template-columns: 1fr; } } /* Left panel container */ .page--home .home-split__panel{ border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); overflow: hidden; position: relative; } /* Top accent line (subtle + premium) */ .page--home .home-split__panel::before{ content:""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient( 90deg, rgba(245,158,11,0.90), rgba(13,116,245,0.55), rgba(89,224,11,0.45) ); opacity: 0.9; } .page--home .home-split__accordion{ padding: 18px; } /* each accordion item */ .page--home .home-split__item{ --acc: rgba(255,255,255,0.16); border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.10); overflow: hidden; } .page--home .home-split__item + .home-split__item{ margin-top: 12px; } /* color accents per row */ .page--home .home-split__item.is-auction { --acc: rgba(139,92,246,1); } /* violet */ .page--home .home-split__item.is-sustain { --acc: rgba(13,116,245,1); } /* blue */ .page--home .home-split__item.is-sanitize { --acc: rgba(89,224,11,1); } /* green */ .page--home .home-split__item.is-scope3 { --acc: rgba(245,158,11,1); } /* amber */ /* summary row */ .page--home .home-split__summary{ list-style: none; cursor: pointer; user-select: none; display: grid; grid-template-columns: 56px 1fr 34px; align-items: center; gap: 12px; padding: 14px 14px; } .page--home .home-split__summary::-webkit-details-marker{ display: none; } .page--home .home-split__icon{ width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--acc) 90%, #000 10%); box-shadow: 0 10px 26px rgba(0,0,0,0.28); } .page--home .home-split__icon svg{ width: 22px; height: 22px; fill: rgba(0,0,0,0.80); } /* label */ .page--home .home-split__label{ font-weight: 750; color: rgba(255,255,255,0.92); letter-spacing: 0.1px; } /* plus/minus (CSS only) */ .page--home .home-split__toggle{ width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .page--home .home-split__toggle::before, .page--home .home-split__toggle::after{ content:""; position: absolute; width: 12px; height: 2px; background: rgba(255,255,255,0.70); border-radius: 2px; } .page--home .home-split__toggle::after{ transform: rotate(90deg); } /* open state: feels “active” + toggle becomes minus */ .page--home .home-split__item[open]{ background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); box-shadow: 0 18px 48px rgba(0,0,0,0.35); } .page--home .home-split__item[open] .home-split__summary{ border-bottom: 1px solid rgba(255,255,255,0.08); } .page--home .home-split__item[open] .home-split__toggle::after{ transform: rotate(0deg); opacity: 0; /* hide vertical bar => minus */ } /* body text */ .page--home .home-split__body{ padding: 12px 16px 16px 70px; /* aligns under label, not icon */ color: rgba(255,255,255,0.70); line-height: 1.55; font-size: 14px; } /* Right model stage */ .page--home .home-split__modelStage{ position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); overflow: hidden; height: clamp(280px, 30vw, 420px); display: grid; place-items: center; } /* inverse “shadow” / glow under the model */ .page--home .home-split__modelStage::after{ content:""; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(420px, 70%); height: 56px; background: radial-gradient(closest-side, rgba(255,255,255,0.24), transparent 70%); filter: blur(16px); opacity: 0.95; pointer-events: none; } .page--home model-viewer.home-split__model{ width: min(420px, 92%); height: min(420px, 92%); background: transparent; /* subtle “light shadow” for dark theme */ filter: drop-shadow(0 26px 48px rgba(255,255,255,0.14)); } .page--home model-viewer.home-split__model::part(default-progress-bar){ display: none; } /* ========================================================= HOME SPLIT ACCORDION — SLEEK OVERRIDES (paste at bottom) ========================================================= */ .page--home .home-split__heading{ margin: 0 0 clamp(14px, 2vw, 18px); text-align: center; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.01em; color: rgba(255,255,255,0.92); } /* Make left panel feel lighter / less “boxed” */ .page--home .home-split__panel{ background: rgba(255,255,255,0.01) !important; border-color: rgba(255,255,255,0.05) !important; } /* So the top accent line is barely-there (optional but sleek) */ .page--home .home-split__panel::before{ opacity: 0.28 !important; } /* Accordion items: remove “card blocks” */ .page--home .home-split__item{ background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; } /* Replace card spacing with clean dividers */ .page--home .home-split__item + .home-split__item{ margin-top: 0 !important; border-top: 1px solid rgba(255,255,255,0.08); } /* Summary row stays clickable and clean */ .page--home .home-split__summary{ padding: 16px 10px !important; } /* Open state: DO NOT change background/border/shadow */ .page--home .home-split__item[open]{ background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .page--home .home-split__item[open] .home-split__summary{ border-bottom: 0 !important; } /* Body: slightly tighter + consistent */ .page--home .home-split__body{ padding: 8px 10px 16px 70px !important; color: rgba(255,255,255,0.68) !important; } /* Right model “card”: keep structure, but make border/background barely visible */ .page--home .home-split__modelStage{ background: rgba(255,255,255,0.008) !important; border-color: rgba(255,255,255,0.04) !important; } /* 3D model 20% smaller */ .page--home .home-split__model{ transform: scale(0.85); transform-origin: center; }