/* ========================================================================== Kobra redesign v2 — full visual pass. Restyles + selectively rebuilds Splash's markup (nav, hero, results) via classes added by redesign.js, on top of the real page content. No WordPress data is changed. ========================================================================== */ /* ---------- Fonts ---------- Bricolage Grotesque is the one font used everywhere — headings, body, nav, numbers — for consistency, with a slight playful character in its bolder weights that plain Archivo didn't have. Big Shoulders is reserved for exactly one spot: the "Kobra ženy" hero title, where a big condensed scoreboard-style face earns its place as a one-off statement rather than a second everyday font. Both were machine-verified (actual glyph inspection, not just metadata) to contain the full Czech diacritic set. Two subsets each: latin-ext is required for č š ž ě ř ů ď ť ň — without it they'd fall back to a system font. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/big-shoulders-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/big-shoulders-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Palette — sampled straight from the real Kobra logo ---------- */ :root { --kobra-ink: #071b30; --kobra-navy: #0c3865; --kobra-navy-2: #123f6e; --kobra-yellow: #f1e813; --kobra-sky: #53a9dc; --kobra-ice: #eaf1f8; --kobra-mist: #90a4bf; --kobra-line: rgba(234, 241, 248, 0.14); --kobra-ice-texture: url('../images/ice-texture.png'); /* Editable photos. These are the shipped defaults; functions.php prints an inline :root block after this file that overrides them with whatever the admin picked in Vzhled -> Přizpůsobit. */ --kobra-hero-photo: url('../images/hero-default.jpg'); --kobra-results-photo: url('../images/stock-action.jpg'); } /* ---------- Base type & page ground ---------- */ html { scroll-behavior: smooth; } body { background-color: var(--kobra-ink) !important; background-image: var(--kobra-ice-texture) !important; background-repeat: repeat !important; color: var(--kobra-ice) !important; font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important; } #wrapper { background-color: transparent !important; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .heading-font { font-family: 'Bricolage Grotesque', sans-serif !important; color: var(--kobra-ice) !important; letter-spacing: 0.01em; } a { transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .kobra-eyebrow { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kobra-sky); } /* **`a.kobra-btn` as well as `.kobra-btn`.** `.hockey a { display: inline }` is (0,1,1) and beats a one-class rule on an anchor — the single most repeated trap in this project. On the 404 page the consequence was not just a wrong display: **vertical margins do not apply to an inline box**, so the button's `margin-top` did nothing and it overlapped the search field above it. Measured before: `display: inline`, gap to the form **-10px**. The buttons injected by redesign.js sit in containers that happened to hide this. */ a.kobra-btn, .kobra-btn { 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; letter-spacing: 0.06em; text-transform: uppercase; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; text-decoration: none; } /* **The modifiers have to name the element too, now that the base rule does.** Adding `a.kobra-btn` above took the base to (0,1,1), which outranked `.kobra-btn-ghost` at (0,1,0) — and the base sets `border: 1.5px solid transparent`, so **every ghost anchor on the site lost its border at rest** while `.kobra-btn-ghost:hover` at (0,2,0) still won, making the outline appear only under the cursor. The user reported it on the 404 page; measured, it was also both hero buttons on the homepage. A regression of my own making, and the shape is worth remembering: **raising a base rule's specificity silently promotes it over its own modifiers.** Naming the element in both puts them back on equal footing, where source order decides and the modifier is written last on purpose. */ a.kobra-btn-primary, .kobra-btn-primary { background: var(--kobra-yellow); color: #101a08 !important; } a.kobra-btn-primary:hover, .kobra-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -6px rgba(241,232,19,0.45); color: #101a08 !important; } a.kobra-btn-ghost, .kobra-btn-ghost { background: transparent; color: var(--kobra-ice) !important; border-color: rgba(234,241,248,0.4); } a.kobra-btn-ghost:hover, .kobra-btn-ghost:hover { border-color: var(--kobra-sky); color: var(--kobra-sky) !important; } /* ========================================================================== Legacy inline text colours — masked site-wide -------------------------------------------------------------------------- Content all over this site carries the editor's colour baked into the markup as ``, pasted in from Word or Docs. Invisible on the old white pages, unreadable here. Counted in the database: sp_event 135 of 140 ← had no mask at all until v0.48.0 sp_player 42 of 64 page 8 of 22 post 7 of 16 post.css, pages.css and player.css each grew their own copy of this block for their own template. The match pages never got one, which is why a black dash was sitting in the venue list of 135 matches. Rather than add a fourth copy, the base treatment lives here once and covers every template, present and future; those files keep their own refinements on top. **`!important` is the mechanism here, not a shortcut.** An inline style outranks every author rule however long the selector; an important author declaration is the single thing in the cascade that beats a normal inline one. **Anchored with `^=` and `*="; color…"`, never a plain `*=`.** `[style*="color: #000000"]` also matches `background-color: #000000`, which would repaint the text of anything given a dark background. Anchoring removes the trap rather than trusting that nothing on the site has one. Matched on the exact declarations that occur, so a colour someone chose on purpose still works — the deliberate `#ffcc00` in one article is untouched. ========================================================================== */ body.hockey [style^="color: #000000"], body.hockey [style^="color:#000000"], body.hockey [style*="; color: #000000"], body.hockey [style^="color: #333333"], body.hockey [style^="color:#333333"], body.hockey [style*="; color: #333333"] { color: var(--kobra-ice) !important; } /* Links keep looking like links. `a[style]` is one class heavier than the bare attribute rule above, so this wins regardless of source order. */ body.hockey a[style^="color: #000000"], body.hockey a[style^="color:#000000"], body.hockey a[style^="color: #333333"], body.hockey a[style^="color:#333333"], body.hockey [style^="color: #0000ff"], body.hockey [style^="color:#0000ff"], /* #3366ff, four times on the Nábor page, on the words "Facebooku" and "Instagramu" — a link blue someone picked by hand. */ body.hockey [style^="color: #3366ff"], body.hockey [style^="color:#3366ff"] { color: var(--kobra-sky) !important; } /* ---------- Near-miss brand colours (v0.67.0) ---------- Two colours in the content are *almost* the theme's and that is exactly the problem: side by side with the real ones they read as a mistake rather than as a different colour. Counted in the database: color:#e8e120 10 x theme yellow is #f1e813 background-color:#044066 10 x theme navy is #0c3865 All twenty are on the myWorld page. **Note the missing space after the colon** — these were pasted from a different editor than the #000000 runs above, so the `^="color: #..."` patterns would never have matched them. The declaration is matched as it actually occurs, which is the rule this whole block follows. Masking rather than editing the page: a content fix would live in this local database and **would not travel to production in the theme zip**, so the same two colours would be back on the live site. */ body.hockey [style^="color:#e8e120"], body.hockey [style^="color: #e8e120"], body.hockey [style*="; color:#e8e120"] { color: var(--kobra-yellow) !important; } /* Both separator forms, with and without the space: the ten elements are Gutenberg buttons whose attribute is exactly `color:#e8e120;background-color:#044066` — no space after the semicolon. The spaced pattern alone matched none of them, which is the same lesson as the missing space after the colon one line up. **Match the declaration as the database actually stores it, not as it would be written by hand.** */ body.hockey [style^="background-color:#044066"], body.hockey [style^="background-color: #044066"], body.hockey [style*=";background-color:#044066"], body.hockey [style*="; background-color:#044066"] { background-color: var(--kobra-navy) !important; } /* ---------- Gutenberg's horizontal rule (v0.67.0) ---------- `
` ships with a grey `#808080` border from WordPress's own block styles. Five of them on the myWorld page, and every other divider on this site is `--kobra-line` — found by the palette sweep, not by looking, because a grey hairline on navy is quiet rather than wrong. Both the border and the background are set: the block draws itself as a border on some themes and a 1px filled box on others, and which one shows depends on rules outside this theme. */ body.hockey hr, body.hockey hr.wp-block-separator { border-color: var(--kobra-line); background-color: transparent; } /* ========================================================================== Empty states — shared by the 404 page and a search that found nothing -------------------------------------------------------------------------- Both say the same kind of thing: what you were looking for is not here, and here is what to do next. So they are one component, in redesign.css rather than blog.css, because **404 does not load blog.css** — it is neither is_home() nor is_archive() nor is_search(). ========================================================================== */ .kobra-empty-state { max-width: 640px; margin: 0 auto; padding: 72px 24px 96px; text-align: center; } .kobra-empty-state h1, .kobra-empty-state h2 { margin: 14px 0 0 !important; font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800 !important; font-size: clamp(28px, 4vw, 44px) !important; line-height: 1.08 !important; color: var(--kobra-ice) !important; } .kobra-empty-state p { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--kobra-mist); } /* The link sits under the search field, so it needs more than a paragraph's worth of space or it reads as part of the form. */ /* `a.` again, and this was the third instance in one sitting: as a bare class the rule lost `display` to `.hockey a`, the box went inline, and **an inline box ignores vertical margins** — so the 40px measured as 5. */ a.kobra-empty-state-link, .kobra-empty-state-link { display: inline-block; margin-top: 40px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kobra-sky) !important; text-decoration: none; } .kobra-empty-state-link:hover { color: var(--kobra-yellow) !important; } /* The 404 gets the face-off motif behind it — the page is mostly empty by definition, and an empty dark screen reads as a broken site rather than a wrong address. */ .kobra-404 { position: relative; overflow: hidden; } .kobra-404::before { content: ''; position: absolute; top: 50%; left: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: url('../images/faceoff-motif.png') center / contain no-repeat; opacity: 0.07; pointer-events: none; } .kobra-404 .kobra-empty-state { position: relative; z-index: 1; } .kobra-404 a.kobra-btn { margin-top: 36px; } /* ---------- The search field ---------- Splash's own search input lives in the header behind a toggle. This is a plain form of our own, so nothing depends on that widget's markup or its JavaScript being present on a 404. */ .kobra-searchform { display: flex; gap: 10px; max-width: 460px; margin: 30px auto 0; } .kobra-searchform input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 13px 16px; background: rgba(234, 241, 248, 0.06); border: 1px solid var(--kobra-line); border-radius: 3px; font-size: 15px; color: var(--kobra-ice); transition: border-color .18s ease, background .18s ease; } .kobra-searchform input[type="search"]::placeholder { color: var(--kobra-mist); } .kobra-searchform input[type="search"]:focus { outline: none; border-color: var(--kobra-sky); background: rgba(234, 241, 248, 0.09); } /* Splash's `.hockey #wrapper button` sits at (1,1,1) and has eaten four properties in this redesign already — font-size, letter-spacing, text-transform and display. An id in the selector beats any number of classes, so this rule carries one too rather than trying to out-class it. */ body.hockey #wrapper .kobra-searchform button { flex: 0 0 auto; /* **Splash puts `margin-left: 10px` on every button through `#wrapper`.** In the row layout that simply widened the 10px gap to 20; stacked, it pushed the button 10px right of the field directly above it — measured input at 90 and button at 100 with identical widths, which is the misalignment the user photographed. The same declaration that indented the comment submit button in v0.52.1. */ margin: 0; padding: 13px 22px; background: transparent; border: 1.5px solid rgba(234, 241, 248, 0.4); border-radius: 3px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kobra-ice); cursor: pointer; transition: border-color .18s ease, color .18s ease; } body.hockey #wrapper .kobra-searchform button:hover { border-color: var(--kobra-sky); color: var(--kobra-sky); } /* Splash draws a skewed red slab on buttons through both pseudo-elements. It needs `content: none` as well as `display: none` — this is the fifth place in the redesign that has had to say both. */ body.hockey #wrapper .kobra-searchform button::before, body.hockey #wrapper .kobra-searchform button::after { display: none; content: none; } @media (max-width: 700px) { .kobra-empty-state { padding: 48px 18px 64px; } /* Stacked, and both boxes forced to the same width: `align-items: stretch` ought to do it, but the field measured 324px against the button's 314 — they sit directly above each other, so 10px shows. */ .kobra-searchform { flex-direction: column; } .kobra-searchform input[type="search"], body.hockey #wrapper .kobra-searchform button { width: 100%; box-sizing: border-box; } .kobra-404::before { width: 340px; height: 340px; } } /* ========================================================================== Splash's red accent — repainted yellow, site-wide -------------------------------------------------------------------------- Splash's accent colour is red, in two shades: `#f53837` in hockey.css and `#e21e22` in styles.css. It lands on icons and list markers all over the theme, and on a navy/yellow palette it reads as an error state. **Mirroring Splash's own selectors rather than writing one blanket icon rule, and that distinction matters.** A rule like `.hockey i::before` would also catch `.vc_btn3-icon` — the icon inside a button — and the primary button is yellow, so its icon would become yellow on yellow, i.e. invisible. Anywhere this design has already chosen an icon colour, it must keep it. Matching only where Splash paints red cannot reach those. Scoped `body.hockey` (0,1,1) so it clears hockey.css's own `.hockey …` (0,1,0) prefix outright rather than tying and depending on source order. Where Splash uses `!important` — the `.af-ul-wrap` rule does — so does this. Checked against every page before writing: `ul.stm-list-icon` exists only on Stadion, the contact widget only on Kontakty, and `.af-ul-wrap`, `.fa-check` and `widget_contacts` are on no page at all — those last three are covered anyway, cheaply, so a page built with them later is not a surprise. ========================================================================== */ /* Icon lists — Stadion's facilities list is nine of these. Splash colours both the marker and the icon glyph inside it. */ body.hockey ul.stm-list-icon li::before, body.hockey ul.stm-list-icon li i::before, body.hockey ul.stm-list-icon li > .fa { color: var(--kobra-yellow); } /* Bullets and numbers in ordinary content. ---------------------------------------------------------------------------- **`background-color` is the line that matters, and v0.46.0 missed it** (fixed in v0.53.1, found because the user spotted a red dot beside every news-grid category filter). Splash's bullet is not a glyph — it is an empty 3×3px absolutely positioned block: styles.css ul li::before (0,0,3) the 3×3 box, background #e21e22 hockey.css .hockey ul li::before (0,1,3) color AND background #f53837 so the only thing anyone sees is the **background**, and this rule set only `color`. It won its specificity contest at (0,1,4) and repainted a property that has no visible effect on an empty box — every bullet on the site stayed Splash red. Measured on /aktuality/: 22 list items with a visible `::before`, all 22 still red, including the nav dropdowns. `color` is kept because `ol li::before` prints a real number, where colour is what shows and background is what doesn't. One rule, both mechanisms. */ body.hockey ul li::before, body.hockey ol li::before, body.hockey .stm-gray-bg .vc_column-inner .wpb_wrapper ul li::before { color: var(--kobra-yellow); background-color: var(--kobra-yellow); } /* Tick marks, accordion arrows, and the contact widget's icons. The contact rule is also stated (longer) in pages.css, which only loads on the text pages — this covers the widget anywhere else it is used. */ body.hockey .fa.fa-check, body.hockey .fa-check-square::before, body.hockey .vc_tta-container .vc_tta.vc_general .vc_tta-panel-heading .vc_tta-panel-title a::before, body.hockey .stm-contacts .stm-single-contact i, body.hockey .footer-widgets-wrapper .stm-cols-3 .widget_contacts table tr td .icon, body.hockey .stm-carousel-with-data-wrapp .stm-cwd-data-wrapp .stm-data-row table tr td i { color: var(--kobra-yellow); } /* Splash puts `!important` on this one, so importance is the only thing that beats it. */ body.hockey .af-ul-wrap ul li i { color: var(--kobra-yellow) !important; } /* ========================================================================== Team history timeline — site-wide (Historie is the only page using it today) -------------------------------------------------------------------------- Splash builds each entry as a white 21px ring with a **red** 15px dot inside it (`#e21e22` in styles.css, `#f53837` at 10px in hockey.css) on a grey 1px connector. On navy that reads as a white blob with a red centre. The text was worse than the marker: the year is `#1f3b79`, a dark navy that is all but invisible on this page's own navy, and the body copy is `#777777` at 15px — both sized and coloured for a white page. ========================================================================== */ /* The node: a navy disc on the line rather than a white one, with the accent moved to the dot inside it. */ body.hockey .stm-team-history .stm-team-history-single .stm-team-history-linked span { background-color: var(--kobra-navy-2); box-shadow: none; border: 1px solid var(--kobra-line); } body.hockey .stm-team-history .stm-team-history-single .stm-team-history-linked span::after { background-color: var(--kobra-yellow); } /* The connector. styles.css draws it white and 3px, hockey.css narrows it to 1px grey — both need clearing, hence the two properties. */ body.hockey .stm-team-history .stm-team-history-single .stm-team-history-linked::after { background-color: var(--kobra-line); width: 1px; } /* The year is the timeline's marker, so it carries the accent — a judgement call, since the user asked for "texts in ice and red elements in yellow" and the year was neither: it was `#1f3b79`, invisible here. Ice would have made it identical to the title beside it at the same 24px, leaving the timeline with no rhythm. `!important` is against **this very file**: the year carries class `heading-font`, and `.heading-font { color: var(--kobra-ice) !important }` above outranks any non-important rule however long. Written without it, the weight applied and the colour silently did not — so the rule looked like it was working. Same trap as h5, h4 and the SportsPress table captions. */ body.hockey .stm-team-history .stm-team-history-single .year { color: var(--kobra-yellow) !important; font-weight: 800; } body.hockey .stm-team-history .stm-team-history-single .stm-team-history-content .title { color: var(--kobra-ice); } /* Body copy, at the size body copy is everywhere else — it was 15px/23px grey. */ body.hockey .stm-team-history .stm-team-history-single .stm-team-history-content .content { color: var(--kobra-ice); font-size: 17px; line-height: 1.75; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Any heading inside the timeline copy stays left — the justification below is set on the block, so it would otherwise inherit. */ body.hockey .stm-team-history .stm-team-history-single .stm-team-history-content .content h1, body.hockey .stm-team-history .stm-team-history-single .stm-team-history-content .content h2, body.hockey .stm-team-history .stm-team-history-single .stm-team-history-content .content h3, body.hockey .stm-team-history .stm-team-history-single .stm-team-history-content .content h4 { text-align: left; } /* The timeline copy stays justified at every width, at the user's request: "u historie se akorát text při zmenšení místo do bloku rovná doleva - chci ho vždy do bloku". This block used to drop it to `text-align: left` below 767px, on the same reasoning the text pages and the article detail still use — a phone-width column has too few characters per line to absorb the extra space without visible rivers. She has seen both and prefers the block, so the override is gone rather than merely widened; `hyphens: auto` above is what keeps the gaps in check, and Czech hyphenation needs the document's `lang="cs"`, which is present. Deliberately scoped to the timeline. The article detail, the match reports and the text pages still left-align on a phone — those were not what she was looking at, and changing them unasked would be a site-wide restyle. */ /* ========================================================================== "Load more" — site-wide -------------------------------------------------------------------------- Splash renders it ``, its own red button component, and prints the label in **English** on a Czech site (the Czech comes from a gettext filter in functions.php). Given the site's own button component rather than a one-off restyle, so it matches every other button here. Only the gallery on Historie uses it today, but it belongs with the rest of the button work. ========================================================================== */ body.hockey #wrapper .stm-load-more-images-grid a.button { 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; background: transparent; background-image: none; color: var(--kobra-ice); border: 1.5px solid rgba(234, 241, 248, 0.4); box-shadow: none; text-decoration: none; transition: transform .18s ease, color .18s ease, border-color .18s ease; } body.hockey #wrapper .stm-load-more-images-grid a.button:hover { background: transparent; color: var(--kobra-sky); border-color: var(--kobra-sky); transform: translateY(-2px); } /* Splash hangs its skewed red slab off this button as pseudo-elements, the same way it does on the squad tabs. On a transparent ghost button it shows straight through. */ body.hockey #wrapper .stm-load-more-images-grid a.button::before, body.hockey #wrapper .stm-load-more-images-grid a.button::after { display: none; } /* The zoom overlay on each gallery thumbnail — Splash's is a red-tinted circle. */ body.hockey .stm-images-grid .stm-images-grid-single .stm-images-grid-zoom i { color: var(--kobra-yellow); } /* ========================================================================== Page masthead — injected by redesign.js on every template that needs one -------------------------------------------------------------------------- Splash prints no page title on these layouts, so template after template arrived with a heading outline and no subject: the only h1s in the document are four copies of the site name inside the native header this file hides, all measuring 0x0. This is the shared answer to that, used by the text pages, the news listing, the squad page, the coaching staff and the team statistics page. It lives here rather than in pages.css because five templates need it and only pages.css loads on the text ones. Which pages get a heading is decided in PHP by kobra_page_heading(); an empty value means none. Free-standing type, no panel: the first version boxed it in a navy card and the user asked for it loose — a boxed title carried the same visual weight as the cards below it, so the page read as a stack of panels with no clear top. The yellow rule is the same motif the article detail uses under its headline, so a page and an article read as one site. ========================================================================== */ .kobra-page-head { /* Top space is padding, not margin. Splash prints `#main { padding: 0 !important }` inline, so the header ends and the content begins at the same y; a top margin on the first child of a container with no padding or border would collapse straight up through .container and #main instead of opening a gap here. */ margin: 0 0 40px; padding-top: 56px; } /* `h1.kobra-page-title`, not the class alone: hockey.css sets `.hockey h1` at (0,1,1), which outranks a lone .kobra-page-title at (0,1,0) — one class plus one type beats one class. Shipped that way first and the heading came out at weight 700 in mixed case instead of 800 uppercase, with nothing in the stylesheet looking wrong. */ h1.kobra-page-title { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 46px; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; color: var(--kobra-ice); /* Czech page names are long ("Realizační tým", "Aktuální soupiska") and this runs full width on a phone. hyphens needs the document's lang attribute to do anything; the pages have lang="cs". */ hyphens: auto; -webkit-hyphens: auto; } /* The optional line under the heading — the competition and season on a fixture list. Sky and letterspaced, the same treatment the 45px headings on O týmu and Stadion were turned into, so a subtitle looks the same wherever it comes from. */ .kobra-page-subtitle { margin: 12px 0 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kobra-sky); } .kobra-page-title-rule { display: block; width: 64px; height: 3px; margin: 20px 0 0; background: var(--kobra-yellow); border: 0; } /* One origin for that 56px, on every template. Splash wraps the news listing — and only the news listing — in `.stm-default-page`, which carries `padding-top: 10px`. Nothing else does: checked across the text pages, the squad page, the coaching staff, the team archive, the homepage, the calendar and the tag archives, and it is absent from all of them. So /aktuality/ measured a 66px gap above its heading where every other page measured 56, which is exactly the kind of difference that shows up when two pages are compared side by side. Zeroed here rather than subtracting 10px from the masthead's own padding on that one template, so the gap has a single source instead of a value that has to stay in step with Splash's. `body.hockey` and not just `.stm-default-page`: hockey.css declares `.hockey .stm-default-page` at (0,2,0), which beat a bare class at (0,1,0) — written short, this rule computed to nothing at all and the gap stayed 66px. (0,2,1) clears it outright rather than tying and relying on source order. */ body.hockey .stm-default-page { padding-top: 0; } @media (max-width: 767px) { .kobra-page-head { margin-bottom: 30px; padding-top: 34px; } /* Must repeat `h1.` — a media query grants no extra weight, so at (0,1,0) this lost to the rule above at (0,2,1) and the title stayed 46px on a phone. Narrowing the viewport is not a test of a mobile rule that never applied at any width. */ h1.kobra-page-title { /* 26, down from 31: part of the phone-wide trim the user asked for — "když je to na mobilu, je potřeba ty věci na stránkách prostě o něco zmenšit, aby to nebylo tak obrovský". The desktop title is 46px, so the phone still gets a clear step down from the rest of the page. **`!important`, and it is not optional.** hockey.css carries `.hockey h1, .hockey h2 { font-size: 30px !important }` under `@media (max-width: 640px)` at (0,1,1) — the same specificity as this rule, but important, so it wins outright. The consequence is worth stating: this mobile size has only ever applied between 641 and 767px and every real phone got Splash's 30px. Resolved by enumerating the matching rules rather than by guessing, after the declared 26 kept computing to 30. */ font-size: 26px !important; } } /* ========================================================================== Header / nav — Splash's native header markup has multiple overlapping variants for different header styles (a text logo, an in-menu logo item, mobile-only duplicates) that are shown/hidden by very specific CSS this redesign doesn't preserve, and it collapses when restyled. Rather than fight that, redesign.js hides the whole native header and builds one clean, fully custom nav bar from the real menu data. ========================================================================== */ .stm-header-inner { display: none !important; } /* Splash renders a second, entirely separate mobile header block (.stm-header-mobile, with its own red hamburger .stm-menu-toggle), normally shown only under a JS-measured breakpoint — but that measurement reads the now-hidden desktop header's width, so it can misfire and show this at any width. The custom .kobra-navbar above already has its own mobile toggle, so this native one is redundant regardless — hide it unconditionally. */ .stm-header-mobile { display: none !important; } /* A top bar with the real horizontal link list on wide screens (with hover dropdowns for sub-items), and a single menu trigger that opens the full-screen overlay only on narrow/mobile screens — one is a normal desktop nav, the other a distinct mobile-appropriate pattern, rather than forcing the same interaction at every width. */ /* ========================================================================== Header: menu — logo — menu, with the logo overhanging the bar (v0.59.0) -------------------------------------------------------------------------- Rebuilt at the user's request, after WHC Valkyries' header: the club mark centred and larger than the bar, with the menu split either side of it. **The split point comes from the menu, not from this file.** redesign.js reads it from the position of the header menu's own "logo" item — see the note there. So the bar arranges itself, and dragging that item in Vzhled → Menu moves the break. `overflow` is deliberately never set on the bar: the logo hangs out of the bottom and any `overflow: hidden` here would slice it off. That is the same trap as Owl's viewport clipping the news cards' hover lift. ========================================================================== */ .kobra-navbar { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 32px; background-color: var(--kobra-ink); background-image: var(--kobra-ice-texture); background-repeat: repeat; border-bottom: 1px solid var(--kobra-line); } /* The two lists share whatever the logo leaves, so the logo stays on the page's centre line no matter how long the labels are — pushing it there with `margin: auto` instead would move it whenever a menu item is renamed. **`.kobra-navbar >` is doing real work in these selectors.** Written as bare `.kobra-navbar-links-right` they tie at (0,1,0) with the shared `.kobra-navbar-links { justify-content: flex-end }` further down this file, and lost on source order — so the right-hand list stayed pinned to the far right of the page instead of sitting beside the logo, which is exactly what the user reported. The child combinator takes these to (0,2,0) and they win wherever they sit in the file. The inner `padding` is the gap between the last/first label and the logo. Without it the labels touch the mark, and — worse — "Soutěže" is the last item on the left, so its dropdown opened directly under the logo. */ /* ---------- Never two lines (v0.60.3) ---------- The user caught the bar wrapping to two rows while resizing. The cause was a 20px gap between two numbers: the bar needs 920px to lay both lists out on one line the burger took over at 900px so between 900 and 920 the lists were shown, did not fit, and `flex-wrap: wrap` broke them onto a second row. The breakpoint is 1000px now — see the note on the media query — and `nowrap` here means the shared `.kobra-navbar-links { flex-wrap: wrap }` can never do it again. How the 920 was measured, for when the menu changes: sum each list's `
  • ` widths, add `gap × (items − 1)` and the list's own 34px of inner padding, then add the 132px logo, the bar's two 20px flex gaps and its 64px of horizontal padding. Left came to 322, right to 362. **Rename or add a menu item and this needs redoing.** The headroom is 80px of viewport but only **18px inside the right-hand list box at 1010px** — that is the tightest width where the links show, measured. A right-side label ~20px wider would overflow there. Breakpoint 1000 was chosen over something safer so that a 1024px laptop still gets the real menu rather than the burger. */ .kobra-navbar > .kobra-navbar-links-left, .kobra-navbar > .kobra-navbar-links-right { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; } /* Splash's generic `ul li::before` bullet — a 3x3 dot absolutely placed at the item's left edge. It was red until v0.53.1 and yellow after, which is what made it visible enough for the user to spot beside every menu label. The nav is not a list of bullet points; switched off here, in the submenus, and in the mobile overlay. */ .kobra-navbar-links > li::before, .kobra-navbar-links-sub li::before, .kobra-menu-body li::before, .kobra-menu-item::before { display: none; content: none; } .kobra-navbar > .kobra-navbar-links-left { justify-content: flex-end; padding-right: 34px; } .kobra-navbar > .kobra-navbar-links-right { justify-content: flex-start; padding-left: 34px; } /* The dropdowns have to clear the logo, which carries `z-index: 2`. The submenu is absolutely positioned inside its `
  • `, and that `
  • ` has no z-index of its own — so the logo painted over any menu opened near the centre. Raising the hovered item lifts its submenu with it. */ .kobra-navbar-links > li:hover, .kobra-navbar-links > li:focus-within { z-index: 10; } .kobra-navbar-links-sub { z-index: 10; } /* ---------- The brand ---------- Logo only in the centre; the club name beside it would break the symmetry the whole layout is for. The text is still rendered, hidden from sight but left to screen readers, and the same markup is reused unhidden in the mobile overlay's top bar — so the two Customizer text fields still do something. The overhang is `margin-bottom: -34px`: the logo is 92px tall but only contributes 58px to the bar's height, so the bottom 34px hangs below the border. Change one and the other has to follow. */ /* The overhang is arithmetic, not a negative margin. The brand reserves an 82px-tall box in the bar; the image is taken out of flow at 132px, so the bar sizes to 82 + 28 padding and the rest of the image hangs past the border. A negative `margin-bottom` was tried first and did nothing useful: with `align-items: center` the flex algorithm centres the *margin* box, so shrinking it just re-centred the image inside the shorter bar instead of pushing it out of the bottom — measured 1px short of the border rather than 34px past it. Change the 46 and the 108 together. **The mark is bare, on the user's instruction (v0.59.2):** no disc behind it, no ring, no shadow. It was first drawn as a circular ink-and-texture badge with a hairline border, and she asked for the logo on its own and larger. It is a PNG with its own transparency, so it sits straight on the bar. */ .kobra-navbar-brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; text-decoration: none; z-index: 2; width: 132px; height: 82px; } .kobra-navbar > .kobra-navbar-brand img { position: absolute; top: 0; left: 0; height: 132px; width: 132px; display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transition: transform .18s ease; } /* With no frame left to light up, the hover cue is a nudge instead. */ .kobra-navbar-brand:hover img { transform: translateY(-2px) scale(1.03); } /* Visually hidden, not `display: none` — a screen reader should still read the club name, and the aria-label on the link only covers the link itself. */ .kobra-navbar > .kobra-navbar-brand span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- The pop-in ---------- Runs once per page load, which is what the user asked for — and therefore replays on every navigation, so it is deliberately short and small: 520ms, 14px of travel, 12% of scale. **It animates `transform` only, and carries no `animation-fill-mode`.** The first version faded in from `opacity: 0` with `fill-mode: both`, and that is a trap: `both` holds the *first* keyframe until the animation starts, so anything that stops it starting leaves the logo permanently invisible. Found for real — this browser throttles background tabs, the animation sat at `running @0ms`, and the logo was simply not there. With no fill mode the element renders normally before and after, so the worst case is "the logo doesn't animate" rather than "the logo doesn't exist". The cost is one frame at the final position before it starts, which is not noticeable. **Never let something's visibility depend on an animation completing.** Reduced-motion gets no animation at all — this is the one thing on the site that moves without being asked to. */ @keyframes kobra-logo-pop { 0% { transform: translateY(-14px) scale(0.88); } 60% { transform: translateY(2px) scale(1.04); } 100% { transform: translateY(0) scale(1); } } .kobra-navbar > .kobra-navbar-brand img { animation: kobra-logo-pop 520ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .kobra-navbar > .kobra-navbar-brand img { animation: none; } } /* The mobile overlay reuses the same brand markup, where the name should show and the logo should not overhang anything. */ .kobra-menu-overlay .kobra-navbar-brand { margin-bottom: 0; } .kobra-menu-overlay .kobra-navbar-brand img { height: 40px; width: 40px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; } .kobra-menu-overlay .kobra-navbar-brand span { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; color: var(--kobra-ice); white-space: nowrap; } .kobra-navbar-brand span b { color: var(--kobra-yellow); } /* ---------- Desktop horizontal links (>1000px) ---------- */ .kobra-navbar-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-end; } .kobra-navbar-links > li { position: relative; } .kobra-navbar-links > li > a { display: inline-block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kobra-ice); padding: 8px 0; position: relative; text-decoration: none; } .kobra-navbar-links > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--kobra-yellow); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .kobra-navbar-links > li:hover > a::after { transform: scaleX(1); } /* ---------- The dropdown panel ---------- Slightly translucent at the user's request (v0.59.5), so the page shows through the submenu instead of it reading as a solid slab. **Two background-colour declarations on purpose.** `color-mix()` keeps the alpha tied to `--kobra-navy`, so changing the palette token changes this too; the plain `rgba()` above it is the same colour for anything that does not understand `color-mix` yet, which would otherwise fall all the way back to the opaque token. Both are 92% — "trošičku", not see-through. `backdrop-filter` is what keeps it readable: the menu opens over article cards and photographs, and 8% of a busy image behind 13px text is enough to muddy it. Where the filter is unsupported the panel is simply a touch translucent, which is the same result minus the blur — nothing depends on it. The ice texture stays on top of the tint, so the panel keeps the same surface as every other navy block on the site. */ .kobra-navbar-links-sub { position: absolute; top: 100%; left: 0; min-width: 230px; background-color: rgba(12, 56, 101, 0.68); background-color: color-mix(in srgb, var(--kobra-navy) 68%, transparent); background-image: var(--kobra-ice-texture); background-repeat: repeat; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--kobra-line); border-radius: 4px; padding: 8px 0; margin: 10px 0 0; list-style: none; box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } .kobra-navbar-links > li:hover > .kobra-navbar-links-sub { opacity: 1; visibility: visible; transform: translateY(0); } .kobra-navbar-links-sub li a { display: block; padding: 9px 18px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 600; color: var(--kobra-ice); white-space: nowrap; text-decoration: none; } .kobra-navbar-links-sub li a:hover { color: var(--kobra-yellow); } /* ---------- Mobile menu trigger (<=1000px only) ---------- */ /* ---------- The menu button (v0.60.0) ---------- Redesigned at the user's request: it was showing as "the classic red button", and it was — **Splash's skewed red slab, on the pseudo-elements.** The button's own background was already transparent with an ice border, and none of that was visible because the slab sat on top of it. Measured: ::after background #f53837, skewX(-10deg), 109x78, absolute ::before a 4px #f53837 outline, also skewed Exactly the same thing as the comment submit button and the statistics filters, and switched off the same way — `display: none` **and** `content: none`, because a generated box with only `display: none` is still generated and some Splash skins position these absolutely. With the slab gone the button is drawn in the site's own button language: the ghost treatment from `.kobra-btn-ghost` and the statistics filters — 1.5px rgba(234,241,248,0.4), 3px radius, ice label, 13px/700 uppercase, sky on hover. **3px rather than the old 20px pill**, because every other button on this site is 3px and "fits the rest of the page" was the brief. `height` is explicit on purpose: the button measured 80px tall inside the 111px bar, which is Splash's own sizing showing through rather than anything this file asked for. Pinning it makes the bar's right-hand side predictable whatever the bar's height becomes. */ .kobra-navbar-toggle { /* ---------- `display` is the fourth property that rule has eaten ---------- The burger and the "MENU" label stacked vertically and the label dropped 19px out through the bottom of the border. Cause: `display: flex` lost to `hockey.css .hockey #wrapper button { display: inline-block }` at (1,1,1), so the button was a *block* — and `.kobra-navbar-toggle-bars` is itself `display: flex`, hence block-level, taking a full line with the inline label pushed below it. `align-items`, `justify-content` and `gap` were all present and all inert, because there was no flex container for them to act on. Same `#wrapper button` rule as the font-size, the letter-spacing and the text-transform above. **When a `