.bday-club-btn { background-color: #fff; color: #333; border: 1px solid #333; } .bday-club-btn .fab-label { display: inline-block; font-size: 14px; line-height: 1.3; } .bday-club-btn-holder-circle { position: fixed; top: auto; left: auto; right: 0.5rem; bottom: 90px; z-index: 1000; transition: bottom 0.3s; } .bday-club-btn-circle { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); cursor: pointer; transition: width 0.3s linear, height 0.3s linear, border-radius 0.3s linear, padding 0.3s linear, background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear, box-shadow 0.2s linear; overflow: hidden; } .bday-club-btn-circle:focus-visible { outline: #333 solid 3px; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bday-club-btn-circle { transition: none !important; } } .bday-club-btn-circle .fab-icon-wrapper { transition: transform 0.4s linear; } .fab-icon-wrapper { position: relative; width: 1em; height: 1em; display: inline-block; } .fab-icon-wrapper i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 26px; pointer-events: none; opacity: 1; } .fab-icon-wrapper i.fa-gift { font-size: 32px; } .bday-club-btn-circle .fab-label { position: absolute; left: 45px; width: auto; height: auto; padding: 3px 5px; white-space: nowrap; opacity: 0; transform: translateX(-10px); transition: opacity 0.2s linear, transform 0.4s linear; } .bday-club-btn-circle .fab-label b, .bday-club-btn-circle .fab-label strong { font-weight: 700; } .bday-club-btn-circle.expanded { width: var(--fab-expanded-width, 225px); height: 70px; border-radius: 25px; justify-content: flex-start; padding-left: 15px; padding-right: 10px; align-items: center; gap: 12px; } .bday-club-btn-circle.expanded .fab-icon-wrapper { transform: translateX(10px); } .bday-club-btn-circle.expanded .fab-label { opacity: 1; transform: translateX(5px); } .bday-club-btn-circle.active { animation: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } @media (max-width: 500px) { .bday-club-btn-circle, .bday-club-btn-circle.expanded { max-width: 395px; } } @media (max-width: 450px) { .bday-club-btn-circle, .bday-club-btn-circle.expanded { max-width: 380px; } } @media (max-width: 400px) { .bday-club-btn-circle, .bday-club-btn-circle.expanded { max-width: 350px; } } @media (max-width: 320px) { .bday-club-btn-circle, .bday-club-btn-circle.expanded { max-width: 315px; } } .bday-club-btn-tile { position: fixed; top: 50%; right: 20px; width: 220px; margin-top: -110px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; transform: translateY(-50%) rotate(-90deg); transform-origin: right center; border-radius: 5px 5px 0 0; box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s; cursor: pointer; z-index: 1000; } .bday-club-btn-tile:focus-visible { outline: #333 solid 3px; outline-offset: 2px; } .bday-club-btn-tile.active { transform: translateY(-50%) rotate(-90deg) scale(0.97); box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); } .bday-club-btn-tile .fab-icon-wrapper { position: relative; width: 24px; height: 24px; flex-shrink: 0; } .bday-club-btn-tile .fab-icon-wrapper i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; transition: transform 0.3s; } .bday-club-btn-tile .fab-label { width: 165px; white-space: nowrap; text-align: center; overflow: hidden; } .bday-club-btn-tile .spin-once { animation: 0.8s ease-in-out spinOnce; } @keyframes spinOnce { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } } @media (max-width: 767px) { .bday-club-btn-holder-circle { right: 0.5rem; bottom: 120px; } .bday-club-btn-circle { width: 55px; height: 55px; } .fab-icon-wrapper i { font-size: 26px; } .fab-icon-wrapper i.fa-gift { font-size: 30px; } .bday-club-btn-tile { right: 15px; width: 190px; margin-top: -120px; padding: 5px 7px; gap: 5px; } .bday-club-btn-tile .fab-label { font-size: 13px; } .bday-club-btn-tile .fab-icon-wrapper i { font-size: 22px; } } .confetti-container { position: fixed; pointer-events: none; width: 0; height: 0; z-index: 2000; } .confetti-piece { position: absolute; width: 6px; height: 12px; opacity: 0.8; transform: translate(-50%, -50%); animation: 1s ease-out forwards confetti-burst; } @keyframes confetti-burst { 0% { transform: translate(-50%, -50%) translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rotation)); opacity: 0; } } .visuallyhidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; background: #fff; color: #000; }