/* * ====================================================================================== * HEARTIFY CARDS & PREVIEW SYSTEM (V6.0 - LOVE LETTER EDITION) * ARCHITECT: Senior UI/UX Engineer * DATE: 2026-05-22 * PURPOSE: Emotional Design Upgrade - Warmth, Realism, and Elegance * ====================================================================================== */ /* ====================================================================================== 1.0 COMPONENT: PREVIEW STAGE (THE ROMANTIC SETTING) ====================================================================================== */ .preview-stage { flex: 1; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 10; /* 1️⃣ VISUAL IDENTITY UPGRADE: WARMTH & EMOTION */ /* Base: Warm, romantic off-white/blush blend */ background-color: #fff0f5; background: /* Soft ambient light */ radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 241, 242, 0.5) 60%, rgba(255, 228, 230, 0.8) 100%), /* Very subtle grid (barely visible, just for structure) */ linear-gradient(rgba(225, 29, 72, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(225, 29, 72, 0.03) 1px, transparent 1px); background-size: 100% 100%, 60px 60px, 60px 60px; background-position: center center; /* 9️⃣ MICRO-NOISE TEXTURE (High-End Polish) */ /* This adds a "grain" to the whole stage, making it feel less digital */ } .preview-stage::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* 1.2 THE HERO CARD (THE ARTIFACT) */ #cardCanvas { /* 2️⃣ CARD PHYSICALITY (PAPER REALISM) */ max-height: 82vh; max-width: 90%; width: auto; height: auto; background: white; /* Soft, organic corners - feels like heavy cardstock */ border-radius: 12px; position: relative; z-index: 20; /* 3️⃣ SHADOW SYSTEM (EMOTIONAL LIGHTING) */ /* Resting state: "Placed on a table in soft evening light" */ box-shadow: /* Direct contact shadow */ 0 2px 10px rgba(148, 20, 50, 0.05), /* Ambient diffusion (Warm glow) */ 0 20px 40px -12px rgba(225, 29, 72, 0.15), /* Card edge definition */ 0 0 0 1px rgba(0,0,0,0.02); /* 5️⃣ ENTRANCE ANIMATION (GENTLE RISE) */ animation: cardFloatUp 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards 0.2s; /* 4️⃣ HOVER INTERACTION (ELEGANCE) */ transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Add slight paper texture to the card itself (digital representation) */ #cardCanvas::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%); pointer-events: none; } #cardCanvas:hover { /* Less movement, more breathing */ transform: translateY(-3px) scale(1.002); /* Shadow deepens slightly */ box-shadow: 0 4px 15px rgba(148, 20, 50, 0.08), 0 25px 50px -12px rgba(225, 29, 72, 0.2), 0 0 0 1px rgba(0,0,0,0.02); } /* 1.3 PARTICLE SYSTEM (EMOTION & DRIFT) */ #bg-particles { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; } .particle { position: absolute; pointer-events: none; /* 6️⃣ ANIMATION VARIATION */ animation: particleFloat 12s linear infinite, particleSway 4s ease-in-out infinite alternate; /* Make particles soft/blurry for depth of field effect */ filter: blur(0.5px); will-change: transform, opacity; /* Use heart shape for particles if possible (handled in JS content, but style here) */ color: rgba(225, 29, 72, 0.2); font-family: serif; /* Better heart shape */ } @keyframes particleFloat { 0% { transform: translateY(10vh) rotate(0deg); opacity: 0; } 20% { opacity: 0.6; } 80% { opacity: 0.6; } 100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; } } @keyframes particleSway { 0% { margin-left: -15px; } 100% { margin-left: 15px; } } @keyframes cardFloatUp { 0% { opacity: 0; transform: translateY(40px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ====================================================================================== 2.0 MOBILE RESPONSIVENESS (DELIGHTFUL EXPERIENCE) ====================================================================================== */ @media (max-width: 1024px) { /* 7️⃣ MOBILE EXPERIENCE UPGRADE */ .preview-stage { height: auto; min-height: 80vh; /* More vertical space */ padding: 3rem 1.5rem; /* More breathing room */ /* Remove grid on mobile for pure emotion */ background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 241, 242, 0.6) 100%); background-size: 100% 100%; margin-top: 0; } #cardCanvas { max-height: none; width: 100%; /* Default slight zoom for impact */ transform: scale(1.02); /* Softer mobile shadow */ box-shadow: 0 10px 30px -8px rgba(225, 29, 72, 0.2); } /* Ensure no hover effects on touch */ #cardCanvas:hover { transform: scale(1.02); box-shadow: 0 10px 30px -8px rgba(225, 29, 72, 0.2); } } /* ====================================================================================== 3.0 DARK MODE OVERRIDES (MIDNIGHT ROMANCE) ====================================================================================== */ [data-theme="dark"] .preview-stage { background-color: #0f172a; /* Deep midnight gradient */ background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 1) 80%), linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 100% 100%, 60px 60px, 60px 60px; box-shadow: inset 0 0 250px rgba(0,0,0,0.8); } [data-theme="dark"] #cardCanvas { box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.05); } /* ====================================================================================== 4.0 PRINT & EXPORT UTILITIES (CRAFTED FEEL) ====================================================================================== */ @media print { /* 8️⃣ PRINT MODE UPGRADE */ body { background-color: #fffcf9; /* Faint cream/ivory for warmth */ color: black; } .preview-stage { background: #fffcf9; padding: 0; margin: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; height: 100vh; } #cardCanvas { box-shadow: none; max-width: 100%; width: auto; height: auto; transform: none !important; border: none; border-radius: 0; /* Printers cut corners anyway */ } /* Hide particles in print */ #bg-particles, .particle { display: none !important; } }