/** * Cookie Consent Banner Styles * * Lightweight, LCP-safe, cache-compatible. * Uses CSS Custom Properties set via inline critical CSS in . * * @package CookiesNihongoSchool */ /* ── Banner ── */ .ns-cookie-banner { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; font-size: 14px; line-height: 1.5; color: var(--ns-ck-text, #e0e0e0); background: var(--ns-ck-bg, #1a1a2e); box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.25); padding: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .ns-cookie-banner.ns-active { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Top bar slides down */ .ns-cookie-pos-top-bar.ns-active { transform: translateY(0); } .ns-cookie-pos-top-bar { transform: translateY(-20px); box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } /* Center modal overlay */ .ns-cookie-pos-center-modal { transform: translate(-50%, -50%) scale(0.95); border-radius: 16px; } .ns-cookie-pos-center-modal.ns-active { transform: translate(-50%, -50%) scale(1); } /* Corner styles */ .ns-cookie-pos-bottom-left, .ns-cookie-pos-bottom-right { border-radius: 12px; transform: translateY(20px) scale(0.95); } .ns-cookie-pos-bottom-left.ns-active, .ns-cookie-pos-bottom-right.ns-active { transform: translateY(0) scale(1); } /* ── Banner Inner (ID selector for specificity over Elementor) ── */ #ns-cookie-banner .ns-cookie-banner__inner { padding: var(--ns-ck-ban-pv, 18px) var(--ns-ck-ban-ph, 24px) !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 16px !important; box-sizing: border-box !important; } #ns-cookie-banner .ns-cookie-banner__text { flex: 1 1 40px !important; min-width: 0 !important; } #ns-cookie-banner .ns-cookie-banner__text p { margin: 0 !important; font-size: var(--ns-ck-msg-fs, 13px) !important; line-height: 1.6 !important; color: var(--ns-ck-text, #e0e0e0) !important; padding: 0 !important; letter-spacing: normal !important; text-transform: none !important; } #ns-cookie-banner .ns-cookie-privacy-link { color: var(--ns-ck-settings, #3b82f6) !important; text-decoration: underline !important; text-underline-offset: 2px !important; margin-left: 4px !important; } #ns-cookie-banner .ns-cookie-privacy-link:hover { opacity: 0.8 !important; } /* ── Buttons (full reset to override Elementor) ── */ #ns-cookie-banner .ns-cookie-banner__actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; flex-shrink: 0 !important; } #ns-cookie-banner .ns-cookie-btn, #ns-cookie-banner button.ns-cookie-btn, #ns-cookie-banner .ns-cookie-btn:visited, .ns-cookie-modal .ns-cookie-btn, .ns-cookie-modal button.ns-cookie-btn, .ns-cookie-modal .ns-cookie-btn:visited { /* Reset all Elementor/theme inherited styles */ all: unset !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 14px !important; /* Smaller padding */ border: none !important; border-radius: var(--ns-ck-radius, 6px) !important; font-size: 12px !important; /* Smaller text */ font-weight: 600 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; cursor: pointer !important; transition: opacity 0.15s ease, transform 0.1s ease, background 0.2s ease !important; white-space: nowrap !important; line-height: 1.4 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; text-align: center !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; margin: 0 !important; min-height: auto !important; min-width: auto !important; } #ns-cookie-banner .ns-cookie-btn:hover, #ns-cookie-banner button.ns-cookie-btn:hover, .ns-cookie-modal .ns-cookie-btn:hover, .ns-cookie-modal button.ns-cookie-btn:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; text-decoration: none !important; box-shadow: none !important; } #ns-cookie-banner .ns-cookie-btn:active, #ns-cookie-banner button.ns-cookie-btn:active, .ns-cookie-modal .ns-cookie-btn:active, .ns-cookie-modal button.ns-cookie-btn:active { transform: translateY(0) !important; } #ns-cookie-banner .ns-cookie-btn:focus, #ns-cookie-banner button.ns-cookie-btn:focus, .ns-cookie-modal .ns-cookie-btn:focus, .ns-cookie-modal button.ns-cookie-btn:focus { outline: 2px solid var(--ns-ck-settings, #3b82f6) !important; outline-offset: 2px !important; } #ns-cookie-banner .ns-cookie-btn--accept, .ns-cookie-modal .ns-cookie-btn--accept, #ns-cookie-banner .ns-cookie-btn--reject, .ns-cookie-modal .ns-cookie-btn--reject, #ns-cookie-banner .ns-cookie-btn--settings, .ns-cookie-modal .ns-cookie-btn--settings { background: #d32f2f !important; /* Red background */ color: #ffffff !important; /* White text */ } #ns-cookie-banner .ns-cookie-btn--settings:hover, .ns-cookie-modal .ns-cookie-btn--settings:hover, #ns-cookie-banner .ns-cookie-btn:hover, .ns-cookie-modal .ns-cookie-btn:hover { background: #b71c1c !important; /* Darker red */ color: #ffffff !important; } /* ── Floating Icon ── */ .ns-cookie-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ns-ck-bg, #1a1a2e); color: var(--ns-ck-text, #e0e0e0); border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; padding: 0; cursor: pointer; opacity: 0; transform: scale(0.8); } .ns-cookie-icon.ns-active { opacity: 1; transform: scale(1); } .ns-cookie-icon:hover { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } .ns-cookie-icon svg { width: 22px; height: 22px; } /* ── Preferences Modal ── */ .ns-cookie-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 16px; } .ns-cookie-modal.ns-active { display: flex; } .ns-cookie-modal__inner { background: var(--ns-ck-bg, #1a1a2e); border-radius: 16px; max-width: 600px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4); color: var(--ns-ck-text, #e0e0e0); animation: nsModalIn 0.25s ease; } @keyframes nsModalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .ns-cookie-modal__header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 24px 32px 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .ns-cookie-modal__header h2 { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; color: var(--ns-ck-text, #e0e0e0) !important; } .ns-cookie-modal__close, button.ns-cookie-modal__close { all: unset !important; background: none !important; border: none !important; color: var(--ns-ck-text, #e0e0e0) !important; font-size: 0 !important; /* Hide text, just SVG */ cursor: pointer !important; padding: 8px !important; line-height: 1 !important; opacity: 0.6 !important; transition: opacity 0.15s, background 0.15s !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; margin: -8px -8px -8px 0 !important; } .ns-cookie-modal__close:hover, button.ns-cookie-modal__close:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.1) !important; } .ns-cookie-modal__body { padding: 20px 32px !important; overflow-y: auto !important; flex: 1 !important; } .ns-cookie-modal__footer { padding: 16px 32px 24px !important; display: flex !important; gap: 12px !important; justify-content: flex-end !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } /* ── Cookie Category Accordion ── */ .ns-cookie-category { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 12px 0; } .ns-cookie-category:last-child { border-bottom: none; } .ns-cookie-category__header { display: flex; align-items: center; gap: 10px; } .ns-cookie-category__name { font-weight: 600; font-size: 14px; flex: 1; } .ns-cookie-category__count { font-size: 12px; opacity: 0.5; } .ns-cookie-category__expand { background: none; border: none; color: var(--ns-ck-text, #e0e0e0); cursor: pointer; padding: 4px; opacity: 0.5; transition: transform 0.2s ease, opacity 0.15s; } .ns-cookie-category__expand:hover { opacity: 1; } .ns-cookie-category__expand[aria-expanded="true"] { transform: rotate(180deg); } .ns-cookie-category__desc { display: none; margin-top: 8px; padding-left: 46px; } .ns-cookie-category__desc.ns-open { display: block; } .ns-cookie-category__desc p { margin: 0 0 8px; font-size: 12px; opacity: 0.7; line-height: 1.5; } /* ── Cookie Table in Modal ── */ .ns-cookie-category__table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; } .ns-cookie-category__table th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; } .ns-cookie-category__table td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); vertical-align: top; word-break: break-word; } /* ── Toggle Switch ── */ .ns-cookie-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .ns-cookie-toggle__input { opacity: 0; width: 0; height: 0; position: absolute; } .ns-cookie-toggle__slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); border-radius: 20px; cursor: pointer; transition: background 0.2s ease; } .ns-cookie-toggle__slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; } .ns-cookie-toggle__input:checked + .ns-cookie-toggle__slider { background: var(--ns-ck-accept, #4ade80); } .ns-cookie-toggle__input:checked + .ns-cookie-toggle__slider::before { transform: translateX(16px); } .ns-cookie-toggle__input:disabled + .ns-cookie-toggle__slider { opacity: 0.5; cursor: not-allowed; } /* ── Responsive ── */ @media (max-width: 600px) { #ns-cookie-banner .ns-cookie-banner__inner { flex-direction: column !important; padding: 14px !important; gap: 10px !important; } #ns-cookie-banner .ns-cookie-banner__text { flex: 1 1 auto !important; width: 100% !important; } #ns-cookie-banner .ns-cookie-banner__actions { width: 100% !important; } #ns-cookie-banner .ns-cookie-btn, #ns-cookie-banner button.ns-cookie-btn, .ns-cookie-modal .ns-cookie-btn, .ns-cookie-modal button.ns-cookie-btn { flex: 1 !important; padding: 10px 12px !important; font-size: 12px !important; width: 100% !important; justify-content: center !important; } .ns-cookie-modal__footer { flex-direction: column !important; padding: 16px !important; gap: 8px !important; } .ns-cookie-modal__inner { max-height: 90vh; border-radius: 12px; } .ns-cookie-category__desc { padding-left: 0; margin-top: 10px; } .ns-cookie-category__table { font-size: 10px; } .ns-cookie-pos-bottom-left, .ns-cookie-pos-bottom-right { left: 8px !important; right: 8px !important; max-width: none !important; } }