/* =========================
LOVE PAGE - BY CHATGPT
========================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}
body{
width:100%;
height:100vh;
overflow:hidden;
background:linear-gradient(135deg,#ffbfd8,#ffeaf3);
display:flex;
justify-content:center;
align-items:center;
}
.container{
position:relative;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.card{
width:380px;
background:#ffffffea;
border-radius:25px;
padding:35px;
text-align:center;
box-shadow:
0 15px 45px rgba(0,0,0,.18);
animation:show .8s ease;
position:relative;
z-index:2;
}
@keyframes show{
0%{
transform:scale(.5);
opacity:0;
}
100%{
transform:scale(1);
opacity:1;
}
}
.avatar{
width:110px;
height:110px;
border-radius:50%;
margin:auto;
overflow:hidden;
border:5px solid #ff4d8d;
margin-bottom:18px;
}
.avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.title{
font-size:32px;
font-weight:bold;
color:#ff3f86;
margin-bottom:20px;
}
.message{
font-size:22px;
line-height:1.7;
font-weight:600;
color:#444;
min-height:170px;
}
.buttons{
margin-top:30px;
}
button{
padding:14px 30px;
border:none;
border-radius:35px;
font-size:18px;
cursor:pointer;
transition:.25s;
margin:8px;
}
#yes{
background:#ff4d8d;
color:#fff;
}
#yes:hover{
transform:scale(1.08);
}
#no{
background:#efefef;
}
.success{
display:none;
font-size:32px;
font-weight:bold;
color:#ff2e75;
animation:pop .6s;
margin-top:20px;
}
@keyframes pop{
0%{
transform:scale(.3);
opacity:0;
}
100%{
transform:scale(1);
opacity:1;
}
}
/* HEART */
.heart{
position:absolute;
font-size:22px;
animation:fall linear forwards;
pointer-events:none;
}
@keyframes fall{
0%{
transform:translateY(-40px) rotate(0);
opacity:1;
}
100%{
transform:translateY(120vh) rotate(360deg);
opacity:0;
}
}
/* FIREWORK */
.fire{
position:absolute;
width:8px;
height:8px;
border-radius:50%;
animation:boom .8s linear forwards;
}
@keyframes boom{
0%{
transform:translate(0,0);
opacity:1;
}
100%{
transform:translate(var(--x),var(--y));
opacity:0;
}
}
/* MOBILE */
@media(max-width:480px){
.card{
width:92%;
padding:25px;
}
.title{
font-size:28px;
}
.message{
font-size:20px;
}
button{
width:140px;
}
}
/* ===========================
Glass Effect
=========================== */
.card::before{
content:"";
position:absolute;
inset:0;
border-radius:25px;
padding:2px;
background:linear-gradient(45deg,#fff,#ffd4e6,#ffffff);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}
/* ===========================
Floating Background
=========================== */
.blur{
position:absolute;
border-radius:50%;
filter:blur(70px);
opacity:.35;
animation:float 10s ease-in-out infinite;
}
.blur1{
width:260px;
height:260px;
background:#ff7db3;
left:-70px;
top:-80px;
}
.blur2{
width:280px;
height:280px;
background:#ffd2ea;
right:-80px;
bottom:-90px;
animation-delay:3s;
}
@keyframes float{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-40px);
}
100%{
transform:translateY(0px);
}
}
/* ===========================
Typing Cursor
=========================== */
.cursor{
display:inline-block;
width:3px;
height:24px;
background:#ff4d8d;
margin-left:3px;
animation:blink .7s infinite;
}
@keyframes blink{
50%{
opacity:0;
}
}
/* ===========================
Heart Beat
=========================== */
.beat{
animation:beat 1s infinite;
}
@keyframes beat{
0%{
transform:scale(1);
}
30%{
transform:scale(1.18);
}
60%{
transform:scale(.95);
}
100%{
transform:scale(1);
}
}
/* ===========================
Button Hover
=========================== */
button{
transition:.25s;
}
button:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(255,77,141,.35);
}
button:active{
transform:scale(.95);
}
/* ===========================
Popup
=========================== */
.popup{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.45);
backdrop-filter:blur(6px);
opacity:0;
pointer-events:none;
transition:.4s;
z-index:999;
}
.popup.show{
opacity:1;
pointer-events:auto;
}
.popup-box{
background:white;
padding:30px;
border-radius:25px;
width:320px;
text-align:center;
animation:show .4s;
}
.popup-box h2{
color:#ff4d8d;
margin-bottom:15px;
}
.popup-box p{
font-size:18px;
line-height:1.7;
color:#555;
}
/* ===========================
Firework Glow
=========================== */
.fire{
box-shadow:
0 0 10px currentColor,
0 0 18px currentColor,
0 0 30px currentColor;
}
/* ===========================
Scrollbar
=========================== */
::-webkit-scrollbar{
display:none;
}
