/* ========================================================================== SUGOI HANDMADE — birthday splash -------------------------------------------------------------------------- The gift-wrapping. Shown once, then never again on that device. Same sticker language as the site: her badge, black outlines, gold pops. To retire it after the birthday: set birthday.enabled = false in js/config.js. To delete it for good: remove this file, js/birthday.js, and the #birthday block in index.html. ========================================================================== */ /* Hidden by default. The inline script in index.html adds .bday-on to before first paint, so there's no flash either way. */ .bday { display: none; } html.bday-on { overflow: hidden; } html.bday-on .bday { display: grid; } .bday { position: fixed; inset: 0; z-index: 999; place-items: center; text-align: center; padding: 2rem 1.25rem; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 18% 12%, rgba(248, 208, 32, .55) 0%, transparent 48%), radial-gradient(ellipse at 84% 20%, rgba(208, 136, 240, .65) 0%, transparent 50%), radial-gradient(ellipse at 50% 96%, rgba(124, 124, 228, .7) 0%, transparent 58%), linear-gradient(165deg, #6B6BDE 0%, #5858D0 60%, #4646B8 100%); transition: opacity .7s ease, visibility .7s; } .bday.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; } .bday__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .bday__inner { position: relative; z-index: 2; max-width: 40rem; animation: bday-rise .9s cubic-bezier(.2, .8, .3, 1) both; } @keyframes bday-rise { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } } /* ---- her badge, bobbing ---- */ .bday__gift { width: clamp(112px, 24vw, 158px); height: auto; margin: 0 auto; animation: bday-bob 2.8s ease-in-out infinite; filter: drop-shadow(0 12px 0 rgba(16, 16, 24, .35)); } @keyframes bday-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } } .bday__eyebrow { font-family: var(--font-hand); font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 700; color: var(--gold); margin: .9rem 0 .1rem; transform: rotate(-1.5deg); } .bday__greeting { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 4.6vw, 2rem); color: #fff; margin: 0; } /* ---- the name, letter by letter ---- */ .bday__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 10vw, 5.2rem); line-height: 1.05; margin: .08em 0 .38em; color: var(--lilac-lt); text-wrap: balance; } .bday__name .ltr { display: inline-block; animation: bday-pop .55s cubic-bezier(.2, 1.5, .4, 1) both; /* faked outline — the badge's letters wear the same black keyline */ text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 6px 8px 0 rgba(16, 16, 24, .3); } .bday__name .ltr--space { width: .32em; } @keyframes bday-pop { from { opacity: 0; transform: translateY(26px) scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } } .bday__msg { font-size: clamp(.98rem, 2.6vw, 1.12rem); color: rgba(255, 255, 255, .88); max-width: 34ch; margin: 0 auto 1.9rem; } /* ---- the button ---- */ .bday__btn { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 3vw, 1.18rem); color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 999px; padding: 1rem 2.4rem; cursor: pointer; box-shadow: 6px 6px 0 var(--ink); transition: transform .14s ease, box-shadow .14s ease, background .18s; animation: bday-breathe 2.8s ease-in-out 1.2s infinite; } .bday__btn:hover { background: var(--lilac); transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); animation: none; } .bday__btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); animation: none; } @keyframes bday-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } .bday__from { font-family: var(--font-hand); font-size: 1.35rem; color: rgba(255, 255, 255, .8); margin: 1.7rem 0 0; } .bday__from span { color: var(--gold); font-weight: 700; } .bday__skip { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 2; background: none; border: 0; font-family: var(--font-body); font-size: .82rem; color: rgba(255, 255, 255, .55); cursor: pointer; padding: .5rem 1rem; } .bday__skip:hover { color: #fff; } /* ---- floating sparkles ---- */ .bday__sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .bday__sparkles span { position: absolute; font-size: 1.5rem; color: var(--gold); opacity: .75; animation: bday-float 9s ease-in-out infinite; } @keyframes bday-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-26px) rotate(14deg); } } @media (max-width: 480px) { .bday__msg { margin-bottom: 1.5rem; } .bday__from { margin-top: 1.3rem; } .bday__name .ltr { text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 4px 5px 0 rgba(16, 16, 24, .3); } } @media (prefers-reduced-motion: reduce) { .bday__inner, .bday__gift, .bday__btn, .bday__name .ltr, .bday__sparkles span { animation: none !important; } .bday__name .ltr { opacity: 1; transform: none; } }