/** * Yoice System Notices – Frontend CSS v0.1.1 * * ENFOLD-KOMPATIBILITÄT: * Enfold / Avia können auf übergeordneten Elementen (#top, #main, .av-navbar) * CSS-Eigenschaften wie transform, filter oder will-change setzen. * Diese erzeugen einen neuen Stacking Context, in dem position:fixed * relativ zum Container statt zum Viewport gilt – der Banner wird * dadurch unsichtbar oder hinter dem Header versteckt. * * Lösung: Der Banner wird NICHT im normalen DOM-Fluss platziert, * sondern via JS in document.body verschoben (siehe ysn-frontend.js). * Das CSS setzt ihn als direktes Kind von , wo kein * fremder Stacking Context greift. */ /* ── Basis-Banner (position:fixed, direkt unter ) ─── */ .ysn-banner { position: fixed; top: 0; left: 0; right: 0; /* * z-index: Enfolds Header (.av-header-sticky) nutzt z-index ~1000. * WordPress Adminbar (#wpadminbar) nutzt z-index 99999. * Unser Banner: 100000 – liegt über dem Adminbar, darunter * nur wenn Adminbar aktiv ist, deshalb: Adminbar-Offset via JS. */ z-index: 100000; width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.45; text-align: center; padding: 12px 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); /* Kein transform, kein filter, kein will-change – sonst entsteht wieder ein neuer Stacking Context */ } .ysn-banner-inner { max-width: 1200px; margin: 0 auto; } .ysn-banner a { color: inherit; font-weight: 700; text-decoration: underline; } /* ── Typen ───────────────────────────────────────────────── */ .ysn-type-info { background: #1c4f54; color: #ffffff; } .ysn-type-success { background: #1f7a4d; color: #ffffff; } .ysn-type-warning { background: #b86b00; color: #ffffff; } .ysn-type-error { background: #9f1d1d; color: #ffffff; } /* ── Sichtbarkeit ────────────────────────────────────────── */ .ysn-banner.ysn-is-hidden { display: none; } .ysn-banner.ysn-fade-out { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } /* ── WordPress Adminbar Offset ───────────────────────────── */ /* * Wenn die WP Adminbar sichtbar ist (#wpadminbar), * rückt WordPress den Body um 32px nach unten. * Der fixierte Banner muss dann ebenfalls 32px tiefer starten. * Wird via JS gesetzt (siehe ysn-frontend.js), hier als Fallback: */ .admin-bar .ysn-banner { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .ysn-banner { top: 46px; } } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 768px) { .ysn-banner { font-size: 14px; padding: 10px 12px; } }