/* ============================================================ Tlačítko "Do košíku" – verze 9 (finální) ------------------------------------------------------------ Soubor: tlacitko-do-kosiku-5.css Verze: v1 (nový název kvůli server cache) E-shop: vercajk-shop.cz (Shoptet, šablona Tomáš Hlad) Změny oproti v8 (-4): • Zrušeny verzálky (text-transform) + velký rozpal písmen → text "Do košíku" se vejde na jeden řádek i v úzké kartě • Přidán white-space: nowrap (pojistka proti zalomení) Vlastnosti: • Oranžová akce #fe4100, font Arial, 19px + bold (WCAG) • Hover #e83c00 + decentní pulzující glow • Zaoblené rohy 8px • Sjednoceno listing + detail, skryté ikony šablony ============================================================ */ :root { --vs-cta-orange: #fe4100; /* oranžová akce – default */ --vs-cta-orange-hover: #e83c00; /* hover dle palety */ --vs-cta-orange-deep: #d63800; /* tmavší – kliknutí */ --vs-cta-font: Arial, "Helvetica Neue", Helvetica, sans-serif; } /* ---------------------------------------------------------- POZADÍ TLAČÍTKA – oranžová, zaoblené rohy, font Arial ---------------------------------------------------------- */ html body .add-to-cart-button, html body button.btn-cart, html body .pr-action .add-to-cart-button, html body .pr-action button.btn-cart, html body .add-to-cart-button[type="submit"] { background-color: var(--vs-cta-orange) !important; background-image: none !important; border: 1px solid var(--vs-cta-orange) !important; border-radius: 8px !important; font-family: var(--vs-cta-font) !important; font-size: 19px !important; /* WCAG: min 18,66px pro bílou na #fe4100 */ font-weight: 700 !important; letter-spacing: 0.3px !important; white-space: nowrap !important; /* pojistka proti zalomení na 2 řádky */ text-decoration: none !important; transition: box-shadow 0.25s ease, background-color 0.2s ease !important; } /* ---------------------------------------------------------- BÍLÝ TEXT + FONT – defenzivní selektory (přebití šablony) ---------------------------------------------------------- */ html body .add-to-cart-button, html body .add-to-cart-button *, html body .add-to-cart-button span, html body button.btn-cart, html body button.btn-cart *, html body button.btn-cart span, html body .pr-action .add-to-cart-button, html body .pr-action .add-to-cart-button *, html body .pr-action .add-to-cart-button span, html body .pr-action button.btn-cart, html body .pr-action button.btn-cart *, html body .pr-action button.btn-cart span, html body button[data-testid="buttonAddToCart"], html body button[data-testid="buttonAddToCart"] *, html body button[data-testid="buttonAddToCart"] span { color: #ffffff !important; font-family: var(--vs-cta-font) !important; } /* ---------------------------------------------------------- HOVER / FOCUS – tmavší #e83c00 + pulzující glow ---------------------------------------------------------- PULSE LADĚNÍ: • Rychlost: změň "2.5s" → 1.6s rychleji / 3.5s pomaleji • Síla: čísla v rgba(254,65,0, 0.NN) – vyšší = silnější ---------------------------------------------------------- */ html body .add-to-cart-button:hover, html body button.btn-cart:hover, html body .pr-action .add-to-cart-button:hover, html body .add-to-cart-button:focus, html body button.btn-cart:focus { background-color: var(--vs-cta-orange-hover) !important; border-color: var(--vs-cta-orange-hover) !important; animation: vsPulseGlow 2.5s ease-in-out infinite !important; } @keyframes vsPulseGlow { 0%, 100% { box-shadow: 0 0 12px rgba(254, 65, 0, 0.45), 0 0 24px rgba(254, 65, 0, 0.20); } 50% { box-shadow: 0 0 20px rgba(254, 65, 0, 0.60), 0 0 38px rgba(254, 65, 0, 0.30); } } /* ---------------------------------------------------------- ACTIVE – tmavší při kliknutí (feedback) ---------------------------------------------------------- */ html body .add-to-cart-button:active, html body button.btn-cart:active, html body .pr-action .add-to-cart-button:active { background-color: var(--vs-cta-orange-deep) !important; border-color: var(--vs-cta-orange-deep) !important; animation: none !important; } /* ---------------------------------------------------------- PŘÍSTUPNOST – uživatelé s "Reduce motion" v OS ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html body .add-to-cart-button:hover, html body button.btn-cart:hover, html body .add-to-cart-button:focus, html body button.btn-cart:focus { animation: none !important; box-shadow: 0 0 16px rgba(254, 65, 0, 0.55), 0 0 32px rgba(254, 65, 0, 0.25) !important; } } /* ---------------------------------------------------------- SKRYTÍ IKON UVNITŘ TLAČÍTKA (zelený košík apod.) ---------------------------------------------------------- */ html body .add-to-cart-button svg, html body .add-to-cart-button i, html body .add-to-cart-button img, html body .add-to-cart-button picture, html body .add-to-cart-button .icon, html body .add-to-cart-button .ico, html body .add-to-cart-button [class^="icon-"], html body .add-to-cart-button [class^="ico-"], html body .add-to-cart-button [class*=" icon-"], html body .add-to-cart-button [class*=" ico-"], html body button.btn-cart svg, html body button.btn-cart i, html body button.btn-cart img, html body button.btn-cart picture, html body button.btn-cart .icon, html body button.btn-cart .ico, html body button.btn-cart [class^="icon-"], html body button.btn-cart [class^="ico-"] { display: none !important; } /* Skrytí ::before / ::after pseudo-elementů ze šablony */ html body .add-to-cart-button::before, html body .add-to-cart-button::after, html body button.btn-cart::before, html body button.btn-cart::after { content: none !important; background: none !important; display: none !important; }