/* ODH-training — gedeelde huisstijl. Eén bron voor alle deelnemerschermen. Laad met: Alle klassen zijn genamespaced met "odh-" zodat ze niet botsen met de bestaande pagina-CSS. Kleur, typografie en de kerncomponenten staan hier. */ :root{ /* ---- Canonieke ODH-tokens: dé enige plek om kleur/typografie te wijzigen --- */ --odh-blauw:#1d4e89; --odh-blauw-d:#163a66; --odh-blauw-l:#2a64a8; --odh-inkt:#1d2530; --odh-grijs:#5b6877; --odh-lijn:#e2e8f0; --odh-bg:#eef1f5; --odh-vlak:#fff; --odh-blauwvlak:#e8f0f9; --odh-groen:#1b6b43; --odh-groenvlak:#e6f4ec; --odh-rood:#9a3b2f; --odh-roodvlak:#f7e9e6; --odh-alarm:#b3261e; --odh-alarmvlak:#fbeae9; /* feller rood voor waarschuwingen/dashboard */ --odh-goud:#8a5a00; --odh-goudvlak:#fbf3e2; --odh-cop1:#2e6ad1; --odh-cop2:#16b8c4; --odh-cop3:#9b59c6; /* Copilot-accenten (speeltuin) */ --odh-radius:14px; --odh-radius-s:9px; --odh-radius-pill:20px; --odh-schaduw:0 6px 18px rgba(29,78,137,.12); --odh-maxw:880px; --odh-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Warme crème-achtergrond voor trainings-/presentatieschermen. Eén token, dus overal aan/uit via de class .odh-warm op . */ --odh-warm:radial-gradient(120% 70% at 100% 0%, #fdf6ea 0%, #f6f9fc 45%, var(--odh-bg) 100%); /* ---- Alias-laag: oude tokennamen wijzen naar de canonieke tokens hierboven. Zo blijven bestaande pagina-regels werken terwijl de waarde op één plek staat. Wijzig je een --odh-token, dan verandert de hele app mee. -------------------- */ --blauw:var(--odh-blauw); --blauw-d:var(--odh-blauw-d); --blauw-l:var(--odh-blauw-l); --blauwvlak:var(--odh-blauwvlak); --brand:var(--odh-blauw); --brand-d:var(--odh-blauw-d); --brand-l:var(--odh-blauw-l); --brand-soft:var(--odh-blauwvlak); --inkt:var(--odh-inkt); --ink:var(--odh-inkt); --grijs:var(--odh-grijs); --muted:var(--odh-grijs); --lijn:var(--odh-lijn); --line:var(--odh-lijn); --bg:var(--odh-bg); --vlak:var(--odh-vlak); --card:var(--odh-vlak); --groen:var(--odh-groen); --groenvlak:var(--odh-groenvlak); --good:var(--odh-groen); --good-soft:var(--odh-groenvlak); --rood:var(--odh-rood); --roodvlak:var(--odh-roodvlak); --bad:var(--odh-alarm); --bad-soft:var(--odh-alarmvlak); --warn:var(--odh-goud); --warn-soft:var(--odh-goudvlak); --goud:var(--odh-goud); --goudvlak:var(--odh-goudvlak); --cop1:var(--odh-cop1); --cop2:var(--odh-cop2); --cop3:var(--odh-cop3); } /* Warme achtergrond aanzetten: voeg class "odh-warm" toe aan . Wint van een eigen body{background:...}-regel dankzij hogere specificiteit. */ body.odh-warm{background:var(--odh-warm) fixed} /* ---- Deelnemer-header: overal dezelfde balk ---------------------------- */ .odh-header{background:linear-gradient(135deg,var(--odh-blauw-d),var(--odh-blauw-l));color:#fff;padding:.85rem 1.1rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} .odh-header__in{max-width:var(--odh-maxw);margin:0 auto;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap} .odh-header__logo{background:#fff;border-radius:8px;padding:4px 8px;display:inline-flex;align-items:center;flex:0 0 auto} .odh-header__logo img{height:26px;width:auto;display:block} .odh-header__titel{min-width:0} .odh-header__titel h1{margin:0;font-size:1.12rem;font-weight:740;letter-spacing:-.01em;line-height:1.2;color:#fff} .odh-header__sub{display:block;font-size:.8rem;font-weight:500;opacity:.85;margin-top:.1rem} .odh-header__acties{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex:0 0 auto} .odh-home{display:inline-flex;align-items:center;gap:.35rem;color:#fff;text-decoration:none;font-size:.85rem;font-weight:650;border:1px solid rgba(255,255,255,.5);border-radius:var(--odh-radius-s);padding:.32rem .7rem;background:rgba(255,255,255,.1)} .odh-home:hover{background:rgba(255,255,255,.22)} .odh-home svg{width:14px;height:14px} .odh-badge{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:var(--odh-radius-pill);padding:.2rem .65rem;background:var(--odh-goudvlak);color:var(--odh-goud)} /* ---- Pagina-omhulsel --------------------------------------------------- */ .odh-main{max-width:var(--odh-maxw);margin:0 auto;padding:1.2rem 1.1rem 4rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--odh-inkt)} .odh-lead{font-size:1.05rem;margin:0 0 1rem;line-height:1.6} .odh-sectie{font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--odh-grijs);margin:1.6rem 0 .5rem} /* ---- Knoppen ----------------------------------------------------------- */ .odh-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:650;text-decoration:none;border:1px solid transparent;border-radius:var(--odh-radius-s);padding:.7rem 1.2rem;cursor:pointer;transition:filter .12s,border-color .12s} .odh-btn--primair{background:var(--odh-blauw);color:#fff} .odh-btn--primair:hover{filter:brightness(1.06)} .odh-btn--secundair{background:var(--odh-vlak);color:var(--odh-blauw);border-color:var(--odh-lijn)} .odh-btn--secundair:hover{border-color:var(--odh-blauw)} .odh-btn--uit{background:var(--odh-bg);color:var(--odh-grijs);border-color:var(--odh-lijn);cursor:not-allowed} /* ---- Kaarten / tegels -------------------------------------------------- */ .odh-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem} .odh-tegel{display:block;text-decoration:none;color:inherit;background:var(--odh-vlak);border:1px solid var(--odh-lijn);border-radius:var(--odh-radius);padding:1.1rem 1.15rem;transition:border-color .15s,box-shadow .15s} .odh-tegel:hover{border-color:var(--odh-blauw);box-shadow:var(--odh-schaduw)} .odh-tegel--prim{border-color:#c6d7eb;background:linear-gradient(180deg,#f7fafd,#fff)} .odh-tegel__ic{width:38px;height:38px;border-radius:10px;background:var(--odh-blauwvlak);color:var(--odh-blauw);display:flex;align-items:center;justify-content:center;margin-bottom:.65rem} .odh-tegel--prim .odh-tegel__ic{background:var(--odh-blauw);color:#fff} .odh-tegel__ic svg{width:21px;height:21px} .odh-tegel__k{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--odh-blauw)} .odh-tegel h3{margin:.2rem 0 .3rem;font-size:1.06rem} .odh-tegel p{margin:0;font-size:.86rem;color:var(--odh-grijs)} /* ---- Inhoudskaart ------------------------------------------------------ */ .odh-card{background:var(--odh-vlak);border-radius:18px;box-shadow:0 6px 22px rgba(29,37,48,.07);padding:1.7rem 1.4rem 1.6rem} .odh-lead{font-size:1.08rem;margin:.2rem 0 1.5rem;text-align:center;color:var(--odh-inkt)} .odh-lead b{color:var(--odh-blauw-d)} .odh-lab{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--odh-blauw);margin:0 0 .7rem;text-align:center} /* ---- Genummerde stappen ------------------------------------------------ */ .odh-stappen{list-style:none;margin:0;padding:0} .odh-stap{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-top:1px solid var(--odh-lijn)} .odh-stap:first-child{border-top:none} .odh-stap .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--odh-blauw);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem} .odh-stap .t{font-size:1.02rem} .odh-stap .t b{display:block;color:var(--odh-blauw-d);margin-bottom:.1rem} .odh-stap .t span{color:var(--odh-grijs)} /* ---- "Let op"-blok (goud) --------------------------------------------- */ .odh-let{background:var(--odh-goudvlak);border-left:4px solid var(--odh-goud);color:#6b4a00;padding:12px 15px;border-radius:0 10px 10px 0;font-size:.92rem;margin:1.4rem 0 0} /* ---- Grote actieknop, volle breedte ----------------------------------- */ .odh-cta{margin-top:1.7rem} .odh-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;background:var(--odh-blauw);color:#fff;font-weight:700;font-size:1.1rem;border-radius:14px;padding:1.05rem 1.2rem;box-shadow:0 10px 24px rgba(29,78,137,.28)} .odh-cta a:active{transform:scale(.99)} .odh-cta .tijd{text-align:center;color:var(--odh-grijs);font-size:.85rem;margin:.7rem 0 0} /* ---- Voet -------------------------------------------------------------- */ .odh-footer{max-width:var(--odh-maxw);margin:0 auto;padding:0 1.1rem 3rem;color:var(--odh-grijs);font-size:.8rem} .odh-footer a{color:inherit} @media print{.odh-home,.odh-header__acties{display:none}}