/* =========================================================================== SimpleWebSA - 3D DESKTOP LAYER v1.1.0 (assets/css/3d.css) =========================================================================== Loaded on every page after style.css. Almost everything in here is gated behind , which a tiny head snippet adds only on >= 1024px fine-pointer devices that allow motion. Without the class this file changes nothing, so phones and tablets get the site exactly as it was. Same brand tokens as style.css (dark + lime). Zero libraries. The scene itself (particles, grid, wireframes) is assets/js/scene3d.js. Performance rules (v1.1): no backdrop-filter anywhere (the scene behind is animating, so blur would be recomputed every frame), no permanent 3D transforms on cards (they are tilted only while hovered), no CSS transitions on values that JS updates every frame. =========================================================================== */ /* -- Base, all devices ------------------------------------------------------ The hero canvas now lives inside .swsa-hero3d-screen. On mobile that wrapper is the full-bleed background layer the canvas used to be. */ .swsa-hero > div.swsa-hero3d-screen { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .swsa-hero3d-copy, .swsa-hero3d-only { display: none; } /* ============================ 3D MODE (desktop) ============================ */ /* the scene canvas: fixed, full viewport, painted just above the body background and below everything else */ html.swsa-3d-on .swsa-3d-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* -- Stage: sections go translucent so the scene shows through -- */ html.swsa-3d-on .swsa-sec { background: transparent; } html.swsa-3d-on .swsa-sb { background: linear-gradient(180deg, rgba(15,17,24,.62), rgba(15,17,24,.42)); } html.swsa-3d-on .swsa-s3 { background: linear-gradient(180deg, rgba(22,26,36,.62), rgba(22,26,36,.46)); } html.swsa-3d-on .swsa-mq { background: rgba(15,17,24,.6); } html.swsa-3d-on .swsa-foot { background: rgba(8,9,13,.84); } /* -- Glass cards -- Solid translucent fill + inner highlight. No blur (see header). The 3D tilt is applied only while hovered, via .is-tilt (set by scene3d.js). */ html.swsa-3d-on .swsa-sc, html.swsa-3d-on .swsa-step, html.swsa-3d-on .swsa-why-card, html.swsa-3d-on .swsa-stat, html.swsa-3d-on .swsa-artcard, html.swsa-3d-on .swsa-bcard, html.swsa-3d-on .swsa-reach-col, html.swsa-3d-on .swsa-tc, html.swsa-3d-on .swsa-form, html.swsa-3d-on .swsa-about-img, html.swsa-3d-on .swsa-art-strip, html.swsa-3d-on .sart-card { --rx: 0deg; --ry: 0deg; background: linear-gradient(160deg, rgba(22,26,36,.88), rgba(15,17,24,.8)); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); } html.swsa-3d-on .swsa-trust-item { --rx: 0deg; --ry: 0deg; background: rgba(22,26,36,.8); border-color: rgba(255,255,255,.07); } html.swsa-3d-on .swsa-about-img { border: 1px solid transparent; background-clip: padding-box; border-radius: 20px; } /* hover: lime rim light + deeper shadow */ html.swsa-3d-on .swsa-sc:hover, html.swsa-3d-on .swsa-step:hover, html.swsa-3d-on .swsa-why-card:hover, html.swsa-3d-on .swsa-stat:hover, html.swsa-3d-on .swsa-artcard:hover, html.swsa-3d-on .swsa-bcard:hover, html.swsa-3d-on .swsa-reach-col:hover, html.swsa-3d-on .swsa-tc:hover, html.swsa-3d-on .swsa-art-strip:hover, html.swsa-3d-on .sart-card:hover, html.swsa-3d-on .swsa-trust-item:hover { background: linear-gradient(160deg, rgba(26,31,43,.94), rgba(18,21,30,.88)); border-color: rgba(200,255,0,.3); box-shadow: 0 40px 80px -36px rgba(0,0,0,.95), 0 0 0 1px rgba(200,255,0,.08), 0 0 60px -24px rgba(200,255,0,.4), inset 0 1px 0 rgba(255,255,255,.08); } /* the 1px-gap grids become real floating cards */ html.swsa-3d-on .swsa-sg, html.swsa-3d-on .swsa-stats { background: transparent; border: 0; border-radius: 0; gap: 16px; overflow: visible; } html.swsa-3d-on .swsa-stat { border-radius: 18px; } /* stronger cursor glare on glass */ html.swsa-3d-on .swsa-spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200,255,0,.11), rgba(255,255,255,.035) 34%, transparent 66%); } /* -- 3D scroll reveal -- Cards rise out of the page, then rest at transform:none (no permanent GPU layer, crisp text while scrolling). */ html.swsa-3d-on .swsa-rv { opacity: 0; transform: perspective(1000px) translateY(46px) rotateX(-9deg) scale(.985); transition: opacity .8s var(--ease), transform .8s var(--ease); } html.swsa-3d-on .swsa-rv.on { opacity: 1; transform: none; } /* -- Hover tilt: only while the pointer is over the card -- */ html.swsa-3d-on .is-tilt, html.swsa-3d-on .swsa-rv.on.is-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .16s ease-out, opacity .8s var(--ease); transition-delay: 0s; will-change: transform; } /* -- Headings: a little depth -- */ html.swsa-3d-on .swsa-h2 { text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 22px 44px rgba(0,0,0,.55); } html.swsa-3d-on .swsa-h2 .swsa-a { text-shadow: 0 2px 0 rgba(120,150,0,.7), 0 4px 0 rgba(70,90,0,.55), 0 0 36px rgba(200,255,0,.35), 0 22px 44px rgba(0,0,0,.55); } html.swsa-3d-on .swsa-stepn { -webkit-text-stroke-color: rgba(200,255,0,.16); } /* footer watermark lies on the floor */ html.swsa-3d-on .swsa-fmark { transform: perspective(700px) rotateX(40deg); transform-origin: 50% 100%; -webkit-text-stroke-color: rgba(200,255,0,.2); margin-top: 8px; } html.swsa-3d-on .swsa-foot:hover .swsa-fmark { -webkit-text-stroke-color: rgba(200,255,0,.34); } /* long-form pages: the article sits on a glass sheet */ html.swsa-3d-on article.swsa-sec.post, html.swsa-3d-on article.swsa-sec.page { background: rgba(15,17,24,.86); border: 1px solid rgba(255,255,255,.06); border-radius: 28px; box-shadow: 0 50px 100px -50px rgba(0,0,0,.9); } /* ================================= HERO ==================================== Left: brand wordmark + tagline + the same two buttons. Right: the existing hero animation, now a floating glass screen that tilts with the mouse. The whole hero shares one perspective. --sx/--sy/--fy are updated by scene3d.js every frame (already smoothed there), so there are deliberately NO transitions on these transforms. */ html.swsa-3d-on .swsa-hero-cinema { --sx: 0; --sy: 0; --fy: 0px; flex-direction: row; align-items: center; justify-content: space-between; gap: 4%; padding: 120px 6% 84px; min-height: 100vh; min-height: 100svh; perspective: 1600px; } html.swsa-3d-on .swsa-hero > div.swsa-gbg { display: none; } html.swsa-3d-on .swsa-hero > div.swsa-aur { position: absolute; inset: 0; z-index: 0; } html.swsa-3d-on .swsa-hero-cinema .swsa-hcopy { order: 1; flex: 0 1 44%; max-width: 44%; transform: rotateY(calc(var(--sx) * 3deg)) rotateX(calc(var(--sy) * -2deg)); transform-style: preserve-3d; will-change: transform; } html.swsa-3d-on .swsa-hero3d-copy { display: block; } html.swsa-3d-on .swsa-hero3d-only { display: flex; } /* extruded wordmark - not a heading, the page H1 stays in the Why section */ html.swsa-3d-on .swsa-h3d-word { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4.6rem, 8.6vw, 8.8rem); line-height: .9; letter-spacing: 2px; color: var(--txt); margin: 0 0 22px; text-shadow: 0 1px 0 #1c1f2a, 0 2px 0 #1a1d27, 0 3px 0 #181b24, 0 4px 0 #161921, 0 5px 0 #14171e, 0 6px 0 #12141b, 0 7px 0 #101218, 0 8px 0 #0e1015, 0 26px 50px rgba(0,0,0,.75); animation: swsa-up .8s .15s var(--ease) both; transform: translateZ(40px); } html.swsa-3d-on .swsa-h3d-word .swsa-a { color: var(--acc); text-shadow: 0 1px 0 #a3d100, 0 2px 0 #8fb800, 0 3px 0 #7a9e00, 0 4px 0 #668400, 0 5px 0 #526b00, 0 6px 0 #3f5200, 0 7px 0 #2c3900, 0 8px 0 #1a2200, 0 0 54px rgba(200,255,0,.42), 0 26px 50px rgba(0,0,0,.75); } html.swsa-3d-on .swsa-hero-cinema .swsa-htag { font-size: clamp(1rem, 1.25vw, 1.18rem); max-width: 520px; margin-bottom: 30px; transform: translateZ(20px); } html.swsa-3d-on .swsa-hero-cinema .swsa-hbtns { transform: translateZ(30px); } html.swsa-3d-on .swsa-hero-cinema .swsa-htrust { margin-top: 26px; } html.swsa-3d-on .swsa-hero-cinema .swsa-htrust span { font-size: .8rem; } /* the floating screen */ html.swsa-3d-on .swsa-hero > div.swsa-hero3d-screen { order: 2; position: relative; inset: auto; flex: 0 0 52%; width: 52%; max-width: 52%; aspect-ratio: 16 / 10; z-index: 2; pointer-events: auto; border-radius: 22px; border: 1px solid rgba(255,255,255,.09); background: var(--surf); box-shadow: 0 70px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(200,255,0,.05), 0 0 150px -40px rgba(200,255,0,.42); transform: translateY(var(--fy)) rotateY(calc(-13deg + var(--sx) * 7deg)) rotateX(calc(5deg + var(--sy) * -6deg)); transform-style: preserve-3d; transition: box-shadow .4s; will-change: transform; } html.swsa-3d-on .swsa-hero > div.swsa-hero3d-screen:hover { box-shadow: 0 80px 130px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(200,255,0,.12), 0 0 170px -40px rgba(200,255,0,.55); } /* glass sheen replaces the mobile scrim */ html.swsa-3d-on .swsa-hero-cinema .swsa-heroanim::after { background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 22%, transparent 45%, transparent 70%, rgba(200,255,0,.05) 100%); } html.swsa-3d-on .swsa-hero .swsa-scue { z-index: 3; } /* -- Nav: a hairline of light when scrolled -- */ html.swsa-3d-on .swsa-nav.swsa-scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.45), 0 1px 0 rgba(200,255,0,.08); } /* -- WhatsApp FAB: deeper drop shadow so it floats above the glass -- */ html.swsa-3d-on .swsa-wa { box-shadow: 0 8px 28px rgba(37,211,102,.45), 0 30px 50px -20px rgba(0,0,0,.8); } /* -- Narrower desktops (1024-1200) tighten the hero -- */ @media (max-width: 1200px) { html.swsa-3d-on .swsa-hero-cinema { padding: 110px 5% 70px; } html.swsa-3d-on .swsa-h3d-word { font-size: clamp(4rem, 7.6vw, 6.6rem); } }