/* ============================================================ 3-D EFFECTS LAYER — optional, easy to remove. To revert: delete the tag from each page (or just delete this file). Everything here is additive — it overrides nothing structural. ============================================================ */ :root { --shadow-3d: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -2px 0 rgba(10,18,48,0.04) inset, 0 8px 24px rgba(10,18,48,0.08), 0 24px 60px rgba(10,18,48,0.10); --shadow-3d-hover: 0 1px 0 rgba(255,255,255,0.95) inset, 0 -2px 0 rgba(10,18,48,0.06) inset, 0 16px 36px rgba(43,108,255,0.18), 0 36px 80px rgba(10,18,48,0.18); } /* Page-wide perspective so children can rotate in 3D */ body { perspective: 1600px; perspective-origin: 50% 30%; } /* ----- HERO depth ----- */ .hero { transform-style: preserve-3d; } .hero-content { transform: translateZ(40px); filter: drop-shadow(0 30px 50px rgba(10,18,48,0.08)); } .grid-bg { transform: translateZ(-80px) scale(1.08); } /* Logo mark — chunky 3D chip */ .logo-mark { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -2px 0 rgba(0,0,0,0.18) inset, 0 6px 14px rgba(43,108,255,0.45), 0 12px 24px rgba(43,108,255,0.25); transform: translateZ(0); } /* Badges lift slightly off the page */ .badge { box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 -1px 0 rgba(10,18,48,0.05) inset, 0 4px 10px rgba(10,18,48,0.06), 0 12px 28px rgba(10,18,48,0.06); } /* ----- BUTTONS: pressable 3D ----- */ .btn { transform-style: preserve-3d; will-change: transform; } .btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -3px 0 rgba(0,0,0,0.18) inset, 0 10px 24px rgba(43,108,255,0.45), 0 22px 44px rgba(43,108,255,0.25); } .btn-primary:hover { transform: translateY(-3px) translateZ(10px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -3px 0 rgba(0,0,0,0.2) inset, 0 16px 32px rgba(43,108,255,0.55), 0 32px 60px rgba(43,108,255,0.3); } .btn-primary:active { transform: translateY(0) translateZ(0); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 4px 10px rgba(43,108,255,0.35); } .btn-ghost { box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 -2px 0 rgba(10,18,48,0.06) inset, 0 8px 18px rgba(10,18,48,0.06), 0 18px 40px rgba(10,18,48,0.05); } .btn-ghost:hover { transform: translateY(-3px) translateZ(8px); } .nav-cta { box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -2px 0 rgba(0,0,0,0.25) inset, 0 6px 16px rgba(10,18,48,0.25); } /* ----- FEATURE CARDS: tilt on hover ----- */ .feature { transform-style: preserve-3d; box-shadow: var(--shadow-3d); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .feature:hover { transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) translateZ(20px); box-shadow: var(--shadow-3d-hover); } .feature-icon { transform: translateZ(30px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -3px 0 rgba(0,0,0,0.2) inset, 0 10px 22px rgba(43,108,255,0.45), 0 20px 40px rgba(43,108,255,0.25); } /* ----- STEP CARDS ----- */ .step { transform-style: preserve-3d; box-shadow: var(--shadow-3d); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; } .step:hover { transform: translateX(8px) translateY(-4px) rotateY(-3deg) translateZ(12px); box-shadow: var(--shadow-3d-hover); } .step-num { transform: translateZ(20px); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -3px 0 rgba(0,0,0,0.3) inset, 0 8px 18px rgba(10,18,48,0.3); } /* ----- CALC CARDS ----- */ .calc-card { transform-style: preserve-3d; box-shadow: var(--shadow-3d); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .calc-card:hover { transform: translateY(-10px) rotateX(6deg) translateZ(20px); box-shadow: var(--shadow-3d-hover); } .calc-card.featured { box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 -3px 0 rgba(0,0,0,0.3) inset, 0 20px 40px rgba(10,18,48,0.25), 0 40px 80px rgba(10,18,48,0.18); } .calc-card.featured:hover { transform: translateY(-14px) rotateX(6deg) translateZ(30px); } /* ----- TABLES ----- */ .table-wrap, .price-table-wrap, .form-wrap { box-shadow: var(--shadow-3d); transform: translateZ(0); } /* ----- FAQ ----- */ .faq { box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 -1px 0 rgba(10,18,48,0.04) inset, 0 6px 16px rgba(10,18,48,0.05), 0 14px 28px rgba(10,18,48,0.04); transition: transform .25s, box-shadow .25s; } .faq:hover { transform: translateY(-3px) translateZ(8px); box-shadow: var(--shadow-3d-hover); } .faq[open] { transform: translateY(-2px) translateZ(6px); } /* ----- FINAL CTA CARD ----- */ .final-cta-inner { box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 -4px 0 rgba(0,0,0,0.3) inset, 0 24px 50px rgba(10,18,48,0.25), 0 48px 100px rgba(10,18,48,0.3); transform: translateZ(0); transition: transform .4s; } .final-cta-inner:hover { transform: translateY(-6px) translateZ(10px); } /* ----- PRICING BANNER ----- */ .price-banner { box-shadow: 0 -4px 0 rgba(0,0,0,0.2) inset; } .price-banner .save { text-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(43,108,255,0.4); } /* ----- HEADLINE depth ----- */ h1 { text-shadow: 0 1px 0 rgba(255,255,255,0.6); } h1 .grad, .grad { filter: drop-shadow(0 6px 14px rgba(43,108,255,0.25)); } /* ----- NAV: floating bar ----- */ nav.site-nav { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(10,18,48,0.06); } /* ----- FORM FIELDS ----- */ .field input, .field select, .field textarea { box-shadow: 0 2px 0 rgba(10,18,48,0.04) inset, 0 -1px 0 rgba(255,255,255,0.8) inset; } .field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 2px 0 rgba(43,108,255,0.08) inset, 0 0 0 4px rgba(43,108,255,0.15), 0 8px 20px rgba(43,108,255,0.12); } /* Reduce motion — disable tilt for users who prefer it */ @media (prefers-reduced-motion: reduce) { .feature:hover, .step:hover, .calc-card:hover, .faq:hover, .btn:hover, .final-cta-inner:hover { transform: none; } }