; body { font-family: 'Playfair Display', serif; color: #9c4555; background: linear-gradient(180deg, #fff5f6, #fde3e8); } .tpl-frame-classic { min-height: 100vh; padding: 40px 16px; position: relative; overflow: hidden; } .tpl-frame-classic::before, .tpl-frame-classic::after { content: '❀'; position: absolute; font-size: 120px; color: rgba(156,69,85,.07); } .tpl-frame-classic::before { top: 20px; left: 20px; } .tpl-frame-classic::after { bottom: 20px; right: 20px; transform: rotate(45deg); } .tpl-card { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(156,69,85,.18); overflow: hidden; position: relative; z-index: 1; } .tpl-footer { text-align: center; margin: 20px auto 0; max-width: 560px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .55; font-family: 'Playfair Display', serif; } .tpl-petal { position: absolute; top: -20px; width: 8px; height: 12px; background: radial-gradient(circle at 30% 30%, #ff8fa8, #d97a85); border-radius: 80% 0 80% 0; animation: tpl-fall 12s linear infinite; opacity: .7; pointer-events: none; } @keyframes tpl-fall { 0% { transform: translateY(-30px) rotate(0); } 100% { transform: translateY(110vh) rotate(540deg); } }

Cổ điển lãng mạn