/* ========================================================================== Accordion — znovupoužitelná komponenta Přidejte tento blok do svého existujícího CSS souboru. Barvy/mezery jsou dané proměnnými nahoře, upravte podle vaší grafiky. ========================================================================== */ :root { --accordion-border-color: #e2e2e2; --accordion-text-color: #222; --accordion-accent-color: #111; --accordion-radius: 4px; --accordion-gap: 1rem; } /* --- Progressive enhancement --- Bez JS zůstává obsah rozbalený (přístupné i s vypnutým JS). accordion.js přidá na třídu "js", teprve pak se panely sbalí. */ .js .accordion__panel { grid-template-rows: 0fr; } .js .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion-group { margin: 0 0 2.5rem; } .accordion-group__title { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700; color: var(--accordion-text-color); } .accordion { border-top: 1px solid var(--accordion-border-color); } .accordion__item { border-bottom: 1px solid var(--accordion-border-color); } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--accordion-gap); width: 100%; padding: 0.9rem 0; background: none; border: 0; font: inherit; font-weight: 600; font-size: 1rem; text-align: left; color: var(--accordion-text-color); cursor: pointer; } .accordion__trigger:hover, .accordion__trigger:focus-visible { color: var(--accordion-accent-color); } .accordion__trigger:focus-visible { outline: 2px solid var(--accordion-accent-color); outline-offset: 2px; } /* Ikonka +/- (kreslená čistě CSS, žádný obrázek) */ .accordion__icon { position: relative; flex: 0 0 auto; width: 0.9rem; height: 0.9rem; } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.2s ease; } .accordion__icon::before { width: 100%; height: 2px; } .accordion__icon::after { width: 2px; height: 100%; } .accordion__item.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); } /* Plynulé rozbalení bez znalosti výšky obsahu (grid-template-rows trik) */ .accordion__panel { display: grid; grid-template-rows: 1fr; /* fallback bez JS = otevřeno, viz .js výše */ transition: grid-template-rows 0.25s ease; } .accordion__panel-inner { overflow: hidden; min-height: 0; } .accordion__list { margin: 0; padding: 0 0 1.1rem; list-style: none; } .accordion__list li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; line-height: 1.5; color: var(--accordion-text-color); } .accordion__list li::before { content: "–"; position: absolute; left: 0; } .accordion__list li:last-child { margin-bottom: 0; } /* Respektuje nastavení uživatele pro omezení animací */ @media (prefers-reduced-motion: reduce) { .accordion__panel, .accordion__icon::before, .accordion__icon::after { transition: none; } } /* ========================================================================== Info block — statické karty (např. čísla účtu), mimo accordion ========================================================================== */ .info-block { margin: 0 0 2.5rem; } .info-block__title { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700; color: var(--accordion-text-color); } .info-block__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .info-card { padding: 1rem 1.2rem; border: 1px solid var(--accordion-border-color); border-radius: var(--accordion-radius); } .info-card__title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--accordion-text-color); } .info-card__text { margin: 0 0 0.25rem; font-size: 0.95rem; line-height: 1.5; } .info-card__text:last-child { margin-bottom: 0; } /* ========================================================================== Drobné sdílené prvky ========================================================================== */ .link { color: var(--accordion-accent-color); text-decoration: underline; } .link:hover { text-decoration: none; } .accordion-note { margin-top: 1rem; line-height: 1.6; } /* .subscribe-form.compact-form .btn, .btn.btn-conversion{ color:#000!important; background:#a5895b!important; border-color:#a5895b!important; } .subscribe-form.compact-form .btn:hover, .btn.btn-conversion:hover{ color:#fff!important; background:#665333!important; border-color:#665333!important; }*/ @media (min-width:1024px){ .kerbo-vraceni{ padding: 3rem 2rem !important; } } } }