/* ============================================================================ utakmica-new.css — NAKED CLEAN-ROOM SHEET for the 2026 bet-centar match page ---------------------------------------------------------------------------- Self-sufficient sheet for utakmica-new.php. Every class is uniquely prefixed `ut-` so it never collides with global.css / kl-match.css. All content styles are scoped under `.ut-page` (the
) with a weak universal reset so the sheet's own classes win their ties. Design tokens come from css/design-tokens.css (the pasted copy was removed 2026-08-13, so this sheet is no longer standalone). The dev-chrome facsimile was deleted in the same pass — utakmica.php renders only
. Design source of truth: handoff/reference/mobile/.html (2a/3a2/3b/3c/3d/3e pre · 4a/4b/4c live · 4d/4e/4f/4g post). Values are literal per the redlines. Lineup pitch is NOT styled here — see css/ut-lineups.css (owner exemption). ============================================================================ */ /* ---------- DESIGN TOKENS (subset of handoff/specs/tokens.css) ---------- */ :root { /* accent */ --ut-primary: var(--kl-blue); --ut-primary-tint: var(--kl-blue-tint); --ut-primary-track: #EDEFF2; /* ink / neutral ramp */ --ut-ink: var(--kl-ink); --ut-body: var(--kl-text); --ut-secondary: var(--kl-text-2); --ut-muted: var(--kl-text-3); --ut-muted-2: var(--kl-text-4); --ut-muted-3: #828A93; /* mid grey between muted-2 and secondary */ --ut-faint: var(--kl-text-disabled); --ut-faint-2: #C4C9CE; /* lines / surfaces */ --ut-hairline: var(--kl-divider-2); --ut-border: var(--kl-border); --ut-border-2: var(--kl-border-strong); --ut-divider: var(--kl-divider); --ut-track: var(--kl-surface-4); --ut-pill-bg: var(--kl-surface-3); --ut-surface-alt: #F8F9FA; --ut-live-card-bg: #F1F3F5; /* semantic */ --ut-success: var(--kl-green); --ut-success-tint: var(--kl-green-tint); --ut-online: var(--kl-online); --ut-warning: var(--kl-amber); --ut-warning-tint: var(--kl-amber-tint); --ut-danger: var(--kl-red); --ut-danger-tint: var(--kl-red-tint); --ut-danger-tint-2: #FBEBEA; --ut-card-yellow: var(--kl-amber-bright); /* data-fill navy + bar ramp */ --ut-navy: var(--kl-navy); --ut-navy-soft: var(--kl-navy-text); /* away/second segment on two-way bars */ --ut-navy-tint: var(--kl-navy-tint); /* home band behind the momentum bars */ --ut-navy-soft-tint: var(--kl-navy-soft-tint); --ut-away-slate: var(--kl-navy-text-2); /* away segment slate (matches h2h away bar) */ --ut-bar-mid: #C9CED4; --ut-bar-light: var(--kl-bar-empty); --ut-bar-empty: var(--kl-bar-empty); /* placeholder */ --ut-ph-a: var(--kl-logo-ph); --ut-ph-b: #EDEFF1; /* type */ --ut-font-display: var(--kl-font-display); --ut-font-body: 'Inter', sans-serif; /* radii */ --ut-r-lg: var(--kl-r-16); --ut-r-panel: var(--kl-r-14); --ut-r-field: var(--kl-r-12); --ut-r-btn: var(--kl-r-10); --ut-r-chip: var(--kl-r-8); --ut-r-badge: var(--kl-r-6); --ut-r-bar: var(--kl-r-4); --ut-r-pill: var(--kl-r-pill); } /* Design tokens come from css/design-tokens.css, which every page loads. A verbatim copy of the --kl-* set used to be pasted here so this sheet could render standalone; owner 2026-08-13 traded that for one source of truth, since two copies of the same palette can only drift apart. The --bc-* alias layer went with it — 27 aliases for 3 uses, now inlined. */ /* ============================================================================ Banded page Analysis screens sit on a grey #F1F3F5 page with white content BANDS separated by 4px gaps (handoff reference 3a2/3b). Header + tabs are one white block at the top. Prognoza (2a) is a single white band on the grey page. The dev-chrome facsimile that used to live here (.ut-shell, .ut-devbar*, .ut-devnav*) is gone — utakmica.php renders only
, so none of it ever matched markup, and this sheet's own header always described it as dev-only and due to be dropped at cutover. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #C9CDD2; font-family: var(--ut-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- content reset (scoped, weak universal so components win ties) --- */ .ut-page, .ut-page * { box-sizing: border-box; margin: 0; padding: 0; border: 0; font-family: var(--ut-font-body); color: var(--ut-ink); background: transparent; line-height: 1.2; } .ut-page { display: block; background: #F1F3F5; color: var(--ut-ink); -webkit-font-smoothing: antialiased; } .ut-page img { display: block; max-width: 100%; } .ut-page button { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; } .ut-page p { line-height: 1.45; } .ut-page svg { display: block; } /* ---------- MATCH HEADER (screens 2a / 4a / 4d) — white top block ---------- */ /* Match header — one centered scoreboard skin for all states (owner 2026-07-27). Nav row: back · league identity (logo+name) · share. Meta: venue w/ stadium icon. Scoreboard: crest/name+form · centre (pre kickoff / live minute / post KRAJ) · crest/name+form. The scoreboard is the page H1 (team names; SEO §7). */ .ut-mh { background: var(--kl-surface); padding: 8px 16px 18px 16px; } .ut-mh-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -6px 6px -6px; } /* back + share share one icon colour — they are a matched pair in the same row */ .ut-mh-iconbtn { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--kl-text-2); border-radius: var(--kl-r-10); background: var(--kl-surface-3); } .ut-mh-iconbtn:active { background: var(--ut-pill-bg); } .ut-mh-nav-league { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; } /* MP-4.3: as a link it keeps the plain-text look — it labels the page, it is not a call to action. The tap target is the whole label, logo included. */ .ut-mh-nav-league-link { display: inline-flex; align-items: center; gap: 7px; min-width: 0; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } .ut-mh-nav-league-link:active .ut-mh-nav-league-name { color: var(--ut-secondary); } .ut-mh-nav-league-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .ut-mh-nav-league-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-mh-post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; font: 500 12px var(--ut-font-body); color: var(--ut-muted); margin-top: 2px; } .ut-mh-pm-venue { display: inline-flex; align-items: center; gap: 4px; color: var(--ut-muted); } /* Video snimci — thumbnail cards linking out to the clip. Two up on desktop, one on a phone; the thumbnail keeps a 16:9 box so a slow image cannot shift the rest of the section as it loads. */ .kl-hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--kl-sp-12, 12px); } .kl-hl-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; border: 1px solid var(--ut-hairline); border-radius: var(--kl-r-10, 10px); overflow: hidden; background: var(--kl-surface, #fff); } .kl-hl-thumb { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; background: var(--kl-surface-4, #eee); } .kl-hl-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 10px; min-width: 0; } .kl-hl-title { font: 600 13px var(--ut-font-body); color: var(--ut-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kl-hl-sub { font: 400 12px var(--ut-font-body); color: var(--ut-muted); } /* Click-to-play facade: the tile is our own thumbnail until the reader presses play, then the button is replaced in place by the iframe — same box, same aspect, so nothing jumps. */ .kl-hl-play { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .kl-hl-playicon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.62); transition: color 0.15s ease; } .kl-hl-play:hover .kl-hl-playicon, .kl-hl-play:focus-visible .kl-hl-playicon { color: var(--kl-red); } .kl-hl-frame { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; background: #000; } .kl-hl-out { align-self: flex-start; padding: 0 10px 10px; font: 600 12px var(--ut-font-body); color: var(--ut-secondary); text-decoration: none; } .kl-hl-out:hover { text-decoration: underline; } /* "Gdje gledati" — same treatment as the venue chip it sits beside. */ .ut-mh-pm-tv { display: inline-flex; align-items: center; gap: 4px; color: var(--ut-muted); } .ut-mh-pm-venue svg { color: var(--ut-faint); flex-shrink: 0; } /* MP-4.8: two rows — names, then form pills — with the score spanning both, so the pills sit directly under each name exactly as they did when they were inside the heading. row-gap is 0 and the pills carry their own margin (the old 5px column gap + 3px .stats_wld margin), so the taller score column can't push them down. */ .ut-mh-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 12px; row-gap: 0; margin: 10px 0 0; } .ut-mh-sb-h1 { display: contents; } /* NB the selectors below are descendant, not `>`: these three spans are children of the display:contents

, so `.ut-mh-scoreboard > …` would not match them. */ .ut-mh-scoreboard .ut-mh-sb-score { grid-row: 1 / span 2; grid-column: 2; } .ut-mh-scoreboard .ut-mh-sb-team:first-child { grid-column: 1; grid-row: 1; } .ut-mh-scoreboard .ut-mh-sb-team:last-child { grid-column: 3; grid-row: 1; } .ut-mh-sb-form { display: flex; justify-content: center; min-width: 0; margin-top: 8px; } .ut-mh-sb-form.is-home { grid-column: 1; grid-row: 2; } .ut-mh-sb-form.is-away { grid-column: 3; grid-row: 2; } .ut-mh-sb-team { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; } .ut-mh-sb-crest { width: 34px; height: 34px; object-fit: cover; } .ut-mh-sb-name { font: 700 12px var(--ut-font-display); color: var(--ut-ink); text-align: center; line-height: 1.25; } .ut-mh-sb-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; } .ut-mh-sb-goals { font: 800 32px var(--ut-font-display); color: var(--ut-ink); letter-spacing: 0.02em; white-space: nowrap; } .ut-mh-sb-kicktime { font-size: 26px; } /* pre: kickoff time; a touch smaller than a 1:1 score */ /* Abnormal pre state (Odgođeno / Otkazano / TBD / …) takes the kickoff slot: a status word, not a figure — read it like the state line, not the score. */ .ut-mh-sb-kicktime.ut-mh-sb-abnormal { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); letter-spacing: 0.06em; text-transform: uppercase; white-space: normal; text-align: center; max-width: 110px; line-height: 1.3; } /* First-half score under the running score (owner 2026-08-15). */ .ut-mh-sb-ht { font: 600 12px var(--ut-font-body); color: var(--ut-muted); white-space: nowrap; } .ut-mh-sb-ht[hidden] { display: none; } .ut-mh-sb-state { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.06em; } /* Last-5 form pills under each team name: rounded squares — green-dark filled W, tinted-amber outline D, red-outline L. Inline so it nests in the h1. */ .ut-mh-scoreboard .stats_wld { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; } .ut-mh-scoreboard .form-block { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--ut-r-badge); font: 700 10px var(--ut-font-display); border: 1px solid transparent; } .ut-mh-scoreboard .form-block.is-w { background: var(--kl-green); color: var(--kl-on-dark); } .ut-mh-scoreboard .form-block.is-d { background: var(--ut-warning-tint); color: var(--ut-warning); border-color: var(--ut-warning); } .ut-mh-scoreboard .form-block.is-l { background: var(--kl-surface); color: var(--ut-danger); border-color: var(--ut-danger); } .ut-mh-scoreboard .form-block.is-empty { background: var(--ut-pill-bg); color: var(--ut-muted-2); } /* Live scoreboard state (design 4a): pulsing minute in place of KRAJ. Red, the same live state as the tip page — --kl-red/--kl-red-light are the LIVE pulse tokens (owner 2026-08-15: "exact same pulsing dot as tip details"). */ .ut-mh-sb-live { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--ut-font-body); color: var(--kl-red); } .ut-mh-sb-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--kl-red-light); animation: ut-pulse 1.6s ease-in-out infinite; } @keyframes ut-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } /* Post qualifier ("NAKON PRODUŽETAKA") may wrap in the narrow centre column; the shootout score gets its own quiet line under it. */ .ut-mh-sb-state { text-align: center; max-width: 110px; } .ut-mh-sb-pens { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); white-space: nowrap; } .ut-mh-sb-pens[hidden] { display: none; } /* Ključni događaji (Sažetak sub-block): same tdn-goals component as the tip page's scoreboard strip — home column | one centred icon | away column, rows = name + bold minute. Goals and red cards stack as two such grids. */ .tdn-goals { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-start; gap: 3px 12px; margin-top: 12px; } .psz-block .tdn-goals { margin-top: 0; } .tdn-goals-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tdn-goals-col--home { align-items: flex-end; text-align: right; } .tdn-goals-col--away { align-items: flex-start; text-align: left; } .tdn-goals-ic { display: flex; align-items: center; justify-content: center; color: var(--ut-body); } .tdn-goal { font: 400 12px var(--ut-font-body); color: var(--ut-secondary); white-space: nowrap; } /* centre icons reuse the timeline's .mtl-icon.is-goal / .is-red */ /* Sažetak sub-blocks (one band, subtitled — no dividers, owner 2026-08-06). */ .psz-block { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; } .ut-subhead .pme-score { font: 700 13px var(--ut-font-display); color: var(--ut-secondary); margin-left: 4px; text-transform: none; letter-spacing: 0; } /* ---------- TABS — white, INK underline (handoff reference 2a/3a2/3b) ---------- */ .ut-tabs-container { background: var(--kl-surface); } /* Gap 22->14 and side padding 16->12 (MPO-8): six tabs measured 410px in a 375px viewport, so "Kvote" - the section that converts - was clipped off the right edge. The same six now measure 362px and all fit. */ .ut-tabs { display: flex; gap: 14px; padding: 6px 12px 0 12px; border-bottom: 1px solid var(--ut-hairline); overflow-x: auto; scrollbar-width: none; } .ut-tabs::-webkit-scrollbar { display: none; } .ut-tabs .ut-tab { font: 600 14px var(--ut-font-display); color: var(--ut-muted-2); padding: 10px 0; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; background: transparent; } .ut-tab.is-active { font-weight: 700; color: var(--ut-ink); border-bottom-color: var(--ut-ink); padding: 10px 0 9px 0; } /* Compact sticky match header (mobile) — built by initStickyHeader() in the page JS from .ut-mh; slides in under the 56px kl app bar once the scoreboard scrolls away, carrying team names + score + the tabs. Desktop keeps the full header (the JS returns null > 768px, so this element never exists there). */ #sticky-match-header { position: fixed; top: 56px; left: 0; right: 0; z-index: 55; background: var(--kl-surface); border-bottom: 1px solid var(--ut-hairline); box-shadow: 0 2px 8px rgba(20, 23, 28, 0.06); transform: translateY(-130%); transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1); } #sticky-match-header.is-visible { transform: translateY(0); } #sticky-match-header .ut-sticky-top { display: flex; align-items: center; gap: 4px; padding: 4px 6px; } #sticky-match-header .ut-sticky-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px 4px; } #sticky-match-header .ut-sticky-iconbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ut-ink); cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; } #sticky-match-header .ut-sticky-iconbtn:active { background: var(--ut-hairline); } #sticky-match-header .ut-sticky-team { flex: 1; min-width: 0; font: 700 13px var(--ut-font-display); color: var(--ut-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sticky-match-header .ut-sticky-team:first-child { text-align: right; } #sticky-match-header .ut-sticky-score { flex-shrink: 0; font: 800 15px var(--ut-font-display); color: var(--ut-ink); white-space: nowrap; } #sticky-match-header .ut-tabs { padding-top: 0; } #sticky-match-header .ut-tab { appearance: none; -webkit-appearance: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; } /* ============================================================================ BAND SYSTEM + SHARED PRIMITIVES (reuse across every tab) ============================================================================ */ .ut-sections { display: flex; flex-direction: column; gap: 4px; background: #F1F3F5; padding-top: 4px; } /* MP-4.7: a floor so a section can never be a zero-height sliver mid-scroll with the grey canvas showing through where a band should be. Both values sit BELOW the smallest real content on the page (a band with a title and one line runs ~76px), so nothing gains whitespace — this reserves space, it does not set a size. Note: the likeliest cause of a full screen of grey was the scope-swap wrappers, where a section could end up with both copies display:none; MP-3.1 removed them. */ .ut-section { scroll-margin-top: 60px; display: flex; flex-direction: column; gap: 4px; min-height: 72px; } /* a white content band */ .ut-band { background: var(--kl-surface); padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 16px; min-height: 68px; } /* section title (20px); .ut-subhead below is the block heading (14px) */ .ut-title { font: 700 20px var(--ut-font-display); color: var(--ut-ink); white-space: nowrap; } /* inline Feather icons render black (ink) everywhere, not the parent text colour */ .ut-ico { color: var(--ut-ink); } .ut-subhead { font: 600 14px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; } /* ONE uppercase label for the whole page, at one size (owner 2026-08-12). It replaced .pr-col-label, .ut-h2h-recent-label, .ut-kv-book-col, .ut-spec-sub-label and .ut-forma-sub-label — five names for the same label, differing only in font-size. .ut-subhead above is the same label one step up, for headings that open a block rather than a column. */ .ut-eyebrow { font: 600 12px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; } /* Window tag (data window a block is computed over: "sezona" / "zadnjih 5" / "posljednjih 10") — the two-lens labelling so season vs recent-form blocks are never mistaken for each other. */ .ut-blk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* Used where a badge shares the header row (ODG): stack title + window tag so a long title never wraps against the badge. */ .ut-blk-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Stacked under a title, .ut-win carries a sentence rather than the short window chip it was built for, so the chip's nowrap has to go: the lineups subtitle measures 362px against 343px of usable band width at 375, which would scroll the page sideways. Harmless for the short captions already using this wrapper — they never reach the wrap point. */ .ut-blk-titles .ut-win { white-space: normal; } .ut-win { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; flex-shrink: 0; } /* Why this band is showing this window (bc_win_tip). Same tap/hover marker as the advanced match stats; the bubble is right-anchored because .ut-win sits at the right edge of the block head and a centred one would leave the card. */ .ut-win-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--ut-pill-bg); color: var(--ut-muted-2); font-size: 10px; font-style: normal; font-weight: 700; cursor: help; position: relative; vertical-align: middle; } .ut-win-info:hover::after, .ut-win-info:focus::after { content: attr(data-tip); position: absolute; bottom: 130%; right: -6px; z-index: 30; width: min(260px, 70vw); padding: 8px 10px; border-radius: 6px; background: var(--ut-ink); color: var(--kl-on-dark); font: 400 12px/1.4 var(--ut-font-body); text-align: left; white-space: normal; } .ut-win-info:focus-visible { outline: 2px solid var(--ut-primary); outline-offset: 1px; } /* In a block head the marker can sit mid-row (e.g. the ODG "posljednje utakmice" caption), where a right-anchored bubble hangs off the left of a phone screen. Anchor the bubble to the head (card width) and clamp it to the viewport so it is always fully on screen wherever the marker lands. */ .ut-blk-head, .ut-gol-head { position: relative; } .ut-blk-head .ut-win-info, .ut-gol-head .ut-win-info { position: static; } .ut-blk-head .ut-win-info:hover::after, .ut-blk-head .ut-win-info:focus::after, .ut-gol-head .ut-win-info:hover::after, .ut-gol-head .ut-win-info:focus::after { left: 0; right: auto; bottom: calc(100% + 6px); width: min(280px, calc(100vw - 32px)); } /* team crest (16px round, striped placeholder) + inline name */ .ut-crest { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } /* Sub-390px (e.g. 360px devices): team badges don't fit the multi-column goals rows / Kartoni mirror head — hide them there so the text fits one line. */ @media (max-width: 389px) { .ut-gol-proj .ut-teamline .ut-crest, .ut-spec-mirror-head .ut-bc-team-icon { display: none; } } .ut-teamline { display: flex; align-items: center; gap: 6px; min-width: 0; } /* Long club names ("Independiente Medellín", "Millonarios u gostima") were cut to "Independiente Me…" in every narrow card. Two lines, then ellipsis — a wrapped name is readable, half a name is not (owner 2026-08-12). */ .ut-teamline .ut-tname { font: 600 13px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* status/verdict pills */ .ut-pill { display: inline-block; font: 700 12px var(--ut-font-body); border-radius: var(--ut-r-pill); padding: 4px 10px; white-space: nowrap; }.ut-pill.is-amber { color: var(--ut-warning); background: var(--ut-warning-tint); } .ut-pill.is-red { color: var(--ut-danger); background: var(--ut-danger-tint); } /* bordered sub-card */ .ut-subcard { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); padding: 16px 18px; } .ut-subcard--sm { border: 1px solid var(--ut-border); border-radius: var(--ut-r-panel); padding: 14px; } /* grey signal pill (dot + text) */ .ut-signal { display: flex; align-items: center; gap: 9px; background: var(--ut-pill-bg); border-radius: var(--ut-r-chip); padding: 8px; } .ut-signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ut-muted-2); } .ut-signal-text { font: 400 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.4; } /* horizontal bars (single fill + two-sided) */ .ut-bar { display: block; height: 8px; border-radius: var(--ut-r-bar); background: var(--ut-track); overflow: hidden; } .ut-bar-fill { display: block; height: 100%; border-radius: var(--ut-r-bar); background: var(--ut-navy); } /* Bars slide to their new value when the data view is switched (period tabs, scope toggle). See utAnimateBars in bc-scope.php / post-stats-table.php. */ .ut-bar-fill, .ut-forma-ah-fill { transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { .ut-bar-fill, .ut-forma-ah-fill { transition: none; } } .ut-bar-fill.is-soft { background: var(--ut-navy-soft); } /* best-odds chip (value + bookmaker logo) */ .ut-oddchip { display: inline-flex; align-items: center; gap: 6px; background: var(--ut-pill-bg); border-radius: var(--ut-r-badge); padding: 3px 5px 3px 7px; text-decoration: none; font: 600 12px var(--ut-font-body); color: var(--ut-muted-2); } .ut-oddchip b { font-weight: inherit; color: inherit; } .ut-oddchip.is-pick { color: var(--ut-secondary); }.ut-oddchip.is-verdict b, .ut-oddchip.is-strong b { font-weight: 700; } .ut-oddlogo { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; object-fit: contain; background: var(--ut-ph-a); } /* Odds movement since the last stored price (IA-10). Colour is a second cue — the arrow direction and the tooltip carry the meaning on their own. */ .ut-oddtrend { font-size: 11px; line-height: 1; flex-shrink: 0; cursor: help; } .ut-oddtrend.is-up { color: var(--ut-success); } .ut-oddtrend.is-down { color: var(--ut-danger); } /* generic empty / no-data */ .ut-empty { text-align: center; font: 400 13px var(--ut-font-body); color: var(--ut-muted); padding: 14px 8px; } /* standard empty state (dashed card, title + body) — from reference 6b */ .ut-empty-state { border: 1px dashed var(--ut-border-2); border-radius: 14px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .ut-empty-state-title { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-empty-state-body { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); line-height: 1.5; } /* MP-4.2: the next action on an empty state. Uses the page's own primary ink so it reads as a button without pulling in global.css's .kl-btn (this sheet is self-sufficient and its reset would strip it anyway). Same look as .kl-book-visit (owner 2026-08-25) — square-ish 8px radius, not a pill. */ .ut-empty-state-cta { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 8px; background: var(--ut-primary); color: var(--kl-on-dark); font: 700 12px var(--ut-font-body); text-decoration: none; -webkit-tap-highlight-color: transparent; } .ut-empty-state-cta:active { opacity: 0.85; } /* ============================================================================ 2a — PROGNOZA (verdict card + Prognoze + Ključni signali + Povjerenje) Single white band; blocks separated by 28px (reference 2a). ============================================================================ */ #pre-prognoza { background: var(--kl-surface); padding: 20px 16px; gap: 28px; } /* verdict card */ .ut-verdict { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); padding: 16px 16px 0; } .ut-verdict-top { display: flex; align-items: center; gap: 18px; } .ut-ring { position: relative; width: 74px; height: 74px; flex: 0 0 auto; } .ut-ring svg { width: 100%; height: 100%; } .ut-ring-track { stroke: var(--ut-track); stroke-width: 6; fill: none; } .ut-ring-fill { stroke-width: 6; stroke-linecap: round; fill: none; stroke: var(--ut-success); } .ut-ring.is-amber .ut-ring-fill { stroke: var(--ut-warning); } .ut-ring.is-red .ut-ring-fill { stroke: var(--ut-danger); } .ut-ring-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 19px var(--ut-font-display); color: var(--ut-ink); } .ut-verdict-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ut-verdict-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ut-verdict-kicker .ut-eyebrow { color: var(--ut-muted); } .ut-verdict-pick { font: 800 20px var(--ut-font-display); color: var(--ut-ink); margin-top: 3px; line-height: 1.2; } .ut-verdict-odds { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; } .ut-verdict-sub { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-verdict-why { display: flex; align-items: flex-start; gap: 7px; border-top: 1px solid var(--ut-divider); margin-top: 16px; padding: 11px 0; } .ut-verdict-why .ut-dot6 { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; background: var(--ut-success); } .ut-verdict-why p { font: 400 14px var(--ut-font-body); color: var(--ut-muted); line-height: 1.45; } .ut-verdict-why b { font-weight: 600; color: var(--ut-secondary); } /* Prognoze block */ .ut-prognoze { display: flex; flex-direction: column; gap: 18px; } .ut-1x2 { display: flex; flex-direction: column; gap: 10px; } .ut-stack { display: flex; gap: 2px; height: 8px; border-radius: var(--ut-r-bar); overflow: hidden; } .ut-stack span { display: block; }.ut-stack .is-away { background: var(--ut-navy-soft); } /* both teams get a navy shade */ .ut-stack .is-draw { background: var(--ut-bar-empty); } /* draw = neutral third option */ .ut-1x2-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .ut-1x2-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ut-1x2-col.is-center { align-items: center; text-align: center; } .ut-1x2-col.is-right { align-items: flex-end; text-align: right; } .ut-1x2-col b { font: 800 18px var(--ut-font-display); color: var(--ut-ink); } .ut-1x2-col span { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ut-1x2-col.is-muted b, .ut-1x2-col.is-muted span { color: var(--ut-muted-2); } .ut-1x2-odds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .ut-1x2-odds .ut-oddcell { display: flex; } .ut-1x2-odds .ut-oddcell.is-center { justify-content: center; } .ut-1x2-odds .ut-oddcell.is-right { justify-content: flex-end; } .ut-hr { height: 1px; background: var(--ut-divider); }.ut-2side-head { display: flex; justify-content: space-between; align-items: baseline; } .ut-2side-cell { display: flex; flex-direction: column; gap: 1px; } .ut-2side-cell.is-right { align-items: flex-end; text-align: right; } .ut-2side-cell b { font: 800 18px var(--ut-font-display); color: var(--ut-ink); } .ut-2side-cell span { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); } .ut-2side-cell.is-muted b, .ut-2side-cell.is-muted span { color: var(--ut-muted-2); } .ut-2side-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--ut-r-bar); overflow: hidden; } .ut-2side-bar span { display: block; }.ut-2side-bar .is-empty { background: var(--ut-bar-empty); } .ut-2side-odds { display: flex; justify-content: space-between; } /* Ključni signali */ .ut-signals { display: flex; flex-direction: column; } .ut-signal-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ut-divider); } .ut-signals .ut-signal-row:last-child { border-bottom: none; } .ut-signal-row .ut-dot7 { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--ut-muted-2); } .ut-signal-row p { font: 400 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.45; } .ut-signal-row b { font-weight: 600; } /* ============================================================================ 3a2 — GOLOVI (rebuilt from reference/mobile/3a2.html) ============================================================================ */ .ut-gol-proj { display: flex; flex-direction: column; } .ut-gol-proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ut-gol-proj-col { display: flex; flex-direction: column; gap: 2px; } .ut-gol-proj-col.is-div { border-left: 1px solid var(--ut-divider); padding-left: 16px; } .ut-gol-proj-num { font: 800 18px var(--ut-font-display); color: var(--ut-ink); margin-top: 4px; } .ut-gol-proj-num.is-muted { color: var(--ut-muted-2); margin-top: 0; } .ut-gol-proj-num small { font: 500 12px var(--ut-font-body); color: var(--ut-muted); } .ut-gol-proj-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--ut-divider); margin-top: 14px; padding: 12px 0 2px; } .ut-gol-proj-eq { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); white-space: nowrap; } .ut-gol-proj-eq b { font: 800 14px var(--ut-font-display); color: var(--ut-ink); } .ut-gol-thr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; background: var(--ut-pill-bg); border-radius: 10px; padding: 4px; } .ut-gol-thr-btn { font: 600 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 6px 0; border-radius: 7px; background: transparent; } .ut-gol-thr-btn.is-active { background: var(--kl-surface); box-shadow: 0 1px 3px rgba(20,23,28,0.1); color: var(--ut-ink); font-weight: 700; } .ut-gol-thr-panel { display: none; flex-direction: column; gap: 24px; } .ut-gol-thr-panel.is-active { display: flex; } /* shared vertical stack — one rule for every flex-column section wrapper */ .ut-gol-ou, .ut-gol-half-team, .ut-forma-team, .ut-forma-team-main { display: flex; flex-direction: column; gap: 12px; }.ut-gol-ou-head { flex-wrap: wrap; } /* Breather between the W/D/L chip row and whatever follows per team */ .ut-forma-team-main { margin-bottom: 12px; } .ut-gol-ou-head .ut-tname { color: var(--ut-ink); font-weight: 600; } .ut-gol-ou-head .ut-tmeta { flex-basis: 100%; font: 500 13px var(--ut-font-body); color: var(--ut-muted); } /* Sample size sits with the team name, not at the tail of the caption — it is what the percentages below are out of, so it reads with the team. */ .ut-gol-ou-n { font: 600 12px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; } .ut-gol-ou-row { display: grid; grid-template-columns: 65px 1fr 38px; align-items: center; gap: 10px; } /* Venue-only cut of the same figure, under the two bars. */ .ut-gol-ou-ven { margin-top: 6px; font: 500 12px var(--ut-font-body); color: var(--ut-muted); }.ut-gol-ou-lbl { font: 700 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-gol-ou-lbl.is-muted { color: var(--ut-muted-2); } .ut-gol-ou-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; } .ut-gol-ou-pct.is-muted { color: var(--ut-muted-2); } .ut-gol-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* ── ODG contributor cards (2×2, ring nested toward the grid centre) ────────── */ .ut-odg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ut-odg-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 12px; border: 1px solid var(--ut-border); border-radius: var(--ut-r-panel); } .ut-odg-text { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; } .ut-odg-team { max-width: 100%; font: 700 13px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ut-odg-sub { font: 500 12px var(--ut-font-body); color: var(--ut-muted); max-width: 100%; overflow-wrap: anywhere; } /* games chip: bottom-left, opposite the ring */ .ut-odg-chip { margin-top: auto; align-self: flex-start; font: 700 12px var(--ut-font-body); padding: 3px 10px; border-radius: var(--ut-r-chip); white-space: nowrap; }.ut-odg-chip.is-amber { color: var(--ut-warning); background: var(--ut-warning-tint); } .ut-odg-chip.is-red { color: var(--ut-danger); background: var(--ut-danger-tint); } /* ring: bottom-right on every card */ .ut-odg-card .ut-ring { position: absolute; right: 12px; bottom: 12px; width: 58px; height: 58px; } .ut-odg-card .ut-ring-txt { font-size: 14px; } /* ODG venue-record: one chip per team, two rows (team+ODG / games) */ .ut-odg-record { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .ut-odg-recchip { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: var(--ut-pill-bg); border-radius: var(--ut-r-chip); } .ut-odg-recchip-top { font: 500 12px var(--ut-font-body); color: var(--ut-muted); }.ut-odg-recchip-games { font: 700 13px var(--ut-font-display); color: var(--ut-ink); } .ut-gol-note { font: 500 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; } .ut-gol-cs-row { display: grid; grid-template-columns: 150px 1fr 62px; align-items: center; gap: 10px; } /* Phone: the 150px name column can't hold a long club name next to a bar, so the name takes its own full-width line and the bar keeps the one below it. */ @media (max-width: 480px) { .ut-gol-cs-row { grid-template-columns: 1fr 65px; grid-template-areas: "name name" "bar pct"; row-gap: 6px; } .ut-gol-cs-row .ut-teamline { grid-area: name; } .ut-gol-cs-row .ut-bar { grid-area: bar; } .ut-gol-cs-row .ut-gol-cs-pct { grid-area: pct; } } .ut-gol-cs-row .ut-tname { font-weight: 500; color: var(--ut-body); } .ut-gol-cs-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; } .ut-gol-cs-pct.is-muted { color: var(--ut-muted-3); }.ut-gol-cs-notes { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--ut-divider); } .ut-bar-fill.is-soft2 { background: var(--kl-navy-text-2); }.ut-gol-proj-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.08em; text-transform: uppercase; } /* MP-2.3: says where the projection comes from, so it reads as derived from the rows below rather than arriving from nowhere. Not uppercase, not tracked. */ .ut-gol-proj-src { font: 500 11px var(--ut-font-body); color: var(--ut-muted-3); letter-spacing: 0; text-transform: none; } .ut-gol-half-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; } .ut-gol-half-cell { padding: 14px; text-align: center; } .ut-gol-half-cell.is-hi { border-left: 1px solid var(--ut-border); background: var(--ut-surface-alt); } .ut-gol-half-num { font: 800 24px var(--ut-font-display); color: var(--ut-muted-2); } .ut-gol-half-cell.is-hi .ut-gol-half-num { color: var(--ut-ink); } .ut-gol-half-cap { display: flex; flex-direction: column; font: 13px var(--ut-font-body); color: var(--ut-muted-2); margin-top: 2px; line-height: 1.35; } .ut-gol-half-cap-a { color: var(--ut-muted-3); font-weight: 600; } .ut-gol-half-cap-b { color: var(--ut-muted-2); font-weight: 500; } .ut-gol-half-cell.is-hi .ut-gol-half-cap-a { color: var(--ut-secondary); } .ut-gol-half-team.is-brd { border-top: 1px solid var(--ut-divider); padding-top: 10px; } .ut-gol-half-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; } .ut-gol-half-stats > div { text-align: center; } /* Tačan broj golova (extra) — vertical bar chart */ .ut-gol-et { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; } .ut-gol-et-col { display: flex; flex-direction: column; align-items: center; gap: 6px; } .ut-gol-et-track { width: 100%; height: 84px; display: flex; align-items: flex-end; justify-content: center; } .ut-gol-et-bar { width: 68%; background: var(--ut-navy); border-radius: 4px 4px 0 0; min-height: 4px; }.ut-gol-et-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); } /* MP-2.6: labels the historical splits below the Over/Under projection so they don't read as a second forecast. Sits on the band's 8px rhythm. */ .ut-gol-ou-eyebrow { margin-top: 4px; } .ut-gol-gp-row { display: grid; grid-template-columns: 46px 1fr 38px; align-items: center; gap: 10px; } .ut-gol-gp-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); } .ut-gol-gp-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; } .ut-gol-gp-row.is-peak .ut-gol-gp-pct { color: var(--ut-warning); } .ut-gol-half-stats b { font: 800 16px var(--ut-font-display); color: var(--ut-ink); display: block; } .ut-gol-half-stats b.is-muted { color: var(--ut-muted-2); } .ut-gol-half-stats b.is-green { color: var(--ut-success); } .ut-gol-half-stats span { font: 600 13px var(--ut-font-body); color: var(--ut-muted); } /* ============================================================================ 3d — POVREDE (injuries; rebuilt from reference/mobile/3d.html). Lineup pitch is NOT here — see css/ut-lineups.css (owner exemption). ============================================================================ */ .ut-inj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ut-inj-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ut-inj-team-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; } .ut-inj-row { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--ut-divider); } .ut-inj-reasonline { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* One avatar. 30px is the default; the summary MVP and the tipster cards use the large size. --ph is the placeholder weave shown when a photo is missing (the img onerror handlers swap to it, so those strings are part of this contract — see sections/bet-centar/player-ratings.php and post-sazetak.php). */ .ut-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ut-track); } .ut-avatar--lg { width: 34px; height: 34px; } .ut-avatar--ph { background: repeating-linear-gradient(45deg, var(--ut-ph-b), var(--ut-ph-b) 3px, var(--ut-ph-a) 3px, var(--ut-ph-a) 6px); } .ut-inj-col .ut-inj-row:last-child { border-bottom: none; padding-bottom: 0; } .ut-inj-player { flex: 1; min-width: 0; } .ut-inj-nameline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ut-inj-name { font: 600 12px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ut-inj-value { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); line-height: 1.35; } .ut-inj-value b { font-weight: 800; color: var(--ut-ink); font-family: var(--ut-font-display); } .ut-inj-reason { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ut-inj-status { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ut-inj-status img, .ut-inj-status svg { width: 18px; height: 18px; object-fit: contain; } .ut-inj-empty { font: 500 13px var(--ut-font-body); color: var(--ut-muted-2); } /* ============================================================================ 3e — KVOTE (odds comparison; rebuilt from reference/mobile/3e.html) ============================================================================ */ /* .ut-kvote carries .ut-band now (white, padded, 16px column) — the class stays for the desktop border below and as the scope for .ut-kv-* children. */ .ut-kv-head { display: flex; align-items: baseline; justify-content: space-between; }/* MP-4.5: when the prices were last read. */ .ut-kv-updated { font: 500 11px var(--ut-font-body); color: var(--ut-muted-3); margin-top: 8px; } .ut-kv-empty { font: 400 13px var(--ut-font-body); color: var(--ut-muted); padding: 8px 0; } .ut-kv-radio { position: absolute; opacity: 0; pointer-events: none; } /* market chips + period dropdown share one row, space-between */ .ut-kv-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ut-kv-chips { display: flex; gap: 6px; flex-wrap: wrap; } .ut-kv-chip { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: var(--ut-r-pill); padding: 6px 12px; cursor: pointer; } #ut-kv-m-1x2:checked ~ .ut-kv-controls label[for="ut-kv-m-1x2"], #ut-kv-m-ou25:checked ~ .ut-kv-controls label[for="ut-kv-m-ou25"], #ut-kv-m-btts:checked ~ .ut-kv-controls label[for="ut-kv-m-btts"] { background: var(--ut-primary); color: var(--kl-on-dark); font-weight: 700; } /* period control (90 min / 1. pol / 2. pol) — hidden while ODG is selected */ /* period dropdown (handoff 3e: "90 min ▾" pill → menu) */ .ut-kv-perdd { position: relative; align-self: flex-start; } .ut-kv-perdd .ut-kv-perdd-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: var(--ut-r-pill); padding: 6px 12px; cursor: pointer; } .ut-kv-perdd-chev { width: 13px; height: 13px; flex-shrink: 0; } .ut-kv-perdd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 128px; background: var(--kl-surface); border: 1px solid var(--ut-border); border-radius: 10px; box-shadow: 0 6px 20px rgba(10, 14, 20, 0.12); padding: 4px; display: flex; flex-direction: column; gap: 2px; } .ut-kv-perdd-menu[hidden] { display: none; } .ut-kv-perdd .ut-kv-perdd-opt { text-align: left; font: 600 12px var(--ut-font-body); color: var(--ut-body); padding: 8px 10px; border-radius: 7px; cursor: pointer; background: transparent; } .ut-kv-perdd .ut-kv-perdd-opt:active { background: var(--ut-pill-bg); } .ut-kv-perdd .ut-kv-perdd-opt.is-sel { background: var(--ut-ink); color: var(--kl-on-dark); } #ut-kv-m-btts:checked ~ .ut-kv-controls .ut-kv-perdd { display: none; } .ut-kv-panel { display: none; } #ut-kv-m-1x2:checked ~ #ut-kv-p-ft:checked ~ .ut-kv-panels .ut-kv-panel[data-m="1x2"][data-p="ft"], #ut-kv-m-1x2:checked ~ #ut-kv-p-1h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="1x2"][data-p="1h"], #ut-kv-m-1x2:checked ~ #ut-kv-p-2h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="1x2"][data-p="2h"], #ut-kv-m-ou25:checked ~ #ut-kv-p-ft:checked ~ .ut-kv-panels .ut-kv-panel[data-m="ou25"][data-p="ft"], #ut-kv-m-ou25:checked ~ #ut-kv-p-1h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="ou25"][data-p="1h"], #ut-kv-m-ou25:checked ~ #ut-kv-p-2h:checked ~ .ut-kv-panels .ut-kv-panel[data-m="ou25"][data-p="2h"], #ut-kv-m-btts:checked ~ .ut-kv-panels .ut-kv-panel[data-m="btts"][data-p="ft"] { display: block; } .ut-kv-grid { display: flex; flex-direction: column; gap: 6px; } .ut-kv-grow { display: grid; grid-template-columns: 1fr 60px 60px 60px; gap: 6px; align-items: center; } .ut-kv-grid[data-cols="2"] .ut-kv-grow { grid-template-columns: 1fr 60px 60px; } .ut-kv-ghead .ut-kv-hcell { font: 600 12px var(--ut-font-body); color: var(--ut-muted); text-align: center; } .ut-kv-book { display: flex; align-items: center; gap: 8px; min-width: 0; } .ut-kv-logo { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; object-fit: contain; } .ut-kv-logo--ph { background: var(--ut-ph-a); } .ut-kv-bookname { font: 700 12px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-kv-odd { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); border: 1px solid var(--ut-border); border-radius: 8px; padding: 8px 0; text-align: center; } .ut-kv-odd.is-best { font-weight: 700; color: var(--ut-ink); border-color: var(--ut-ink); } .ut-kv-foot { border-top: 1px solid var(--ut-divider); padding-top: 11px; font: 500 12px var(--ut-font-body); color: var(--ut-muted); } /* Best-odds quick-play list — shown on all viewports (owner: don't hide on mobile). */ .ut-kv-betslip { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--ut-divider); } .ut-kv-slip-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--ut-track); } .ut-kv-slip-row:last-child { border-bottom: none; } .ut-kv-slip-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ut-kv-slip-label { font: 600 13px var(--ut-font-body); color: var(--ut-ink); } .ut-kv-slip-src { font: 500 12px var(--ut-font-body); color: var(--ut-muted); } .ut-kv-slip-win { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-kv-slip-win span { font-weight: 800; color: var(--ut-ink); font-family: var(--ut-font-display); } .ut-kv-slip-cta { font: 700 13px var(--ut-font-body); color: var(--kl-on-dark); background: var(--ut-primary); border-radius: var(--ut-r-btn); padding: 8px 14px; text-decoration: none; } /* ============================================================================ 3c — FORMA (rebuilt from reference/mobile/3c.html) ============================================================================ */ .ut-bc-team-name-group { display: inline-flex; align-items: center; gap: 8px; } .ut-bc-team-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ut-forma-team > .ut-bc-team-name-group { justify-content: flex-start; } .ut-forma-team-name { font: 700 13px var(--ut-font-display); color: var(--ut-ink); } .ut-forma-pills-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* MP-4.1: what P / N / I mean, said once on the page instead of only in a title. */ .ut-forma-pills-legend { font: 500 12px var(--ut-font-body); color: var(--ut-muted); } /* Form pills: rounded squares (24px) — green-dark filled W, tinted-amber outline D, red-outline L, same palette as the header form-block. */ .ut-forma-pill { width: 24px; height: 24px; border-radius: var(--ut-r-chip); display: flex; align-items: center; justify-content: center; font: 700 12px var(--ut-font-display); border: 1px solid transparent; flex-shrink: 0; } .ut-forma-pill.is-w { background: var(--kl-green); color: var(--kl-on-dark); } .ut-forma-pill.is-l { background: var(--kl-surface); color: var(--ut-danger); border-color: var(--ut-danger); } .ut-forma-pill.is-d { background: var(--ut-warning-tint); color: var(--ut-warning); border-color: var(--ut-warning); } .ut-forma-pill.is-empty { background: var(--ut-pill-bg); color: var(--ut-muted-2); } .ut-forma-trend { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 700 12px var(--ut-font-body); border-radius: var(--ut-r-pill); padding: 5px 11px; white-space: nowrap; } /* Icon inherits the chip's per-state color; stroke follows it (the .ut-page * reset pins every element's color to ink, so currentColor needs this override). The override has to reach the / shapes too — currentColor is inherited as the literal keyword and each shape re-resolves it against ITS OWN color, which the .ut-page * reset also pins to ink unless overridden here. */ .ut-forma-trend .ut-ico { width: 13px; height: 13px; flex-shrink: 0; color: inherit; stroke: currentColor; } .ut-forma-trend .ut-ico * { color: inherit; } .ut-forma-trend.is-falling, .ut-forma-trend.is-red { color: var(--ut-danger); background: var(--ut-danger-tint); } .ut-forma-trend.is-stable, .ut-forma-trend.is-amber { color: var(--ut-secondary); background: var(--ut-pill-bg); } .ut-forma-trend.is-stable { border: 1px solid var(--kl-border); } .ut-forma-venue-row { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-forma-venue-win { color: var(--ut-muted-2); }.ut-forma-team + .ut-forma-team, .ut-band > .ut-forma-team ~ .ut-forma-team { border-top: 1px solid var(--ut-divider); padding-top: 14px; } .ut-forma-table { border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; } .ut-forma-table-head, .ut-forma-table-row { display: grid; grid-template-columns: 14px 1fr 58px 18px 16px 16px 16px 28px 22px; gap: 5px; align-items: center; padding: 11px 14px; } .ut-forma-table-head { padding: 9px 14px; background: var(--ut-surface-alt); border-bottom: 1px solid var(--ut-hairline); } .ut-forma-table-head span { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.05em; text-align: center; } .ut-forma-table-head span:nth-child(2), .ut-forma-table-head span:nth-child(3) { text-align: left; } .ut-forma-table-row { border-bottom: 1px solid #F2F3F5; } .ut-forma-table-row:last-child { border-bottom: none; } .ut-forma-table-rank { font: 700 12px var(--ut-font-body); color: var(--ut-muted-2); text-align: center; } .ut-forma-table-team { display: flex; align-items: center; gap: 8px; min-width: 0; } .ut-forma-table-name { font: 700 12px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-forma-table-form { display: flex; gap: 3px; } .ut-forma-form-sq { width: 8px; height: 8px; border-radius: 2px; background: var(--ut-track); } .ut-forma-table-num { font: 500 13px var(--ut-font-body); color: var(--ut-body); text-align: center; } .ut-forma-table-pts { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: center; } /* "Tabela" label + "Cijela tabela" trigger (list icon, no chevron) on one row */ .ut-forma-table-block { margin-top: 8px; } /* layout comes from .ut-subblock */ .ut-forma-table-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Tabela is an

since MPO-3 — drop the UA heading margin so the row sits exactly where the eyebrow did. */ .ut-forma-table-header .ut-eyebrow { margin: 0; } .ut-forma-table-header .ut-forma-table-more { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: transparent; padding: 2px 0; } .ut-forma-table-header .ut-forma-table-more:active { color: var(--ut-ink); } .ut-forma-table-more-ico { width: 14px; height: 14px; flex-shrink: 0; } /* Full standings inside the drawer */ .ut-tbl-full { display: flex; flex-direction: column; } .ut-tbl-full-head, .ut-tbl-full-row { display: grid; grid-template-columns: 20px 1fr 24px 22px 22px 22px 30px 26px; gap: 6px; align-items: center; padding: 9px 4px; } .ut-tbl-full-head { padding: 6px 4px; } .ut-tbl-full-head span { font: 600 10px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; } .ut-tbl-full-head span:nth-child(2) { text-align: left; } .ut-tbl-full-row { border-top: 1px solid var(--ut-divider); font: 500 12px var(--ut-font-body); color: var(--ut-body); } .ut-tbl-full-row span:not(.ut-tbl-full-team) { text-align: center; } .ut-tbl-full-rank { font: 700 12px var(--ut-font-display); color: var(--ut-muted); } .ut-tbl-full-team { display: flex; align-items: center; gap: 8px; min-width: 0; } .ut-tbl-full-team img { flex-shrink: 0; border-radius: 3px; } .ut-tbl-full-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ut-ink); } .ut-tbl-full-pts { font: 800 12px var(--ut-font-display); color: var(--ut-ink); } .ut-tbl-full-row.is-hl { background: var(--ut-pill-bg); border-radius: 8px; border-top-color: transparent; } .ut-tbl-full-row.is-hl .ut-tbl-full-rank { color: var(--ut-secondary); } .ut-forma-crossref { display: flex; flex-direction: column; gap: 14px; } .ut-forma-crossref-head { display: flex; align-items: center; justify-content: space-between; } /* att/def home-vs-away bars — live/post stat layout (label centred over the bar) */ .ut-avd-teams { display: flex; align-items: center; justify-content: space-between; } .ut-avd-tn { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--ut-font-display); color: var(--ut-ink); } .ut-avd-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }.ut-avd-dot.is-away { background: var(--ut-away-slate); } .ut-avd-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; row-gap: 6px; } .ut-avd-hval { grid-column: 1; font: 800 16px var(--ut-font-display); color: var(--ut-ink); } .ut-avd-label { grid-column: 2; text-align: center; font: 500 12px var(--ut-font-body); color: var(--ut-secondary); } .ut-avd-aval { grid-column: 3; text-align: right; font: 800 16px var(--ut-font-display); color: var(--ut-ink); } /* two bars: each team's fill = its raw rating out of 100 (fills from its own side toward the centre), so the bar length matches the % label. */ .ut-avd-tracks { grid-column: 1 / -1; display: flex; gap: 3px; height: 7px; } .ut-avd-half { flex: 1; display: flex; background: var(--ut-track); border-radius: 4px; overflow: hidden; } .ut-avd-half.is-home { justify-content: flex-start; } .ut-avd-half.is-away { justify-content: flex-end; } .ut-avd-half .ut-avd-fill { height: 100%; border-radius: 4px; }.ut-avd-half.is-away .ut-avd-fill { background: var(--ut-away-slate); } .ut-avd-gauge-fill.is-away { background: var(--ut-away-slate); } /* MP-3.2: two independent gauges per metric against a 50 = league-average mark. The .ut-avd-teams / .ut-avd-stat / .ut-avd-tracks / .ut-avd-half rules above are no longer emitted; they are kept for one release alongside the retired scope toggle (MP-3.1) so a revert is a template change only. */ /* MP-3.3: one line per tab when the window reaches into last season. Sits where the retired scope control used to, so no gap is left behind. */ .ut-scope-note { font: 500 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; padding: 4px 16px; } .ut-avd-scale { font: 500 12px var(--ut-font-body); color: var(--ut-muted); } .ut-avd-metric { display: flex; flex-direction: column; gap: 6px; } .ut-avd-metric-lbl { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); } .ut-avd-gauge-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; align-items: center; column-gap: 8px; } .ut-avd-gauge-name { font: 500 13px var(--ut-font-body); color: var(--ut-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ut-avd-gauge { position: relative; height: 7px; border-radius: 4px; background: var(--ut-track); overflow: hidden; } .ut-avd-gauge-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; } /* The league-average mark. Sits above the fill so it stays readable either side. */ /* Owner 2026-08-24: the mark was ink-on-navy for the home row once its fill passed 50% — a dark line on a near-black bar, invisible. Static white would just move the problem: this same mark also sits on the plain light track when a value is under 50%, where white barely shows either. mix-blend-mode inverts against whatever is actually underneath — dark track, dark navy fill, or the lighter away fill — so one rule stays visible in every case instead of a per-side colour needing its own exception. */ .ut-avd-gauge-mid { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--kl-on-dark); mix-blend-mode: difference; opacity: 0.7; } .ut-avd-gauge-val { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; } .ut-avd-notes { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--ut-divider); } .ut-forma-nodata { font: 400 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 8px; } /* Bare .home/.away are functional markers (CLAUDE.md §4.18) — neutralise only colour here. Do NOT reset font-weight: on .ut-forma-team-name that pulls the heading down to the sheet's 400 reset base (an unloaded Red Hat Display face → synthesised thin text) instead of its own 700. */ .ut-forma-team-name.home, .ut-forma-team-name.away { color: inherit; } /* H2H (Međusobni susreti) */ /* Međusobni susreti (H2H) — rebuilt from reference/mobile/3c.html */ .ut-h2h-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ut-h2h-sub { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); } .ut-h2h-wdl { display: flex; flex-direction: column; gap: 6px; } .ut-h2h-wdl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ut-h2h-wdl-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .ut-h2h-wdl-team.is-right { justify-content: flex-end; } .ut-h2h-wdl-team-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-h2h-wdl-labels { display: flex; justify-content: space-between; } .ut-h2h-wdl-labels span { font: 600 12px var(--ut-font-body); } .ut-h2h-wdl-labels .is-home { color: var(--ut-ink); } .ut-h2h-wdl-labels .is-draw { color: var(--ut-muted-2); } .ut-h2h-wdl-labels .is-away { color: var(--ut-secondary); } .ut-h2h-wdl-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--ut-r-bar); overflow: hidden; } .ut-h2h-wdl-bar span { display: block; }.ut-h2h-wdl-bar .is-draw { background: var(--ut-bar-empty); } .ut-h2h-wdl-bar .is-away { background: var(--kl-navy-text-2); } .ut-h2h-summary-pills { display: flex; gap: 7px; flex-wrap: wrap; } .ut-h2h-summary-pill { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: var(--ut-r-pill); padding: 5px 11px; white-space: nowrap; } .ut-h2h-summary-pill b { font-weight: 800; color: var(--ut-ink); } /* Same pills in the Forma block, one team at a time — they follow the venue line, which has no bottom margin of its own. */ .ut-forma-summary-pills { margin-top: var(--kl-sp-8, 8px); } .ut-h2h-venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ut-h2h-venue-card { border: 1px solid var(--ut-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .ut-h2h-venue-label { font: 400 11px var(--ut-font-body); color: var(--ut-secondary); } .ut-h2h-venue-wdl { font: 800 14px var(--ut-font-display); color: var(--ut-ink); } /* No meetings at this venue — a sentence, never a 0W 0D 0L that would state a record the teams don't have. */ .ut-h2h-venue-wdl.is-none { font: 400 12px var(--ut-font-body); color: var(--ut-muted); } .ut-h2h-lines { display: flex; flex-direction: column; gap: 8px; } .ut-h2h-top-scoreline, .ut-h2h-last { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); margin: 0; } /* MP-4.6: the older meetings, behind the same
disclosure the red-card chart uses — one collapse pattern on this page. */ /* Owner 2026-08-24: a real button, not the
accordion the red-card chart and shooters list use — clicking it appends the next batch of rows in place instead of opening a separate collapsed panel. The page script (utakmica.php) moves this same element to the end of .ut-subblock after each reveal, so it always sits directly under the newest row. */ /* Parent-qualified (0,2,0), same fix as .ut-scope-seg .ut-scope-seg-btn above: `.ut-page button { font: inherit }` (0,1,1) otherwise beats a bare .ut-h2h-more-btn (0,1,0) and there's no ancestor font to inherit, so the button fell back to the browser default and read as unstyled. Stays valid after the page script moves this element — it's always still a child of .ut-subblock (append moves the node, not its parent relationship). */ .ut-subblock .ut-h2h-more-btn { display: block; width: 100%; border: 1px solid var(--ut-border); border-radius: 10px; padding: 10px 14px; background: transparent; font: 600 13px var(--ut-font-body); color: var(--ut-secondary); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ut-subblock .ut-h2h-more-btn:active { color: var(--ut-ink); background: var(--ut-pill-bg); } .ut-h2h-top-scoreline b { font-weight: 800; color: var(--ut-ink); } /* Shared match-row component: the H2H "Posljednji susreti" list AND each club's last-5 list under its form row render with these classes. */ .ut-h2h-match-list { display: flex; flex-direction: column; } .ut-h2h-match-row { display: grid; grid-template-columns: 20% 1fr 20%; align-items: center; gap: 4px; padding: 9px 0; border-top: 1px solid var(--ut-divider); } .ut-h2h-match-date { display: flex; flex-direction: column; } .ut-h2h-match-date b { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); } .ut-h2h-match-league { font: 400 10px var(--ut-font-body); color: var(--ut-faint-2); } .ut-h2h-match-teams { display: flex; align-items: center; gap: 9px; justify-content: center; } .ut-h2h-match-abbr { font: 700 13px var(--ut-font-body); color: var(--ut-muted-2); width: 34px; } .ut-h2h-match-abbr.right { text-align: right; } .ut-h2h-match-abbr.is-win { font-weight: 800; color: var(--ut-ink); } .ut-h2h-match-abbr.is-draw { color: var(--ut-secondary); } .ut-h2h-match-score { font: 800 15px var(--ut-font-display); color: var(--ut-ink); background: var(--ut-pill-bg); border-radius: var(--ut-r-badge); padding: 3px 9px; } .ut-h2h-match-score .is-dim { color: var(--ut-muted); } .ut-h2h-match-pills { display: flex; gap: 3px; flex-direction: column; align-items: flex-end; } .ut-h2h-mpill { display: inline-flex; align-items: center; gap: 3px; font: 600 12px var(--ut-font-body); border-radius: 5px; padding: 2px 6px; white-space: nowrap; width: fit-content; } /* Posljednje utakmice — bet-centar-style card: the two clubs stacked with full names + crests, score stacked, date/league on the left (owner). Winner name + score dark, loser dimmed. */ .ut-forma-lm-list { display: flex; flex-direction: column; } .ut-forma-lm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ut-divider); } .ut-forma-lm-date { display: flex; flex-direction: column; gap: 1px; min-width: 58px; } .ut-forma-lm-date b { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); } .ut-forma-lm-league { font: 400 10px var(--ut-font-body); color: var(--ut-faint-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; } .ut-forma-lm-teams { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ut-forma-lm-team { display: flex; align-items: center; gap: 7px; min-width: 0; font: 600 13px var(--ut-font-body); color: var(--ut-muted-2); } .ut-forma-lm-team.is-win { font-weight: 800; color: var(--ut-ink); } .ut-forma-lm-team.is-draw { color: var(--ut-secondary); } .ut-forma-lm-team img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; } .ut-forma-lm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-forma-lm-score { display: flex; flex-direction: column; gap: 5px; font: 800 14px var(--ut-font-display); color: var(--ut-ink); text-align: center; font-variant-numeric: tabular-nums; } .ut-forma-lm-score b { line-height: 1.15; } .ut-forma-lm-score .is-dim { color: var(--ut-muted); } .ut-h2h-mpill .ut-ico { width: 11px; height: 11px; flex-shrink: 0; color: inherit; stroke: currentColor; } .ut-h2h-mpill .ut-ico * { color: inherit; } .ut-h2h-mpill.no { color: var(--ut-muted-2); background: var(--ut-pill-bg); }.ut-forma-ah-team + .ut-forma-ah-team { border-top: 1px solid var(--ut-divider); padding-top: 14px; } .ut-forma-ah-teamline { display: flex; align-items: center; gap: 8px; } .ut-forma-ah-name { font: 600 14px var(--ut-font-body); color: var(--ut-ink); } .ut-forma-ah-meta { font: 400 13px var(--ut-font-body); color: var(--ut-muted); }.ut-forma-ah-row { display: grid; grid-template-columns: 80px 1fr 84px; align-items: center; gap: 10px; } .ut-forma-ah-lbl { font: 500 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-forma-ah-bar { height: 8px; border-radius: var(--ut-r-bar); background: var(--ut-track); overflow: hidden; } .ut-forma-ah-fill { display: block; height: 100%; border-radius: var(--ut-r-bar); background: var(--ut-navy); } .ut-forma-ah-team.is-away .ut-forma-ah-fill { background: var(--kl-navy-text-2); } .ut-forma-ah-pct { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; } .ut-forma-ah-pct b { font: 800 13px var(--ut-font-display); color: var(--ut-ink); } /* ============================================================================ 3b — SPECIJALI (rebuilt from reference/mobile/3b.html) ============================================================================ */ /* grey signal pill */ .ut-spec-signal-card { display: flex; align-items: center; gap: 9px; background: var(--ut-pill-bg); border-radius: var(--ut-r-chip); padding: 8px; } /* Owner 2026-08-24: bare, matching every other sentence dot on this page — the old warning/neutral colour split was arbitrary (avg >= 3.5) with no real baseline behind it. The rebuilt signal states its own comparison in words ("iznad prosjeka lige" / "u granicama prosjeka lige"), so the dot has nothing left to add. */ .ut-spec-signal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ut-muted-2); }.ut-spec-signal-text { font: 400 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.4; } /* mirrored per-period bar chart */ .ut-spec-mirror-card { border: 1px solid var(--ut-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 7px; } .ut-spec-mirror-head { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; margin-bottom: 3px; } .ut-spec-mirror-side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .ut-spec-mirror-side.is-right { justify-content: flex-end; } .ut-spec-mirror-team { font: 600 13px var(--ut-font-body); color: var(--ut-ink); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ut-spec-mirror-ct { font: 500 13px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; } .ut-spec-mirror-row { display: grid; grid-template-columns: 14px 1fr 44px 1fr 14px; align-items: center; gap: 6px; } .ut-spec-mirror-count { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); } .ut-spec-mirror-count:first-child { text-align: right; } .ut-spec-mirror-count:last-child { text-align: right; } .ut-spec-mirror-count.is-peak { font-weight: 700; color: var(--ut-warning); } .ut-spec-mirror-period { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); text-align: center; } .ut-spec-mirror-track { height: 8px; display: flex; } .ut-spec-mirror-track.is-home { justify-content: flex-end; } .ut-spec-mirror-bar { height: 8px; } .ut-spec-mirror-bar.is-home { background: var(--ut-navy); border-radius: 4px 0 0 4px; } .ut-spec-mirror-bar.is-away { background: var(--ut-navy-soft); border-radius: 0 4px 4px 0; }.ut-spec-cards-note { font: 500 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; } /* red-cards expander */ .ut-spec-red-cards { border: 1px solid var(--ut-border); border-radius: 10px; } .ut-spec-red-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 14px; cursor: pointer; list-style: none; } .ut-spec-red-toggle::-webkit-details-marker { display: none; } .ut-spec-red-toggle::before { content: "▸"; color: var(--ut-secondary); font-size: 11px; } .ut-spec-red-cards[open] .ut-spec-red-toggle::before { content: "▾"; } .ut-spec-red-title { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-spec-red-count { font: 500 12px var(--ut-font-body); color: var(--ut-faint); } .ut-spec-red-body { padding: 4px 14px 14px; } .ut-spec-red-body .ut-spec-mirror-card { border: 0; border-radius: 0; padding: 0; }.ut-spec-cards-team { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; } .ut-spec-cards-team-header { display: flex; align-items: center; justify-content: space-between; } .ut-spec-cards-team-name { font: 600 13px var(--ut-font-body); color: var(--ut-ink); } .ut-spec-cards-total { font: 700 13px var(--ut-font-display); color: var(--ut-ink); display: inline-flex; align-items: center; gap: 5px; } .ut-spec-rc { width: 10px; height: 13px; border-radius: 2px; background: var(--ut-danger); display: inline-block; } .ut-spec-cards-chart { display: flex; flex-direction: column; gap: 6px; } .ut-spec-cards-row { display: grid; grid-template-columns: 44px 1fr 14px; align-items: center; gap: 8px; } .ut-spec-cards-label { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); } .ut-spec-cards-track { height: 8px; border-radius: 4px; background: var(--ut-track); overflow: hidden; } .ut-spec-cards-bar { height: 100%; border-radius: 4px; background: var(--ut-navy); }.ut-spec-cards-count { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); text-align: right; } /* card-risk players */ .ut-spec-foul-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ut-spec-foul-title { margin: 0; }.ut-spec-foul-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Match referee row at the bottom of Kartoni. */ .ut-spec-referee { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ut-divider); } .ut-spec-referee svg { color: var(--ut-faint); flex-shrink: 0; } .ut-spec-referee-label { font: 600 11px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.04em; text-transform: uppercase; } .ut-spec-referee-name { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font: 700 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; } .ut-spec-referee-country { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); } .ut-spec-foul-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ut-spec-foul-team { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; } /* Owner 2026-08-24: two rows — name (+ sample count) on top, the fouls/cards numbers below — the single-line layout didn't fit a real name plus both numbers. .ut-spec-foul-row-top carries what used to be the whole row: still a plain flex row with name on the left, count on the right. */ .ut-spec-foul-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; } .ut-spec-foul-row.is-risk { background: var(--ut-warning-tint); } .ut-spec-foul-row.is-top { background: var(--ut-success-tint); } .ut-spec-foul-row-top { display: flex; align-items: center; gap: 6px; } .ut-spec-foul-pos { font: 700 9px var(--ut-font-body); color: var(--ut-muted); background: var(--ut-pill-bg); border-radius: 4px; padding: 2px 4px; flex-shrink: 0; } .ut-spec-foul-row.is-risk .ut-spec-foul-pos, .ut-spec-foul-row.is-top .ut-spec-foul-pos { background: var(--kl-surface); border: 1px solid var(--ut-border); } .ut-spec-foul-name { font: 600 12px var(--ut-font-body); color: var(--ut-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-spec-foul-row.is-risk .ut-spec-foul-name, .ut-spec-foul-row.is-top .ut-spec-foul-name { color: var(--ut-ink); } .ut-spec-foul-stat { font: 600 12px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; } /* MP-4.1: the sample behind each rate, quieter than the rate itself. */ .ut-spec-foul-n { flex-shrink: 0; font: 500 11px var(--ut-font-body); color: var(--ut-muted-3); } .ut-spec-foul-card { font: 500 11px var(--ut-font-body); color: var(--ut-muted-2); white-space: nowrap; } .ut-spec-foul-row.is-risk .ut-spec-foul-stat, .ut-spec-foul-row.is-risk .ut-spec-foul-card { color: var(--ut-warning); } .ut-spec-foul-row.is-top .ut-spec-foul-stat { color: var(--ut-success); } /* korneri */ .ut-spec-corn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ut-spec-corn-card { border: 1px solid var(--ut-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; } .ut-spec-corn-card-team { font: 600 13px var(--ut-font-body); color: var(--ut-ink); }.ut-spec-corn-card-nums { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; } .ut-spec-corn-card-nums b { font: 800 17px var(--ut-font-display); color: var(--ut-ink); } .ut-spec-corn-card-nums b.is-muted { color: var(--ut-muted-2); } .ut-spec-corn-card-nums i { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); font-style: normal; }.ut-spec-corn-ou-row { display: grid; grid-template-columns: 52px 1fr 84px; align-items: center; gap: 8px; } .ut-spec-corn-ou-thr { font: 700 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-spec-corn-ou-pct { font: 800 13px var(--ut-font-display); color: var(--ut-ink); text-align: right; white-space: nowrap; } /* goalkeeper / shots — single bordered card split into two centered cells */ .ut-spec-gk-grid, .ut-spec-shots-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; } .ut-spec-gk-card, .ut-spec-shots-cell { padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .ut-spec-gk-card + .ut-spec-gk-card, .ut-spec-shots-cell + .ut-spec-shots-cell { border-left: 1px solid var(--ut-border); } .ut-spec-gk-team { font: 600 13px var(--ut-font-body); color: var(--ut-ink); } .ut-spec-gk-saves, .ut-spec-shots-num { font: 800 24px var(--ut-font-display); color: var(--ut-ink); } .ut-spec-gk-label, .ut-spec-shots-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-muted); } .ut-spec-gk-shots { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); } .ut-spec-shots-sot { font: 500 12px var(--ut-font-body); color: var(--ut-success); } .ut-spec-yc { font: 700 12px var(--ut-font-body); color: var(--ut-warning); } /* Tier word (Korneri "Kombinovano" + Azijski Hendikep lines): Visoko/Umjereno/ Nisko, coloured text, no background — reverted 2026-08-24 to the word form the 2026-07-21 owner-reviewed redesign spec'd. A ▲/=/▼ icon chip briefly replaced it during a later code port with no owner sign-off on record. Plain colour (not a tinted .ut-pill background) keeps it compact enough to sit beside a percentage in a narrow row. */ .ut-spec-tier { font: 700 11px var(--ut-font-body); white-space: nowrap; vertical-align: middle; } .ut-spec-tier.is-green { color: var(--ut-success); } .ut-spec-tier.is-amber { color: var(--ut-warning); } .ut-spec-tier.is-red { color: var(--ut-danger); } /* Positive dot / bar fill. ut-signal-dot / ut-dot7 dropped from this group 2026-08-24: three unrelated colour conventions were live across the sentence dots on this page (green="nothing unusual" on one verdict, green="strong signal" on the next, green="good for the team named" on a third), none of them documented anywhere a reader could see. Every sentence dot on Golovi, Specijali, Forma and Ključni signali/Serije u nizu is bare now — the words already carry the direction, same principle as the MP-2.7 flag-dot fix. */ .ut-bar-fill.is-green, .ut-forma-form-sq.is-w { background: var(--ut-success); } .ut-spec-placeholder { border: 1px dashed var(--ut-border-2); border-radius: 12px; padding: 16px; text-align: center; } .ut-spec-placeholder-title { font: 600 13px var(--ut-font-body); color: var(--ut-secondary); } /* ============================================================================ LIVE/POST shared — band headings + stat rows (4b/4d/4e). live-stat-* is also emitted by the live-poll JS in utakmica-new.php, so one rule styles both. ============================================================================ */ .ut-band > h2 { font: 700 20px var(--ut-font-display); color: var(--ut-ink); margin: 0 0 8px; } .section-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .live-updated-at { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); } .loading-placeholder { font: 500 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 8px; } .live-stat-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 8px; row-gap: 10px; } .live-stat-home-val { grid-column: 1; font: 800 15px var(--ut-font-display); color: var(--ut-ink); } .live-stat-label { grid-column: 2; text-align: center; font: 500 13px var(--ut-font-body); color: var(--ut-secondary); } .live-stat-total { color: var(--ut-faint); font-weight: 600; } .live-stat-away-val { grid-column: 3; text-align: right; font: 800 15px var(--ut-font-display); color: var(--ut-ink); } /* The track carries a light grey ground (owner 2026-08-25). Both bars are sized as a share of their sum, so a stat that is 0 on both sides — and a row with no data at all — left the track transparent and the row read as a missing element rather than as a real zero. */ .live-stat-tracks { grid-column: 1 / -1; display: flex; gap: 2px; height: 7px; border-radius: 4px; overflow: hidden; background: var(--ut-bar-empty); }.live-stat-bar-away { background: var(--ut-navy-soft); } /* Statistike uživo (design 4b): airy 18px rhythm between the header, each stat block, the "Ostale statistike" row, and the legend. */ #live-stats { gap: 18px; } #live-stats-bars { display: flex; flex-direction: column; gap: 16px; } /* column-reverse → the "Ostale statistike" toggle sits BELOW the expanded rows, so it collapses from the bottom (mobile only; desktop renders the rows inline). */ .live-stats-more { margin: 0; display: flex; flex-direction: column-reverse; gap: 18px; } /* "Ostale statistike" collapsed row (design 4b): bordered pill, bold label + a lighter preview of the collapsed stat names, with a caret. */ .live-stats-more summary { list-style: none; display: flex; align-items: center; gap: 6px; border: 1px solid var(--ut-border); border-radius: 10px; padding: 10px 14px; cursor: pointer; } .live-stats-more summary::-webkit-details-marker { display: none; } .live-stats-more summary::before { content: "▸"; color: var(--ut-secondary); font: 600 12px var(--ut-font-body); } .live-stats-more[open] summary::before { content: "▾"; } /* Expanded secondary rows need the same 18px rhythm as the primary block. The 18px separation from the primary block / toggle comes from the container gap (#live-stats-bars) and the details' own gap — no extra padding here. */ .live-stats-more-body { display: flex; flex-direction: column; gap: 18px; } .live-stats-more-lbl { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); } .live-stats-more-sub { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-stats-legend { display: flex; gap: 16px; } .live-stats-legend span { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--ut-font-body); color: var(--ut-secondary); } .live-stats-legend-sq { width: 10px; height: 10px; border-radius: 3px; }.live-stats-legend-sq.is-away { background: var(--ut-navy-soft); } /* Sažetak — Najbolji igrači player cards + "vidi sve" links (4d) */ .psz-link { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ut-border); border-radius: 10px; padding: 10px 14px; margin-top: 2px; text-decoration: none; background: transparent; width: 100%; cursor: pointer; font: 600 12px var(--ut-font-body); color: var(--ut-ink); } .psz-link span { font: 700 13px var(--ut-font-body); color: var(--ut-muted-2); } .psz-recap-empty { font: 400 13px var(--ut-font-body); color: var(--ut-muted); line-height: 1.6; margin: 0; } .psz-recap { font: 400 13px var(--ut-font-body); color: var(--ut-body); line-height: 1.65; margin: 0; } .psz-recap + .psz-recap { margin-top: 8px; }.psz-player { border: 1px solid var(--ut-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .psz-player-top { display: flex; align-items: flex-start; gap: 12px; } .psz-player-id { flex: 1; min-width: 0; } .psz-player-name { font: 700 13px var(--ut-font-display); color: var(--ut-ink); } /* Muted meta text — one rule instead of eleven identical copies */ .ut-teamline .ut-tmeta, .ut-gol-cs-pct small, .ut-gol-et-lbl, .ut-kv-count, .ut-forma-crossref-sub, .ut-spec-foul-hint, .ut-spec-foul-empty, .ut-spec-corn-card-team .ut-tmeta, .ut-spec-corn-card-cap, .ut-spec-placeholder-body, .psz-player-meta { color: var(--ut-muted-2); font: 500 12px var(--ut-font-body); } /* Owner 2026-08-24: the two numbers in the Korneri caption stand out from the muted label words around them. */ .ut-spec-corn-card-cap b { color: var(--ut-ink); font-weight: 700; } .psz-player-rating { font: 800 13px var(--ut-font-display); color: var(--kl-on-dark); background: var(--ut-navy); border-radius: 7px; padding: 3px 7px; } .psz-player-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; } .psz-chip { font: 600 10px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-track); border-radius: 5px; padding: 2px 6px; }.psz-chip.is-assist { color: var(--ut-primary); background: #EAF2FD; } /* ============================================================================ 4e — POST STATISTIKE (post-match-extras): market results + grades + verdict ============================================================================ */ .pme-stats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .pme-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; } .pme-legend-item { display: inline-flex; align-items: center; gap: 5px; font: 500 10px var(--ut-font-body); color: var(--ut-muted); } .pme-legend-sq { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } /* Home-side segment on every two-way bar */ .ut-stack .is-home, .ut-2side-bar .is-fill, .ut-avd-dot.is-home, .ut-avd-gauge-fill.is-home, .ut-avd-half.is-home .ut-avd-fill, .ut-h2h-wdl-bar .is-home, .live-stat-bar-home, .live-stats-legend-sq.is-home, .pme-legend-sq.is-home { background: var(--ut-navy); } .pme-legend-sq.is-away { background: var(--ut-navy-soft); } .pme-recap { display: flex; flex-direction: column; } .pme-recap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ut-divider); font: 500 12px var(--ut-font-body); color: var(--ut-body); } .pme-recap-row:last-child { border-bottom: none; } .pme-score { font: 800 14px var(--ut-font-display); color: var(--ut-ink); margin-left: 6px; } .pme-cards { display: inline-flex; align-items: center; gap: 4px; } .pme-cardsq { display: inline-block; width: 9px; height: 12px; border-radius: 2px; } .pme-cardsq.is-y { background: var(--ut-card-yellow); } /* Negative dot / bar fill. ut-signal-dot / ut-dot7 dropped 2026-08-24 (see the is-green group above) — no sentence dot on this page carries colour any more. */ .ut-verdict-why.is-red .ut-dot6, .ut-forma-form-sq.is-l, .ut-spec-mirror-bar.is-red, .ut-spec-cards-bar.is-red, .pme-cardsq.is-r { background: var(--ut-danger); } /* Grade rows (design 4e): bordered pill rows with a round tinted verdict badge. */ .pme-grades { display: flex; flex-direction: column; gap: 6px; } .pme-grade-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ut-border); border-radius: 10px; padding: 9px 12px; } .pme-grade-badge { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--ut-font-body); flex-shrink: 0; }.pme-grade-badge.is-no { color: var(--ut-danger); background: var(--ut-danger-tint); } .pme-grade-badge .ut-ico { width: 11px; height: 11px; flex-shrink: 0; } .pme-grade-badge.is-yes .ut-ico { stroke: var(--ut-success); } .pme-grade-badge.is-no .ut-ico { stroke: var(--ut-danger); } /* Settlement note under the recap when a cup tie went past 90 minutes. */ .pme-note { font: 400 12px var(--ut-font-body); color: var(--ut-muted); line-height: 1.5; margin: 8px 0 0; } .pme-recap-res { display: inline-flex; align-items: center; gap: 5px; } .pme-recap-res.is-hit { color: var(--ut-success); } .pme-recap-res.is-miss { color: var(--ut-danger); } .pme-recap-res .ut-ico { width: 13px; height: 13px; flex-shrink: 0; } .pme-recap-res.is-hit .ut-ico { stroke: var(--ut-success); } .pme-recap-res.is-miss .ut-ico { stroke: var(--ut-danger); } .pme-grade-label { flex: 1; min-width: 0; font: 500 12px var(--ut-font-body); color: var(--ut-ink); } .pme-grade-val { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); } /* Empty stat row (design 4e: "Crveni kartoni –") — both tracks neutral grey. */ .live-stat-bar-home.is-empty, .live-stat-bar-away.is-empty { background: var(--ut-bar-empty); } /* Verdict card (design 4e): bordered card + round tinted badge. */ .post-verdict-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ut-border); border-radius: 14px; padding: 14px 16px; } .post-verdict-icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--ut-font-body); flex-shrink: 0; color: var(--ut-secondary); background: var(--ut-track); }.post-verdict-card.is-amber .post-verdict-icon { color: var(--ut-warning); background: var(--ut-warning-tint); } .post-verdict-title { font: 700 13px var(--ut-font-display); color: var(--ut-ink); } .post-verdict-detail { font: 500 12px var(--ut-font-body); color: var(--ut-muted); margin-top: 2px; } /* ============================================================================ 4f — IGRAČI (player-ratings): player cards + expander ============================================================================ */ .pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; } .pr-grid--rest { margin-top: 10px; } .pr-col { min-width: 0; } /* layout comes from .ut-subblock */ .pr-card { border: 1px solid var(--ut-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .pr-card.is-top { background: var(--ut-surface-alt); } .pr-card-top { display: flex; align-items: center; gap: 8px; } .pr-card-id { flex: 1; min-width: 0; } .pr-card-name { font: 700 12px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-card-meta { font: 500 10px var(--ut-font-body); color: var(--ut-muted-2); } .pr-rating { font: 800 13px var(--ut-font-display); color: var(--ut-ink); background: var(--ut-track); border-radius: 7px; padding: 3px 7px; flex-shrink: 0; } .pr-rating.is-top { color: var(--kl-on-dark); background: var(--ut-navy); } .pr-card-chips { display: flex; flex-wrap: wrap; gap: 3px; } .pr-chip { display: inline-flex; align-items: center; gap: 3px; font: 600 10px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-track); border-radius: 5px; padding: 2px 5px; } /* Positive pill / chip */ .ut-pill.is-green, .ut-odg-chip.is-green, .ut-forma-trend.is-rising, .ut-forma-trend.is-green, .ut-h2h-mpill.yes, .psz-chip.is-goal, .pme-grade-badge.is-yes, .post-verdict-card.is-green .post-verdict-icon, .pr-chip.is-goal { background: var(--ut-success-tint); color: var(--ut-success); } .pr-chip.is-assist { color: var(--ut-primary); background: #EAF2FD; } .pr-yc { width: 6px; height: 9px; border-radius: 1.5px; background: var(--ut-card-yellow); display: inline-block; } /* Load-more: extras hidden while collapsed; button toggles + chevron flips. */ /* Generic: a collapsed expander container hides its .is-extra children (player cards in #pr-grid, secondary stat rows in .pst-rows). */ .pr-grid--collapsed .is-extra { display: none; } /* Stats rows container keeps the band's vertical rhythm — shared by the Meč list and each half pane's own row list. */ .pst-rows { display: flex; flex-direction: column; gap: 16px; } button.pr-more-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; margin-top: 10px; border: 1px solid var(--ut-border); border-radius: 12px; padding: 11px 14px; background: transparent; cursor: pointer; font: 600 12px var(--ut-font-body); color: var(--ut-ink); } .pr-more-main { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .pr-more-sub { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-more-chev { width: 15px; height: 15px; color: var(--ut-secondary); transition: transform 0.2s; flex-shrink: 0; } button.pr-more-btn.is-open .pr-more-chev { transform: rotate(180deg); } /* ============================================================================ 4c/4g — TOK UTAKMICE / DOGAĐAJI (match-data timeline); also the live events JS ============================================================================ */ /* Live "Uživo" head (design 4a): heading + green live dot on the left, the Izmjene/Kartoni checkbox filters on the right. */ .mtl-live-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .mtl-live-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ut-success); animation: ut-pulse 1.6s ease-in-out infinite; } .mtl-filters { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mtl-filter { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: 600 12px var(--ut-font-body); color: var(--ut-ink); } .mtl-filter-cb { position: absolute; width: 0; height: 0; opacity: 0; } .mtl-filter-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ut-border-2); background: var(--kl-surface); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .mtl-filter-cb:checked + .mtl-filter-box { background: var(--ut-navy); border-color: var(--ut-navy); } .mtl-filter-cb:checked + .mtl-filter-box::after { content: "✓"; color: var(--kl-on-dark); font: 700 10px var(--ut-font-body); line-height: 1; } .mtl-filter-cb:focus-visible + .mtl-filter-box { outline: 2px solid var(--ut-primary); outline-offset: 1px; } /* Filter toggles (design 4a): hide subst / card rows when unchecked. */ .mtl-section.hide-goal .mtl-row.is-goal { display: none; } .mtl-section.hide-subst .mtl-row.is-subst { display: none; } .mtl-section.hide-card .mtl-row.is-card { display: none; } .mtl { display: flex; flex-direction: column; gap: 14px; } .mtl-group { display: flex; flex-direction: column; } .mtl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ut-surface-alt); border-radius: 8px; padding: 7px 12px; margin-bottom: 4px; } .mtl-head-label { font: 600 10px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; } .mtl-head-score { font: 800 12px var(--ut-font-display); color: var(--ut-ink); } /* Flat live/events rows (4a/4c): flex + gap like the handoff. The player grows and the team shrinks/truncates first, so a long team name never squeezes the player into an ugly wrap — rows stay single-line. */ .mtl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ut-divider); } .mtl-row:not(.mtl-row--c) .mtl-player, .mtl-row:not(.mtl-row--c) .mtl-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtl-row:last-child { border-bottom: none; } .mtl-min { flex: none; width: 30px; font: 700 12px var(--ut-font-body); color: var(--ut-ink); } .mtl-icon { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font: 700 9px var(--ut-font-body); border-radius: 4px; } /* Scored goals show the standard ball SVG (img inside the icon slot). */ .mtl-icon.is-goal { width: 16px; height: 16px; background: none; border-radius: 0; } .mtl-icon.is-goal img { width: 100%; height: 100%; display: block; } /* Own goals: same ball, red-tinted copy (nogomet-crveni.svg). */ .mtl-icon.is-owngoal { width: 16px; height: 16px; background: none; border-radius: 0; } .mtl-icon.is-owngoal img { width: 100%; height: 100%; display: block; } .mtl-icon.is-yellow { background: var(--ut-card-yellow); width: 11px; height: 14px; border-radius: 2px; } .mtl-icon.is-red { background: var(--ut-danger); width: 11px; height: 14px; border-radius: 2px; } .mtl-icon.is-sub { background: var(--ut-track); color: var(--ut-secondary); border-radius: 50%; width: 16px; height: 16px; font-size: 14px; line-height: 1; display: block; text-align: center; } .mtl-icon.is-miss { color: var(--ut-muted-2); font-size: 13px; } .mtl-icon.is-var { background: var(--ut-pill-bg); color: var(--ut-secondary); font: 700 7px var(--ut-font-body); width: auto; padding: 2px 4px; } .mtl-icon.is-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ut-faint-2); } .mtl-player { flex: 1 1 auto; font: 600 13px var(--ut-font-body); color: var(--ut-ink); min-width: 0; } .mtl-player.is-goal { font-weight: 700; } .mtl-detail { font: 500 12px var(--ut-font-body); color: var(--ut-muted); } /* Događaji (4c): name on top, detail (assist / izmjena / razlog kartona) below. */ .mtl-team { flex: 0 1 auto; max-width: 45%; font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); text-align: right; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Centered timeline (post 4g): minute axis in the middle, home left / away right. */ .mtl-row--c { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 8px 0; border-bottom: none; } .mtl-c-side { display: flex; align-items: center; gap: 8px; min-width: 0; } .mtl-c-home { justify-content: flex-end; text-align: right; } .mtl-c-away { justify-content: flex-start; text-align: left; } .mtl-c-side .mtl-icon { flex-shrink: 0; } .mtl-c-side .mtl-player { min-width: 0; } .mtl-c-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mtl-row--c .mtl-min { min-width: 30px; text-align: center; } /* ============================================================================ 4a/4b/4c — LIVE (signals + momentum; live-stat & mtl already styled above) ============================================================================ */ #live-signals-list { display: flex; flex-direction: column; margin-top: 6px; } .live-signal-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ut-divider); } #live-signals-list .live-signal-row:last-child { border-bottom: none; } .live-signal-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--ut-warning); } .live-signal-dot.is-blue { background: var(--ut-primary); } /* Caution dot / bar fill. ut-signal-dot / ut-dot7 dropped 2026-08-24 (see the is-green group above) — no sentence dot on this page carries colour any more. */ .ut-bar-fill.is-amber, .ut-verdict-why.is-amber .ut-dot6, .ut-forma-form-sq.is-d, .ut-spec-mirror-bar.is-peak, .live-signal-dot.is-amber { background: var(--ut-warning); } .live-signal-text { font: 500 14px var(--ut-font-body); color: var(--ut-body); line-height: 1.45; }/* Market label opening each signal row. .is-soft is the lighter weight used where the label runs on into the sentence (ODG-da / ODG-ne). */ .live-signal-label { font-weight: 600; color: var(--ut-ink); } .live-signal-label.is-soft { font-weight: 500; } /* Phase separator — only appears once a tie goes past 90 minutes, so the settled 90-minute markets are never confused with what extra time is still deciding. */ .live-signal-group-head { font: 600 11px var(--ut-font-body); color: var(--ut-muted); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 0 2px; } #live-signals-list > .live-signal-group-head:first-child { padding-top: 2px; } /* momentum — vertical mirror bar chart (home up navy, away down slate) */ /* Live section headings use the shared .ut-title component (like every other section); .mom-head only adds the baseline layout for its inline sub-label. */ .mom-head { display: flex; align-items: baseline; gap: 8px; } .mom-sub { font: 400 12px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0; text-transform: none; } .mom-card { margin-top: 10px; } .mom-team-top, .mom-team-bot { font: 600 12px var(--ut-font-body); color: var(--ut-secondary); } .mom-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; } .mom-bars-top { align-items: flex-end; } .mom-bars-bottom { align-items: flex-start; margin-top: 2px; } .mom-bar { flex: 1; background: var(--ut-navy); border-radius: 3px 3px 0 0; min-height: 3px; } .mom-bars-bottom .mom-bar { background: var(--ut-navy-soft); border-radius: 0 0 3px 3px; } .mom-bar.is-empty { background: var(--ut-bar-empty); } .mom-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .mom-timeline { display: flex; gap: 4px; } .mom-timeline span { font: 500 9px var(--ut-font-body); color: var(--ut-muted-2); } /* footapi's curve is drawn one bar per MINUTE across the whole match, so ~90-120 bars share the width the fallback gives to 7. Colour, mirroring and height scale stay the fallback's, so the two charts still read as one component. */ .mom-plot { position: relative; } .mom-bars.is-minutes { gap: 1px; } .mom-bars.is-minutes .mom-bar { border-radius: 1px 1px 0 0; min-height: 2px; } .mom-bars-bottom.is-minutes .mom-bar { border-radius: 0 0 1px 1px; } /* Each half of the plot sits on a wash of its own bar colour, so which side of the line you are reading is legible before you read a single bar. */ .mom-bars-top.is-minutes { background: var(--ut-navy-tint); border-radius: var(--ut-r-bar) var(--ut-r-bar) 0 0; } .mom-bars-bottom.is-minutes { background: var(--ut-navy-soft-tint); border-radius: 0 0 var(--ut-r-bar) var(--ut-r-bar); } /* Minutes the match has not reached: the axis is the full 90 from kickoff, and an unplayed minute must not read as a minute nobody attacked in. */ .mom-bar.is-future { background: transparent; min-height: 0; } /* Half-time, there from the first minute so the two halves read as two halves. */ .mom-half { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ut-border); } /* Where the match is right now. */ .mom-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ut-danger); border-radius: 1px; } /* In minute mode the axis drops onto its own full-width line under the bars and each tick is placed at its true position, because a tick that only looks evenly spaced misreads the match — 15' is a fifth of the way into a 75-minute chart, not halfway. */ .mom-foot.is-minutes { display: block; } .mom-timeline.is-minutes { position: relative; display: block; height: 12px; margin-top: 2px; } .mom-timeline.is-minutes span { position: absolute; transform: translateX(-50%); } .mom-timeline.is-minutes span:first-child { transform: none; } .mom-timeline.is-minutes span:last-child { transform: translateX(-100%); } /* live match-timeline filter chips (Izmjene/Kartoni toggles) */ /* ============================================================================ DESKTOP LAYER — screens 3a (pre) / 4a (live) / 4b (post) ---------------------------------------------------------------------------- Mobile ships a single tab-scrolled column; desktop reflows into a 2-col main+rail grid under a full-width nav + header band. The .ut-col-* wrappers are display:contents below the breakpoint so the section DOM order stays byte-identical to the shipped mobile page; where the desktop main/rail split reorders a state (live, post) a per-id `order` inside the max-width query restores the exact mobile sequence. Page background flips to white and the full-bleed mobile bands become bordered cards. ============================================================================ */ /* Column wrappers vanish on mobile — sections flow straight into .ut-sections. Same trick for the live Momentum+Uživo pairing (desktop 4a). */ .ut-col-main, .ut-col-rail, .ut-live-duo { display: contents; } /* Desktop-only section-group headings (mock 3a: "Golovi", "Specijali" …). */ .ut-group-title { display: none; } /* Mobile keeps the shipped section order regardless of the desktop grouping. */ @media (max-width: 1023px) { #live-mec { order: 1; } #live-stats { order: 2; } #live-ekipe { order: 3; } /* Post reading arc (owner 2026-08-06): Sažetak (story + accountability in one band) → numbers → people → play-by-play. */ #post-sazetak { order: 1; } #post-stats { order: 2; } #post-igraci { order: 3; } #post-detalji { order: 4; } } @media (min-width: 1024px) { /* ---- page surface ---- */ .ut-page { background: var(--kl-surface); } /* The match page is a full white page (spec: bg #FFFFFF), not the kl-shell grey "card on canvas" — override global.css body:has(.kl-appbar) so no grey shows beside/below the 1360 content on wide screens. Mobile body is already white; the mobile .ut-page keeps its own grey card-canvas look. */ body:has(.ut-page) { background: var(--kl-surface); } /* ---- centered scoreboard header, all states (screens 3a/4a/4b) ---- */ .ut-mh { padding: 22px 40px 20px; background: var(--ut-surface-alt); border-bottom: 1px solid var(--ut-hairline); } .ut-mh-nav { justify-content: center; } /* desktop: no back/share, just league */ .ut-mh-iconbtn { display: none; } /* desktop uses the top nav for those */ .ut-mh-post-meta { font-size: 12px; } .ut-mh-scoreboard { max-width: 640px; margin: 12px auto 0; column-gap: 24px; row-gap: 0; } .ut-mh-sb-team { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } /* Both teams hug the score for symmetric name→score gaps. The home column is row-reverse (crest sits inside, next to the score); in a reversed main axis the score side IS the main-start, so it packs with flex-START — flex-end would push the name to the far outer edge (the old asymmetry bug). */ .ut-mh-scoreboard .ut-mh-sb-team:first-child { flex-direction: row-reverse; justify-content: flex-start; } .ut-mh-scoreboard .ut-mh-sb-team:last-child { justify-content: flex-start; } .ut-mh-sb-crest { width: 42px; height: 42px; } .ut-mh-sb-name { font-size: 20px; font-weight: 800; } .ut-mh-sb-goals { font-size: 40px; } .ut-mh-sb-kicktime { font-size: 34px; } /* Form pills sit on their own row UNDER the name (their own grid cell since MP-4.8), aligned to the same score-facing edge as the name — home right, away left — not centred. The 12px matches the old in-block gap. */ .ut-mh-sb-form { margin-top: 12px; } .ut-mh-sb-form.is-home { justify-content: flex-end; } .ut-mh-sb-form.is-away { justify-content: flex-start; } /* No section-nav tabs on desktop (owner 2026-07-31): every section renders at once in the 2-column grid, and the group titles ("Golovi", "Specijali"…) label each block, so the tab row is redundant. All three states hide it. */ #ut-tabs-container { display: none; } /* ---- 2-column content grid ---- */ .ut-sections { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; background: var(--kl-surface); padding: 28px 40px 40px; } .ut-col-main { display: flex; flex-direction: column; gap: 36px; min-width: 0; } .ut-col-rail { display: flex; flex-direction: column; gap: 20px; } .ut-col-main > .ut-section, .ut-col-rail > .ut-section { order: 0; scroll-margin-top: 96px; gap: 14px; } /* full-bleed mobile bands → bordered cards on the white desktop surface */ .ut-band { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); padding: 18px 20px; } /* Kvote is its own section (not a .ut-band) — give it the same bordered-card frame on desktop (matches tip-details' "Najbolje kvote" rail card). */ .ut-kvote { border: 1px solid var(--ut-border); border-radius: var(--ut-r-lg); } /* Kvote follows the scroll down the long main column (owner 2026-08-11). The rail has to stretch to the row height first — .ut-sections is align-items: start, so the rail box is otherwise only as tall as its card and a sticky child would have nowhere to travel. 80px clears the kl app bar, which measures 64px at desktop width and is the only sticky chrome here (#sticky-match-header is mobile-only). The max-height keeps a long odds grid scrollable inside its own card instead of running off the bottom of the viewport; short cards get no scrollbar. */ /* The tips invitation (MPO-7) sits outside both columns — span the grid so it reads as a full-width footer rather than a stray card in column one. */ .ut-tips-invite { grid-column: 1 / -1; } .ut-col-rail { align-self: stretch; } .ut-col-rail > #pre-kvote { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; } /* section-group headings */ .ut-group-title { display: block; font: 800 18px var(--ut-font-display); color: var(--ut-ink); } /* "Sve statistike i prognoze →" / "Svi igrači i ocjene →" jump to another TAB; desktop shows every section at once (stats already sit in the rail), so the jump links are redundant here. */ .psz-link { display: none; } /* Owner preference: the main column stays single-column (no 2-up card grids — they left too much empty space). Every section's cards just stack full-width; the rail carries the secondary content. */ /* live main column (screen 4a): Signali → Momentum → Uživo feed, stacked; the redundant centered-timeline section (mobile Događaji tab) is folded away since the compact feed already carries the live events. .ut-live-duo stays display:contents (from the base) so momentum + feed stack in live-mec. */ #live-mec { gap: 24px; } } /* ============================================================================ PLAYER DETAILS — bottom-sheet drawer (mobile) → centered popup (desktop) ---------------------------------------------------------------------------- Opens from a post-match player card. The match line is pre-rendered inline (instant); bio + season form arrive from ajax/player-profile.php. Scoped under .ut-page like everything else, so the reset + tokens apply. ============================================================================ */ /* ── Player drawer (design 13a): identity · role-dependent highlight strip · grouped stat cards. Bottom sheet on mobile, centered popup on desktop. The league-table drawer (#ut-tbl) reuses the shell + handle row + body. ── */ .ut-pd { position: fixed; inset: 0; z-index: 200; display: flex; } .ut-pd[hidden] { display: none; } .ut-pd-backdrop { position: absolute; inset: 0; background: rgba(20, 23, 28, 0.45); opacity: 0; transition: opacity 0.24s cubic-bezier(0.32, 0.72, 0, 1); } .ut-pd.is-open .ut-pd-backdrop { opacity: 1; } .ut-pd-panel { position: relative; margin-top: auto; width: 100%; background: var(--kl-surface); border-radius: 22px 22px 0 0; max-height: calc(100vh - 52px); display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -8px 30px rgba(20, 23, 28, 0.16); } .ut-pd.is-open .ut-pd-panel { transform: translateY(0); } /* handle row (grab handle centred, close absolute right — out of the identity flow) */ .ut-pd-handle-row { position: relative; flex-shrink: 0; display: flex; justify-content: center; padding: 10px 0 2px; } .ut-pd-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--ut-border-2); } .ut-pd-close { position: absolute; top: 6px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--ut-pill-bg); color: var(--ut-secondary); display: flex; align-items: center; justify-content: center; } /* identity block */ .ut-pd-id { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 20px 14px; } .ut-pd-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ut-track); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; } .ut-pd-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .ut-pd-avatar-ph { width: 34px; height: 34px; color: var(--ut-faint-2); margin-bottom: -2px; } .ut-pd-id-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ut-pd-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; } .ut-pd-name { font: 800 19px var(--ut-font-display); color: var(--ut-ink); letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; outline: none; } .ut-pd-num { font: 700 10px var(--ut-font-body); color: var(--ut-secondary); background: var(--ut-pill-bg); border-radius: 5px; padding: 2px 5px; flex-shrink: 0; } .ut-pd-num[hidden] { display: none; } .ut-pd-meta1 { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ut-pd-meta2 { font: 400 11px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ut-pd-meta2:empty { display: none; } .ut-pd-rating { flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; background: var(--ut-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; } .ut-pd-rating-val { font: 800 19px var(--ut-font-display); color: var(--kl-on-dark); line-height: 1; } .ut-pd-rating-lbl { font: 600 8px var(--ut-font-body); color: #7F93AC; letter-spacing: 0.08em; margin-top: 3px; } /* scroll region (strip + groups) */ .ut-pd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); } /* highlight strip */ .ut-pd-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ut-border); border-radius: 14px; margin: 0 20px; overflow: hidden; } .ut-pd-strip-cell { padding: 11px 0; text-align: center; } .ut-pd-strip-cell + .ut-pd-strip-cell { border-left: 1px solid var(--ut-hairline); } .ut-pd-strip-val { font: 800 16px var(--ut-font-display); color: var(--ut-ink); } .ut-pd-strip-val.is-green { color: var(--ut-success); } .ut-pd-strip-lbl { font: 600 8px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.06em; margin-top: 2px; } /* body / stat groups (label sits OUTSIDE the card) */ .ut-pd-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 20px; } .ut-pd-dnp { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); } .ut-pd-grp { display: flex; flex-direction: column; gap: 7px; } .ut-pd-glabel { font: 600 10px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.1em; } .ut-pd-card { border: 1px solid var(--ut-border); border-radius: 14px; overflow: hidden; } .ut-pd-card--pad { padding: 12px; } /* count grid (2-up) */ .ut-pd-cg { display: grid; grid-template-columns: 1fr 1fr; } .ut-pd-cg-cell { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; } .ut-pd-cg-cell.is-bb { border-bottom: 1px solid var(--ut-divider); } .ut-pd-cg-cell.is-bl { border-left: 1px solid var(--ut-divider); } .ut-pd-cg-cell.is-span2 { grid-column: 1 / -1; } .ut-pd-cg-lbl { font: 500 12px var(--ut-font-body); color: var(--ut-secondary); } .ut-pd-cg-val { font: 800 14px var(--ut-font-display); color: var(--ut-ink); } .ut-pd-cg-val span { font-size: 11px; font-weight: 500; color: var(--ut-muted-2); margin-left: 1px; } /* ratio row + bar (only stats with a denominator) */ .ut-pd-ratio--inset { padding: 10px 12px 12px; } .ut-pd-ratio-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .ut-pd-bar { height: 6px; border-radius: 999px; background: var(--ut-track); overflow: hidden; } .ut-pd-bar-fill { height: 100%; border-radius: 999px; background: var(--ut-navy); } /* season summary row */ .ut-pd-season-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; } .ut-pd-sr-badge { width: 26px; height: 26px; border-radius: 8px; background: var(--ut-track); overflow: hidden; flex-shrink: 0; } .ut-pd-sr-badge img { width: 100%; height: 100%; object-fit: contain; } .ut-pd-sr-id { flex: 1; min-width: 0; } .ut-pd-sr-name { font: 700 12px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ut-pd-sr-sub { font: 400 10px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ut-pd-sr-rating { font: 800 14px var(--ut-font-display); color: var(--ut-ink); background: var(--ut-track); border-radius: 7px; padding: 4px 8px; flex-shrink: 0; } /* league-table drawer title (reuses .ut-pd shell) */ .ut-pd-tbl-head { flex-shrink: 0; padding: 2px 20px 12px; } /* Desktop: centered popup instead of the bottom sheet. */ @media (min-width: 1024px) { .ut-pd { align-items: center; justify-content: center; } .ut-pd-panel { margin: 0; width: 460px; max-width: calc(100vw - 48px); max-height: 84vh; border-radius: 18px; transform: translateY(12px) scale(0.98); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; box-shadow: 0 24px 60px rgba(10, 14, 20, 0.28); } .ut-pd.is-open .ut-pd-panel { transform: none; opacity: 1; } } /* Stacked block, 8px rhythm */ .ut-2side, .ut-signals-block, .ut-subblock, .ut-gol-projwrap, .ut-gol-gp, .ut-forma-ah-team, .ut-forma-ah-rows, .psz-players, .ut-tips-list { display: flex; flex-direction: column; gap: 8px; } .ut-tips-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ut-border); border-radius: 12px; background: var(--kl-surface); text-decoration: none; } .ut-tips-row:active { background: var(--ut-pill-bg); } .ut-tips-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ut-tips-name { font: 700 13px var(--ut-font-display); color: var(--ut-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-tips-pick { font: 500 12px var(--ut-font-body); color: var(--ut-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ut-tips-chev { flex-shrink: 0; font: 700 16px var(--ut-font-body); color: var(--ut-faint-2); } .ut-tips-cta { margin-top: 4px; font: 700 13px var(--ut-font-body); color: var(--kl-on-dark); background: var(--ut-primary); border-radius: var(--ut-r-btn); padding: 9px 16px; text-decoration: none; } .ut-tips-all { display: inline-flex; align-items: center; font: 600 13px var(--ut-font-body); color: var(--ut-primary); text-decoration: none; } /* Promoted tips: stand in for a missing model prognoza inside #pre-prognoza. An eligible tip headlines as a verdict-style card; the rest are rows that expand to carry the analysis excerpt so a tip reads as a real read, not a compact list item. */ .ut-tips-row--promoted { align-items: flex-start; padding: 14px; } .ut-tips-row--promoted .ut-tips-name { font-size: 14px; white-space: normal; } .ut-tips-row--promoted .ut-tips-pick { white-space: normal; } .ut-tips-excerpt { margin-top: 4px; font: 400 12px/1.5 var(--ut-font-body); color: var(--ut-muted-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Headline tip rendered in the verdict shell: the card is the link, the CTA sits opposite the eyebrow, and the excerpt fills the "why" strip. */ /* The promoted wrapper isn't a flex-gap band, so assert the title→card spacing. */ .ut-tips-promoted > .ut-title { margin-bottom: 12px; } .ut-verdict--tip { display: block; text-decoration: none; color: inherit; margin-bottom: 12px; } .ut-verdict--tip .ut-verdict-main { width: 100%; } /* .ut-verdict--tip's own justify-content removed 2026-08-25 — the base rule now carries space-between, so the two agree by default instead of the tip variant re-stating it. */ .ut-verdict-why--tip { margin-top: 14px; } .ut-verdict-why--tip .ut-tips-excerpt { margin-top: 0; } .ut-verdict--tip .ut-verdict-sub { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .ut-verdict-tipavatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--ut-ph-a); } /* The "Analiza" chip mirrors .bet-card-cta, but the page's weak universal reset (.ut-page *) strips border/padding off the global rule on a tie — restate the chip here at higher specificity so it keeps its outline. */ .ut-verdict--tip .bet-card-cta { display: inline-flex; align-items: center; gap: var(--kl-sp-4); padding: 5px 11px; border: 1px solid var(--kl-border-strong); border-radius: var(--kl-r-6); font: 600 12px var(--ut-font-body); color: var(--ut-ink); white-space: nowrap; flex-shrink: 0; } /* ── Page-level scope toggle: "Sve takmičenje" vs "Ovo takmičenje" ───────── Shared across the pre-match tabs (Forma, Golovi). The control (includes/ bc-scope.php) sets data-scope on the .ut-sections ancestor; that swaps every .ut-scope-all / .ut-scope-comp block on the page. Default (no attribute / no JS) = all competitions. */ .ut-scope-band { padding: 12px 16px; } .ut-scope-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; } .ut-scope-title { font: 600 14px var(--ut-font-display); color: var(--ut-muted-2); flex-shrink: 0; } .ut-scope-seg { display: inline-flex; gap: 3px; min-width: 0; background: var(--ut-pill-bg); border-radius: 8px; padding: 3px; } /* Selector qualified with the parent (0,2,0) so it beats `.ut-page button { font: inherit }` (0,1,1), which otherwise forces these buttons to the inherited 16px. */ .ut-scope-seg .ut-scope-seg-btn { font: 600 13px var(--ut-font-body); color: var(--ut-muted); text-align: center; padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .ut-scope-seg .ut-scope-seg-btn.is-active { background: var(--kl-surface); box-shadow: 0 1px 3px rgba(20,23,28,0.1); color: var(--ut-ink); font-weight: 700; } .ut-scope-seg .ut-scope-seg-btn:focus-visible { outline: 2px solid var(--ut-primary); outline-offset: 1px; } /* Content swap. Which block opens is decided in PHP (bc_scope_class() stamps .is-scope-default) so the page renders on the right scope with no flash — league mode opens on this competition, recent mode has one block only. The data-scope rules the toggle sets are one level more specific, so a click wins. */ /* These wrappers exist to switch scope, not to lay anything out: the visible one uses display:contents so its children sit in the band/section grid exactly as they do on a page with no toggle. As display:block the wrapper was a layout box that swallowed the parent's gap — the two team blocks in Forma ended up flush against each other, and Golovi's bands lost their 4px separation. */ .ut-scope-all, .ut-scope-comp { display: none; } :is(.ut-scope-all, .ut-scope-comp).is-scope-default { display: contents; } .ut-sections[data-scope="all"] .ut-scope-all, .ut-sections[data-scope="comp"] .ut-scope-comp { display: contents; } .ut-sections[data-scope="all"] .ut-scope-comp, .ut-sections[data-scope="comp"] .ut-scope-all { display: none; } /* --- XBET-3: period toggle + advanced-stat tooltips (Statistike meča) ----- */ .pme-period-tabs { display: flex; gap: var(--kl-sp-8, 8px); margin: 0 0 12px; } /* .kl-chip is defined in global.css, but this page's scoped reset clobbers it: `.ut-page *` (0,1,0) strips padding/background/colour on a tie, and `.ut-page button { font: inherit }` (0,1,1) forces the wrong font. Restate it parent-qualified (0,2,0) so it wins — VERBATIM copy of the global rule (same class, same --kl-* tokens), so when utakmica moves onto global.css this block is a straight delete with nothing to rewrite. */ .ut-page .kl-chip { flex: 0 0 auto; font: 600 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text-2); background: var(--kl-surface-3); border: 0; border-radius: var(--kl-r-pill); padding: var(--kl-sp-6) var(--kl-sp-12); line-height: 1; white-space: nowrap; cursor: pointer; } .ut-page .kl-chip.is-active { font-weight: 700; color: var(--kl-on-dark); background: var(--kl-blue); } .ut-page .kl-chip-spacer { flex: 1; } /* The .ut-lu-xb-* block that used to sit here (list-variant lineups plus the coach/missing meta strip under the 1xBet pitch) was removed 2026-08-25. The lineup is always a pitch now and missing players moved to Povrede i suspenzije, so nothing emits those classes — see includes/bc-lineups.php. The shared tier note lives in global.css as .kl-lu-note. */ /* --- Forma detailed last-5 / H2H card (owner 2026-08-18) ------------------- Ports the bet-centar fixtures card (kl-fxd-*, css/kl-fixtures.css) into this page's self-sufficient ut-* sheet — same rules, ut-* tokens — since the match page deliberately does not load kl-fixtures.css. Columns: KR (korneri) · ŽK (žuti kartoni) · 1P · 2P · rezultat, with the league name where the live card shows FT. Corner/card counts from bc_recent_stats(); "–" where absent. */ /* Matches are NOT individual cards (owner 2026-08-18): they stack in one block with a thin divider between them, like the old last-matches list — the .ut-band is the card. */ /* "Posljednje utakmice" head with the Kod kuće / U gostima venue filter inline. The checkbox reuses the live-feed .mtl-filter styling; JS swaps the two lists. */ .ut-fxd-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ut-fxd-filter { text-transform: none; letter-spacing: normal; } .ut-fxd-list { display: flex; flex-direction: column; padding: 0 12px; border: 1px solid var(--ut-border); border-radius: var(--ut-r-panel); } .ut-fxd-list[hidden] { display: none; } .ut-fxd-card { display: flex; flex-direction: column; gap: 11px; padding: 11px 0; } .ut-fxd-card:not(:first-child) { border-top: 1px solid var(--ut-divider); } .ut-fxd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18px 18px 18px 18px 28px; column-gap: 6px; align-items: stretch; } .ut-fxd-head { display: flex; align-items: baseline; gap: 6px; padding: 5px 0 6px; min-width: 0; } .ut-fxd-date { font: 700 11px var(--ut-font-body); color: var(--ut-ink); white-space: nowrap; flex-shrink: 0; } .ut-fxd-league { font: 500 11px var(--ut-font-body); color: var(--ut-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ut-fxd-col { font: 600 8px var(--ut-font-body); color: var(--ut-muted-2); letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; padding: 5px 0 6px; } .ut-fxd-team { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 0; } .ut-fxd-team img { width: 16px; height: 16px; border-radius: 50%; object-fit: contain; flex-shrink: 0; background: var(--ut-pill-bg); } .ut-fxd-team-name { font: 600 12px var(--ut-font-body); color: var(--ut-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* MP-1.10: the winner carries weight; the loser stays at full contrast, because grey reads as "unavailable" on a fixture list. A draw emphasises neither. */ .ut-fxd-team-name.is-win { font-weight: 800; } .ut-fxd-cell { font: 700 12px var(--ut-font-display); color: var(--ut-ink); display: flex; align-items: center; justify-content: center; padding: 7px 0; } /* Corners (KR) + cards (ŽK) sit at the same muted weight as the half-goal counts (1P/2P), leaving the full-time score as the only emphasised number. */ .ut-fxd-cell.is-half, .ut-fxd-cell.is-count { color: var(--ut-secondary); } .ut-fxd-cell.is-score { background: var(--ut-pill-bg); } .ut-fxd-cell.is-score.is-win { font-weight: 800; } .ut-fxd-cell.is-score.is-top { border-radius: var(--ut-r-badge) var(--ut-r-badge) 0 0; } .ut-fxd-cell.is-score.is-bottom { border-radius: 0 0 var(--ut-r-badge) var(--ut-r-badge); } /* MP-1.9: one .ut-ev.is-red card glyph per red card (ut-lineups.css owns the glyph itself) instead of a red square holding a count. */ .ut-fxd-reds { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; } /* --- XBET-3: header weather chip + post-meta arrangement (owner 2026-08-11): desktop = weather • stadium inline; mobile = column, stadium above weather. */ .ut-mh-pm-weather { display: inline-flex; align-items: center; gap: 4px; color: var(--ut-muted); white-space: nowrap; } @media (min-width: 1024px) { .ut-mh-pm-weather:not(:last-child)::after { content: "•"; margin-left: 8px; opacity: .6; } } @media (max-width: 1023px) { .ut-mh-post-meta { flex-direction: column; gap: 3px; } .ut-mh-pm-venue { order: -1; } } .ut-mh-pm-wicon { vertical-align: -3px; margin-right: 2px; } /* --- REF-1: referee tendency chips under the Sudac line -------------------- */ .ut-spec-ref-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .ut-spec-ref-chip { padding: 3px 10px; border: 1px solid var(--ut-line, #e3e8ef); border-radius: 999px; font: 500 12px var(--ut-font-body); color: var(--ut-muted); } /* Emphasised inline value inside a muted line */ .tdn-goal-min, .ut-signal-text b, .ut-oddchip.is-verdict, .ut-oddchip.is-strong, .ut-gol-ou-ven b, .ut-odg-recchip-top b, .ut-forma-venue-row b, .ut-spec-signal-text b, .ut-spec-cards-row.is-peak .ut-spec-cards-count, .live-signal-text strong, .ut-spec-ref-chip strong { color: var(--ut-ink); font-weight: 700; } .ut-spec-ref-sample { flex-basis: 100%; font: 400 12px var(--ut-font-body); color: var(--ut-faint, #9aa8bf); }