/* ============================================================ Custom overrides pro Říčanské Šlapačky (Firestore verze) ============================================================ Reálný Webflow export spoléhá u některých mřížek (CSS Grid) na explicitní umístění položek přes #w-node-... ID selektory, které vznikají jen ve Webflow Designeru pro PEVNÝ počet a pořadí prvků. Náš obsah je ale dynamický (Firestore/admin), takže tyto sekce přepisujeme na flex-box, který funguje pro libovolný počet položek a zachovává vzhled (barvy, fonty, mezery) z site.webflow.css. Načítá se AŽ PO webflow.css / site.webflow.css, aby mohl přebít jen tato konkrétní pravidla. ============================================================ */ /* Tento prvek je ve skutečnosti "vycpávka" pod pevně ukotveným menu (.fs-styleguide_nav-fixed má position:fixed, takže samo o sobě nezabírá místo v toku stránky) - drží stejnou výšku (4.75rem) jako výchozí Webflow definice, aby obsah pod ním nezačínal schovaný pod menu. Reálný obsah menu (.nav2_component) je ale vysoký jen ~43px, takže zbylých ~33px vycpávky bylo vidět - buď jako fialový pruh (výchozí barva), nebo (po předchozí opravě na transparent) jako bílý pruh prosvítající skrz na barvu . Řešení: dát vycpávce stejnou tmavou barvu jako samotné menu (--black), aby splynula v jeden vizuálně nepřerušený tmavý pruh bez ohledu na to, jak vysoký je skutečný obsah menu. */ .fs-styleguide_nav-background { background-color: var(--black); } /* Globální resety, které reálný web vkládá inline (viz index.html "global-styles" embed) - přebíráme 1:1. */ .w-richtext > :first-child { margin-top: 0; } .w-richtext > :last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0; } a, .w-tab-link, .w-nav-link, .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { color: inherit; } .container-medium, .container-small, .container-large { margin-right: auto !important; margin-left: auto !important; } .w-input, .w-select, a { color: inherit; text-decoration: inherit; font-size: inherit; } *:focus { outline: none; } /* ---- Harmonogram teaser (HP) + Kontakt karty: tlačítko/CTA pod kartami, ne vedle nich. Reálný web to řeší explicitním grid-placement, u nás stačí nechat tlačítko přes celou šířku. ---- */ .pricing1_component { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 6rem; } .pricing1_item-wrapper, .pricing1_component .kontakt_item-wrapper { flex: 0 1 26rem; max-width: 28rem; width: auto; } /* Tlačítko musí být VŽDY pod kartou/kartami, ne vedle nich (potvrzeno na živém originále i pro homepage teaser s jedinou kartou "sobota"). flex-basis: 100% samo o sobě nezalomí řádek - flexbox zkoumá, jestli se položky i tak vejdou vedle sebe na jeden řádek, a POUŽITOU velikost přitom počítá už oříznutou přes max-width. Pokud by wrapper měl max-width: 28rem přímo na sobě, "100 %" se hned zmenší na 28rem už před testem zalomení - a se štíhlou jedinou kartou (homepage teaser) se pak oboje stejně vejde vedle sebe na řádek. Řešení: wrapper nechat OPRAVDU na 100 % (bez max-width) - tím je zaručeno zalomení vždy, ať vedle stojí jedna karta nebo dvě - a kompaktní šířku/vystředění tlačítka realizovat až na samotném uvnitř. */ .pricing1_button-wrapper { flex: 0 0 100%; margin: 1rem 0 0; display: flex; justify-content: center; } .pricing1_button-wrapper .button { max-width: 28rem; } /* ---- Historie: reálný web řadí roky do "cik-cak" mřížky (jedna karta na řádek, střídavě vlevo/vpravo), ne do pravidelných dvojic. Přesně podle grid-area pravidel z originálního Webflow exportu: sloupce 1fr / linka / 1fr, každá karta dostane svůj řádek přes inline style (viz renderHistory v index.js), tady jen definujeme mřížku a vzhled sloupců. ---- */ .timeline-grid { display: grid !important; grid-template-columns: 1fr 1.5rem 1fr; column-gap: 0; row-gap: 2.5rem; margin-top: 3rem; margin-bottom: 3rem; } .timeline-item.col-left { grid-column: 1; } .timeline-item.col-right { grid-column: 3; } .timeline-item.col-full { grid-column: 1 / -1; } /* Svislá dělící čára uprostřed - prostřední sloupec mřížky, výška (grid-row) se počítá podle počtu položek v renderHistory. Kolečko s rokem zůstává vystředěné v rámci vlastní karty (výchozí .year_item{justify-content:center} ze site.webflow.css), ne nalepené na dělící čáru. */ .timeline_linka { display: block; grid-column: 2; width: 0.1875rem; justify-self: center; margin: 0; background-color: var(--black-3, #2f2a6b); } /* Kolečko s rokem se má přizpůsobit délce textu (např. "2023-24", "2010-2017"), ale zůstat kolečkem - width i height rostou společně (aspect-ratio 1:1), ne jen do šířky (ovál). */ .year-text, .year-text.blue { width: fit-content; height: auto; aspect-ratio: 1 / 1; min-width: 4rem; padding: 0.5rem; white-space: nowrap; position: relative; z-index: 1; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s; } /* Hover efekt na bloku roku (i mimo mobilní media-query, kde je v původním webu). Zvýrazní se kolečko při najetí na celou kartu. */ .timeline-item:hover .year-text.blue, .year-text.blue:hover { background-color: var(--light-blue, #4fb8e6); filter: contrast(200%); color: var(--black-3, #2f2a6b); box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.25); } /* Scroll-in-view efekt: karty se zjeví (fade + posun nahoru) až se objeví ve viewportu - řídí to IntersectionObserver v index.html. */ .timeline-item, .timeline_thisyear-wrapper > .container-medium { opacity: 0; transform: translateY(2rem); transition: opacity 0.6s ease, transform 0.6s ease; } .timeline-item.is-inview, .timeline_thisyear-wrapper > .container-medium.is-inview { opacity: 1; transform: translateY(0); } @media screen and (max-width: 767px) { .timeline-grid { grid-template-columns: 1fr; } .timeline-item.col-left, .timeline-item.col-right, .timeline-item.col-full { grid-column: 1 !important; grid-row: auto !important; } .timeline-item.col-left .year_item, .timeline-item.col-right .year_item { /* site.webflow.css od 991px dolů mění .year_item na 3sloupcovou grid (kvůli kartě s více roky "2012 2013 ... 2017"), takže kolečko s jedním rokem skončí přilepené k levému okraji prvního sloupce mísoto na středu - vracíme jednoduchý flex. */ display: flex; grid-template-columns: none; justify-content: center; margin: 0; } .timeline_linka { display: none; } } /* ---- Záštity / partneři: pevná 4sloupcová mřížka přetékala a překrývala loga u jiného počtu položek než originál. Flex-wrap se přizpůsobí libovolnému počtu. ---- */ .clients1_grid { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; grid-template-columns: none; } .clients1_logo { max-width: 9rem; max-height: 5rem; width: auto; height: auto; object-fit: contain; } .clients1_logo.zastita { min-height: 15rem; max-height: 20rem; max-width: 22rem; } /* Záštity mají v originále vlastní 2sloupcovou mřížku (ne volný flex-wrap jako partneři) - obrázky tak stojí každý ve své polovině, ne "nalepené" vedle sebe. */ .clients1_grid.zastita { display: grid !important; grid-template-columns: 1fr 1fr; justify-items: center; align-items: start; gap: 2rem; max-width: 46rem; margin: 0 auto; } @media screen and (max-width: 600px) { .clients1_grid.zastita { grid-template-columns: 1fr; } } /* ---- Disciplíny: záložky (.w-tab-link) mají v generickém webflow.css výchozí šedé pozadí (#dddddd / #C8C8C8 pro aktivní). Reálný web to ruší přes vlastní třídy tab-link-tab-1..4; naše šablony je nemusí mít vždy přesně, takže rušíme přímo pro cokoliv uvnitř .tabs-menu. ---- */ .tabs-menu.w-tab-menu { background-color: transparent; } .tabs-menu .w-tab-link, .tabs-menu .w-tab-link.w--current { background-color: transparent !important; padding: 0 !important; } /* Ikony disciplín mají různý vlastní poměr stran SVG souborů - bez pevné velikosti kontejneru vychází některé menší než ostatní (např. "historická kola"). Sjednocujeme na stejný box. */ .disciplina_image { width: 10rem; height: 10rem; max-width: none; display: flex; align-items: center; justify-content: center; } .disciplina_image img { width: 100%; height: 100%; object-fit: contain; } /* Hover zvýraznění: kolečko s ikonou se při najetí myší mírně zvětší a rozsvítí zlatým obrysem, ať je jasné, že jde o klikací záložku (přepíná popis disciplíny níže). */ .disciplina_item { cursor: pointer; } .disciplina_image { transition: transform 0.25s ease, box-shadow 0.25s ease; } .disciplina_item:hover .disciplina_image { transform: scale(1.08); border-radius: 50%; box-shadow: 0 0 0 4px var(--goldenrod, #ecab00); } /* Otevřená záložka zůstává trvale o něco větší a zvýrazněná zlatým obrysem (ne jen na hover), ať je i bez najetí myší jasné, která disciplína je právě zobrazená níže. */ .w-tab-link.w--current .disciplina_image { transform: scale(1.1); border-radius: 50%; box-shadow: 0 0 0 4px var(--goldenrod, #ecab00); } .w-tab-link.w--current:hover .disciplina_image { transform: scale(1.14); } /* ---- Menu: zvýraznění aktuální stránky. Základní pravidlo .nav2_link.w--current { color: var(--buttons-secondary-purple) } je v site.webflow.css, jen se ujišťujeme, že platí i mimo mobilní media-query a že hover dává vizuální odezvu i na desktopu. ---- */ .nav2_link.w--current { color: #cbbbf2 !important; -webkit-text-fill-color: #cbbbf2 !important; } .link-block:hover .nav2_link { color: #cbbbf2; -webkit-text-fill-color: #cbbbf2; } /* Podtržení (.nav2-line) pod položkami menu se má objevit až při najetí myší, ne trvale u všech položek. U aktuální stránky zůstává vidět pořád. */ .nav2-line { width: 0; overflow: hidden; transition: width 0.2s ease; } .link-block:hover .nav2-line, .nav2_link.w--current + .nav2-line { width: 100%; } /* ---- Mobilní menu: pod 480px (site.webflow.css tam mění .nav2_container na jednosloupcovou mřížku a schovává e-mail tlačítko) zůstávaly v gridu jen logo a hamburger, každé na vlastním řádku pod sebou - vypadalo to, že je hamburger vycentrovaný pod logem místo vedle něj. Vracíme je na společný řádek (logo vlevo, hamburger vpravo) a zmenšujeme přerostlou ikonku (byla 3rem = 48px vysoká). ---- */ @media screen and (max-width: 479px) { .nav2_container { grid-template-columns: 1fr auto; grid-template-rows: auto; row-gap: 0; align-items: center; } .nav2_menu-icon { font-size: 1.75rem; } .nav2_menu-button { padding: 0.4rem; } } /* ---- Team stránka: stejný princip jako pricing1_component, flex místo pevné 3sloupcové mřížky. ---- */ .team_component { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2.5rem; margin-top: 6rem; grid-template-columns: none; } .kontakt_item-wrapper { flex: 1 1 18rem; max-width: 22rem; } /* ---- Harmonogram (/harmonogram-akce): pod 480px se .div-block-5 zalomí do jednoho sloupce - SOBOTA a NEDĚLE bloky programu (den pod dnem) tak mají mezi sebou jen běžnou 2rem mezeru mřížky, stejnou jako uvnitř jednoho dne. Druhý (nedělní) blok potřebuje zjevně větší odstup, aby bylo jasné, že začíná nový den. ---- */ @media screen and (max-width: 479px) { .day-wrapper + .day-wrapper { margin-top: 3rem; } } /* ---- Harmonogram: .div-block-5 má v site.webflow.css natvrdo display:none (na reálném webu je harmonogram zatím rozpracovaný a schovaný za "PŘIPRAVUJEME"). Po zveřejnění v administraci server přidá tuto třídu, která schování přebije - zbytek responzivních pravidel (sloupce, mezery) zůstává beze změny ze site.webflow.css. ---- */ .div-block-5.is-published { display: grid; } /* ---- Detail člena týmu (/team/) - nová stránka, v originále neexistuje (Webflow odkazoval na externí profily), takže nemá vlastní Webflow třídy. Znovupoužíváme barvy/fonty/mezery ze site.webflow.css přes stejné proměnné jako zbytek webu. ---- */ .team-detail_photo-wrapper { display: flex; justify-content: center; margin: 2.5rem 0; } .team-detail_photo { width: 16rem; height: 16rem; object-fit: cover; border-radius: 1rem; border: 3px solid var(--black-3, #202527); } .team-detail_cta { display: flex; justify-content: center; margin-top: 2rem; } .team-detail_cta .button { max-width: 20rem; } .team-detail_back { text-align: center; margin-top: 1.5rem; }