/* ============================================================================ Chattambees – custom styles Tailwind (via CDN) handles most utilities. This file holds the keyframe animations, scrollbar styling, and a few mobile refinements. ========================================================================== */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-12px) rotate(3deg); } } @keyframes buzz { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-2px, 1px) rotate(-1deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 60% { transform: translate(-1px, -2px) rotate(0deg); } 80% { transform: translate(2px, 2px) rotate(1deg); } } @keyframes wingFlutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.4); } } .animate-float { animation: float 4s ease-in-out infinite; } .animate-float-delayed { animation: float 4.5s ease-in-out infinite; animation-delay: 1.5s; } .animate-buzz { animation: buzz 0.3s ease-in-out infinite alternate; } .wing-left { transform-origin: right center; animation: wingFlutter 0.15s ease-in-out infinite; } .wing-right { transform-origin: left center; animation: wingFlutter 0.15s ease-in-out infinite; } /* Scrollbars inside the cart / chat */ .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #fffbeb; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #fcd34d; border-radius: 9999px; } /* --------------------------------------------------------------------------- Mobile refinements -------------------------------------------------------------------------- */ /* Keep the floating chat widget within tiny viewports */ #chat-bubble { width: min(20rem, calc(100vw - 3rem)); } /* Toast never wider than the screen */ #custom-toast { max-width: 92vw; } /* Give tap targets a comfortable minimum on touch devices */ @media (hover: none) { button, a { -webkit-tap-highlight-color: transparent; } } /* --------------------------------------------------------------------------- Accessibility: respect users who prefer reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .animate-float, .animate-float-delayed, .animate-buzz, .wing-left, .wing-right, .animate-bounce, .animate-ping, .animate-pulse { animation: none !important; } * { scroll-behavior: auto !important; } } /* Visible keyboard focus for accessibility */ :focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; border-radius: 6px; } /* ========================================================================== PRE-LAUNCH MODE Toggled by `PRELAUNCH` in public/js/config.js, which adds `.prelaunch` to (see main.js). While active it hides every price, the cart, and all buy actions, and shows a "launching soon" state instead. Flip PRELAUNCH to false on launch day and everything below simply switches off. ========================================================================== */ /* elements that should ONLY ever show in pre-launch (e.g. the top banner) */ .prelaunch-only { display: none; } body.prelaunch .prelaunch-only { display: block; } /* hide standalone prices + the header cart button */ body.prelaunch .price-tag, body.prelaunch .cart-trigger { display: none !important; } /* product cards: swap the price + add-to-cart row for a soft "soon" pill */ body.prelaunch .card-action { justify-content: flex-start; } body.prelaunch .card-action > * { display: none !important; } body.prelaunch .card-action::before { content: "\01F41D Launching soon"; display: inline-flex; align-items: center; font-weight: 800; font-size: 0.8rem; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 0.35rem 0.75rem; border-radius: 9999px; } /* customizer studios: hide the price block + adopt button, keep design play */ body.prelaunch .custom-action { justify-content: flex-start; } body.prelaunch .custom-action > * { display: none !important; } body.prelaunch .custom-action::before { content: "\01F41D Launching soon \2014 design yours now, order the moment we open."; font-weight: 800; font-size: 0.85rem; color: #b45309; }