/* ═══════════════════════════════════════════════════════════════════ OB.hint — interaktivní nápověda „ⓘ" Na počítači se ukáže jako bublina u ikonky, na telefonu jako panel odspodu. Nativní `title=""` se totiž na dotykových displejích nezobrazí vůbec — a stížnosti přišly právě od lidí na mobilu. ═══════════════════════════════════════════════════════════════════ */ .ob-hint { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; line-height: 1; } .ob-hint-ikona { width: 17px; height: 17px; min-height: 0; /* přebíjí globální min-height u tlačítek */ padding: 0; border-radius: 50%; border: 1px solid rgba(145,70,255,.5); background: rgba(145,70,255,.12); color: #b366ff; font-family: 'Share Tech Mono', monospace; font-size: .68rem; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .16s ease, transform .16s ease; flex-shrink: 0; } .ob-hint-ikona:hover { background: rgba(145,70,255,.28); transform: scale(1.12); } .ob-hint-otevreno .ob-hint-ikona { background: #9146ff; color: #fff; } /* Bublina se při otevření přesouvá pod (viz js/ob-hint.js), protože karty na stránkách mají `overflow: hidden` a `animation` s `transform`. Uvnitř karty by se ořízla a `position: fixed` by jí kvůli transformu taky neutekl. Proto je vždycky `fixed` a pozici počítá skript. */ .ob-hint-bublina { position: fixed; width: 300px; max-width: calc(100vw - 20px); background: #15152a; border: 1px solid #34345c; border-radius: 10px; padding: 13px 15px; box-shadow: 0 10px 36px rgba(0,0,0,.6); color: #d5d5ea; font-family: 'Exo 2', system-ui, sans-serif; font-size: .82rem; font-weight: 400; line-height: 1.65; text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; z-index: 99999; display: none; animation: obHintUp .18s cubic-bezier(.22,1,.36,1); } /* zobrazuje se, jen když je vytažená ven z karty */ .ob-hint-bublina.ob-hint-plovouci { display: block; } .ob-hint-bublina.ob-hint-dolu { animation: obHintDolu .18s cubic-bezier(.22,1,.36,1); } .ob-hint-nadpis { display: block; color: #fff; font-size: .86rem; font-weight: 700; margin-bottom: 6px; } .ob-hint-text { display: block; } .ob-hint-zavrit { display: none; /* na počítači stačí kliknout vedle */ margin-top: 12px; width: 100%; min-height: 40px; background: #9146ff; border: none; border-radius: 8px; color: #fff; font-family: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; } @keyframes obHintUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes obHintDolu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Telefon: panel odspodu ───────────────────────────────────────── Bublina u ikonky se na úzký displej nevejde a často by vylezla ven ze stránky. Panel přes celou šířku je čitelnější a nedá se minout. */ @media (max-width: 620px) { /* `!important` kvůli tomu, že pozici na počítači dopočítává skript inline stylem — na telefonu ho musíme přebít, panel je vždy dole. */ .ob-hint-bublina.ob-hint-plovouci { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 14px 14px 0 0; border-left: none; border-right: none; border-bottom: none; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); font-size: .92rem; animation: obHintNahoru .2s cubic-bezier(.22,1,.36,1); } .ob-hint-nadpis { font-size: 1rem; } .ob-hint-zavrit { display: block; } /* ztmavení pozadí, ať je jasné, že je něco otevřené */ .ob-hint-bublina.ob-hint-plovouci::before { content: ''; position: fixed; left: 0; right: 0; bottom: 100%; height: 100vh; background: rgba(0,0,0,.5); z-index: -1; } body.ob-hint-telo-zamknute { overflow: hidden; } @keyframes obHintNahoru { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } }