/* ========================================================================== Textové stránky — one shared stylesheet for the plain WPBakery pages: Sponzoring, Kontakty, O týmu, Stadion, Historie and the Soutěže landing pages. Between them they are almost entirely vc_column_text, vc_custom_heading, vc_btn, vc_separator and stm_spacing, so the same rules cover all of them; the one-off widgets get their own short sections at the bottom of this file. Scoped on `.kobra-text-page`, a body class this child theme adds itself (see kobra_text_page_body_class). Splash's own body classes were not built on: last session was largely spent finding thirteen dead rules that keyed on `.blog`, which is not on the body of an archive at all. Everything here is styling. No page content is changed — the two things that genuinely need fixing in wp-admin (a dead image_size on the sponsor carousel, an empty contact block) are worked around here and listed in CLAUDE.md instead. ========================================================================== */ /* The page masthead (.kobra-page-head / .kobra-page-title) is NOT here. It moved to redesign.css in v0.44.0, because five templates need it — the text pages, the news listing, the squad page, the coaching staff and the team statistics page — and only this file loads on the text ones. Which pages get a heading is decided by kobra_page_heading() in PHP, and redesign.js injects it. */ /* ========================================================================== The type scale — five sizes, and nothing else -------------------------------------------------------------------------- Sponzoring drifted badly before this was written down. Measured on one page: **four different sizes doing the same job** — body copy at 17px, the closing statement at 18px, its last line at 19px and the CTA text at 16px — and **three sizes of section heading**, 25px, 27px and an `

` at 30px, which made a body-level line bigger than every heading on the page. Two blocks were also `--kobra-mist` where everything around them was `--kobra-ice`. None of it was a decision; it accumulated one block at a time. So: 46px / 800 page title (h1, in redesign.css) 30px / 700 display callout (h3) — deliberately the largest thing in the body copy, and confirmed by the user. On Sponzoring it is the name to search for in Givt, i.e. the most actionable string on the page, so outranking the section headings is right: it is a pull quote, not a step in the heading outline. Stated explicitly rather than left inheriting Splash's 30px, so it reads as chosen. 27px / 800 section heading (h2) 20px / 700 sub-heading (h4) 17px / 400 body copy — the only size body text ever is 15px / 700 kicker (h5) 13px / 700 eyebrow, button label Colour goes with it: **ice for anything anyone reads**, sky for eyebrows, mist only for genuinely secondary metadata — a contact label, a photo credit — never for a paragraph. Deviating from this is fine, but it should be a decision with a reason next to it, not a leftover. Splash also sizes page text for a white page at a tighter line-height than a dark background can carry: light type on dark needs more air to stay readable. The measure is capped per column rather than per page, since these pages mix full-width and half-width text. ========================================================================== */ .kobra-text-page .wpb_text_column p, .kobra-text-page .wpb_text_column li { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; line-height: 1.75; color: var(--kobra-ice); hyphens: auto; -webkit-hyphens: auto; } .kobra-text-page .wpb_text_column p { margin: 0 0 18px; } .kobra-text-page .wpb_text_column p:last-child { margin-bottom: 0; } .kobra-text-page .wpb_text_column strong, .kobra-text-page .wpb_text_column b { font-weight: 700; color: #fff; } .kobra-text-page .wpb_text_column a { color: var(--kobra-sky); text-decoration: none; border-bottom: 1px solid rgba(83, 169, 220, 0.4); } .kobra-text-page .wpb_text_column a:hover { color: var(--kobra-yellow); border-bottom-color: var(--kobra-yellow); } /* Lists get a marker in the accent colour; Splash leaves them as browser defaults, which on this background are invisible grey dots. */ .kobra-text-page .wpb_text_column ul { margin: 0 0 18px; padding-left: 22px; list-style: none; } .kobra-text-page .wpb_text_column ul > li { position: relative; margin-bottom: 8px; } .kobra-text-page .wpb_text_column ul > li::before { content: ""; position: absolute; top: 12px; left: -18px; width: 6px; height: 6px; border-radius: 50%; background: var(--kobra-sky); } /* ========================================================================== Legacy inline colours pasted into the page content -------------------------------------------------------------------------- Both pages were written in the classic editor with text pasted in from Word or Docs, and carry the editor's colours baked into the markup as . Invisible on the old white page, unreadable here — black text on navy. An inline style outranks every author rule regardless of selector length, so an important author declaration is the only thing in the cascade that beats it. Same mechanism, and the same anchored `^=` / `*="; color…"` matching, as the equivalent block in post.css: a plain [style*="color: #000000"] would also match `background-color: #000000` and repaint the text of anything given a dark background. The full set present in these two pages: #000000 black — body text and headings, most of both pages #008000 green — one highlighted line on Sponzoring The permanent fix is to strip these spans in the editor. That is a content edit, would have to be repeated on production, and cannot travel in the theme zip, so it is masked here and listed in CLAUDE.md. ========================================================================== */ .kobra-text-page [style^="color: #000000"], .kobra-text-page [style^="color:#000000"], .kobra-text-page [style*="; color: #000000"], .kobra-text-page [style^="color: #333333"], .kobra-text-page [style^="color:#333333"], .kobra-text-page [style*="; color: #333333"] { color: var(--kobra-ice) !important; } /* Links keep looking like links even when the paste painted them body-text black. a[style] at (0,2,1) outranks the bare attribute rule at (0,2,0), so this wins regardless of source order. */ .kobra-text-page a[style^="color: #000000"], .kobra-text-page a[style^="color:#000000"], .kobra-text-page a[style^="color: #333333"], .kobra-text-page a[style^="color:#333333"], .kobra-text-page [style^="color: #0000ff"], .kobra-text-page [style^="color:#0000ff"] { color: var(--kobra-sky) !important; } /* The one deliberate colour on either page: "Podpora ledního hokeje žen z.s." is set in #008000, a green picked to stand out on white. It was chosen to emphasise, not to be that particular green — it is the name to search for in Givt, so it does need to stand out. Repainted in the palette's own accent instead of left as a colour that belongs to no part of this design. Given a chip treatment further down. */ .kobra-text-page [style^="color: #008000"], .kobra-text-page [style^="color:#008000"], .kobra-text-page [style*="; color: #008000"] { color: var(--kobra-yellow) !important; } /* ========================================================================== A dead background photo from the old server (v0.73.1) -------------------------------------------------------------------------- The "TĚŠÍME SE NA TEBE!" column on Nábor carries, from the page builder's own `css=` attribute: background-image: url(http://51.124.195.18/…/SMALL-ICE.jpg) !important — a raw IP, the site's previous server. The user reported it as "a strange white ice you can't read the text on", which is the giveaway that **it still loads for a visitor**: the page is served by this stack but the image is fetched by the browser, straight off the old host. So it is not a broken image, it is a pale photograph under ice-coloured text. She asked for no background at all — the column reads fine on the page's own ink, and nothing else on these pages is a framed slab. Same declaration and the same fix as the coaching-staff page, where it sits in staff.css; that file loads only on pages carrying `[staff_profile]`, so Nábor needed its own copy. Checked before writing this: `background-image` in a `css=` attribute exists on exactly three pages — Realizační tým, Nábor and one untitled draft — so this rule reaches Nábor and nothing else. Matched on the attribute rather than the generated class name, because WPBakery regenerates `vc_custom_…` on every save of the row. `!important` because theirs is important: nothing else can beat an important declaration. */ .kobra-text-page [class*="vc_custom_"] { background-image: none !important; } /* ========================================================================== Headings (vc_custom_heading) -------------------------------------------------------------------------- text-align and font-size arrive as inline styles from the page builder and are deliberately left alone — those are the editor's decisions and would need !important to override, which would then be impossible to change back from wp-admin. Only the things Splash gets wrong on a dark background are touched: colour, weight and spacing. ========================================================================== */ .kobra-text-page .vc_custom_heading { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800; line-height: 1.18; letter-spacing: 0.01em; color: var(--kobra-ice); margin: 0 0 20px; } /* h2 is what every one of these pages uses for a section title. Kept uppercase where the copy already is, rather than forced. */ .kobra-text-page h2.vc_custom_heading { font-size: 27px; } /* One stray inline size, normalised — and **only** that one value. "Naši sponzoři" on Sponzoring carries an inline `font-size: 25px` while the three other headings on the page carry none, so it sat 2px off among them. That is a leftover from whoever built the row, not a decision about that heading, and it was visible. A blanket `font-size: 27px !important` was written first and was wrong: **O týmu and Stadion set their h2 to 45px inline**, a deliberate display size, and it crushed both to 27px — two pages that have not been reviewed yet, broken by a rule aimed at a third. Matching the exact declaration instead normalises the leftover and leaves real choices alone. Same technique as the legacy-colour block above, for the same reason. The inline 25px is still in the page content and wants deleting in the editor; this only stops it showing until then. (Worth a look when those two pages come up: a 45px h2 now sits directly under the injected 46px page title, which may make one of them redundant.) */ .kobra-text-page h2.vc_custom_heading[style*="font-size: 25px"], .kobra-text-page h2.vc_custom_heading[style*="font-size:25px"] { font-size: 27px !important; } .kobra-text-page .wpb_text_column h3, .kobra-text-page .wpb_text_column h4, .kobra-text-page .wpb_text_column h5 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: var(--kobra-ice); line-height: 1.3; margin: 0 0 16px; } /* The display callout — see the scale above. Kept at the 30px it was already rendering at, but declared rather than inherited from Splash, so the next person can see it is intended. */ .kobra-text-page .wpb_text_column h3 { font-size: 30px; } .kobra-text-page .wpb_text_column h4 { font-size: 20px; } /* Kontakty opens on an h5 ("Jsme k zastižení téměř nepřetržitě") used as a kicker rather than as a heading, so it gets the design system's eyebrow treatment. `!important` is against **our own redesign.css**, which paints bare `h5` `--kobra-ice !important` site-wide. An important declaration on a type selector outranks any non-important rule however long, so the sky colour was silently discarded and the kicker rendered as ordinary ice text. Same trap that kept the calendar's and match page's table captions ice for several versions before anyone noticed. */ .kobra-text-page .wpb_text_column h5 { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kobra-sky) !important; } /* ========================================================================== Separators -------------------------------------------------------------------------- vc_separator ships `vc_sep_color_grey`, a mid grey that reads as a scratch on navy. Repainted to the palette's hairline. The border lives on .vc_sep_line, not on the wrapper. ========================================================================== */ /* `!important` and a four-class selector, both needed. styles.css declares `.vc_separator.vc_sep_color_grey .vc_sep_line` at (0,3,0) **with `!important`** — importance outranks specificity outright, so a longer selector alone left the line at #e6e6e6, a light grey scratch across the navy. Matching through .vc_sep_holder rather than the colour class keeps this working if an editor picks a different separator colour. */ .kobra-text-page .vc_separator .vc_sep_holder .vc_sep_line { border-color: var(--kobra-line) !important; } .kobra-text-page .vc_separator { margin: 8px 0; } /* ========================================================================== Buttons (vc_btn3) -------------------------------------------------------------------------- The page builder's buttons come in a matrix of style and colour classes — these two pages alone use `style-3d` + `color-black` and `style-modern` + `color-success`, i.e. a fake-embossed black button next to a flat green one, neither of which is in this palette. Rather than restyle each combination, every vc_btn3 is reset to the site's own .kobra-btn shape and then split two ways by intent: success / primary / warning -> yellow, the affirmative action everything else -> ghost, the secondary action which on Sponzoring gives "Získat pomocníka Givt.cz" the primary and "Jak používat Givt?" the secondary, matching what those two buttons actually do. The mapping is by meaning, not by page, so it holds for the remaining text pages without further work. `info` was in the yellow list until v0.50.1 and was moved to ghost at the user's request. It is used on exactly one thing site-wide — the season links on the four Soutěže pages (1. Liga žen and 2. Liga žen three each, AHL two, Přátelská utkání four) — checked across every published post before the move, so nothing else shifted. Those are peer links into a calendar, not competing calls to action, and three or four solid yellow buttons stacked together left no primary for the eye to find. `info` also means "informational" in the builder's own vocabulary, so mapping it to the affirmative action was the wrong reading to begin with. `success` deliberately stays yellow: it is Sponzoring's "Získat pomocníka Givt.cz", the one genuine call to action on the text pages, plus the same button on the two Givt articles. Selector weight: WPBakery's own rules are as specific as `.vc_btn3.vc_btn3-style-3d.vc_btn3-color-black` (0,3,0). These lead with the body class and the element, `.kobra-text-page a.vc_general.vc_btn3` (0,3,1), so they win without !important. ========================================================================== */ .kobra-text-page a.vc_general.vc_btn3 { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 3px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; border: 1.5px solid transparent; text-decoration: none; top: auto; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } /* ---------- Why the paint properties carry !important ---------- Layout is won on specificity alone: WPBakery sizes buttons through `.vc_btn3.vc_btn3-size-lg` at (0,2,0), which the selector above beats at (0,3,1). Colour is not — it combines style, colour *and* size into chains like `.vc_btn3.vc_btn3-color-black.vc_btn3-style-3d.vc_btn3-size-lg` at (0,4,0), which outranks it. Chasing that with a longer selector would mean guessing at every combination the builder can emit across six pages. Those rules carry no `!important` of their own, so a single one here wins outright — the same documented exception as the match page's scoreboard and the player profile's details list. Confirmed by reading the winning rule rather than assumed: shipped without it, the "Jak používat Givt?" button kept the 3d style's `rgb(14,14,14) 0 5px 0` extruded shadow under an otherwise correct ghost button. */ /* Ghost is the default, so any colour class not listed below lands here. */ .kobra-text-page a.vc_general.vc_btn3 { background-color: transparent !important; background-image: none !important; color: var(--kobra-ice) !important; border-color: rgba(234, 241, 248, 0.4) !important; box-shadow: none !important; } /* Both buttons must lift on hover, not one lift and the other sink. The `3d` style presses its button *down* on hover — `.vc_btn3.vc_btn3-color-black.vc_btn3-style-3d.vc_btn3-size-lg:hover { top: 3px }` at (0,5,1) — which outranked a `top: auto` written at (0,4,2), so the ghost button dropped 3px while the yellow one rose 2px. Two buttons side by side moving opposite ways. `top` therefore carries `!important` (their rule has none) and the same `translateY(-2px)` as the primary is applied here, so the pair moves as one. No shadow on the lift: the primary's is yellow-tinted and belongs to a yellow button. */ .kobra-text-page a.vc_general.vc_btn3:hover, .kobra-text-page a.vc_general.vc_btn3:focus { background-color: transparent !important; color: var(--kobra-sky) !important; border-color: var(--kobra-sky) !important; box-shadow: none !important; top: auto !important; transform: translateY(-2px); } .kobra-text-page a.vc_general.vc_btn3.vc_btn3-color-success, .kobra-text-page a.vc_general.vc_btn3.vc_btn3-color-primary, .kobra-text-page a.vc_general.vc_btn3.vc_btn3-color-warning { background-color: var(--kobra-yellow) !important; background-image: none !important; color: #101a08 !important; border-color: var(--kobra-yellow) !important; box-shadow: none !important; } .kobra-text-page a.vc_general.vc_btn3.vc_btn3-color-success:hover, .kobra-text-page a.vc_general.vc_btn3.vc_btn3-color-primary:hover, .kobra-text-page a.vc_general.vc_btn3.vc_btn3-color-warning:hover { background-color: var(--kobra-yellow) !important; color: #101a08 !important; transform: translateY(-2px); box-shadow: 0 10px 28px -6px rgba(241, 232, 19, 0.45) !important; } /* The icon sat 8px above the label in both buttons, and `position: static` was only half the fix. WPBakery centres this icon the absolute-positioning way: `position: absolute; top: 50%; transform: translateY(-8px)` — half its own 16px height. Taking it out of absolute positioning made `top: 50%` inert but left the transform applying to a static box, so the icon was simply shifted 8px up. Measured exactly that: icon midpoint 8px above the button's. With the transform cleared, the button's own `display: inline-flex; align-items: center` centres it, so nothing here has to know the icon's height. `vertical-align` is reset too — it is `top` in Splash's rule and would matter again if the flex context ever went away. */ .kobra-text-page a.vc_general.vc_btn3 .vc_btn3-icon { position: static; top: auto; transform: none; vertical-align: middle; margin: 0; font-size: 15px; line-height: 1; } /* Centred buttons are stacked by the builder as one container each, so two in a row arrive as two full-width blocks with a gap between them. Pulled together into a single centred pair that wraps on a phone. */ .kobra-text-page .vc_btn3-container { margin-bottom: 12px; } /* ---------- The site's own .kobra-btn needs rescuing on these pages ---------- redesign.css declares `.kobra-btn { display: inline-flex }` at (0,1,0), and `.hockey a { display: inline }` in hockey.css is (0,1,0)+(0,0,1) = (0,1,1), so on any page where a .kobra-btn is an anchor it loses. Both buttons this file injects — the map link on Kontakty and the sponsor CTA — came out as inline text: vertical padding does nothing on an inline box, so they read as underlined words rather than buttons. `gap` is restated with the display value on purpose. It only applies to flex and grid containers, so with display forced back to inline it was silently inert — the same dead `gap` that made the squad tabs' labels sit flush against their counts. Restoring the display value is the fix, not a bigger gap. Elsewhere in this theme .kobra-btn is used on elements the parent doesn't attack (the hero's own anchors sit outside .hockey a's reach, the roster's tabs are real buttons), which is why this only surfaces now. */ .kobra-text-page a.kobra-btn { display: inline-flex; align-items: center; gap: 10px; } /* ========================================================================== Panel rows — tagged by pages.js -------------------------------------------------------------------------- Bootstrap columns are floats, so side-by-side blocks end up different heights and the page looks ragged. Grid on the row fixes that, but it is deliberately not applied to every .vc_row: last session `display: flex` on a clearfix row promoted its ::before/::after to flex items and a gap shoved a heading 20px sideways. So pages.js tags only rows it has checked — two or more columns, all of them carrying real content — and the grid is scoped to that class. The pseudo-elements still have to be neutralised, since grid would promote them exactly the same way, and the columns need their float and percentage width removed or they would take half of their own grid track. ========================================================================== */ /* `.vc_row.kobra-panel-row` at (0,3,0), not `.kobra-panel-row` at (0,2,0): WPBakery declares `.vc_row.vc_row-flex { display: flex }` at (0,2,0) too, and js_composer.min.css loads after this file, so an equal-specificity rule loses on source order. The Givt row carries vc_row-flex (its content_placement is "middle"), so it stayed flex and the panels never equalised — while the row without that class did become a grid, which made it look like the rule worked on one row and not the other. */ .kobra-text-page .vc_row.kobra-panel-row { display: grid; /* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so a track can never shrink below its own content's min-content width — one wide image or one long word and the tracks stop being equal and push the row past its container. Measured on Sponzoring at 390px before this: 279px + 114px on one row and 212px + 225px on the other, against 360px of available width. `minmax(0, …)` lets them share honestly. */ grid-template-columns: repeat(var(--kobra-panel-cols, 2), minmax(0, 1fr)); gap: 26px; align-items: stretch; margin-bottom: 30px; /* WPBakery pulls every `.vc_row-fluid` 15px into the container's padding (30px when the row carries `vc_column-gap-30`) and gives that space back as column padding — which we zero, because the grid supplies its own gap. Left alone, panels start 15 or 30px left of the page title instead of lining up with it, and two panel rows on one page disagree with each other: measured 33 and 48 against the title's 63. On a phone the same margins push the row past the viewport edge. */ margin-left: 0; margin-right: 0; } .kobra-text-page .vc_row.kobra-panel-row::before, .kobra-text-page .vc_row.kobra-panel-row::after { display: none; } .kobra-text-page .kobra-panel-row > .wpb_column { float: none; width: auto; padding-left: 0; padding-right: 0; } .kobra-text-page .kobra-panel-row > .wpb_column > .vc_column-inner { height: 100%; padding: 0; } .kobra-text-page .kobra-panel-row > .wpb_column > .vc_column-inner > .wpb_wrapper { height: 100%; display: flex; flex-direction: column; padding: 30px 32px; border-radius: 4px; background-color: var(--kobra-navy); background-image: var(--kobra-ice-texture); background-repeat: repeat; border: 1px solid var(--kobra-line); } /* Buttons sit at the bottom of a panel, so two panels of unequal text length still line their actions up. */ .kobra-text-page .kobra-panel-row .vc_btn3-container:last-child { margin-top: auto; margin-bottom: 0; } /* Body copy on these pages is justified. It started scoped to the panels, because that was the text the user asked about first; she then asked for O týmu's unframed prose to be justified too, and one rule for all body copy is both what she wants and simpler than two that have to be kept in step. Justified Czech needs `hyphens: auto` to avoid rivers of white space between long words. That is already on the base paragraph rule above, and it needs the document's `lang` attribute or it silently does nothing (these pages carry `lang="cs"`). Two things are deliberately not caught, and neither needs an exception written for it: - **Centred paragraphs stay centred.** Sponzoring's thank-you block carries `text-align: center` as an inline style from the editor, which outranks this. Verified — it still computes `center`. - **The CTA text stays centred**, because it is not inside a `.wpb_text_column` — it is injected, and has its own rule. */ /* On the block, not only on its paragraphs — `text-align` inherits, so this is what catches copy that was never wrapped in a `

` at all. AHL Soutěž žen is written as three bare text nodes inside the widget's own `

`, with no paragraph tags anywhere, so a rule targeting `p` and `li` never reached it and that page alone stayed ragged while the other three justified. Same shape as the news listing's card excerpt, which was a bare text node inside `.content` and missed the `.content p` rule for the same reason. Single-line headings inside the block inherit it harmlessly — justification has no effect on a last line. */ .kobra-text-page .wpb_text_column, .kobra-text-page .wpb_text_column p, .kobra-text-page .wpb_text_column li { text-align: justify; } /* Paragraphs the editor explicitly set to **left** need `!important`, because an inline style beats any author rule. All three paragraphs on Historie carry `style="text-align: left;"` — a leftover from pasting, not a decision about those paragraphs — so the rule above silently did nothing there and the text stayed ragged while every other page justified. Matched on the exact value rather than blanket-importanting `text-align`, which would also override the **centred** paragraphs on Sponzoring. Those are inline too, and they are a real choice. Same technique as the inline font sizes and the legacy colours. */ /* **Headings are never justified.** The copy blocks carry `text-align: justify` and it inherits, so a heading that wraps to two lines had its first line stretched edge to edge — at the user's instruction: "zarovnání do bloku je fajn, ale tam, kde je to nadpis, to musí být zarovnané doleva". No `!important`, deliberately: a heading the editor centred on purpose carries an inline `text-align`, which still wins, so this only reaches the headings that were inheriting the justification rather than choosing it. */ .kobra-text-page .wpb_text_column h1, .kobra-text-page .wpb_text_column h2, .kobra-text-page .wpb_text_column h3, .kobra-text-page .wpb_text_column h4, .kobra-text-page .wpb_text_column h5, .kobra-text-page .wpb_text_column h6 { text-align: left; } .kobra-text-page .wpb_text_column p[style*="text-align: left"], .kobra-text-page .wpb_text_column p[style*="text-align:left"] { text-align: justify !important; } /* The mobile counterpart of the rule above used to hand these paragraphs back to `left` below 767px. Removed for the same reason: justified on desktop now means justified on a phone as well. */ /* A panel whose only content is an image gets **no panel at all** — the image is left to be an image. The first version gave it a light plate to sit on, on the reasoning that these PNGs have solid white backgrounds (they do — verified pixel by pixel) and so cannot sit on navy. But the plate is stretched to the height of the text panel beside it, and the Givt infographic is 603px tall against that panel's 511 — so it became a 557x511 light box holding a 252px image, with a large empty light margin above and below and the image's own white inside a slightly different off-white. Two tones and a border where the user just wanted the picture, and she asked for it removed. The white background is still there, because it is baked into the file. That is fine: without the plate it reads as one clean white image rather than a white image inside a light frame. `.kobra-panel-light` is set by pages.js, which checks what the column actually holds; doing it in CSS would need :has() and would silently drop the whole rule on browsers without it. */ .kobra-text-page .kobra-panel-row > .kobra-panel-light > .vc_column-inner > .wpb_wrapper { background: none; border: 0; padding: 0; justify-content: center; align-items: center; } .kobra-text-page .kobra-panel-row > .kobra-panel-light .wpb_single_image { margin: 0; width: 100%; } .kobra-text-page .kobra-panel-row > .kobra-panel-light img { display: block; width: 100%; height: auto; /* 4px, matching every other rounded surface in this design. This rule is (0,4,1) and out-specifies the general image rule further down, so leaving it at 2px meant the panel images were rounded differently from the rest of the page for no reason. */ border-radius: 4px; } /* ========================================================================== Sponsor wall — injected by pages.js, replaces [stm_carousel] -------------------------------------------------------------------------- Why replaced rather than restyled: four of the five logos render with an empty src, because the shortcode asks for a 1200x1200 crop of images that are 1280x720 (see kobra_sponsor_logos for the full mechanism). Fixing that in place would mean editing page content, which does not travel in the theme zip. Five logos also fit one row at every width this site is used at, so the carousel was paging through nothing. The tiles are light on purpose. Four of the five logo PNGs have solid white backgrounds — checked pixel by pixel, not guessed — so they cannot sit on navy without showing their own white box. The fifth (HejdukSport) is transparent and mid-dark, so it reads on a light tile too. ========================================================================== */ /* Hidden here as well as replaced in JS, mirroring the script's own match. pages.js runs at DOMContentLoaded, which is late enough to paint first: the broken carousel would flash one logo and four empty boxes before being swapped out. Same bet the homepage already makes for the nav and the hero, which are also JS-injected — if the script fails, the block is missing rather than wrong. */ .kobra-text-page .stm-image-carousel { display: none; } .kobra-sponsor-wall { margin: 0 0 34px; } .kobra-sponsor-wall-eyebrow { margin: 0 0 6px; text-align: center; } /* The label the editor put on the widget, reinstated — see buildSponsorWall. Section-heading size, like every other h2 on these pages. */ .kobra-text-page h2.kobra-sponsor-wall-title { margin: 0 0 20px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 27px; line-height: 1.18; text-align: center; color: var(--kobra-ice); } .kobra-sponsor-grid { display: grid; /* auto-fit rather than a fixed five: a sponsor added or removed in wp-admin reflows instead of leaving a hole or overflowing. */ grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; } /* `a.kobra-sponsor-tile`, not the class alone — **third time** `.hockey a` (0,1,1) has beaten a one-class rule in this file, after the map button and the social links. Here it cost the centring: `display: flex` lost, the tile computed to `block`, and `justify-content`/`align-items` are inert on a block container — so both declarations were present, correct and doing nothing, and every logo sat flush against the left padding edge. Measured 27px off centre. Any rule in this file that styles an anchor needs the element in the selector. Assume `.hockey a` wins otherwise. */ .kobra-text-page a.kobra-sponsor-tile { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 16px 18px; border-radius: 4px; background: #f4f7fb; border: 1px solid rgba(7, 27, 48, 0.1); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .kobra-text-page a.kobra-sponsor-tile:hover { transform: translateY(-3px); border-color: var(--kobra-sky); box-shadow: 0 12px 26px -10px rgba(7, 27, 48, 0.55); } /* contain, not cover: these are logos of wildly different aspect ratios (1280x720 next to 1123x794) and cropping one would cut its wordmark. The height cap is what sizes them, not the width: at 92px a 16:9 logo comes out 164px wide inside a 181px content box, so it nearly fills the tile with a little air left. It was 68px, which left 56px of the tile's width unused and made the logos look small in their own frames. `max-width: 100%` still binds on narrow viewports, where the grid's tracks shrink below that. */ .kobra-sponsor-tile img { display: block; max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain; } /* ========================================================================== Sponzoring — the thank-you statement -------------------------------------------------------------------------- The closing paragraphs already sit between two vc_separators in the page content, which is the right structure for a pull quote; it just wasn't being treated as one. Tagged by pages.js so the treatment applies to that block and not to every centred paragraph on the site. ========================================================================== */ .kobra-text-page .kobra-statement { max-width: 780px; margin: 0 auto; padding: 6px 0 2px; } /* Body size and body colour, like every other paragraph. This block used to be 18px mist with a 19px ice last line — three deviations from the scale in one place, none of them meaning anything. Its prominence comes from being centred, narrow and sat between two rules, which is enough; the closing line is already `` in the content, so it emphasises itself. */ .kobra-text-page .kobra-statement p { font-size: 17px; line-height: 1.8; color: var(--kobra-ice); } .kobra-text-page .kobra-statement p:last-child { margin-bottom: 0; } /* ========================================================================== Call to action — injected by pages.js -------------------------------------------------------------------------- Sponzoring asks for new sponsors and then gives no way to respond: the [stm_socials] that closes the page renders nothing at all on this site. ========================================================================== */ .kobra-cta { margin: 34px 0 10px; padding: 34px 36px; border-radius: 4px; text-align: center; background-color: var(--kobra-navy-2); background-image: var(--kobra-ice-texture); background-repeat: repeat; border: 1px solid var(--kobra-line); } /* Section-heading size, like the h2s it sits below — it was 25px, a fourth heading size on the same page. line-height is stated because this is a

, so it would otherwise inherit a 24px line under a 27px letter. */ .kobra-cta-title { margin: 0 0 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 27px; line-height: 1.18; text-transform: uppercase; color: var(--kobra-ice); } /* Body size and body colour. This was 16px mist, which is what the user noticed: the only paragraph on the page in a different colour from every other paragraph, inside the block asking people to get in touch — the last thing that should read as secondary. */ .kobra-cta-text { max-width: 520px; margin: 0 auto 22px; font-size: 17px; line-height: 1.7; color: var(--kobra-ice); } /* ========================================================================== O týmu (and Stadion) — the second-title problem, and a white band -------------------------------------------------------------------------- Both pages open with an `

` the editor set to 45px inline. That was fine when the page had no title at all; since v0.44.0 it does, at 46px, so the two sat stacked a few pixels apart in near-identical sizes with no hierarchy between them — "O TÝMU" then "Od roku 1987", "STADION" then "Zimní stadion Kobra v Braníku". Neither line is redundant — each says something the title does not — so they become subtitles rather than being hidden. Matched on the exact inline value the way the 25px heading is, so a heading the editor sizes deliberately for some other purpose is untouched. ========================================================================== */ .kobra-text-page h2.vc_custom_heading[style*="font-size: 45px"], .kobra-text-page h2.vc_custom_heading[style*="font-size:45px"] { font-size: 20px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; /* `!important` on the colour is against **our own redesign.css**, which paints bare headings `--kobra-ice !important` site-wide. Without it the subtitle came out ice — the same colour as the title above it, so the two still read as one block. Same trap as the Kontakty kicker and the table captions. */ color: var(--kobra-sky) !important; margin: 0; /* Left, at the user's request, and it is the coherent choice: the page title directly above is left-aligned, so a centred subtitle under it sat off the same axis. This is the one place text-align is overridden — the editor sets `text-align: center` inline on both these headings, and an inline style needs `!important` to beat. Everywhere else in this file the editor's alignment is still left alone. */ text-align: left !important; } /* A full-bleed **white** band, on a navy page. The sponsor row on O týmu carries `background-color: #ffffff !important` in its WPBakery custom CSS, plus 107px of bottom padding, and `stretch_row` makes it span the viewport — so the page ended on a 1265x368 white slab. Ours needs `!important` too, since theirs has it. `[class*="vc_custom_"]` rather than the generated class name, because WPBakery regenerates that on every save of the row — the same reason the coaching-staff page's dead background image is targeted this way. */ .kobra-text-page .vc_row[class*="vc_custom_"].vc_row-has-fill { background-color: var(--kobra-navy) !important; background-image: var(--kobra-ice-texture) !important; background-repeat: repeat !important; padding-bottom: 40px !important; } /* The blockquote holds the best copy on the page — every woman can try hockey, first training free, players coming back after maternity leave — and Splash renders it as 15px near-black (#151515) behind a 3px **red** left border. The text itself was already readable, because the paragraph inside it picks up the body rule; the frame around it was the problem. Given the treatment the words deserve: a yellow rule and a size between body and the callout. No panel behind it, either. It first got a faint inset, but once the column's own frame came off that inset was the only box left on the page's opening prose — the very thing the user asked to be rid of. The yellow rule is a quote marker rather than a frame, so it stays and carries the emphasis alone. */ .kobra-text-page .wpb_text_column blockquote { margin: 6px 0 22px; padding: 2px 0 2px 22px; border: 0; border-left: 3px solid var(--kobra-yellow); border-radius: 0; background: none; color: var(--kobra-ice); font-size: 17px; } .kobra-text-page .wpb_text_column blockquote p { font-size: 18px; line-height: 1.75; color: var(--kobra-ice); margin: 0; } /* The competitions panel — moved here by groupKickerBlocks(). One frame, full width, below the text-and-photo row, with the two blurbs side by side. Before this they were stacked at the bottom of the left column, which made that column much taller than the photo beside it and buried two short parallel pieces of copy. auto-fit rather than a fixed two, so a third competition added in the editor flows into the same grid and stacks on a phone without a breakpoint. **`minmax(min(280px, 100%), 1fr)`, not `minmax(280px, 1fr)`** — and this is the same shape of bug as the `1fr` tracks on the panel rows. auto-fit does collapse to one column on a phone, but that one column keeps the 280px *minimum*, and inside this panel's 32px padding there is less than that to give: measured at 320px, the grid box was 224px wide and the track was still 280, so every line of copy ran 56px past the panel and was clipped mid-word. That is what the user photographed as "na stránce O týmu přetéká text" — "hokejové" rendered as "hok" / "jové", with the missing letters cut off rather than wrapped. `min(280px, 100%)` keeps the two-column behaviour wherever there is room and lets the track shrink to the container when there is not. Applied to every auto-fit/auto-fill grid in the theme (11 of them) for the same reason — several were only safe by accident, and any of them can end up inside a padded panel. */ .kobra-kicker-panel { margin: 0 0 26px; padding: 30px 32px; border-radius: 4px; background-color: var(--kobra-navy); background-image: var(--kobra-ice-texture); background-repeat: repeat; border: 1px solid var(--kobra-line); } .kobra-kicker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px 40px; } /* The blocks arrive carrying the editor's own bottom margins, which inside a grid just add to the row gap unevenly — 20px on one, 22px on the other. `!important` because WPBakery writes per-block custom CSS that way: the page content literally contains `css=".vc_custom_1675171693743{margin-bottom: 20px !important;}"`, generated into a stylesheet of its own. A plain declaration here lost to it. */ .kobra-text-page .kobra-kicker-grid .wpb_text_column { margin-bottom: 0 !important; } .kobra-text-page .kobra-kicker-grid .wpb_text_column p:last-child { margin-bottom: 0; } /* Splash puts a grey box border on WPBakery images. Rounded and given a hairline in the palette instead, so the team photo reads as a photo rather than as a framed insert. */ .kobra-text-page .wpb_single_image .vc_single_image-wrapper { border: 0; border-radius: 4px; overflow: hidden; } .kobra-text-page .wpb_single_image img { border-radius: 4px; } /* ========================================================================== Stadion — the photo under the heading -------------------------------------------------------------------------- Injected by pages.js into the empty images grid the page already carried. The shipped default is a generated placeholder, so it is meant to look like a graphic rather than a photograph until a real one replaces it. ========================================================================== */ /* Prose left, photo right — the user's layout. Two columns that collapse to one on a narrow screen, with the photo going *under* the text there rather than above it, because on a phone the facts are what you came for. `align-items: start` so the photo keeps its own height instead of stretching to match a long facilities list. */ .kobra-stadium-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px 34px; align-items: start; /* The block that follows — "Doprava" and everything under it — is a sibling of this grid, so the `gap` above never reaches it. Measured on a phone, where the photo drops below the prose and lands directly against that heading: figure bottom 868, heading top 868, i.e. no gap at all, which is what the user reported as "nadpis Doprava je moc blízko obrázku". The spacing belongs to this block rather than to the heading, so it holds whatever the editor puts underneath. */ margin-bottom: 40px; } @media (max-width: 900px) { .kobra-stadium-split { grid-template-columns: 1fr; } } .kobra-stadium-photo { margin: 0; /* Sticks to nothing and floats nowhere — it is a grid item here, and the fallback path (no prose column found) puts it in normal flow where the bottom margin matters. */ position: relative; } .kobra-stadium-prose > *:last-child { margin-bottom: 0; } .kobra-stadium-photo img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--kobra-line); } .kobra-stadium-caption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--kobra-mist); } /* ========================================================================== Historie — the annual team photos -------------------------------------------------------------------------- No year labels here. A version that printed each photo's year as a chip was built and dropped: **the year is printed inside the photographs themselves**, so the chip repeated what the picture already showed. The "letopočet" in several of the filenames was saying exactly that. ========================================================================== */ .kobra-text-page .stm-images-grid .stm-images-grid-single { overflow: hidden; border-radius: 4px; } .kobra-gallery-actions { text-align: center; margin-top: 6px; } /* The toggle replaces Splash's load-more wrapper, so it is a real