/* ========================================================== CH NET GUARD — Service Card Personalities (Phase 10) ---------------------------------------------------------- Each service card gets a unique micro-animation on hover so the 4-up grid stops feeling like a template and starts feeling like 4 distinct products. - WEB (data-slug="web") : terminal cursor line under icon - MARKETING (data-slug="marketing") : megaphone shout-wave wiggle - DROPSHIP (data-slug="dropship") : "delivering" package slide-in - SECURITY (data-slug="security") : scanning line sweep over shield All effects are PURE CSS, gated on :hover (no touch firing). Reduced motion disables everything except the still endstate. ========================================================== */ /* ---------- Per-card overflow rules ---------- Web + dropship + marketing need pseudo-elements to render OUTSIDE the icon (text below, package to the right, shout arcs to the right). Security needs them INSIDE (the scan line should be clipped to the shield box). */ .card-icon { position: relative; } .service-card[data-slug="web"] .card-icon, .service-card[data-slug="marketing"] .card-icon, .service-card[data-slug="dropship"] .card-icon { overflow: visible; } .service-card[data-slug="security"] .card-icon { overflow: hidden; } /* ========================================================= 1. WEB CARD — terminal cursor line ---------------------------------------------------------- On hover, a small monospace line "> deploy.sh _" appears just below the icon. The icon needs visible overflow so the line and the caret can render outside its 56x56 box. ========================================================= */ .service-card[data-slug="web"] .card-icon::after { content: '> deploy.sh'; position: absolute; left: 0; top: calc(100% + 6px); font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; color: var(--accent-teal-2, #14D7C3); letter-spacing: 0.05em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 240ms ease-out, transform 240ms ease-out; } .service-card[data-slug="web"]:hover .card-icon::after { opacity: 0.9; transform: translateY(0); } /* Blinking caret AFTER "> deploy.sh" — separate pseudo so we can blink it independently of the text fade. */ .service-card[data-slug="web"] .card-icon::before { content: ''; position: absolute; left: 78px; /* sits at end of "> deploy.sh " */ top: calc(100% + 8px); width: 6px; height: 12px; background: var(--accent-teal-2, #14D7C3); opacity: 0; pointer-events: none; transition: opacity 240ms ease-out; } .service-card[data-slug="web"]:hover .card-icon::before { opacity: 0.9; animation: web-caret-blink 700ms steps(1) 240ms infinite; } @keyframes web-caret-blink { 50% { opacity: 0; } } /* ========================================================= 2. MARKETING CARD — megaphone shout waves ---------------------------------------------------------- Two arc-shaped waves emanate from the right side of the megaphone icon on hover. Implemented as ::before and ::after on the icon wrapper, masked into arc segments and animated with a translateX + opacity fade. ========================================================= */ .service-card[data-slug="marketing"] .card-icon::before, .service-card[data-slug="marketing"] .card-icon::after { content: ''; position: absolute; left: 100%; top: 50%; width: 22px; height: 22px; margin-top: -11px; margin-left: 4px; border: 2px solid var(--accent-teal-2, #14D7C3); border-radius: 50%; /* Show only the right-facing arc */ clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); opacity: 0; pointer-events: none; transform: scale(0.6); } .service-card[data-slug="marketing"]:hover .card-icon::before { animation: marketing-shout 1.1s ease-out infinite; } .service-card[data-slug="marketing"]:hover .card-icon::after { animation: marketing-shout 1.1s ease-out 0.55s infinite; } @keyframes marketing-shout { 0% { opacity: 0; transform: scale(0.5) translateX(0); } 20% { opacity: 0.85; transform: scale(0.85) translateX(2px); } 100% { opacity: 0; transform: scale(1.6) translateX(14px); } } /* Megaphone icon itself does a subtle wiggle on hover */ .service-card[data-slug="marketing"]:hover .card-icon i { animation: marketing-wiggle 0.7s ease-in-out; transform-origin: 30% 70%; } @keyframes marketing-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-4deg); } } /* ========================================================= 3. DROPSHIP CARD — package delivery ---------------------------------------------------------- A small "incoming package" square slides in from the right side of the icon on hover, settles, then on un-hover slides back out. ========================================================= */ .service-card[data-slug="dropship"] .card-icon::after { content: ''; position: absolute; left: calc(100% + 6px); top: 50%; width: 16px; height: 16px; margin-top: -8px; background: linear-gradient(135deg, #0FB5A4, #14D7C3); border-radius: 3px; /* fake "taped" cross via inset shadow */ box-shadow: inset 0 6px 0 -5px rgba(0, 0, 0, 0.35), inset 0 -6px 0 -5px rgba(0, 0, 0, 0.35), 0 0 12px rgba(20, 215, 195, 0.45); opacity: 0; pointer-events: none; transform: translateX(28px) rotate(-12deg); transition: opacity 280ms ease-out, transform 380ms cubic-bezier(0.18, 0.7, 0.3, 1.0); } .service-card[data-slug="dropship"]:hover .card-icon::after { opacity: 1; transform: translateX(0) rotate(0deg); } /* ========================================================= 4. SECURITY CARD — scanning beam over the shield ---------------------------------------------------------- A vertical bright line sweeps across the shield icon on hover, echoing the hero map's scan-beam. The line is a gradient overlay; it stays bounded inside the 56×56 icon square (the per-card overflow rule at the top of this file already gives security a clipping context). ========================================================= */ .service-card[data-slug="security"] .card-icon::before { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; left: -32px; background: linear-gradient( 90deg, transparent 0%, rgba(20, 215, 195, 0.55) 50%, transparent 100% ); pointer-events: none; opacity: 0; transform: skewX(-12deg); } .service-card[data-slug="security"]:hover .card-icon::before { animation: security-scan 1.4s ease-out infinite; } @keyframes security-scan { 0% { left: -32px; opacity: 0; } 15% { opacity: 0.9; } 70% { left: 56px; opacity: 0.4; } 100% { left: 72px; opacity: 0; } } /* ========================================================= REDUCED MOTION — keep the hover affordances visible but stop the looping animations so nobody gets distracted. ========================================================= */ @media (prefers-reduced-motion: reduce) { .service-card[data-slug="web"] .card-icon::before, .service-card[data-slug="marketing"] .card-icon::before, .service-card[data-slug="marketing"] .card-icon::after, .service-card[data-slug="marketing"]:hover .card-icon i, .service-card[data-slug="security"] .card-icon::before { animation: none !important; } .service-card[data-slug="dropship"] .card-icon::after { transition: none !important; } } /* ========================================================= TOUCH / MOBILE — drop the per-card pseudo extras entirely. On touch devices these effects either don't fire (no hover) or fire briefly on tap then linger awkwardly. Cleaner to hide them on narrow viewports and let the cards rely on their main tilt + glow + reveal animations. ========================================================= */ @media (max-width: 1023px) { .service-card[data-slug="web"] .card-icon::before, .service-card[data-slug="web"] .card-icon::after, .service-card[data-slug="marketing"] .card-icon::before, .service-card[data-slug="marketing"] .card-icon::after, .service-card[data-slug="dropship"] .card-icon::after, .service-card[data-slug="security"] .card-icon::before { display: none; } }