inside the photo, `opacity: 0` at rest, that fades in a white plus-in-a-circle built from two pseudo-elements. Dropped — the whole card is already a link and lifts its border on hover, so the plus adds a second, competing hover language on top of that. Hidden rather than made transparent so it also leaves the accessibility tree; the element carries no text or link of its own, so nothing is lost with it. Only ever present on these listings, not on the homepage's news grid. */ .stm-default-page-grid .stm-single-post-loop .stm-plus { display: none; } /* The lead card earns a taller image, since it has the width to carry it. */ @media (min-width: 900px) { .stm-default-page-grid .row-3 > .hc:first-child .image { height: 320px; } } /* The lead card's text sits below its photo, not over it. hockey.css absolutely positions `.hc:first-child .content` as an overlay pinned to the bottom of the image. That only holds while the title is short enough to fit the image's fixed height — narrow the window, the title wraps to a dozen lines, and the block grows past its container and gets clipped: the "squashed" lead card. Since the overlay's height depends on title length while the image's does not, the two can always be made to disagree, so it's dropped at every width rather than patched at one breakpoint. The card still leads on size — two columns wide, a taller photo and a larger title. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:first-child .content { position: static; } /* Date badge. Splash skews a coloured slab behind it via ::before — kept, because the shape is a nice piece of the theme's character, but recoloured from its red to the club's yellow. Only the lead card has the slab; on the others the pseudo-element is transparent, so their date stays light against the photo. */ /* Both selectors are long on purpose. hockey.css paints the slab through a seven-class chain, so this one matches its shape and adds `.hockey:is(.blog, .archive)` to land above it. The text colour needs !important for a different reason entirely: our own redesign.css paints every `.heading-font` `--kobra-ice !important` site-wide, and this date carries that class — an important declaration can only be outranked by another one. */ /* The badge shape is a border trapezoid, not a skew — which is why the pseudo-element's *background* reads as transparent in computed styles while a solid shape is clearly visible on screen: border-bottom: 30px solid the visible slab border-right: 25px solid transparent the slanted right edge Splash builds the lead card's badge the other way round — a coloured background plus `transform: skew(-20deg)` — so simply removing that skew left a plain rectangle. Rebuilt here with the same border technique the ordinary cards use, in yellow, so the two are the same shape by construction rather than by matching numbers. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:first-child .stm-single-post-loop a .date::before { transform: none; background: transparent; border-bottom: 30px solid var(--kobra-yellow); border-left: 0 solid transparent; border-right: 25px solid transparent; } /* The lead card's badge is matched to the other cards' — same rectangle, same padding, flush with the bottom-left corner of the photo. Splash insets it 65px from the left, floats it 150px above the photo's bottom edge and skews it, which made it read as a different component rather than the same one in a different colour. Every measurable property is aligned to the ordinary cards here; only the yellow is kept. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:first-child .stm-single-post-loop a .date { left: 0; top: auto; bottom: 0; padding: 5px 16px 5px 14px; color: #101a08 !important; font-weight: 800; } /* The other cards keep Splash's own pale, skewed date slab untouched — only the text on it changes, to a dark navy that reads against it. An earlier attempt (v0.23.3) painted the ::before behind the date instead, on the assumption that no slab existed: computed styles report that pseudo-element as fully transparent and un-skewed, and the light shape behind the date looked like part of the photograph. The rendered page disagrees — the slab is there, and adding a background turned it into a rectangle with a blue block hanging off it. Measurements lost this one; don't reinstate the plate without a screenshot showing it's needed. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:not(:first-child) .stm-single-post-loop a .date { color: var(--kobra-ink) !important; font-weight: 800; } /* ---------- The badge's geometry has to be restated, not just recoloured ---- Everything above only recolours a badge that hockey.css already builds. But it builds it in rules prefixed `.hockey.blog`, and that prefix belongs to the parent theme — broadening it is not an option the way it was for our own selectors. On a tag or category archive those rules simply never fire, so the date stopped being a badge at all: `position: static`, stretched to the full width of the card, sitting below the photo instead of pinned into its bottom-left corner, and with no slab behind it. So the structure hockey.css provides on /aktuality/ is reproduced here, under the prefix that covers both pages. Values are copied from its rules rather than invented, so the two listings render identically: .date position:absolute; bottom:0; z-index:99; line-height:14px .date::before the white trapezoid — border-bottom + transparent border-right, the technique described further up `.row-3 > .hc` is in the chain to land at (0,7,1) / (0,7,2), safely above hockey.css's (0,5,1) / (0,5,2) rather than tying with them and depending on which stylesheet the browser loaded last. The lead card's own overrides sit higher again at (0,8,2), so it keeps its yellow badge. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc .stm-single-post-loop a .date { position: absolute; left: 0; bottom: 0; margin: 0; z-index: 99; line-height: 14px; /* Splash pads this only on the right, so the text sat flush against the card's left edge. The 5px top and bottom come from hockey.css. */ padding: 5px 16px 5px 14px; } .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc .stm-single-post-loop a .date::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; min-width: 120px; height: 100%; padding: 0 5px; opacity: 1; background: transparent; border-bottom: 30px solid #fff; border-left: 0 solid transparent; border-right: 25px solid transparent; } /* hockey.css jumps the date to 20px between 426px and 767px wide (and back to 14px below that). The badge doesn't grow with it: its coloured area ends 25px short of its box, that width being the transparent border which forms the slanted edge — so the longer text ran straight out of the shape. Held at 14px everywhere, which is the size the badge is built around. */ @media (max-width: 767px) { .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc .stm-single-post-loop a .date { font-size: 14px; } } /* ---------- Text ---------- */ .stm-default-page-grid .stm-single-post-loop .content { display: flex; flex: 1 1 auto; flex-direction: column; padding: 18px 20px 20px; } /* **The lead card's text starts where every other card's does, at every width.** hockey.css indents the first card on a narrow screen: .hockey .stm-default-page-grid .hc:first-child .content (0,4,0) @media (max-width: 425px) padding: 30px 30px 10px which is 10px more than the rule above gives the rest, so on a phone the lead article's headline sat visibly right of the others — the user reported it as "nadpis hlavní aktuality je odsazený". Ours matches their selector shape at (0,4,0) and wins on source order, and it is deliberately *not* scoped to a media query: the ask was that it line up "ve všech zobrazeních", and one padding for every card at every width is the simplest way to be sure it does. */ .hockey .stm-default-page-grid .hc:first-child .content { padding: 18px 20px 20px; } /* **And the headline's own anchor, which is where the indent actually was.** hockey.css .hockey.blog .stm-default-page-grid .hc:first-child .content .title a padding: 30px 30px 40px 60px (0,5,1) 60px of left padding *inside* the link, so the lead card's headline started 60px right of every other card's while the element around it sat correctly — which is why an earlier measurement of the `.title` div read as aligned and the page plainly was not. The user's screenshot settled it. `:is(.blog, .archive)` rather than their `.blog`: the same rule shape has to hold on tag and category archives, which do not carry `.blog` on the body — the trap this file has already been caught by once. `body` in front takes it to (0,5,2), so it wins on specificity rather than on load order. */ body.hockey:is(.blog, .archive) .stm-default-page-grid .hc:first-child .content .title a { padding: 0; } /* The 510px cap on the lead card's text goes with it. hockey.css .hockey.blog … .hc:first-child .content position: absolute; max-width: 510px That pair belongs to Splash's original design, where this block was an overlay pinned over the bottom of the photo. v0.23.3 took the overlay out (`position: static`) because a long headline grew past the card and was clipped — but the width cap stayed behind, so on a 750px lead card the copy ran in a 510px column with a quarter of the card empty beside it. Nothing was left holding that number up. */ body.hockey:is(.blog, .archive) .stm-default-page-grid .hc:first-child .content { max-width: none; } /* The card previews read as body copy, so they are justified like body copy — at the user's request, and consistently with the text pages, the article detail and the Historie timeline. **Set on `.content`, not on the `

`**, deliberately: at least one excerpt on this site is a bare text node with no paragraph around it (the Givt article), and a rule aimed at `p` sails straight past it. `text-align` inherits, so the block covers both shapes — the same reasoning as the AHL page's paragraph-less copy on the text pages. The headline is pulled back to `left` right after, because it is a heading and a justified two-line headline stretches its first line edge to edge. */ .stm-default-page-grid .stm-single-post-loop .content { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .stm-default-page-grid .stm-single-post-loop .content .title, .stm-default-page-grid .stm-single-post-loop .content .title a { text-align: left; hyphens: none; -webkit-hyphens: none; } .stm-default-page-grid .stm-single-post-loop .title { margin-bottom: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 800; line-height: 1.3; } @media (min-width: 900px) { .stm-default-page-grid .row-3 > .hc:first-child .title { font-size: 24px; } } /* Titles are links, so the colour has to sit on the anchor — the black on the ordinary cards and the red hover both come from the theme's generic link rules, not from .title itself. */ .hockey:is(.blog, .archive) .stm-default-page-grid .stm-single-post-loop .title a { color: var(--kobra-ice); text-decoration: none; } /* The lead card needs its own, longer rule. hockey.css paints that one card's text pure #fff through `.hockey.blog … .hc:first-child .content` at (0,7,1) — above the (0,5,1) rule right above this one. Because that selector carries `.blog`, it applied on /aktuality/ and not on tag archives, so the same card came out #ffffff on one page and #eaf1f8 on the other; this settles both, at (0,9,1). Pure white here, not --kobra-ice, and that is deliberate rather than an oversight. Ice is a faintly blue white, which is invisible at the 17px of an ordinary card's title but clearly reads as pale blue at the lead card's 24px against the dark navy. The ordinary cards keep the palette colour. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:first-child .stm-single-post-loop .content .title a { color: #fff; } /* hockey.css turns titles red on hover through two separate rules, and both have to be answered: .hc:first-child .content .title a:hover (0,8,1) — lead card only, which is why a general rule never reached it .stm-single-post-loop .title:hover a (0,6,1) — fires on hovering the title *box*, not just the link text Hence the lead-card selectors below run to ten classes, and both the `a:hover` and `.title:hover a` forms are covered. */ .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:first-child .stm-single-post-loop .content .title a:hover, .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc:first-child .stm-single-post-loop .content .title:hover a, .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc .stm-single-post-loop .title a:hover, .hockey:is(.blog, .archive) .stm-default-page-grid .row-3 > .hc .stm-single-post-loop .title:hover a, .hockey:is(.blog, .archive) .stm-default-page-grid .stm-single-post-loop .title a:hover { color: var(--kobra-yellow); } .stm-default-page-grid .stm-single-post-loop .content p { margin: 0; color: var(--kobra-mist); font-size: 14px; line-height: 1.65; } /* Not every excerpt arrives wrapped in a

. Some cards — "SUPPORT US BY USING GIVT.cz" is the one on this site — put the preview straight into .content as a bare text node, so the rule above never reaches it and it inherited black from the theme instead. Colouring .content itself covers both shapes; the title inside keeps its own, longer rule. Note this is a *different* fault from the black article bodies, despite looking identical on screen: those are inline colours stored in the post content (see post.css), this one is markup the excerpt simply doesn't have. The card excerpts themselves carry no inline colour at all — the excerpt is trimmed to plain text before it gets here. */ .stm-default-page-grid .stm-single-post-loop .content { color: var(--kobra-mist); } /* ========================================================================== Pagination lives in redesign.css (v0.51.0), not here. -------------------------------------------------------------------------- It used to be declared in this file and, separately, in calendar.css, and the two had drifted — different border alpha, different label colour, different height, and both missing the `background-color` that lets Splash's red win on hover. They are now one component, shared with the calendar's `.custom-paginate`, next to the page masthead which is in redesign.css for the same reason. Don't re-add it here. ========================================================================== */ /* ========================================================================== Archive header and footer — injected by blog.js ========================================================================== Only on tag/category/author/date archives, never on /aktuality/ itself: that page is already "all articles" and needs neither a label saying which subset you're looking at nor a link to itself. The heading goes into Splash's own empty .stm-small-title-box, which sits above the grid in normal block flow — deliberately not into the grid row, where it would become a grid item and eat a card's cell. */ .kobra-archive-head { margin: 0 0 26px; } .kobra-archive-kicker { display: block; margin-bottom: 6px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kobra-yellow); } .kobra-archive-term { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--kobra-ice); text-wrap: pretty; } /* Buttons below the grid. Appended after the grid row inside the column, so they sit in block flow rather than in the grid. */ /* The result count, under the query on a search page. Reuses the archive heading block above it, so search results and tag archives share one heading design rather than each having its own. */ .kobra-search-count { margin: 10px 0 0 !important; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kobra-mist); } .kobra-archive-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 34px 0 0; } @media (max-width: 600px) { .kobra-archive-term { font-size: 22px; } /* Full-width stacked buttons rather than two cramped ones side by side. */ .kobra-archive-actions { flex-direction: column; } .kobra-archive-actions .kobra-btn { justify-content: center; } } /* ========================================================================== Výsledky hledání — the search list (v0.67.0) -------------------------------------------------------------------------- A list rather than the photo grid above, for two reasons measured on the page: 1. **Splash refuses to print thumbnails on search.** In partials/loop/content-grid.php the image is wrapped in `if ( splash_is_layout('soccer_two') || ! is_search() )`, so on this layout the card renders with no picture — ten of ten, several of them carrying `has-post-thumbnail`. A photo grid with no photos. 2. **Search spans post types.** One query returned post, sp_player, page, post, sp_player… and an article card says nothing about which is which. So each row carries a label — Článek, Stránka, Hráčka — and its thumbnail when the post has one. search.php prints the markup; nothing here depends on Splash's classes, which is also why none of these selectors needs a body-class prefix. ========================================================================== */ .kobra-search-list { max-width: 860px; margin: 0 0 40px; } /* ---------- The block is centred, its contents are not (v0.69.2) ---------- At the user's request: the results and the heading stay left-aligned as text, but the column they sit in is centred on the page. **The heading has to be capped to the same 860px, not just the list.** Measured before: the heading, the result count and the pagination were each the full 1140px of the reclaimed column, so their text began at x=63, while the 860px list also began at 63 — everything shared a left edge and the whole block simply sat left. Centring the list alone would have moved the results to x=203 and left the heading behind at 63, which reads as a mistake rather than as centring. Scoped to `body.search` because `.kobra-archive-head` is shared with the tag and category archives, where blog.js injects the same block and the listing below it is the full-width card grid — capping it there would indent that heading for no reason. The pagination needs nothing: its chips are already centred inside the full width, so its centre matches the block's. */ body.search .kobra-archive-head { max-width: 860px; margin: 0 auto 26px; } body.search .kobra-search-list { margin: 0 auto 40px; } /* **`a.kobra-search-row`, not `.kobra-search-row`.** `.hockey a { display: inline }` is (0,1,1) and beats a one-class rule on an anchor — the most repeated trap in this project — and here it cost the whole layout. `display: grid` lost, the row fell back to block flow, and the thumbnail's own `` (a block with a navy background) stretched across the full **860px** of the list instead of sitting in its 116px column. That was the long empty blue strip the user reported. **And the check I ran on it was worthless.** I read `grid-template-columns` back as "116px 1fr" and called the rule applied. That property *computes to the value you wrote even on a box that is not a grid* — the same shape as the dead `gap` on the squad tabs. The geometry said so plainly and I did not look: thumbnail 860 wide, row 183 tall, which is 78 + 105 with the thumb stacked above the body rather than beside it. **Measure what depends on the declaration, not the declaration.** */ a.kobra-search-row, .kobra-search-row { display: grid; /* One column when there is no thumbnail — .has-thumb adds the second, so a row without a picture closes the gap instead of indenting past an empty space. */ grid-template-columns: 1fr; gap: 4px 20px; /* 30px, up from 22. With the grid finally working a row is about 100px tall instead of 183, so the same padding read as far tighter than it measured. */ padding: 30px 0; border-bottom: 1px solid var(--kobra-line); text-decoration: none !important; transition: border-color .18s ease; } .kobra-search-row.has-thumb { grid-template-columns: 116px 1fr; align-items: start; } .kobra-search-row:first-child { border-top: 1px solid var(--kobra-line); } .kobra-search-row:hover { border-bottom-color: rgba(234, 241, 248, 0.34); } .kobra-search-thumb { display: block; overflow: hidden; border-radius: 4px; background: var(--kobra-navy); line-height: 0; } .kobra-search-thumb img { width: 116px; height: 78px; object-fit: cover; display: block; transition: transform .35s ease; } .kobra-search-row:hover .kobra-search-thumb img { transform: scale(1.05); } .kobra-search-body { display: block; min-width: 0; } .kobra-search-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; } .kobra-search-kind { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kobra-sky); } .kobra-search-date { font-size: 12px; color: var(--kobra-mist); } .kobra-search-title { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--kobra-ice); transition: color .18s ease; } .kobra-search-row:hover .kobra-search-title { color: var(--kobra-yellow); } .kobra-search-excerpt { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--kobra-mist); } @media (max-width: 700px) { .kobra-search-row, .kobra-search-row.has-thumb { grid-template-columns: 84px 1fr; gap: 3px 14px; padding: 18px 0; } .kobra-search-row:not(.has-thumb) { grid-template-columns: 1fr; } .kobra-search-thumb img { width: 84px; height: 60px; } .kobra-search-title { font-size: 16px; } .kobra-search-excerpt { font-size: 13px; } }