/* * Doladění portálových komponent do vizuálu AfrOstravy. * Načítá se AŽ ZA Bootstrapem i za booker/microsite CSS — viz komentář * v microsite.base.afrostrava.html.twig. * * Sem patří jen to, co nejde vyřešit utility třídami přímo v šabloně: * typicky komponenty, jejichž HTML generuje portál (booker, košík, formuláře) * a do kterých se třídy dopsat nedají. */ /* --- Typografie ---------------------------------------------------------- */ .afro-site { /* Bootstrap reboot nastavuje na body vlastní font i barvu; vracíme AfrOstravu. */ font-family: var(--font-sans); color: var(--color-af-brown-900); background-color: var(--color-af-beige-300); } .afro-site h1, .afro-site h2, .afro-site h3 { font-family: var(--font-block); font-weight: 500; } /* --- Bootstrap tlačítka uvnitř bookeru / košíku -------------------------- */ .afro-main .btn-primary { --bs-btn-bg: var(--color-af-red-500); --bs-btn-border-color: var(--color-af-brown-900); --bs-btn-hover-bg: var(--color-af-orange-500); --bs-btn-hover-border-color: var(--color-af-brown-900); --bs-btn-active-bg: var(--color-af-orange-500); --bs-btn-active-border-color: var(--color-af-brown-900); } .afro-main .btn-success { --bs-btn-bg: var(--color-af-green-500); --bs-btn-border-color: var(--color-af-brown-900); --bs-btn-hover-bg: var(--color-af-brown-500); --bs-btn-hover-border-color: var(--color-af-brown-900); } /* --- Karty a panely portálu --------------------------------------------- */ .afro-main .card { background-color: var(--color-af-beige-400); border-color: color-mix(in oklab, var(--color-af-brown-900) 10%, transparent); border-radius: 1.25rem; } .afro-main .form-control, .afro-main .form-select { border-color: color-mix(in oklab, var(--color-af-brown-900) 20%, transparent); border-radius: 60px; } .afro-main .form-control:focus, .afro-main .form-select:focus { border-color: var(--color-af-red-500); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--color-af-red-500) 20%, transparent); } /* --- Ikonové z předlohy ------------------------------------------ Tailwind build je definuje jako mask-image; Bootstrap reboot jim ale nastaví `display: inline`, kvůli čemuž by měly nulovou výšku a nebyly vidět. */ .afro-site [class*="i-ph-"] { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.15em; } /* ========================================================================== Doplněné utility třídy Tailwindu ========================================================================== `afrostrava.css` je HOTOVÝ build stažený z www.afrostrava.cz — obsahuje jen třídy, které používá hlavní web. Cokoliv navíc, co si napíšeme v šablonách microsite, v něm NENÍ a tiše nedělá nic (žádná chyba, jen bez efektu; přesně takhle skončil obsah pod fixní hlavičkou, protože `pt-[20rem]` neexistovalo). Tailwind toolchain na přegenerování buildu nemáme, proto se chybějící utility dopisují sem ručně. Hodnoty odpovídají výchozí škále Tailwindu v4 (1 jednotka = 0.25rem) a barvy berou tokeny z `afrostrava.css`. ⚠️ Když v šabloně microsite použiješ novou Tailwind třídu, OVĚŘ, že v `afrostrava.css` existuje — a když ne, dopiš ji sem. Audit: grep -o '\.' public/microsite/tickets.afrostrava.cz/afrostrava.css ========================================================================== */ /* --- odkazy v celém layoutu -------------------------------------------- Bootstrap obarvuje `a` modře a podtrhává (`a{color:…;text-decoration:underline}`, specificita 0,0,1). Hlavička, patička ani karty to nechtějí. ⚠️ SELEKTOR MÁ `:where()` ZÁMĚRNĚ — a nesmí se zjednodušit na `.afro-site a`. `:where()` nepřispívá do specificity, takže tohle pravidlo má 0,0,1 — přesně jako Bootstrap. Načítá se později, takže nad Bootstrapem vyhraje, ale KAŽDÁ utility třída Tailwindu (0,1,0) vyhraje nad ním. To je přesně to, co chceme: odkazy bez vlastní barvy zdědí barvu okolí, odkazy s `text-*` / `hover:text-*` si svou barvu udrží. Zapsané jako `.afro-site a` (0,1,1) by to přebilo i Tailwind — reálně se to stalo: položky rozbaleného menu mají `group-data-nav-open:text-af-beige-300` (0,2,0)… ale `color:inherit` z `.afro-site a` zdědilo hnědou z hlavičky a menu bylo tmavé na tmavém. Stejně tak `btn-solid`/`btn-outline` si díky tomu drží bílý text samy a nepotřebují výjimku. */ :where(.afro-site) a { color: inherit; text-decoration: none; } :where(.afro-site) a:hover { color: var(--color-af-red-500); } /* ⚠️ Tlačítka z pravidla výše MUSÍ být vyjmutá. `.btn-solid` si barvu textu drží přes `color: var(--btn-text-color)`, jenže to je specificita 0,1,0 — zatímco `:where(.afro-site) a:hover` má 0,1,1 a na hoveru vyhraje. U červeného tlačítka tím vznikl ČERVENÝ TEXT NA ČERVENÉM POZADÍ, takže popisek na hoveru zmizel. Barva se bere z proměnných předlohy, ne napevno: `--btn-hover-text-color` když ji varianta tlačítka definuje (btn-white ji má), jinak se drží klidová `--btn-text-color` (btn-red). */ .afro-site a.btn-solid:hover, .afro-site a.btn-outline:hover, .afro-site a[class*="btn-"]:hover { color: var(--btn-hover-text-color, var(--btn-text-color)); } /* --- fade CTA v hlavičce spolu se zbytkem ------------------------------ Předloha má `[class|=btn]{transition-property:box-shadow,transform}`. Je to atributový selektor (0,1,0), tedy stejně specifický jako utility `transition-opacity`, a v souboru stojí později — takže vyhraje a tlačítko opacity vůbec nepřechází. Při schovávání hlavičky pak logo a datum plynule faduje, ale CTA zmizí skokem. Doplňujeme `opacity` do seznamu. Timing function se musí vyjmenovat po vlastnostech: tlačítka mají pružinovou křivku `cubic-bezier(.5,2.5,.7,.7)`, která záměrně přestřeluje — pro stín a posun při hoveru je to správně, ale opacity by s ní spadla na nulu dřív než logo a hlavička by se rozpadla na dvě rychlosti. Stín a posun si proto pružinu nechávají, opacity dostává stejnou křivku jako zbytek hlavičky. */ .afro-site header [class|="btn"] { transition-property: box-shadow, transform, opacity; transition-timing-function: cubic-bezier(.5, 2.5, .7, .7), cubic-bezier(.5, 2.5, .7, .7), cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== ⚠️ KOLIZE NÁZVŮ TŘÍD S BOOTSTRAPEM ========================================================================== Bootstrap má vlastní utility se stejnými názvy jako Tailwind, ale JINÝMI hodnotami — a navíc je značkuje `!important`. Načítá se po `afrostrava.css`, takže stejnojmennou Tailwind utilitu vždy přebije. Auditem se jich našlo 17, z toho pět reálně mění layout: třída chtěné (Tailwind) co dělal Bootstrap px-5 1.25rem 3rem !important px-3 0.75rem 1rem !important gap-4 1rem 1.5rem !important mb-4 1rem 1.5rem !important pt-4 1rem 1.5rem !important Nejhorší byl `px-5`: protože nese `!important`, přebíjel i responzivní varianty `md:px-12` / `xl:px-6` / `2xl:px-12` (ty `!important` nemají a media query specificitu nezvyšuje). Boční odsazení stránky proto bylo 48 px na VŠECH šířkách místo 20/48/24/48 — viz `.afro-gutter` níže. Audit kolizí se dá zopakovat porovnáním tříd použitých v šablonách proti `bootstrap.min.css`; postup je v docs/MICROSITES/tickets.afrostrava.cz.md. Řešení: hodnoty vracíme zpět s `!important` a vyšší specificitou. Jsou to jmenovitě tyhle třídy — nový kód radši rovnou používej třídy, které se s Bootstrapem netlučou. */ .afro-site .px-3 { padding-inline: .75rem !important; } .afro-site .gap-4 { gap: 1rem !important; } .afro-site .mb-4 { margin-bottom: 1rem !important; } .afro-site .pt-4 { padding-top: 1rem !important; } /* --- boční odsazení stránky ---------------------------------------------- Nahrazuje `px-5 md:px-12 xl:px-6 2xl:px-12` z předlohy. Vlastní třída proto, že `px-5` koliduje s Bootstrapem (viz výše) a kvůli jeho `!important` by se neuplatnily ani ty responzivní varianty. Hodnoty jsou ZMĚŘENÉ na www.afrostrava.cz, ne odvozené z názvů tříd: < 768 20 px 768–1279 48 px 1280–1439 24 px >= 1440 48 px (Poslední zlom je 90rem = 1440 px, ne 96rem — `2xl` je v tom buildu přenastavené na 90rem, takže „2xl:px-12" nastupuje dřív, než by člověk podle výchozí škály Tailwindu čekal.) */ .afro-gutter { --afro-gutter: 1.25rem; padding-inline: var(--afro-gutter); } @media (min-width: 48rem) { .afro-gutter { --afro-gutter: 3rem; } } @media (min-width: 80rem) { .afro-gutter { --afro-gutter: 1.5rem; } } @media (min-width: 90rem) { .afro-gutter { --afro-gutter: 3rem; } } /* Patička má vlastní schéma (`px-5 md:px-12 lg:px-0`) — od `lg` je obsah vycentrovaný pevnou šířkou, takže odsazení padá na nulu. Změřeno na předloze. */ .afro-gutter-footer { padding-inline: 1.25rem; } @media (min-width: 48rem) { .afro-gutter-footer { padding-inline: 3rem; } } @media (min-width: 64rem) { .afro-gutter-footer { padding-inline: 0; } } /* --- seznamy v hlavičce a patičce --------------------------------------- Bootstrap reboot dává `ul{padding-left:2rem;margin-bottom:1rem}` a odrážky. Tailwind preflight (`padding:0`) ho nepřebije, protože se načítá DŘÍV. Markup převzatý z afrostrava.cz ale s odsazením nepočítá — odkazy v patičce pak nesedí pod nadpisy sloupců, v menu se posouvá celý seznam a v kartě akce se datum s místem odsadí od názvu. ZÁMĚRNĚ to není `.afro-site ul` (tedy celý web): popis události na detailu je HTML od promotéra a seznamy v něm odsazení i odrážky mít mají. Stejně tak booker. Vyjmenované jsou proto jen bloky, jejichž markup píšeme my. */ .afro-site header ul, .afro-site footer ul, .afro-event-grid ul { margin: 0; padding-left: 0; list-style: none; } /* --- mřížka výpisu událostí ---------------------------------------------- ZÁMĚRNĚ vlastní třída místo `sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4`. `sm:`/`2xl:` varianty build neobsahuje, musely by se dopsat sem — jenže tenhle soubor se načítá AŽ ZA `afrostrava.css`, takže by `.sm\:grid-cols-2` přebilo `.xl\:grid-cols-3` z buildu (stejná specificita, rozhoduje pořadí) a na širokých displejích by zůstaly dva sloupce. Jedno pravidlo s vlastními breakpointy tenhle problém nemá. */ .afro-event-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; } @media (min-width: 40rem) { .afro-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tři sloupce jsou strop — dál se karty jen roztahují uvnitř `max-w-[90rem]`. Čtvrtý stupeň tu byl, ale na širokých displejích dělal karty moc drobné. */ @media (min-width: 80rem) { .afro-event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- odsazení / rozměry -------------------------------------------------- */ .mx-auto { margin-inline: auto; } .mt-auto { margin-top: auto; } .mb-16 { margin-bottom: 4rem; } .pt-24 { padding-top: 6rem; } .pb-24 { padding-bottom: 6rem; } .px-8 { padding-inline: 2rem; } .py-4 { padding-block: 1rem; } .py-16 { padding-block: 4rem; } .max-w-\[46rem\]{ max-width: 46rem; } .afro-event-media { aspect-ratio: 4 / 3; } /* --- typografie ---------------------------------------------------------- */ .font-sans { font-family: var(--font-sans); } .leading-tight { line-height: 1.25; } .no-underline { text-decoration-line: none; } .underline-offset-4 { text-underline-offset: 4px; } /* --- barvy --------------------------------------------------------------- */ .bg-af-brown-900\/40 { background-color: color-mix(in oklab, var(--color-af-brown-900) 40%, transparent); } .hover\:text-af-red-500:hover { color: var(--color-af-red-500); } /* --- přechody a stíny ---------------------------------------------------- */ .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; } .hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px color-mix(in oklab, var(--color-af-brown-900) 25%, transparent); } /* --- ořez anotace na tři řádky ------------------------------------------- */ .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* --- named group pro karty akcí ------------------------------------------ `group/card` + `group-hover/card:*` build nezná (hlavní web pojmenované skupiny používá jen pro menu a nav položky). */ .group\/card:hover .group-hover\/card\:scale-105 { scale: 1.05; } /* --- responzivní varianty ------------------------------------------------ */ @media (min-width: 48rem) { /* md */ .md\:block { display: block; } .md\:items-center { align-items: center; } .md\:mb-24 { margin-bottom: 6rem; } .md\:pt-28 { padding-top: 7rem; } .md\:line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } } @media (min-width: 96rem) { /* 2xl */ .\32xl\:px-12 { padding-inline: 3rem; } .\32xl\:gap-x-36 { column-gap: 9rem; } .\32xl\:gap-y-10 { row-gap: 2.5rem; } } /* --- odsazení obsahu pod fixní hlavičkou --------------------------------- Hlavička je `position: fixed`, takže si `
` musí odsadit sám. Řeší se TADY a ne utility třídou v šabloně schválně: build neobsahuje ani `pt-[20rem]`, ani žádnou dost velkou hodnotu z výchozí škály, takže by se na to nedalo spolehnout. Hodnoty odpovídají skutečné výšce hlavičky změřené v prohlížeči (mobil 298 px, desktop 182 px) plus rezerva. */ .afro-main { padding-top: 21rem; } @media (min-width: 48rem) { .afro-main { padding-top: 14rem; } } /* ========================================================================== Detail události (event-detail.afrostrava.html.twig) ========================================================================== */ /* --- kontejner detailu --------------------------------------------------- `microsite.css` dává `div#event-detail{background:white;border-radius:1em;padding:2em}`. Bílá karta na béžovém podkladu AfrOstravy nesedí a `padding:2em` navíc bránil hero dosáhnout k okrajům obsahového sloupce. Selektor musí mít id + třídu (1,1,0), aby přebil `div#event-detail` (1,0,1) — samotné `.afro-detail` (0,1,0) by prohrálo. */ #event-detail.afro-detail { background: transparent; border-radius: 0; padding: 0; } /* --- hero ---------------------------------------------------------------- Předloha (www.afrostrava.cz/programme/) má hero 680–820 px vysoké. Detail ho má ZÁMĚRNĚ výrazně nižší — má co nejdřív ukázat popis a nákup, ne dělat titulní stranu. Pod hero byla původně dekorativní „vlnka" z předlohy — odstraněná, nahrazuje ji prostý `margin-bottom`. To SVG mělo přes 48 kB a inlinovalo se do HTML každého detailu, což za ten efekt nestálo. Hero jde od kraje ke kraji obsahového sloupce: `
` má boční odsazení `.afro-gutter`, hero ho ruší záporným marginem odvozeným ze stejné proměnné. ZÁMĚRNĚ se nepoužívá trik `width:100vw;margin-left:50%` — `100vw` počítá i svislý posuvník, takže by stránka dostala vodorovné přetečení. */ .afro-detail-hero { height: 15rem; margin-inline: calc(var(--afro-gutter, 0px) * -1); margin-bottom: 2.5rem; } @media (min-width: 48rem) { .afro-detail-hero { height: 17rem; margin-bottom: 3.5rem; } } @media (min-width: 80rem) { .afro-detail-hero { height: 19rem; } } /* Titulek hero je v Sekuya — vědomá odchylka od předlohy. Předloha (www.afrostrava.cz/programme/) má na tomhle nadpisu SUSE 800; od 15. 9. 2026 ho microsite na přání zákazníka kreslí v Sekuya. ⚠️ Váha MUSÍ být 400. Sekuya je jednováhový display font (Fontsource: `"weights":[400], "variable":false`; jsDelivr vrací pro 700 i 800 chybu 404), takže 500 z `.afro-site h1` nebo 800 z dřívějšího `font-extrabold` by si prohlížeč dopočítal a písmo by se rozmazalo. `font-synthesis-weight` je tu explicitně, i když ho `.afro-site h1` v pojistce níže už nese — kdyby se selektor pojistky někdy zúžil, titulek nesmí zůstat bez ní. Selektor musí mít dvě třídy (0,2,0), aby přebil `.afro-site h1` (0,1,1). */ .afro-site .afro-detail-hero-title { font-family: var(--font-block); font-weight: 400; font-synthesis-weight: none; font-size: 1.75rem; line-height: 1.15; } /* Stejná specificita (0,2,0) jako základní pravidlo — s holým `.afro-detail-hero-title` (0,1,0) prohrávaly a titulek měl 1.75rem všude. */ @media (min-width: 48rem) { .afro-site .afro-detail-hero-title { font-size: 2.25rem; } } @media (min-width: 80rem) { .afro-site .afro-detail-hero-title { font-size: 2.75rem; } } /* --- šířka obsahu detailu ------------------------------------------------ Přes celou šířku obsahového sloupce se text čte špatně, proto je všechno pod hero zúžené a vycentrované. Šířka sedí na `.event-detail-description`, což je obal CELÉHO obsahu pod hero (popis, plánek i nečíslované zóny) — ne jen na popisu. Kdyby ji měl jen popis, zbytek detailu by zůstal široký a stránka by se v půlce rozšířila. Hero zůstává naopak od kraje ke kraji. Modály, toasty a ikona košíku uvnitř jsou `position:fixed`, takže se jich omezení netýká. */ .afro-detail .event-detail-description { max-width: 64rem; margin-inline: auto; } /* Popis je CIZÍ HTML od promotéra — do typografie uvnitř nezasahujeme, jen mu dáme odstup od plánku. */ .afro-detail .event-detail-description-column-1 { margin-bottom: 3rem; } /* Kdyby promotér v popisu použil plovoucí obrázek, ať neteče ven. */ .afro-detail .event-detail-description-column-1::after { content: ""; display: block; clear: both; } .afro-detail .event-detail-description-column-1 img { max-width: 100%; height: auto; } /* --- plánek -------------------------------------------------------------- Plánek sedí vlevo a u sálu užšího než obsahový sloupec pak vpravo zbývá prázdné místo. Centruje se `div.img-responsive.map` — je to BLOKOVÝ prvek s pevnou šířkou, takže `text-align:center` na rodiči na něj neplatí a musí dostat `margin-inline:auto`. Centruje se právě tenhle obal a ne obrázek uvnitř: `` i `` (překryv z maphilight.js) jsou v něm polohované absolutně, takže se posunou s ním a klikací zóny `` zůstanou sedět. */ .afro-detail #home .img-responsive.map, .afro-detail #home .content-img-responsive > div { margin-inline: auto; } /* Plánek ze seating editoru (SVG) má vlastní kontejner. */ .afro-detail #stadium-container { margin-inline: auto; } /* --- plánek a zóny ------------------------------------------------------- Booker zůstává bootstrapový; sjednocujeme jen zaoblení a odsazení, ať nevypadá nalepený na popis. */ .afro-detail #myTabContent, .afro-detail #eventContent { margin-bottom: 2rem; } /* ========================================================================== Vstupenky a košík ve vizuálu AfrOstravy ========================================================================== HTML těchhle bloků generuje portál (booker a objednávkový formulář), takže se do něj nedá zasáhnout třídami v šabloně — vzhled se dolaďuje jen odsud. Všechno je scopované pod `.afro-detail` / `.afro-site`, aby to nepřeteklo do jiných microsit ani do administrace. Barvy berou tokeny z `afrostrava.css` (`--color-af-*`), takže sedí s hlavičkou a patičkou. ⚠️ Bootstrap má na utilitách `!important` a na komponentách vlastní `--bs-*` proměnné. Kde to jde, přepisují se PROMĚNNÉ (čistší a přežije to upgrade Bootstrapu); `!important` jen tam, kde proti stojí utilita. ========================================================================== */ /* --- akordeon zón (nečíslované vstupenky) -------------------------------- */ .afro-detail #eventContent .accordion-item { background-color: var(--color-af-beige-400); border: 1px solid color-mix(in oklab, var(--color-af-brown-900) 12%, transparent); border-radius: 1.25rem; padding: 1.25rem 1.25rem .5rem; margin-bottom: 1.25rem; } .afro-detail #eventContent .accordion-item h6 strong { font-family: var(--font-block); font-size: 1.25rem; font-weight: 500; color: var(--color-af-brown-900); } .afro-detail #eventContent .accordion-body { padding-inline: 0; } /* --- řádek vstupenky ----------------------------------------------------- */ .afro-detail .cart-item { background-color: var(--color-af-beige-300); border: 1px solid color-mix(in oklab, var(--color-af-brown-900) 12%, transparent); border-radius: 1rem; box-shadow: none; padding: 1rem 1.25rem; transition: border-color .18s, box-shadow .18s; } .afro-detail .cart-item:hover { border-color: color-mix(in oklab, var(--color-af-red-500) 45%, transparent); box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--color-af-brown-900) 45%, transparent); } .afro-detail .cart-item .info .title { font-family: var(--font-block); font-size: 1.05rem; font-weight: 500; color: var(--color-af-brown-900); } /* Jednotková cena je v předloze akcent, ne modrý odkaz. `.text-primary` z Bootstrapu nese `!important`, proto stejnou zbraň. */ .afro-detail .cart-item .info .unit-price, .afro-detail .cart-item .info .unit-price.text-primary { color: var(--color-af-red-500) !important; font-size: .9375rem; } /* --- plus/minus u počtu kusů -------------------------------------------- Kulaté pilulky ve stylu jazykového přepínače v hlavičce. */ .afro-detail .cart-item .quantity-controls button { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--color-af-brown-900) 25%, transparent); background-color: transparent; color: var(--color-af-brown-900); font-size: 1.1rem; line-height: 1; transition: background-color .18s, color .18s, border-color .18s; } .afro-detail .cart-item .quantity-controls button:hover:not(:disabled) { background-color: var(--color-af-brown-900); border-color: var(--color-af-brown-900); color: var(--color-af-beige-300); } .afro-detail .cart-item .quantity-controls button:disabled { opacity: .35; cursor: not-allowed; } .afro-detail .cart-item .quantity-controls .quantity { border-radius: 999px; border-color: color-mix(in oklab, var(--color-af-brown-900) 20%, transparent); background-color: transparent; font-weight: 600; color: var(--color-af-brown-900); } /* --- tlačítko „do košíku" ------------------------------------------------ Tvar i chování kopíruje `btn-solid btn-red` z předlohy (plný tvar, zaoblení do pilulky, posun na stisk). */ .afro-detail .cart-item .addToCart, .afro-detail #eventContent .ticket-button { border-radius: 999px; border: 1px solid var(--color-af-brown-900); background-color: var(--color-af-red-500); color: var(--color-white); font-weight: 600; padding: .55rem 1.4rem; box-shadow: 0 3px 0 0 color-mix(in oklab, var(--color-af-brown-900) 90%, transparent); transition: background-color .18s, transform .12s, box-shadow .12s; } .afro-detail .cart-item .addToCart:hover, .afro-detail #eventContent .ticket-button:hover { background-color: var(--color-af-orange-500); color: var(--color-white); } .afro-detail .cart-item .addToCart:active, .afro-detail #eventContent .ticket-button:active { transform: translateY(3px); box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-af-brown-900) 90%, transparent); } /* ========================================================================== Objednávkový panel (#orderContent) — košík, doručení, platba, kontakt ========================================================================== */ /* Hlavička akordeonu „Objednávka" — Bootstrap ji dělá světle modrou. Přepisujeme jeho vlastní proměnné, ne jednotlivá pravidla. */ .afro-detail #orderContent .accordion { --bs-accordion-bg: var(--color-af-beige-400); --bs-accordion-btn-bg: var(--color-af-brown-900); --bs-accordion-btn-color: var(--color-af-beige-300); --bs-accordion-active-bg: var(--color-af-brown-900); --bs-accordion-active-color: var(--color-af-beige-300); --bs-accordion-border-color: color-mix(in oklab, var(--color-af-brown-900) 15%, transparent); --bs-accordion-border-radius: 1.25rem; --bs-accordion-inner-border-radius: 1.25rem; --bs-accordion-btn-focus-box-shadow: none; } .afro-detail #orderContent .accordion-button { font-family: var(--font-block); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; } /* Text hlavičky je v portálovém HTML zabalený do ``, takže mu prohlížeč dá 700 — a protože Sekuya žádnou tučnou variantu nemá, VYROBÍ SI JI SÁM (synthetic bold) roztažením tahů. Výsledek je rozmazaný. Vracíme 500, tedy váhu, kterou font reálně má. Viz i pojistka `font-synthesis-weight` na konci souboru. */ .afro-detail #orderContent .accordion-button strong { font-weight: 500; } /* Šipka akordeonu je v Bootstrapu tmavé SVG — na hnědém pozadí zanikala. */ .afro-detail #orderContent .accordion-button::after { filter: invert(1) brightness(1.6); } .afro-detail #orderContent legend { font-family: var(--font-block); font-size: 1.1rem; font-weight: 500; color: var(--color-af-brown-900); margin-bottom: .75rem; } /* --- tabulka košíku ------------------------------------------------------ */ .afro-detail #orderContent .table { --bs-table-bg: transparent; --bs-table-striped-bg: color-mix(in oklab, var(--color-af-brown-900) 4%, transparent); --bs-table-striped-color: var(--color-af-brown-900); --bs-table-color: var(--color-af-brown-900); --bs-table-border-color: color-mix(in oklab, var(--color-af-brown-900) 12%, transparent); } .afro-detail #orderContent .table thead th { font-family: var(--font-block); font-weight: 500; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in oklab, var(--color-af-brown-900) 70%, transparent); border-bottom-color: color-mix(in oklab, var(--color-af-brown-900) 20%, transparent); } /* Celková částka — zelená z předlohy místo bootstrapí. */ .afro-detail #orderContent .table .text-success, .afro-detail #orderContent .text-success { color: var(--color-af-green-500) !important; font-weight: 700; } /* Křížek „odebrat z košíku" jako kulaté červené tlačítko. */ .afro-detail #orderContent .table .btn-danger { --bs-btn-bg: var(--color-af-red-500); --bs-btn-border-color: var(--color-af-brown-900); --bs-btn-hover-bg: var(--color-af-orange-500); --bs-btn-hover-border-color: var(--color-af-brown-900); border-radius: 999px; font-weight: 700; line-height: 1; } /* --- formulářová pole --------------------------------------------------- Zaoblení 60px je z newsletterového pole v patičce předlohy. */ .afro-detail #orderContent .form-control, .afro-detail #orderContent .form-select { border-radius: 60px; border-color: color-mix(in oklab, var(--color-af-brown-900) 22%, transparent); background-color: var(--color-af-beige-300); color: var(--color-af-brown-900); padding: .6rem 1.1rem; } .afro-detail #orderContent .form-control:focus, .afro-detail #orderContent .form-select:focus { border-color: var(--color-af-red-500); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--color-af-red-500) 18%, transparent); } /* Přepínače a zaškrtávátka v barvě značky. */ .afro-detail #orderContent .form-check-input:checked { background-color: var(--color-af-red-500); border-color: var(--color-af-brown-900); } .afro-detail #orderContent .form-check-input:focus { border-color: var(--color-af-red-500); box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--color-af-red-500) 18%, transparent); } /* --- potvrzení objednávky ------------------------------------------------ */ .afro-detail #orderContent button[type="submit"], .afro-detail #orderContent .btn-success { --bs-btn-bg: var(--color-af-green-500); --bs-btn-border-color: var(--color-af-brown-900); --bs-btn-hover-bg: var(--color-af-brown-500); --bs-btn-hover-border-color: var(--color-af-brown-900); --bs-btn-color: var(--color-white); --bs-btn-hover-color: var(--color-white); border-radius: 999px; font-weight: 600; padding: .65rem 1.6rem; box-shadow: 0 3px 0 0 color-mix(in oklab, var(--color-af-brown-900) 90%, transparent); transition: background-color .18s, transform .12s, box-shadow .12s; } .afro-detail #orderContent button[type="submit"]:active, .afro-detail #orderContent .btn-success:active { transform: translateY(3px); box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-af-brown-900) 90%, transparent); } /* --- plovoucí ikona košíku ---------------------------------------------- Tvarem i barvou navazuje na zelené kolečko hamburgeru v hlavičce. ⚠️ NA KONTEJNERU NEJDE POUŽÍT `display:flex`. Portál jeho viditelnost přepíná bootstrapími třídami `.d-none` / `.d-block`, a ty nesou `!important`, takže by flex nikdy nevyhrál — kolečko zůstalo `display:block`, ikona se zarazila vlevo a odznak s počtem se pozicoval mimo. Centrování proto dělá odkaz uvnitř, který se roztáhne přes celé kolečko. */ .afro-site .cart-icon-container { width: 3.5rem; height: 3.5rem; border-radius: 999px; background-color: color-mix(in oklab, var(--color-af-green-500) 90%, transparent); box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--color-af-green-500) 90%, transparent); color: var(--color-af-beige-300); } .afro-site .cart-icon-container > a { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; color: var(--color-af-beige-300); text-decoration: none; } .afro-site .cart-icon-container > a:hover { color: var(--color-white); } /* Ikona má v šabloně inline `style="font-size: 2em"`, což CSS bez `!important` nepřebije. `line-height: 1` je nutné — s nulou přerostl box ikony odkaz. */ .afro-site .cart-icon-container .bi { font-size: 1.5rem !important; line-height: 1; } /* Odznak s počtem sedí na horním pravém okraji kolečka. */ .afro-site .cart-icon-container .item-count { position: absolute; top: -.15rem; right: -.15rem; display: flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding-inline: .3rem; border-radius: 999px; border: 2px solid var(--color-af-beige-300); background-color: var(--color-af-red-500); color: var(--color-white); font-size: .7rem; font-weight: 700; line-height: 1; } /* --- karta plánku -------------------------------------------------------- `#home` má z generické šablony bootstrapí rámeček a bílé pozadí; na béžovém podkladu to byl jediný bílý blok na stránce. */ .afro-detail #myTabContent #home { background-color: var(--color-af-beige-400); border-color: color-mix(in oklab, var(--color-af-brown-900) 12%, transparent) !important; border-radius: 1.25rem; padding-block: 1rem; } /* --- „Rozbalit popis" ---------------------------------------------------- Vedlejší akce, takže obrysové tlačítko (`btn-outline` z předlohy), ne plné jako nákup. */ .afro-detail .event-detail-description-column-1 .btn-info { --bs-btn-bg: transparent; --bs-btn-color: var(--color-af-brown-900); --bs-btn-border-color: var(--color-af-brown-900); --bs-btn-hover-bg: var(--color-af-brown-900); --bs-btn-hover-color: var(--color-af-beige-300); --bs-btn-hover-border-color: var(--color-af-brown-900); border-radius: 999px; font-weight: 600; padding: .45rem 1.2rem; } /* ========================================================================== Pojistka proti falešnému tučnění Sekuya ========================================================================== Sekuya je JEDNOVÁHOVÝ display font — má pouze 400 (Fontsource: `"weights":[400], "variable":false`; jsDelivr vrací pro 700 i 800 chybu 404). Jakmile na ni něco pustí `font-weight: bold` / 600+, prohlížeč tučný řez dopočítá sám a písmo se opticky rozmaže. Stává se to zákeřně: HTML generuje portál a schované ``, `` nebo `` v něm dědí 700 z prohlížečového stylu, i když v našem CSS je 500. Přesně takhle „zmazatěl" nadpis objednávky. `font-synthesis-weight: none` prohlížeči dopočítávání zakáže — text pak zůstane v reálné váze 400 místo aby se rozmazal. Platí jen pro místa, kde Sekuya skutečně používáme; SUSE má všechny váhy 100–900, takže se jí to netýká. ⚠️ Kdyby někdy bylo potřeba v tomhle layoutu opravdu tučné písmo, nesahej po Sekuya — použij SUSE (`var(--font-sans)`). ========================================================================== */ .afro-site h1, .afro-site h2, .afro-site h3, .afro-detail #eventContent .accordion-item h6, .afro-detail #eventContent .accordion-item h6 strong, .afro-detail .cart-item .info .title, .afro-detail #orderContent .accordion-button, .afro-detail #orderContent .accordion-button strong, .afro-detail #orderContent legend, .afro-detail #orderContent .table thead th { font-synthesis-weight: none; } /* ========================================================================== Typografie popisu události ========================================================================== Popis píše promotér v editoru, takže do něj přijde libovolné HTML — nadpisy h1–h6, odstavce, číslované i odrážkové seznamy, odkazy. Tady se mu jen nastaví rytmus a měřítko; do obsahu se nezasahuje. ========================================================================== */ /* --- nadpisy ------------------------------------------------------------- ⚠️ ZÁMĚRNĚ SUSE, ne Sekuya. Obecné pravidlo `.afro-site h1,h2,h3` dává nadpisům Sekuya, což je správně pro titulek stránky, ale ne pro text uvnitř popisu: Sekuya je verzálkový display font, takže h1–h3 v něm vyšly obrovské, celé velkými písmeny a opticky splývaly — zatímco h4–h6 (které to pravidlo nechytá) zůstaly v SUSE. Popis tím dostal dvě různé sady nadpisů. Navíc Sekuya nemá tučný řez (viz pojistka `font-synthesis-weight` výše), takže nadpisy v ní nejdou odlišit vahou. SUSE má 100–900. */ .afro-detail .event-detail-description-column-1 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans); font-weight: 700; color: var(--color-af-brown-900); line-height: 1.25; margin-top: 2rem; /* nadpis potřebuje vzduch nad sebou, Bootstrap dává 0 */ margin-bottom: .6rem; } /* První nadpis v popisu odsazení shora nechce — navazuje rovnou na hero. */ .afro-detail .event-detail-description-column-1 > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; } .afro-detail .event-detail-description-column-1 h1 { font-size: 1.75rem; } .afro-detail .event-detail-description-column-1 h2 { font-size: 1.5rem; } .afro-detail .event-detail-description-column-1 h3 { font-size: 1.3rem; } .afro-detail .event-detail-description-column-1 h4 { font-size: 1.15rem; } .afro-detail .event-detail-description-column-1 h5 { font-size: 1.05rem; } .afro-detail .event-detail-description-column-1 h6 { font-size: 1rem; } /* --- odstavce ------------------------------------------------------------ */ .afro-detail .event-detail-description-column-1 p { line-height: 1.65; margin-bottom: 1rem; } /* --- seznamy ------------------------------------------------------------- ⚠️ Tohle je oprava, ne kosmetika. Tailwind preflight v `afrostrava.css` nastavuje `ol,ul{list-style:none}` a Bootstrap to nevrací zpátky, takže seznamy v popisu přišly ÚPLNĚ o čísla i odrážky — zůstal jen odsazený text. (Jinde je `list-style:none` žádoucí, proto se vrací adresně jen tady.) */ .afro-detail .event-detail-description-column-1 ol { list-style: decimal; } .afro-detail .event-detail-description-column-1 ul { list-style: disc; } .afro-detail .event-detail-description-column-1 :is(ol, ul) { padding-left: 1.5rem; margin-bottom: 1rem; } .afro-detail .event-detail-description-column-1 li { line-height: 1.65; margin-bottom: .3rem; } .afro-detail .event-detail-description-column-1 li::marker { color: var(--color-af-red-500); } /* Vnořené seznamy — jiný typ odrážky a bez zdvojené spodní mezery. */ .afro-detail .event-detail-description-column-1 :is(ol, ul) :is(ol, ul) { margin-top: .3rem; margin-bottom: 0; } .afro-detail .event-detail-description-column-1 ul ul { list-style: circle; } .afro-detail .event-detail-description-column-1 ol ol { list-style: lower-alpha; } /* --- ostatní ------------------------------------------------------------- */ .afro-detail .event-detail-description-column-1 a { color: var(--color-af-red-500); text-decoration: underline; text-underline-offset: 2px; } .afro-detail .event-detail-description-column-1 hr { border-color: color-mix(in oklab, var(--color-af-brown-900) 18%, transparent); margin-block: 2rem; opacity: 1; } /* --- rozbalený popis (sekundární popis) ---------------------------------- Obsah se vykresluje do `#description`, které Bootstrap sbaluje třídou `.collapse`. Ve sbaleném stavu má `display:none`, takže odsazení nedělá mezeru pod tlačítkem — projeví se až po rozbalení. */ .afro-detail .event-detail-description-column-1 #description { margin-top: 1.5rem; } /* Videa v popisu. Promotér je vkládá jako YouTube embed s `width="100%" height="315"`, často několik v jednom odstavci. `