/* * Kemtek Notices — popup styling. * * Self-contained (doesn't rely on the theme's stylesheet being loaded), but * matches its palette and type: cream/navy/gold/red, Oswald display face for * headings, Manrope for body copy, pill buttons, card shadows. */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Manrope:wght@400;500;700&display=swap'); /* Set on while the popup is open, so the page behind it can't scroll. */ html.kemtek-notice-lock { overflow: hidden; } .kemtek-notice-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 18, 16, 0.72); opacity: 0; transition: opacity 0.25s ease; /* Closed (or mid-fade) it must never intercept clicks. */ pointer-events: none; } /* This author rule sets display:flex, which outranks the UA [hidden] rule — so the closed state has to be restated here or the overlay stays in the layer above the page and swallows every click. */ .kemtek-notice-overlay[hidden] { display: none; } .kemtek-notice-overlay.is-open { opacity: 1; pointer-events: auto; } .kemtek-notice-card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); padding: 40px 32px 32px; text-align: center; font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; transform: scale(0.94); transition: transform 0.25s ease; } .kemtek-notice-overlay.is-open .kemtek-notice-card { transform: scale(1); } .kemtek-notice-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(31, 53, 104, 0.06); border: none; border-radius: 50%; color: #1F3568; cursor: pointer; transition: background-color 0.15s ease; } .kemtek-notice-close:hover { background: rgba(31, 53, 104, 0.14); } .kemtek-notice-icon { width: 60px; height: 60px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(201, 150, 46, 0.14); color: #C9962E; } .kemtek-notice-icon svg { width: 28px; height: 28px; } .kemtek-notice-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #C8202E; } .kemtek-notice-title { margin: 0 0 14px; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 700; font-size: clamp(20px, 4vw, 25px); line-height: 1.2; letter-spacing: -0.005em; text-transform: uppercase; color: #1F3568; } .kemtek-notice-body { color: #221F1C; font-size: 15px; line-height: 1.7; text-align: left; } .kemtek-notice-body p { margin: 0 0 14px; } .kemtek-notice-body p:last-child { margin-bottom: 0; } .kemtek-notice-body strong { color: #1F3568; } .kemtek-notice-body a { color: #C8202E; } .kemtek-notice-ok { display: inline-block; margin-top: 24px; padding: 13px 32px; background: #1F3568; color: #fff; font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: 0.02em; text-transform: uppercase; border: 1.5px solid #1F3568; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease; } .kemtek-notice-ok:hover { background: #16264d; } @media (max-width: 480px) { .kemtek-notice-card { padding: 34px 22px 26px; border-radius: 16px; } .kemtek-notice-body { font-size: 14.5px; } } /* Short/landscape phones: the card can be taller than the viewport, so let it scroll internally rather than getting clipped or pushing off-screen. */ @media (max-height: 480px) { .kemtek-notice-overlay { padding: 12px; } .kemtek-notice-card { max-height: calc(100vh - 24px); padding: 24px 22px 20px; } .kemtek-notice-icon { width: 44px; height: 44px; margin-bottom: 10px; } .kemtek-notice-icon svg { width: 22px; height: 22px; } .kemtek-notice-ok { margin-top: 16px; } }