/* ========================================================================= Opstelling Vandaag Visuele taal: Grain - "frosted glass desk with a single green pen". Bijna monochroom, veel lucht, en smaragdgroen uitsluitend voor de handeling. Twee modi. De tokens hieronder zijn semantisch benoemd (canvas, surface, ink, ...) zodat elke regel in dit bestand voor licht en donker tegelijk geldt en alleen de waarden wisselen. Het thema wordt gezet als data-thema="licht|donker" op , nog voor de eerste paint. ========================================================================= */ /* ------------------------------------------------------------------------- Tokens - licht (de standaard) ------------------------------------------------------------------------- */ :root { /* Vlakken */ --canvas: #ffffff; /* pagina */ --surface: #fafafa; /* kaarten en panelen */ --surface-2: #ffffff; /* paneelkop, subtiel verschil met surface */ --band: #f0f0f0; /* volle band over de breedte */ --deep: #141414; /* hero, footer, donkere secties */ --pitch: #094a30; /* het speelveld blijft gras, ook in de lichte modus */ /* Tekst */ --ink: #313232; --ink-soft: #545454; --ink-muted: #949494; --ink-heading: #141414; --ink-on-deep: #ffffff; /* tekst op --deep en --pitch */ --ink-on-deep-soft: rgba(255, 255, 255, .72); /* Lijnen */ --line: #e6e6e6; --line-strong: #d6d6d6; --line-on-deep: rgba(255, 255, 255, .14); /* Accent - de enige kleur in het systeem */ --accent: #009959; --accent-hover: #00b96c; --accent-soft: #00b96c; /* belijning en shirts op donkere vlakken */ --accent-wash: #e6f7ef; /* Statuskleuren */ --ok-bg: #e6f7ef; --ok-tx: #00713f; --ok-ln: #c9ebdb; --warn-bg: #fdf3dd; --warn-tx: #8a5f00; --warn-ln: #f0e0b8; --danger-bg: #fbe9e7; --danger-tx: #c0392b; --danger-ln: #f2d0cc; --info-bg: #e9f0f6; --info-tx: #3d6b8f; --info-ln: #d3e0ec; --neutral-bg: #f0f0f0; --neutral-tx: #545454; --neutral-ln: #e6e6e6; /* Twijfelgeval op het veld */ --doubt: #e8c26a; --doubt-ink: #3d2c00; /* Typografie */ --font-display: 'Poppins', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Ritme - basis 4px */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; /* Radii - Grain houdt het bij 10, met 14 voor grotere beelden */ --r-sm: 6px; --r-card: 10px; --r-lg: 14px; --r-pill: 10px; --wrap: 1200px; color-scheme: light; } /* ------------------------------------------------------------------------- Tokens - donker ------------------------------------------------------------------------- */ [data-thema="donker"] { --canvas: #141414; --surface: #1c1d1d; --surface-2: #202121; --band: #1a1a1a; --deep: #000000; --pitch: #0d0f0e; /* hier mag het veld wel grafiet zijn */ --ink: #d6d6d6; --ink-soft: #949494; --ink-muted: #707070; --ink-heading: #f0f0f0; --ink-on-deep: #ffffff; --ink-on-deep-soft: rgba(255, 255, 255, .66); --line: #313232; --line-strong: #3d3e3e; --line-on-deep: rgba(255, 255, 255, .12); --accent: #00b96c; --accent-hover: #00ff95; --accent-soft: #00ff95; --accent-wash: rgba(0, 185, 108, .14); --ok-bg: rgba(0, 185, 108, .16); --ok-tx: #4ade9f; --ok-ln: rgba(0, 185, 108, .3); --warn-bg: rgba(232, 194, 106, .14); --warn-tx: #e8c26a; --warn-ln: rgba(232, 194, 106, .3); --danger-bg: rgba(224, 90, 74, .16); --danger-tx: #f08a7c; --danger-ln: rgba(224, 90, 74, .3); --info-bg: rgba(110, 160, 200, .16); --info-tx: #8ab4d8; --info-ln: rgba(110, 160, 200, .3); --neutral-bg: #262727; --neutral-tx: #b0b0b0; --neutral-ln: #313232; color-scheme: dark; } /* ------------------------------------------------------------------------- Basis ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; color: var(--ink-heading); font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; } p { margin: 0 0 var(--s4); } a { color: var(--ink-heading); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } img, svg { max-width: 100%; } .ov-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); } .ov-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ov-skip { position: absolute; left: -9999px; background: var(--accent); color: #fff; padding: var(--s3) var(--s5); border-radius: var(--r-card); z-index: 100; } .ov-skip:focus { left: var(--s4); top: var(--s4); } /* ------------------------------------------------------------------------- Logo ------------------------------------------------------------------------- */ .ov-logo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink-heading); } /* * Het merk heeft zijn eigen twee kleuren en niet die van de site. Het groen van * de belijning is lichter dan --accent, en het gras is bijna zwart maar niet * grijs; samen maken die twee het herkenbaar als een veld. Ze staan als eigen * variabelen genoteerd zodat de voettekst er een kan omzetten. */ .ov-logo__mark { display: block; flex: none; --ov-gras: #022b1e; --ov-krijt: #3ddf77; } .ov-logo__mark .ov-logo__gras { fill: var(--ov-gras); } .ov-logo__mark .ov-logo__lijnen { stroke: var(--ov-krijt); } .ov-logo__mark .ov-logo__spelers { fill: var(--ov-krijt); } .ov-logo__word { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; } .ov-logo__line1 { color: var(--ink-heading); } .ov-logo__line2 { color: var(--ink-muted); } /* ------------------------------------------------------------------------- Header ------------------------------------------------------------------------- */ .ov-header__bar { background: var(--canvas); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .ov-header__inner { display: flex; align-items: center; gap: var(--s5); min-height: 64px; } .ov-nav { display: flex; align-items: center; gap: var(--s1); flex: 1 1 auto; min-width: 0; } .ov-nav__list { display: flex; align-items: center; gap: var(--s1); list-style: none; margin: 0; padding: 0; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; } .ov-nav__list::-webkit-scrollbar { display: none; } .ov-nav__link, .ov-nav__list a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-card); font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .ov-nav__link:hover, .ov-nav__list a:hover { background: var(--band); color: var(--ink-heading); } .ov-nav .current-menu-item > a { background: var(--accent); color: #fff; } .ov-nav__item--meer { display: none; } /* * "Meer competities": een
naast de lijst, zodat de balk met acht * competities niet breder wordt dan een gewoon scherm. Werkt zonder JavaScript; * de summary draagt dezelfde klasse als een gewone navlink zodat hij er ook * hetzelfde uitziet, inclusief de mobiele stijl uit .ov-menu hieronder. Staat * expres buiten .ov-nav__list: die scrollt op een smal scherm (overflow-x: * auto) en zou de uitklaplijst daaronder afknippen. */ .ov-nav__meer { position: relative; flex: none; } .ov-nav__meer__summary { display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; } .ov-nav__meer__summary::-webkit-details-marker { display: none; } .ov-nav__meer__summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .55; transform: translateY(-2px) rotate(45deg); } .ov-nav__meer[open] > .ov-nav__meer__summary::after { transform: translateY(1px) rotate(-135deg); } .ov-nav__meer[open] > .ov-nav__meer__summary { background: var(--band); color: var(--ink-heading); } .ov-nav__meer__lijst { position: absolute; top: calc(100% + 4px); left: 0; z-index: 41; min-width: 210px; display: grid; gap: 1px; list-style: none; margin: 0; padding: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); } .ov-nav__meer__lijst a { display: block; padding: 6px var(--s3); border-radius: var(--r-sm); font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; } .ov-nav__meer__lijst a:hover { background: var(--band); color: var(--accent); } .ov-search { flex: none; } .ov-search__input { font: inherit; font-size: 14px; padding: var(--s2) var(--s4); width: 190px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); color: var(--ink); } .ov-search__input::placeholder { color: var(--ink-muted); } .ov-search__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } /* ------------------------------------------------------------------------- Themaschakelaar ------------------------------------------------------------------------- */ .ov-thema { flex: none; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); } .ov-thema__knop { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-muted); cursor: pointer; } .ov-thema__knop:hover { color: var(--ink-heading); background: var(--band); } .ov-thema__knop svg { width: 15px; height: 15px; display: block; } .ov-thema__knop[aria-pressed="true"] { background: var(--canvas); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } [data-thema="donker"] .ov-thema__knop[aria-pressed="true"] { background: var(--surface-2); box-shadow: none; } /* ------------------------------------------------------------------------- Pills ------------------------------------------------------------------------- */ .ov-pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 3px var(--s3); border: 1px solid transparent; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.5; } .ov-pill--bevestigd { background: var(--accent); color: #fff; } .ov-pill--basis { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); } .ov-pill--twijfel { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); } .ov-pill--out { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-ln); } .ov-pill--geschorst { background: var(--info-bg); color: var(--info-tx); border-color: var(--info-ln); } .ov-pill--neutraal { background: var(--neutral-bg); color: var(--neutral-tx); border-color: var(--neutral-ln); } /* Op een donker vlak dragen de neutrale pills hun eigen contrast mee */ .ov-pitch .ov-pill--neutraal, .ov-hero .ov-pill--neutraal { background: rgba(255, 255, 255, .14); color: var(--ink-on-deep); border-color: transparent; } /* ------------------------------------------------------------------------- Knoppen ------------------------------------------------------------------------- */ .ov-btn { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5); border-radius: var(--r-card); border: 1px solid transparent; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; } .ov-btn--primair, .ov-btn--op-donker { background: var(--accent); color: #fff; } .ov-btn--primair:hover, .ov-btn--op-donker:hover { background: var(--accent-hover); color: #fff; } [data-thema="donker"] .ov-btn--primair:hover, [data-thema="donker"] .ov-btn--op-donker:hover { color: #05231a; } .ov-btn--outline { background: var(--surface); color: var(--ink-heading); border-color: var(--line-strong); } .ov-btn--outline:hover { background: var(--band); } /* Op een donker vlak, zoals in de hero */ .ov-btn--spook { background: transparent; color: var(--ink-on-deep); border-color: rgba(255, 255, 255, .35); } .ov-btn--spook:hover { background: rgba(255, 255, 255, .1); color: var(--ink-on-deep); } /* ------------------------------------------------------------------------- Secties ------------------------------------------------------------------------- */ .ov-section { padding-block: var(--s24); } .ov-section--band { background: var(--band); } .ov-section--donker { background: var(--deep); color: var(--ink-on-deep); } .ov-section--donker h2, .ov-section--donker h3 { color: var(--ink-on-deep); } .ov-section--donker .ov-eyebrow { color: var(--accent-soft); } .ov-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; } /* Schaalt mee met het scherm: op 390 px bleef 32 px zo groot dat zelfs "Vermoedelijke opstelling" over twee regels brak. */ .ov-section__title { font-size: clamp(20px, 5.2vw, 32px); } .ov-section__link { font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--accent); } .ov-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s2); } /* Uitleg op een donker vlak, met de stappen ernaast */ .ov-uitleg { display: grid; gap: var(--s8); grid-template-columns: 1.1fr 1fr; align-items: start; } .ov-uitleg h3 { font-size: 19px; margin-bottom: var(--s3); } .ov-uitleg p { color: var(--ink-on-deep-soft); font-size: 16px; margin: 0 0 var(--s3); line-height: 1.7; } .ov-uitleg p:last-child { margin-bottom: 0; } .ov-stappen { margin: 0; padding: 0; list-style: none; counter-reset: stap; } .ov-stappen li { position: relative; padding: 0 0 var(--s5) var(--s8); counter-increment: stap; } .ov-stappen li:last-child { padding-bottom: 0; } .ov-stappen li::before { content: counter( stap ); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; } .ov-stappen strong { display: block; color: var(--ink-on-deep); font-size: 16px; } .ov-stappen span { color: var(--ink-on-deep-soft); font-size: 15px; line-height: 1.6; } @media (max-width: 780px) { .ov-uitleg { grid-template-columns: 1fr; gap: var(--s6); } } /* ------------------------------------------------------------------------- Hero ------------------------------------------------------------------------- */ .ov-hero { background: var(--deep); color: var(--ink-on-deep); padding-block: var(--s20) var(--s24); position: relative; overflow: hidden; } /* Middenstip-motief als veldverwijzing, bewust nauwelijks zichtbaar */ .ov-hero::after { content: ""; position: absolute; right: -140px; top: 50%; width: 420px; height: 420px; transform: translateY(-50%); border: 2px solid rgba(0, 185, 108, .18); border-radius: 50%; pointer-events: none; } .ov-hero__inner { position: relative; z-index: 1; max-width: 760px; } .ov-hero__title { font-family: var(--font-display); font-size: clamp(36px, 5.8vw, 64px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-on-deep); overflow-wrap: break-word; margin-bottom: var(--s5); } .ov-hero__title em { font-style: normal; color: var(--accent-soft); } .ov-hero__lead { font-size: 18px; color: var(--ink-on-deep-soft); max-width: 56ch; margin-bottom: var(--s8); } .ov-hero__acties { display: flex; gap: var(--s3); flex-wrap: wrap; } .ov-hero__meta { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--line-on-deep); } .ov-hero__stat strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--accent-soft); line-height: 1.1; } .ov-hero__stat span { font-size: 14px; color: var(--ink-on-deep-soft); } /* ------------------------------------------------------------------------- Wedstrijdkaarten ------------------------------------------------------------------------- */ .ov-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .ov-match { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); transition: border-color .15s ease, box-shadow .15s ease; } .ov-match:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); } [data-thema="donker"] .ov-match { box-shadow: none; } [data-thema="donker"] .ov-match:hover { border-color: var(--accent); box-shadow: none; } .ov-match__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); } .ov-match__comp { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .ov-match__teams { display: grid; gap: var(--s2); } .ov-match__wanneer { display: block; margin-bottom: var(--s3); font-size: 13px; color: var(--ink-muted); } .ov-match__team { display: flex; align-items: center; gap: var(--s3); font-size: 16px; font-weight: 600; color: var(--ink-heading); } /* De clubnaam mag wikkelen, maar nooit worden afgekapt. */ .ov-match__naam { flex: 1 1 auto; min-width: 0; } .ov-match__doel { flex: none; font-variant-numeric: tabular-nums; } .ov-crest { width: 26px; height: 26px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--ink-on-deep); background: var(--deep); } [data-thema="donker"] .ov-crest { background: var(--accent); color: #05231a; } .ov-crest--logo { background: none; object-fit: contain; padding: 0; } [data-thema="donker"] .ov-crest--logo { background: none; } .ov-match--stil { cursor: default; } .ov-match__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); } /* ------------------------------------------------------------------------- Competitieblokken ------------------------------------------------------------------------- */ .ov-leagues { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); } .ov-league { display: flex; align-items: center; gap: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); text-decoration: none; font-weight: 600; color: var(--ink-heading); } .ov-league:hover { background: var(--canvas); border-color: var(--accent); } .ov-league img { width: 30px; height: 30px; object-fit: contain; flex: none; } .ov-league strong { display: block; font-size: 16px; } .ov-league span { font-size: 13px; font-weight: 400; color: var(--ink-muted); white-space: nowrap; } /* ------------------------------------------------------------------------- Het veld ------------------------------------------------------------------------- */ .ov-pitch { position: relative; background: var(--pitch); border-radius: var(--r-lg); padding: var(--s8) var(--s4); aspect-ratio: 3 / 4; max-height: 720px; display: flex; flex-direction: column; justify-content: space-around; overflow: hidden; } /* Veldmarkeringen */ .ov-pitch::before { content: ""; position: absolute; inset: var(--s3); border: 1.5px solid rgba(0, 255, 149, .24); border-radius: 10px; pointer-events: none; } .ov-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 1.5px solid rgba(0, 255, 149, .24); border-radius: 50%; pointer-events: none; } .ov-pitch__lijn { position: absolute; left: var(--s3); right: var(--s3); top: 50%; height: 1.5px; background: rgba(0, 255, 149, .24); pointer-events: none; } .ov-pitch__rij { position: relative; z-index: 1; display: flex; justify-content: space-evenly; align-items: center; gap: var(--s2); } .ov-speler { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; width: 68px; text-decoration: none; } .ov-speler__shirt { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: #05231a; font-family: var(--font-display); font-size: 14px; font-weight: 600; border: 2px solid var(--pitch); box-shadow: 0 0 0 2px var(--accent-soft); } .ov-speler--twijfel .ov-speler__shirt { background: var(--doubt); color: var(--doubt-ink); box-shadow: 0 0 0 2px var(--doubt); } .ov-speler--keeper .ov-speler__shirt { background: #f0f0f0; color: var(--pitch); box-shadow: 0 0 0 2px #f0f0f0; } .ov-speler__naam { font-size: 11px; font-weight: 500; color: #ffffff; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); overflow-wrap: anywhere; } .ov-pitch__formatie { position: absolute; top: var(--s5); right: var(--s5); z-index: 2; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--accent-soft); } .ov-legenda { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); font-size: 13px; color: var(--ink-muted); } .ov-legenda span { display: inline-flex; align-items: center; gap: var(--s2); } .ov-legenda i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid var(--ink-muted); } /* ------------------------------------------------------------------------- Datalaag - compacter dan het ruime sectieritme eromheen ------------------------------------------------------------------------- */ .ov-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; min-width: 0; } .ov-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface-2); } .ov-panel__title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; } .ov-lijst { list-style: none; margin: 0; padding: 0; } .ov-lijst li { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5); border-bottom: 1px solid var(--line); font-size: 15px; } .ov-lijst li:last-child { border-bottom: 0; } .ov-lijst__nr { flex: none; width: 24px; font-size: 13px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .ov-lijst__naam { flex: 1 1 auto; font-weight: 500; color: var(--ink-heading); } .ov-lijst__pos { flex: none; font-size: 12px; color: var(--ink-muted); } .ov-tabel-wrap { overflow-x: auto; min-width: 0; } .ov-tabel { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; } .ov-tabel th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); padding: var(--s3) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; } .ov-tabel td { padding: 10px var(--s5); border-bottom: 1px solid var(--line); vertical-align: middle; } .ov-tabel tr:last-child td { border-bottom: 0; } .ov-tabel tbody tr:hover { background: var(--canvas); } /* * De naam mag wikkelen. Met nowrap duwde een naam als "Niklas Brondsted * Vesterlund Nielsen" de hele tabel breder dan het paneel, en dan verschijnt er * een horizontale schuifbalk over een tabel die verder prima past. */ .ov-tabel__naam { font-weight: 600; color: var(--ink-heading); } /* * break-word en niet anywhere. Bij 'anywhere' telt de browser de kleinst * mogelijke breedte als een enkele letter, waardoor de kolom in een smal paneel * tot niets inzakt en "Marco Bizot" verticaal komt te staan. 'break-word' breekt * alleen als het echt moet en laat de kolombreedte met rust. */ .ov-tabel--selectie .ov-tabel__naam { overflow-wrap: break-word; } /* * In de vormtabel blijft een naam op een regel. De kolom groeit mee met de * inhoud; wordt het toch te breed, dan schuift de tabel binnen zijn eigen kader * in plaats van dat de naam over twee regels valt. */ .ov-tabel--vorm .ov-tabel__naam { white-space: nowrap; } /* Op een telefoon moet de hele tabel op het scherm passen. */ @media (max-width: 780px) { .ov-tabel--vorm { font-size: 13px; } .ov-tabel--vorm th, .ov-tabel--vorm td { padding-inline: var(--s2); } .ov-tabel--vorm .ov-portret { width: 26px; height: 26px; } .ov-tabel--vorm .ov-speleercel { gap: var(--s2); } .ov-tabel--vorm .ov-vormmerk { font-size: 10px; padding: 1px 5px; } .ov-duo .ov-tabel--vorm .ov-tabel__naam { max-width: none; } } /* Reden mag wikkelen, terugkeerdatum en status blijven op een regel */ .ov-tabel td:nth-child(3) { white-space: nowrap; } .ov-tabel td:last-child { white-space: nowrap; } /* ------------------------------------------------------------------------- Opstellingspagina ------------------------------------------------------------------------- */ .ov-kruimels { font-size: 13px; color: var(--ink-muted); padding-top: var(--s6); } .ov-kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .ov-kruimels li::after { content: "/"; margin-left: var(--s2); color: var(--line-strong); } .ov-kruimels li:last-child::after { content: ""; } .ov-kruimels a { color: var(--ink-muted); text-decoration: none; } .ov-kruimels a:hover { color: var(--accent); text-decoration: underline; } .ov-notice { display: flex; gap: var(--s3); align-items: flex-start; background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-ln); border-radius: var(--r-card); padding: var(--s4) var(--s5); font-size: 14px; margin-top: var(--s5); } .ov-notice p { margin: 0; } .ov-paginakop { padding-top: var(--s8); } .ov-paginakop__titel { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; overflow-wrap: break-word; margin-bottom: var(--s4); } .ov-paginakop__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-bottom: var(--s5); } .ov-paginakop__bijgewerkt { font-size: 14px; color: var(--ink-muted); } .ov-paginakop__lead { font-size: 18px; max-width: 62ch; color: var(--ink); } .ov-duel { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; background: var(--band); border-radius: var(--r-card); padding: var(--s4) var(--s5); margin-bottom: var(--s8); } .ov-duel__zijde { display: flex; align-items: center; gap: var(--s3); font-weight: 600; color: var(--ink-heading); } .ov-duel__vs { font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.08em; } .ov-duel__info { margin-left: auto; font-size: 14px; color: var(--ink-soft); text-align: right; } .ov-opstelling { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .ov-kolom { display: grid; gap: var(--s5); min-width: 0; } .ov-tekst { max-width: 68ch; margin-top: var(--s16); } .ov-tekst h2 { font-size: 26px; margin-bottom: var(--s4); } .ov-tekst h3 { font-size: 19px; margin: var(--s8) 0 var(--s3); } .ov-tekst p { font-size: 17px; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .ov-footer { background: var(--deep); color: var(--ink-on-deep-soft); padding-block: var(--s16) var(--s8); font-size: 15px; } .ov-footer a { color: var(--ink-on-deep-soft); text-decoration: none; } .ov-footer a:hover { color: var(--accent-soft); } .ov-footer .ov-logo { color: var(--ink-on-deep); } /* Op de donkere voettekst zou het gras wegvallen; daar mag het een tint op. */ .ov-footer .ov-logo__mark { --ov-gras: #0b3b28; } .ov-footer .ov-logo__line1 { color: var(--ink-on-deep); } .ov-footer .ov-logo__line2 { color: var(--accent-soft); } .ov-footer__top { display: grid; gap: var(--s10); grid-template-columns: minmax(min(240px, 100%), 1fr) 2fr; padding-bottom: var(--s10); } .ov-footer__pitch { margin-top: var(--s4); max-width: 34ch; font-size: 14px; } .ov-footer__cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } .ov-footer__heading { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: var(--s4); } .ov-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .ov-footer__list a { font-size: 14px; } .ov-footer__bottom { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s6); border-top: 1px solid var(--line-on-deep); font-size: 13px; color: rgba(255, 255, 255, .5); } .ov-footer__bottom p { margin: 0; } /* De ruimte boven de footer hoort bij de inhoud, niet bij de footer zelf: anders ontstaat er een lichte strook wanneer de laatste sectie ook donker is. */ .ov-main > .ov-wrap { padding-bottom: var(--s20); } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 980px) { .ov-opstelling { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .ov-footer__top { grid-template-columns: 1fr; gap: var(--s8); } .ov-section { padding-block: var(--s16); } .ov-hero { padding-block: var(--s16); } } @media (max-width: 780px) { .ov-header__inner { flex-wrap: wrap; min-height: 0; padding-block: var(--s3); gap: var(--s3); } .ov-search { order: 3; flex: 1 1 auto; } .ov-search__input { width: 100%; } .ov-thema { order: 4; } .ov-nav { order: 5; width: 100%; margin-inline: calc(var(--s5) * -1); padding-inline: var(--s5); } .ov-pitch { aspect-ratio: auto; min-height: 560px; padding-inline: var(--s2); } .ov-speler { width: 58px; } .ov-speler__shirt { width: 34px; height: 34px; font-size: 13px; } .ov-duel__info { margin-left: 0; text-align: left; width: 100%; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Legendabolletjes. Stonden eerst als inline stijl in de template, waardoor ze niet met het thema mee konden wisselen. */ .ov-legenda__basis { background: var(--accent-soft); border-color: var(--accent-soft); } .ov-legenda__twijfel { background: var(--doubt); border-color: var(--doubt); } .ov-legenda__keeper { background: #f0f0f0; border-color: var(--ink-muted); } /* ========================================================================= Competitie- en clubpagina's ========================================================================= */ .ov-blok { padding-block: var(--s12) 0; } .ov-blok:first-of-type { padding-top: var(--s10); } .ov-bijschrift { font-size: 13px; color: var(--ink-muted); } .ov-uitleg-kort { font-size: 15px; color: var(--ink-soft); max-width: 62ch; margin: var(--s2) 0 0; } .ov-leeg { padding: var(--s5); margin: 0; color: var(--ink-muted); font-size: 15px; } .ov-bron { margin: var(--s12) 0 0; font-size: 13px; color: var(--ink-muted); } .ov-notice--fout { background: var(--danger-bg); color: var(--danger-tx); border-color: var(--danger-ln); } .ov-section__title--klein { font-size: 20px; } /* --- Hero in compacte vorm, met competitielogo --------------------------- */ /* * De compacte hero had 48px boven én de kruimels brachten daar hun eigen 24px * bovenop: 72px leegte, terwijl het kruimelpad en de clubnaam eronder tegen * elkaar aan zaten. Nu andersom - weinig boven de kruimels, lucht eronder. */ .ov-hero--compact { padding-block: var(--s5) var(--s8); } .ov-hero--compact .ov-kruimels { padding-top: 0; margin-bottom: var(--s5); } .ov-hero--compact .ov-hero__merk { margin-bottom: 0; } .ov-hero__merk { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); } .ov-hero__logo { width: 56px; height: 56px; object-fit: contain; flex: none; } .ov-hero__titel { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 44px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-on-deep); margin: 0; } .ov-hero--compact .ov-eyebrow { color: var(--accent-soft); margin-bottom: 2px; } .ov-hero--compact .ov-hero__lead { margin-bottom: 0; font-size: 17px; } .ov-hero--compact .ov-hero__meta { margin-top: var(--s6); } .ov-hero--compact .ov-hero__stat strong { font-size: 20px; } /* --- Tabellen ------------------------------------------------------------ */ .ov-num { text-align: right; font-variant-numeric: tabular-nums; } th.ov-num { text-align: right; } .ov-rang { color: var(--ink-muted); font-weight: 500; width: 34px; } .ov-punten { font-weight: 700; color: var(--ink-heading); } .ov-breed { width: 22%; min-width: 110px; } .ov-tabel--stand td { padding-block: 8px; } /* Positiezones als een streep links, niet als een kleurvlak: het blijft leesbaar in beide standen en botst niet met de clublogo's. */ .ov-zone td:first-child { position: relative; } .ov-zone td:first-child::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .ov-zone--cl td:first-child::before { background: var(--accent); } .ov-zone--europa td:first-child::before { background: var(--accent-soft); opacity: .55; } .ov-zone--nacompetitie td:first-child::before { background: var(--warn-tx); } .ov-zone--degradatie td:first-child::before { background: var(--danger-tx); } .ov-legenda--zones { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s5); font-size: 13px; color: var(--ink-muted); } .ov-legenda--zones li { display: flex; align-items: center; gap: var(--s2); } .ov-zonekleur { width: 12px; height: 3px; border-radius: 2px; display: inline-block; } .ov-zonekleur--cl { background: var(--accent); } .ov-zonekleur--europa { background: var(--accent-soft); opacity: .55; } .ov-zonekleur--nacompetitie { background: var(--warn-tx); } .ov-zonekleur--degradatie { background: var(--danger-tx); } /* --- Club- en spelercellen ---------------------------------------------- */ .ov-clubcel { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink-heading); font-weight: 600; white-space: nowrap; } .ov-clubcel img { width: 22px; height: 22px; object-fit: contain; flex: none; } .ov-clubcel:hover { color: var(--accent); } .ov-clubcel--klein { font-size: 13px; font-weight: 500; gap: var(--s2); } .ov-clubcel--klein img { width: 18px; height: 18px; } .ov-speleercel { display: inline-flex; align-items: center; gap: var(--s3); } .ov-speleercel__sub { display: block; font-size: 12px; color: var(--ink-muted); font-weight: 400; } .ov-portret { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--band); } /* --- Vorm ---------------------------------------------------------------- */ .ov-vorm { display: inline-flex; gap: 3px; } .ov-vorm__winst, .ov-vorm__gelijk, .ov-vorm__verlies { width: 18px; height: 18px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 10px; font-weight: 700; font-style: normal; flex: none; } .ov-vorm__winst { background: var(--ok-bg); color: var(--ok-tx); } .ov-vorm__gelijk { background: var(--neutral-bg); color: var(--neutral-tx); } .ov-vorm__verlies { background: var(--danger-bg); color: var(--danger-tx); } /* --- Clubraster ---------------------------------------------------------- */ .ov-clubs { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); } .ov-clubkaart { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); text-decoration: none; color: var(--ink-heading); } .ov-clubkaart:hover { border-color: var(--accent); background: var(--canvas); } .ov-clubkaart img { width: 34px; height: 34px; object-fit: contain; flex: none; } .ov-clubkaart__naam { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; } .ov-clubkaart__meta { display: block; font-size: 12px; color: var(--ink-muted); } /* * De twaalf populaire clubs op de voorpagina. Op mobiel twee naast elkaar, en * dan past een logo naast een naam niet meer: in de helft van een telefoon * blijft er honderd pixel over voor "Sparta Rotterdam" en de tegenstander * eronder. Daarom staat daar het logo boven de tekst. */ @media (max-width: 560px) { .ov-clubs--tegels { grid-template-columns: 1fr 1fr; gap: var(--s3); } .ov-clubs--tegels .ov-clubkaart { flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s4) var(--s3); } .ov-clubs--tegels .ov-clubkaart img { width: 32px; height: 32px; } .ov-clubs--tegels .ov-clubkaart__tekst { width: 100%; min-width: 0; } .ov-clubs--tegels .ov-clubkaart__naam { font-size: 14px; } /* * Twee regels hoog, ook als er maar een nodig is. Anders is de ene tegel * lager dan de andere en staat het raster scheef. */ .ov-clubs--tegels .ov-clubkaart__meta { font-size: 11px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* --- Twee kolommen naast elkaar ----------------------------------------- */ .ov-duo { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; } /* --- Balkjes ------------------------------------------------------------- */ .ov-balk { display: block; height: 8px; border-radius: 999px; background: var(--band); overflow: hidden; } .ov-balk i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .ov-verschil { font-weight: 600; } .ov-verschil--boven { color: var(--ok-tx); } .ov-verschil--onder { color: var(--danger-tx); } /* --- Duellijsten --------------------------------------------------------- */ .ov-duels { list-style: none; margin: 0; padding: 0; } .ov-duel-rij { display: flex; align-items: center; gap: var(--s3); padding: 11px var(--s5); border-bottom: 1px solid var(--line); font-size: 15px; } .ov-duel-rij:last-child { border-bottom: 0; } .ov-duel-rij__team { flex: 1 1 0; min-width: 0; color: var(--ink); } .ov-duel-rij__team strong { color: var(--ink-heading); font-weight: 600; } .ov-duel-rij__team--uit { text-align: right; } .ov-duel-rij__score { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-heading); background: var(--band); border-radius: var(--r-sm); padding: 2px 10px; } .ov-duel-rij__tijd { flex: none; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ov-duel-rij__ronde { flex: none; width: 92px; font-size: 12px; color: var(--ink-muted); } .ov-duel-rij .ov-vorm__winst, .ov-duel-rij .ov-vorm__gelijk, .ov-duel-rij .ov-vorm__verlies { margin-right: var(--s1); } /* --- Clubkop ------------------------------------------------------------- */ .ov-clubkop { background: var(--band); border-block: 1px solid var(--line); padding-block: var(--s8); margin-top: var(--s5); } .ov-clubkop__inner { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; } .ov-clubkop__logo { width: 84px; height: 84px; object-fit: contain; flex: none; } .ov-clubkop__tekst { min-width: 0; } .ov-clubkop__titel { font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 var(--s4); } .ov-clubkop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); } /* --- Kerncijfers --------------------------------------------------------- */ .ov-kerncijfers { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); } .ov-cijfer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); } .ov-cijfer__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s2); } .ov-cijfer__waarde { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--ink-heading); } .ov-cijfer__sub { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; } .ov-panel--los { margin-bottom: var(--s4); } /* --- Doelpunten per kwartier -------------------------------------------- */ .ov-minuten { display: flex; align-items: flex-end; gap: var(--s3); padding: var(--s6) var(--s5) var(--s4); height: 200px; } .ov-minuut { flex: 1 1 0; display: flex; flex-direction: column; height: 100%; } .ov-minuut__staven { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 3px; } .ov-minuut__voor, .ov-minuut__tegen { width: 14px; min-height: 2px; border-radius: 3px 3px 0 0; display: block; } .ov-minuut__voor { background: var(--accent); } .ov-minuut__tegen { background: var(--danger-tx); opacity: .55; } .ov-minuut__label { flex: none; text-align: center; font-size: 11px; color: var(--ink-muted); padding-top: var(--s2); font-variant-numeric: tabular-nums; } .ov-minuten + .ov-legenda { padding: 0 var(--s5) var(--s5); margin-top: 0; } .ov-legenda__voor, .ov-legenda__tegen { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 0; } .ov-legenda__voor { background: var(--accent); } .ov-legenda__tegen { background: var(--danger-tx); opacity: .55; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 780px) { .ov-clubkop__inner { gap: var(--s4); } .ov-clubkop__logo { width: 60px; height: 60px; } .ov-duel-rij__ronde { width: auto; } .ov-minuten { height: 160px; gap: var(--s2); } .ov-minuut__voor, .ov-minuut__tegen { width: 10px; } .ov-speleercel__sub { display: none; } } /* De clubnaam en de positie stonden als broers in dezelfde flexrij en vochten om de ruimte, waardoor beide over drie regels braken. Ze horen onder elkaar. */ .ov-clubkaart__tekst { min-width: 0; } /* ========================================================================= Meer leven in de lichte modus Grain is bewust bijna monochroom, maar puur grijs op wit werd te vlak voor een sportsite. Drie ingrepen, zonder het systeem los te laten: 1. de neutralen krijgen een spoor groen mee, zodat het geen kantoorgrijs is 2. de donkere vlakken zijn diep bosgroen in plaats van grafiet 3. ranglijsten krijgen goud, zilver en brons - de enige kleuren van buiten het systeem, en precies daar waar een lezer ze verwacht ========================================================================= */ :root { --surface: #f7faf8; --surface-2: #ffffff; --band: #eaf1ed; --line: #e1eae5; --line-strong: #cbd9d2; --deep: #0f2e1f; --ink-on-deep-soft: rgba(255, 255, 255, .76); --goud: #c8961b; --zilver: #8c9a94; --brons: #a8703f; --goud-bg: #fdf4de; --zilver-bg: #eef1f0; --brons-bg: #f8ece2; } [data-thema="donker"] { --surface: #1a1d1b; --surface-2: #1f2321; --band: #171a18; --line: #2c322e; --line-strong: #3b423d; --deep: #082116; --goud: #e8c26a; --zilver: #b4bfb9; --brons: #cf9a6a; --goud-bg: rgba(232, 194, 106, .14); --zilver-bg: rgba(180, 191, 185, .12); --brons-bg: rgba(207, 154, 106, .14); } /* De hero en de clubkop krijgen diepte in plaats van een vlakke kleur. */ .ov-hero { background: linear-gradient(158deg, #164430 0%, var(--deep) 58%, #07190f 100%); } [data-thema="donker"] .ov-hero { background: linear-gradient(158deg, #0d3021 0%, var(--deep) 58%, #030d08 100%); } .ov-hero::after { border-color: rgba(0, 255, 149, .22); } .ov-footer { background: var(--deep); } /* Sectiekoppen krijgen een accentstreepje: kleine ingreep, veel ritme. */ .ov-section__title { position: relative; padding-left: var(--s4); } .ov-section__title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--accent); } .ov-section__title--klein::before { width: 3px; } .ov-section--donker .ov-section__title::before, .ov-hero .ov-section__title::before { background: var(--accent-soft); } /* Paneelkoppen krijgen de zachte accenttint in plaats van wit op wit. */ .ov-panel__head { background: var(--accent-wash); } .ov-panel__title { color: var(--ink-heading); } /* Kerncijfers krijgen een gekleurde rand en een lichte tint. */ .ov-cijfer { border-left: 3px solid var(--accent); background: linear-gradient(100deg, var(--accent-wash) 0%, var(--surface) 42%); } .ov-cijfer__waarde { color: var(--accent-donker, var(--ink-heading)); } /* Zebra in de lange tabellen, heel licht. */ .ov-tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--band) 45%, transparent); } .ov-tabel tbody tr:hover { background: var(--accent-wash); } /* ========================================================================= Ranglijsten ========================================================================= */ .ov-index { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); margin-top: var(--s6); } .ov-index__kop { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4); } .ov-index__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .ov-index__lijst a { display: inline-block; padding: 5px var(--s3); border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--line); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--ink); } .ov-index__lijst a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .ov-ranglijsten { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); } .ov-ranglijst { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); display: flex; flex-direction: column; } .ov-ranglijst__kop { font-size: 17px; margin-bottom: 2px; } .ov-ranglijst__kop a { text-decoration: none; color: var(--ink-heading); } .ov-ranglijst__kop a:hover { color: var(--accent); } .ov-ranglijst__vraag { font-size: 13px; color: var(--ink-muted); margin: 0 0 var(--s4); } .ov-ranglijst__meer { margin-top: auto; padding-top: var(--s4); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--accent); } .ov-ranglijst__meer:hover { text-decoration: underline; } .ov-toplijst { list-style: none; margin: 0 0 var(--s2); padding: 0; } .ov-toplijst__rij { display: flex; align-items: center; gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .ov-toplijst__rij:last-child { border-bottom: 0; } .ov-toplijst__clublogo { width: 20px; height: 20px; object-fit: contain; flex: none; } .ov-toplijst__naam { flex: 1 1 auto; min-width: 0; color: var(--ink-heading); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-toplijst__waarde { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-heading); } /* Goud, zilver en brons. De enige kleuren van buiten het systeem, precies daar waar een lezer ze verwacht. */ .ov-medaille { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--neutral-bg); color: var(--neutral-tx); } .ov-medaille--1 { background: var(--goud-bg); color: var(--goud); } .ov-medaille--2 { background: var(--zilver-bg); color: var(--zilver); } .ov-medaille--3 { background: var(--brons-bg); color: var(--brons); } .ov-leeg--klein { padding: var(--s3) 0; font-size: 14px; } .ov-portret--klein { width: 22px; height: 22px; } /* xG-kaartje op de clubpagina */ .ov-ranglijst--xg { background: var(--accent-wash); border-color: var(--accent); } .ov-xg { list-style: none; margin: 0; padding: 0; } .ov-xg li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .ov-xg li:last-child { border-bottom: 0; } .ov-xg span { color: var(--ink-soft); } .ov-xg strong { font-variant-numeric: tabular-nums; color: var(--ink-heading); } /* Bladeren tussen ranglijsten */ .ov-blader { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--line); font-size: 14px; } .ov-blader__knop, .ov-blader__alle { text-decoration: none; color: var(--ink); font-weight: 500; } .ov-blader__knop:hover, .ov-blader__alle:hover { color: var(--accent); } .ov-blader__alle { color: var(--ink-muted); } /* ========================================================================= Tegenstander met logo in programma en uitslagen ========================================================================= */ .ov-duel-rij__tegen { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); } .ov-duel-rij__tegen img { width: 22px; height: 22px; object-fit: contain; flex: none; } .ov-duel-rij__tegen strong { display: block; color: var(--ink-heading); font-weight: 600; } .ov-duel-rij__tegen:hover strong { color: var(--accent); } .ov-duel-rij__waar { display: block; font-size: 11px; color: var(--ink-muted); } /* Clubkop: het kruimelpad hoort nu binnen dezelfde band. */ .ov-clubkop { margin-top: 0; padding-block: var(--s5) var(--s8); } .ov-clubkop .ov-kruimels { padding-top: 0; padding-bottom: var(--s5); } @media (max-width: 780px) { .ov-ranglijsten { grid-template-columns: 1fr; } .ov-blader { flex-wrap: wrap; gap: var(--s3); } } /* Het competitielogo is donkerblauw en verdween tegen de groene hero. Een wit plaatje eronder maakt het weer leesbaar, ongeacht de kleuren van het logo. */ .ov-hero__logo { background: #fff; border-radius: var(--r-card); padding: 6px; width: 56px; height: 56px; box-sizing: content-box; } /* De compacte hero lijnt uit met de inhoud eronder in plaats van als smalle kolom in het midden te staan. */ .ov-hero--compact .ov-hero__inner { max-width: none; } /* Lange spelersnamen werden midden in een woord afgekapt. Twee regels mag. */ .ov-toplijst__naam { white-space: normal; text-overflow: clip; line-height: 1.25; overflow-wrap: anywhere; } .ov-toplijst__rij { align-items: flex-start; } .ov-medaille, .ov-toplijst__clublogo, .ov-portret--klein { margin-top: 1px; } .ov-toplijst__waarde { margin-top: 1px; } /* De spelerstabel heeft zeven kolommen en past niet in een halve breedte; die werd afgekapt. Onder elkaar houdt beide tabellen leesbaar. */ .ov-stapel { display: grid; gap: var(--s6); } /* ========================================================================= Rustiger. Het groen was overal aanwezig; het hoort een accent te zijn en geen achtergrondkleur. Alleen de plekken waar een lezer een signaal verwacht - een knop, een actieve staat, een balkje - houden de kleur. ========================================================================= */ /* De competitiekop was een groot, fel gekleurd blok. Nu een rustige band, in dezelfde vorm als de clubkop, zodat beide pagina's op elkaar lijken. */ .ov-hero--compact { background: var(--band); color: var(--ink); padding-block: var(--s8); border-bottom: 1px solid var(--line); } .ov-hero--compact::after { display: none; } .ov-hero--compact .ov-hero__titel { color: var(--ink-heading); } .ov-hero--compact .ov-eyebrow { color: var(--ink-muted); } .ov-hero--compact .ov-hero__logo { background: var(--canvas); } /* De hero-inhoud lijnt uit met de tabellen eronder; hij stond over de volle breedte van het venster in plaats van binnen de kolom. */ .ov-hero--compact .ov-hero__inner { max-width: var(--wrap); } /* Paneelkoppen: een neutrale tint in plaats van een groene. */ .ov-panel__head { background: var(--surface-2); border-bottom: 1px solid var(--line); } /* Rijen lichten neutraal op, niet groen. */ .ov-tabel tbody tr:hover { background: var(--band); } /* Kerncijfers: alleen een dun streepje kleur, geen groen vlak. */ .ov-cijfer { background: var(--surface); border-left: 3px solid var(--accent); } /* Het xG-kaartje op de clubpagina hoeft niet groen te zijn. */ .ov-ranglijst--xg { background: var(--surface); border-color: var(--line); } /* Het accentstreepje bij sectiekoppen mag dunner en zachter. */ .ov-section__title { padding-left: var(--s3); } .ov-section__title::before { width: 3px; opacity: .8; } /* ========================================================================= Grotere spelersfoto's ========================================================================= */ .ov-portret { width: 40px; height: 40px; border: 1px solid var(--line); } .ov-portret--klein { width: 30px; height: 30px; } .ov-toplijst__clublogo { width: 22px; height: 22px; } .ov-speleercel { gap: var(--s4); } .ov-tabel--selectie td { padding-block: 8px; } .ov-positie { color: var(--ink-muted); font-size: 13px; white-space: nowrap; } /* ========================================================================= Sorteerbare kolommen ========================================================================= */ .ov-tabel th:has( .ov-sorteer ) { padding: 0; } .ov-sorteer { display: flex; align-items: center; gap: 5px; width: 100%; padding: var(--s3) var(--s5); background: none; border: 0; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; text-align: left; } .ov-num .ov-sorteer { justify-content: flex-end; } .ov-sorteer:hover { color: var(--ink-heading); } .ov-sorteer__pijl { width: 8px; height: 8px; flex: none; opacity: 0; background: currentColor; clip-path: polygon(50% 100%, 0 0, 100% 0); } [aria-sort="descending"] .ov-sorteer { color: var(--accent); } [aria-sort="descending"] .ov-sorteer__pijl { opacity: 1; } [aria-sort="ascending"] .ov-sorteer { color: var(--accent); } [aria-sort="ascending"] .ov-sorteer__pijl { opacity: 1; transform: rotate(180deg); } /* ========================================================================= Duelregels met logo aan beide kanten ========================================================================= */ .ov-duel-rij__zijde { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink-heading); font-weight: 600; font-size: 15px; } .ov-duel-rij__zijde img { width: 22px; height: 22px; object-fit: contain; flex: none; } .ov-duel-rij__zijde span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-duel-rij__zijde:hover { color: var(--accent); } .ov-duel-rij__zijde--uit { flex-direction: row-reverse; text-align: right; } /* ========================================================================= Mobiel ========================================================================= */ @media (max-width: 780px) { /* Logo en clubnaam horen naast elkaar te blijven staan. */ .ov-clubkop__inner { flex-wrap: nowrap; align-items: center; } .ov-clubkop__logo { width: 52px; height: 52px; } .ov-clubkop__titel { font-size: 26px; margin-bottom: var(--s3); } .ov-clubkop__tekst { flex: 1 1 auto; } .ov-hero__titel { font-size: 26px; } .ov-hero--compact .ov-hero__merk { flex-wrap: nowrap; } .ov-portret { width: 34px; height: 34px; } } /* ========================================================================= Mobiel menu Op brede schermen bestaat de knop niet en staat alles gewoon in de balk. ========================================================================= */ .ov-menuknop { display: none; } .ov-menu { display: contents; } @media (max-width: 900px) { .ov-header__inner { flex-wrap: nowrap; gap: var(--s3); min-height: 60px; } .ov-menuknop { display: grid; place-items: center; flex: none; margin-left: auto; width: 42px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink-heading); cursor: pointer; } .ov-menuknop:hover { background: var(--band); } .ov-menuknop__streepjes { display: grid; gap: 3px; width: 16px; } .ov-menuknop__streepjes i { display: block; height: 2px; border-radius: 1px; background: currentColor; } .ov-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 39; flex-direction: column; gap: var(--s4); padding: var(--s5); background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); } .ov-menu-open .ov-menu { display: flex; } .ov-header__bar { position: sticky; } .ov-header__inner { position: relative; } /* In het menu staan de onderdelen onder elkaar en mag de nav afbreken. */ .ov-menu .ov-nav { width: 100%; flex-direction: column; align-items: flex-start; gap: var(--s2); } .ov-menu .ov-nav__list { width: 100%; flex-wrap: wrap; overflow: visible; gap: var(--s2); } .ov-menu .ov-nav__item--meer { display: block; } .ov-menu .ov-nav__meer { display: none; } .ov-menu .ov-nav__link, .ov-menu .ov-nav__list a { font-size: 15px; padding: var(--s2) var(--s4); background: var(--surface); } .ov-menu .ov-nav__meer__lijst { min-width: 200px; } .ov-menu .ov-search { width: 100%; } .ov-menu .ov-search__input { width: 100%; } .ov-menu .ov-thema { align-self: flex-start; } } /* ========================================================================= Stand compacter op mobiel: minder kolommen in plaats van zijwaarts scrollen ========================================================================= */ @media (max-width: 780px) { .ov-tabel--stand { min-width: 0; } /* Winst, gelijk, verlies, doelpunten voor, tegen en saldo vallen weg. Wat overblijft past zonder schuiven en is wat je op een telefoon zoekt: positie, club, gespeeld, punten en vorm. */ .ov-tabel--stand th:nth-child(4), .ov-tabel--stand td:nth-child(4), .ov-tabel--stand th:nth-child(5), .ov-tabel--stand td:nth-child(5), .ov-tabel--stand th:nth-child(6), .ov-tabel--stand td:nth-child(6), .ov-tabel--stand th:nth-child(7), .ov-tabel--stand td:nth-child(7), .ov-tabel--stand th:nth-child(8), .ov-tabel--stand td:nth-child(8), .ov-tabel--stand th:nth-child(9), .ov-tabel--stand td:nth-child(9) { display: none; } .ov-tabel--stand .ov-clubcel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 33vw; display: inline-block; vertical-align: middle; } .ov-tabel--stand th, .ov-tabel--stand td { padding-inline: var(--s2); } .ov-tabel--stand td:first-child, .ov-tabel--stand th:first-child { padding-left: var(--s4); } .ov-tabel--stand .ov-clubcel span { font-size: 14px; } .ov-tabel--stand .ov-vorm { gap: 2px; } .ov-tabel--stand .ov-vorm i { width: 15px; height: 15px; font-size: 9px; } /* De overige tabellen mogen wel schuiven, maar met minder lucht. */ .ov-tabel th, .ov-tabel td { padding-inline: var(--s3); } } /* ========================================================================= Top drie uitgelicht ========================================================================= */ .ov-toplijst__rij { gap: var(--s3); } .ov-toplijst__wie { flex: 1 1 auto; min-width: 0; } .ov-toplijst__club { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-muted); margin-top: 1px; } .ov-toplijst__club img { width: 14px; height: 14px; object-fit: contain; flex: none; } .ov-portret--lijst { width: 30px; height: 30px; } /* De eerste drie krijgen meer lucht en een groter portret: een ranglijst gaat over de kop, en die mag je in een oogopslag kunnen zien. */ .ov-toplijst__rij--top { padding: var(--s3) 0; } .ov-toplijst__rij--top .ov-portret--lijst { width: 44px; height: 44px; } .ov-toplijst__rij--top .ov-toplijst__naam { font-size: 15px; font-weight: 600; } .ov-toplijst__rij--top .ov-toplijst__waarde { font-size: 17px; } .ov-toplijst__rij--top .ov-medaille { width: 24px; height: 24px; font-size: 12px; } /* Hetzelfde in de volledige tabel. */ .ov-rij--top td { padding-block: var(--s3); } .ov-rij--top .ov-portret { width: 44px; height: 44px; } .ov-rij--top .ov-tabel__naam { font-size: 16px; } .ov-rij--top .ov-punten { font-size: 17px; } /* ========================================================================= Index van alle lijsten: per categorie gegroepeerd in plaats van een wolk ========================================================================= */ .ov-index { display: grid; gap: var(--s6) var(--s8); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--s8) 0; margin-top: var(--s6); } .ov-index__kop { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); } .ov-index__kop a { text-decoration: none; color: inherit; } .ov-index__kop a:hover { color: var(--accent); } .ov-index__lijst { display: grid; gap: 3px; list-style: none; margin: 0; padding: 0; } .ov-index__lijst a { display: block; padding: 2px 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 400; color: var(--ink); text-decoration: none; } .ov-index__lijst a:hover { background: none; color: var(--accent); text-decoration: underline; } /* De stand paste nog steeds niet op 390px. Doorgerekend: de vijf vormbadges en de celpadding waren samen goed voor ruim honderd pixels te veel. Drie badges en krappere cellen brengen de tabel binnen de schermbreedte. */ @media (max-width: 780px) { .ov-tabel--stand th, .ov-tabel--stand td { padding-inline: 6px; } .ov-tabel--stand td:first-child, .ov-tabel--stand th:first-child { padding-left: var(--s3); } .ov-tabel--stand td:last-child, .ov-tabel--stand th:last-child { padding-right: var(--s3); } .ov-tabel--stand .ov-vorm i:nth-last-child(n+4) { display: none; } .ov-tabel--stand .ov-clubcel { gap: var(--s2); } .ov-tabel--stand .ov-clubcel img { width: 20px; height: 20px; } .ov-tabel--stand .ov-clubcel span { max-width: 38vw; } .ov-tabel--stand .ov-rang { width: 22px; } } /* De sorteerknop bracht zijn eigen padding mee (20px per kant) en bepaalde daarmee de kolombreedte, niet de cel eronder. Op een telefoon kostte dat ruim honderd pixels: de kolom "#" was 73px breed voor een getal van twee cijfers. */ @media (max-width: 780px) { .ov-tabel th .ov-sorteer { padding: var(--s3) 6px; } .ov-tabel--stand th:first-child .ov-sorteer { padding-left: var(--s3); } .ov-tabel--stand th:last-child .ov-sorteer { padding-right: var(--s3); } } /* Onder de 400px is er nog negentien pixels te weinig. Clubnaam iets korter en kleinere vormbadges; daarmee past de stand ook op een smalle telefoon. */ @media (max-width: 400px) { /* Vijf kolommen passen hier niet, hoe krap ook opgemaakt. De vorm valt af; positie, club, gespeeld en punten blijven, en dat past zonder schuiven. */ .ov-tabel--stand th:last-child, .ov-tabel--stand td:last-child { display: none; } .ov-tabel--stand .ov-clubcel span { max-width: 40vw; } .ov-tabel--stand .ov-clubcel img { width: 18px; height: 18px; } } /* Onder de 360px past de tabel niet meer, ook niet met minder kolommen: daar blijft hij schuiven. Dat treft alleen nog de oudste iPhone SE, en informatie weglaten zou daar niets oplossen. */ /* ========================================================================= Het groen terug naar accent De neutralen hadden een groene ondertoon meegekregen. Opgeteld over kaarten, banden, randen en paneelkoppen kleurde dat de hele pagina. Grain is grijs met een groene pen; hieronder staan weer de echte grijzen uit dat systeem. ========================================================================= */ :root { --surface: #fafafa; --surface-2: #ffffff; --band: #f2f2f2; --line: #e6e6e6; --line-strong: #d6d6d6; --accent-wash: #f0f0f0; } [data-thema="donker"] { --surface: #1b1b1b; --surface-2: #212121; --band: #171717; --line: #2e2e2e; --line-strong: #3b3b3b; --accent-wash: #232323; } /* De competitiekop was nog steeds een gekleurd vlak. Nu gewoon papier met een lijn eronder; het logo en de naam dragen de pagina. */ .ov-hero--compact { background: var(--canvas); border-bottom: 1px solid var(--line); padding-block: var(--s6) var(--s8); } .ov-hero--compact .ov-hero__logo { background: var(--surface); border: 1px solid var(--line); } /* Kerncijfers houden een streepje kleur, maar dunner. */ .ov-cijfer { border-left-width: 2px; } /* ========================================================================= Alleen de nummer een springt eruit ========================================================================= */ .ov-toplijst__rij--eerste { padding: var(--s4) 0; align-items: center; } .ov-toplijst__rij--eerste .ov-portret--lijst { width: 56px; height: 56px; } .ov-toplijst__rij--eerste .ov-toplijst__naam { font-size: 17px; font-weight: 600; } .ov-toplijst__rij--eerste .ov-toplijst__club { font-size: 13px; } .ov-toplijst__rij--eerste .ov-toplijst__waarde { font-size: 22px; } .ov-toplijst__rij--eerste .ov-medaille { width: 26px; height: 26px; font-size: 13px; } .ov-rij--eerste td { padding-block: var(--s4); } .ov-rij--eerste .ov-portret { width: 56px; height: 56px; } .ov-rij--eerste .ov-tabel__naam { font-size: 17px; } .ov-rij--eerste .ov-punten { font-size: 20px; } @media (max-width: 780px) { .ov-toplijst__rij--eerste .ov-portret--lijst { width: 66px; height: 66px; } .ov-toplijst__rij--eerste .ov-toplijst__naam { font-size: 18px; } .ov-toplijst__rij--eerste .ov-toplijst__waarde { font-size: 24px; } .ov-rij--eerste .ov-portret { width: 66px; height: 66px; } } /* ========================================================================= Index: een regel per categorie in plaats van een raster van kolommen ========================================================================= */ .ov-index { display: block; padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--s5); } .ov-index__regel { display: flex; align-items: baseline; gap: var(--s2) var(--s4); padding: 5px 0; flex-wrap: wrap; } .ov-index__cat { flex: none; width: 168px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; } .ov-index__cat:hover { color: var(--accent); } .ov-index__lijst { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 2px var(--s3); list-style: none; margin: 0; padding: 0; } .ov-index__lijst li { display: flex; align-items: center; } .ov-index__lijst li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); margin-right: var(--s3); } .ov-index__lijst a { padding: 0; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; } .ov-index__lijst a:hover { color: var(--accent); text-decoration: underline; } @media (max-width: 700px) { .ov-index__cat { width: auto; } .ov-index__regel { flex-direction: column; gap: 2px; padding-block: var(--s3); } } /* ========================================================================= Witte vlakken op een grijze ondergrond Grijze kaarten op wit oogden als een formulier. Omgedraaid: het papier is de kaart, de pagina eromheen is de rustige grijstoon. ========================================================================= */ :root { --canvas: #f1f2f1; --surface: #ffffff; --surface-2: #fafafa; --band: #e6e8e6; --line: #e2e4e2; --line-strong: #cfd2cf; --accent-wash: #f4f5f4; } [data-thema="donker"] { --canvas: #111211; --surface: #1c1d1c; --surface-2: #232423; --band: #191a19; --line: #2e302e; --line-strong: #3c3e3c; --accent-wash: #232423; } /* De competitie- en clubkop staan op hetzelfde papier als de kaarten eronder. */ .ov-hero--compact, .ov-clubkop { background: var(--surface); } .ov-hero--compact .ov-hero__logo { background: var(--surface); } .ov-header__bar { background: var(--surface); } /* Een kaart op grijs heeft nauwelijks een rand nodig; een zachte schaduw geeft hem meer lucht dan een lijn. */ .ov-panel, .ov-match, .ov-cijfer, .ov-ranglijst, .ov-clubkaart, .ov-league { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } [data-thema="donker"] .ov-panel, [data-thema="donker"] .ov-match, [data-thema="donker"] .ov-cijfer, [data-thema="donker"] .ov-ranglijst, [data-thema="donker"] .ov-clubkaart, [data-thema="donker"] .ov-league { box-shadow: none; } .ov-ranglijst, .ov-cijfer, .ov-clubkaart, .ov-league { background: var(--surface); } .ov-tabel tbody tr:hover { background: var(--surface-2); } .ov-tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 70%, transparent); } /* ========================================================================= Index als uitklapmenu's ========================================================================= */ .ov-index { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: var(--s5) 0 0; border: 0; position: relative; } .ov-menu-uit { position: relative; } .ov-menu-uit > summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink-heading); cursor: pointer; list-style: none; white-space: nowrap; } .ov-menu-uit > summary::-webkit-details-marker { display: none; } .ov-menu-uit > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-2px) rotate(45deg); } .ov-menu-uit[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .ov-menu-uit > summary:hover { border-color: var(--line-strong); } .ov-menu-uit[open] > summary { border-color: var(--accent); color: var(--accent); } .ov-menu-uit__aantal { font-size: 11px; font-weight: 600; color: var(--ink-muted); background: var(--band); border-radius: var(--r-pill); padding: 1px 6px; } .ov-menu-uit__lijst { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 210px; display: grid; gap: 1px; list-style: none; margin: 0; padding: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); } .ov-menu-uit__lijst a { display: block; padding: 6px var(--s3); border-radius: var(--r-sm); font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; } .ov-menu-uit__lijst a:hover { background: var(--band); color: var(--accent); } @media (max-width: 700px) { .ov-index { flex-direction: column; gap: var(--s1); } .ov-menu-uit > summary { justify-content: space-between; } .ov-menu-uit__aantal { margin-left: auto; } .ov-menu-uit__lijst { position: static; box-shadow: none; margin-top: var(--s1); min-width: 0; } } /* ========================================================================= Absentielijst met clubfilter ========================================================================= */ .ov-filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); } .ov-filter__knop { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; } .ov-filter__knop img { width: 16px; height: 16px; object-fit: contain; } .ov-filter__knop:hover { border-color: var(--line-strong); } .ov-filter__knop.is-actief { background: var(--accent); border-color: var(--accent); color: #fff; } .ov-absenties { list-style: none; margin: 0; padding: 0; } .ov-absentie { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s5); border-bottom: 1px solid var(--line); font-size: 15px; } .ov-absentie:last-child { border-bottom: 0; } .ov-absentie[hidden] { display: none; } .ov-absentie__club { flex: none; display: flex; } .ov-absentie__club img { width: 22px; height: 22px; object-fit: contain; } /* * Naam en reden zitten in een eigen blok. Op een breed scherm staan ze naast * elkaar, op een smal onder elkaar - en dan hoeven ze niet met een marge op de * portretbreedte te worden uitgelijnd, want ze delen dezelfde linkerkant. */ .ov-absentie__wie { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--s3); } .ov-absentie__naam { font-weight: 600; color: var(--ink-heading); } .ov-absentie__reden { color: var(--ink-muted); font-size: 14px; } @media (max-width: 620px) { /* * De reden gaat naar de tweede regel en begint precies onder de naam: het * portret is 30 breed en de tussenruimte 12, dus 42. Met een kleine regelval * ertussen blijft de rij zo laag mogelijk. */ .ov-absentie { gap: var(--s3); padding: 7px var(--s4); } .ov-absentie__wie { display: block; } .ov-absentie__naam { display: block; } .ov-absentie__reden { display: block; font-size: 13px; line-height: 1.3; } } /* De nummer een ook op desktop op ware grootte. */ .ov-toplijst__rij--eerste .ov-portret--lijst { width: 66px; height: 66px; } .ov-rij--eerste .ov-portret { width: 66px; height: 66px; } .ov-toplijst__rij--eerste .ov-toplijst__naam { font-size: 18px; } .ov-toplijst__rij--eerste .ov-toplijst__waarde { font-size: 24px; } /* ========================================================================= Koppen in inkt in plaats van zwart Puur zwart is de enige kleur op de pagina die nergens vandaan komt. Deze diepe inkt heeft het groen van het palet in zich: op body-formaat leest hij als zwart, op displayformaat zie je waar hij bij hoort. ========================================================================= */ :root { --ink-heading: #122019; } [data-thema="donker"] { --ink-heading: #eef2ef; } /* ========================================================================= Ruimte terug in de stand De kolom "#" was 61 pixels breed voor een getal van twee cijfers, en de cijferkolommen droegen elk twintig pixels padding aan beide kanten mee. Die ruimte gaat naar de clubnaam. ========================================================================= */ .ov-tabel--stand th .ov-sorteer { padding-inline: var(--s3); } .ov-tabel--stand td { padding-inline: var(--s3); } .ov-tabel--stand th:first-child .ov-sorteer, .ov-tabel--stand td:first-child { padding-left: var(--s4); padding-right: 4px; } .ov-tabel--stand .ov-rang { width: 20px; } /* ========================================================================= De nummer een in de toplijsten op de competitiepagina ========================================================================= */ .ov-rij--eerste .ov-speleercel { gap: var(--s4); } .ov-rij--eerste .ov-clubcel--klein { font-size: 14px; } /* Een tabel op volle breedte verdeelt de overgebleven ruimte over alle kolommen, dus werd elke cijferkolom breder in plaats van smaller. De clubkolom slokt hem nu helemaal op; de cijfers krimpen daarmee tot hun eigen breedte. */ .ov-tabel--stand th:nth-child(2), .ov-tabel--stand td:nth-child(2) { width: 100%; } /* ========================================================================= Koppen: duidelijk groen in plaats van bijna-zwart #122019 bleek nog steeds als zwart te lezen. Deze toon is onmiskenbaar een diep bosgroen en houdt op wit een contrast van ruim 9:1. ========================================================================= */ :root { --ink-heading: #1e4030; } [data-thema="donker"] { --ink-heading: #e8f2ec; } /* ========================================================================= Programma en uitslagen Geen "thuis tegen" en "uit bij" meer in de regel, maar een klein label aan het eind. De clubnaam en het logo krijgen de ruimte die dat oplevert. ========================================================================= */ .ov-duel-rij__tegen img { width: 30px; height: 30px; } .ov-duel-rij__tegen strong { font-size: 16px; } .ov-duel-rij { padding-block: var(--s3); } .ov-waar { flex: none; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .ov-waar--thuis { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); } .ov-waar--uit { background: var(--neutral-bg); color: var(--neutral-tx); border-color: var(--neutral-ln); } /* Winst, gelijk of verlies naast een uitslag mag net zo goed leesbaar zijn als de rest van de regel. */ .ov-duel-rij .ov-vorm__winst, .ov-duel-rij .ov-vorm__gelijk, .ov-duel-rij .ov-vorm__verlies { width: 24px; height: 24px; font-size: 12px; } /* ========================================================================= Zoekveld "Zoek club of wedstrijd" paste niet; het label is korter en het veld ruimer. ========================================================================= */ .ov-search__input { width: 210px; } @media (max-width: 900px) { .ov-search__input { width: 100%; } } /* De clubnaam in een duelregel kon niet krimpen: een strong in een flexrij houdt zijn eigen minimumbreedte vast en duwde de pil eroverheen. Nu afkappen. */ .ov-duel-rij__tegen strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 620px) { /* De speelronde is bijzaak zodra de ruimte krap wordt. */ .ov-duel-rij__ronde { display: none; } .ov-duel-rij { gap: var(--s2); padding-inline: var(--s4); } .ov-duel-rij__tijd { font-size: 12px; } .ov-waar { padding-inline: 7px; } } /* ========================================================================= Duelregels in kolommen De pil stond direct achter de clubnaam en verschoof dus per regel mee met de lengte van die naam. Vaste breedtes zetten alles onder elkaar. ========================================================================= */ .ov-duel-rij__ronde { width: 96px; } .ov-duel-rij__tegen { flex: 1 1 auto; min-width: 0; } .ov-waar { width: 56px; justify-content: center; padding-inline: 0; } .ov-duel-rij__tijd { width: 106px; text-align: right; } .ov-duel-rij__score { width: 62px; justify-content: center; text-align: center; } /* Een gestaakt of afgelast duel draagt een woord onder de stand, en dat past niet in de vaste breedte hierboven. Alleen die ene regel wijkt dus af - wat meteen laat zien dat er iets bijzonders aan de hand is. */ .ov-duel-rij__score--open { width: auto; min-width: 62px; display: flex; flex-direction: column; line-height: 1.15; padding-block: 3px; } .ov-duel-rij__vlag { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); } @media (max-width: 620px) { .ov-duel-rij__tijd { width: 86px; } .ov-duel-rij__score { width: 54px; } .ov-duel-rij__score--open { width: auto; min-width: 54px; } } /* ========================================================================= Symbolen bij blessures en schorsingen Een kaart voor een schorsing is de taal van het spel zelf; een kruis en een vraagteken zeggen de rest zonder woorden. ========================================================================= */ .ov-status { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; } .ov-status svg { width: 20px; height: 20px; display: block; } .ov-status--out { color: var(--danger-tx); } .ov-status--twijfel { color: var(--warn-tx); } .ov-status--rood { color: #d42a2a; } .ov-status--geel { color: #e0a800; } /* De kaarten krijgen een dunne donkere rand, anders zweeft een geel vlak op wit. */ .ov-status--rood svg rect, .ov-status--geel svg rect { stroke: rgba(0, 0, 0, .35); stroke-width: 1.2; } [data-thema="donker"] .ov-status--rood svg rect, [data-thema="donker"] .ov-status--geel svg rect { stroke: rgba(255, 255, 255, .3); } .ov-statuscel { width: 60px; } /* ========================================================================= Filteren op clublogo Achttien knoppen met naam vulden drie regels en lazen als een opsomming. Alleen het wapen: negen naast elkaar op desktop, zes op een telefoon. ========================================================================= */ .ov-filter { display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--s2); } .ov-filter__knop { display: grid; place-items: center; padding: 7px; gap: 0; } .ov-filter__knop img { width: 28px; height: 28px; } .ov-filter__knop--alle { font-size: 13px; font-weight: 600; } @media (max-width: 700px) { .ov-filter { grid-template-columns: repeat(6, 1fr); } .ov-filter__knop { padding: 6px; } .ov-filter__knop img { width: 24px; height: 24px; } .ov-filter__knop--alle { font-size: 12px; } } /* ========================================================================= De rangkolom in de stand Vijftig pixels voor een getal van twee cijfers. Het getal mag vrijwel tegen de rand staan; dat scheelt genoeg om de tabel op een telefoon te laten passen. ========================================================================= */ .ov-tabel--stand th:first-child .ov-sorteer, .ov-tabel--stand td:first-child { padding-left: var(--s3); padding-right: 2px; } .ov-tabel--stand .ov-rang { width: 18px; } @media (max-width: 780px) { .ov-tabel--stand th:first-child .ov-sorteer, .ov-tabel--stand td:first-child { padding-left: 6px; padding-right: 2px; } .ov-tabel--stand .ov-rang { width: 15px; } .ov-tabel--stand th .ov-sorteer { padding-inline: var(--s2); } .ov-tabel--stand td { padding-inline: var(--s2); } } /* ========================================================================= De uitslag kleurt naar het resultaat ========================================================================= */ .ov-duel-rij__score--winst { background: var(--ok-bg); color: var(--ok-tx); } .ov-duel-rij__score--gelijk { background: var(--neutral-bg); color: var(--neutral-tx); } .ov-duel-rij__score--verlies { background: var(--danger-bg); color: var(--danger-tx); } /* ========================================================================= Het woordmerk ========================================================================= */ .ov-header .ov-logo__line2 { color: #00b96c; } /* Op de smalste telefoons (320px) is er nog vijftien pixels te weinig; een kortere clubnaam brengt ook die binnen het scherm. */ @media (max-width: 359px) { .ov-tabel--stand .ov-clubcel span { max-width: 30vw; } } /* De merkregel had een ondermarge uit de tijd dat er een lead en drie cijfers onder stonden. Die zijn weg, de marge bleef staan, en samen met de ongelijke padding hing het blok te hoog. Nu echt in het midden. */ .ov-hero--compact { padding-block: var(--s8); } .ov-hero--compact .ov-hero__merk { margin-bottom: 0; } /* ========================================================================= Vooruitblik op de eerstvolgende wedstrijd ========================================================================= */ .ov-vooruit { padding: var(--s6) var(--s5); } .ov-vooruit__duel { display: flex; align-items: center; justify-content: center; gap: var(--s4); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); } .ov-vooruit__zijde { display: flex; align-items: center; gap: var(--s3); flex: 1 1 0; min-width: 0; font-size: 17px; } .ov-vooruit__zijde strong { color: var(--ink-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-vooruit__zijde img { width: 34px; height: 34px; object-fit: contain; flex: none; } .ov-vooruit__zijde--tegen { justify-content: flex-end; text-align: right; } .ov-vooruit__xg { padding-block: var(--s5); } .ov-vooruit__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s3); text-align: center; } .ov-vooruit__balk { height: 10px; border-radius: 999px; background: var(--danger-bg); overflow: hidden; } .ov-vooruit__eigen { display: block; height: 100%; background: var(--accent); } .ov-vooruit__cijfers { display: flex; justify-content: space-between; margin-top: var(--s2); font-family: var(--font-display); font-size: 22px; color: var(--ink-heading); } .ov-vooruit__kansen { list-style: none; margin: 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } .ov-vooruit__kansen li { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); background: var(--surface-2); border-radius: var(--r-card); } .ov-vooruit__kansen span { font-size: 12px; color: var(--ink-muted); } .ov-vooruit__kansen strong { font-family: var(--font-display); font-size: 19px; color: var(--ink-heading); } /* ========================================================================= Thuis/uit-tabel ========================================================================= */ .ov-tabel--splitsing th:first-child, .ov-tabel--splitsing td:first-child { width: 100%; } .ov-tabel--splitsing { min-width: 0; } /* ========================================================================= Mobiel: geen zijwaarts schuiven in de spelerslijsten, en een uitslag blijft altijd op een regel ========================================================================= */ @media (max-width: 780px) { /* Topscorers en assists pasten niet. De club is uit zijn eigen kolom gehaald en staat nu onder de spelersnaam: altijd zichtbaar, en het scheelt breedte. */ .ov-duo .ov-tabel { min-width: 0; } .ov-duo .ov-tabel th .ov-sorteer { padding-inline: var(--s2); } .ov-duo .ov-tabel td { padding-inline: var(--s2); } .ov-duo .ov-tabel td:first-child { padding-left: var(--s3); } .ov-duo .ov-tabel .ov-tabel__naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; display: inline-block; vertical-align: middle; } .ov-vooruit__cijfers { font-size: 19px; } .ov-vooruit__zijde { font-size: 15px; } .ov-vooruit__zijde img { width: 28px; height: 28px; } } /* Een uitslag hoort nooit over twee regels te breken. */ .ov-duel-rij__score { white-space: nowrap; flex: none; } /* De club onder de spelersnaam in de toplijsten. */ .ov-speleercel__club { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-muted); text-decoration: none; } .ov-speleercel__club img { width: 15px; height: 15px; object-fit: contain; flex: none; } .ov-speleercel__club:hover { color: var(--accent); } /* De naam en de club onder elkaar mogen samen niet breder worden dan de cel. Beide kappen af; het portret krimpt mee op een telefoon. */ .ov-speleercel__club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 780px) { .ov-duo .ov-speleercel { gap: var(--s3); } .ov-duo .ov-portret { width: 34px; height: 34px; } .ov-duo .ov-tabel .ov-tabel__naam { max-width: 40vw; } .ov-duo .ov-speleercel__club { max-width: 40vw; } } /* "ASSISTS" is een bredere kop dan "GOALS" en duwde die tabel vijf pixels over de rand. Krappere kolompadding vangt dat op, met marge. */ @media (max-width: 780px) { .ov-duo .ov-tabel th.ov-num .ov-sorteer { padding-inline: 5px; } .ov-duo .ov-tabel td.ov-num { padding-inline: 5px; } .ov-duo .ov-tabel td:last-child, .ov-duo .ov-tabel th:last-child .ov-sorteer { padding-right: var(--s3); } } /* Op 360px is er nog vijftien pixels te weinig: naam en club iets korter. */ @media (max-width: 400px) { .ov-duo .ov-tabel .ov-tabel__naam, .ov-duo .ov-speleercel__club { max-width: 34vw; } } /* Nog drie pixels op 360px: ook hier mag het rangnummer tegen de rand. */ @media (max-width: 780px) { .ov-duo .ov-tabel th:first-child .ov-sorteer, .ov-duo .ov-tabel td:first-child { padding-left: var(--s2); padding-right: 2px; } .ov-duo .ov-tabel .ov-rang { width: 16px; } } /* Zelfde truc als bij de stand: laat de spelerskolom alle overgebleven ruimte opslokken, dan krimpen de cijferkolommen tot hun eigen breedte in plaats van de rest mee omhoog te duwen. */ .ov-duo .ov-tabel th:nth-child(2), .ov-duo .ov-tabel td:nth-child(2) { width: 100%; } .ov-duo .ov-tabel { min-width: 0; } /* Topscorers en assists naast elkaar, elk een halve breedte. */ .ov-ranglijsten--duo { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); } /* De club onder de naam is hier een link; zonder onderstreping blijft de lijst rustig. */ a.ov-toplijst__club { text-decoration: none; } a.ov-toplijst__club:hover { color: var(--accent); text-decoration: underline; } /* ========================================================================= Wedstrijdpagina ========================================================================= */ .ov-duelkop { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--s5) var(--s8); } .ov-duelkop__titel { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.03em; max-width: 22ch; margin: var(--s2) 0 var(--s6); } .ov-duelkop__ploegen { display: flex; align-items: center; gap: var(--s5); } .ov-duelkop__ploeg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s4); text-decoration: none; color: var(--ink); } .ov-duelkop__ploeg img { width: 64px; height: 64px; object-fit: contain; flex: none; } .ov-duelkop__ploeg strong { display: block; font-size: 20px; color: var(--ink-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-duelkop__ploeg em { display: block; font-style: normal; font-size: 13px; color: var(--ink-muted); } .ov-duelkop__ploeg:hover strong { color: var(--accent); } .ov-duelkop__ploeg--uit { flex-direction: row-reverse; text-align: right; } .ov-duelkop__tegen { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .ov-duelkop__stadion { margin: var(--s5) 0 0; font-size: 14px; color: var(--ink-muted); } /* --- De ploegen naast elkaar --------------------------------------------- */ .ov-tabel--vergelijk { min-width: 0; } .ov-tabel--vergelijk th:nth-child(2), .ov-tabel--vergelijk td:nth-child(2) { width: 100%; text-align: center; } .ov-tabel--vergelijk th:nth-child(2) { text-align: center; } .ov-vergelijk__label { color: var(--ink-soft); font-size: 14px; } .ov-tabel--vergelijk td:first-child { text-align: right; } .ov-tabel--vergelijk td:last-child { text-align: left; } .ov-tabel--vergelijk th:last-child .ov-sorteer { justify-content: flex-start; } /* --- Onderling ------------------------------------------------------------ */ .ov-h2h { padding: var(--s6) var(--s5); } .ov-h2h__balans { display: flex; align-items: stretch; gap: var(--s2); margin-bottom: var(--s5); } .ov-h2h__deel { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s4) var(--s3); border-radius: var(--r-card); text-align: center; } .ov-h2h__deel strong { font-family: var(--font-display); font-size: 28px; line-height: 1; } .ov-h2h__deel em { font-style: normal; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .ov-h2h__deel--thuis { background: var(--ok-bg); color: var(--ok-tx); } .ov-h2h__deel--gelijk { background: var(--neutral-bg); color: var(--neutral-tx); } .ov-h2h__deel--uit { background: var(--info-bg); color: var(--info-tx); } .ov-h2h__cijfers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } .ov-h2h__cijfers li { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); background: var(--surface-2); border-radius: var(--r-card); } .ov-h2h__cijfers span { font-size: 12px; color: var(--ink-muted); } .ov-h2h__cijfers strong { font-family: var(--font-display); font-size: 19px; color: var(--ink-heading); } .ov-duels--h2h { border-top: 1px solid var(--line); } .ov-duels--h2h .ov-duel-rij__zijde { font-size: 14px; } .ov-duels--h2h .ov-duel-rij__tijd { width: 74px; text-align: left; } /* --- Doorklikken vanuit een programmaregel ------------------------------- */ .ov-duel-rij__link { text-decoration: none; color: var(--accent); font-weight: 600; } .ov-duel-rij__link:hover { text-decoration: underline; } @media (max-width: 700px) { .ov-duelkop__ploegen { gap: var(--s3); } .ov-duelkop__ploeg img { width: 44px; height: 44px; } .ov-duelkop__ploeg { gap: var(--s3); } .ov-duelkop__ploeg strong { font-size: 16px; } .ov-duelkop__tegen { font-size: 11px; } .ov-h2h__deel strong { font-size: 22px; } .ov-duels--h2h .ov-duel-rij__zijde span { display: none; } } /* ========================================================================= Regellengte Een max-width op tekst is er voor de leesbaarheid: bij meer dan ongeveer vijfenzeventig tekens per regel raakt het oog de volgende regel kwijt. Dat geldt voor lopende tekst. Bij de wedstrijdkop was de grens veel te krap gezet - tweeentwintig tekens duwde de titel over drie regels terwijl er ruimte zat. Die staat nu op een breedte waar hij in twee regels past. ========================================================================= */ .ov-duelkop__titel { max-width: 34ch; } .ov-uitleg-kort { max-width: 68ch; } /* De kop van de wedstrijd draagt nu ook het kruimelpad. */ .ov-duelkop { padding-top: var(--s5); } .ov-duelkop .ov-kruimels { padding-top: 0; padding-bottom: var(--s5); } /* ========================================================================= Spelers om op te letten ========================================================================= */ .ov-tabel--spelers { min-width: 0; } .ov-tabel--spelers th:first-child, .ov-tabel--spelers td:first-child { width: 100%; } @media (max-width: 780px) { .ov-tabel--spelers th .ov-sorteer, .ov-tabel--spelers td { padding-inline: var(--s2); } .ov-tabel--spelers td:first-child { padding-left: var(--s3); } .ov-tabel--spelers .ov-tabel__naam { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } .ov-tabel--spelers .ov-portret { width: 34px; height: 34px; } .ov-tabel--spelers .ov-rij--eerste .ov-portret { width: 48px; height: 48px; } } /* Volledige namen kunnen lang zijn ("Bryan Catharina Anna Petronell Linssen"). De basisstijl houdt een spelersnaam op een regel, en dan duwt zo'n naam de hele tabel over de rand. Hier mag hij afbreken. */ .ov-tabel--spelers .ov-tabel__naam { white-space: normal; } /* Op een telefoon passen vier kolommen niet. Het rapportcijfer valt af; goals en assists zijn waar het bij een vooruitblik om draait. */ @media (max-width: 780px) { .ov-tabel--spelers th:last-child, .ov-tabel--spelers td:last-child { display: none; } } /* De laatste pixels op smalle telefoons: kortere naam, kleiner portret, en de vergelijkingstabel krapper. */ @media (max-width: 400px) { .ov-tabel--spelers .ov-tabel__naam { max-width: 26vw; } .ov-tabel--spelers .ov-portret { width: 30px; height: 30px; } .ov-tabel--spelers .ov-rij--eerste .ov-portret { width: 42px; height: 42px; } .ov-tabel--spelers .ov-speleercel { gap: var(--s2); } .ov-tabel--vergelijk th .ov-sorteer, .ov-tabel--vergelijk td { padding-inline: var(--s2); } .ov-vergelijk__label { font-size: 13px; } } /* Goals en assists naast de spelersnaam in de wedstrijdlijsten. */ .ov-toplijst--duel { padding: 0 var(--s5); } .ov-duelstat { flex: none; display: flex; gap: var(--s4); } .ov-duelstat__deel { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 34px; } .ov-duelstat__deel strong { font-family: var(--font-display); font-size: 17px; line-height: 1.1; color: var(--ink-heading); } .ov-duelstat__deel em { font-style: normal; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); } .ov-toplijst__rij--eerste .ov-duelstat__deel strong { font-size: 22px; } @media (max-width: 400px) { .ov-toplijst--duel { padding-inline: var(--s4); } .ov-duelstat { gap: var(--s3); } .ov-duelstat__deel { min-width: 30px; } } /* ========================================================================= Thuis en uit Het thuislabel was groen, net als een gewonnen uitslag. Twee verschillende dingen in dezelfde kleur naast elkaar leest verkeerd. Thuis is nu blauw, uit blijft neutraal; groen en rood zijn voortaan alleen voor het resultaat. ========================================================================= */ .ov-waar--thuis { background: var(--info-bg); color: var(--info-tx); border-color: var(--info-ln); } .ov-waar--uit { background: var(--neutral-bg); color: var(--neutral-tx); border-color: var(--neutral-ln); } /* ========================================================================= Doelpunten van een gespeelde wedstrijd ========================================================================= */ .ov-duelkop__uitslag { flex: none; font-family: var(--font-display); font-size: 30px; font-variant-numeric: tabular-nums; color: var(--ink-heading); background: var(--band); border-radius: var(--r-card); padding: 4px var(--s4); white-space: nowrap; } .ov-goals { list-style: none; margin: 0; padding: 0; } .ov-goal { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5); border-bottom: 1px solid var(--line); font-size: 15px; } .ov-goal:last-child { border-bottom: 0; } .ov-goal__minuut { flex: none; width: 42px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-muted); } .ov-goal__logo { width: 22px; height: 22px; object-fit: contain; flex: none; } .ov-goal__wie { min-width: 0; } .ov-goal__wie strong { color: var(--ink-heading); } .ov-goal__wie em { display: block; font-style: normal; font-size: 12px; color: var(--ink-muted); } /* ========================================================================= De hele duelregel klikbaar Een regel binnen een link zetten kan niet, want er staan andere links in. In plaats daarvan legt de eerste link een onzichtbaar vlak over de hele regel; alles wat erop volgt komt daar met z-index bovenuit als dat nodig is. ========================================================================= */ .ov-duel-rij { position: relative; } .ov-duel-rij__strek::after { content: ""; position: absolute; inset: 0; } .ov-duel-rij:hover { background: var(--surface-2); } .ov-duel-rij:hover .ov-duel-rij__strek strong, .ov-duel-rij:hover .ov-duel-rij__strek span { color: var(--accent); } /* De uitslag en de tijd blijven leesbaar boven het vlak. */ .ov-duel-rij__score, .ov-duel-rij__tijd, .ov-waar { position: relative; } /* ========================================================================= De wedstrijdkop op een telefoon Twee ploegblokken naast elkaar plus een uitslag ertussen passen niet op 390 pixels: het uitlogo schoof over de score heen. Op smalle schermen staat elke ploeg daarom in een eigen kolom met het wapen boven de naam, en de uitslag ertussen. ========================================================================= */ @media (max-width: 700px) { .ov-duelkop__ploegen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); } .ov-duelkop__ploeg { flex-direction: column; text-align: center; gap: var(--s2); min-width: 0; } /* Bij de uitploeg staat de naam in de bron voor het wapen, zodat de rij op desktop gespiegeld leest. In een kolom moet dat weer omgekeerd. */ .ov-duelkop__ploeg--uit { flex-direction: column-reverse; } .ov-duelkop__ploeg img { width: 48px; height: 48px; } .ov-duelkop__ploeg strong { font-size: 15px; white-space: normal; overflow-wrap: anywhere; } .ov-duelkop__ploeg em { font-size: 12px; } .ov-duelkop__uitslag { font-size: 26px; padding-inline: var(--s3); } .ov-duelkop__tegen { writing-mode: horizontal-tb; } } /* De onderlinge ontmoetingen: op een telefoon alleen de wapens, netjes rond de uitslag in plaats van tegen de randen. */ @media (max-width: 700px) { .ov-duels--h2h .ov-duel-rij { gap: var(--s2); } .ov-duels--h2h .ov-duel-rij__zijde { flex: 1 1 0; justify-content: flex-end; } .ov-duels--h2h .ov-duel-rij__zijde--uit { justify-content: flex-start; } .ov-duels--h2h .ov-duel-rij__tijd { width: 66px; } } /* De thuis/uit-tabel liep op 360px zestien pixels over de rand. */ @media (max-width: 400px) { .ov-tabel--splitsing th .ov-sorteer, .ov-tabel--splitsing td { padding-inline: var(--s2); } .ov-tabel--splitsing td:first-child { font-size: 14px; } } /* De naam mag afkappen zodat het script kan meten of hij past. */ .ov-absentie__naam { overflow: hidden; white-space: nowrap; text-overflow: clip; } /* ========================================================================= Onderlinge ontmoetingen op een telefoon De uitploeg staat in row-reverse, dus flex-start legde zijn wapen juist tegen de buitenrand in plaats van tegen de uitslag. Beide kanten nu naar het midden. ========================================================================= */ @media (max-width: 700px) { .ov-duels--h2h .ov-duel-rij__zijde, .ov-duels--h2h .ov-duel-rij__zijde--uit { justify-content: flex-end; } } /* ========================================================================= De hele duelregel als één klikvlak Het oude trucje met ::after op de eerste link liet de uitslag en de tijd buiten schot; juist het midden van de regel deed dan niets. Nu ligt er een echte link over de volle breedte, en is de rest van de regel gewone tekst. ========================================================================= */ .ov-duel-rij--klik .ov-duel-rij__vlak { position: absolute; inset: 0; z-index: 2; border-radius: var(--r-sm); } .ov-duel-rij--klik:hover { background: var(--surface-2); } .ov-duel-rij--klik:hover .ov-duel-rij__zijde span, .ov-duel-rij--klik:hover .ov-duel-rij__tegen strong { color: var(--accent); } .ov-duel-rij--klik:focus-within { background: var(--surface-2); } .ov-duel-rij--klik .ov-duel-rij__vlak:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ========================================================================= Het veld met de elf ========================================================================= */ .ov-elftallen { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .ov-elftallen__voet { margin: var(--s4) 0 0; } /* * Zelfde watermerk als bij de vooruitblik: het wapen groot en bijna weg, zodat * je over wie het gaat al ziet voordat je een naam leest. Het veld eronder is * groen en dekt af, dus het merk raakt alleen de kop en de bank. */ .ov-elftal { position: relative; padding: var(--s5); overflow: hidden; } .ov-elftal::after { content: ""; position: absolute; right: -30px; top: -30px; width: 190px; height: 190px; background: var(--ov-wapen) center / contain no-repeat; opacity: .05; pointer-events: none; } .ov-elftal > * { position: relative; z-index: 1; } [data-thema="donker"] .ov-elftal::after { opacity: .08; } .ov-elftal__kop { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .ov-elftal__kop img { width: 28px; height: 28px; object-fit: contain; flex: none; } .ov-elftal__kop strong { display: block; color: var(--ink-heading); font-size: 16px; } .ov-elftal__kop em { display: block; font-style: normal; font-size: 12px; color: var(--ink-muted); } .ov-veld { position: relative; display: flex; flex-direction: column-reverse; justify-content: space-between; gap: var(--s3); min-height: 470px; padding: var(--s5) var(--s2); border-radius: var(--r-card); background: var(--pitch); } /* Een middenstip en een zestien: net genoeg om een veld te suggereren. */ .ov-veld__gras { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .ov-veld__gras::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255, 255, 255, .13); } .ov-veld__cirkel { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; } .ov-veld__zestien { position: absolute; left: 50%; bottom: 0; width: 46%; height: 62px; margin-left: -23%; border: 1px solid rgba(255, 255, 255, .13); border-bottom: 0; } .ov-veld__lijn { position: relative; display: flex; justify-content: space-evenly; align-items: flex-start; gap: var(--s1); } .ov-veld__speler { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; text-align: center; } /* De speler zelf: pasfoto in een rondje, rugnummer rechtsonder tegen de rand. */ .ov-veld__portret { position: relative; display: block; width: 56px; height: 56px; } .ov-veld__portret img, .ov-veld__leeg { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); } .ov-veld__nr { position: absolute; right: -2px; bottom: -2px; min-width: 20px; height: 20px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--deep); color: var(--ink-on-deep); border: 1px solid rgba(255, 255, 255, .55); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .ov-veld__naam { max-width: 92px; font-size: 11px; line-height: 1.25; color: var(--ink-on-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Een speler waar de bronnen het niet over eens zijn krijgt een gestippelde rand. */ .ov-veld__speler.is-twijfel .ov-veld__portret img, .ov-veld__speler.is-twijfel .ov-veld__leeg { box-shadow: none; border: 2px dashed rgba(255, 255, 255, .75); } /* ========================================================================= Tooltip bij een omstreden plek Toont wie de andere bronnen daar verwachten. Werkt op hover en op focus, zodat hij op een telefoon met een tik ook opengaat. ========================================================================= */ .ov-tip { position: absolute; top: -4px; right: -8px; z-index: 3; } .ov-tip__punt { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #04170e; font-size: 10px; font-weight: 700; line-height: 1; cursor: help; } .ov-tip__blok { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 150px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--deep); color: var(--ink-on-deep); font-size: 11px; line-height: 1.35; text-align: center; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; } .ov-tip__blok span { display: block; font-size: 10px; color: rgba(255, 255, 255, .65); text-transform: uppercase; letter-spacing: .05em; } .ov-tip__blok strong { display: block; color: #fff; font-size: 12px; } .ov-tip__blok::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-bottom-color: var(--deep); } /* De buitenste spelers van een linie: tegen de rand aan in plaats van gecentreerd. */ .ov-tip--start .ov-tip__blok { left: -8px; transform: none; } .ov-tip--start .ov-tip__blok::after { left: 22px; } .ov-tip--eind .ov-tip__blok { left: auto; right: -8px; transform: none; } .ov-tip--eind .ov-tip__blok::after { left: auto; right: 18px; } .ov-tip:hover .ov-tip__blok, .ov-tip:focus .ov-tip__blok, .ov-tip:focus-visible .ov-tip__blok { opacity: 1; visibility: visible; } .ov-tip:focus-visible { outline: none; } .ov-tip:focus-visible .ov-tip__punt { outline: 2px solid #fff; outline-offset: 1px; } @media (max-width: 460px) { .ov-veld { min-height: 420px; } .ov-veld__portret, .ov-veld__portret img, .ov-veld__leeg { width: 46px; height: 46px; } .ov-veld__nr { min-width: 18px; height: 18px; font-size: 10px; } .ov-veld__naam { max-width: 70px; font-size: 10px; } } /* ========================================================================= Wissels en bank ========================================================================= */ .ov-wissels { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 2px; } .ov-wissel { display: grid; grid-template-columns: 38px 1fr; align-items: baseline; gap: 2px var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 13px; } .ov-wissel:last-child { border-bottom: 0; } .ov-wissel__min { grid-row: span 2; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .ov-wissel__in { color: var(--ok-tx); } .ov-wissel__uit { color: var(--ink-muted); } .ov-wissel__in::before, .ov-wissel__uit::before { display: inline-block; width: 12px; font-weight: 700; } .ov-wissel__in::before { content: "\2191"; } .ov-wissel__uit::before { content: "\2193"; } .ov-bank { margin-top: var(--s4); } .ov-bank__kop { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s2); } .ov-bank__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); } .ov-bank__speler { display: flex; align-items: baseline; gap: var(--s2); padding: 3px 0; font-size: 13px; color: var(--ink-soft); min-width: 0; } .ov-bank__nr { flex: none; width: 20px; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .ov-bank__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-bank__min { flex: none; font-size: 11px; color: var(--ok-tx); } .ov-bank__speler.is-ingevallen .ov-bank__naam { color: var(--ink-heading); } /* ========================================================================= Statistiekoverzicht van een gespeelde wedstrijd Twee getallen met een balk ertussen; de balk laat de verhouding zien zonder dat je de cijfers hoeft te vergelijken. ========================================================================= */ .ov-panel--cijfers { padding: var(--s5); } .ov-cijfers__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s4); margin-bottom: var(--s3); border-bottom: 1px solid var(--line); } .ov-cijfers__kop img { width: 26px; height: 26px; object-fit: contain; } .ov-cijfers__kop span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .ov-cijfers { list-style: none; margin: 0; padding: 0; } .ov-cijfers__rij { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; align-items: center; gap: var(--s3); padding: var(--s3) 0; } .ov-cijfers__waarde { font-family: var(--font-display); font-size: 16px; color: var(--ink-heading); font-variant-numeric: tabular-nums; text-align: center; } .ov-cijfers__midden { min-width: 0; } .ov-cijfers__label { display: block; text-align: center; font-size: 12px; color: var(--ink-muted); margin-bottom: 5px; } .ov-cijfers__balk { display: flex; gap: 2px; height: 6px; } .ov-cijfers__thuis, .ov-cijfers__uit { display: block; height: 100%; border-radius: 999px; min-width: 2px; } .ov-cijfers__thuis { background: var(--accent); } .ov-cijfers__uit { background: var(--ink-soft); } /* Nul tegen nul: geen kleur, want er valt niets te verdelen. */ .ov-cijfers__rij.is-nul .ov-cijfers__thuis, .ov-cijfers__rij.is-nul .ov-cijfers__uit { background: var(--band); } /* ========================================================================= Doelpuntenmakers naast de clubnaam in de wedstrijdkop Ze stonden eerst in een eigen blok eronder; dat kostte een schermhoogte voor vijf regels tekst. ========================================================================= */ .ov-duelkop__kant { flex: 1 1 0; min-width: 0; } .ov-duelkop__goals { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 3px; } .ov-duelkop__goals li { display: flex; align-items: baseline; gap: var(--s2); font-size: 13px; min-width: 0; } .ov-duelkop__kant--uit .ov-duelkop__goals li { flex-direction: row-reverse; } .ov-duelkop__min { flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .ov-duelkop__wie { color: var(--ink-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-duelkop__wie i { font-style: normal; color: var(--ink-muted); font-size: 12px; } @media (max-width: 700px) { .ov-duelkop__goals li { font-size: 12px; gap: 5px; } .ov-duelkop__wie i { display: none; } } /* ========================================================================= Afwezigen onder een opstelling Bij een gespeelde wedstrijd is een blok met foto's te veel gewicht voor wat dan alleen nog achtergrond is; dit zegt hetzelfde in een regel. ========================================================================= */ .ov-afwezig { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); } .ov-afwezig__kop { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; } .ov-afwezig__lijst { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } /* ========================================================================= Aftraptijd op de plek van een uitslag In een lijst waar de meeste regels een uitslag tonen, hoort de tijd van een nog te spelen wedstrijd op dezelfde plek te staan; anders springt de kolom. ========================================================================= */ .ov-duel-rij__tijd--midden { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.25; min-width: 62px; text-align: center; } .ov-duel-rij__tijd--midden i { font-style: normal; font-weight: 600; color: var(--ink-heading); } /* ========================================================================= Mobiel: clubnamen in duellijsten 'ADO Den Haag' werd 'ADO Den ...'. Een paar punten kleiner scheelt genoeg om de meeste namen heel te laten. ========================================================================= */ @media (max-width: 700px) { .ov-duel-rij { font-size: 13px; gap: var(--s2); } .ov-duel-rij__zijde { font-size: 12.5px; gap: 6px; } .ov-duel-rij__zijde img { width: 20px; height: 20px; } .ov-duel-rij__score { padding: 2px 7px; } .ov-duel-rij__tijd { font-size: 12px; } .ov-duel-rij__tijd--midden { min-width: 54px; } } /* Op 360 px sneuvelden 'Sparta Rotterdam' en 'Go Ahead Eagles' nog; alles wat geen naam is levert hier een paar pixels in. */ @media (max-width: 420px) { .ov-duel-rij { padding-inline: 8px; gap: 4px; } .ov-duel-rij__zijde { font-size: 11px; gap: 5px; } .ov-duel-rij__zijde img { width: 16px; height: 16px; } .ov-duel-rij__score { padding: 2px 5px; font-size: 12px; } .ov-duel-rij__tijd { font-size: 11px; } .ov-duel-rij__tijd--midden { min-width: 46px; } } /* ========================================================================= De aftraptijd in plaats van het woord 'tegen' ========================================================================= */ .ov-duelkop__aftrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--ink-heading); font-variant-numeric: tabular-nums; background: var(--band); border-radius: var(--r-card); padding: var(--s3) var(--s4); } .ov-duelkop__aftrap i { font-family: var(--font-body, inherit); font-style: normal; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } /* Een gestaakt duel draagt een woord onder de stand, in dezelfde vorm als de aftraptijd hierboven: het cijfer groot, de toelichting klein. Zonder dat woord staat er een eindstand die het niet is. */ .ov-duelkop__uitslag--open { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; padding-block: var(--s3); } .ov-duelkop__vlag { font-family: var(--font-body, inherit); font-style: normal; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } /* ========================================================================= De elf nog eens als lopende tekst ========================================================================= */ .ov-elftal__zin { margin: var(--s4) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); } .ov-elftal__zin strong { color: var(--ink-heading); font-weight: 600; } /* ========================================================================= Wanneer de voorspelling voor het laatst is bijgewerkt ========================================================================= */ .ov-bijgewerkt { margin: var(--s4) 0 0; font-size: 13px; color: var(--ink-muted); } .ov-bijgewerkt time { color: var(--ink-soft); } /* ========================================================================= Nederlanders bij een buitenlandse wedstrijd ========================================================================= */ .ov-landgenoten { list-style: none; margin: 0; padding: 0; } .ov-landgenoten > li + li { border-top: 1px solid var(--line); } .ov-landgenoot { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: var(--s4); /* Het paneel heeft zelf geen marge, dus die zit hier. */ padding: var(--s4) var(--s5); } .ov-landgenoot .ov-portret { width: 42px; height: 42px; } /* Naam en club op een regel: de positie zei niets wat de rij nodig had. */ .ov-landgenoot__wie { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); min-width: 0; } .ov-landgenoot__naam { color: var(--ink-heading); font-size: 16px; font-weight: 600; line-height: 1.3; } .ov-landgenoot__club { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 14px; } .ov-landgenoot__club img { width: 18px; height: 18px; object-fit: contain; flex: none; } /* * Het oordeel rechts, met een streep in de kleur van de uitkomst. Een pil zou * hier te veel worden - er staan er tien onder elkaar - en een streep geeft * dezelfde informatie zonder de rij vol te zetten. */ .ov-landgenoot__oordeel { justify-self: end; text-align: right; max-width: 20rem; padding-right: var(--s3); border-right: 3px solid var(--neutral-ln); } .ov-landgenoot__oordeel strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink-heading); } .ov-landgenoot__oordeel span { font-size: 13px; color: var(--ink-soft); } .ov-landgenoot__oordeel--in { border-right-color: var(--accent); } .ov-landgenoot__oordeel--twijfel { border-right-color: var(--warn-tx); } .ov-landgenoot__oordeel--uit { border-right-color: var(--danger-tx); } /* * Op mobiel valt de rechterkolom weg en werd elke speler vier regels hoog: zes * spelers vulden een heel scherm, grotendeels met wit. Het oordeel staat nu * achter een stip op een regel onder de naam, dus een speler is twee regels. */ @media (max-width: 620px) { .ov-landgenoot { grid-template-columns: 38px 1fr; align-items: start; gap: 3px var(--s3); padding: var(--s3) var(--s4); } .ov-landgenoot .ov-portret { width: 38px; height: 38px; grid-row: 1 / span 2; } .ov-landgenoot__wie { gap: 0 var(--s2); } .ov-landgenoot__naam { font-size: 15px; } .ov-landgenoot__club { font-size: 13px; } .ov-landgenoot__club img { width: 15px; height: 15px; } .ov-landgenoot__oordeel { grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; justify-self: start; text-align: left; max-width: none; padding: 0; border: 0; } /* Een stip in plaats van een streep - die past naast de tekst. */ .ov-landgenoot__oordeel::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral-ln); transform: translateY(-1px); } .ov-landgenoot__oordeel strong { display: inline; font-size: 13px; } .ov-landgenoot__oordeel span { font-size: 13px; } .ov-landgenoot__oordeel--in::before { background: var(--accent); } .ov-landgenoot__oordeel--twijfel::before { background: var(--warn-tx); } .ov-landgenoot__oordeel--uit::before { background: var(--danger-tx); } } /* ========================================================================= De wedstrijden op de homepage ========================================================================= */ /* * De kop is kort gehouden: de wedstrijden moeten zonder scrollen in beeld * komen. Een bezoeker komt voor de opstelling van vanavond, niet voor een * introductie. */ .ov-hero--kort { padding-block: var(--s10) var(--s10); } .ov-hero--kort .ov-hero__title { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: var(--s3); } .ov-hero--kort .ov-hero__lead { font-size: 16px; margin-bottom: 0; } .ov-section--strak { padding-block: var(--s8); } .ov-dagkop { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); } .ov-dagacties { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); } /* --- Competitieknoppen --------------------------------------------------- */ .ov-comprij { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); } .ov-chip { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 54px; height: 54px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); /* * Wit op de grijze pagina, net als de kaarten: het papier is de kaart. Grijs * op grijs liep in elkaar over - de pagina is hier #f1f2f1 en niet wit, wat * verderop in dit bestand pas wordt gezet. */ background: var(--surface); color: var(--ink-soft); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.15; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; } .ov-chip--alles { width: auto; height: 54px; padding: 8px var(--s4); } .ov-chip--alles-mobiel { display: none; } /* * De uitklapknop bestaat alleen op een telefoon. Op een breed scherm wrapt de * rij vanzelf door en staat elke competitie er gewoon; daar valt niets in te * klappen en zou een "+2" een knop zijn die niets doet. */ .ov-chip--meer { display: none; } /* * Elk competitielogo op een eigen wit tegeltje, altijd. Niet elk logo heeft een * doorzichtige achtergrond: Serie A levert een dicht wit vierkant aan en de * Bundesliga bijna. Die werden op de actieve knop een wit blok. Met een tegel * eronder valt dat vierkant samen met de tegel en staat elk logo in zijn eigen * kleuren, licht of donker, actief of niet. */ .ov-chip img { width: 40px; height: 40px; padding: 1px; box-sizing: border-box; object-fit: contain; flex: none; background: #fff; border-radius: 4px; } .ov-chip:hover { border-color: var(--accent); color: var(--ink-heading); } .ov-chip--alles.is-actief { background: var(--accent); border-color: var(--accent); color: #fff; } .ov-chip:not(.ov-chip--alles).is-actief { background: var(--surface); border-color: var(--accent); box-shadow: 0 3px 10px rgba(0, 103, 69, .12); } .ov-chip:not(.ov-chip--alles).is-actief::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); } @media (max-width: 700px) { /* * Vier kolommen: elke logoknop krijgt dezelfde breedte. De knop voor alle * competities staat rechts van de dagwisselaar, zodat acht competities * precies twee rijen vullen. */ .ov-comprij { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: var(--s2); } .ov-chip { width: 100%; height: 54px; padding: 0; min-width: 0; } .ov-chip img { width: 40px; height: 40px; } .ov-chip--alles { width: auto; height: 36px; padding: 7px 10px; font-size: 12px; } .ov-chip--alles-desktop { display: none; } .ov-chip--alles-mobiel { display: inline-flex; } /* * Twee rijen van vier. Wat daar niet in past staat wel in de pagina maar * verborgen; de achtste tegel is de knop die het uitklapt. Met negen * competities is dat "+2", en dan zijn dat de Süper Lig en de Pro League - * de twee die het laatst in het register staan. */ .ov-chip--inklap { display: none; } .ov-chip--meer { display: inline-flex; } .ov-comprij.is-uitgeklapt .ov-chip--inklap { display: inline-flex; } .ov-comprij.is-uitgeklapt .ov-chip--meer { display: none; } /* * De knop draagt een getal en geen logo, dus hij mag wat rustiger staan dan * een competitietegel. Het blijft dezelfde maat: hij is de achtste tegel van * het raster en hoort er niet uit te steken. */ .ov-chip--meer { font-size: 15px; font-weight: 700; color: var(--ink-muted); background: var(--surface-2, var(--surface)); } /* * Geen :hover hier. Op een telefoon blijft die na een tik hangen, en deze * knop verdwijnt juist bij die tik - dan staat de hoverkleur op een knop die * er niet meer is. Zie de menuknop, waar dat eerder misging. */ @media (hover: hover) { .ov-chip--meer:hover { color: var(--ink); } } .ov-dagacties { width: 100%; justify-content: space-between; gap: 6px; } .ov-dagacties .ov-dagwissel__label { min-width: 6rem; } .ov-dagacties .ov-dagwissel__knop { width: 34px; height: 34px; } } /* --- Een competitie binnen een dag --------------------------------------- */ .ov-dagcomp { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; margin-bottom: var(--s4); } .ov-dagcomp__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--line); } .ov-dagcomp__naam { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .ov-dagcomp__naam img { width: 22px; height: 22px; object-fit: contain; flex: none; } .ov-dagcomp__naam h3 { font-size: 15px; font-weight: 700; color: var(--ink-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * De naam is de link. Alleen de kop reageert op hover; de h3 blijft een kop en * krijgt dus geen linkkleur - anders leest de kop als een knop. */ a.ov-dagcomp__naam { text-decoration: none; } @media ( hover: hover ) { a.ov-dagcomp__naam:hover h3 { color: var(--accent); } } a.ov-dagcomp__naam:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* --- De wedstrijdregels --------------------------------------------------- */ .ov-duellijst { list-style: none; margin: 0; padding: 0; } .ov-duellijst > li + li { border-top: 1px solid var(--line); } .ov-duelregel { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; } a.ov-duelregel:hover { background: var(--accent-wash); } .ov-duelregel__wanneer { color: var(--ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; } .ov-duelregel__wanneer strong { color: var(--ink-heading); font-size: 14px; } .ov-duelregel__ploegen { display: grid; gap: 3px; min-width: 0; } .ov-duelregel__ploeg { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .ov-duelregel__ploeg img { width: 22px; height: 22px; object-fit: contain; flex: none; } .ov-duelregel__ploeg span { font-size: 15px; font-weight: 600; color: var(--ink-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-duelregel__staat { justify-self: end; } @media (max-width: 560px) { /* * Alles op een regel, ook op een telefoon. De pil zakte hier naar een eigen * rij eronder, en dat kostte per wedstrijd een halve regel hoogte - met een * volle speeldag scheelt dat een half scherm scrollen voor niets. * * Hij past wel degelijk naast de namen: de tijdkolom is smaller, de pil * krijgt kleinere letters en minder lucht, en de namenkolom mag krimpen * (minmax met 0) zodat een lange clubnaam afkapt in plaats van de pil weg te * duwen. */ .ov-duelregel { grid-template-columns: 42px minmax( 0, 1fr ) auto; gap: var(--s2); padding: var(--s2) var(--s3); } .ov-duelregel__staat { justify-self: end; } .ov-duelregel__staat .ov-pill { padding: 2px var(--s2); font-size: 11px; } .ov-duelregel__ploeg span { font-size: 14px; } .ov-duelregel__ploeg img { width: 20px; height: 20px; } } /* * Op een heel smal scherm zakt de pil alsnog naar een eigen regel. Daar wint de * clubnaam: "Nog niet bekend" naast "Borussia Monchengladbach" past niet, en dan * kapt de naam af terwijl juist die naam is waarvoor iemand kijkt. Een halve * regel hoogte is dat waard. */ @media (max-width: 359px) { .ov-duelregel { grid-template-columns: 42px minmax( 0, 1fr ); row-gap: var(--s1); } .ov-duelregel__staat { grid-column: 2; justify-self: start; } } /* ========================================================================= Dagwisselaar op de homepage ========================================================================= */ /* * Een geheel in plaats van drie losse blokjes: pijl, dag, pijl in een pil die * bij de competitieknoppen hoort. Drie randjes naast elkaar oogde als een * formulier uit een ander tijdperk. */ .ov-dagwissel { display: inline-flex; align-items: center; flex: none; align-self: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); overflow: hidden; } .ov-dagwissel__knop { width: 40px; height: 38px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-muted); cursor: pointer; transition: color .12s ease, background .12s ease; } .ov-dagwissel__knop svg { width: 18px; height: 18px; } .ov-dagwissel__knop:hover:not(:disabled) { background: var(--accent); color: #fff; } .ov-dagwissel__knop:disabled { opacity: .3; cursor: default; } .ov-dagwissel__label { min-width: 10.5rem; padding-inline: var(--s2); text-align: center; color: var(--ink-heading); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; /* Lijnen links en rechts, zodat de pijlen bij de pil horen en niet erop. */ border-inline: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; } @media (max-width: 780px) { .ov-dagwissel__label { min-width: 7.5rem; font-size: 13px; } .ov-dagwissel__knop { width: 36px; height: 36px; } } /* ========================================================================= Lopende tekst, zoals op Over ons ========================================================================= */ .ov-tekstblok { padding: var(--s6) var(--s6) var(--s5); max-width: 68ch; } .ov-tekstblok p { margin: 0 0 var(--s4); color: var(--ink-soft); font-size: 16px; line-height: 1.75; } .ov-tekstblok__lead { font-size: 18px !important; color: var(--ink-heading) !important; } .ov-tekstblok h2 { margin: var(--s6) 0 var(--s3); color: var(--ink-heading); font-size: 19px; font-weight: 600; } .ov-tekstblok h2:first-child { margin-top: 0; } .ov-tekstblok__lijst { margin: 0 0 var(--s4); padding-left: var(--s5); color: var(--ink-soft); font-size: 16px; line-height: 1.9; } /* ========================================================================= Veelgestelde vragen ========================================================================= */ .ov-vragen { padding: var(--s2) var(--s5); } .ov-vraag { border-bottom: 1px solid var(--line); } .ov-vraag:last-child { border-bottom: 0; } .ov-vraag__kop { padding: var(--s4) var(--s6) var(--s4) 0; position: relative; color: var(--ink-heading); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; } .ov-vraag__kop::-webkit-details-marker { display: none; } .ov-vraag__kop::after { content: ""; position: absolute; right: var(--s2); top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .15s ease; } .ov-vraag[open] .ov-vraag__kop::after { transform: rotate(-135deg); margin-top: -2px; } .ov-vraag__antwoord { margin: 0; padding: 0 var(--s6) var(--s4) 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; } /* ========================================================================= Speelminuten en vorm, onder de spelers om op te letten ========================================================================= */ .ov-section__head--tweede { margin-top: var(--s6); } .ov-section__subtitel { margin: 0; color: var(--ink-heading); font-size: 18px; font-weight: 600; } .ov-tabel--vorm td { vertical-align: middle; } .ov-tabel--vorm .ov-portret { width: 34px; height: 34px; } .ov-portret--leeg { display: inline-block; border-radius: 50%; background: var(--neutral-bg); } .ov-leeg-cel { color: var(--ink-muted); } /* * De vorm als woord, niet als cijfer. Een 6,1 leest als een preciezer oordeel * dan het is; de kleur doet het werk dat het getal zou doen. */ .ov-vormmerk { display: inline-block; padding: 2px var(--s2); border-radius: var(--r-sm); font-size: 12px; font-weight: 600; white-space: nowrap; } .ov-vormmerk--uitstekend { background: var(--ok-bg); color: var(--ok-tx); } .ov-vormmerk--sterk { background: var(--ok-bg); color: var(--ok-tx); } .ov-vormmerk--degelijk { background: var(--neutral-bg); color: var(--neutral-tx); } .ov-vormmerk--wisselend { background: var(--warn-bg); color: var(--warn-tx); } .ov-vormmerk--zwak { background: var(--danger-bg); color: var(--danger-tx); } /* ========================================================================= De vooruitblik per ploeg op de wedstrijdpagina ========================================================================= */ .ov-vooruitblikken { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); } /* * Dit blok is het enige stuk lopende tekst op de pagina en las als een rapport: * zwarte letters op wit, even groot als de tabellen eromheen. Het is geschreven * werk en mag er ook zo uitzien - iets ruimer gezet, met het clubwapen flauw op * de achtergrond zodat je ziet over wie het gaat voordat je leest. */ .ov-vooruitblik { position: relative; padding: var(--s6); overflow: hidden; } /* Het wapen, groot en bijna weg. Nooit onder de tekst uit. */ .ov-vooruitblik::after { content: ""; position: absolute; right: -30px; top: -30px; width: 190px; height: 190px; background: var(--ov-wapen) center / contain no-repeat; opacity: .05; pointer-events: none; } .ov-vooruitblik > * { position: relative; z-index: 1; } /* Op een donker vlak verdwijnt vijf procent; daar mag het iets steviger. */ [data-thema="donker"] .ov-vooruitblik::after { opacity: .08; } .ov-vooruitblik__club { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 2px solid var(--accent); color: var(--ink-heading); font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .ov-vooruitblik__club img { width: 30px; height: 30px; object-fit: contain; flex: none; } /* * Ruimte tussen de alinea's, want daar is de indeling voor bedoeld. Met margin * nul stonden ze tegen elkaar aan en las het alsnog als een lap tekst. */ .ov-vooruitblik__tekst { margin: 0 0 var(--s4); max-width: 62ch; color: var(--ink); font-size: 16px; line-height: 1.75; } /* * Alle alinea's even zwaar. De eerste kreeg een maat extra omdat daar het * nieuws in hoort te staan, maar een punt verschil zag niemand, en het meer * geven zou een belofte zijn die de tekst niet altijd waarmaakt: de opening is * lang niet altijd het nieuws. */ .ov-vooruitblik__tekst:last-child { margin-bottom: 0; } @media (max-width: 560px) { .ov-vooruitblik { padding: var(--s5); } .ov-vooruitblik__club { font-size: 17px; } .ov-vooruitblik__tekst { font-size: 15px; } } /* ========================================================================= Vermoedelijke opstellingen op de competitiepagina ========================================================================= */ .ov-voorspellingen { display: grid; /* * Breder dan 320: bij die maat paste een kaart drie keer naast elkaar op een * scherm waar de clubnamen dat niet deden. Liever een kolom minder dan een * naam die halverwege ophoudt. */ grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--s4); } .ov-voorspelling { padding: var(--s5); } .ov-voorspelling__kop { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); color: var(--ink-heading); text-decoration: none; } .ov-voorspelling__kop:hover .ov-voorspelling__duel span { text-decoration: underline; } .ov-voorspelling__duel { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-weight: 600; font-size: 15px; } .ov-voorspelling__duel img { width: 24px; height: 24px; object-fit: contain; flex: none; } /* * Geen afkapping meer. Past het toch niet - Borussia Mönchengladbach tegen * Eintracht Frankfurt past op geen enkele kaartbreedte - dan liever een tweede * regel dan een naam met puntjes. */ .ov-voorspelling__duel span { min-width: 0; } .ov-voorspelling__tijd { color: var(--ink-muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; } .ov-voorspelling .ov-elftal__zin { margin-top: var(--s3); } .ov-elftal__zin--leeg { font-style: italic; } /* ========================================================================= Melding boven een teruggevallen opstelling ========================================================================= */ .ov-melding { margin: 0; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-muted); font-size: 14px; line-height: 1.5; } @media (max-width: 700px) { .ov-duelkop__aftrap { font-size: 20px; padding: var(--s2) var(--s3); } .ov-duelkop__aftrap i { font-size: 10px; } } /* ========================================================================= De zoekbalk: suggesties tijdens het typen, en de resultatenpagina ========================================================================= */ /* Het uitklapvlak hangt onder het invoerveld en mag over alles heen; de headerbalk zelf staat op z-index 40. */ .ov-search { position: relative; } .ov-zoeksug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; min-width: 240px; padding: var(--s1); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); overflow: hidden; } .ov-zoeksug__rij { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; line-height: 1.3; } .ov-zoeksug__rij img { flex: none; width: 22px; height: 22px; object-fit: contain; } .ov-zoeksug__naam { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-zoeksug__comp { flex: none; font-size: 12px; color: var(--ink-muted); } .ov-zoeksug__rij:hover, .ov-zoeksug__rij.is-actief { background: var(--accent-wash); color: var(--ink-heading); } [data-thema="donker"] .ov-zoeksug__rij:hover, [data-thema="donker"] .ov-zoeksug__rij.is-actief { background: rgba(255, 255, 255, .07); } .ov-zoeksug__leeg { margin: 0; padding: var(--s3); color: var(--ink-muted); font-size: 14px; } /* De resultatenpagina: per club een kaart met de volgende en de vorige wedstrijd eronder. */ .ov-zoekuitslag { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); } .ov-zoekuitslag__club { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; } .ov-zoekuitslag__kop { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-heading); text-decoration: none; } .ov-zoekuitslag__kop img { flex: none; width: 34px; height: 34px; object-fit: contain; } .ov-zoekuitslag__kop span { display: flex; flex-direction: column; min-width: 0; } .ov-zoekuitslag__kop strong { font-family: var(--font-display); font-size: 18px; line-height: 1.2; } .ov-zoekuitslag__kop small { color: var(--ink-muted); font-size: 13px; } .ov-zoekuitslag__kop:hover strong { color: var(--accent); } /* De duelregels binnen de kaart hebben de rand van de kaart zelf al. */ .ov-zoekuitslag .ov-duels { margin: 0; } .ov-zoekuitslag .ov-leeg { padding: 0; margin: 0; font-size: 14px; } /* Het aantal treffers onder de kop. Niet ov-hero__lead: die is wit, want hij hoort bij de donkere hero, en op de lichte compacte kop is hij onzichtbaar. */ .ov-zoekaantal { margin: var(--s2) 0 0; color: var(--ink-soft); font-size: 16px; } /* ========================================================================= Mobiel: het paneel duidelijker, en zoeken vanuit de balk Drie dingen die niet klopten. De knop bleef grijs staan na een tik, want :hover blijft op een telefoon hangen en zei zo niets meer. Hij bleef ook drie streepjes tonen terwijl het menu al openstond. En het paneel zelf was wit op een bijna witte pagina - je zag niet waar het ophield. ========================================================================= */ .ov-zoekknop { display: none; } @media (max-width: 900px) { /* --- De twee knoppen rechts in de balk --- */ .ov-zoekknop { display: grid; place-items: center; flex: none; margin-left: auto; width: 42px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink-heading); cursor: pointer; } .ov-zoekknop svg { width: 18px; height: 18px; } /* Het vergrootglas duwt het paar nu naar rechts; de hamburger hoeft dat niet meer zelf te doen, anders staan ze uit elkaar. */ .ov-menuknop { margin-left: 0; } /* Aanraken is geen hoveren: zonder dit bleef de knop grijs staan nadat je hem had losgelaten. */ .ov-menuknop:hover, .ov-zoekknop:hover { background: var(--surface); } /* Open is een stand, en die hoort te zien te zijn - dit is een handeling, dus hier mag het groen. */ .ov-menuknop[aria-expanded="true"], .ov-zoekknop[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink-on-deep); } /* --- Van hamburger naar kruisje --- */ .ov-menuknop__streepjes { display: block; position: relative; width: 16px; height: 12px; } .ov-menuknop__streepjes i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: currentColor; transition: transform .18s ease, opacity .12s ease, top .18s ease; } .ov-menuknop__streepjes i:nth-child(1) { top: 0; } .ov-menuknop__streepjes i:nth-child(2) { top: 5px; } .ov-menuknop__streepjes i:nth-child(3) { top: 10px; } .ov-menuknop[aria-expanded="true"] .ov-menuknop__streepjes i:nth-child(1) { top: 5px; transform: rotate(45deg); } .ov-menuknop[aria-expanded="true"] .ov-menuknop__streepjes i:nth-child(2) { opacity: 0; } .ov-menuknop[aria-expanded="true"] .ov-menuknop__streepjes i:nth-child(3) { top: 5px; transform: rotate(-45deg); } /* --- Het paneel --- */ .ov-zoek-open .ov-menu { display: flex; } .ov-menu { gap: var(--s4); padding: var(--s5); background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); box-shadow: 0 22px 44px rgba(0, 0, 0, .3); } /* In het donker is wegvallen tegen de pagina het grootste risico; daar mag het paneel een tint lichter zijn dan waar het overheen ligt. */ [data-thema="donker"] .ov-menu { background: var(--surface); } /* Het vlak eronder dooft de pagina. Dat maakt in een klap duidelijk waar het paneel ophoudt, en een tik erop sluit het weer. Onder de balk (z-index 40) en boven de inhoud. */ .ov-menu-open .ov-main::before, .ov-zoek-open .ov-main::before { content: ''; position: fixed; inset: 0; z-index: 35; background: rgba(10, 10, 10, .5); } /* Elke knop laat zijn eigen helft van het paneel zien. Het zoekveld dat ook nog eens in het menu stond was een tweede weg naar hetzelfde. */ .ov-menu-open .ov-menu .ov-search { display: none; } .ov-zoek-open .ov-menu .ov-nav, .ov-zoek-open .ov-menu .ov-thema { display: none; } /* De competities eerst, de weergave onderaan: de volgorde uit de balk zet de schakelaar er anders bovenop. */ .ov-menu .ov-nav { order: 1; } .ov-menu .ov-thema { order: 2; } } /* Alleen waar echt gehoverd kan worden. */ @media (max-width: 900px) and (hover: hover) { .ov-menuknop:hover, .ov-zoekknop:hover { background: var(--band); } .ov-menuknop[aria-expanded="true"]:hover, .ov-zoekknop[aria-expanded="true"]:hover { background: var(--accent-hover); } } /* ========================================================================= Nederlanders in het buitenland: de hub en de pagina per competitie ========================================================================= */ .ov-nl__zin { max-width: 70ch; margin: 0 0 var(--s4); color: var(--ink-soft); font-size: 16px; line-height: 1.6; } .ov-nl__h3 { font-size: 17px; margin: var(--s6) 0 var(--s3); color: var(--ink-heading); } .ov-nl__comp { color: var(--ink); text-decoration: none; font-size: 13px; white-space: nowrap; } .ov-nl__comp:hover { color: var(--accent); text-decoration: underline; } .ov-nl__terug { margin: var(--s6) 0 var(--s10); } .ov-nl__terug a { font-weight: 600; text-decoration: none; color: var(--ink-heading); } .ov-nl__terug a:hover { color: var(--accent); } /* De kleine ranglijsten: de eerste kolom niet breder dan het nummer. */ .ov-tabel--nl-top th:first-child, .ov-tabel--nl-top td:first-child { width: 1%; } .ov-tabel--nl-top .ov-speleercel__sub { display: block; } /* Per club: een kaart per club, de spelers eronder. */ .ov-nl-clubs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } .ov-nl-club { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); } .ov-nl-club__kop { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); } .ov-nl-club__kop h3 { margin: 0; font-size: 17px; min-width: 0; } .ov-nl-club__kop h3 > a, .ov-nl-club__kop h3 > span { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink-heading); text-decoration: none; min-width: 0; } .ov-nl-club__kop h3 > a:hover { color: var(--accent); } .ov-nl-club__kop img { width: 26px; height: 26px; object-fit: contain; flex: none; } .ov-nl-club__kop .ov-bijschrift { margin-left: auto; } .ov-nl-club__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .ov-nl-club__speler { display: flex; align-items: flex-start; gap: var(--s3); } .ov-nl-club__speler .ov-portret { width: 34px; height: 34px; flex: none; margin-top: 1px; } .ov-nl-club__speler > span { display: block; min-width: 0; line-height: 1.35; } .ov-nl-club__speler strong { color: var(--ink-heading); } .ov-nl-club__speler small { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 1px; } /* De hub: een kaart per competitie met de top drie. */ .ov-nl-comps { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); } .ov-nl-comp { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s5); } .ov-nl-comp__kop { display: flex; align-items: center; gap: var(--s4); color: var(--ink-heading); text-decoration: none; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); } .ov-nl-comp__kop:hover strong { color: var(--accent); } .ov-nl-comp__kop img { width: 36px; height: 36px; object-fit: contain; flex: none; } .ov-nl-comp__kop strong { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.2; } .ov-nl-comp__kop small { display: block; color: var(--ink-muted); font-size: 13px; } .ov-nl-comp__top { list-style: none; margin: 0 0 var(--s2); padding: 0; flex: 1 1 auto; } .ov-nl-comp__top li { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "foto naam min" "foto club min"; column-gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); } .ov-nl-comp__top li:last-child { border-bottom: 0; } .ov-nl-comp__top .ov-portret { grid-area: foto; width: 28px; height: 28px; } .ov-nl-comp__naam { grid-area: naam; font-weight: 500; color: var(--ink-heading); font-size: 14px; } .ov-nl-comp__club { grid-area: club; font-size: 12px; color: var(--ink-muted); } .ov-nl-comp__min { grid-area: min; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); white-space: nowrap; } /* Het competitiefilter op de hub heeft een naam naast het logo. */ .ov-filter__knop--tekst { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; padding-inline: var(--s3); } .ov-filter__knop--tekst img { width: 20px; height: 20px; } /* De top vijf op de competitiepagina staat in een gewoon paneel. */ .ov-toplijst--nl { padding: var(--s2) var(--s5) 0; } .ov-ranglijst__meer--nl { display: block; padding: var(--s3) var(--s5) var(--s4); } /* Namen in de kleine ranglijsten niet afbreken; de tabel schuift liever. */ .ov-tabel--nl-top .ov-tabel__naam { white-space: nowrap; } /* Ruim onder de kop: de compacte hero heeft zelf weinig ruimte aan de onderkant, en zonder padding plakt de intro eraan vast. Padding en geen marge, want een marge klapt hier samen met die van de hero. */ .ov-nl__intro { font-size: 17px; max-width: 66ch; color: var(--ink); margin: 0 0 var(--s2); padding-top: var(--s10); line-height: 1.6; } .ov-nl__bijgewerkt { margin: 0 0 var(--s4); font-size: 13px; color: var(--ink-muted); } /* De komende wedstrijden: een regel per wedstrijd, de Nederlanders eronder gegroepeerd op verwachting, met een stip in de kleur van die verwachting. */ .ov-nl-duels { list-style: none; margin: 0; padding: 0; } .ov-nl-duel { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); } .ov-nl-duel:last-child { border-bottom: 0; } .ov-nl-duel__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: var(--ink-heading); text-decoration: none; } .ov-nl-duel__kop:hover .ov-nl-duel__ploegen > span { color: var(--accent); } .ov-nl-duel__ploegen { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; min-width: 0; } .ov-nl-duel__ploegen img { width: 20px; height: 20px; object-fit: contain; flex: none; } .ov-nl-duel__tijd { flex: none; font-size: 13px; color: var(--ink-muted); white-space: nowrap; } .ov-nl-duel__comp { color: var(--ink-muted); } .ov-nl-duel__spelers { margin: var(--s1) 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; } .ov-nl-duel__groep { display: inline; margin-right: var(--s4); white-space: normal; } .ov-nl-duel__groep i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--neutral-tx); } .ov-nl-duel__groep--in i { background: var(--accent); } .ov-nl-duel__groep--twijfel i { background: var(--doubt); } .ov-nl-duel__groep--uit i { background: var(--danger-tx); } @media (max-width: 600px) { .ov-nl-duel { padding-inline: var(--s4); } .ov-nl-duel__kop { flex-wrap: wrap; } .ov-nl-duel__tijd { flex-basis: 100%; } .ov-nl-duel__groep { display: block; margin-right: 0; } } /* Het competitiefilter op de hub: een rij die afbreekt, niet het negenkoloms raster van de clublogo's - dat maakte de pagina op een telefoon te breed. */ .ov-filter--nl { display: flex; flex-wrap: wrap; gap: var(--s2); } .ov-filter--nl .ov-filter__knop { display: inline-flex; padding: 6px var(--s3); } /* ---------------------------------------------------- Blessures per competitie */ /* Een blok per club, met de kop als anker naar de clubpagina. */ /* * De doorverwijzing op de competitiepagina. Stond eerst in .ov-ranglijst__meer, * maar die heeft alleen padding bovenaan - bedoeld voor onder aan een kaart - * en in een leeg paneel plakte de tekst daardoor tegen de randen. */ .ov-doorlink { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); font-weight: 500; text-decoration: none; color: var(--accent); } .ov-doorlink:hover { background: var(--surface-2, rgba(0, 0, 0, .02)); } .ov-doorlink span { flex: none; } .ov-bl__club { margin-bottom: 18px; } /* Eén tabel zonder clubkop: dan hoort de bovenrand bij de tabel zelf. */ .ov-bl__schors thead th { border-top: 0; } /* * De club onder de spelersnaam in de schorsingentabel. Als eigen kolom werd de * tabel op een telefoon te breed; zo staat hij op elke breedte op een eigen * regel, met het logo ervoor. */ .ov-bl__clubcel { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .84rem; font-weight: 400; color: var(--ink-muted); text-decoration: none; } .ov-bl__clubcel img { flex: none; } a.ov-bl__clubcel:hover span { text-decoration: underline; } /* De kop van de schorsingen staat los van de blessurelijst erboven. */ .ov-bl__tweede, .ov-section__head--tweede { margin-top: var(--s10); } .ov-bl__kop { display: flex; align-items: center; gap: 10px; /* .ov-panel heeft zelf geen padding, dus die hoort hier: zonder dit plakte het clublogo tegen de rand van het blok. */ margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 1.02rem; } .ov-bl__logo { flex: 0 0 auto; } .ov-bl__telling { margin-left: auto; font-weight: 400; font-size: .82rem; color: var(--ink-muted); white-space: nowrap; } /* Een twijfelgeval is geen afwezige; hij staat er lichter bij. */ .ov-bl__twijfel td { color: var(--ink-muted); } .ov-bl__tabel td:first-child { font-weight: 600; } .ov-bl__twijfel td:first-child { font-weight: 500; } /* Even veel lucht links als de kop erboven, zodat de kolommen uitlijnen. */ .ov-bl__tabel th:first-child, .ov-bl__tabel td:first-child { padding-left: 16px; } .ov-bl__tabel th:last-child, .ov-bl__tabel td:last-child { padding-right: 16px; } /* Op een breed scherm zijn het kolommen; de samenvatting is dan dubbelop. */ .ov-bl__meta { display: none; } @media (max-width: 720px) { /* * Basis en minuten passen er niet bij op een telefoon. Ze vallen weg als * kolom en komen als een regel onder de naam terug - dezelfde cijfers, een * derde van de breedte. De laatste twee kolommen, dus dat werkt voor beide * tabellen: bij de schorsingen blijven Speler, Club en Reden staan. */ .ov-bl__tabel th:nth-last-child(-n+2), .ov-bl__tabel td:nth-last-child(-n+2) { display: none; } .ov-bl__meta { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--ink-muted); } /* * De pill achter de naam duwde de tabel over de schermbreedte heen. Op deze * breedte staat het woord "twijfel" gewoon vooraan in de regel eronder. */ .ov-bl__pill { display: none; } .ov-bl__tabel td:first-child { line-height: 1.35; } } /* ---------------------------------------------------------- Samenvatting */ /* * Alleen de verhouding en de ronding; de rest is de embed van YouTube zelf. * aspect-ratio houdt de hoogte vast zodat de pagina niet verspringt terwijl de * speler nog moet laden. */ .ov-video { aspect-ratio: 16 / 9; background: var(--ov-gras); border-radius: 10px; overflow: hidden; } .ov-video iframe { width: 100%; height: 100%; border: 0; display: block; }