/* ========================================================================= 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); } .ov-logo__mark { display: block; flex: none; } .ov-logo__mark rect { fill: var(--deep); } .ov-logo__mark g { stroke: var(--accent-soft); } .ov-logo__mark circle:last-of-type { fill: var(--accent-soft); } .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 { 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; 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-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; } .ov-section__title { font-size: 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 in drie kolommen op een donker vlak */ .ov-uitleg { display: grid; gap: var(--s8); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ov-uitleg h3 { font-size: 19px; margin-bottom: var(--s3); } .ov-uitleg p { color: var(--ink-on-deep-soft); font-size: 16px; margin: 0; } /* ------------------------------------------------------------------------- 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(300px, 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__team { display: flex; align-items: center; gap: var(--s3); font-size: 16px; font-weight: 600; color: var(--ink-heading); } .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-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(240px, 1fr)); } .ov-league { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); 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 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); } .ov-tabel__naam { font-weight: 600; color: var(--ink-heading); white-space: nowrap; } /* 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); } .ov-footer .ov-logo__mark rect { fill: #313232; } .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(240px, 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(150px, 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__leagues { padding-block: var(--s8); border-top: 1px solid var(--line-on-deep); } .ov-footer__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } .ov-chip { display: inline-block; padding: 5px var(--s4); border-radius: var(--r-card); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 400; } .ov-chip:hover { background: var(--accent); color: #fff !important; border-color: var(--accent); } .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); }