/* ========================================================= FH HERREN — Rückmeldung beim Hinzufügen zum Warenkorb Gehört zu inc/fhh-cart-feedback.php und js/fhh-add-to-cart.js. Wird auf allen Seiten geladen, weil der Header-Zähler überall steht. ========================================================= */ /* --------------------------------------------------------- 1. Header-Zähler --------------------------------------------------------- */ /* * Leerer Warenkorb = kein Zähler. Ein roter «0»-Kreis liest sich wie eine * Meldung, obwohl nichts passiert ist. * * Die Desktop-Variante braucht diese Regel zwingend: .sh-cart-count setzt * display:block und würde das [hidden]-Attribut sonst überstimmen. */ .sh-cart-count[hidden], .fhh-mh-cart__count[hidden] { display: none; } /* Kurzer Puls, sobald sich der Wert ändert — der Blickanker zum Warenkorb. */ .sh-cart-count.is-bumped, .fhh-mh-cart__count.is-bumped { animation: fhhCartBump 0.45s ease; } @keyframes fhhCartBump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } } /* --------------------------------------------------------- 2. Button-Zustände auf der Produktseite --------------------------------------------------------- */ /* * Während des Requests ist der Button disabled. Ohne diese Regel greift * .fhh-add-btn[disabled] mit cursor:not-allowed — falsche Aussage, es lädt ja. */ .fhh-add-btn.is-busy, .fhh-add-btn.is-busy[disabled] { opacity: 0.75; cursor: progress; pointer-events: none; } /* Bestätigung direkt am Ort des Klicks. */ .fhh-add-btn.is-added { background: var(--fhh-success, #15803d) !important; cursor: default; } .fhh-add-btn.is-added:hover { background: var(--fhh-success, #15803d) !important; } /* --------------------------------------------------------- 3. Toast --------------------------------------------------------- */ /* * Eigene Tokens: Der Toast hängt am und damit ausserhalb von * .fhh-product-page, wo das Theme seine Farbwerte definiert. */ .fhh-toast-host { --fhh-brand: #ee3f22; --fhh-brand-bg: #fff7f5; --fhh-ink: #222; --fhh-line: #e0e0e0; position: fixed; top: 96px; right: 20px; z-index: 9999; width: 380px; max-width: calc(100vw - 40px); pointer-events: none; } /* * Grid statt einer Zeile: Produktnamen sind hier lang («Herra Schleifscheiben * 15-Loch Klett Ø150mm»). Nebeneinander würde der Text auf wenige Zeichen pro * Zeile zusammengequetscht, sobald der CTA daneben steht. */ .fhh-toast { pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text close" "cta cta cta"; align-items: start; gap: 12px; padding: 16px 20px; border: 1px solid var(--fhh-line); border-left: 4px solid var(--fhh-brand); border-radius: 10px; background: var(--fhh-brand-bg); color: var(--fhh-ink); font-size: 15px; font-weight: 600; line-height: 1.5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); animation: fhhToastIn 0.25s ease both; } .fhh-toast:before { content: "✓"; grid-area: icon; color: var(--fhh-brand); font-size: 16px; font-weight: 800; line-height: 1.5; } .fhh-toast__text { grid-area: text; margin: 0; font: inherit; } .fhh-toast__cta { grid-area: cta; justify-self: stretch; padding: 12px 22px; text-align: center; border-radius: 6px; background: var(--fhh-brand); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: background-color 0.15s ease; } .fhh-toast__cta:hover { background: #d13e21; color: #fff !important; } .fhh-toast__close { grid-area: close; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fhh-ink); font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.15s ease; } .fhh-toast__close:hover { opacity: 1; } .fhh-toast.is-leaving { animation: fhhToastOut 0.2s ease both; } @keyframes fhhToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @keyframes fhhToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(16px); } } /* --------------------------------------------------------- 4. Mobile — der Toast kommt von unten, wo der Daumen ist --------------------------------------------------------- */ @media (max-width: 640px) { .fhh-toast-host { top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; max-width: none; } /* Das Grid trägt sich selbst — nur die Polsterung wird knapper. */ .fhh-toast { padding: 14px 16px; } @keyframes fhhToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes fhhToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px); } } } /* --------------------------------------------------------- 5. Reduzierte Bewegung --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sh-cart-count.is-bumped, .fhh-mh-cart__count.is-bumped, .fhh-toast, .fhh-toast.is-leaving { animation: none; } .fhh-toast__cta, .fhh-toast__close { transition: none; } } /* --------------------------------------------------------- 5. Statische Variante — ohne JS aus dem Footer --------------------------------------------------------- */ /* * Kommt aus fhh_render_pending_cart_notices() in inc/fhh-cart-feedback.php: * dieselbe Box, aber serverseitig gerendert. Unterschied im Detail — «×» ist * hier ein Link auf die Seite ohne die Warenkorb-Parameter, damit Schliessen * auch ohne JavaScript funktioniert. */ .fhh-toast-host--static .fhh-toast__close { display: flex; align-items: center; justify-content: center; text-decoration: none; } /* Fehler und Hinweise dürfen nicht wie eine Bestätigung aussehen. */ .fhh-toast--error { border-left-color: #c0392b; background: #fdf3f2; } .fhh-toast--error:before { content: "!"; color: #c0392b; } .fhh-toast--notice { border-left-color: #2563eb; background: #f5f8ff; } .fhh-toast--notice:before { content: "i"; color: #2563eb; }