/* ========================================== PULP MODE 📼 (Tarantino / Grindhouse) ========================================== */ body.pulp{ --hero-overlay: radial-gradient(circle at 35% 20%, rgba(255,214,0,0.05), transparent 60% ), linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.30) ); /* hero-only background (via your global system) */ --hero-image: url("images/background-pulp.gif"); --card-bg: rgba(16,16,16,0.82); --card-stroke: rgba(255,214,0,0.38); } /* ------------------------------------------ HEADER / TITRE ------------------------------------------ */ body.pulp .logo-text{ font-family: 'Bebas Neue', 'Impact', sans-serif; letter-spacing: 6px; font-size: clamp(2.6rem, 7vw, 4.3rem); } body.pulp .tagline{ color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.55); } /* Toggle button (pulp) */ body.pulp .theme-toggle{ background: rgba(0,0,0,.72); border: 1px solid rgba(255,214,0,.35); box-shadow: 0 18px 40px rgba(0,0,0,.35); } /* ------------------------------------------ CARDS = poster / grindhouse ------------------------------------------ */ body.pulp .card{ background: rgba(16,16,16,0.80); border: 2px solid rgba(255,214,0,.45); box-shadow: 10px 12px 0 rgba(0,0,0,.60), 0 22px 70px rgba(0,0,0,.38); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); position: relative; overflow: hidden; } /* Halftone overlay in cards */ body.pulp .card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image: radial-gradient(rgba(255,214,0,.28) 1px, transparent 1px); background-size: 6px 6px; mix-blend-mode: overlay; } /* Card titles */ body.pulp .card h2{ font-family: 'Bebas Neue', 'Impact', sans-serif; font-size: 2rem; letter-spacing: 3px; color: #ffe45c; } /* Text */ body.pulp .card p, body.pulp .card li{ color: rgba(255,255,255,.92); } /* Services grid items = stickers */ body.pulp .service-item{ background: rgba(0,0,0,.55); border: 1px solid rgba(255,214,0,.28); box-shadow: 6px 6px 0 rgba(0,0,0,.55); color: rgba(255,255,255,.95); transition: transform .18s ease, box-shadow .18s ease; } body.pulp .service-item:hover{ transform: translateY(-2px); box-shadow: 10px 10px 0 rgba(0,0,0,.58); } /* ------------------------------------------ CTA = affiche ------------------------------------------ */ body.pulp .cta{ background: linear-gradient(90deg, #ffd600, #ff9f00); color: #111; border: 1px solid rgba(0,0,0,.35); box-shadow: 10px 10px 0 rgba(0,0,0,.55), 0 22px 70px rgba(0,0,0,.25); } body.pulp .cta:hover{ transform: translateY(-2px); background: linear-gradient(90deg, #ff9f00, #ff3b3b); } /* Links */ body.pulp a{ color:#ffd600; } body.pulp a:hover{ opacity:.9; } /* ------------------------------------------ FAB = noir + jaune ------------------------------------------ */ body.pulp .fab-btn{ background: rgba(0,0,0,.78); color: #ffe45c; border: 1px solid rgba(255,214,0,.35); box-shadow: 0 18px 45px rgba(0,0,0,.42); } body.pulp .fab-btn:hover{ transform: translateY(-3px); } /* Email icon matches pulp (keep WA/Telegram native colors) */ body.pulp .fab-btn.email svg path{ fill:#ffe45c; } /* Footer */ body.pulp .site-footer{ background: rgba(0,0,0,.55); border-top: 1px solid rgba(255,214,0,.18); color: rgba(255,255,255,.85); } /* ------------------------------------------ HERO FX (gunshot) ------------------------------------------ */ body.pulp .hero{ position: relative; overflow: hidden; } body.pulp .pulp-flash{ position:absolute; inset:0; pointer-events:none; z-index: 9999; /* chaud cinéma, pas blanc */ background: rgba(255, 230, 180, 0.28); /* évite le “noir” si overlay dessous */ mix-blend-mode: screen; animation: pulpFlash .16s ease-out forwards; } @keyframes pulpFlash{ from{ opacity:1; } to{ opacity:0; } } } @keyframes gunFlash{ from{ opacity:1; } to{ opacity:0; } } /* Shake */ body.pulp .hero.gunshake{ animation: gunShake .22s ease-in-out; } @keyframes gunShake{ 0%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-4px,2px) rotate(-0.35deg)} 40%{transform:translate(5px,-3px) rotate(0.35deg)} 60%{transform:translate(-3px,-2px) rotate(-0.2deg)} 80%{transform:translate(3px,2px) rotate(0.2deg)} 100%{transform:translate(0,0) rotate(0)} } /* ------------------------------------------ WALL IMPACTS (clean, not glass) ------------------------------------------ */ body.pulp .bullet-hole{ position:absolute; width: 34px; height: 34px; border-radius: 50%; pointer-events:none; z-index: 3; background: radial-gradient(circle, rgba(0,0,0,.95) 0 30%, transparent 31% 100%), radial-gradient(circle, rgba(255,255,255,.16) 0 38%, transparent 39% 100%), radial-gradient(circle at 30% 35%, rgba(255,214,0,.18) 0 10%, transparent 11% 100%), radial-gradient(circle at 70% 55%, rgba(255,214,0,.12) 0 9%, transparent 10% 100%), radial-gradient(circle at 40% 75%, rgba(255,214,0,.10) 0 8%, transparent 9% 100%); box-shadow: 0 0 0 2px rgba(0,0,0,.88), 0 10px 24px rgba(0,0,0,.55); opacity: 0; transform: scale(.6); animation: wallPop 1.6s ease forwards; } @keyframes wallPop{ 0% { opacity:0; transform: scale(.55); filter: blur(1px); } 10% { opacity:1; transform: scale(1.05); filter: blur(0); } 25% { transform: scale(.98); } 70% { opacity:1; } 100% { opacity:0; transform: scale(1.08); } } /* Pouf de poussière (mur) */ body.pulp .bullet-dust{ position:absolute; width: 120px; height: 120px; pointer-events:none; z-index: 4; background: radial-gradient(circle at 45% 45%, rgba(255, 240, 200, 0.28) 0 22%, rgba(255, 240, 200, 0.10) 22% 45%, rgba(0,0,0,0) 46% 100%), radial-gradient(circle at 60% 55%, rgba(255, 214, 0, 0.12) 0 16%, rgba(0,0,0,0) 17% 100%), radial-gradient(circle at 50% 50%, rgba(0,0,0,0.20) 0 18%, rgba(0,0,0,0) 19% 100%); filter: blur(0.6px) drop-shadow(0 10px 18px rgba(0,0,0,.35)); opacity: 0; transform: translate(-50%, -50%) scale(.85); animation: dustPuff .45s ease-out forwards; } @keyframes dustPuff{ 0% { opacity: 0; transform: translate(-50%,-50%) scale(.75); } 12% { opacity: .9; transform: translate(-50%,-50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }