/* --- Narcy Card Flip: clean desktop/mobile split --- */ /* Structure expectations: .nk-card .nk-inner (has the 3D rotate transition) .nk-front .nk-face .nk-back .nk-face */ /* Faces render cleanly during rotate */ .nk-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Desktop-only hover flip (no click-to-stick) */ @media (hover: hover) and (pointer: fine) { .nk-card:hover .nk-inner { transform: rotateY(180deg); } .nk-card:hover .nk-front { opacity: 0; } .nk-card:hover .nk-back { opacity: 1; } } /* Kill any lingering hover effects when touch is detected (JS adds .narcy-no-hover to ) */ .narcy-no-hover .nk-card:hover .nk-inner { transform: none; } .narcy-no-hover .nk-card:hover .nk-front { opacity: 1; } .narcy-no-hover .nk-card:hover .nk-back { opacity: 0; } /* Mobile niceties */ .nk-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none; } .nk-card:focus { outline: none; } /* Mobile (and desktop when "locked") need a class-driven flip */ .nk-card.is-flipped .nk-inner { transform: rotateY(180deg); } .nk-card.is-flipped .nk-front { opacity: 0; } .nk-card.is-flipped .nk-back { opacity: 1; } /* Make sure .nk-inner actually animates */ .nk-inner { transition: transform 400ms ease; transform-style: preserve-3d; } /* (already recommended) Faces render cleanly */ .nk-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* === FINAL OVERRIDES: stop mobile hover-freeze, keep desktop hover === */ /* Faces render cleanly */ .nk-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* 1) Neutralize ANY global :hover flip (this overrides the early combined rule) */ .nk-card:hover .nk-inner { transform: none !important; } .nk-card:hover .nk-front { opacity: 1 !important; } .nk-card:hover .nk-back { opacity: 0 !important; } /* 2) Re-enable hover ONLY for real hover devices (desktops) */ @media (hover: hover) and (pointer: fine){ .nk-card:hover .nk-inner { transform: rotateY(180deg) !important; } .nk-card:hover .nk-front { opacity: 0 !important; } .nk-card:hover .nk-back { opacity: 1 !important; } } /* 3) Keep class-based flip GLOBAL so phones can toggle with taps */ .nk-card.is-flipped .nk-inner { transform: rotateY(180deg) !important; } .nk-card.is-flipped .nk-front { opacity: 0 !important; } .nk-card.is-flipped .nk-back { opacity: 1 !important; } /* Make sure .nk-inner actually animates (in case it’s missing somewhere) */ .nk-inner { transition: transform 400ms ease; transform-style: preserve-3d; } /* Mobile niceties */ .nk-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }