/* ========================================================================== Kultur Cookie Consent – Banner Styles Follows design tokens from kultur-wp-2 theme (modern.css). ========================================================================== */ /* Backdrop */ .kultur-cookie-backdrop { position: fixed; inset: 0; z-index: 999998; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .kultur-cookie-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Banner dialog */ .kultur-cookie-banner { position: fixed; z-index: 999999; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); width: calc(100% - 32px); max-width: 520px; background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .kultur-cookie-banner.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } /* Inner padding */ .kultur-cookie-banner__inner { padding: 36px 32px 28px; } /* Title */ .kultur-cookie-banner__title { margin: 0 0 12px; font-family: 'bebas-neue-pro', sans-serif; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: #232323; } /* Body text */ .kultur-cookie-banner__text { margin: 0 0 28px; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55; color: #555; } /* Button row */ .kultur-cookie-banner__buttons { display: flex; gap: 12px; margin-bottom: 20px; } /* Shared button base */ .kultur-cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 20px; border-radius: 6px; cursor: pointer; font-family: 'bebas-neue-pro', sans-serif; letter-spacing: 0.04em; text-align: center; white-space: nowrap; transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* "Nur erforderliche" – subtle */ .kultur-cookie-btn--essential { flex: 1; font-size: 15px; color: #777; background: transparent; border: 1.5px solid #ddd; } .kultur-cookie-btn--essential:hover { color: #444; border-color: #bbb; transform: translateY(-1px); } /* "Alle akzeptieren" – prominent */ .kultur-cookie-btn--all { flex: 1.3; font-size: 20px; color: #111; background: #7cfb30; border: 1.5px solid #7cfb30; } .kultur-cookie-btn--all:hover { background: #5ab822; border-color: #5ab822; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(124, 251, 48, 0.3); } /* Footer links */ .kultur-cookie-banner__links { text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; color: #999; } .kultur-cookie-banner__links a { color: #888; text-decoration: none; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .kultur-cookie-banner__links a:hover { color: #232323; } .kultur-cookie-banner__sep { margin: 0 8px; color: #ccc; } /* Scroll lock applied to while banner is active */ html.kultur-cookie-no-scroll { overflow: hidden; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 480px) { .kultur-cookie-banner__inner { padding: 28px 20px 22px; } .kultur-cookie-banner__title { font-size: 24px; } .kultur-cookie-banner__text { font-size: 14px; } /* Stack buttons vertically, "Alle akzeptieren" first */ .kultur-cookie-banner__buttons { flex-direction: column-reverse; gap: 10px; } .kultur-cookie-btn--essential, .kultur-cookie-btn--all { flex: none; width: 100%; } }