/* VB-2026 tipping front-end styles (paired with vb-tournament.js). */ /* Official FIFA World Cup 26 display font. Defined here (relative path, cache-busted via functions.php) so it's available site-wide — incl. the inline Customizer CSS, which just references the 'FWC26' family. font-weight:normal so the browser may synthesize bold where rules ask for it (only the Thin weight file is installed). */ @font-face { font-family: 'FWC26'; src: url('../fonts/FWC26-CondensedThin.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Normal-width Regular cut of the official font — kept as a fallback for the TOP 10 board (primary is Barlow Condensed, loaded from Google Fonts). */ @font-face { font-family: 'FWC26Normal'; src: url('../fonts/FWC26-NormalRegular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Heavy NORMAL-width cut of the official font — used across the group matrix so the text reads wide and bold (the Condensed cut looked too narrow there). */ @font-face { font-family: 'FWC26Black'; src: url('../fonts/FWC26-NormalBlack.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Matrix typography: Barlow Condensed — the same family as the TOP-10 board, so the news section reads like the leaderboard instead of shouting over it (the heavy FWC26Black cut it replaces looked oversized). Section titles keep the condensed official 'FWC26'. */ .vb-matrix-title { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; } .vb-matrix, .vb-matrix th, .vb-matrix td { font-family: 'Barlow Condensed', 'FWC26Normal', 'Open Sans', Arial, sans-serif; } .vb-scroll, .vb-bracket-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── modern scrollbars, site-wide ────────────────────────────────────────── Thin, rounded, floating thumb in the brand navy that warms to gold on hover. Firefox honours scrollbar-width/color; WebKit/Blink use the ::-webkit pseudos. The transparent border + background-clip:padding-box gives the thumb air around it so it reads as a soft pill rather than a solid bar. */ * { scrollbar-width: auto; scrollbar-color: #2f3e4a transparent; } ::-webkit-scrollbar { width: 17px; height: 17px; } ::-webkit-scrollbar-track { background: rgba(34,43,52,.06); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a4b59, #222b34); background-clip: padding-box; border: 4px solid transparent; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #caa23e, #b98f2d); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: #b98f2d; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } .vb-table { width: 100%; border-collapse: collapse; font-size: 14px; } .vb-table th, .vb-table td { padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,.1); text-align: center; white-space: nowrap; } .vb-table th { font-weight: 600; background: rgba(0,0,0,.04); position: sticky; top: 0; } .vb-table td:nth-child(2), .vb-table .vb-rowhead { text-align: left; } .vb-updated { margin-top: 8px; font-size: 12px; opacity: .6; text-align: right; } .vb-empty { padding: 18px 12px; text-align: center; font-style: italic; opacity: .65; } /* team name + flag (official FIFA bracket-predictor SVGs) */ .vb-team { display: inline-flex; align-items: center; gap: 7px; } /* The FIFA WC-26 flags are uniquely-shaped cut-outs inside a transparent SVG box. A box-shadow (or border-radius) draws the rectangular SVG bounds — that faint rectangle "stuck out" from under the flag. filter:drop-shadow hugs the actual flag alpha instead, matching the official bracket-predictor look. */ /* flex-shrink:0 (flex:0 0 auto) so the flag NEVER gets squeezed by a long team name in the flex row — squeezing was clipping the flag's left side. */ .vb-flag { width: auto; height: 22px; display: inline-block; vertical-align: middle; flex: 0 0 auto; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); } /* blank placeholder flag for undecided bracket slots (shown next to "W74", "2A", …) */ .vb-flag-blank { width: 30px; height: 20px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); background: repeating-linear-gradient(45deg,#e6e6e6,#e6e6e6 4px,#d4d4d4 4px,#d4d4d4 8px); } .vb-tbd { opacity: .55; } /* full standings (section-team) */ .vb-standings tbody tr { cursor: pointer; } .vb-standings tbody tr:hover { background: rgba(255,206,85,.15); } .vb-standings tbody tr:nth-child(-n+3) td { font-weight: 700; } /* TOP 10 list lives in the existing .leaderboard ol markup (section-intro) */ /* point-value coloring (mirrors the old 2022 jQuery thresholds: 0 = red, 10 = purple, 20 = orange, 30+ = green) */ .vb-p0 { color: #c0392b; } .vb-p10 { color: #8e44ad; } .vb-p20 { color: #e67e22; } .vb-pHi { color: #2e7d32; font-weight: 600; } .vb-poff { color: #b8b8b8; } /* inactive group — muted, still shows 0 */ /* ── group matrix (section-news) ───────────────────────────────────────────── One scroll box (.vb-scroll): contestant header sticky on TOP, team column sticky on the LEFT. Sized for the fixed 22 contestant columns — they stretch to fill wide screens (table width:100%); narrow screens scroll sideways inside the box while flags + team names stay pinned. */ .vb-matrix { border-collapse: separate; border-spacing: 0; min-width: max-content; } .vb-matrix th, .vb-matrix td { border-right: 1px solid rgba(34,43,52,.06); } /* header row: dark navy band (same #222b34 as the TOP-10 board) frozen to the top */ .vb-matrix thead th { position: sticky; top: 0; z-index: 3; padding: 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: #222b34; color: #F2EDE2; border-right-color: rgba(255,255,255,.08); border-bottom: 0; visibility: visible; } /* Contestant point cells. NO max-width cap — with the table at width:100% the 22 columns stretch evenly to fill the box; min-width is the readability floor. */ .vb-matrix td.vb-num { min-width: 38px; padding: 6px 4px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; } /* the frozen left column (flag + team) */ .vb-matrix thead th:first-child, .vb-matrix tbody td.vb-rowhead { position: sticky; left: 0; z-index: 2; width: 200px; min-width: 200px; max-width: 200px; text-align: left; background: #fff; color: #222b34; font-size: 16px; font-weight: 600; padding-left: 12px; box-shadow: 2px 0 5px -2px rgba(0,0,0,.25); } .vb-matrix thead th:first-child { top: 0; z-index: 5; background: #222b34; box-shadow: none; } /* corner: pinned top+left */ .vb-matrix .vb-flag { height: 21px; } .vb-matrix td.vb-rowhead .vb-team { max-width: 180px; gap: 8px; } .vb-matrix td.vb-rowhead .vb-team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vb-matrix tbody tr:not(.vb-grp):hover td { background-color: #f7f3ea; } /* group header band: spans full width; the label inside is pinned left so it stays on screen while the contestant columns scroll. */ .vb-matrix tr.vb-grp td { position: static; left: auto; width: auto; min-width: 0; max-width: none; box-shadow: none; text-align: left; font-weight: 700; font-size: 13.5px; padding: 8px 12px; text-transform: uppercase; letter-spacing: .07em; background: #F2EDE2; color: #222b34; border-top: 1px solid rgba(34,43,52,.12); } .vb-matrix tr.vb-grp .vb-grp-label { position: sticky; left: 12px; display: inline-block; padding-right: 8px; } /* group activation state */ .vb-grp-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 10px; vertical-align: middle; margin-left: 8px; } .vb-grp-status.vb-on { background: #2e7d32; color: #fff; } .vb-grp-status.vb-out { background: #c2563a; color: #fff; } .vb-grp-status.vb-off { background: rgba(34,43,52,.14); color: #555; } .vb-matrix tr.vb-grp.vb-grp-off td { background: #ece9e1; color: #8b8b85; } .vb-matrix tr.vb-row-off td.vb-rowhead { color: #9a9a9a; } .vb-matrix tr.vb-row-off .vb-flag { filter: grayscale(1); opacity: .5; } /* ── section-news layout: full-width matrix row (override the old blog-carousel column sizing / fixed heights the theme applied to #news). ───────────────── */ #news .vb-news-row { margin: 0; overflow: visible !important; } #news .vb-news-col { float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; padding-left: 0; padding-right: 0; } #news .vb-matrix-title { margin: 28px 0 12px; font-size: 18px; text-align: left; } #news .vb-news-col:first-child .vb-matrix-title:first-child { margin-top: 6px; } /* Break out of the centered .container so the 22 columns can spread across most of the screen. Centered with left:50% + translateX(-50%) (NOT vw margins) so it can never push past the viewport edge → no page-level horizontal scrollbar. Capped at 1680px so columns don't get absurdly wide on ultra-wide monitors. NOTE: this only works because nothing between here and the viewport clips — the legacy `.container.wow.slideInRight .row ~ .row {overflow-x:auto}` rule used to clip the breakout's left overhang on live (flags + name column vanished); that rule is deleted below and the row is pinned to overflow:visible above. */ #news .vb-news-matrix { display: block; height: auto !important; max-height: none !important; position: relative; left: 50%; transform: translateX(-50%); width: 94vw; max-width: 1680px; } /* The ONE scroll box, styled as a card: capped height so the long team list scrolls VERTICALLY under the frozen header; the table fills it exactly on desktop (no horizontal scrollbar), narrow screens scroll sideways. */ #news .vb-news-matrix .vb-scroll { width: 100%; max-height: 78vh; overflow: auto; border: 1px solid rgba(34,43,52,.16); border-radius: 10px; background: #fff; box-shadow: 0 12px 30px -18px rgba(34,43,52,.5); } /* Table FILLS the box (width:100%) so the 22 columns stretch across the screen; min-width:max-content keeps it from squishing below its content (narrow screens then scroll sideways inside .vb-scroll). */ #news .vb-news-matrix .vb-table { width: 100%; max-width: none; min-width: max-content; } /* ── matrix responsive tiers: shrink the frozen column + cells instead of letting anything disappear; phones get an edge-to-edge card. ─────────────────────── */ @media (max-width: 1024px) { .vb-matrix thead th:first-child, .vb-matrix tbody td.vb-rowhead { width: 160px; min-width: 160px; max-width: 160px; font-size: 15px; } .vb-matrix td.vb-rowhead .vb-team { max-width: 142px; } .vb-matrix td.vb-num { min-width: 35px; font-size: 14px; } } @media (max-width: 640px) { /* edge-to-edge: 100% + the .container's 2×15px padding (NOT 100vw — vw includes the page scrollbar and would add a page-level horizontal scrollbar). */ #news .vb-news-matrix { width: calc(100% + 30px); max-width: none; } #news .vb-news-matrix .vb-scroll { max-height: 82vh; border-radius: 0; border-left: 0; border-right: 0; } .vb-matrix thead th:first-child, .vb-matrix tbody td.vb-rowhead { width: 136px; min-width: 136px; max-width: 136px; font-size: 14px; padding-left: 10px; } .vb-matrix td.vb-rowhead .vb-team { max-width: 120px; gap: 6px; } .vb-matrix .vb-flag { height: 17px; } .vb-matrix td.vb-num { min-width: 31px; font-size: 13px; padding: 5px 3px; } .vb-matrix thead th { font-size: 11px; padding: 7px 3px; } .vb-matrix tr.vb-grp td { font-size: 12px; padding: 7px 10px; } .vb-matrix tr.vb-grp .vb-grp-label { left: 10px; } } /* ============================================================================ KNOCKOUT BRACKET (section-works) — two-sided, FotMob-style Left half = SF M101 subtree · centre = final + champion · right half = M102. Connectors are an absolutely-positioned SVG drawn by vb-tournament.js; the columns use justify-content:space-around so every round's cards land exactly on the midpoint between their two feeders (lines connect cleanly). ============================================================================ */ /* dark "glass" panel so the bracket reads on any section background, with light headers/connectors and bright cards on top (FWC26 World Cup 26 look). */ #vb-bracket { color: #eaf1ff; } .vb-bracket-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, rgba(4,18,42,.80), rgba(2,12,30,.88)); border-radius: 16px; padding: 16px 14px 26px; box-shadow: inset 0 0 0 1px rgba(143,179,255,.12), 0 18px 50px rgba(0,8,24,.45); } /* min-width:max-content + NO margin:auto — auto-centring would clip both outer R32 columns when the bracket is wider than the panel. Left-aligned instead, so it scrolls naturally from the first round. */ .vb-bracket-wrap { position: relative; min-width: max-content; } .vb-bracket-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; } .vb-bracket-grid { position: relative; z-index: 2; display: flex; gap: 34px; align-items: stretch; } .vb-bcol { display: flex; flex-direction: column; min-width: 160px; } .vb-center { min-width: 196px; align-items: center; } .vb-bcol-h { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #9fc0ff; } /* the flex body that distributes the cards (space-around = midpoint alignment) */ .vb-bcol-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; } /* ── match card ──────────────────────────────────────────────────────────── */ .vb-bm { position: relative; border-radius: 11px; cursor: pointer; overflow: hidden; background: linear-gradient(180deg, #ffffff, #f3f6fc); box-shadow: 0 2px 4px rgba(0,8,24,.28), 0 0 0 1px rgba(18,35,60,.10); transition: box-shadow .16s ease, transform .16s ease; } .vb-bm:hover, .vb-bm.vb-lit { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,8,24,.45), 0 0 0 2px #ffce55; } .vb-bm:focus-visible { outline: none; box-shadow: 0 0 0 3px #ff523c; } .vb-bm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; min-height: 34px; color: #16263f; font-size: 13.5px; position: relative; transition: background .15s ease; } .vb-bm-row + .vb-bm-row { border-top: 1px solid rgba(18,35,60,.10); } .vb-bm-slot { display: flex; align-items: center; gap: 7px; min-width: 0; } .vb-bm-slot .vb-team { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; font-size: 15px; min-width: 0; } .vb-bm-slot .vb-team > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 108px; } .vb-bm-score { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 16px; text-align: right; color: #16263f; } .vb-bm-pen { font-size: 11px; font-weight: 600; color: #7c889c; } /* winner / loser within a decided match */ .vb-bm-row.vb-win { background: linear-gradient(90deg, rgba(67,111,77,.18), rgba(67,111,77,.04)); font-weight: 700; } .vb-bm-row.vb-win::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #1fa25a; } .vb-bm-row.vb-lose { opacity: .52; } .vb-bm-row.vb-team-lit { background: rgba(255,206,85,.32) !important; } /* "(e)" / "(p)" decided-by tag, pinned to the card corner */ .vb-tag { position: absolute; top: 4px; right: 5px; z-index: 3; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 7px; color: #fff; letter-spacing: .02em; } .vb-tag-p { background: #ff523c; } /* penalties */ .vb-tag-e { background: #6a5cff; } /* extra time */ /* placeholder slot (undecided): blank flag + label, slightly dimmed */ .vb-bm-row .vb-tbd { opacity: .6; } .vb-bm-row .vb-flag-blank { width: 26px; height: 18px; } /* ── centre column: champion badge + final + bronze ──────────────────────── */ .vb-center-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .vb-champion { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 12px 18px 14px; border-radius: 14px; min-width: 150px; background: linear-gradient(180deg, #ffe082, #f6b733); color: #2a1c00; box-shadow: 0 8px 22px rgba(214,150,5,.45), inset 0 0 0 1px rgba(255,255,255,.5); } .vb-champion .vb-flag { height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .vb-champ-cup { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); } .vb-champ-name { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; font-size: 19px; font-weight: 700; margin-top: 2px; } .vb-champ-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .8; } .vb-champ-tbd { background: linear-gradient(180deg, rgba(255,224,130,.18), rgba(246,183,51,.12)); color: #ffe9b0; box-shadow: inset 0 0 0 1px rgba(255,206,85,.35); } .vb-champ-tbd .vb-champ-cup { opacity: .6; } .vb-champion.vb-lit { box-shadow: 0 8px 26px rgba(214,150,5,.6), 0 0 0 3px #fff3c4; } .vb-final-card .vb-bm { min-width: 184px; box-shadow: 0 4px 10px rgba(0,8,24,.4), 0 0 0 1px rgba(255,206,85,.55); } .vb-final-card .vb-bm-row { font-size: 14.5px; min-height: 38px; } .vb-bronze-block { margin-top: 4px; width: 100%; max-width: 196px; } .vb-bronze-h { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #d6a679; margin-bottom: 6px; } .vb-bronze-block .vb-bm-row.vb-win { background: linear-gradient(90deg, rgba(205,127,50,.26), rgba(205,127,50,.05)); } .vb-bronze-block .vb-bm-row.vb-win::before { background: #cd7f32; } /* ── connectors ─────────────────────────────────────────────────────────── */ .vb-line { fill: none; stroke: rgba(159,192,255,.34); stroke-width: 2; transition: stroke .18s ease, stroke-width .18s ease; } .vb-line.vb-flash { stroke: #ffce55; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255,206,85,.85)); } /* ── per-match pop-up (extends the .vb-modal base below) ─────────────────── */ .vb-mm-head { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6a7890; margin-bottom: 10px; } .vb-mm-head .vb-tag { position: static; vertical-align: middle; } .vb-mm-teams { border: 1px solid rgba(18,35,60,.12); border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .vb-mm-team { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; } .vb-mm-team + .vb-mm-team { border-top: 1px solid rgba(18,35,60,.10); } .vb-mm-team.vb-win { background: rgba(67,111,77,.12); font-weight: 700; } .vb-mm-team .vb-team { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; font-size: 17px; } .vb-mm-score { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; } .vb-mm-pts { border-radius: 10px; background: #f5f7fb; padding: 12px 14px; } .vb-mm-pts-h { font-size: 14px; margin-bottom: 4px; } .vb-mm-pts-h .vb-team { font-weight: 700; } .vb-mm-weight { color: #2e7d32; font-weight: 700; } .vb-mm-pts-sub { font-size: 12px; color: #6a7890; margin-bottom: 8px; } .vb-mm-list { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow: auto; } .vb-mm-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 2px; border-bottom: 1px solid rgba(18,35,60,.07); } .vb-mm-pname { font-size: 14px; } .vb-mm-pp { font-variant-numeric: tabular-nums; font-weight: 700; color: #2e7d32; } .vb-mm-pending, .vb-mm-none { font-size: 13.5px; color: #6a7890; font-style: italic; } /* responsive: tighten on small screens (bracket still scrolls horizontally) */ @media (max-width: 700px) { .vb-bracket-grid { gap: 26px; } .vb-bcol { min-width: 150px; } .vb-bm-slot .vb-team { font-size: 13.5px; } } /* player detail modal */ .vb-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.6); } .vb-modal.open { display: flex; align-items: center; justify-content: center; padding: 16px; } .vb-modal-box { position: relative; background: #fff; color: #222; border-radius: 10px; max-width: 460px; width: 100%; max-height: 86vh; overflow: auto; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.4); } .vb-modal-x { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #888; } .vb-modal-box h3 { margin: 0 0 12px; font-size: 18px; } .vb-picks { margin-top: 14px; font-size: 14px; } .vb-picks p { margin: 6px 0; } /* the medal-place + top-scorer pick rows: a fixed label column so the team flags line up under each other; rows wrap on very narrow screens. */ .vb-pick { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; } .vb-pick > b { flex: 0 0 auto; min-width: 132px; } /* ── Gólkirály row: clickable face thumbnail + national flag + name ─────────── */ .vb-gk { align-items: center; } .vb-gk-player { display: inline-flex; align-items: center; gap: 11px; } .vb-gk-id { display: inline-flex; align-items: center; gap: 7px; } .vb-gk-id .vb-flag { height: 20px; } .vb-gk-name { font-weight: 600; } /* round face thumbnail; the crop is already centred on the face. The little dark "+" badge + hover lift signal it enlarges to the full-body photo. */ .vb-gk-thumb { position: relative; flex: 0 0 auto; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; overflow: visible; cursor: zoom-in; background: transparent; -webkit-appearance: none; appearance: none; } .vb-gk-thumb img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center top; background: #eef0f3; box-shadow: 0 1px 4px rgba(0,0,0,.3), inset 0 0 0 2px #fff; display: block; transition: transform .15s ease, box-shadow .15s ease; } .vb-gk-thumb:hover img, .vb-gk-thumb:focus-visible img { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 0 0 2px #fff; } .vb-gk-thumb:focus-visible { outline: none; } .vb-gk-zoom { position: absolute; right: -2px; bottom: -2px; width: 19px; height: 19px; border-radius: 50%; background: #222b34; box-shadow: 0 0 0 2px #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; } .vb-gk-zoom::before { content: "+"; margin-top: -1px; } /* ── full-body photo light-box (layered above the player modal) ─────────────── */ .vb-lightbox { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(8,12,20,.88); } .vb-lightbox.open { display: flex; align-items: center; justify-content: center; padding: 24px; } .vb-lightbox-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 92vh; } .vb-lightbox-img { max-height: 82vh; max-width: 92vw; width: auto; height: auto; object-fit: contain; cursor: zoom-out; filter: drop-shadow(0 22px 55px rgba(0,0,0,.65)); } .vb-lightbox-cap { font-family: 'FWC26', 'Open Sans', Arial, sans-serif; color: #f2ede2; font-size: 18px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .vb-lightbox-x { position: absolute; top: 14px; right: 22px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; opacity: .82; } .vb-lightbox-x:hover { opacity: 1; } /* the TOP 10 board's overlay layer is filled by renderTop10(); see the "Leaderboard" block below for the board + overlay styling. */ #vb-top10 { } /* ============================================================================ MIGRATED FROM THE WORDPRESS CUSTOMIZER "Additional CSS" (2026-06-09) Consolidated here so the whole site has ONE version-controlled, cache-busted stylesheet — no more invisible CSS hiding in the WP database. >>> ACTION: empty Appearance → Customize → Additional CSS after deploying this. The 'UEFA Euro' font was swapped to FWC26, the global .col-md-12 hero hack was scoped to #intro, and the rules that hid the matrix header / resized flags were removed. Dead 2022 gdoc/.row-N/.col-1/#works-table rules were kept (harmless, no matching elements) — trim later if desired. ============================================================================ */ /*-------------------- Body --------------------*/ body { color: #000; font-family: 'Open Sans', sans-serif; } /*-------------------- Leaderboard — VB-2026 TOP 10 board ("3D" version, art direction from leaderboard/generated.png). Layout/geometry is leaderboard_preview.html (champion in the "2", 2nd+3rd below the hairline, ranks 4-10 in the "6"); on top of that, per the generated.png reference: · card is dark navy-slate (#222b34) instead of near-black · the cream glyphs are RAISED off the card with cast drop-shadows (3D) · 1/2/3 numerals are bigger, with an extruded 3D base + soft shadow · official FWC26 font, names uppercase, ranks 4-10 in small outlined boxes · points are bare numbers (no PTS suffix, no thousands separator) The dark card + "2"/"6" glyphs are the official WC26 numeral logo SVG (static, in section-intro.php); vb-tournament.js fills the #vb-top10 overlay layer. --------------------*/ /* site: hero placement — where the old TOP 10 sat */ .leaderboard { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0.8); z-index: 1; } /* site: the preview's global `*{margin:0;padding:0;box-sizing:border-box}` reset, scoped so theme/bootstrap ol-li styles can't bleed into the board */ .board, .board * { margin: 0; padding: 0; box-sizing: border-box; } /* ---------- the board ---------- */ /* aspect ratio locked to the official logo: 387.07 x 597 */ .board { --card: #222b34; /* dark navy-slate, sampled from generated.png */ --cream: #F2EDE2; /* the "2" and "6" glyphs — warm cream, per the original design */ --ink: #222b34; --muted: #8B8579; --hairline: rgba(34, 43, 52, 0.18); --gold: #B98F2D; --silver: #7E7A72; --bronze: #C2563A; position: relative; width: 460px; height: 709px; font-family: 'Barlow Condensed', 'FWC26Normal', 'Archivo', 'Segoe UI', system-ui, sans-serif; font-weight: 500; color: var(--ink); filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.45)); } /* the logo is TWO stacked SVGs: .logo-card = the dark rounded card, .logo-glyphs = the cream "2"/"6" on a transparent layer above it. Split on purpose — the 3D drop-shadow goes on the glyph SVG as a whole HTML element (filters on paths INSIDE one shared svg composited unreliably and the lift never showed). */ .board .logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .board .logo-card rect { fill: var(--card); } /* the 3D (per generated.png): the glyphs are slightly-raised CONVEX BODIES lying on the dark "carpet", seen a touch from above. Built GEOMETRICALLY inside the svg (no per-path filters — those never rendered reliably), three stacked copies: 1. side wall — same glyphs nudged 5 units DOWN, warm-gray gradient: the body's visible thickness along the bottom edges (sampled #B3AB9C→#857D6E) 2. light rim — nudged 1.2 UP, near-white: lit top edges 3. top face — subtle top-light gradient (#F6F1E6→#ECE5D4) for the convex feel DO NOT add a CSS `fill` on these paths — it would override all three layers. The element-level filter below only adds the near-black contact shadow band under the body (#121820-ish, darker than the card) + a soft ambient falloff. */ .board .logo-glyphs { filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.8)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.5)); } /* site: JS mount point covering the whole board, so the overlays' percentage offsets track the 460x709 glyph geometry exactly as in the preview */ .board .overlay-layer { position: absolute; inset: 0; } .board .overlay { position: absolute; } /* ---------- metallic medal numerals — bitmap art cut from top3.png ---------- The 1/2/3 (with their flanking dashes/underlines) are pre-rendered faceted-metal PNGs (transparent bg) in ../images/medal-{1,2,3}.png; CSS/SVG numerals couldn't match the look. Box sizes keep each crop's native aspect ratio: medal-1 288x130 · medal-2 86x139 · medal-3 82x142. */ .board .medal { display: block; margin: 0 auto; background: center / contain no-repeat; } .board .medal-1 { width: 133px; height: 60px; background-image: url('../images/medal-1.png'); } .board .medal-2 { width: 36px; height: 58px; background-image: url('../images/medal-2.png'); } .board .medal-3 { width: 34px; height: 58px; background-image: url('../images/medal-3.png'); } /* hidden until the competition ends — set display: block to reveal */ .board .medal-label { display: none; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } /* ---------- inside the "2": champion ---------- */ /* top + sizes tuned so a one-line name ends ABOVE the glyph's left-horn cut line (board y ≈ 144px = 20.3%) instead of crossing it */ .board .p1 { top: 7%; left: 14%; right: 14%; text-align: center; } .board .p1 .medal-label { color: var(--gold); } .board .p1 .name { margin-top: 6px; /* 20px Barlow Condensed 700 keeps a 23-char name on ONE line (~235px) — it must not wrap, or the 2nd line crosses the glyph's horn cut line */ font-size: 20px; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .board .p1 .pts { margin-top: 5px; font-size: 24px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; } /* hairline separating champion from 2nd/3rd */ .board .podium-rule { top: 27.5%; left: 18%; right: 18%; border-top: 1px solid var(--hairline); } /* 2nd and 3rd below the hairline, side by side */ .board .duo { top: 29.5%; left: 10%; right: 10%; height: 15.5%; display: flex; align-items: stretch; } .board .place { flex: 1; text-align: center; padding: 0 8px; display: flex; flex-direction: column; } .board .place + .place { border-left: 1px solid var(--hairline); } .board .place .medal-label { margin-top: 5px; font-size: 9px; } /* podium tint follows ACTUAL rank (.rkN set by renderTop10) so ties read right: a player tied for 1st in a duo slot goes gold, tied for 2nd goes silver, etc. */ .board .place.rk1 .medal-label, .board .place.rk1 .pts { color: var(--gold); } .board .place.rk2 .medal-label, .board .place.rk2 .pts { color: var(--silver); } .board .place.rk3 .medal-label, .board .place.rk3 .pts { color: var(--bronze); } /* the wide gold "1" art (normally the big champion numeral) scaled down to fit a duo slot when someone there is tied for 1st */ .board .duo .medal-1 { width: 96px; height: 44px; } .board .place .name { margin-top: 7px; /* 15px Barlow Condensed 700: a 17-char name fits the half-column on one line; extreme 23-char names wrap and the bottom-pinned points absorb it */ font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; } .board .place .pts { /* pinned to the bottom so 2nd and 3rd points align even when one name wraps to two lines */ margin-top: auto; padding-top: 4px; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; } /* (podium .pts colour is set by the .rkN rules above — rank-driven, tie-aware) */ /* podium slots open the breakdown pop-up, same as the full-table rows */ .board .vb-clickable { cursor: pointer; } .board .p1.vb-clickable:hover .name, .board .place.vb-clickable:hover .name { text-decoration: underline; } /* ---------- inside the "6": ranks 4-10, raw on the glyph ---------- */ /* geometry: 7 rows, the separator under the 2nd row lines up exactly with the 6's aperture line, so the cut reads as part of the list. (top = aperture y minus two row heights — breaks if row count changes, which is why renderTop10 always emits exactly 7 lis) */ .board .rows { list-style: none; top: 54.41%; left: 18.5%; right: 18.5%; height: 38.69%; display: flex; flex-direction: column; } .board .rows li { flex: 1; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--hairline); transition: background 120ms ease; } .board .rows li:last-child { border-bottom: 0; } .board .rows li:hover { background: rgba(34, 43, 52, 0.05); } .board .rows .rank { flex: 0 0 20px; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } .board .rows .name { flex: 1; /* 16px Barlow Condensed 700: 23-char names (~185px) fit without ellipsis */ font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board .rows .pts { font-size: 16px; font-weight: 700; /* steel blue — completely distinct from gold/silver/bronze used in the top-3 */ color: #4a6f8a; font-variant-numeric: tabular-nums; white-space: nowrap; } /* site: the board is a fixed 460x709 (shown at 0.8) — shrink further on phones */ @media (max-width: 500px) { .leaderboard { transform: translate(-50%, -50%) scale(0.62); } } /* VB-2026 edit: scoped to #intro. As a global rule it made EVERY .col-md-12 on the site absolute & 365px wide — that squished #news and would break #vb-bracket. */ /* VB-2026 edit: the CTA block (incl. the "Teljes tabella" button) used to sit at top:46% — exactly on top of the .leaderboard TOP-10 (also top:46%), so the button floated over the table. Anchor it to the BOTTOM-CENTER of the hero, below the list. */ #intro .col-md-12 { pointer-events:none; color: #181c26; font-style: bold; white-space:nowrap; position: absolute; top: auto; bottom: 8%; left: 50%; transform: translateX(-50%); width: auto; } #intro .col-md-12 .text-center{ pointer-events:auto; } #intro .col-md-12 table tbody tr td { position: relative; padding: 10px 4px 8px 16px; max-width: 170px; min-width: 92px; z-index: 1; font-size: 20px; counter-increment: col-md-12; transform: translate(1px,47px); } #intro .col-md-12 table tbody tr td:nth-child(3) {text-align: right; } /*top10 lista elcsúszás javítás*/ /* VB-2026 edit: was height:416px (sized for the old gdoc TOP-10 table); auto now that the CTA col only holds the title + button. */ .intro-content.parallax-text-fade .row .col-md-12{height:auto} /*header javítás*/ header .row .col-md-12{ width:100%; } /* .igsv-table .row-5, .row-6,.row-7,.row-8 {transform: translateY(10px); } .igsv-table .row-10, .row-11,.row-12,.row-13,.row-14,.row-15 {transform: translateY(25px); } .igsv-table .row-16, .row-17,.row-18,.row-19,.row-20,.row-21 {transform: translateY(40px); } */ .has-padding table {white-space:nowrap; width:100%; border-collapse:separate; empty-cells: hide; } /* VB-2026 edit: REMOVED `#news.has-padding table thead th { … visibility:hidden }`. It was hiding the new contestant-abbreviation header row of the points matrix. The matrix header is styled by vb-tournament.css (.vb-matrix thead th). */ /* VB-2026 edit: REMOVED the legacy `#news.has-padding table td {min-width:50px; max-width:35px; …}` and `#news.has-padding table .col-1 {…}` rules — they styled the old gdoc tables and bled onto the new points matrix (vb-tournament.css used to fight them with !important overrides; with the rules gone those are gone too). */ /* VB-2026 edit: REMOVED `.container.wow.slideInRight .row ~ .row {overflow-y:hidden; overflow-x:auto}`. scripts.js adds .wow.slideInRight to #news .container, so this legacy gdoc-scroll rule turned the news row into a clip box that CUT OFF the left overhang of the breakout matrix (flags + team-name column disappeared on live as the window narrowed). The matrix has its own scroll box (.vb-scroll). */ /*flag style * * */ /* VB-2026 edit: REMOVED `.has-padding table tbody tr td img {width:32px;height:32px}`. It overrode the new .vb-flag sizing in the matrix and standings. Flag sizing now lives in vb-tournament.css. (The #works-table flag rule below is left for the legacy bracket and doesn't touch the new tables.) */ .section-heading { line-height: 1.4; margin-bottom: 0px; } .home-intro{padding-bottom:50px;} .light-section-heading{ font-family: 'FWC26', 'UEFA Euro ExtraBold Narrow', sans-serif; font-weight: bold; font-style: normal; color: #001329 } /*2018vbtippjatekjavitas*/ .container.header.clearfix .row .col-md-12{ padding:0; pointer-events:visible; } .logo-holder{height:10% } /*csoportkör tábla legalsó sor formázás*/ #news.has-padding table tbody tr.row-41.odd{ font-size: 16px; font-weight: 700; color: cornflowerblue; } /* Preloader: the site logo stays centred on the light overlay; only the old SVG spinner is swapped for the FWC26 clip. Anchor the loading element with a viewport-relative top (vh, NOT %) so it lands predictably just below the logo regardless of the overlay's height — the live Customizer "Additional CSS" stretches #awesome-loader to 150vh, which made the original bottom:20% rule push content off-screen. body-prefixed to out-rank that Customizer CSS. */ body #awesome-loader .loader-holder{ top:75vh; bottom:auto; height:auto; } /* The FWC26 animation is black-framed, so it lives in its own rounded black tile. On the light overlay that reads as an intentional video badge (not a stray black box), and because the clip fades to black at its loop point the tile also hides the restart seam. */ body #awesome-loader .vb-loader-video{ display:block; margin:0 auto; width:132px; height:132px; object-fit:cover; border-radius:22px; background-color:#000; box-shadow:0 12px 30px rgba(0, 19, 41, 0.22); } @media (max-width:480px){ body #awesome-loader .vb-loader-video{ width:112px; height:112px; border-radius:18px; } } /*pontszamitas oldal css*/ .page-template-default.page.page-id-2.wp-custom-logo.has-header-image.pace-done .col-md-12{ visibility:hidden; } /*footer visibility*/ footer .container{visibility:hidden; } footer .pixova-lite-footer-theme-copyright{visibility:hidden;} /*knockout stage * **** * **** * */ #news {background-color:#fff} #works{background-color:#fff} /* #works table tbody tr.row-3 .col-1, #works table tbody tr.row-3 .col-2, #works table tbody tr.row-4 .col-1, #works table tbody tr.row-4 .col-2{ background-color:#f2f2f2; empty-cells:show; border-top:hidden; }*/ #works .row + .row { padding-left:21px; max-height: 1620px; } #works table { width:1610px; text-align: left; min-width:185px; padding-right: 10px; font-family: 'FWC26', 'UEFA Euro ExtraBold Narrow', sans-serif; font-weight: bold; font-style: normal; font-size: 19px; padding-bottom: 55px;} #works table tbody tr td img { margin-right:10px; width:32px; height: 32px; vertical-align:middle; margin-bottom:7px; } /*új blank flag stílus */ .knockout_blank_flag { margin-right: 10px; width: 32px; height: 32px; vertical-align: middle; margin-bottom: 7px; display: inline-block; border-radius: 50%; } /*még újabb blank flag stílus */ #works table tbody tr td .knockout_blank_flag img { width: 32px; height: 24px; position: relative; top: 5px; } #works table thead th { text-align:left; font-size:22px; font-weight: bold; color:#eeeee4; text-transform:uppercase; visibility:visible; } table#igsv-1-1hbhe1hfoztfirad-jqtr6i-zbxkmddtmxbjufbhoy4c thead .odd{ width: 224px; padding-bottom:5px; border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#d7ca6a; } #works .text-center.section-heading .light-section-heading {color:#eeeee4; } /* #works (kieséses ág) megtartja az eredeti arany vonalát – nem a WC26 bands minta */ #works .light-section-heading:after{ width:66px; height:3px; margin-left:-33px; background-color:#d7ca6a; background-image:none; } #works table thead .odd{ width: 224px; padding-bottom:5px; padding-top: 5px; } #works table thead .even{ width:82px; } #works table td { padding-top:6px; padding-bottom:6px; } #works table .row-2.even td {padding-top:45px; } #works table tbody{ color:#8b1538 } #works{ background-size: contain; background: url(https://geodeziavb2026.ddns.net/wp-content/uploads/2022/12/ko_bg_min_trans11_1.png) ; } /*svg stlye*/ #works table svg{position: absolute; overflow: visible; z-index: -1; transform: translatex(-45px) translatey(-21px);} #works table svg#Layer_2{ transform: translatex(-17px) translatey(-8px);} /*knockout scroll*/ .container.wow.slideInLeft .row ~ .row { overflow-y: hidden; overflow-x: auto; } /*works image visibility*/ .container.wow.slideInLeft .owlCarousel.project-carousel{ display:none; } /****** * *** * ***** /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 10%; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin:auto; padding: 20px; border: 1px solid #888; overflow-x: auto; width:95% } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } /*********** * *** * ***** * ***turnoffmodaltable*/ .inv{display:none;} svg {cursor:pointer;} .modal table {width:100%} .modal table .col-1{text-align: left; min-width: 185px; padding-right: 10px; font-family: 'FWC26', 'UEFA Euro ExtraBold Narrow', sans-serif; font-weight: bold; font-style: normal; font-size: 20px; color:#000; } .modaltabla td { empty-cells:show; text-align:center; padding-bottom: 5px; padding-top: 5px; border-top-width: 1px; border-top-style: solid; border-top-color:#e5e5e5; } table#igsv-1-1hbhe1hfoztfirad-jqtr6i-zbxkmddtmxbjufbhoy4c .col-9{display:none;} .tabella table {width:95%} .tabella table .col-1{text-align: center; padding-right: 10px; font-size: 18px; color:#000; } .tabella table .col-2{text-align: left; min-width: 185px; padding-right: 10px; font-weight:bold; font-size: 18px; color:#000; } .tabella table .col-12{text-align: center; color:#000; font-weight:bold; } .tabella td { empty-cells:show; text-align:center; padding-bottom: 7px; padding-top: 7px; border-top-width: 1px; border-top-style: solid; border-top-color:#d0cfcf; } .tabella table thead th {text-align:center; min-width:130px; font-size:18px; font-weight: bold; padding-bottom: 15px; } .tabella table thead .col-5 { padding-right:15px; } .tabella table thead .col-1 { padding-right:15px; min-width:50px; } .container.wow.bounceInUp .row.align-center{ overflow-y:hidden; overflow-x:auto; } #team {background-color:#eee;} .intro-tagline{ margin-bottom: 44px} /* TELJES TABELLA GOMB — same navy-slate as the TOP 10 board's card (#222b34). !important needed: the Customizer's intro_button_color theme-mod is printed as an inline