/* ============================================================ PEPPOLBRIDGE — depth.css · 3D depth design system Load order: AFTER style.css + light.css + scene3d.css + interactive.css (this file only ADDS depth — shadows, tilt plumbing, parallax and entrance transforms. It never changes backgrounds or borders.) Pairs with assets/depth.js which drives: .depth-tilt — pointer tilt + sheen (class added/removed by JS) .depth-plx — scroll parallax consumer (reads --dpy) .depth-pre / .depth-in — one-time 3D entrance for non-[data-reveal] cards NOTE: the class name is .depth-tilt (not .tilt) on purpose — main.js already owns `.tilt` and drives it with GSAP inline transforms; reusing that name would make two systems fight for the same element's transform. ============================================================ */ :root{ --dp-ease: cubic-bezier(.22, 1, .36, 1); /* layered elevation: contact (crisp) + key (directional) + ambient (soft), all navy-tinted for the ivory/light ground */ --dp-e1: 0 1px 1px rgba(17, 38, 60, .04), 0 4px 10px -4px rgba(17, 38, 60, .07), 0 18px 32px -22px rgba(17, 38, 60, .13); --dp-e2: 0 1px 2px rgba(17, 38, 60, .05), 0 10px 24px -12px rgba(17, 38, 60, .10), 0 34px 64px -30px rgba(17, 38, 60, .17); --dp-e3: 0 2px 3px rgba(17, 38, 60, .06), 0 18px 40px -16px rgba(17, 38, 60, .14), 0 60px 110px -40px rgba(17, 38, 60, .24); --dp-e1-hover: 0 1px 2px rgba(17, 38, 60, .05), 0 10px 22px -10px rgba(17, 38, 60, .11), 0 30px 55px -26px rgba(17, 38, 60, .20); --dp-e2-hover: 0 2px 3px rgba(17, 38, 60, .06), 0 16px 34px -14px rgba(17, 38, 60, .14), 0 48px 88px -34px rgba(17, 38, 60, .24); --dp-e3-hover: 0 3px 5px rgba(17, 38, 60, .07), 0 26px 52px -18px rgba(17, 38, 60, .18), 0 80px 140px -46px rgba(17, 38, 60, .30); } /* ------------------------------------------------------------ 1 · STATIC ELEVATION (all pointers, all viewports) overrides light.css's flat `0 1px 0` card shadow — same specificity, later in the cascade. ------------------------------------------------------------ */ .gcard, .cat-item, .step, .fc-box{ box-shadow: var(--dp-e1); } .card, .ccard, .pcard, .rcard, .tcard, .shot, .table-wrap{ box-shadow: var(--dp-e2); } .code-win{ /* keep the hairline ring light.css gave the dark code window */ box-shadow: var(--dp-e3), 0 0 0 1px rgba(22, 50, 79, .08); } /* FAQ rows sit flush in a list (no radius, no gap) — a whisper of downward ambient only, so no dark banding between rows */ .faq-item{ box-shadow: 0 16px 30px -26px rgba(17, 38, 60, .16); } /* ------------------------------------------------------------ 2 · HOVER LIFT + DEEPER SHADOW (fine pointers only) translateY carries var(--dpy) so a parallaxed element (.shot) never jumps when the hover transform takes over. ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine){ .card, .gcard, .ccard, .pcard, .rcard, .tcard, .fc-box, .table-wrap, .shot, .cat-item, .step, .code-win{ transition: transform .22s var(--dp-ease), box-shadow .22s var(--dp-ease), border-color .35s ease, background-color .3s ease; } .gcard:hover, .cat-item:hover, .step:hover, .fc-box:hover{ transform: translate3d(0, var(--dpy, 0px), 0) scale(1.012); box-shadow: var(--dp-e1-hover); } .card:hover, .ccard:hover, .pcard:hover, .rcard:hover, .tcard:hover, .shot:hover, .table-wrap:hover{ transform: translate3d(0, var(--dpy, 0px), 0) scale(1.012); box-shadow: var(--dp-e2-hover); } .code-win:hover{ transform: translate3d(0, var(--dpy, 0px), 0) scale(1.012); box-shadow: var(--dp-e3-hover), 0 0 0 1px rgba(22, 50, 79, .08); } } /* ------------------------------------------------------------ 3 · POINTER TILT + MOVING SHEEN (.depth-tilt added by depth.js) Tripled class = (0,3,0) specificity so it beats every legacy `.x:hover { transform: … }` rule while the tilt is live. depth.js drives --rx/--ry/--mx/--my; --dpy is the parallax offset. ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine){ .depth-tilt.depth-tilt.depth-tilt{ position: relative; transform: perspective(900px) translate3d(0, var(--dpy, 0px), 0) scale(1.012) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .16s cubic-bezier(.33, 1, .68, 1), box-shadow .22s var(--dp-ease), border-color .35s ease; will-change: transform; } /* sheen — follows the pointer; border-radius:inherit keeps it inside rounded card corners even without overflow:hidden. While the class is on, this deliberately supersedes the legacy hard-coded cyan spotlight ::after of .card/.ccard. */ .depth-tilt.depth-tilt.depth-tilt::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; background: radial-gradient(60% 80% at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(95% 130% at var(--mx, 50%) var(--my, 50%), rgba(36, 87, 255, .26) 0%, rgba(36, 87, 255, 0) 70%); opacity: 0; transition: opacity .3s ease; } .depth-tilt.depth-tilt.depth-tilt:hover::after{ opacity: .35; } } /* ------------------------------------------------------------ 4 · HERO DEPTH — CSS-only layered lift under page-hero copy ------------------------------------------------------------ */ .page-hero h1{ text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 2px 3px rgba(17, 38, 60, .05), 0 10px 24px rgba(17, 38, 60, .09), 0 26px 48px rgba(17, 38, 60, .05); } .page-hero .lead{ text-shadow: 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px rgba(17, 38, 60, .05); } .page-hero .badge{ box-shadow: 0 1px 1px rgba(17, 38, 60, .04), 0 8px 18px -10px rgba(17, 38, 60, .18); } /* ------------------------------------------------------------ 5 · SCROLL PARALLAX CONSUMER (.depth-plx added by depth.js) transform-only: never affects layout, so no CLS. ------------------------------------------------------------ */ @media (min-width: 768px){ .depth-plx{ transform: translate3d(0, var(--dpy, 0px), 0); will-change: transform; } } /* ------------------------------------------------------------ 6 · 3D ENTRANCE for cards WITHOUT [data-reveal] (.depth-pre set pre-paint by depth.js, .depth-in on intersection; both classes are removed after the transition so the element returns to a stylesheet-only state.) ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference){ .depth-pre{ opacity: 0; transform: perspective(700px) translate3d(0, calc(var(--dpy, 0px) + 18px), 0) rotateX(7deg); transform-origin: 50% 100%; } .depth-pre.depth-in{ opacity: 1; transform: perspective(700px) translate3d(0, var(--dpy, 0px), 0) rotateX(0deg); transition: opacity .5s ease, transform .5s var(--dp-ease); } } /* ------------------------------------------------------------ 7 · SMALL VIEWPORTS — cheaper, lighter shadows (no tilt there: tilt is gated on hover+fine pointer and a width check in JS) ------------------------------------------------------------ */ @media (max-width: 520px){ :root{ --dp-e1: 0 1px 2px rgba(17, 38, 60, .05), 0 10px 20px -16px rgba(17, 38, 60, .12); --dp-e2: 0 1px 2px rgba(17, 38, 60, .06), 0 14px 28px -18px rgba(17, 38, 60, .14); --dp-e3: 0 2px 4px rgba(17, 38, 60, .07), 0 20px 40px -22px rgba(17, 38, 60, .20); } } /* ------------------------------------------------------------ 8 · REDUCED MOTION — static elevation stays, every dynamic depth effect is disabled outright. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .card, .gcard, .ccard, .pcard, .rcard, .tcard, .fc-box, .table-wrap, .shot, .cat-item, .step, .code-win{ transition: none !important; } .card:hover, .gcard:hover, .ccard:hover, .pcard:hover, .rcard:hover, .tcard:hover, .fc-box:hover, .table-wrap:hover, .shot:hover, .cat-item:hover, .step:hover, .code-win:hover{ transform: none !important; } .depth-tilt.depth-tilt.depth-tilt{ transform: none !important; transition: none !important; will-change: auto !important; } .depth-tilt.depth-tilt.depth-tilt::after{ display: none !important; } .depth-plx{ transform: none !important; will-change: auto !important; } .depth-pre, .depth-pre.depth-in{ opacity: 1 !important; transform: none !important; transition: none !important; } }