/* * pf-blocks.css — shared styling for rendered Portfurlio blocks. * * These rules used to live as a minified string inside ensureCss() in * blocks-render.js and were injected at runtime. They are now a real * stylesheet so they can be cached, edited, and linted like normal CSS. * * ensureCss() now just injects a to this file (idempotent), and * editor.html / render.html also link it directly in . * * Per-instance, prop-driven styling (colors, computed sizes, etc.) still * lives inline in each block's render() because those values are dynamic. * Only the static, reusable rules belong here. */ /* ---- entry animations ---------------------------------------------------- */ @keyframes pfFade { from { opacity: 0 } to { opacity: 1 } } @keyframes pfUp { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } } @keyframes pfDown { from { opacity: 0; transform: translateY(-28px) } to { opacity: 1; transform: none } } @keyframes pfLeft { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } } @keyframes pfRight { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } } @keyframes pfZoom { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: none } } /* ---- block-specific animations ------------------------------------------ */ @keyframes pfMarquee { from { transform: translateX(0) } to { transform: translateX(-100%) } } @keyframes pfSpin { from { transform: rotate(0) } to { transform: rotate(360deg) } } @keyframes pfBlink { 50% { opacity: 0 } } .pf-anim-fade { animation: pfFade .8s both } .pf-anim-slide-up { animation: pfUp .7s both } .pf-anim-slide-down { animation: pfDown .7s both } .pf-anim-slide-left { animation: pfLeft .7s both } .pf-anim-slide-right { animation: pfRight .7s both } .pf-anim-zoom { animation: pfZoom .6s both } /* ---- hover effects ------------------------------------------------------- */ .pf-hover-lift { transition: transform .2s, box-shadow .2s } .pf-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18) } .pf-hover-grow { transition: transform .2s } .pf-hover-grow:hover { transform: scale(1.04) } /* ---- shared block primitives -------------------------------------------- */ /* The "set a URL / address / email" empty-state hint, previously inlined as style="color:#999;text-align:center" in ~8 different blocks. */ .pf-ph { color: #999; text-align: center }