* {
box-sizing: border-box;
}
body {
width: 320px;
margin: 0;
background: #262522;
color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
}
.popup {
padding: 24px;
text-align: center;
}
h1 {
margin: 0 0 10px;
color: #81b64c;
font-size: 24px;
}
p {
margin: 0 0 20px;
color: #cdbf9f;
font-size: 13px;
line-height: 1.5;
}
button {
width: 100%;
padding: 12px;
border: 1px solid #81b64c;
border-radius: 8px;
background: #1a140c;
color: #f4f4f4;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
button:hover {
background: #81b64c;
color: #160f05;
}
.popup-actions {
display: grid;
gap: 10px;
}
.popup-status {
min-height: 18px;
margin: 12px 0 0;
color: #81b64c;
font-size: 12px;
}
.product-credit{margin-top:16px;padding-top:12px;border-top:1px solid #4a4743;color:#8f826b;font-size:9px;font-weight:800;letter-spacing:.05em;line-height:1.45;text-transform:uppercase}
body{background:#262522;color:#f4f4f4}.popup{background:linear-gradient(180deg,#312e2b,#262522);border-color:rgba(129,182,76,.5)}.popup-product-logo{width:110px;height:110px;object-fit:contain;border-radius:18px;border:1px solid rgba(129,182,76,.5);background:#1f1e1b;margin-bottom:10px}.popup h1{color:#fff}.edition-label{color:#a9d477;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.popup-actions button{background:linear-gradient(90deg,#5d8f3b,#81b64c);color:#111;border-color:#a9d477}.product-credit{display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid #45423e;color:#bdbdbd}.product-credit img{width:24px;height:24px;object-fit:cover;border-radius:50%;border:1px solid #c89c42}
body{background:radial-gradient(circle at 50% 0%,rgba(129,182,76,.13),transparent 40%),#262522}.popup{animation:popupIn .45s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 18px 55px rgba(0,0,0,.35)}.popup-product-logo{animation:logoFloat 4s ease-in-out infinite}.popup-actions button{transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.popup-actions button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 20px rgba(129,182,76,.18)}.product-credit img{cursor:pointer;animation:popupCreatorPulse 4s ease-in-out infinite;transition:transform .2s ease}.product-credit img:hover{transform:scale(1.12)}
@keyframes popupIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes logoFloat{50%{transform:translateY(-4px)}}@keyframes popupCreatorPulse{50%{box-shadow:0 0 14px rgba(200,156,66,.6)}}
.ca-easter-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:10px;background:rgba(10,9,8,.94)}.ca-easter-card{position:relative;width:100%;padding:25px 16px;text-align:center;border:1px solid #c89c42;border-radius:18px;background:#201d1a}.ca-easter-logo{width:105px;height:105px;object-fit:cover;border-radius:50%;border:2px solid #c89c42}.ca-easter-card h2{font-size:22px;color:#fff}.ca-easter-card p{color:#d4d0ca}.ca-easter-motto{color:#b8df78!important;font-weight:800}.ca-easter-close{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;background:#37332f!important;color:#fff!important;border:1px solid #5a554f!important}
.product-credit{
display:flex!important;
align-items:center;
justify-content:center;
gap:10px;
color:#bdbdbd!important;
border-top:1px solid #45423e!important;
background:#211f1d!important;
text-align:left!important;
text-transform:none!important;
letter-spacing:.02em!important;
}
.product-credit strong{color:#f4f4f4;font-weight:900}
.product-credit img{
width:34px!important;
height:34px!important;
object-fit:cover;
border-radius:50%;
border:1px solid #c89c42!important;
box-shadow:0 0 10px rgba(200,156,66,.32);
cursor:pointer;
animation:caCopyrightPulse 4s ease-in-out infinite;
transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.product-credit img:hover,
.product-credit img:focus-visible{
transform:scale(1.12);
filter:brightness(1.08);
outline:none;
box-shadow:0 0 20px rgba(214,168,75,.72)!important;
}
.ca-easter-overlay{
position:fixed;
inset:0;
z-index:99999;
display:grid;
place-items:center;
padding:20px;
background:rgba(8,7,6,.90);
backdrop-filter:blur(13px);
opacity:0;
visibility:hidden;
transition:opacity .55s ease,visibility .55s ease;
}
.ca-easter-overlay.is-visible{
opacity:1;
visibility:visible;
}
.ca-easter-overlay.is-closing{
opacity:0;
visibility:visible;
pointer-events:none;
transition-duration:1.2s;
}
.ca-easter-card{
position:relative;
width:min(520px,92vw);
padding:34px 26px 30px;
overflow:hidden;
text-align:center;
border:1px solid rgba(214,168,75,.72);
border-radius:24px;
background:
radial-gradient(circle at 50% 18%,rgba(214,168,75,.16),transparent 37%),
linear-gradient(180deg,#292522,#171513);
box-shadow:0 25px 85px rgba(0,0,0,.62),0 0 38px rgba(200,156,66,.17);
transform:translateY(14px) scale(.96);
opacity:0;
transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .55s ease;
}
.ca-easter-overlay.is-visible .ca-easter-card{
transform:none;
opacity:1;
}
.ca-easter-overlay.is-closing .ca-easter-card{
transform:translateY(10px) scale(.985);
opacity:0;
transition-duration:1s;
}
.ca-easter-logo-stage{
position:relative;
width:190px;
height:190px;
margin:0 auto 8px;
display:grid;
place-items:center;
}
.ca-easter-logo{
position:relative;
z-index:5;
width:132px!important;
height:132px!important;
object-fit:cover;
border-radius:50%;
border:2px solid #d6a84b!important;
box-shadow:0 0 28px rgba(214,168,75,.48)!important;
animation:caLogoGlow 2.8s ease-in-out infinite;
}
.ca-easter-orbit{
position:absolute;
display:block;
border:1px solid rgba(214,168,75,.62);
border-radius:50%;
transform-style:preserve-3d;
}
.ca-easter-orbit-one{
width:176px;
height:176px;
animation:caEasterOrbit 8s linear infinite;
}
.ca-easter-orbit-two{
width:154px;
height:154px;
transform:rotateX(66deg);
animation:caEasterOrbitTwo 5.5s linear infinite reverse;
}
.ca-easter-orbit i{
position:absolute;
display:block;
width:9px;
height:9px;
border-radius:50%;
background:#f0cf78;
box-shadow:0 0 13px rgba(240,207,120,.95);
}
.ca-easter-orbit-one i:nth-child(1){top:-5px;left:50%}
.ca-easter-orbit-one i:nth-child(2){right:-5px;top:53%}
.ca-easter-orbit-one i:nth-child(3){left:18%;bottom:5px}
.ca-easter-orbit-two i:nth-child(1){left:-5px;top:48%}
.ca-easter-orbit-two i:nth-child(2){right:8%;bottom:8%}
.ca-easter-energy-ring{
position:absolute;
width:145px;
height:145px;
border:1px solid rgba(214,168,75,.38);
border-radius:50%;
animation:caEasterEnergy 2.4s ease-in-out infinite;
}
.ca-easter-kicker{
margin:0 0 5px!important;
color:#d6a84b!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.2em!important;
}
.ca-easter-card h2{
margin:5px 0 10px!important;
color:#fff!important;
font-size:30px!important;
}
.ca-easter-card p{
margin:7px 0!important;
color:#d7d2ca!important;
line-height:1.5!important;
}
.ca-easter-copyright{color:#f0cf78!important}
.ca-easter-motto{color:#b8df78!important;font-weight:900!important}
.ca-easter-card small{display:block;margin-top:14px;color:#8f8980}
@keyframes caCopyrightPulse{
50%{box-shadow:0 0 16px rgba(214,168,75,.62)}
}
@keyframes caEasterOrbit{
to{transform:rotate(360deg)}
}
@keyframes caEasterOrbitTwo{
from{transform:rotateX(66deg) rotate(0deg)}
to{transform:rotateX(66deg) rotate(360deg)}
}
@keyframes caEasterEnergy{
0%,100%{transform:scale(.94);opacity:.35}
50%{transform:scale(1.1);opacity:.85}
}
@keyframes caLogoGlow{
50%{box-shadow:0 0 42px rgba(214,168,75,.75)}
}
@media(prefers-reduced-motion:reduce){
.ca-easter-orbit,
.ca-easter-energy-ring,
.ca-easter-logo,
.product-credit img{animation:none!important}
}
