/** * Kibios — nastavení soukromí a cookies. * * Vlastní stylopis, ne součást styles.css. Důvod: banner se musí zobrazit na * VŠECH stránkách včetně homepage, a ta běží z buildu Reactu s Tailwindem, kde * se styles.css vůbec nenačítá. Banner tam pak byl bez stylů — tlačítka měla * výchozí velikost prohlížeče a text splýval se stránkou. * * Proto je tenhle soubor SOBĚSTAČNÝ: nepoužívá proměnné hostitelské stránky * (--bg, --brand a spol.), ale vlastní --cc-*. Kdyby se spoléhal na cizí tokeny, * rozbil by se pokaždé, když někdo přejmenuje proměnnou v jednom ze dvou * frontendů. * * Product Bible A.3: tlačítka pro přijetí a odmítnutí nesmí být úmyslně * asymetrická způsobem, který tlačí uživatele do souhlasu. Proto mají * .cc-btn--accept a .cc-btn--reject stejný padding, stejnou velikost i váhu * písma, stejný poloměr a stejnou minimální šířku. Liší se jen barvou výplně. */ .cc-root { --cc-bg: #ffffff; --cc-surface: #f5f6fa; --cc-text: #14161f; --cc-text-2: #454a5c; --cc-muted: #6b7280; --cc-border: rgba(20, 22, 31, .14); --cc-brand: #4d4dc7; --cc-brand-text: #ffffff; --cc-shadow: 0 18px 50px rgba(15, 23, 42, .22); --cc-radius: 16px; font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Tmavý motiv: web přepíná atributem data-theme na , jinak se řídí nastavením systému. Obojí musí sedět, jinak banner na tmavé stránce svítí. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .cc-root { --cc-bg: #14161f; --cc-surface: #1c1f2b; --cc-text: #f2f3f7; --cc-text-2: #c3c7d4; --cc-muted: #8d93a6; --cc-border: rgba(255, 255, 255, .14); --cc-brand: #8b8bf0; --cc-brand-text: #14161f; --cc-shadow: 0 18px 50px rgba(0, 0, 0, .5); } } html[data-theme="dark"] .cc-root { --cc-bg: #14161f; --cc-surface: #1c1f2b; --cc-text: #f2f3f7; --cc-text-2: #c3c7d4; --cc-muted: #8d93a6; --cc-border: rgba(255, 255, 255, .14); --cc-brand: #8b8bf0; --cc-brand-text: #14161f; --cc-shadow: 0 18px 50px rgba(0, 0, 0, .5); } .cc-root *, .cc-root *::before, .cc-root *::after { box-sizing: border-box; } /* ===== První vrstva ===== */ .cc-banner { position: fixed; z-index: 2147483000; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; background: var(--cc-bg); color: var(--cc-text); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); padding: 22px 24px; box-shadow: var(--cc-shadow); /* Text první vrstvy předepisuje A.3 a je dlouhý. Na malém displeji by banner zabral skoro celou výšku a tlačítka by skončila mimo obraz. Proto má strop a roluje se uvnitř text, ne celý panel — nadpis i všechna tři tlačítka zůstanou vidět vždy. */ display: flex; flex-direction: column; max-height: min(70vh, 620px); } .cc-banner .cc-text { overflow-y: auto; min-height: 0; } .cc-banner .cc-actions { flex: 0 0 auto; } .cc-banner h2 { font-size: 17px; line-height: 1.3; font-weight: 800; margin: 0 0 10px; color: var(--cc-text); } .cc-text p { font-size: 13px; line-height: 1.6; color: var(--cc-text-2); margin: 0 0 8px; } .cc-text p:last-child { margin-bottom: 0; } .cc-text a { color: var(--cc-brand); text-decoration: underline; } .cc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .cc-btn { flex: 1 1 auto; min-width: 168px; padding: 11px 18px; border-radius: 10px; font-size: 13px; line-height: 1.2; font-weight: 700; font-family: inherit; border: 1px solid transparent; cursor: pointer; text-align: center; transition: filter .15s ease; } .cc-btn:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 2px; } .cc-btn:hover { filter: brightness(.95); } .cc-btn--accept { background: var(--cc-brand); color: var(--cc-brand-text); } .cc-btn--reject { background: var(--cc-surface); color: var(--cc-text); border-color: var(--cc-border); } .cc-btn--ghost { background: transparent; color: var(--cc-text-2); border-color: var(--cc-border); } .cc-status { font-size: 12px; font-weight: 600; color: var(--cc-muted); margin: 10px 0 0; min-height: 1em; } /* Banner nesmí překrýt obsah stránky, a už vůbec ne primární akci. Na přihlašovací obrazovce (svisle vycentrovaná karta v gridu přes celý viewport) seděl přesně přes tlačítko „Přihlásit se“ — Playwright to odhalil jako „banner intercepts pointer events“. Dokud banner visí, dostane dokument dolní odsazení o jeho výšku; skript ji měří a zapisuje do --cc-banner-space. */ html.cc-banner-visible body { padding-bottom: var(--cc-banner-space, 240px); } /* Layouty, které si samy roztahují výšku na celý viewport, by odsazení jen přerostly. Zmenšíme jim ji o stejnou hodnotu, ať karta zůstane vycentrovaná nad bannerem, ne pod ním. */ html.cc-banner-visible .login-page, html.cc-banner-visible .login-body { min-height: calc(100vh - var(--cc-banner-space, 240px)); } /* ===== Druhá vrstva ===== */ .cc-backdrop { position: fixed; inset: 0; z-index: 2147483001; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; } .cc-modal { width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto; background: var(--cc-bg); color: var(--cc-text); border: 1px solid var(--cc-border); border-radius: 18px; padding: 28px; box-shadow: var(--cc-shadow); } .cc-modal h2 { font-size: 20px; line-height: 1.3; font-weight: 800; margin: 0 0 8px; } .cc-modal-lead { font-size: 13px; line-height: 1.55; color: var(--cc-muted); margin: 0 0 20px; } .cc-cats { display: flex; flex-direction: column; gap: 20px; } .cc-cat { border-top: 1px solid var(--cc-border); padding-top: 16px; } .cc-cat:first-child { border-top: 0; padding-top: 0; } .cc-cat-head { display: flex; align-items: center; gap: 10px; cursor: pointer; } .cc-cat-head input { width: 17px; height: 17px; accent-color: var(--cc-brand); cursor: pointer; margin: 0; } .cc-cat-head input:disabled { cursor: not-allowed; } .cc-cat-name { font-size: 14px; font-weight: 700; } .cc-cat-desc { font-size: 12.5px; line-height: 1.6; color: var(--cc-text-2); margin: 8px 0 0; } .cc-detail-empty { font-size: 12px; color: var(--cc-muted); margin: 10px 0 0; font-style: italic; } .cc-items { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .cc-item { background: var(--cc-surface); border-radius: 10px; padding: 12px 14px; } .cc-item code { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--cc-text); } .cc-item dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 3px 12px; margin: 8px 0 0; } .cc-item dt { font-size: 11px; font-weight: 700; color: var(--cc-muted); } .cc-item dd { font-size: 11.5px; line-height: 1.5; color: var(--cc-text-2); margin: 0; } body.cc-modal-open { overflow: hidden; } @media (max-width: 560px) { /* Na mobilu je strop nižší: banner smí zabrat nanejvýš zhruba třetinu displeje, aby za ním zůstal vidět obsah stránky. Text uvnitř roluje. Bylo 52vh, což na 390×844 dělalo 439 px — vrstva sahala doprostřed obrazu a zakrývala pole hero formuláře, tedy začátek hlavní konverzní cesty (LIVE-002 v docs/LIVE-UX-AUDIT.md; měřeno přes elementFromPoint, ne od oka). Snížení je čistě prostorové: žádný text z první vrstvy nezmizel, jen se uvnitř roluje. Nadpis a všechna tři tlačítka zůstávají vidět. */ .cc-banner { left: 8px; right: 8px; bottom: 8px; padding: 16px; max-height: 38vh; } /* Na mobilu jde každé tlačítko na vlastní řádek — aby zůstala zachovaná stejná plocha pro přijetí i odmítnutí (A.3). */ .cc-btn { flex-basis: 100%; } .cc-modal { padding: 22px 18px; } .cc-item dl { grid-template-columns: 1fr; } .cc-item dt { margin-top: 6px; } } @media (prefers-reduced-motion: no-preference) { .cc-banner { animation: cc-slide-in .22s ease-out; } @keyframes cc-slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } }