/* ── PABCO Cookie Consent Banner — Styles ──────────────── Reference in your HTML : ──────────────────────────────────────────────────────── */ /* ── Token system ────────────────────────────────────── */ :root { --pabco-navy: #1a4480; /* primary brand blue */ --pabco-steel: #2d6ab4; /* accent blue */ --pabco-rust: #c0392b; /* PABCO red accent */ --pabco-light: #e8eff8; /* pale blue tint */ --pabco-gray: #5a6472; --pabco-border: #c8d4e4; --shadow: 0 -2px 16px rgba(0,0,0,.12); --radius: 4px; --speed: 280ms; } /* ── Banner shell ────────────────────────────────────── */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 3px solid var(--pabco-navy); box-shadow: var(--shadow); z-index: 9999; transform: translateY(100%); transition: transform var(--speed) ease; } #cookie-banner.visible { transform: translateY(0); } .banner-inner { max-width: 1100px; margin: 0 auto; padding: 20px 24px; } /* ── Compact notice row ──────────────────────────────── */ .banner-notice { display: flex; flex-direction: column; align-items: center; gap: 20px; flex-wrap: wrap; } .banner-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .banner-logo svg { width: 36px; height: 36px; color: var(--pabco-navy); } .banner-logo span { font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; color: var(--pabco-navy); text-transform: uppercase; } .banner-text { flex: 1; min-width: 220px; font-size: 1.25rem; color: var(--pabco-gray); line-height: 1.5; } .banner-text strong { color: #1a1a1a; } .banner-text a { color: var(--pabco-steel); text-decoration: underline; } .banner-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } /* ── Buttons ─────────────────────────────────────────── */ .btn { cursor: pointer; border: none; border-radius: var(--radius); font-size: 1.25rem; font-weight: 600; padding: 9px 20px; transition: background var(--speed), color var(--speed), box-shadow var(--speed); white-space: nowrap; font-family: inherit; } .btn:focus-visible { outline: 3px solid var(--pabco-steel); outline-offset: 2px; } .btn-primary { background: var(--pabco-navy); color: #fff; } .btn-primary:hover { background: var(--pabco-steel); } .btn-secondary { background: transparent; color: var(--pabco-navy); border: 1.5px solid var(--pabco-navy); } .btn-secondary:hover { background: var(--pabco-light); } .btn-ghost { background: transparent; color: var(--pabco-gray); border: 1.5px solid var(--pabco-border); } .btn-ghost:hover { background: #f5f5f5; } .btn-sm { font-size: 1.25rem; padding: 7px 14px; } /* ── Preference panel ────────────────────────────────── */ .pref-panel { display: none; margin-top: 16px; border-top: 1px solid var(--pabco-border); padding-top: 16px; } .pref-panel.open { display: block; } .pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } .pref-card { border: 1.5px solid var(--pabco-border); border-radius: var(--radius); padding: 14px 16px; background: #fafbfd; position: relative; } .pref-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .pref-card-head h3 { font-size: 1.5rem; font-weight: 700; color: var(--pabco-navy); } .pref-card p { font-size: 1.25rem; color: var(--pabco-gray); line-height: 1.45; } .badge-required { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--pabco-light); color: var(--pabco-navy); border: 1px solid var(--pabco-border); border-radius: 2px; padding: 2px 6px; } /* ── Toggle switch ───────────────────────────────────── */ .toggle-wrap { display: flex; align-items: center; } .toggle { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: 11px; background: #ccc; position: relative; cursor: pointer; transition: background var(--speed); flex-shrink: 0; border: none; outline: none; } .toggle::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform var(--speed); box-shadow: 0 1px 3px rgba(0,0,0,.25); } .toggle:checked { background: var(--pabco-navy); } .toggle:checked::after { transform: translateX(18px); } .toggle:disabled { opacity: .55; cursor: not-allowed; } .toggle:focus-visible { outline: 3px solid var(--pabco-steel); outline-offset: 2px; } .pref-footer { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; justify-content: center; } /* ── Confirmation toast ──────────────────────────────── */ #toast { position: fixed; bottom: 24px; right: 24px; background: var(--pabco-navy); color: #fff; padding: 12px 20px; border-radius: var(--radius); font-size: 1.25rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--speed), transform var(--speed); z-index: 10000; display: flex; align-items: center; gap: 8px; } #toast.show { opacity: 1; pointer-events: auto; transform: translateY(0); } #toast svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── Re-open button ──────────────────────────────────── */ #reopen-btn { position: fixed; bottom: 20px; left: 20px; background: transparent; color: var(--pabco-navy); border: none; border-radius: 50%; padding: 6px; width: 40px; height: 40px; cursor: pointer; display: none; z-index: 9998; align-items: center; justify-content: center; transition: opacity var(--speed), transform var(--speed); opacity: 0.7; } #reopen-btn:hover { opacity: 1; transform: scale(1.12); } #reopen-btn:focus-visible { outline: 3px solid var(--pabco-steel); outline-offset: 2px; } #reopen-btn svg { width: 28px; height: 28px; display: block; } #reopen-btn.visible { display: flex; } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 600px) { .banner-notice { flex-direction: column; align-items: flex-start; } .banner-actions { width: 100%; justify-content: stretch; } .banner-actions .btn { flex: 1; text-align: center; } .pref-footer { justify-content: stretch; } .pref-footer .btn { flex: 1; text-align: center; } } @media (prefers-reduced-motion: reduce) { #cookie-banner, #toast { transition: none; } }