/* ========================================================== ZARFI (Envelope) — komponent universal, ngjyrat ndryshojnë automatikisht sipas `data-tema` që vendoset në . Stili i animacionit u frymëzua nga events360.org/invite ========================================================== */ :root{ --env-bg:#d63384; --env-flap:#c12a72; --env-pocket:#b8235f; --env-pocket-shadow:#9e1e51; --env-seal-bg:#ffffff; --env-seal-color:#d63384; --env-card-bg:#ffffff; --env-text:#3d2b2e; --env-accent:#d63384; } /* ---------- Paleta për secilën temë ---------- */ body[data-tema="romantic"]{ --env-bg:#f3d1d1; --env-flap:#eabebe; --env-pocket:#f1c5c5; --env-pocket-shadow:#e5b6b6; --env-seal-bg:#b57c7c; --env-seal-color:#fff; --env-card-bg:#ffffff; --env-text:#514646; --env-accent:#b57c7c; } body[data-tema="dark-premium"]{ --env-bg:#141914; --env-flap:#1a211a; --env-pocket:#171d17; --env-pocket-shadow:#0f130f; --env-seal-bg:#c5a059; --env-seal-color:#000; --env-card-bg:#0f130f; --env-text:#f1e6d2; --env-accent:#c5a059; } body[data-tema="botanical"]{ --env-bg:#2d3b2e; --env-flap:#364737; --env-pocket:#334234; --env-pocket-shadow:#263327; --env-seal-bg:#c5a059; --env-seal-color:#fff; --env-card-bg:#ffffff; --env-text:#2c3e2b; --env-accent:#c5a059; } body[data-tema="botanical-premium"]{ --env-bg:#3b473d; --env-flap:#435245; --env-pocket:#384538; --env-pocket-shadow:#2c382e; --env-seal-bg:#baa28a; --env-seal-color:#1e261f; --env-card-bg:#ffffff; --env-text:#1e261f; --env-accent:#8fa392; } body[data-tema="traditional-red"]{ --env-bg:#7a0f18; --env-flap:#8c141e; --env-pocket:#85121b; --env-pocket-shadow:#690b12; --env-seal-bg:#d4af37; --env-seal-color:#5a0c12; --env-card-bg:#fffdf9; --env-text:#5a0c12; --env-accent:#d4af37; } body[data-tema="luxury-story"]{ --env-bg:#0d0f0d; --env-flap:#1a221a; --env-pocket:#15191a; --env-pocket-shadow:#080a08; --env-seal-bg:#baa27a; --env-seal-color:#0d0f0d; --env-card-bg:#080a08; --env-text:#e5cc9f; --env-accent:#baa27a; } body[data-tema="fineart-scroll"]{ --env-bg:#d1c7bd; --env-flap:#c2b6a9; --env-pocket:#cabfb3; --env-pocket-shadow:#b3a695; --env-seal-bg:#9c8e7c; --env-seal-color:#fff; --env-card-bg:#faf8f5; --env-text:#4a4238; --env-accent:#9c8e7c; } body[data-tema="floral-geometry"]{ --env-bg:#1a080c; --env-flap:#2d0f15; --env-pocket:#240c11; --env-pocket-shadow:#120407; --env-seal-bg:#d4af37; --env-seal-color:#120407; --env-card-bg:#1a080c; --env-text:#f7ede2; --env-accent:#d4af37; } body[data-tema="modern-minimal"]{ --env-bg:#f4f4f4; --env-flap:#e6e6e6; --env-pocket:#ececec; --env-pocket-shadow:#dcdcdc; --env-seal-bg:#111111; --env-seal-color:#fff; --env-card-bg:#ffffff; --env-text:#111111; --env-accent:#111111; } body[data-tema="vintage-postcard"]{ --env-bg:#e3d3b4; --env-flap:#d6c19a; --env-pocket:#dac6a3; --env-pocket-shadow:#c4ac82; --env-seal-bg:#8a5a3a; --env-seal-color:#fdf6e8; --env-card-bg:#faf3e4; --env-text:#4a3826; --env-accent:#8a5a3a; } body[data-tema="boho-terracotta"]{ --env-bg:#ead2bb; --env-flap:#e0c2a3; --env-pocket:#e4c8ad; --env-pocket-shadow:#d4b18e; --env-seal-bg:#b5694a; --env-seal-color:#fff7ef; --env-card-bg:#fdf6ef; --env-text:#5c3b2e; --env-accent:#b5694a; } body[data-tema="elegant-cinematic"]{ --env-bg:#1c2b3a; --env-flap:#24364a; --env-pocket:#203041; --env-pocket-shadow:#152230; --env-seal-bg:#d8b978; --env-seal-color:#1c2b3a; --env-card-bg:#1c2b3a; --env-text:#f3ece0; --env-accent:#d8b978; } body[data-tema="royal-gold"]{ --env-bg:#0c0c0c; --env-flap:#171717; --env-pocket:#121212; --env-pocket-shadow:#000000; --env-seal-bg:#e9cd8c; --env-seal-color:#0c0c0c; --env-card-bg:#0c0c0c; --env-text:#e9cd8c; --env-accent:#e9cd8c; } body[data-tema="green-minimalist"]{ --env-bg:#dde6d6; --env-flap:#cfdcc6; --env-pocket:#d6e0cd; --env-pocket-shadow:#c3d2b8; --env-seal-bg:#6b8a63; --env-seal-color:#fff; --env-card-bg:#ffffff; --env-text:#2f3d2f; --env-accent:#6b8a63; } body[data-tema="celestial-night"]{ --env-bg:#0b0c2a; --env-flap:#12143a; --env-pocket:#0e1030; --env-pocket-shadow:#07081c; --env-seal-bg:#c9a84c; --env-seal-color:#0b0c2a; --env-card-bg:#12143a; --env-text:#f0e8ff; --env-accent:#c9a84c; } body[data-tema="blush-watercolor"]{ --env-bg:#f8e8ea; --env-flap:#f2d5d8; --env-pocket:#f5dde0; --env-pocket-shadow:#ecc8cc; --env-seal-bg:#c97b84; --env-seal-color:#fff; --env-card-bg:#fef9f9; --env-text:#4a2c33; --env-accent:#c97b84; } body[data-tema="olive-grove"]{ --env-bg:#e8e4d0; --env-flap:#ddd8c0; --env-pocket:#e3dec8; --env-pocket-shadow:#d0cab0; --env-seal-bg:#4a5e2f; --env-seal-color:#fdf8ec; --env-card-bg:#fdf8ec; --env-text:#2e2714; --env-accent:#4a5e2f; } body[data-tema="midnight-neon"]{ --env-bg:#0d0d0d; --env-flap:#161616; --env-pocket:#111111; --env-pocket-shadow:#050505; --env-seal-bg:#ff2d78; --env-seal-color:#fff; --env-card-bg:#0d0d0d; --env-text:#f0f0f0; --env-accent:#ff2d78; } /* ---------- Struktura ---------- */ .envelope-wrapper{ height:100%; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; perspective:1200px; } .envelope{ position:relative; width:300px; height:200px; border-bottom-left-radius:6px; border-bottom-right-radius:6px; cursor:pointer; background:var(--env-bg); box-shadow:0 25px 45px rgba(0,0,0,0.25); transition:transform .35s ease; } .envelope:hover{ transform:translateY(-4px); } .envelope .flap{ position:absolute; top:0; left:0; width:0; height:0; border-left:150px solid transparent; border-right:150px solid transparent; border-top:108px solid var(--env-flap); transform-origin:top; transition:transform .4s ease .4s, z-index .2s ease .4s; z-index:4; } .envelope .pocket{ position:absolute; bottom:0; left:0; width:0; height:0; border-left:150px solid var(--env-pocket); border-right:150px solid var(--env-pocket); border-bottom:100px solid var(--env-pocket-shadow); z-index:3; } .envelope .letter{ position:absolute; background:var(--env-card-bg); width:268px; height:170px; top:15px; left:16px; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,0.12); transition:transform .6s ease; z-index:2; overflow:hidden; } .envelope .inner-card{ height:100%; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:14px; opacity:.5; transition:opacity .4s; color:var(--env-text); } .envelope .inner-card .env-subtitle{ font-size:9px; letter-spacing:2px; text-transform:uppercase; font-family:'Montserrat', sans-serif; opacity:.7; margin-bottom:8px; } .envelope .inner-card .env-names{ font-family:'Great Vibes','Playfair Display',cursive; font-size:26px; line-height:1.1; color:var(--env-accent); } .envelope .inner-card .env-date{ font-size:10px; letter-spacing:1px; margin-top:8px; font-family:'Montserrat', sans-serif; opacity:.7; } .hearts-seal{ position:absolute; width:54px; height:54px; border-radius:50%; top:88px; left:123px; z-index:5; background:var(--env-seal-bg); color:var(--env-seal-color); display:flex; justify-content:center; align-items:center; box-shadow:0 4px 14px rgba(0,0,0,0.25); transition:transform .35s ease; animation:seal-pulse 2.2s ease-in-out infinite; } .seal-text{ font-size:9px; letter-spacing:.5px; text-align:center; line-height:1.3; font-family:'Montserrat', sans-serif; font-weight:600; text-transform:uppercase; } @keyframes seal-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } } /* ---------- Animacioni i hapjes ---------- */ .envelope.open{ cursor:default; } .envelope.open:hover{ transform:none; } .envelope.open .flap{ transform:rotateX(180deg); z-index:1; transition:transform .4s ease, z-index .2s ease .4s; } .envelope.open .letter{ transform:translateY(-118px) scaleY(1.18); z-index:8; box-shadow:0 12px 30px rgba(0,0,0,0.2); transition:transform .6s ease .4s, z-index .2s ease .4s; } .envelope.open .inner-card{ opacity:1; transition:opacity .4s .65s; } .envelope.open .hearts-seal{ animation:none; transform:scale(0); transition:transform .3s ease; } .envelope-hint{ margin-top:26px; font-size:10px; letter-spacing:3px; text-transform:uppercase; font-family:'Montserrat', sans-serif; color:var(--env-text); opacity:.55; animation:hint-bounce 2s infinite; } @keyframes hint-bounce{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:.75; transform:translateY(4px); } } @media (max-width:380px){ .envelope{ width:260px; height:175px; } .envelope .flap{ border-left-width:130px; border-right-width:130px; border-top-width:95px; } .envelope .pocket{ border-left-width:130px; border-right-width:130px; border-bottom-width:88px; } .envelope .letter{ width:230px; height:148px; left:15px; } .hearts-seal{ width:48px; height:48px; top:78px; left:106px; } }