/* ===================================================================== INOVATIVA — Cookie consent (lišta + modal s nastavením) --------------------------------------------------------------------- Samostatná komponenta. Všechny třídy mají prefix `inv-cc-`, aby nekolidovaly se šablonou Ohio (která používá obecné .banner/.modal/.btn). HTML vkládá assets/js/inovativa-cookies.js do každé stránky. ===================================================================== */ /* Nunito (tělo lišty/modalu) — lokální woff2, latin + latin-ext (české háčky) */ @font-face { font-family: 'Nunito-inv'; src: url(../fonts/nunito-latin.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito-inv'; src: url(../fonts/nunito-latinext.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Kořen komponenty — vlastní proměnné, izolovaný font */ #inv-cc { --cc-l: #2D80C9; --cc-c: #235AB6; --cc-d: #2A479E; --cc-peri: #7FA6E6; --cc-grad: linear-gradient(135deg, #235AB6, #2D80C9); --cc-ink: #1f2740; --cc-muted: #69728c; --cc-faint: #9aa3ba; --cc-line: #e7ebf3; --cc-soft: #f4f6fb; --cc-softer: #eef2f8; --cc-radius: 22px; font-family: 'Nunito-inv', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--cc-ink); -webkit-font-smoothing: antialiased; } #inv-cc *, #inv-cc *::before, #inv-cc *::after { box-sizing: border-box; } /* ======================= SPODNÍ LIŠTA ======================= */ .inv-cc-banner { position: fixed; bottom: 24px; z-index: 99990; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: 1080px; display: flex; align-items: stretch; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 70px rgba(6, 12, 32, .28), 0 4px 14px rgba(6, 12, 32, .14); animation: inv-cc-up .45s cubic-bezier(.2, .8, .2, 1) both; } @keyframes inv-cc-up { from { transform: translateX(-50%) translateY(130%); } to { transform: translateX(-50%) translateY(0); } } /* značkový gradientní dlaždice vlevo */ .inv-cc-art { position: relative; flex: 0 0 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #235AB6 0%, #2D80C9 70%, #3A8FD6 100%); } .inv-cc-art .inv-cc-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(95% 120% at 60% 40%, #000, transparent 82%); mask-image: radial-gradient(95% 120% at 60% 40%, #000, transparent 82%); } .inv-cc-art .inv-cc-blob { position: absolute; width: 120px; height: 120px; border-radius: 60% 60% 60% 8%; left: -30px; bottom: -42px; background: var(--cc-peri); transform: rotate(16deg); opacity: .5; } .inv-cc-art .inv-cc-ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .3); right: -24px; top: -30px; } .inv-cc-art .inv-cc-sym { position: relative; z-index: 1; overflow: visible; } .inv-cc-art .inv-cc-crumb { position: absolute; border-radius: 50%; background: #fff; } .inv-cc-art .inv-cc-spark { position: absolute; } .inv-cc-bbody { flex: 1; display: flex; align-items: center; gap: 34px; padding: 22px 34px; } .inv-cc-btext { flex: 1; } .inv-cc-btext b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; display: block; margin-bottom: 6px; } .inv-cc-btext p { font-size: 13.5px; color: var(--cc-muted); line-height: 1.55; max-width: 80ch; } .inv-cc-btext a { color: var(--cc-c); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(35, 90, 182, .3); cursor: pointer; } .inv-cc-btext a:hover { border-color: var(--cc-c); } .inv-cc-bacts { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; } /* ======================= MODAL NASTAVENÍ ======================= */ .inv-cc-backdrop { position: fixed; inset: 0; z-index: 99991; background: rgba(8, 14, 34, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; animation: inv-cc-fade .2s ease both; } @keyframes inv-cc-fade { from { opacity: 0; } to { opacity: 1; } } .inv-cc-modal { position: relative; width: 760px; max-width: 100%; max-height: calc(100vh - 80px); background: #fff; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 90px rgba(6, 12, 32, .5), 0 4px 14px rgba(6, 12, 32, .3); animation: inv-cc-pop .25s cubic-bezier(.2, .8, .2, 1) both; } @keyframes inv-cc-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .inv-cc-mhead { display: flex; align-items: center; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--cc-line); } .inv-cc-mhead .inv-cc-mk { width: 38px; height: 38px; border-radius: 11px; background: var(--cc-grad); display: flex; align-items: center; justify-content: center; flex: 0 0 38px; box-shadow: 0 6px 14px rgba(35, 90, 182, .32); } .inv-cc-mhead .inv-cc-mk svg { display: block; } .inv-cc-mhead h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0; } .inv-cc-mhead .inv-cc-close { margin-left: auto; width: 42px; height: 42px; border: none; cursor: pointer; border-radius: 13px; background: var(--cc-soft); color: var(--cc-muted); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .inv-cc-mhead .inv-cc-close:hover { background: #fdeceb; color: #e0594d; } .inv-cc-mhead .inv-cc-close svg { width: 18px; height: 18px; } .inv-cc-mbody { padding: 26px 28px; overflow-y: auto; } .inv-cc-intro h3 { font-size: 16px; font-weight: 800; margin: 0 0 10px; } .inv-cc-intro p { font-size: 14px; color: var(--cc-muted); line-height: 1.6; margin: 0; } .inv-cc-intro a { color: var(--cc-c); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(35, 90, 182, .3); } .inv-cc-intro a:hover { border-color: var(--cc-c); } /* akordeon */ .inv-cc-acc { border: 1px solid var(--cc-line); border-radius: var(--cc-radius); margin-top: 18px; overflow: hidden; background: #fff; } .inv-cc-achead { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; user-select: none; } .inv-cc-achead .inv-cc-chev { width: 26px; height: 26px; border-radius: 8px; background: var(--cc-soft); display: flex; align-items: center; justify-content: center; flex: 0 0 26px; transition: transform .25s; } .inv-cc-achead .inv-cc-chev svg { width: 15px; height: 15px; stroke: var(--cc-c); fill: none; } .inv-cc-acc.open .inv-cc-achead .inv-cc-chev { transform: rotate(180deg); } .inv-cc-achead .inv-cc-t { font-size: 15.5px; font-weight: 700; } /* přepínač */ .inv-cc-sw { position: relative; width: 50px; height: 28px; flex: 0 0 50px; margin-left: auto; display: inline-block; } .inv-cc-sw input { display: none; } .inv-cc-sw .inv-cc-slot { position: absolute; inset: 0; border-radius: 16px; background: #cdd5e3; transition: background .2s; } .inv-cc-sw .inv-cc-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(20, 30, 60, .28); transition: transform .2s; display: flex; align-items: center; justify-content: center; } .inv-cc-sw .inv-cc-knob svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; fill: none; } .inv-cc-sw input:checked + .inv-cc-slot { background: var(--cc-grad); } .inv-cc-sw input:checked + .inv-cc-slot + .inv-cc-knob { transform: translateX(22px); } .inv-cc-sw input:checked + .inv-cc-slot + .inv-cc-knob svg { opacity: 1; stroke: var(--cc-c); } .inv-cc-sw.locked .inv-cc-slot { background: linear-gradient(135deg, #9fb6da, #aec1e6); } .inv-cc-sw.locked .inv-cc-knob { transform: translateX(22px); cursor: not-allowed; } .inv-cc-sw.locked .inv-cc-knob svg { opacity: 1; stroke: #7f97c0; } .inv-cc-abody { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .inv-cc-acc.open .inv-cc-abody { max-height: 1400px; } .inv-cc-ainner { padding: 0 20px 20px; } .inv-cc-adesc { font-size: 13.5px; color: var(--cc-muted); line-height: 1.6; margin: 0 0 16px; } /* tabulka cookies */ .inv-cc-coltable { background: var(--cc-soft); border-radius: 16px; padding: 6px 10px; overflow-x: auto; } .inv-cc-table { width: 100%; border-collapse: collapse; } .inv-cc-table th { text-align: left; font-family: 'Space Grotesk', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-faint); font-weight: 600; padding: 0 12px 12px; border-bottom: 1px solid var(--cc-line); } .inv-cc-table td { padding: 14px 12px; font-size: 13px; vertical-align: top; border-bottom: 1px solid #f1f4f9; line-height: 1.5; } .inv-cc-table tr:last-child td { border-bottom: none; } .inv-cc-table .inv-cc-nm { font-weight: 700; color: var(--cc-d); font-family: 'Space Grotesk', monospace; white-space: nowrap; } .inv-cc-table .inv-cc-dm, .inv-cc-table .inv-cc-pl { color: var(--cc-muted); white-space: nowrap; } .inv-cc-table .inv-cc-ds { color: var(--cc-muted); min-width: 240px; } /* patička modalu */ .inv-cc-mfoot { display: flex; align-items: center; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--cc-line); background: #fff; flex-wrap: wrap; } .inv-cc-spacer { flex: 1; } /* tlačítka */ .inv-cc-btn { font-family: 'Nunito-inv', sans-serif; font-weight: 700; font-size: 14.5px; border: none; cursor: pointer; padding: 13px 24px; border-radius: 13px; transition: filter .15s, background .15s, transform .1s; white-space: nowrap; } .inv-cc-btn:active { transform: translateY(1px); } .inv-cc-btn.inv-cc-primary { background: var(--cc-grad); color: #fff; box-shadow: 0 10px 22px rgba(35, 90, 182, .3); } .inv-cc-btn.inv-cc-primary:hover { filter: brightness(1.07); } .inv-cc-btn.inv-cc-ghost { background: var(--cc-soft); color: var(--cc-ink); } .inv-cc-btn.inv-cc-ghost:hover { background: var(--cc-softer); } .inv-cc-btn.inv-cc-outline { background: #fff; color: var(--cc-c); box-shadow: inset 0 0 0 1.5px rgba(35, 90, 182, .4); } .inv-cc-btn.inv-cc-outline:hover { background: var(--cc-soft); } /* ======================= RESPONZIVITA ======================= */ @media (max-width: 880px) { .inv-cc-banner { bottom: 12px; width: calc(100% - 24px); } .inv-cc-art { display: none; } .inv-cc-bbody { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } .inv-cc-bacts { width: 100%; } .inv-cc-bacts .inv-cc-btn { flex: 1; padding: 13px 12px; } .inv-cc-mfoot { gap: 8px; } .inv-cc-mfoot .inv-cc-btn { flex: 1 1 auto; padding: 12px 14px; } .inv-cc-spacer { display: none; } } /* skrytí pomocné třídy */ .inv-cc-hidden { display: none !important; }