/* Pim, Sarto JO11-4. Vormgeving: wedstrijdaffiche als drager, scorebord voor cijfers en het live-moment. Uitgangspunten: geen ronde hoeken, geen zachte schaduwen, geel en blauw als vlak, smalle kapitalen (Anton) voor de koppen, Barlow Condensed voor labels en cijfers. Alles moet leesbaar zijn met handschoenen aan, in de zon, op een zaterdagochtend. */ @import url('fonts.css'); :root { --papier: #efece4; --papier-diep: #e4e0d5; --inkt: #14140f; --inkt-zacht: #5a5850; --blauw: #002f9a; --blauw-diep: #001c63; --geel: #fbf800; --zwart: #14140f; /* blijft donker, ook in donkere modus */ --wit: #efece4; /* blijft licht, ook in donkere modus */ --veld: #002f9a; /* het speelveld blijft Sarto-blauw */ --bord: #0b0d12; --bord-vlak: #161a24; --bord-tekst: #f4f2e6; --bord-zwak: #8e93a3; --winst: #1c6b34; --verlies: #c22a20; --lijn: rgba(20, 20, 15, .16); --lijn-hard: var(--inkt); --tab: 62px; --onder: env(safe-area-inset-bottom, 0px); --boven: env(safe-area-inset-top, 0px); --display: 'Anton', 'Arial Narrow', Impact, sans-serif; --smal: 'Barlow Condensed', 'Arial Narrow', sans-serif; --lees: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: light dark; } /* Donkere modus: standaard volgt de app het toestel. De bezoeker kan dat onder Meer vastzetten op licht of donker; dat staat dan als data-thema op . De kleuren staan twee keer, omdat CSS geen 'of' kent tussen een media query en een attribuut. */ :root[data-thema="licht"] { color-scheme: light; } :root[data-thema="donker"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { --papier: #131310; --papier-diep: #1c1c18; --inkt: #f2efe4; --inkt-zacht: #a3a096; --blauw: #4470e8; --blauw-diep: #16296b; --lijn: rgba(242, 239, 228, .18); --lijn-hard: rgba(242, 239, 228, .5); } } :root[data-thema="donker"] { --papier: #131310; --papier-diep: #1c1c18; --inkt: #f2efe4; --inkt-zacht: #a3a096; --blauw: #4470e8; --blauw-diep: #16296b; --lijn: rgba(242, 239, 228, .18); --lijn-hard: rgba(242, 239, 228, .5); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--lees); font-size: 16px; line-height: 1.4; color: var(--inkt); background: var(--papier); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; padding-bottom: calc(var(--tab) + var(--onder)); } h1, h2, h3 { margin: 0; line-height: .95; font-weight: 400; } p { margin: 0 0 .6em; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } svg { display: block; } [hidden] { display: none !important; } ::selection { background: var(--geel); color: var(--zwart); } /* ---------- typografische bouwstenen ---------- */ .display { font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em; } .label { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; line-height: 1.1; } .cijfer { font-family: var(--smal); font-weight: 700; font-variant-numeric: tabular-nums; } .zwak { color: var(--inkt-zacht); } .klein { font-size: 14px; } .mono { font-variant-numeric: tabular-nums; } /* ---------- kop ---------- */ .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: stretch; gap: 0; padding-top: var(--boven); background: var(--zwart); color: var(--wit); border-bottom: 3px solid var(--geel); } .merk { display: flex; align-items: center; padding: 8px 10px; background: #fff; } .merk img { height: 30px; width: auto; display: block; } .top-titel { display: flex; align-items: center; gap: 10px; padding: 0 12px; flex: 1; min-width: 0; } .top-club { font-family: var(--smal); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; opacity: .7; white-space: nowrap; } .top h1 { font-family: var(--display); text-transform: uppercase; font-size: 26px; letter-spacing: .02em; } .top-rechts { margin-left: auto; display: flex; align-items: center; padding: 0 12px; background: var(--geel); color: var(--zwart); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; white-space: nowrap; } .banner { background: var(--geel); color: var(--zwart); font-family: var(--smal); font-weight: 600; font-size: 15px; padding: 8px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--inkt); } .banner button { background: var(--zwart); color: var(--geel); border: 0; padding: 6px 12px; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } /* ---------- raamwerk ---------- */ .view { max-width: 620px; margin: 0 auto; padding: 14px 14px 30px; } .laden { text-align: center; color: var(--inkt-zacht); padding: 60px 0; font-family: var(--smal); text-transform: uppercase; letter-spacing: .1em; } .sectie { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 26px 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--lijn-hard); } .sectie h2 { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; } .sectie .klein, .sectie a { font-family: var(--smal); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .kaart { background: var(--papier-diep); border: 2px solid var(--lijn-hard); padding: 14px 16px; margin-bottom: 12px; } .kaart h3 { font-family: var(--display); text-transform: uppercase; font-size: 20px; margin-bottom: 6px; } /* ---------- affiche: de volgende wedstrijd ---------- */ .affiche { border: 3px solid var(--lijn-hard); background: var(--papier); margin-bottom: 16px; position: relative; overflow: hidden; } .affiche-band { background: var(--zwart); color: var(--wit); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; } .affiche-band.afgelast { background: var(--verlies); color: #fff; } .affiche-band .rechts { letter-spacing: .06em; opacity: .8; } .affiche-kern { padding: 16px 16px 0; } .affiche-datum { display: flex; align-items: flex-start; gap: 12px; } .affiche-dag { font-family: var(--display); font-size: clamp(76px, 26vw, 116px); line-height: .78; letter-spacing: -.03em; } .affiche-dagmeta { padding-top: 6px; } .affiche-dagmeta div { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 15px; line-height: 1.25; } .affiche-dagmeta .tijd { display: inline-block; margin-top: 4px; background: var(--geel); color: var(--zwart); padding: 1px 8px; font-size: 20px; letter-spacing: .02em; } .affiche-tegen { font-family: var(--display); text-transform: uppercase; font-size: clamp(28px, 8.6vw, 44px); line-height: .92; margin: 10px 0 0; overflow-wrap: break-word; } .affiche-tegen .thuisuit { color: var(--blauw); } .affiche-meta { font-family: var(--smal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; margin: 8px 0 16px; color: var(--inkt-zacht); } .affiche-meta a { border-bottom: 2px solid var(--geel); } .affiche-adres { font-family: var(--lees); font-size: 14px; text-transform: none; letter-spacing: 0; margin: -12px 0 16px; color: var(--inkt-zacht); } .affiche-adres a { border-bottom: 2px solid var(--geel); } .affiche-strook { background: var(--geel); color: var(--zwart); border-top: 3px solid var(--zwart); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .affiche-strook > div { padding: 9px 14px; } .affiche-strook > div + div { border-left: 2px solid rgba(20,20,15,.25); } .affiche-strook dt { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; opacity: .75; } .affiche-strook dd { margin: 1px 0 0; font-family: var(--smal); font-weight: 600; font-size: 17px; line-height: 1.15; } .affiche-let { background: var(--verlies); color: #fff; padding: 8px 14px; border-top: 3px solid var(--zwart); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } .affiche-acties { display: flex; border-top: 3px solid var(--lijn-hard); } .affiche-acties > * { flex: 1; } .affiche-acties > * + * { border-left: 2px solid var(--lijn-hard); } /* ---------- knoppen ---------- */ .knop { appearance: none; border: 0; cursor: pointer; display: block; width: 100%; padding: 12px 10px; text-align: center; background: var(--papier); color: var(--inkt); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 14px; } .knop:active { background: var(--geel); color: var(--zwart); } .knop.geel { background: var(--geel); color: var(--zwart); } .knop.geel:active { background: var(--zwart); color: var(--geel); } .knop.zwart { background: var(--zwart); color: var(--wit); } .knop.blauw { background: var(--blauw); color: #fff; } .knop.rood { background: var(--verlies); color: #fff; } .knop:disabled { opacity: .4; cursor: default; } .knoppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); border: 2px solid var(--lijn-hard); margin: 14px 0; } .knoppen .knop { width: auto; border-right: 2px solid var(--lijn-hard); font-size: 13px; padding: 12px 6px; } .knoppen .knop:last-child { border-right: 0; } .knop.klein { padding: 7px 12px; font-size: 12px; } /* ---------- scorebord ---------- */ .bord { background: var(--bord); color: var(--bord-tekst); border: 3px solid var(--zwart); margin-bottom: 16px; } .bord-band { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--geel); } .bord-band .stip { display: inline-block; width: 9px; height: 9px; background: var(--verlies); border-radius: 50%; margin-right: 6px; vertical-align: -1px; animation: klop 1.6s infinite; } @keyframes klop { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .bord-kern { padding: 12px 14px 14px; } .bord-klok { font-family: var(--smal); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 60px; line-height: .9; letter-spacing: .02em; color: var(--bord-tekst); } .bord-balk { height: 6px; background: rgba(255,255,255,.14); margin: 8px 0 14px; } .bord-balk i { display: block; height: 100%; background: var(--geel); } .bord-rij { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); } .bord-rij dt { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--bord-zwak); padding-top: 2px; } .bord-rij dd { margin: 0; font-family: var(--smal); font-weight: 600; font-size: 17px; line-height: 1.25; } .bord-namen { display: flex; flex-wrap: wrap; gap: 6px; } .bord-namen span { border: 1px solid rgba(255,255,255,.3); padding: 2px 8px; font-family: var(--smal); font-weight: 600; font-size: 15px; } .bord-namen span.keeper { background: var(--geel); color: var(--zwart); border-color: var(--geel); } .bord-namen span.erin { background: var(--bord-tekst); color: var(--bord); } .bord-namen span.uitgaand { border-style: dashed; color: var(--bord-zwak); } .bord-namen .pijl { border: 0; padding: 2px 2px; color: var(--bord-zwak); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } .bord-acties { display: flex; border-top: 1px solid rgba(255,255,255,.14); } .bord-acties > * { flex: 1; background: var(--bord-vlak); color: var(--bord-tekst); } .bord-acties > * + * { border-left: 1px solid rgba(255,255,255,.14); } .bord-acties .knop:active { background: var(--geel); color: var(--zwart); } .bord-kwarten { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); } .bord-kwarten button { border: 0; background: var(--bord-vlak); color: var(--bord-zwak); padding: 10px 0; font-family: var(--smal); font-weight: 700; font-size: 15px; letter-spacing: .08em; } .bord-kwarten button + button { border-left: 1px solid rgba(255,255,255,.14); } .bord-kwarten button.actief { background: var(--geel); color: var(--zwart); } /* ---------- tijdlijn ---------- */ .tijdlijn { border-top: 2px solid var(--lijn-hard); } .tl { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--lijn); color: inherit; position: relative; } .tl.nu { background: var(--geel); color: var(--zwart); margin: 0 -14px; padding-left: 16px; padding-right: 16px; border-bottom: 2px solid var(--zwart); } .tl.gespeeld { color: var(--inkt-zacht); } .tl-datum { text-align: center; line-height: .9; } .tl-datum .dag { font-family: var(--display); font-size: 30px; } .tl-datum .maand { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } .tl-kern { min-width: 0; } .tl-kern .naam { font-family: var(--display); text-transform: uppercase; font-size: 20px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-kern .sub { font-family: var(--smal); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--inkt-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .tl.nu .tl-kern .sub, .tl.nu .tl-datum .maand { color: rgba(20,20,15,.7); } .tl-rechts { text-align: right; font-family: var(--smal); font-weight: 700; font-variant-numeric: tabular-nums; } .tl-rechts .tijd { font-size: 20px; } .tl-rechts .score { font-size: 26px; line-height: 1; } .tl-rechts .score.winst { color: var(--winst); } .tl-rechts .score.verlies { color: var(--verlies); } .tl-rechts .uitleg { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--inkt-zacht); font-weight: 600; } .tl.nu .tl-rechts .uitleg { color: rgba(20,20,15,.7); } /* merkjes */ .merkje { display: inline-block; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding: 1px 6px; border: 1.5px solid var(--lijn-hard); vertical-align: 2px; margin-left: 4px; } .merkje.thuis { background: var(--geel); border-color: var(--zwart); color: var(--zwart); } .merkje.uit { background: transparent; } .merkje.soort { background: var(--inkt); color: var(--papier); border-color: var(--inkt); } .merkje.vrij { background: transparent; color: var(--inkt-zacht); border-style: dashed; } .tl.soort-training .naam, .tl.soort-uitje .naam { font-size: 17px; } .tl.vrij .naam { color: var(--inkt-zacht); } .tl.vrij .tijd { text-decoration: line-through; color: var(--inkt-zacht); } .toon-alles { margin: -6px 0 12px; } .merkje.rood { background: var(--verlies); border-color: var(--verlies); color: #fff; } .merkje.blauw { background: var(--blauw); border-color: var(--blauw); color: #fff; } /* ---------- keuzestroken ---------- */ .strook { display: flex; gap: 0; overflow-x: auto; border: 2px solid var(--lijn-hard); margin-bottom: 12px; scrollbar-width: none; } .strook::-webkit-scrollbar { display: none; } .strook a, .strook button { flex: 0 0 auto; border: 0; background: var(--papier); color: var(--inkt); padding: 9px 14px; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; white-space: nowrap; border-right: 2px solid var(--lijn-hard); } .strook a:last-child, .strook button:last-child { border-right: 0; } .strook .actief { background: var(--zwart); color: var(--wit); } .strook .gespeeld { color: var(--inkt-zacht); } .kwartkiezer { display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--lijn-hard); margin-bottom: 12px; } .kwartkiezer button { border: 0; background: var(--papier); padding: 11px 0; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } .kwartkiezer button + button { border-left: 2px solid var(--lijn-hard); } .kwartkiezer button.actief { background: var(--zwart); color: var(--geel); } /* ---------- veld ---------- */ .veldblok { margin-bottom: 14px; } .veldkop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--zwart); color: var(--wit); padding: 6px 12px; } .veldkop h3 { font-family: var(--display); text-transform: uppercase; font-size: 18px; } .veldkop .klein { font-family: var(--smal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--geel); } .veld { position: relative; aspect-ratio: 3 / 4; background: var(--veld); border: 3px solid var(--lijn-hard); border-top: 0; } .veld .lijnen { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; } .speler { position: absolute; transform: translate(-50%, -50%); width: 84px; text-align: center; } .speler .plek { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: rgba(255,255,255,.75); margin-bottom: 2px; } .speler .naam { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; line-height: 1.05; background: var(--wit); color: var(--zwart); border: 2px solid var(--zwart); padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .speler.keeper .naam { background: var(--geel); color: var(--zwart); } .speler.leeg .naam { background: transparent; color: rgba(255,255,255,.8); border-style: dashed; border-color: rgba(255,255,255,.6); } .speler.fout .naam { background: var(--verlies); color: #fff; border-color: #fff; } .speler.bewerkbaar { cursor: pointer; } .speler.gekozen .naam, .speler.bewerkbaar:active .naam { outline: 3px solid var(--geel); outline-offset: 2px; } .bank { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 3px solid var(--lijn-hard); border-top: 0; padding: 8px 12px; background: var(--papier-diep); } .bank b { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--inkt-zacht); } .bank span { font-family: var(--smal); font-weight: 600; font-size: 15px; text-transform: uppercase; border: 1.5px solid var(--lijn-hard); padding: 1px 7px; } /* ---------- tabellen ---------- */ .tabel { width: 100%; border-collapse: collapse; font-family: var(--smal); } .tabel th { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; text-align: left; padding: 5px 6px; border-bottom: 2px solid var(--lijn-hard); color: var(--inkt-zacht); } .tabel td { padding: 7px 6px; border-bottom: 1px solid var(--lijn); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } .tabel td.r, .tabel th.r { text-align: right; } .tabel tr:last-child td { border-bottom: 0; } .tabel tr.eigen td { background: var(--geel); color: var(--zwart); font-weight: 700; } .tabel tr.dim td { color: var(--inkt-zacht); } .bord .tabel td { border-bottom-color: rgba(255,255,255,.1); } .bord .tabel th { border-bottom-color: rgba(255,255,255,.3); color: var(--bord-zwak); } .bord .tabel tr.eigen td { background: var(--geel); color: var(--zwart); } .staaf { height: 10px; background: rgba(20,20,15,.12); } .staaf i { display: block; height: 100%; background: var(--blauw); } .bord .staaf { background: rgba(255,255,255,.14); } .bord .staaf i { background: var(--geel); } /* ---------- taken, team, lijstjes ---------- */ .taak { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--lijn); } .taak:last-child { border-bottom: 0; } .taak .wat { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 17px; line-height: 1.1; } .taak .wie { font-family: var(--smal); font-weight: 500; font-size: 14px; color: var(--inkt-zacht); } .taak.leeg .wat { font-weight: 500; color: var(--inkt-zacht); text-transform: none; letter-spacing: 0; } .keuze, .invoer { width: 100%; padding: 11px 12px; border: 2px solid var(--lijn-hard); background: var(--papier); color: var(--inkt); font-family: var(--smal); font-weight: 600; font-size: 17px; appearance: none; } .keuze-wrap { position: relative; margin-bottom: 12px; } .keuze-wrap::after { content: "▾"; position: absolute; right: 13px; top: 9px; pointer-events: none; } textarea.invoer { min-height: 90px; font-family: var(--lees); font-weight: 400; font-size: 15px; } .veldregel { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .veldregel label { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--inkt-zacht); } .rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .staf { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 2px solid var(--lijn-hard); } .staf > div { padding: 12px 14px; } .staf > div + div { border-left: 2px solid var(--lijn-hard); } .staf .rol { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--inkt-zacht); } .staf .naam { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: 1; margin: 2px 0; } .staf .klein { font-family: var(--smal); font-size: 13px; } .spelers { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0; border: 2px solid var(--lijn-hard); border-bottom: 0; } .spelerkaart { padding: 9px 12px; border-bottom: 2px solid var(--lijn-hard); } .spelerkaart:nth-child(odd) { border-right: 2px solid var(--lijn-hard); } .spelerkaart .n { font-family: var(--display); text-transform: uppercase; font-size: 19px; line-height: 1; } .spelerkaart .s { font-family: var(--smal); font-weight: 500; font-size: 13px; color: var(--inkt-zacht); } /* Trainingen: een smalle regel, geen affiche. */ .training { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--lijn-hard); margin-bottom: 12px; background: var(--papier-diep); } .training .dag { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; min-width: 96px; } .training .uur { font-family: var(--smal); font-weight: 600; font-size: 17px; } .training .rest { font-size: 13px; color: var(--inkt-zacht); margin-left: auto; text-align: right; } .training.vrij .uur { text-decoration: line-through; color: var(--inkt-zacht); } /* De KNVB-flyer als twee pagina's, harde rand, geen ronde hoeken. */ .flyer { border: 2px solid var(--lijn-hard); margin-bottom: 12px; background: var(--papier-diep); } .flyer img { display: block; width: 100%; height: auto; } .flyer img + img { border-top: 2px solid var(--lijn-hard); } /* Uitnodiging om Pim op het beginscherm te zetten; verdwijnt als de app al geïnstalleerd is. */ .installeer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--zwart); color: var(--wit); border: 2px solid var(--zwart); } .installeer span { font-family: var(--smal); font-weight: 600; font-size: 15px; flex: 1; } .installeer .knop { width: auto; background: var(--geel); color: var(--zwart); padding: 9px 12px; font-size: 13px; } .installeer .weg { border: 0; background: transparent; color: var(--wit); font-size: 22px; line-height: 1; padding: 0 4px; opacity: .7; } .menu { border: 2px solid var(--lijn-hard); } .menu a, .menu button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 14px; border: 0; background: var(--papier); color: var(--inkt); text-align: left; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 17px; border-bottom: 2px solid var(--lijn-hard); } .menu a:last-child, .menu button:last-child { border-bottom: 0; } .menu .nr { font-family: var(--display); font-size: 17px; color: var(--blauw); min-width: 22px; } .menu .pijl { margin-left: auto; } .terug { display: inline-block; margin-bottom: 12px; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; border-bottom: 2px solid var(--geel); } .regels dt { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; margin-top: 12px; } .regels dd { margin: 2px 0 0; color: var(--inkt-zacht); font-size: 15px; } ol.stappen { padding-left: 22px; margin: 0; } ol.stappen li { margin: 7px 0; } ol.stappen li::marker { font-family: var(--smal); font-weight: 700; } .melding { border: 2px solid var(--lijn-hard); border-left-width: 8px; padding: 10px 12px; margin: 10px 0; font-family: var(--smal); font-weight: 600; font-size: 15px; background: var(--papier-diep); } .melding.let { border-left-color: var(--geel); } .melding.fout { border-left-color: var(--verlies); } /* ---------- tabbalk ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tab) + var(--onder)); padding-bottom: var(--onder); background: var(--zwart); border-top: 3px solid var(--geel); } .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--wit); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } .tabbar a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; } .tabbar a.actief { background: var(--geel); color: var(--zwart); } /* ---------- onderpaneel ---------- */ .sheet { position: fixed; inset: 0; z-index: 40; } .sheet-achter { position: absolute; inset: 0; background: rgba(11,13,18,.6); } .sheet-paneel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 84vh; overflow-y: auto; background: var(--papier); border-top: 3px solid var(--geel); padding: 14px 14px calc(20px + var(--onder)); animation: omhoog .18s ease-out; } @keyframes omhoog { from { transform: translateY(30px); } to { transform: none; } } .sheet h3 { font-family: var(--display); text-transform: uppercase; font-size: 22px; margin-bottom: 12px; } .kieslijst { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--lijn-hard); } .kieslijst button { border: 0; background: var(--papier); color: var(--inkt); padding: 11px 10px; text-align: left; font-family: var(--smal); font-weight: 700; text-transform: uppercase; font-size: 16px; border-bottom: 2px solid var(--lijn-hard); } .kieslijst button:nth-child(odd) { border-right: 2px solid var(--lijn-hard); } .kieslijst button small { display: block; font-weight: 500; font-size: 12px; text-transform: none; color: var(--inkt-zacht); letter-spacing: 0; } .kieslijst button.actief { background: var(--geel); color: var(--zwart); } .kieslijst button:disabled { opacity: .4; } /* ---------- kindmodus: alleen groter, niet speelser ---------- */ .kind { position: fixed; inset: 0; z-index: 50; background: var(--zwart); color: var(--wit); display: flex; flex-direction: column; padding: calc(10px + var(--boven)) 12px calc(12px + var(--onder)); } .kind .kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .kind .kop h2 { font-family: var(--display); text-transform: uppercase; font-size: 22px; } .kind .kop .zwak { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--geel); } .kind .veld { flex: 1; aspect-ratio: auto; border-color: var(--wit); } .kind .speler { width: 108px; } .kind .speler .naam { font-size: 19px; padding: 4px 6px; } .kind .speler .plek { font-size: 11px; } .kind .bank { background: var(--bord-vlak); border-color: var(--wit); color: var(--wit); } .kind .bank span { border-color: rgba(255,255,255,.4); } .kind .kwarten { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--wit); border-top: 0; } .kind .kwarten button { border: 0; background: var(--zwart); color: var(--wit); padding: 12px 0; font-family: var(--smal); font-weight: 700; font-size: 18px; } .kind .kwarten button + button { border-left: 2px solid var(--wit); } .kind .kwarten button.actief { background: var(--geel); color: var(--zwart); } /* ---------- overzicht van alle kwarten ---------- */ .alle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .alle .speler { width: 62px; } .alle .speler .naam { font-size: 11px; padding: 1px 3px; border-width: 1.5px; } .alle .speler .plek { font-size: 8px; margin-bottom: 1px; } .alle .veldkop h3 { font-size: 15px; } .alle .veldkop .klein { font-size: 10px; } .alle .bank { padding: 5px 8px; } .alle .bank b { font-size: 9px; } .alle .bank span { font-size: 12px; } @media (min-width: 620px) { .alle { grid-template-columns: repeat(4, 1fr); } .affiche-dag { font-size: 116px; } } @media (max-width: 360px) { .speler { width: 72px; } .speler .naam { font-size: 13px; } .tl-kern .naam { font-size: 18px; } } /* ---------- oude klassenamen die dezelfde vorm krijgen ---------- */ .chips { display: flex; gap: 0; overflow-x: auto; border: 2px solid var(--lijn-hard); margin-bottom: 12px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips.wrap { flex-wrap: wrap; overflow: visible; border: 0; gap: 6px; } .chip { flex: 0 0 auto; border: 0; background: var(--papier); color: var(--inkt); padding: 9px 13px; cursor: pointer; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; white-space: nowrap; border-right: 2px solid var(--lijn-hard); } .chips.wrap .chip { border: 2px solid var(--lijn-hard); padding: 7px 11px; } .chip:last-child { border-right: 0; } .chips.wrap .chip:last-child { border-right-width: 2px; } .chip.actief { background: var(--zwart); color: var(--geel); } .chip.uit { color: var(--inkt-zacht); text-decoration: line-through; } .segment { display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--lijn-hard); margin-bottom: 12px; } .segment button { border: 0; background: var(--papier); padding: 11px 0; color: var(--inkt); font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } .segment button + button { border-left: 2px solid var(--lijn-hard); } .segment button.actief { background: var(--zwart); color: var(--geel); } .segment.drie { grid-template-columns: repeat(3, 1fr); } .pil { display: inline-block; font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding: 1px 6px; border: 1.5px solid var(--lijn-hard); vertical-align: 2px; } .pil.geel { background: var(--geel); color: var(--zwart); border-color: var(--zwart); } .pil.rood { background: var(--verlies); border-color: var(--verlies); color: #fff; } .pil.groen { background: var(--winst); border-color: var(--winst); color: #fff; } table:not(.tabel) { width: 100%; border-collapse: collapse; font-family: var(--smal); } table:not(.tabel) th { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; text-align: left; padding: 5px 6px; border-bottom: 2px solid var(--lijn-hard); color: var(--inkt-zacht); } table:not(.tabel) td { padding: 7px 6px; border-bottom: 1px solid var(--lijn); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; vertical-align: top; } table:not(.tabel) td.r, table:not(.tabel) th.r { text-align: right; } table:not(.tabel) tr:last-child td { border-bottom: 0; } table:not(.tabel) tr.eigen td { background: var(--geel); color: var(--zwart); font-weight: 700; } table:not(.tabel) tr.dim td { color: var(--inkt-zacht); } .balk { height: 10px; background: rgba(20,20,15,.12); } .balk i { display: block; height: 100%; background: var(--blauw); } .veld-wrap { margin-bottom: 14px; } .veld-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--zwart); color: var(--wit); padding: 6px 12px; } .veld-kop h3 { font-family: var(--display); text-transform: uppercase; font-size: 18px; } .veld-kop .klein { font-family: var(--smal); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--geel); } .alle-kwarten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .alle-kwarten .speler { width: 62px; } .alle-kwarten .speler .naam { font-size: 11px; padding: 1px 3px; border-width: 1.5px; } .alle-kwarten .speler .plek { font-size: 8px; margin-bottom: 1px; } .alle-kwarten .veld-kop h3 { font-size: 15px; } .alle-kwarten .veld-kop .klein { font-size: 10px; } .alle-kwarten .bank { padding: 5px 8px; } .alle-kwarten .bank b { font-size: 9px; } .alle-kwarten .bank span { font-size: 12px; } @media (min-width: 620px) { .alle-kwarten { grid-template-columns: repeat(4, 1fr); } } .knop.grijs { background: var(--papier-diep); } .knop.licht { background: var(--papier); } .bord-inhoud { padding: 4px 12px 12px; } .teaser { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid var(--lijn-hard); padding: 10px 14px; margin-bottom: 12px; background: var(--papier-diep); } .teaser .teaser-tekst { font-family: var(--smal); font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; } .teaser .teaser-tekst b { font-family: var(--display); font-size: 26px; letter-spacing: 0; } .teaser .klein { font-family: var(--smal); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--inkt-zacht); } .teaser .pijl { font-size: 22px; } .score { font-family: var(--smal); font-weight: 700; font-variant-numeric: tabular-nums; } .score.winst { color: var(--winst); } .score.verlies { color: var(--verlies); } .stand-edit th, .stand-edit td { padding: 3px 2px; border: 0; } .stand-edit input.invoer { padding: 5px 6px; font-size: 15px; min-width: 44px; border-width: 1.5px; } .stand-edit td:first-child input.invoer { min-width: 120px; } .spelerkaart .nr { display: none; }