positioned in 3D space between two real points. Deliberately low opacity (texture, not something to read) and pointer-events:none, so it never interferes with reading the card or clicking it — the pointer listeners that drive the drone's tilt live on .service-card itself. */ .rv-3d { position: absolute; right: 4px; bottom: 4px; width: 190px; height: 190px; display: grid; place-items: center; perspective: 900px; opacity: 0; transition: opacity .45s ease; /* Alpha is baked into the LINE COLOUR (was .95 with the container held at opacity:.5). A group opacity below 1 on a box with ~200 children forces the browser to rasterise the whole subtree into an offscreen buffer and composite it every single frame — the single most expensive thing here, and the main reason it stuttered on phones. Ending the fade at opacity:1 removes that buffer entirely while looking the same. */ color: rgba(var(--theme-rgb, 222, 216, 255), .48); pointer-events: none; z-index: 0; /* Isolates this subtree's layout from the rest of the card, so moving ~200 absolutely-positioned edges can't trigger layout work outside the box. NOT `contain: paint` — that would clip the wireframe, which deliberately overflows its 190px box in 3D. */ contain: layout; } /* Only on hover, same as the code layer — it's an accent that rewards exploring a card, not permanent furniture. */ .service-card:hover .rv-3d { opacity: 1; } .rv-3d-scene { position: relative; width: 0; height: 0; transform-style: preserve-3d; } /* Every edge starts at the scene's origin (0,0,0 in the vertex data); translate3d/rotateY/rotateZ (set inline, per-edge, in JS) take it from there to its real 3D position. The scene is a 0x0 point centered by the parent grid, so top/left 0 here IS the shape's center — no offset math needed, and the JS assumes exactly this. */ .rv-edge { position: absolute; top: 0; left: 0; height: 1.5px; background: currentColor; border-radius: 2px; } /* Glow only on the card you're actually on. A box-shadow per edge across every built shape meant up to ~1,600 shadowed elements to paint; scoped to :hover it's one card's worth (~210 max) and only while visible. 4px rather than 6px: blur cost scales with radius and at this line thickness the difference isn't perceptible, but it's ~200 shadows being painted every frame the shape rotates. */ .service-card:hover .rv-edge { box-shadow: 0 0 4px currentColor; } /* Graphic design gem: nobody's pointer is on it most of the time, so it gets a slow idle turntable spin instead — still genuinely 3D, just not pointer-driven. The drone (.rv-3d-pointer) gets its rotation from JS instead (see buildCardWireframes), reacting to the mouse as asked. */ /* Pencil that rides the sphere's draw (Graphic Design card). Its own preserve-3d group so it can travel independently of the shape. */ .rv-pencil { position: absolute; top: 0; left: 0; transform-style: preserve-3d; opacity: 0; } /* Readable brand mark at the centre of the sphere. Sits on .rv-3d rather than inside the rotating scene, so it stays square to the viewer while the sphere turns around it. Fades in after the rings have closed. */ /* Sub-assembly wrapper (gears, orbits): a 0x0 point that can be rotated as a rigid body, with its pivot moved onto the part's own centre by transform-origin (set inline from shape.groupOrigin). */ .rv-grp { position: absolute; top: 0; left: 0; transform-style: preserve-3d; } /* Camera-flash wash. Sits over the whole card (behind the text, which is at z-index 3) so a shutter fire lights the card rather than just the corner the wireframe lives in. Opacity is driven per-frame from the shape's animate(); it's 0 the rest of the time, so it costs nothing. */ .rv-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(120% 90% at 72% 78%, rgba(var(--theme-rgb, 248, 113, 113), .85), rgba(255, 255, 255, .35) 38%, transparent 72%); } @keyframes rvGearCW { to { transform: rotate(360deg); } } @keyframes rvGearCCW { to { transform: rotate(-360deg); } } /* Propellers spin about a VERTICAL axis, so rotateY — not the flat rotate() the gears use. Needs transform-origin with a Z component too (set inline from shape.groupOrigin) or they'd swing around the airframe centre. */ @keyframes rvPropCW { to { transform: rotateY(360deg); } } @keyframes rvPropCCW { to { transform: rotateY(-360deg); } } /* Film reels lie flat on the camera top, so they turn about Y as well. */ @keyframes rvReel { to { transform: rotateY(360deg); } } .rv-3d-logo { position: absolute; top: 50%; left: 50%; /* Show ONLY the "orixe" half of the wordmark. The gap between the two words was measured by rasterising the SVG and scanning for the empty column band: it sits at 43.9%-47.6% of the width, so cropping at 46% cuts cleanly between them. The extra translateX re-centres what's left, since clipping doesn't change the element's own box. */ width: 176px; height: auto; clip-path: inset(0 54% 0 0); transform: translate(-50%, -50%) translateX(27%) scale(.82); opacity: 0; /* No transition-delay here: the "wait for the sphere to close" timing is done in JS (see drawIn) instead. Relying on a CSS delay meant the element was created and given .rv-on in the same tick, so the browser had no committed start value to transition FROM and the property just stayed at 0. */ transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 0 10px rgba(var(--theme-rgb, 222, 216, 255), .55)); } .rv-3d-logo.rv-on { opacity: .95; transform: translate(-50%, -50%) translateX(27%) scale(1); } /* Idle turntable spin — ONLY while the card is hovered. Running it unconditionally kept 6 scenes (769 edge divs) animating forever, off screen and at opacity 0: continuous compositor work for something nobody could see. Scoped to :hover it costs nothing until you're looking at it. */ .service-card:hover .rv-3d-idle .rv-3d-scene { animation: rv3dSpin 16s linear infinite; } @keyframes rv3dSpin { from { transform: rotateX(16deg) rotateY(0deg); } to { transform: rotateX(16deg) rotateY(360deg); } } /* Icon: gradient fill + glow */ .card-icon { background: var(--rv-grad-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px rgba(167, 139, 250, .4)); } .card-title { letter-spacing: -0.01em; } .card-description { color: var(--rv-mut); } .card-details { background-color: rgba(5, 5, 9, .5); } .card-details ul li { border-color: rgba(255, 255, 255, .08); } .card-details ul li a { color: var(--rv-cy) !important; } /* -------------------------------------------------------------------------- 9. PRODUCTS (LocalNode / GastroNode) -------------------------------------------------------------------------- */ .products-section { position: relative; } .product-video-wrapper { border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(124, 58, 237, .10); } .product-glow { background: radial-gradient(circle at 50% 42%, rgba(167, 139, 250, .16) 0%, transparent 64%); animation: rvPulse 5.5s ease-in-out infinite; } @keyframes rvPulse { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } } .p-feature { font-family: var(--font-body); color: var(--rv-ink); border-left: 1px solid rgba(255,255,255,.12); padding-left: 1rem; transition: border-color .4s ease, transform .4s ease; } .p-feature:hover { border-color: var(--rv-vio); transform: translateX(4px); } .p-feature i { background: var(--rv-grad-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Product headings: split reveal + word fill */ .products-section .section-title { font-size: clamp(2.4rem, 6vw, 4.8rem); font-weight: 800; } /* -------------------------------------------------------------------------- 10. ABOUT — paper block + ink marker underlines -------------------------------------------------------------------------- */ #about { background-color: #f7f5ef; background-image: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(90% 70% at 50% 100%, rgba(214, 205, 235, .34), transparent 70%); } #about .section-title, #about .section-description { color: #17151f; } #about .section-title { color: #17151f; } #about .section-title::after { background: linear-gradient(90deg, #7c3aed, #0891b2, #db2777); } .section-description { color: #3c3849; font-size: 1.06rem; line-height: 1.75; text-align: center; } /* (the old marker/ink sweep behind this paragraph was removed: it painted a violet band across the text and made it look offset) */ #about a { color: #7c3aed; text-decoration: none; border-bottom: 1px solid rgba(124, 58, 237, .35); transition: color .3s ease, border-color .3s ease; } #about a:hover { color: #0891b2; border-color: #0891b2; } .team-member-name { color: #17151f; } .team-member-title { color: #4a4558; } /* -------------------------------------------------------------------------- 11. REVIEWS -------------------------------------------------------------------------- */ .review-card { background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); } /* Thin gradient tick above each review (replaces the old quote glyph) */ .review-card::before { content: ''; display: block; width: 34px; height: 2px; border-radius: 2px; margin-bottom: .9rem; background: var(--rv-grad); } .review-card:hover { transform: translateY(-6px); border-color: rgba(240, 171, 252, .35); box-shadow: 0 22px 54px rgba(0, 0, 0, .5), 0 0 34px rgba(236, 72, 153, .12); } /* .reviewer-name is an

in the markup, so without this it would pick up the global `h1..h6 { font-family: var(--font-display) }` rule below and render in Syne — not what "the original font" means here. `inherit` makes it fall through to the normal body font (Manrope) like the rest of the review text, same as the pre-revamp site. Size/weight/color are untouched, from style.css's own .reviewer-name rule. / .reviewer-name { font-family: inherit; } .review-text { color: var(--rv-mut); } / -------------------------------------------------------------------------- 12. FAQ — terminal panel -------------------------------------------------------------------------- / .faq-item { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-left: 2px solid transparent; border-radius: 14px; transition: border-color .35s ease, border-left-color .35s ease, box-shadow .35s ease; } .faq-item:hover { background: rgba(255, 255, 255, .05); border-color: rgba(167, 139, 250, .3); } .faq-item.active { border-color: rgba(167, 139, 250, .35); border-left-color: var(--rv-vio); box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 30px rgba(124, 58, 237, .10); } .faq-question { font-family: var(--rv-font-mono); font-size: .98rem; letter-spacing: .01em; text-transform: none; color: var(--rv-ink); } .faq-question > span::before { content: "> "; font-family: var(--rv-font-mono); color: transparent; background: var(--rv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .faq-icon { background: var(--rv-grad-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .faq-answer p { color: var(--rv-mut); } .faq-answer strong { color: var(--rv-ink); } / -------------------------------------------------------------------------- 13. CONTACT -------------------------------------------------------------------------- / .contact-option { border-radius: 14px; background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255, 255, 255, .1); font-family: var(--font-ui); } .contact-option:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .08); box-shadow: 0 16px 36px rgba(0, 0, 0, .4), 0 0 24px rgba(124, 58, 237, .18); } .contact-option.whatsapp { background-color: #17b45e; border-color: rgba(37, 211, 102, .5); } .contact-option.whatsapp:hover { background-color: #0f9c4f; } .contact-option.call { background-color: #1187b8; border-color: rgba(37, 163, 216, .5); } .contact-option.call:hover { background-color: #0d6f99; } .contact-separator { font-family: var(--rv-font-mono); letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; color: var(--rv-dim); } .contact-separator::before, .contact-separator::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.25)); } .contact-person-name { letter-spacing: .01em; } / Form: graphite fields, gradient focus / .of-field input, .of-field textarea { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; } .of-field input:focus, .of-field textarea:focus { border-color: rgba(167, 139, 250, .6); background: rgba(167, 139, 250, .05); box-shadow: 0 0 0 3px rgba(167, 139, 250, .14), 0 0 24px rgba(124, 58, 237, .12); } .of-field label { font-family: var(--rv-font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--rv-dim); } .of-legal a { color: var(--rv-cy) !important; } / White, like every other page's .btn-primary — client asked for it to match, not stand out with the gradient. .btn-primary already gives white bg / black text via --accent-color / --primary-color, but revamp's :root re-tints --accent-color to a near-white lavender (--rv-ink) for the rest of the page, so this pins it back to pure white specifically here. / .of-submit { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } .of-submit:hover { background: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: #ffffff; } / -------------------------------------------------------------------------- 14. FOOTER — intentionally UNCHANGED The user requested the footer stay pixel-identical to the original site. No visual rule from style.css is overridden here; the root variables are re-scoped so background, borders, link colors and social icons render exactly like the original. -------------------------------------------------------------------------- / .main-footer { --primary-color: #000000; --accent-color: #ffffff; --text-color: #f5f5f7; --border-color: rgba(255, 255, 255, 0.08); --background-color: #000000; color: #f5f5f7; } / -------------------------------------------------------------------------- 15. FLOATING UI — progress bar, cursor, loader, badge -------------------------------------------------------------------------- / / Scroll progress / .rv-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 12000; pointer-events: none; background: transparent; transform-origin: 0 50%; transform: scaleX(0); background: var(--rv-grad); } / Custom cursor (fine pointers only; injected by revamp.js) NOTE: no mix-blend-mode here — blending forces the browser to composite the whole viewport against the pointer every frame. Plain RGBA instead. / .rv-cursor { position: fixed; top: 0; left: 0; z-index: 13000; pointer-events: none; will-change: transform; } .rv-cursor-dot { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: rgba(240, 236, 255, .9); transform: translate(-50%, -50%); } .rv-cursor-ring { position: absolute; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid rgba(240, 236, 255, .55); border-radius: 50%; transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } .rv-cursor.is-link .rv-cursor-ring { transform: translate(-50%, -50%) scale(1.65); opacity: .85; } .rv-cursor.is-down .rv-cursor-ring { transform: translate(-50%, -50%) scale(.8); } .rv-cursor-on, .rv-cursor-on { cursor: none !important; } .rv-cursor-on input, .rv-cursor-on textarea, .rv-cursor-on select { cursor: text !important; } /* Intro loader / .rv-loader { position: fixed; inset: 0; z-index: 14000; display: grid; place-items: center; background: #060609; transition: opacity .55s ease .15s, transform .8s cubic-bezier(.76, 0, .24, 1); } .rv-loader.rv-done { opacity: 0; transform: translateY(-6%); pointer-events: none; } .rv-loader-inner { text-align: center; padding: 0 1.5rem; } .rv-loader-brand { display: block; margin-bottom: 1.4rem; } .rv-loader-brand img { width: clamp(180px, 26vw, 250px); height: auto; display: block; margin: 0 auto; opacity: .92; filter: drop-shadow(0 0 26px rgba(167, 139, 250, .5)); animation: rvLoaderLogo 2.4s ease-in-out infinite; } / opacity-only animation (filter animation re-rasterizes the layer each frame) / @keyframes rvLoaderLogo { 0%, 100% { opacity: .8; } 50% { opacity: 1; } } .rv-loader-bar { display: block; width: min(240px, 64vw); height: 2px; margin: 0 auto; background: rgba(255, 255, 255, .09); border-radius: 2px; overflow: hidden; position: relative; } .rv-loader-bar::after { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--rv-grad); transform-origin: 0 50%; animation: rvLoad 1s cubic-bezier(.22, 1, .36, 1) forwards; } .rv-loader-meta { margin-top: 1.1rem; font-family: var(--rv-font-mono); font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--rv-dim); } @keyframes rvLoad { from { transform: scaleX(0); } to { transform: scaleX(1); } } / -------------------------------------------------------------------------- 15b. CTA BUTTONS — "AURORA GLASS" (hero Ver Servicios + Discover LocalNode / GastroNode). Full override of the original .button-wrap system from style.css: · frosted-glass body (backdrop blur + saturate, inner highlights) · a light comet that orbits the border (transform-only, GPU cheap) · a diagonal sheen sweep that crosses the glass on a loop · a breathing radial aura behind the button Purely visual: markup and text untouched. -------------------------------------------------------------------------- / / Wrapper: reset the old pill/shadow scaffolding / .button-wrap { border-radius: 999vw; background: transparent; pointer-events: none; transition: none; } / ---------- Glass body ---------- / .button-wrap button { all: unset; cursor: pointer; pointer-events: auto; position: relative; display: inline-block; overflow: hidden; / clips the sheen sweep / border-radius: 999vw; background: linear-gradient(160deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,.14) 100%); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, .30); box-shadow: 0 12px 36px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .10); -webkit-tap-highlight-color: transparent; transform: translateZ(0); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease; } .button-wrap button:hover { transform: translateY(-2px) scale(1.03); background: linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.10) 46%, rgba(255,255,255,.18) 100%); border-color: rgba(255, 255, 255, .48); box-shadow: 0 18px 46px rgba(0, 0, 0, .5), 0 0 32px rgba(139, 92, 246, .28), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .08); } .button-wrap button:active { transform: translateY(0) scale(.985); box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 2px 6px rgba(0, 0, 0, .18); } .button-wrap button:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 3px; } / ---------- Label ---------- / .button-wrap button span { position: relative; display: block; z-index: 3; user-select: none; -webkit-user-select: none; font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; color: #fff; padding-inline: 1.9em; padding-block: 1.05em; text-shadow: 0 1px 8px rgba(0, 0, 0, .28); transition: letter-spacing .35s cubic-bezier(.22, 1, .36, 1); } .button-wrap button:hover span { letter-spacing: .075em; } / old white highlight pill inside the label — removed / .button-wrap button span::after { content: none !important; } / ---------- Orbiting light ring (comet on the border) ---------- / / Animatable gradient angle (needed so the comet can travel ALONG the border instead of the ring shape rotating through the middle of the pill). Fallback: browsers without @property get a static gradient. / @property --rv-ring-angle { syntax: ""; inherits: false; initial-value: 0deg; } .button-wrap button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; box-sizing: border-box; z-index: 4; pointer-events: none; background: conic-gradient(from var(--rv-ring-angle), transparent 0turn 0.52turn, rgba(167, 139, 250, .95) 0.62turn, rgba(103, 232, 249, .95) 0.72turn, rgba(240, 171, 252, .95) 0.80turn, rgba(255, 255, 255, .85) 0.86turn, transparent 0.93turn 1turn); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; / ONLY the gradient angle animates — the ring never moves from the border, the comet just runs around the pill edge. / animation: rvRingTravel 3.6s linear infinite; } @keyframes rvRingTravel { to { --rv-ring-angle: 360deg; } } / ---------- Sheen sweep across the glass ---------- / .button-wrap button::after { content: ''; position: absolute; top: -55%; left: -85%; width: 48%; height: 210%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .40) 50%, transparent 100%); transform: rotate(8deg) translateX(-80%); animation: rvSheen 5.2s cubic-bezier(.33, 0, .2, 1) infinite; will-change: transform; } @keyframes rvSheen { 0% { transform: rotate(8deg) translateX(-240%); } 55%, 100% { transform: rotate(8deg) translateX(420%); } } / ---------- Breathing aura (replaces the old .button-shadow) ---------- / .button-shadow { position: absolute; inset: -8px; border-radius: 999vw; background: radial-gradient(58% 95% at 50% 50%, rgba(139, 92, 246, .50), rgba(34, 211, 238, .16) 52%, transparent 74%); filter: blur(14px); opacity: .6; animation: rvAuraPulse 3.8s ease-in-out infinite; pointer-events: none; z-index: -1; will-change: opacity; transition: none; } .button-shadow::after { content: none !important; } @keyframes rvAuraPulse { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .8; transform: scale(1.07); } } / Neutralize every old :has() state so the new design owns the states / .button-wrap:has(button:hover) .button-shadow { filter: blur(14px); opacity: .9; } .button-wrap:has(button:hover) .button-shadow::after { content: none; } .button-wrap:has(button:active) { transform: none; } .button-wrap:has(button:active) button { / same stroke we define on .button-wrap button:active, stated at the higher specificity the old :has() rule had / box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 2px 6px rgba(0, 0, 0, .18); } .button-wrap:has(button:active) .button-shadow { filter: blur(14px); } .button-wrap:has(button:active) .button-shadow::after { content: none; } .button-wrap:has(button:active) span { text-shadow: none; } / Touch: no hover preview, keep everything rolling / @media (hover: none) and (pointer: coarse) { .button-wrap button span::after, .button-wrap button:active span::after { content: none; } .button-wrap button:hover { transform: none; } } / Smaller halo/typography on small screens / @media (max-width: 480px) { .button-wrap button span { padding-inline: 1.5em; padding-block: .95em; font-size: .95rem; } .button-shadow { inset: -5px; } } / Floating WhatsApp / .floating-whatsapp { box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 26px rgba(37, 211, 102, .35); } / Welcome modal / .welcome-modal-content { background: rgba(12, 12, 20, .85); border: 1px solid rgba(167, 139, 250, .25); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-radius: 18px; } / -------------------------------------------------------------------------- 16. REDUCED MOTION — intentionally not handled. Client decision: every animation on this page should always play, on every device, regardless of the OS/browser "reduce motion" setting. revamp.js's REDUCED flag is hardcoded false for the same reason, so nothing here needs a @media (prefers-reduced-motion) block at all. -------------------------------------------------------------------------- / / Set by the IntersectionObserver in revamp.js on anything carrying an infinite animation once it scrolls out of view. Covers pseudo-elements and descendants because most of these loops live on ::before/::after (the marquee text, the CTA comet and sheen) or on a child (the press track inside .press-marquee). Purely a power/compositor saving — the element is off screen, so freezing it cannot be seen. / .rv-off, .rv-off::before, .rv-off::after, .rv-off , .rv-off ::before, .rv-off ::after { animation-play-state: paused !important; } /* -------------------------------------------------------------------------- 17. TOUCH / MOBILE BUDGET The animations stay, but the expensive scenery around them goes. On a phone the wireframes were competing with effects that cost far more than they add at that size: · backdrop-filter on the cards is the big one. Every one of the 14 cards was asking the compositor to snapshot and gaussian-blur the page behind it (blur(20px) from style.css plus blur(14px) here), every frame the 3D shape on top of it moved. Mobile GPUs choke on stacked backdrop filters; a flat translucent panel is visually near-identical at phone size. · a box-shadow on each of ~200 edges is ~200 extra blur passes per frame. The lines are still bright without it. · the glyph-cloud layer re-lays out hundreds of characters behind a radial mask, and it's a hover affordance nobody sees on touch. -------------------------------------------------------------------------- / @media (pointer: coarse) { .service-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 55%); } .service-card:hover .rv-edge { box-shadow: none; } / .rv-code stays: hiding it didn't buy measurable performance and the glyph cloud is part of the look. Only .rv-spot goes, because it's a pointer-tracked highlight and there's no pointer to track. / .rv-spot { display: none; } / slightly smaller stage: fewer pixels to composite per frame / .rv-3d { width: 150px; height: 150px; } / No continuous scene rotation on touch. Re-aiming a preserve-3d scene makes the compositor re-transform every one of its ~200 children, and iOS rasterises each 3D-transformed child separately — so a permanent 16s turntable was ~200 layers being recomposited forever, for a card nobody is pointing at. The per-shape animations (smoke, beams, waveform...) still run; only the whole-scene spin stops. / .rv-3d-idle .rv-3d-scene, .service-card:hover .rv-3d-idle .rv-3d-scene { animation: none; } / Rounded ends on ~200 one-and-a-half-pixel lines cost real masking work and are invisible at this size. / .rv-edge { border-radius: 0; } / The glyph cloud is normally revealed through a small circle that follows the pointer — meaningless on touch, where there's nothing to follow and no :hover to rely on. On a phone it's anchored to the top corner instead and fades out diagonally, so it reads as a texture in that corner rather than a wall of characters over the whole card. The fade is part of the mask, so the glyphs outside it aren't just invisible — they're not composited at all. / .service-card.expanded .rv-code { opacity: 1; -webkit-mask-image: radial-gradient(150px 130px at 12% 6%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%); mask-image: radial-gradient(150px 130px at 12% 6%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%); } / Same for the wireframe: tied to the card being open rather than to a hover state the device can't provide. / .service-card.expanded .rv-3d { opacity: 1; } / Neutralise the card's :hover styling on touch. iOS keeps a "sticky" hover on the last element you touched when that element has hover rules, and the next tap elsewhere can be spent clearing it instead of activating the new target. Since nothing here should react to hover on a phone anyway, making it a no-op removes that trap entirely. / .service-card:hover { transform: none; border-color: rgba(255, 255, 255, .09); background: linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 55%); box-shadow: 0 10px 34px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.05); } / The glyph layer only shows in a corner here, so it doesn't need to be a full-card box: a smaller element means less text to lay out and a smaller mask surface to composite. Same visible result. */ .rv-code { inset: 0 auto auto 0; width: 62%; height: 55%; } }