/* ============================================================ KQ Solicitors - Premium 3D Card System v9.9.0 ------------------------------------------------------------ Design principles (lessons from v9.8.0): • Perspective is scoped to grids, NEVER on . The body already hosts a fixed grain texture and ambient glow; adding perspective there breaks fixed positioning. • One injected child per card (), not three. Less DOM disruption, lower risk of layout clash. • The halo is always position:absolute / inset:0 / pointer-events:none. It overlays, never participates in flow. • No body-perspective, no custom cursor, no magnetic buttons, no @property conic borders. Each of those caused real bugs. • Specificity bumped with `html .sr` so the override beats any LiteSpeed-rebundled stylesheet ordering. ============================================================ */ :root { --kq-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --kq-ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ----------- Reduced motion: shut everything off ----------- */ @media (prefers-reduced-motion: reduce) { html .sr, html .sr.v { opacity: 1 !important; transform: none !important; filter: none !important; } .kq-halo, .kq-svc-floater, .kq-orb { animation: none !important; transition: none !important; } } /* ============================================================ 1. SCROLL-IN FLIP ANIMATION (v9.9.1) Cards arrive rotated on Y-axis, blurred, off-position, then FLIP into place. In grids, odd cards flip from the left, even cards flip from the right - a cascading "deck of cards" effect. `html .sr` outranks any rebundled cascade order from LiteSpeed. ============================================================ */ html .sr { opacity: 0; transform: perspective(1200px) rotateY(-32deg) rotateX(6deg) translate3d(-30px, 36px, -90px) scale(0.93); filter: blur(5px); transition: opacity 0.9s var(--kq-ease-out), transform 1.2s var(--kq-ease-out), filter 0.7s var(--kq-ease-out); transform-origin: center center; will-change: transform, opacity, filter; backface-visibility: hidden; } html .sr.v { opacity: 1; transform: perspective(1200px) rotateY(0) rotateX(0) translate3d(0, 0, 0) scale(1); filter: blur(0); } /* Alternating flip direction inside grids - odd from left, even from right */ .kq-stagger > .sr:nth-child(even) { transform: perspective(1200px) rotateY(32deg) rotateX(6deg) translate3d(30px, 36px, -90px) scale(0.93); } .kq-stagger > .sr:nth-child(even).v { transform: perspective(1200px) rotateY(0) rotateX(0) translate3d(0, 0, 0) scale(1); } /* Mobile: keep the flip but lighter - phones are close to the face */ @media (max-width: 720px) { html .sr { transform: perspective(800px) rotateY(-18deg) translate3d(-12px, 24px, -30px) scale(0.96); filter: blur(3px); } .kq-stagger > .sr:nth-child(even) { transform: perspective(800px) rotateY(18deg) translate3d(12px, 24px, -30px) scale(0.96); } } /* Stagger applied by JS to qualifying grids */ .kq-stagger > .sr:nth-child(1) { transition-delay: 0s; } .kq-stagger > .sr:nth-child(2) { transition-delay: 0.08s; } .kq-stagger > .sr:nth-child(3) { transition-delay: 0.16s; } .kq-stagger > .sr:nth-child(4) { transition-delay: 0.24s; } .kq-stagger > .sr:nth-child(5) { transition-delay: 0.32s; } .kq-stagger > .sr:nth-child(6) { transition-delay: 0.4s; } .kq-stagger > .sr:nth-child(7) { transition-delay: 0.48s; } .kq-stagger > .sr:nth-child(8) { transition-delay: 0.56s; } .kq-stagger > .sr:nth-child(9) { transition-delay: 0.64s; } /* ============================================================ 2. GRID-LEVEL PERSPECTIVE - scoped, never on body ============================================================ */ .kq-journey-grid, .kq-service-groups, .kq-video-grid, .kq-editorial-grid, .kq-svc-grid, .howstart-grid { perspective: 1400px; perspective-origin: 50% 30%; } /* ============================================================ 3. CARD BASE - 3D-ready, GPU-friendly These classes already have backgrounds, borders, and shadows defined in style.css and front-page.php. We only add the transform-related properties so we don't fight the base look. ============================================================ */ .kq-journey-card, .howstart-card, .kq-service-group, .kq-video-card, .kq-editorial-card, .kq-fee-table-card, .faq-card, .kq-3d-card { position: relative; transform-style: preserve-3d; transition: transform 0.45s var(--kq-ease), box-shadow 0.45s ease, border-color 0.4s ease; --tx: 0deg; --ty: 0deg; --tz: 0px; --gx: 50%; --gy: 50%; } /* JS sets .kq-tilt-on during mousemove; the transform reads the CSS variables. This means JS never touches inline transform directly, so it can't clobber other transitions. */ .kq-tilt-on { transform: rotateX(var(--tx)) rotateY(var(--ty)) translateZ(var(--tz)); } /* Hover lift - works WITHOUT JS too, via plain :hover. Cards already have their own :hover transforms in front-page.php (e.g. translateY(-7px)). We layer the new shadow on top via box-shadow only, NOT a competing transform. */ .kq-journey-card:hover, .howstart-card:hover, .kq-service-group:hover, .kq-video-card:hover, .kq-editorial-card:hover, .faq-card:hover, .kq-3d-card:hover { box-shadow: 0 26px 64px -12px rgba(26, 28, 48, 0.18), 0 0 0 1px rgba(164, 137, 69, 0.18); } /* ============================================================ 4. THE HALO - single injected per card Contains: cursor-following spotlight glow. Lives behind the card's content layer but on top of the card background. Zero impact on existing pseudo-elements because the card itself has its ::before / ::after, while the halo is a real DOM child. ============================================================ */ .kq-halo { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity 0.4s ease; z-index: 1; } .kq-halo::before { content: ''; position: absolute; inset: -1px; background: radial-gradient( 340px circle at var(--gx) var(--gy), rgba(164, 137, 69, 0.25) 0%, rgba(164, 137, 69, 0.08) 25%, transparent 55% ); } .kq-journey-card:hover > .kq-halo, .howstart-card:hover > .kq-halo, .kq-service-group:hover > .kq-halo, .kq-video-card:hover > .kq-halo, .kq-editorial-card:hover > .kq-halo, .faq-card:hover > .kq-halo, .kq-3d-card:hover > .kq-halo, .kq-tilt-on > .kq-halo { opacity: 1; } /* Dark-card variant - softer glow on dark backgrounds */ .kq-3d-card-feat .kq-halo::before, .hcard ~ .kq-halo::before { background: radial-gradient( 340px circle at var(--gx) var(--gy), rgba(255, 215, 140, 0.22) 0%, rgba(255, 215, 140, 0.06) 25%, transparent 55% ); } /* ============================================================ 5. SERVICE LINK 3D - list items in .kq-service-group lift ============================================================ */ .kq-service-links a { transition: transform 0.3s var(--kq-ease), background 0.3s ease, color 0.3s ease, box-shadow 0.35s ease; } .kq-service-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(164, 137, 69, 0.4); } /* ============================================================ 6. NEW SERVICES SHOWCASE PAGE STYLES (page-services.php) ============================================================ */ /* Hero block - dark, dimensional */ .kq-svc-hero { position: relative; padding: 7rem 1.5rem 4rem; text-align: center; overflow: hidden; background: linear-gradient(180deg, #1A1C30 0%, #27273A 50%, #1A1C30 100%); color: #FAF6EE; } .kq-svc-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,215,140,0.7), transparent), radial-gradient(2px 2px at 60% 70%, rgba(255,215,140,0.5), transparent), radial-gradient(1px 1px at 50% 20%, rgba(255,215,140,0.4), transparent), radial-gradient(1px 1px at 80% 50%, rgba(255,215,140,0.6), transparent), radial-gradient(2px 2px at 30% 80%, rgba(255,215,140,0.4), transparent); background-size: 200% 200%; animation: kq-stars 30s linear infinite; opacity: 0.5; pointer-events: none; } @keyframes kq-stars { to { background-position: 200% 200%; } } .kq-svc-hero-in { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } .kq-svc-eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: #BFA45C; margin-bottom: 1.2rem; padding: 0.5rem 1.2rem; border: 1px solid rgba(164,137,69,0.4); border-radius: 50px; background: rgba(164,137,69,0.08); font-weight: 600; } .kq-svc-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1.2rem; color: #FAF6EE; } .kq-svc-hero h1 em { font-style: italic; background: linear-gradient(135deg, #BFA45C 0%, #FFD78C 50%, #BFA45C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .kq-svc-hero p { font-size: clamp(0.95rem, 1.4vw, 1.1rem); color: rgba(250,246,238,0.7); max-width: 600px; margin: 0 auto 2rem; line-height: 1.65; font-weight: 400; } /* Floating 3D hero icons */ .kq-svc-hero-icons { display: flex; justify-content: center; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; perspective: 1000px; } .kq-svc-floater { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, rgba(164,137,69,0.25), rgba(164,137,69,0.05)); border: 1px solid rgba(164,137,69,0.4); display: flex; align-items: center; justify-content: center; color: #BFA45C; box-shadow: 0 20px 50px -10px rgba(164,137,69,0.35), inset 0 1px 0 rgba(255,255,255,0.15); transform-style: preserve-3d; animation: kq-svc-float 6s ease-in-out infinite; } .kq-svc-floater:nth-child(2) { animation-delay: -1.5s; } .kq-svc-floater:nth-child(3) { animation-delay: -3s; } .kq-svc-floater:nth-child(4) { animation-delay: -4.5s; } .kq-svc-floater:nth-child(5) { animation-delay: -2.2s; } @keyframes kq-svc-float { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-10px) rotateY(15deg); } } /* Section + category head */ .kq-svc-section { padding: 4.5rem 1.5rem; position: relative; } .kq-svc-section-in { max-width: 1200px; margin: 0 auto; } .kq-svc-cat-head { text-align: center; margin-bottom: 3rem; } .kq-svc-cat-head .sc-label { display: inline-block; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #A48945; font-weight: 700; margin-bottom: 0.6rem; } .kq-svc-cat-head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: #2C2A34; margin: 0 0 0.5rem; } .kq-svc-cat-head h2 em { font-style: italic; color: #A48945; } .kq-svc-cat-head p { color: #55525F; font-size: 0.95rem; max-width: 600px; margin: 0 auto; line-height: 1.65; } /* The new compact 3D service card */ .kq-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; } .kq-3d-card { background: #fff; border: 1px solid rgba(164,137,69,0.15); border-radius: 20px; padding: 1.8rem 1.5rem 1.5rem; text-decoration: none; color: #2C2A34; display: block; overflow: hidden; box-shadow: 0 1px 3px rgba(44,42,52,0.04), 0 10px 28px rgba(44,42,52,0.06); min-height: 230px; } .kq-3d-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgba(164,137,69,0.15) 0%, rgba(164,137,69,0.03) 100%); border: 1px solid rgba(164,137,69,0.2); color: #A48945; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; box-shadow: 0 8px 20px -6px rgba(164,137,69,0.3); position: relative; z-index: 2; transition: transform 0.4s var(--kq-ease); } .kq-3d-card:hover .kq-3d-icon { transform: rotate(-6deg) scale(1.06); } .kq-3d-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; color: #2C2A34; margin: 0 0 0.5rem; line-height: 1.25; position: relative; z-index: 2; } .kq-3d-desc { font-size: 0.85rem; color: #55525F; line-height: 1.6; margin: 0 0 1.1rem; position: relative; z-index: 2; font-weight: 400; } .kq-3d-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 0.9rem; border-top: 1px dashed rgba(164,137,69,0.22); position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 2; } .kq-3d-fee { font-size: 0.72rem; font-weight: 700; color: #A48945; letter-spacing: 0.02em; } .kq-3d-arrow { width: 28px; height: 28px; border-radius: 50%; background: #A48945; color: #fff; display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--kq-ease), background 0.3s ease; } .kq-3d-card:hover .kq-3d-arrow { transform: translateX(3px); background: #8B7339; } /* Featured wide variant - dark, premium */ .kq-3d-card.kq-3d-card-feat { grid-column: span 2; background: linear-gradient(135deg, #1A1C30 0%, #27273A 50%, #1A1C30 100%); color: #FAF6EE; border: 1px solid rgba(164,137,69,0.35); } .kq-3d-card.kq-3d-card-feat .kq-3d-title { color: #FAF6EE; } .kq-3d-card.kq-3d-card-feat .kq-3d-desc { color: rgba(250,246,238,0.7); } .kq-3d-card.kq-3d-card-feat .kq-3d-icon { background: linear-gradient(135deg, rgba(164,137,69,0.3), rgba(164,137,69,0.1)); border-color: rgba(164,137,69,0.5); color: #BFA45C; } @media (max-width: 720px) { .kq-3d-card.kq-3d-card-feat { grid-column: span 1; } } /* CTA strip */ .kq-svc-cta-strip { margin: 4rem auto 0; max-width: 1100px; padding: 2.4rem 2rem; background: linear-gradient(135deg, #1A1C30 0%, #27273A 100%); border-radius: 26px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; border: 1px solid rgba(164,137,69,0.3); } .kq-svc-cta-strip::before { content: ''; position: absolute; top: -50%; right: -8%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(164,137,69,0.22), transparent 65%); border-radius: 50%; pointer-events: none; } .kq-svc-cta-copy { position: relative; z-index: 2; flex: 1 1 320px; } .kq-svc-cta-copy h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.55rem; font-weight: 600; color: #FAF6EE; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .kq-svc-cta-copy p { color: rgba(250,246,238,0.7); font-size: 0.9rem; margin: 0; font-weight: 400; } .kq-svc-cta-actions { position: relative; z-index: 2; display: flex; gap: 0.7rem; flex-wrap: wrap; } .kq-svc-cta-actions a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.85rem 1.4rem; border-radius: 12px; font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: transform 0.3s var(--kq-ease), box-shadow 0.3s ease, background 0.3s ease; } .kq-svc-cta-actions .btn-primary { background: linear-gradient(135deg, #BFA45C, #A48945, #8B7339); color: #fff; box-shadow: 0 8px 22px rgba(164,137,69,0.45); } .kq-svc-cta-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(164,137,69,0.6); } .kq-svc-cta-actions .btn-ghost { background: rgba(250,246,238,0.08); color: #FAF6EE; border: 1px solid rgba(250,246,238,0.2); } .kq-svc-cta-actions .btn-ghost:hover { background: rgba(250,246,238,0.14); border-color: rgba(250,246,238,0.35); } /* ============================================================ 7. PRINT - strip all 3D effects ============================================================ */ @media print { html .sr, html .sr.v { opacity: 1 !important; transform: none !important; filter: none !important; } .kq-halo, .kq-svc-floater, .kq-svc-hero::before { display: none !important; } * { animation: none !important; transition: none !important; } }