/: a perspective there would turn them into containing blocks and break the fixed WhatsApp button and nav. */ .value-grid,.svc-grid,.test-strip,.tease-grid,.genre-row, .reviews-grid,.gallery-grid,.staff-stats,.gallery-filters, .contact-inner,.hero-content,.h-ctas,.c-actions,.ar-form,.login-box,.f-social{ perspective:1250px; } /* ============================================================ 2. CARDS — real thickness preserve-3d + a plate sitting behind the face at translateZ(-18px) means that when the card tilts you actually see its gold edge, the way you'd see the side of a physical tile. ============================================================ */ .value-card,.svc-card,.test-card,.review-card,.ss-box, .review-manage-card,.gallery-upload-box,.c-box{ position:relative; transform-style:preserve-3d; box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 var(--edge-lo), 0 2px 0 rgba(217,164,65,0.08), 0 22px 44px -18px rgba(0,0,0,0.85); } .value-card::before,.svc-card::before,.test-card::before, .review-card::before,.ss-box::before{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(165deg, var(--plate), rgba(0,0,0,0.72) 70%); transform:translateZ(-18px) scale(.982); pointer-events:none; } .value-card:hover,.svc-card:hover,.test-card:hover,.review-card:hover,.ss-box:hover{ border-color:rgba(217,164,65,0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 var(--edge-lo), 0 4px 0 rgba(217,164,65,0.14), 0 40px 70px -24px rgba(0,0,0,0.9), 0 0 60px -14px rgba(217,164,65,0.28); } /* --tscale gives the whole card a small push toward the viewer on hover; the tilt transform above already reads the variable. */ .value-card:hover,.svc-card:hover,.review-card:hover,.test-card:hover, .gallery-item:hover,.tease-item:hover,.ss-box:hover{ --tscale:1.035; } /* Card contents lift off the surface at different depths on hover. Staggered Z is the whole trick: the eye reads the gap between the number, the heading and the paragraph as genuine 3D space. */ .value-card > *,.svc-card > *,.test-card > *,.review-card > *,.ss-box > *{ transition:transform .5s var(--z-ease), text-shadow .5s var(--ease); transform:translateZ(calc(var(--zf,0) * 1px)); } .value-card:hover,.svc-card:hover,.test-card:hover,.review-card:hover,.ss-box:hover{ --zf:1; } .value-card:hover .vc-num,.svc-card:hover .svc-num{ transform:translateZ(58px); text-shadow:0 10px 22px rgba(0,0,0,.8); } .value-card:hover h3,.svc-card:hover h3{ transform:translateZ(36px); text-shadow:0 8px 20px rgba(0,0,0,.75); } .value-card:hover p,.svc-card:hover p{ transform:translateZ(16px); } .test-card:hover .tc-stars,.review-card:hover .rc-stars{ transform:translateZ(46px); text-shadow:0 6px 16px rgba(217,164,65,.45); } .test-card:hover .tc-name,.review-card:hover .rc-bottom{ transform:translateZ(26px); } .ss-box:hover .ss-num{ transform:translateZ(40px); } /* ============================================================ 3. MEDIA TILES — glass pane that catches the light No preserve-3d here on purpose: these clip their contents with overflow:hidden, and a 3D context inside a clipped, rounded box is exactly the combination that WebKit renders badly. ============================================================ */ .gallery-item,.tease-item{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 20px 40px -18px rgba(0,0,0,0.9); } .gallery-item:hover,.tease-item:hover{ box-shadow: inset 0 0 0 1px rgba(217,164,65,0.35), 0 40px 66px -22px rgba(0,0,0,0.95), 0 0 54px -16px rgba(217,164,65,0.3); } /* ============================================================ 4. BUTTONS — extruded, and they actually compress when pressed The stacked "0 Npx 0" shadows are the button's side wall. On :active the wall shrinks and the face drops into it, so a click reads as a physical press instead of a colour change. ============================================================ */ .btn-gold,.nav-btn-gold,.ar-submit,.login-box button{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 7px 0 -1px #6b4d18, 0 12px 24px -6px rgba(0,0,0,0.7), 0 0 30px rgba(217,164,65,0.32); } .btn-gold:hover,.nav-btn-gold:hover,.ar-submit:hover,.login-box button:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 11px 0 -1px #6b4d18, 0 22px 38px -8px rgba(0,0,0,0.75), 0 0 52px rgba(217,164,65,0.5); } .btn-gold:active,.nav-btn-gold:active,.ar-submit:active,.login-box button:active{ box-shadow: inset 0 2px 5px rgba(0,0,0,0.35), 0 2px 0 -1px #6b4d18, 0 4px 10px -4px rgba(0,0,0,0.7); } .btn-wa{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 7px 0 -1px #14803a, 0 12px 24px -6px rgba(0,0,0,0.7), 0 0 28px rgba(37,211,102,0.3); } .btn-wa:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 11px 0 -1px #14803a, 0 22px 38px -8px rgba(0,0,0,0.75), 0 0 48px rgba(37,211,102,0.45); } .btn-wa:active{ box-shadow: inset 0 2px 5px rgba(0,0,0,0.35), 0 2px 0 -1px #14803a, 0 4px 10px -4px rgba(0,0,0,0.7); } .btn-ghost{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 0 -1px rgba(217,164,65,0.16), 0 14px 26px -10px rgba(0,0,0,0.8); } .btn-ghost:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 0 -1px rgba(217,164,65,0.22), 0 24px 40px -12px rgba(0,0,0,0.85); } .btn-ghost:active{ box-shadow:inset 0 2px 5px rgba(0,0,0,0.4), 0 2px 0 -1px rgba(217,164,65,0.16); } /* Buttons and chips tilt toward the cursor too — a small angle, so they feel magnetic rather than wobbly. The extra .tilt3d in the selector wins over the plain .tilt3d rule above without !important fights, and folds the hover lift into the same transform. */ .btn.tilt3d,.gf-btn.tilt3d,.genre-tag.tilt3d,.dial-chip.tilt3d, .ar-submit.tilt3d,.login-box button.tilt3d,.nav-phone a.tilt3d,.f-social a.tilt3d{ transform: perspective(700px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important; transition:transform .3s var(--z-ease), box-shadow .3s var(--z-ease), background .25s var(--ease), border-color .25s var(--ease); } .btn.tilt3d:hover,.gf-btn.tilt3d:hover,.genre-tag.tilt3d:hover, .dial-chip.tilt3d:hover,.ar-submit.tilt3d:hover,.login-box button.tilt3d:hover, .nav-phone a.tilt3d:hover,.f-social a.tilt3d:hover{ --lift:-4px; } .btn.tilt3d:active,.ar-submit.tilt3d:active,.login-box button.tilt3d:active{ --lift:4px; } /* WhatsApp bubble — a sphere, not a circle: the inset highlight is the light on top, the inset dark is the terminator at the bottom. */ .wa-float{ background: radial-gradient(120% 120% at 32% 24%, #5cf29a 0%, #25D366 42%, #128c3e 100%); box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), inset 0 -5px 10px rgba(0,0,0,0.35), 0 10px 0 -2px #0d6b2f, 0 20px 34px -8px rgba(0,0,0,0.75), 0 0 34px rgba(37,211,102,0.4); } .wa-float:hover{ transform:translateY(-4px) scale(1.07); box-shadow: inset 0 3px 7px rgba(255,255,255,0.6), inset 0 -5px 12px rgba(0,0,0,0.35), 0 14px 0 -2px #0d6b2f, 0 30px 46px -10px rgba(0,0,0,0.8), 0 0 52px rgba(37,211,102,0.55); } .wa-float:active{ transform:translateY(3px) scale(1.01); box-shadow:inset 0 3px 10px rgba(0,0,0,0.45), 0 3px 0 -2px #0d6b2f; } /* Chips / pills / filters get the same side wall as the buttons. */ .genre-tag,.dial-chip,.gf-btn,.nav-phone a,.f-social a{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 0 -1px rgba(217,164,65,0.14), 0 10px 18px -8px rgba(0,0,0,0.8); } .genre-tag:hover,.dial-chip:hover,.gf-btn:hover,.nav-phone a:hover,.f-social a:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 0 -1px rgba(217,164,65,0.3), 0 18px 28px -10px rgba(0,0,0,0.85), 0 0 30px -8px rgba(217,164,65,0.35); } .gf-btn.active{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 6px rgba(0,0,0,0.4), 0 5px 0 -1px rgba(217,164,65,0.4), 0 16px 26px -10px rgba(0,0,0,0.85), 0 0 26px rgba(217,164,65,0.22); } /* ============================================================ 5. TYPOGRAPHY — extruded display faces A stack of 1px-offset shadows in the dark background colour reads as a bevelled edge on the letterforms. Kept to the Suez One display headings only; body copy stays perfectly flat and legible. ============================================================ */ .sec-title,.h-title,.c-head,.reviews-hero-title,.add-review-title, .staff-title,.ar-success-text,.stars-score{ text-shadow: 0 1px 0 rgba(255,255,255,0.14), 0 2px 0 rgba(0,0,0,0.55), 0 3px 0 rgba(0,0,0,0.45), 0 4px 0 rgba(0,0,0,0.36), 0 5px 0 rgba(0,0,0,0.28), 0 6px 1px rgba(0,0,0,0.22), 0 12px 26px rgba(0,0,0,0.6); } .sec-title span,.reviews-hero-title span,.add-review-title span,.staff-title span, .c-head span,.c-num,.ss-num{ text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 2px 0 rgba(122,88,26,0.75), 0 3px 0 rgba(90,64,18,0.6), 0 4px 0 rgba(60,42,12,0.5), 0 6px 14px rgba(0,0,0,0.7), 0 0 34px rgba(217,164,65,0.4); } nav .logo,.f-logo{ text-shadow: 0 1px 0 rgba(255,255,255,0.18), 0 2px 0 rgba(0,0,0,0.6), 0 3px 0 rgba(0,0,0,0.45), 0 6px 14px rgba(0,0,0,0.7); } .vc-num,.svc-num{ text-shadow:0 2px 0 rgba(0,0,0,.6), 0 5px 12px rgba(0,0,0,.55); } /* Section labels get a small floating tick that sits above the page. */ .sec-label::before{ box-shadow:0 0 10px 1px rgba(217,164,65,0.75); } /* ============================================================ 6. THE STAGE — a perspective floor under the hero and the contact section. This is the single biggest "the page has depth" cue: a horizon line the disco ball hangs above. ============================================================ */ .hero::after,.contact-section::after{ content:'';position:absolute;z-index:1;pointer-events:none; left:-30%;right:-30%;bottom:0;height:48%; transform:perspective(300px) rotateX(60deg); transform-origin:bottom center; background-image: repeating-linear-gradient(to right, rgba(217,164,65,0.22) 0 1px, transparent 1px 68px), repeating-linear-gradient(to bottom, rgba(217,164,65,0.22) 0 1px, transparent 1px 68px); -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.35) 40%, transparent 78%); mask-image:linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.35) 40%, transparent 78%); animation:floor-run 5.5s linear infinite; } .contact-section::after{ height:60%; opacity:.7; } /* Only the horizontal lines scroll — that's what reads as the floor travelling toward the viewer rather than the whole grid sliding. */ @keyframes floor-run{ from{ background-position:0 0, 0 0; } to { background-position:0 0, 0 68px; } } /* A soft horizon glow where the floor meets the black. */ .hero::before,.contact-section::before{ content:'';position:absolute;z-index:1;pointer-events:none; left:0;right:0;bottom:0;height:52%; background:radial-gradient(60% 100% at 50% 100%, rgba(217,164,65,0.14), transparent 70%); } /* Hero logo mark and disco ball — driven by scroll position only. Most of this site's traffic is on a phone, where there is no cursor to follow, so the depth has to come from the one gesture a phone actually has. fx3d.js writes these from scrollY: --hy / --by descent (slower than the page, so it reads as parallax) --hz / --bs retreat into the scene No transform transition here on purpose: these are updated every frame, and a transition would make them trail behind the finger. */ .hero-logo-mark--lg{ transform: translate(-50%,-50%) perspective(900px) translate3d(0, var(--hy, 0px), var(--hz, 0px)); filter: drop-shadow(0 18px 34px rgba(0,0,0,0.75)) drop-shadow(0 0 42px rgba(217,164,65,0.35)); } /* The ball sinks toward the horizon, and because the floor grid sits on a higher layer than the canvas it goes down *behind* the floor rather than sliding off the edge — a setting sun, not a departing sticker. */ .hero-canvas-wrap{ transform:translate3d(0, var(--by, 0px), 0) scale(var(--bs, 1)); transform-origin:50% 40%; } /* The ball hangs from a hairline cord drawn all the way up to the top of the canvas. Fading the top of the layer lets that cord dissolve into the dark instead of reading as a wire pinned to the screen edge — and it also hides the cord's cut end once the layer starts sinking. The stop is at 13%: the ball's own top edge never sits above 16% of the hero (it is drawn at 40% height with a radius of 24% of the short side), so the ball itself is never touched. */ .hero-canvas-wrap,.contact-canvas{ -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 7%, #000 13%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 7%, #000 13%); } /* ============================================================ 7. NAV — a bar that sits above the page, not printed on it ============================================================ */ nav{ box-shadow:0 10px 30px -18px rgba(0,0,0,0.9); border-bottom:1px solid transparent; transition:box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); } nav.nav-scrolled{ border-bottom-color:rgba(217,164,65,0.18); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), 0 18px 40px -20px rgba(0,0,0,1), 0 1px 0 rgba(217,164,65,0.1); } .nav-links{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 26px 50px -18px rgba(0,0,0,0.95); } .nav-hamburger{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 0 -1px rgba(217,164,65,0.16), 0 10px 18px -8px rgba(0,0,0,0.8); transition:transform .25s var(--z-ease), box-shadow .25s var(--z-ease); } .nav-hamburger:active{ transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5); } /* ============================================================ 8. ENTRANCES — elements arrive from behind the screen Replaces the flat translateY reveal with a real Z + rotateX approach. Variables so the tilt engine can compose with it. ============================================================ */ .scroll-reveal{ --revY:30px; --revZ:-140px; --revRX:12deg; opacity:0;filter:blur(8px); transform:perspective(1200px) translate3d(0, var(--revY), var(--revZ)) rotateX(var(--revRX)); transition:opacity 1s var(--z-ease), transform 1s var(--z-ease), filter 1s var(--z-ease); } .scroll-reveal.visible{ --revY:0px; --revZ:0px; --revRX:0deg; opacity:1; filter:blur(0); } /* A card is both a reveal target and a tilt surface, and the two want very different timings: the entrance should be slow and cinematic, the tilt has to track the cursor. Transform gets the fast timing (the entrance still reads as slow because opacity and blur carry it), while box-shadow and border-color are restored — the plain .scroll-reveal transition above would otherwise drop them and make the hover glow snap on instantly. */ .tilt3d.scroll-reveal,.tilt3d.scroll-reveal.visible{ transition: transform .3s var(--z-ease), box-shadow .45s var(--z-ease), border-color .35s var(--ease), opacity 1s var(--z-ease), filter 1s var(--z-ease); } /* Cards stagger in, so a row of three arrives as a sequence in depth instead of one flat block. */ .value-grid .scroll-reveal.tilt3d:nth-child(2),.svc-grid .scroll-reveal.tilt3d:nth-child(2){ transition-delay:.1s; } .value-grid .scroll-reveal.tilt3d:nth-child(3),.svc-grid .scroll-reveal.tilt3d:nth-child(3){ transition-delay:.2s; } /* ...but the entrance delay must not survive into the hover state, or the third card would answer the cursor a fifth of a second late. */ .tilt3d:hover{ transition-delay:0s !important; } /* ============================================================ 9. FORMS & PANELS — inset, so fields read as carved into the surface while the buttons sit on top of it. ============================================================ */ .c-form input,.c-form textarea, .ar-field input[type="text"],.ar-field input[type="password"], .ar-field select,.ar-field textarea,.login-box input{ box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.05); transition:box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .c-form input:focus,.c-form textarea:focus, .ar-field input:focus,.ar-field select:focus,.ar-field textarea:focus,.login-box input:focus{ box-shadow: inset 0 2px 8px rgba(0,0,0,0.55), 0 0 0 3px rgba(217,164,65,0.14), 0 0 26px -6px rgba(217,164,65,0.4); } .c-box{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.5), 0 30px 60px -24px rgba(0,0,0,0.9), 0 0 60px rgba(217,164,65,0.1); } .contact-modal-box{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 40px 90px -20px rgba(0,0,0,0.9), 0 0 70px -20px rgba(217,164,65,0.3); } .star-picker label{ transition:transform .2s var(--z-ease), color .15s var(--ease), text-shadow .2s var(--ease); display:inline-block; } .star-picker label:hover{ transform:translateY(-5px) scale(1.22); text-shadow:0 8px 16px rgba(217,164,65,.5); } .lightbox img,.lightbox video{ box-shadow:0 50px 100px -30px rgba(0,0,0,1), 0 0 80px -30px rgba(217,164,65,0.35); } /* ============================================================ 10. ACCESSIBILITY OVERRIDES Everything above collapses back to the original flat design under any of the site's existing accessibility modes. ============================================================ */ /* Frozen 3D looks broken, so reduce-motion zeroes the variables rather than leaving elements stuck at whatever angle they had. */ body.reduce-motion .tilt3d, body.a11y-simplified .tilt3d{ --rx:0deg !important; --ry:0deg !important; --srx:0deg !important; --lift:0px !important; --tscale:1 !important; --zf:0 !important; } body.reduce-motion .hero-canvas-wrap, body.a11y-simplified .hero-canvas-wrap{ --by:0px !important; --bs:1 !important; } body.reduce-motion .hero::after, body.reduce-motion .contact-section::after, body.reduce-motion .hero::before, body.reduce-motion .contact-section::before, body.a11y-simplified .hero::after, body.a11y-simplified .contact-section::after, body.a11y-simplified .hero::before,body.a11y-simplified .contact-section::before{ display:none !important; } body.reduce-motion .tilt3d::after, body.a11y-simplified .tilt3d::after{ display:none !important; } body.reduce-motion .hero-logo-mark--lg{ transform:translate(-50%,-50%) !important; } body.reduce-motion .value-card::before,body.reduce-motion .svc-card::before, body.reduce-motion .test-card::before,body.reduce-motion .review-card::before, body.reduce-motion .ss-box::before, body.a11y-simplified .value-card::before,body.a11y-simplified .svc-card::before, body.a11y-simplified .test-card::before,body.a11y-simplified .review-card::before, body.a11y-simplified .ss-box::before{ display:none !important; } /* Extruded letterforms trade a little crispness for depth — not a trade high-contrast mode should ever make. */ body.high-contrast .sec-title,body.high-contrast .h-title,body.high-contrast .c-head, body.high-contrast .reviews-hero-title,body.high-contrast .add-review-title, body.high-contrast .staff-title,body.high-contrast .sec-title span, body.high-contrast .c-num,body.high-contrast .ss-num,body.high-contrast nav .logo, body.high-contrast .f-logo,body.high-contrast .stars-score, body.a11y-readable-font .sec-title,body.a11y-readable-font .h-title, body.a11y-readable-font .c-head,body.a11y-readable-font .sec-title span{ text-shadow:none !important; } body.high-contrast .tilt3d::after{ display:none !important; } /* The simplified page is deliberately plain — no 3D at all. */ body.simple-page .tilt3d{ transform:none !important; } /* ============================================================ 11. RESPONSIVE / INPUT-AWARE Touch devices never get a hover, so the tilt engine stays off there (fx3d.js also gates on pointerType). The floor grid gets shallower on small screens so it doesn't eat the hero. ============================================================ */ /* Touch: kill everything cursor-driven, keep everything scroll-driven. --srx is deliberately NOT reset here — the scroll tilt is the whole point of the effect on a phone. */ @media (hover:none){ .tilt3d::after{ display:none; } .tilt3d{ --rx:0deg; --ry:0deg; --lift:0px; } } @media (max-width:860px){ .hero::after{ height:38%; } .contact-section::after{ height:46%; } .value-card:hover .vc-num,.svc-card:hover .svc-num{ transform:none; } .value-card:hover h3,.svc-card:hover h3{ transform:none; } }