/* ============================================================ THEMES - controlled via [data-theme] on ============================================================ */ :root, [data-theme="classic"]{ --wine:#6d1f3c; --wine-deep:#4a1329; --blush:#f0c9d3; --cream:#fbf3e7; --gold:#c39a4b; --ink:#3a2530; --paper-line:#e3d3c9; } [data-theme="dark"]{ --wine:#e2264d; --wine-deep:#ff3b57; --blush:#3a2a30; --cream:#141416; --gold:#ff8fa3; --ink:#efe9e2; --paper-line:#2a2a30; } [data-theme="gold"]{ --wine:#8a6d1f; --wine-deep:#5c4712; --blush:#f5e9c8; --cream:#fffaf0; --gold:#c9a227; --ink:#3a2f1a; --paper-line:#ecd9a0; } [data-theme="teal"]{ --wine:#0f766e; --wine-deep:#0b4f49; --blush:#cdeee9; --cream:#f1fbf9; --gold:#2dd4bf; --ink:#123b38; --paper-line:#d7f1ec; } *{box-sizing:border-box; margin:0; padding:0;} html,body{ height:100%; background: radial-gradient(circle at 20% 10%, rgba(195,154,75,0.10), transparent 40%), radial-gradient(circle at 85% 85%, rgba(109,31,60,0.14), transparent 45%), var(--cream); font-family:'Heebo', sans-serif; color:var(--ink); overflow-x:hidden; } .screen{ min-height:100vh; width:100%; display:none; align-items:center; justify-content:center; flex-direction:column; padding:32px 16px; text-align:center; position:relative; } .screen.active{display:flex; animation:fadeIn .6s ease both;} @keyframes fadeIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}} .loading-note{ font-family:'Frank Ruhl Libre', serif; color:var(--wine); font-size:18px; } .ambient-heart{ position:fixed; pointer-events:none; z-index:0; opacity:.35; animation:floatUp linear infinite; color:var(--wine); } @keyframes floatUp{ 0%{transform:translateY(0) rotate(0deg); opacity:0;} 10%{opacity:.35;} 90%{opacity:.35;} 100%{transform:translateY(-110vh) rotate(25deg); opacity:0;} } /* ---------- ENVELOPE ---------- */ .envelope-wrap{ cursor:pointer; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:28px; } .eyebrow{ letter-spacing:.35em; font-size:12px; color:var(--wine); font-weight:700; text-transform:uppercase; } .envelope{ width:min(78vw, 320px); height:min(52vw, 210px); position:relative; filter:drop-shadow(0 18px 30px rgba(74,19,41,0.25)); transition:transform .35s ease; } .envelope-wrap:hover .envelope{transform:translateY(-6px) scale(1.02);} .env-body{ position:absolute; inset:0; background:linear-gradient(160deg, var(--wine) 0%, var(--wine-deep) 100%); border-radius:6px; } .env-flap{ position:absolute; top:0; left:0; right:0; height:60%; background:linear-gradient(160deg, var(--wine), var(--wine-deep)); clip-path:polygon(0 0, 100% 0, 50% 62%); transform-origin:top; transition:transform .7s cubic-bezier(.6,-0.28,.4,1.4); border-radius:6px 6px 0 0; z-index:3; } .env-seal{ position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold), #9a7530); display:flex; align-items:center; justify-content:center; color:var(--wine-deep); font-size:22px; z-index:4; box-shadow:0 4px 10px rgba(0,0,0,.35); } .env-letter-peek{ position:absolute; top:6%; left:8%; right:8%; bottom:8%; background:var(--cream); border-radius:3px; z-index:2; } .envelope.opened .env-flap{transform:rotateX(180deg); z-index:1;} .envelope.opened .env-letter-peek{ animation:letterRise .6s ease .25s forwards; } @keyframes letterRise{ to{ top:-55%; } } .cta-hint{ font-size:15px; color:var(--ink); opacity:.7; } .cta-hint b{color:var(--wine);} /* ---------- NOTEBOOK ---------- */ .notebook{ width:min(92vw, 560px); background:var(--cream); border-radius:4px; position:relative; box-shadow:0 25px 50px rgba(74,19,41,.22), 0 2px 0 rgba(0,0,0,.05); padding:44px 34px 38px; background-image:repeating-linear-gradient(var(--cream) 0px, var(--cream) 33px, var(--paper-line) 34px); background-position:0 60px; z-index:1; } .notebook::before{ content:''; position:absolute; top:0; bottom:0; right:36px; width:2px; background:rgba(109,31,60,.25); } .notebook .spiral{ position:absolute; top:-14px; left:24px; right:24px; display:flex; justify-content:space-between; } .spiral span{ width:16px; height:16px; border-radius:50%; background:var(--cream); border:3px solid var(--wine); display:block; } .letter-title{ font-family:'Frank Ruhl Libre', serif; font-size:clamp(22px,5vw,30px); color:var(--wine); font-weight:700; margin-bottom:18px; } .letter-body{ font-family:'Frank Ruhl Libre', serif; font-size:clamp(16px,4vw,19px); line-height:2; color:var(--ink); text-align:right; min-height:170px; } .letter-body p{margin-bottom:14px;} .letter-body .wild{ color:var(--wine); font-weight:700; font-style:italic; } .signature{ margin-top:20px; font-family:'Frank Ruhl Libre', serif; font-style:italic; font-size:20px; color:var(--wine-deep); transition:opacity .6s ease; } .type-cursor{ display:inline-block; color:var(--wine); font-weight:700; animation:blink .85s step-end infinite; } @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0;} } .btn{ margin-top:30px; background:var(--wine); color:var(--cream); border:none; padding:16px 38px; border-radius:40px; font-family:'Heebo', sans-serif; font-weight:700; font-size:16px; cursor:pointer; box-shadow:0 10px 22px rgba(109,31,60,.3); transition:transform .2s ease, box-shadow .2s ease, opacity .6s ease; } .btn:hover{transform:translateY(-2px); box-shadow:0 14px 26px rgba(109,31,60,.38);} .btn:active{transform:translateY(0);} .btn:focus-visible, .choice:focus-visible, .env-body:focus-visible{outline:3px solid var(--gold); outline-offset:3px;} #letterBtn{transition:opacity .6s ease;} /* ---------- PHOTO GALLERY ---------- */ .photo-page{ padding-bottom:32px; } .photo-grid{ display:flex; flex-direction:column; gap:26px; margin-bottom:10px; } .photo-card{ display:flex; flex-direction:column; align-items:center; } .photo-card img{ width:100%; max-width:340px; border-radius:10px; box-shadow:0 14px 26px rgba(74,19,41,.22); display:block; } .photo-caption{ margin-top:10px; font-family:'Frank Ruhl Libre', serif; font-style:italic; color:var(--wine-deep); font-size:16px; text-align:center; } /* ---------- QUIZ ---------- */ .quiz-card{ width:min(92vw, 520px); background:var(--cream); border-radius:18px; padding:36px 28px; box-shadow:0 25px 50px rgba(74,19,41,.18); position:relative; z-index:1; } .progress{ display:flex; gap:8px; justify-content:center; margin-bottom:26px; flex-wrap:wrap; } .progress .dot{ width:10px; height:10px; border-radius:50%; background:var(--blush); transition:background .3s ease, transform .3s ease; } .progress .dot.done{background:var(--wine); transform:scale(1.15);} .q-eyebrow{ font-size:12px; letter-spacing:.25em; color:var(--gold); font-weight:700; text-transform:uppercase; margin-bottom:10px; } .q-title{ font-family:'Frank Ruhl Libre', serif; font-size:clamp(20px,5vw,26px); color:var(--wine-deep); margin-bottom:24px; font-weight:700; line-height:1.5; } .choices{display:flex; flex-direction:column; gap:12px;} .choice{ background:#fff; border:2px solid var(--blush); border-radius:12px; padding:14px 18px; font-size:16px; font-family:'Heebo', sans-serif; color:var(--ink); cursor:pointer; transition:all .2s ease; text-align:right; } .choice:hover{border-color:var(--wine); background:#fff8fa;} .choice.correct{background:#e4f4e7; border-color:#4c9a5c; color:#2c5c36; font-weight:700;} .choice.wrong{background:#fbe6e6; border-color:#c85a5a; color:#8a3a3a; animation:shake .4s ease;} @keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} } .feedback{ min-height:24px; margin-top:16px; font-size:14px; font-weight:600; } .feedback.bad{color:#a23c3c;} .feedback.good{color:#357a45;} .date-input{ width:100%; padding:14px 16px; border-radius:12px; border:2px solid var(--blush); font-family:'Heebo', sans-serif; font-size:18px; text-align:center; letter-spacing:1px; color:var(--ink); background:#fff; } .date-input:focus{outline:none; border-color:var(--wine);} .date-hint{font-size:12px; color:#8a7268; margin-top:8px;} .text-input{ width:100%; padding:14px 16px; border-radius:12px; border:2px solid var(--blush); font-family:'Heebo', sans-serif; font-size:16px; text-align:center; color:var(--ink); background:#fff; } .text-input:focus{outline:none; border-color:var(--wine);} /* ---------- FINAL - always dark & dramatic, regardless of theme ---------- */ #screen-final{ background:radial-gradient(circle at 50% 15%, #232228 0%, #0c0c0e 70%); position:relative; overflow:hidden; min-height:100vh; } .final-rain{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; } .falling-item{ position:absolute; top:-80px; animation:fallDown linear forwards; will-change:transform, opacity; } @keyframes fallDown{ 0%{ transform:translateY(0) rotate(0deg); opacity:0; } 8%{ opacity:1; } 92%{ opacity:.9; } 100%{ transform:translateY(115vh) rotate(340deg); opacity:0; } } .falling-heart{ color:#e2264d; text-shadow:0 0 14px rgba(226,38,77,.65); } .falling-photo{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:2px solid rgba(255,255,255,.18); box-shadow:0 8px 18px rgba(0,0,0,.55); filter:grayscale(15%); } .final-card{ width:min(92vw, 560px); z-index:2; position:relative; background:rgba(18,18,21,.72); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:44px 30px; backdrop-filter:blur(6px); box-shadow:0 30px 60px rgba(0,0,0,.55); } .final-icon{font-size:52px; margin-bottom:8px; filter:drop-shadow(0 0 12px rgba(226,38,77,.5));} .final-title{ font-family:'Frank Ruhl Libre', serif; font-size:clamp(26px,6vw,36px); color:#ff3b57; font-weight:700; margin-bottom:18px; text-shadow:0 0 22px rgba(255,59,87,.35); } .final-body{ font-family:'Frank Ruhl Libre', serif; font-size:18px; line-height:1.9; color:#efe9e2; margin-bottom:12px; } .final-note{ background:rgba(255,255,255,.03); border:2px dashed #ff3b57; border-radius:16px; padding:24px 22px; margin-top:22px; } #screen-final .signature{ color:#ff8fa3; } #screen-final .btn{ background:#ff3b57; color:#141416; box-shadow:0 10px 26px rgba(255,59,87,.35); } .footer-credit{ position:fixed; bottom:10px; left:0; right:0; text-align:center; font-size:11px; color:var(--ink); opacity:.45; z-index:1; } @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} } /* ---------- MOBILE ---------- */ @media (max-width: 480px){ .screen{ padding:22px 12px; } .notebook{ padding:36px 20px 30px; } .quiz-card{ padding:26px 18px; } .final-card{ padding:32px 20px; } .letter-title{ font-size:20px; margin-bottom:14px; } .letter-body{ font-size:15.5px; line-height:1.85; } .q-title{ font-size:19px; margin-bottom:18px; } .choice{ padding:15px 14px; font-size:15px; } .btn{ width:100%; padding:15px 20px; font-size:15px; } .date-input, .text-input{ font-size:16px; padding:13px 14px; } .photo-card img{ max-width:100%; } .photo-grid{ gap:20px; } .envelope{ width:80vw; height:53vw; } .final-icon{ font-size:44px; } .final-title{ font-size:24px; } .final-body{ font-size:16px; } .signature{ font-size:18px; } } @media (max-width: 360px){ .q-title{ font-size:17px; } .letter-title{ font-size:18px; } }