/* Huisstijl. Alles hangt aan --merk: die zet de club bij Instellingen, PHP zet hem op , en de rest van de kleuren wordt hier afgeleid. Eén knop, hele schil mee. */ :root { --merk: #1a8140; /* Steunkleuren zijn optioneel. Zet de club er niets in, dan blijven deze afleidingen van de merkkleur staan en ziet het dashboard eruit als altijd. */ --steun-1: var(--merk); --steun-2: color-mix(in srgb, var(--merk) 8%, #fff); --merk-diep: color-mix(in srgb, var(--merk) 74%, #061109); --merk-dieper: color-mix(in srgb, var(--merk) 44%, #061109); --merk-band: var(--merk); /* de lichte kant van de kopbalk en de hoverkleur van knoppen */ --merk-licht: color-mix(in srgb, var(--merk) 80%, #fff); --merk-vlak: var(--steun-2); --merk-rand: color-mix(in srgb, var(--merk) 24%, #fff); --merk-mist: color-mix(in srgb, var(--steun-1) 55%, #fff); /* Neutralen krijgen een vleugje merk mee: bij blauw wordt het grijs koel, bij groen warm. Dat scheelt een tweede palet per club. */ --grond: color-mix(in srgb, var(--merk) 4%, #f7f8f8); --kaart: #fff; --lijn: color-mix(in srgb, var(--merk) 13%, #dcdfde); --lijn-zacht:color-mix(in srgb, var(--merk) 7%, #e9ecea); --inkt: color-mix(in srgb, var(--merk) 12%, #151b18); --tekst: color-mix(in srgb, var(--merk) 8%, #2b3330); --zacht: color-mix(in srgb, var(--merk) 9%, #6a736f); /* Stoplichtkleuren staan los van de merkkleur: een status mag niet verschuiven omdat een club toevallig rood of groen in het logo heeft. */ --goed: #15803d; --goed-vlak: #edf7f0; --goed-rand: #bfe0cb; --let: #a85a07; --let-vlak: #fdf4e6; --let-rand: #eed4a6; --stop: #b3261e; --stop-vlak: #fdefed; --stop-rand: #eec3bd; /* Avenir Next en Segoe UI liggen het dichtst bij de Bai Jamjuree van de clubsite: geometrisch, hoge x-hoogte, rustige cijfers. Geen download nodig. */ --schrift: var(--schrift-geometrisch); /* Zes web-safe stacks: elk lettertype hierin staat al op de computer van de bezoeker, dus er wordt niets gedownload en er is geen licentie in het spel. PHP zet de keuze als data-schrift op . */ --schrift-geometrisch: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --schrift-systeem: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-grotesk: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --schrift-humanist: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; --schrift-smal: "Avenir Next Condensed", "Arial Narrow", "Liberation Sans Narrow", "Segoe UI", Arial, sans-serif; --schrift-klassiek: Georgia, "Iowan Old Style", "Times New Roman", Times, serif; --r: 8px; --r-klein: 5px; --schaduw: 0 1px 2px rgba(16, 30, 24, .05), 0 1px 1px rgba(16, 30, 24, .04); } /* Overal waar witte tekst op de merkkleur staat wordt de lichtheid afgetopt: een gele of lichtblauwe club houdt zijn tint, maar de kopbalk wordt donkergoud in plaats van geel met onleesbaar wit erop. Browsers zonder relatieve kleuren houden de mengregels hierboven. */ @supports (color: oklch(from red l c h)) { :root { --merk-diep: oklch(from var(--merk) min(l, .38) c h); --merk-band: oklch(from var(--merk) min(l, .46) c h); } } html[data-schrift="systeem"] { --schrift: var(--schrift-systeem); } html[data-schrift="grotesk"] { --schrift: var(--schrift-grotesk); } html[data-schrift="humanist"] { --schrift: var(--schrift-humanist); } html[data-schrift="smal"] { --schrift: var(--schrift-smal); } html[data-schrift="klassiek"] { --schrift: var(--schrift-klassiek); } * { box-sizing: border-box; } body { margin: 0; background: var(--grond); color: var(--tekst); font: 400 15px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--inkt); font-weight: 600; letter-spacing: -.011em; } h2 { font-size: 17px; margin: 34px 0 12px; } h2:first-child { margin-top: 0; } p.uitleg { color: var(--zacht); font-size: 13.5px; margin: -7px 0 14px; max-width: 74ch; } :focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; border-radius: 3px; } /* ---------- merkbalk: clubwapen, naam, campagne ---------- */ .merkbalk { background: var(--merk-diep); background-image: linear-gradient(100deg, var(--merk-diep), var(--merk-band)); color: #fff; padding: 15px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .merk { display: flex; align-items: center; gap: 13px; min-width: 0; } .merk h1 { color: #fff; font-size: 17px; margin: 0; line-height: 1.25; } .merk p { margin: 1px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); } /* Clubwapen: de initialen van de clubnaam in een schildje. Geen bestand nodig, en het staat er ook als een club nog geen logo heeft aangeleverd. */ .wapen { flex: none; width: 40px; height: 44px; display: grid; place-items: center; background: #fff; color: var(--merk-diep); font-size: 14px; font-weight: 700; letter-spacing: .02em; border-radius: 7px 7px 15px 15px / 7px 7px 22px 22px; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); } /* Demomodus valt op in de kopbalk: niemand mag demodata voor echte cijfers aanzien. */ .demovlag { background: var(--let-vlak); color: var(--let); border: 1px solid var(--let-rand); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Een geupload logo vult hetzelfde schildje als de initialen. */ .wapen-logo { object-fit: contain; padding: 4px; } /* ---------- navigatie: dagelijks werk links, beheer achter de streep ---------- */ .navbalk { background: var(--kaart); border-bottom: 1px solid var(--lijn); padding: 0 30px; position: sticky; top: 0; z-index: 5; } nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; max-width: 1320px; } nav a { color: var(--zacht); text-decoration: none; padding: 12px 13px 11px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; } nav a:hover { color: var(--inkt); border-bottom-color: var(--lijn); } nav a.actief { color: var(--merk-diep); font-weight: 600; border-bottom-color: var(--steun-1); } nav a.bij { font-weight: 400; font-size: 13.5px; } nav .navdeler { width: 1px; height: 17px; background: var(--lijn); margin: 0 10px; flex: none; } main { padding: 26px 30px 72px; max-width: 1320px; } /* ---------- hero: het enige getal waar het bestuur op stuurt ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(230px, .85fr); background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw); margin-bottom: 20px; overflow: hidden; } .hero-hoofd { padding: 20px 24px 22px; border-inline-start: 4px solid var(--zacht); } .hero.groen .hero-hoofd { border-inline-start-color: var(--goed); } .hero.oranje .hero-hoofd { border-inline-start-color: var(--let); } .hero.rood .hero-hoofd { border-inline-start-color: var(--stop); } .hero-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .hero-label { font-size: 13px; color: var(--zacht); font-weight: 500; } .stand { font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 20px; border: 1px solid; display: inline-flex; align-items: center; gap: 6px; } .stand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .stand.groen { color: var(--goed); background: var(--goed-vlak); border-color: var(--goed-rand); } .stand.oranje { color: var(--let); background: var(--let-vlak); border-color: var(--let-rand); } .stand.rood { color: var(--stop); background: var(--stop-vlak); border-color: var(--stop-rand); } .stand.onbekend { color: var(--zacht); background: var(--merk-vlak); border-color: var(--lijn); } .hero-cijfer { font-size: 40px; font-weight: 600; line-height: 1.05; color: var(--inkt); letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-bottom: 3px; } .hero-van { margin: 0 0 13px; font-size: 13.5px; color: var(--zacht); } .hero-advies { margin: 14px 0 0; font-size: 14px; color: var(--tekst); padding-top: 13px; border-top: 1px solid var(--lijn-zacht); max-width: 62ch; } .looptijd { margin-top: 13px; } .looptijd p { margin: 0 0 5px; font-size: 12.5px; color: var(--zacht); } .hero-zij { border-inline-start: 1px solid var(--lijn); background: var(--merk-vlak); display: grid; align-content: start; } .hero-zij > div { padding: 16px 22px; } .hero-zij > div + div { border-top: 1px solid var(--lijn); } .hero-zij span { display: block; font-size: 12.5px; color: var(--zacht); } .hero-zij b { display: block; font-size: 23px; font-weight: 600; color: var(--inkt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 3px 0 1px; } .hero-zij em { font-style: normal; font-size: 12.5px; color: var(--zacht); } /* ---------- cijferstrip: de overige KPI's als één blok, niet als negen kaartjes ---------- */ /* Flex in plaats van grid: het aantal KPI's wisselt (een uitgelicht kanaal is optioneel), en alleen flex laat de laatste rij zich uitvullen in plaats van half leeg te blijven. */ .strip { display: flex; flex-wrap: wrap; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw); overflow: hidden; } .strip .tegel { flex: 1 1 190px; min-width: 190px; } .strip + .stripkop { margin-top: 20px; } .stripkop { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--zacht); text-transform: uppercase; letter-spacing: .05em; } /* Dezelfde tegel als elders, maar zonder eigen kaartrand: de scheiding komt van hairlines, zodat de strip als één blok leest in plaats van als losse kaartjes. */ .strip .tegel { border: none; border-radius: 0; box-shadow: 1px 0 0 var(--lijn-zacht), 0 1px 0 var(--lijn-zacht); } .goed { color: var(--goed) !important; } .slecht { color: var(--stop) !important; } /* Losse tegels (teamscherm, Doel) houden dezelfde taal, maar dan als kaart. */ .tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; } .tegel { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: 15px 17px 16px; box-shadow: var(--schaduw); } .tegel .label { font-size: 12.5px; color: var(--zacht); line-height: 1.35; } .tegel .waarde { font-size: 24px; font-weight: 600; color: var(--inkt); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; } .tegel .sub { font-size: 12.5px; color: var(--zacht); line-height: 1.4; } .tegel.leeg .waarde { font-size: 16px; font-weight: 400; font-style: italic; color: var(--zacht); } /* ---------- voortgangsbalk ---------- */ .balk { height: 7px; background: color-mix(in srgb, var(--merk) 9%, #e6e9e8); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; } .balk i { display: block; height: 100%; border-radius: 4px; background: var(--merk-mist); } .balk i.groen { background: var(--goed); } .balk i.oranje { background: var(--let); } .balk i.rood { background: var(--stop); } /* Voor balken die tijd tonen in plaats van prestatie: geen kleur, dus geen oordeel. */ .balk i.neutraal { background: color-mix(in srgb, var(--zacht) 52%, #fff); } .hero .balk { height: 9px; } /* ---------- tabellen ---------- */ /* Een tabel die breder is dan het scherm laat uit zichzelf nergens zien dat er nog kolommen achter de rand staan. Een vervaging aan de kant waar hij doorloopt maakt dat zichtbaar; javascript zet alleen de klassen, de opmaak zit hier. De vervaging ligt op de huls en niet op de scroller zelf, want anders zou de ondoorzichtige achtergrond van de koprij en de voetregel er overheen vallen. */ .tabelblok { position: relative; } .tabelblok::before, .tabelblok::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 46px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .15s ease; } .tabelblok::before { inset-inline-start: 1px; border-start-start-radius: var(--r); border-end-start-radius: var(--r); background: linear-gradient(to right, var(--kaart) 18%, transparent); } .tabelblok::after { inset-inline-end: 1px; border-start-end-radius: var(--r); border-end-end-radius: var(--r); background: linear-gradient(to left, var(--kaart) 18%, transparent); } .tabelblok.meer-begin::before, .tabelblok.meer-eind::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .tabelblok::before, .tabelblok::after { transition: none; } } .omhulsel { overflow-x: auto; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); box-shadow: var(--schaduw); } table { border-collapse: collapse; width: 100%; font-size: 14px; } th { background: var(--kaart); color: var(--zacht); text-align: start; padding: 10px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid color-mix(in srgb, var(--steun-1) 24%, #fff); } td { padding: 9px 14px; border-top: 1px solid var(--lijn-zacht); } @media (hover: hover) { tbody tr:hover td { background: var(--merk-vlak); } .omhulsel tbody tr:hover td:first-child { background: var(--merk-vlak); } } td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Een datum over twee regels laten breken oogt als een fout; de tabel scrollt toch al. */ td.kort { white-space: nowrap; } tfoot td { font-weight: 600; color: var(--inkt); background: color-mix(in srgb, var(--merk) 5%, #f4f6f5); border-top: 2px solid var(--lijn); } .leeg-cel { color: color-mix(in srgb, var(--zacht) 68%, #fff); font-style: italic; } .eigenrij td { background: var(--merk-vlak) !important; font-weight: 600; } /* ---------- statusvlaggen ---------- */ .vlag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid; } .vlag.toegezegd { background: #f1f3f2; color: var(--zacht); border-color: var(--lijn); } .vlag.gefactureerd { background: var(--let-vlak); color: var(--let); border-color: var(--let-rand); } .vlag.ontvangen { background: var(--goed-vlak); color: var(--goed); border-color: var(--goed-rand); } /* De statusvlag als keuzelijst in de tabel Bijdragen: dezelfde pil, met ruimte voor het pijltje. */ select.vlag { width: auto; padding: 2px 22px 2px 9px; cursor: pointer; line-height: 1.5; } /* Onderscheidingen: dezelfde pil, in de clubkleur, achter de teamnaam. */ .vlag.badge { background: var(--merk-vlak); color: var(--merk-diep); border-color: var(--merk-rand); margin-inline-start: 6px; white-space: nowrap; } /* Het podium bij een afgeronde campagne: de winnaar in het midden en het hoogst. */ .podium { list-style: none; display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 0 0 30px; padding: 0; } .podium li { flex: 1 1 0; max-width: 220px; text-align: center; padding: 14px 10px 12px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r) var(--r) 0 0; box-shadow: var(--schaduw); } .podium li b { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: var(--merk-vlak); border: 1px solid var(--merk-rand); color: var(--merk-diep); } .podium li span { display: block; font-weight: 600; color: var(--inkt); } .podium li em { font-style: normal; font-size: 12.5px; color: var(--zacht); } .podium .p1 { padding-top: 36px; background: var(--merk-vlak); border-color: var(--merk-rand); } .podium .p1 b { background: var(--merk-diep); border-color: var(--merk-diep); color: #fff; } .podium .p2 { padding-top: 24px; } /* De net opgeslagen regel licht even op, zodat je ziet dat het gelukt is en waar hij staat. */ @keyframes aangetikt { from { background: var(--goed-vlak); } to { background: transparent; } } .netgeboekt td { animation: aangetikt 1.6s ease-out; } @media (prefers-reduced-motion: reduce) { .netgeboekt td { animation: none; background: var(--goed-vlak); } } .csvregel { margin: 8px 0 0; text-align: end; } /* Een link die als knop oogt: de back-updownload is een gewone GET, geen fetch. */ a.knop { display: inline-block; font: 500 14px var(--schrift); padding: 7px 15px; border-radius: var(--r-klein); border: 1px solid var(--lijn); background: var(--kaart); color: var(--merk-diep); text-decoration: none; } a.knop:hover { background: var(--merk-vlak); border-color: var(--merk-rand); } /* De publieke tussenstand: een pagina, een getal, leesbaar op een scherm in de kantine. */ .standpagina { max-width: 860px; } /* Lijstjes onder Instellingen: wie heeft toegang, en de servercontrole. */ .controle { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; } .controle li { padding: 3px 0; } .versieregel { margin-top: 18px; } .standpagina .hero-cijfer { font-size: 48px; } /* ---------- knoppen ---------- */ button { font: 500 14px var(--schrift); padding: 7px 15px; border-radius: var(--r-klein); cursor: pointer; border: 1px solid var(--merk-diep); background: var(--merk-diep); color: #fff; } button:hover { background: var(--merk-band); border-color: var(--merk-band); } button:active { transform: translateY(1px); } button.stil { background: var(--kaart); color: var(--merk-diep); border-color: var(--lijn); } button.stil:hover { background: var(--merk-vlak); border-color: var(--merk-rand); color: var(--merk-diep); } button.mini { padding: 3px 10px; font-size: 13px; } button.gevaar { border-color: var(--lijn); color: var(--stop); background: var(--kaart); } button.gevaar:hover { background: var(--stop); border-color: var(--stop); color: #fff; } .balkje { display: flex; gap: 9px; align-items: center; margin-bottom: 13px; flex-wrap: wrap; } /* ---------- formulieren ---------- */ dialog { border: none; border-radius: var(--r); padding: 0; width: min(580px, 94vw); box-shadow: 0 18px 50px rgba(12, 24, 18, .28); } dialog::backdrop { background: color-mix(in srgb, var(--merk-dieper) 60%, transparent); } dialog h3 { margin: 0; padding: 15px 22px; color: var(--inkt); font-size: 16px; border-bottom: 1px solid var(--lijn); background: var(--merk-vlak); } dialog form { padding: 19px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 15px; } dialog .rij-breed { grid-column: 1 / -1; } label { display: block; font-size: 13px; color: var(--zacht); margin-bottom: 4px; } input, select, textarea { font: inherit; font-size: 14px; width: 100%; padding: 7px 10px; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: #fff; color: var(--tekst); } input:hover, select:hover { border-color: var(--merk-rand); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--merk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 17%, transparent); } input[type=checkbox] { width: auto; accent-color: var(--merk); } /* Een fieldset groepeert alleen wat samen op slot gaat als je dat deel niet mag wijzigen. */ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } /* Op slot: lezen gaat gewoon, maar een knop die niets doet hoort er niet te staan. */ fieldset:disabled button { display: none; } fieldset:disabled :is(input, select, textarea) { background: transparent; cursor: default; } td.midden, th.midden { text-align: center; } input[type=color] { padding: 2px; height: 34px; cursor: pointer; } .knoppen { grid-column: 1 / -1; display: flex; gap: 9px; justify-content: flex-end; border-top: 1px solid var(--lijn); padding-top: 15px; margin-top: 3px; /* Blijft onderin het venster staan, ook in het campagneformulier met zestien velden. */ position: sticky; bottom: 0; background: var(--kaart); padding-bottom: 6px; } @media (max-width: 560px) { dialog form { grid-template-columns: 1fr; } } .puntenteller { grid-column: 1 / -1; margin: -4px 0 0; font-size: 13px; color: var(--zacht); } .melding { background: var(--stop-vlak); border: 1px solid var(--stop-rand); color: var(--stop); padding: 9px 13px; border-radius: var(--r-klein); font-size: 14px; } /* ---------- notities ---------- */ .notitie { border-inline-start: 3px solid var(--merk); background: var(--merk-vlak); padding: 13px 16px; border-radius: 0 var(--r-klein) var(--r-klein) 0; font-size: 14px; } .notitie.waarschuwing { border-color: var(--let); background: var(--let-vlak); } .notitie strong { display: block; color: var(--inkt); margin-bottom: 3px; } .notitie ul { margin: 7px 0 0; padding-inline-start: 20px; } .notitie a { color: inherit; } .notitie.pre { white-space: pre-line; } .notitie.mijlpaal { border-color: var(--goed); background: var(--goed-vlak); } /* Het deelblokje onder de hero: dicht tot je het nodig hebt. */ .deelblok summary { cursor: pointer; font-weight: 600; color: var(--merk-diep); font-size: 14px; } .deelblok textarea { font-size: 13.5px; line-height: 1.5; resize: vertical; } /* Teampagina: de zin boven de tegels, en de balkjes onder de puntencategorieen. */ .teamlead { margin: -6px 0 14px; font-size: 16px; color: var(--inkt); } .puntenbalk .balk { margin: 5px 0 0; height: 5px; max-width: 220px; } .twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 22px; align-items: start; } /* ---------- rechterkant van de merkbalk ---------- */ #gebruiker { font-size: 13px; color: rgba(255, 255, 255, .8); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #gebruiker button { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; padding: 5px 12px; font-size: 13px; } #gebruiker button:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); } .taalkeuze, .keuzevorm { display: flex; gap: 6px; align-items: center; } .taalkeuze select, .keuzevorm select { width: auto; padding: 5px 9px; font-size: 13px; background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); } .taalkeuze select:hover, .keuzevorm select:hover { border-color: rgba(255, 255, 255, .55); } .taalkeuze select option, .keuzevorm select option { color: var(--tekst); background: #fff; } .taalkeuze button { padding: 5px 10px; font-size: 13px; } .keuzevorm select { max-width: 230px; } html.js .taalkeuze button { display: none; } .verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- inloggen ---------- */ .inlogkaart { max-width: 380px; margin: 64px auto; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: 28px 28px 24px; box-shadow: 0 3px 14px rgba(16, 30, 24, .07); } .inlogkaart h2 { margin-top: 0; } .inlogkaart label { margin-top: 13px; } .inlogkaart button { width: 100%; margin-top: 20px; padding: 9px; } /* ---------- huisstijlvelden in Instellingen ---------- */ .kleurrij { display: flex; align-items: center; gap: 10px; } .kleurrij input[type=color] { width: 52px; flex: none; } .kleurrij input[type=color]:disabled { opacity: .45; cursor: not-allowed; } .volgmerk { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; cursor: pointer; } .volgmerk input { margin: 0; } .logoveld { max-width: 560px; } .logorij { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .logovoorbeeld { flex: none; width: 56px; height: 60px; display: grid; place-items: center; background: var(--merk-diep); border-radius: var(--r-klein); } .logovoorbeeld .wapen { width: 36px; height: 40px; font-size: 13px; } .logoknoppen { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .logoknoppen input[type=file] { display: none; } .logoknoppen .melding { flex-basis: 100%; } code.link { font-size: 12px; background: var(--merk-vlak); padding: 2px 7px; border-radius: 4px; color: var(--merk-diep); border: 1px solid var(--merk-rand); } #teksten-rijen input { font-size: 13px; } #teksten-rijen code { color: var(--zacht); } @media (max-width: 720px) { .merkbalk, .navbalk { padding-inline: 18px; } main { padding: 20px 18px 60px; } .hero { grid-template-columns: 1fr; } .hero-zij { border-inline-start: none; border-top: 1px solid var(--lijn); } .hero-cijfer { font-size: 33px; } /* Op een telefoon zou de nav over drie regels breken en als plakbalk het halve scherm opeten; één veegbare regel is hier het gangbare gedrag. */ .navbalk { padding-inline: 0; } nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: 18px; } nav::-webkit-scrollbar { display: none; } /* De eerste kolom blijft staan bij horizontaal scrollen, zodat je weet bij welke regel een bedrag hoort. De achtergrond moet mee, anders schuiven de cellen erdoorheen. */ .omhulsel td:first-child, .omhulsel th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--kaart); box-shadow: 1px 0 0 var(--lijn-zacht); } .omhulsel tfoot td:first-child { background: color-mix(in srgb, var(--merk) 5%, #f4f6f5); } } /* ---------- rondleiding en handleiding ---------- */ /* Een witte schijf op de merkbalk. Bewust niet in de merkkleur: die is hier de kleur van "hier sta je nu", en twee dingen die om aandacht vragen leest niemand meer. Met #gebruiker ervoor, anders wint de algemene knopregel van de kopbalk. */ #gebruiker #hulpknop { flex: none; width: 27px; height: 27px; padding: 0; border-radius: 50%; background: #fff; border-color: #fff; color: var(--merk-diep); font-size: 15px; font-weight: 800; line-height: 1; } #gebruiker #hulpknop:hover { background: var(--merk-vlak); border-color: var(--merk-vlak); } /* Eén los divje op de coordinaten van het doel. De tweede schaduw verft de rest van het scherm donker, dus er is geen aparte overlay nodig. Het doel zelf wordt niet aangeraakt: een schaduw daarop wordt afgeknipt door elke tabel met overflow:auto. */ .rond-ring { position: fixed; z-index: 60; pointer-events: none; border-radius: var(--r-klein); box-shadow: 0 0 0 3px var(--merk), 0 0 0 9999px color-mix(in srgb, var(--merk-dieper) 55%, transparent); transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; } .rond-ballon { position: fixed; z-index: 62; width: 340px; max-width: calc(100vw - 20px); background: var(--kaart); border-radius: var(--r); padding: 15px 17px 13px; box-shadow: 0 10px 40px -8px rgba(12, 24, 18, .45); } .rond-teller { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); margin: 0 0 5px; } .rond-ballon h4 { color: var(--inkt); font-size: 15px; font-weight: 600; margin: 0 0 5px; } .rond-ballon p:not(.rond-teller) { font-size: 13.5px; line-height: 1.5; color: var(--tekst); margin: 0; } .rond-knoppen { display: flex; align-items: center; gap: 7px; margin-top: 13px; } .rond-vul { flex: 1; } .rond-waas { position: fixed; inset: 0; z-index: 58; background: color-mix(in srgb, var(--merk-dieper) 45%, transparent); } .rond-midden { z-index: 64; display: flex; align-items: center; justify-content: center; padding: 20px; } /* Midden in beeld en blokkerend: dit is het enige moment waarop het dashboard iets van je wil voordat je verder kunt. Een kaartje in een hoek wordt weggekeken, en dan staat er alsnog iemand uit te leggen hoe het werkt. */ .rond-vraag { width: 400px; max-width: 100%; background: var(--kaart); border-radius: var(--r); padding: 22px 24px 18px; box-shadow: 0 12px 48px -10px rgba(12, 24, 18, .5); } .rond-vraag strong { display: block; color: var(--inkt); font-size: 16px; } .rond-vraag p { font-size: 14px; line-height: 1.5; color: var(--zacht); margin: 6px 0 0; } .rond-vraag-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* Een lade rechts in plaats van een venster in het midden: zo blijft het scherm waar de uitleg over gaat gewoon zichtbaar. */ .rond-paneel { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: 59; width: 420px; max-width: 100vw; display: flex; flex-direction: column; background: var(--kaart); box-shadow: -8px 0 40px -12px rgba(12, 24, 18, .4); } .rond-paneel-kop { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: var(--merk-diep); color: #fff; } .rond-paneel-kop h3 { flex: 1; color: #fff; font-size: 15px; font-weight: 600; margin: 0; } .rond-sluit { border: none; background: transparent; color: rgba(255, 255, 255, .75); font-size: 22px; line-height: 1; padding: 0 2px; } .rond-sluit:hover { background: transparent; color: #fff; } .rond-paneel-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; } .rond-start { width: 100%; margin-bottom: 18px; } .rond-leeg { font-size: 13.5px; color: var(--zacht); } .rond-sectie + .rond-sectie { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--lijn-zacht); } .rond-sectie h4 { color: var(--inkt); font-size: 13.5px; font-weight: 700; margin: 0 0 5px; } .rond-sectie p { font-size: 13.5px; line-height: 1.55; color: var(--tekst); margin: 0; } .rond-sectie ul { margin: 8px 0 0; padding-inline-start: 18px; } .rond-sectie li { font-size: 13.5px; line-height: 1.5; color: var(--tekst); margin-bottom: 4px; } .rond-andere div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } @media (prefers-reduced-motion: reduce) { .rond-ring { transition: none; } } @media (max-width: 720px) { .rond-paneel { width: 100vw; } } /* ---------- uitlegpagina (/over) ---------- */ /* De voorbeeldschermen hergebruiken .hero, .tegel, .vlag en .balk, dus die volgen vanzelf de huisstijl. Hier staat alleen wat de pagina zelf nodig heeft. */ .overpagina { max-width: 1120px; } .oversectie + .oversectie { margin-top: 40px; padding-top: 38px; border-top: 1px solid var(--lijn); } .oversectie > h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -.018em; } .overlead { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--zacht); max-width: 80ch; } .oversectie h3 { margin: 0 0 6px; font-size: 16.5px; } .oversectie .notitie { margin-top: 20px; } .oversectie .notitie p { margin: 0; } /* Een voorbeeldscherm mag nooit voor een echte stand doorgaan. */ .overvoorbeeld { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13.5px; color: var(--zacht); } .overkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; } .overkaarten .tegel { padding: 19px 21px 21px; } .overkaarten .tegel p { margin: 0; font-size: 14.5px; line-height: 1.55; } /* Tabel met de vier begrippen: de eerste kolom is een label, niet een zin. */ .overbegrippen td:first-child { width: 17%; white-space: nowrap; } .overbegrippen td.zacht { color: var(--zacht); } .overuitleg { margin-top: 18px; gap: 26px; } .overuitleg p { margin: 0; font-size: 14.5px; line-height: 1.55; } /* Kanaaltabel links, de tegels en het teamblok rechts. */ .overkanalen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px; align-items: start; } .overkanalen .tegels { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 14px; } .overteams p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; } .overteams p:last-child { margin-bottom: 0; } /* Genummerde regels: de cijfers dragen de volgorde, dus geen bulletjes. */ .overregels { list-style: none; margin: 0; padding: 0; } .overregels li { display: flex; gap: 14px; align-items: flex-start; background: var(--kaart); border: 1px solid var(--lijn); border-bottom: none; padding: 14px 18px; } .overregels li:first-child { border-radius: var(--r) var(--r) 0 0; } .overregels li:last-child { border-bottom: 1px solid var(--lijn); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--schaduw); } .overregels strong { display: block; color: var(--inkt); font-size: 15.5px; } .overregels p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--zacht); } .overnummer { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--merk-vlak); border: 1px solid var(--merk-rand); color: var(--merk-diep); font-size: 13px; font-weight: 700; } .overkosten { display: flex; align-items: baseline; gap: 16px; margin-top: 14px; } .overkosten p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--zacht); } /* De twee kolommen van "wat het kost" en "wat het niet doet": dezelfde kaart, maar de rechter met de let-kleur, zodat de grenzen niet als verkoopargument lezen. */ .overkolom { padding: 0; overflow: hidden; } .overkolom h3 { margin: 0; padding: 14px 22px; background: var(--merk-vlak); border-bottom: 1px solid var(--lijn); } .overkolom.let h3 { background: var(--let-vlak); border-bottom-color: var(--let-rand); color: var(--let); } .overkolom p { margin: 0; padding: 13px 22px; font-size: 14.5px; line-height: 1.55; border-top: 1px solid var(--lijn-zacht); } .overkolom p:first-of-type { border-top: none; } .overkolom strong { color: var(--inkt); } /* Terug naar het dashboard, in de kopbalk naast de taalkeuze. */ .overterug { color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 13px; } .overterug:hover { color: #fff; text-decoration: underline; } /* De link vanaf de teampagina. */ .overlink { margin: 18px 0 0; font-size: 14px; } @media (max-width: 860px) { .overkanalen { grid-template-columns: 1fr; } } /* Een tabel met proza perst zich op een telefoon tot een woord per regel. Liever laten scrollen binnen .omhulsel, net als de tabellen in het dashboard zelf. */ @media (max-width: 720px) { .overbegrippen { min-width: 580px; } .overkanalen table { min-width: 560px; } .overregels li { padding: 13px 15px; } } /* Staat achteraan met opzet: dezelfde specificiteit als de rondleidingsregels voor het vraagteken, dus de volgorde beslist. Op een tikscherm horen knoppen minstens 44 pixels hoog te zijn; een muisgebruiker merkt hier niets van. */ @media (pointer: coarse) { button, button.mini { min-height: 44px; } button.mini { padding-inline: 14px; } #gebruiker #hulpknop { width: 44px; height: 44px; } .rond-sluit { min-width: 44px; min-height: 44px; } td .mini + .mini { margin-inline-start: 8px; } } /* ---------- werkbladen ---------- */ /* Dezelfde pil als bij de bijdragen: groen is in orde of bij de leden, oranje vraagt aandacht. */ .vlag.inorde, .vlag.gepubliceerd { background: var(--goed-vlak); color: var(--goed); border-color: var(--goed-rand); } .vlag.verlopen, .vlag.ontbreekt { background: var(--let-vlak); color: var(--let); border-color: var(--let-rand); } .vlag.concept, .vlag.gearchiveerd { background: #f1f3f2; color: var(--zacht); border-color: var(--lijn); } dialog textarea { resize: vertical; line-height: 1.45; } .werkblad + .werkblad, .deelblok + .werkblad { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--lijn); } .werkblad header h2 { margin: 0; font-size: 23px; letter-spacing: -.015em; } .werkblad-meta { margin: 5px 0 14px; font-size: 14px; color: var(--zacht); } .werkblad section { margin-top: 24px; } .werkblad h3 { margin: 0 0 7px; font-size: 15.5px; } .werkblad-tekst { margin: 0 0 8px; max-width: 80ch; white-space: pre-line; } .werkblad-lijst { margin: 0; padding-inline-start: 20px; max-width: 80ch; } .werkblad-lijst li { margin: 3px 0; } .werkblad section .notitie { margin-top: 10px; } .werkblad-intern { border: 1px dashed var(--lijn); border-radius: var(--r-klein); padding: 13px 16px; } .werkblad-tips .werkblad-tekst { border-inline-start: 3px solid var(--steun-1, var(--merk)); padding-inline-start: 12px; } /* Het tijdpad als afvinklijst zodra de datum bekend is. */ .werkblad-tijdpad { list-style: none; padding-inline-start: 0; } .werkblad-tijdpad input { width: auto; margin-inline-end: 8px; accent-color: var(--merk); } /* De QR-code rechtsboven op het blad: klein op het scherm, mee op papier. */ .werkblad header { position: relative; padding-inline-end: 110px; } .werkblad-qr { position: absolute; inset-inline-end: 0; top: 0; width: 96px; height: 96px; } .qrblok { display: flex; gap: 14px; align-items: center; margin-top: 12px; } .qrblok img { flex: none; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: #fff; } .vlag.n-instap { background: var(--goed-vlak); color: var(--goed); border-color: var(--goed-rand); } .vlag.n-gemiddeld { background: var(--merk-vlak); color: var(--merk-diep); border-color: var(--merk-rand); } .vlag.n-groot { background: var(--let-vlak); color: var(--let); border-color: var(--let-rand); } .ledenbewijs { margin: 0 0 18px; font-size: 15px; color: var(--merk-diep); background: var(--merk-vlak); border-radius: var(--r-klein); padding: 11px 15px; } .ledenform label { margin-top: 10px; } /* De stappenlijst achter een eigen link: afvinken en zien wat er nog ligt. */ .stappenlijst { list-style: none; padding: 0; margin: 0; } .stappenlijst li { border: 1px solid var(--lijn); border-radius: var(--r-klein); background: var(--kaart); padding: 11px 14px; margin-bottom: 8px; } .stappenlijst label { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 15px; color: var(--tekst); cursor: pointer; } .stappenlijst input { width: auto; flex: none; accent-color: var(--merk); } .stappenlijst b { white-space: nowrap; } .stappenlijst .gedaan, .stappenlijst li.gedaan { background: var(--goed-vlak); border-color: var(--goed-rand); } .stappenlijst li.gedaan label { color: var(--zacht); text-decoration: line-through; } .stappenlijst li.telaat { border-color: var(--let); background: var(--let-vlak); } /* De ledenpagina: een kaart per activiteit, aan te vinken voor de optelsom. */ .werkbladkaart { display: flex; flex-direction: column; gap: 4px; position: relative; cursor: pointer; margin: 0; color: var(--tekst); } .werkbladkaart input { position: absolute; inset-inline-end: 13px; top: 13px; } .werkbladkaart b { font-size: 15.5px; color: var(--inkt); padding-inline-end: 24px; } .werkbladkaart .label { padding-inline-end: 24px; } .werkbladkaart-cijfers { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 4px; } .werkbladkaart a { font-size: 13px; color: var(--merk-diep); margin-top: 2px; align-self: flex-start; } .werkbladkaart:has(input:checked) { border-color: var(--merk); background: var(--merk-vlak); } a.knop[aria-disabled] { opacity: .5; pointer-events: none; } /* ---------- afdrukken ---------- */ /* Ctrl+P levert een nette bijlage voor de ALV of de kascommissie: geen navigatie, geen knoppen, brede tabellen volledig op papier. Een pdf is de 'Opslaan als pdf' van de browser. */ @media print { @page { margin: 14mm; } body { background: #fff; } .navbalk, #gebruiker, .balkje, button, .demovlag, .csvregel, .deelblok, .rond-waas, .rond-paneel, .rond-ring, .rond-ballon { display: none !important; } .merkbalk { background: none; color: var(--inkt); padding: 0 0 12px; border-bottom: 2px solid var(--lijn); } .merk h1 { color: var(--inkt); } .merk p { color: var(--zacht); } .wapen { box-shadow: none; border: 1px solid var(--lijn); } main { padding: 14px 0 0; max-width: none; } .omhulsel { overflow: visible; box-shadow: none; } .tabelblok::before, .tabelblok::after { display: none; } table { font-size: 11px; } th, td { padding: 6px 8px; } /* De statuskeuzelijst drukt als gewone tekst. */ select.vlag { appearance: none; border: none; background: none; padding: 0; } .hero, .strip, .tegel, .notitie, tr { break-inside: avoid; } .hero, .strip, .tegel { box-shadow: none; } /* Elk werkblad begint op een eigen pagina, zodat een werkgroep alleen het eigen blad meeneemt. */ .geen-druk, a.knop { display: none !important; } .werkblad-tijdpad input { -webkit-appearance: none; appearance: none; border: 1px solid #555; width: 11px; height: 11px; display: inline-block; vertical-align: middle; } .werkblad + .werkblad, .deelblok + .werkblad { break-before: page; border-top: none; padding-top: 0; margin-top: 0; } .werkblad section { break-inside: avoid; } } /* ---------- rechts-naar-links ---------- De rest van deze stylesheet gebruikt logische eigenschappen en draait vanzelf mee. Alleen een verloop en een slagschaduw kennen geen begin en eind, dus die drie staan hier met de hand omgekeerd. */ [dir="rtl"] .tabelblok::before { background: linear-gradient(to left, var(--kaart) 18%, transparent); } [dir="rtl"] .tabelblok::after { background: linear-gradient(to right, var(--kaart) 18%, transparent); } [dir="rtl"] .omhulsel td:first-child, [dir="rtl"] .omhulsel th:first-child { box-shadow: -1px 0 0 var(--lijn-zacht); } [dir="rtl"] .rond-paneel { box-shadow: 8px 0 40px -12px rgba(12, 24, 18, .4); }