/* * Aventus-huisstijl. De kleuren en vormen komen uit het live thema van * aventus.nl (custom properties --color-*, pill-knoppen, Bebas voor koppen); * ze staan hier als één tokenlaag zodat de componenten eronder er alleen naar * verwijzen. * * Bebas Neue (Google Fonts, OFL — zie fonts/OFL.txt) staat in voor de * Bebas Neue Pro van hun Adobe-kit: die is domeingebonden en mogen we hier * niet serveren. Bebas is alleen hoofdletters; daarom uitsluitend voor koppen * en knoppen, nooit voor lopende tekst. */ @font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; /* * block, niet swap: swap tóónt eerst de fallback en wisselt daarna om — dat * is precies de flikkering die je bij elke paginawissel ziet. Met block blijft * de tekst heel even onzichtbaar in plaats van verkeerd. Dat kan hier veilig, * want het font staat op onze eigen server (14 kB) en wordt via een preload in * de al opgehaald terwijl de CSS nog geparseerd wordt. */ font-display: block; src: url("/static/fonts/bebas-neue-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: block; src: url("/static/fonts/bebas-neue-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* * Lichte modus is de basis; de dark-modeblok hieronder herdefinieert alléén de * kleurtokens. Geen kleur krijgt zijn enige definitie in het media-blok, zodat * er nooit een halve modus kan ontstaan. */ :root { color-scheme: light dark; /* Kleuren, letterlijk uit het Aventus-thema */ --av-primary: #52bcce; --av-primary-donker: #267987; /* --color-focus-dark: het cyaan haalt op wit de contrasteis niet */ --av-link: #267987; --av-tekst: #3a3a39; --av-zwart: #111111; --av-groen: #b8d836; --av-groen-hover: #93ad2b; /* De drie onderdelen van de app, elk met een eigen kleur. Focus en support hadden die al in het check-informulier (blok 1 turquoise, blok 2 groen); sidequest niet, en het dashboard helemaal niet. Dezelfde kleur op beide schermen maakt dat je zonder lezen weet waar je kijkt. */ --av-thema-focus: #52bcce; --av-thema-support: #b8d836; --av-thema-sidequest: #a05bd6; /* "Wacht al" had een hardgecodeerd licht vlak; in het donkere thema stond de lichte tekst daar bovenop en was hij onleesbaar. Als tokenpaar, net als de andere statussen. */ --av-wacht: #c9760a; --av-wacht-vlak: #fdf1e0; --av-wacht-tekst: #7a4705; --av-succes: #178744; --av-gevaar: #e2476c; --av-vlak-1: #ffffff; --av-vlak-2: #f4f4f4; --av-vlak-3: #e2e2e2; --av-vlak-4: #c6c6c5; --av-blauw-45: #b1e1e9; --av-rand: #e2e2e2; --av-gedempt: #7f7f7e; /* --color-grey-65 */ /* Afgeleiden voor tekst op gekleurde vlakken — allemaal ≥ 4.5:1 */ --av-primary-tekst: #17505a; --av-op-accent: #ffffff; /* tekst op een primary-donker vlak */ --av-op-groen: #111111; /* het groen is in beide modi gelijk, dus deze tekst ook */ --av-succes-vlak: #dcf0e3; --av-succes-tekst: #12602f; --av-gevaar-vlak: #fbe3ea; --av-gevaar-tekst: #8e2340; --av-attentie-vlak: #eef5cf; --av-attentie-tekst: #4f5c12; /* Letters van het woordlogo; de stip houdt het cyaan uit het SVG-bestand. */ --av-logo: #323232; --av-schaduw-kleur: rgba(17, 17, 17, 0.16); --av-schaduw: 0 1px 3px rgba(17, 17, 17, 0.1); --av-radius: 0.625rem; /* --rounded-sm */ --av-radius-klein: 0.3125rem; /* --rounded-xs */ --av-pill: 9999px; /* --rounded-full */ --av-kop: "Bebas Neue", "Arial Narrow", Arial, sans-serif; --av-tekst-font: Arial, helvetica, system-ui, sans-serif; } /* * Donkere modus. Drie standen: de gebruiker kiest licht, donker, of systeem * (geen data-theme, dan beslist prefers-color-scheme). De server stempelt de * keuze als data-theme op , dus er is geen flits van het verkeerde thema. * * De tokenlijst staat hieronder twee keer: één keer voor de systeemvoorkeur en * één keer voor de expliciete keuze. CSS kent geen manier om één blok op beide * condities toe te passen. Ze horen identiek te zijn — een test bewaakt dat. */ @media (prefers-color-scheme: dark) { /* Systeem staat op donker — tenzij de gebruiker expliciet licht koos. */ :root:not([data-theme="light"]) { --av-primary: #52bcce; --av-primary-donker: #7dcdda; --av-link: #8fd3df; --av-tekst: #e4e4e1; --av-zwart: #f4f4f2; --av-vlak-1: #26262a; --av-vlak-2: #1b1b1e; --av-vlak-3: #34343a; --av-vlak-4: #4a4a52; --av-blauw-45: #1f4a53; --av-rand: #3a3a41; --av-gedempt: #9a9a97; --av-thema-focus: #52bcce; --av-thema-support: #b8d836; --av-thema-sidequest: #c08ee6; --av-wacht: #e09a3c; --av-wacht-vlak: #3a2a12; --av-wacht-tekst: #f0c384; --av-primary-tekst: #b1e1e9; --av-op-accent: #10262b; --av-succes-vlak: #13351f; --av-succes-tekst: #86d3a1; --av-gevaar-vlak: #3d1b26; --av-gevaar-tekst: #f2a8bb; --av-attentie-vlak: #2f3315; --av-attentie-tekst: #cfe07a; --av-logo: #f2f2f0; --av-schaduw-kleur: rgba(0, 0, 0, 0.55); --av-schaduw: 0 1px 3px rgba(0, 0, 0, 0.45); } } :root[data-theme="light"] { color-scheme: light; } /* Expliciete keuze wint, ook op een systeem dat op licht staat. */ :root[data-theme="dark"] { color-scheme: dark; --av-primary: #52bcce; --av-primary-donker: #7dcdda; --av-link: #8fd3df; --av-tekst: #e4e4e1; --av-zwart: #f4f4f2; --av-vlak-1: #26262a; --av-vlak-2: #1b1b1e; --av-vlak-3: #34343a; --av-vlak-4: #4a4a52; --av-blauw-45: #1f4a53; --av-rand: #3a3a41; --av-gedempt: #9a9a97; --av-thema-focus: #52bcce; --av-thema-support: #b8d836; --av-thema-sidequest: #c08ee6; --av-wacht: #e09a3c; --av-wacht-vlak: #3a2a12; --av-wacht-tekst: #f0c384; --av-primary-tekst: #b1e1e9; --av-op-accent: #10262b; --av-succes-vlak: #13351f; --av-succes-tekst: #86d3a1; --av-gevaar-vlak: #3d1b26; --av-gevaar-tekst: #f2a8bb; --av-attentie-vlak: #2f3315; --av-attentie-tekst: #cfe07a; --av-logo: #f2f2f0; --av-schaduw-kleur: rgba(0, 0, 0, 0.55); --av-schaduw: 0 1px 3px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } body { margin: 0; font: 15px/1.55 var(--av-tekst-font); color: var(--av-tekst); background: var(--av-vlak-2); } a { color: var(--av-link); } h2, h3, h4 { font-family: var(--av-kop); font-weight: 400; letter-spacing: 0.02em; color: var(--av-zwart); } h2 { font-size: 2rem; margin: 0 0 0.8rem; } /* -- Header ---------------------------------------------------------------- */ header { display: flex; gap: 1.2rem; align-items: center; padding: 0.6rem 1.2rem; background: var(--av-vlak-1); border-bottom: 3px solid var(--av-primary); } header .woordmerk { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; } header .woordmerk .woordlogo { height: 1.7rem; width: auto; /* De letters volgen deze kleur; de stip houdt het cyaan uit het bestand. */ color: var(--av-logo); } header h1 { font-family: var(--av-kop); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.04em; margin: 0; color: var(--av-tekst); /* Streepje scheidt de tool van het merk: het logo is Aventus, dit is de tool. */ border-left: 2px solid var(--av-vlak-4); padding-left: 0.7rem; } header .org { color: var(--av-tekst); opacity: 0.6; font-size: 0.85rem; white-space: nowrap; } /* Onder deze breedte wint de navigatie het van het org-label. */ @media (max-width: 78rem) { header .org { display: none; } } header nav { display: flex; gap: 0.9rem; align-items: center; font-size: 0.88rem; margin-left: 0.4rem; } header nav a, .menu-trigger { /* Navigatie-items breken nooit af: liever de balk laten scrollen. */ white-space: nowrap; } header nav a { color: var(--av-tekst); text-decoration: none; } header nav a:hover, header nav a:focus-visible { color: var(--av-primary-donker); text-decoration: underline; } /* Rechterkant van de balk: instellingen en wie er is ingelogd. */ header .rechts { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } header .who { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--av-tekst); text-decoration: none; } header .who:hover .naam { text-decoration: underline; } header .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--av-vlak-3); } .menu-trigger.tandwiel { display: flex; align-items: center; padding: 0.3rem; color: var(--av-gedempt); } .menu-trigger.tandwiel:hover, .instellingen:focus-within .tandwiel { color: var(--av-tekst); } /* Uitlijnen op de rechterrand, anders valt het paneel buiten het scherm. */ .menu-items.rechts-uitgelijnd { left: auto; right: 0; } .menu-kop { margin: 0.15rem 0 0.35rem; padding: 0 0.9rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--av-gedempt); } .menu-items .uitloggen { border-top: 1px solid var(--av-rand); margin-top: 0.35rem; padding-top: 0.55rem; } /* Hamburger: alleen op smalle schermen zichtbaar (zie de media query onderaan). */ .nav-schakelaar { display: none; } .hamburger { display: none; align-items: center; padding: 0.35rem; margin-left: auto; color: var(--av-tekst); cursor: pointer; border-radius: var(--av-radius-klein); } .hamburger svg { width: 1.35rem; height: 1.35rem; } .nav-schakelaar:focus-visible + .hamburger { outline: 2px solid var(--av-primary-donker); outline-offset: 2px; } /* Themaschakelaar: drie submits als één segmented control. */ form.thema { display: flex; margin: 0 0.9rem 0.2rem; border: 1px solid var(--av-rand); border-radius: var(--av-pill); overflow: hidden; } form.thema button { display: flex; align-items: center; padding: 0.25rem 0.55rem; border: 0; border-radius: 0; background: none; color: var(--av-gedempt); cursor: pointer; } form.thema button:hover { background: var(--av-vlak-2); color: var(--av-tekst); } form.thema button.aan { background: var(--av-primary-donker); color: var(--av-op-accent); } form.thema button:focus-visible { outline: 2px solid var(--av-primary-donker); outline-offset: -2px; } .thema-icoon { width: 1rem; height: 1rem; } /* Visueel verborgen, wel voorleesbaar: de knoppen zijn alleen iconen. */ .vpb { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Dropdown zonder JavaScript: hover én focus-within, dus ook met Tab. */ .menu { position: relative; } /* Geen link: dit menu-item hoort nergens heen te gaan. */ .menu-trigger { padding: 0; background: none; border: 0; border-radius: 0; color: var(--av-tekst); font: inherit; cursor: pointer; } .menu-trigger:hover, .menu:focus-within .menu-trigger { color: var(--av-link); background: none; } .menu-items { display: none; position: absolute; left: 0; top: 100%; margin-top: 0.55rem; z-index: 10; min-width: 12.5rem; padding: 0.3rem 0; background: var(--av-vlak-1); border: 1px solid var(--av-rand); border-radius: var(--av-radius); box-shadow: 0 6px 18px var(--av-schaduw-kleur); } /* * Onzichtbare brug over het gat tussen knop en paneel. Zonder dit valt de * muis onderweg naar beneden even buiten .menu en klapt het menu dicht — * merkbaar zodra je langzaam beweegt. */ .menu-items::before { content: ""; position: absolute; left: 0; right: 0; top: -0.65rem; height: 0.65rem; } .menu:hover .menu-items, .menu:focus-within .menu-items { display: block; } .menu-items a { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.9rem; white-space: nowrap; text-decoration: none; color: var(--av-tekst); } .menu-items a:hover, .menu-items a:focus-visible { background: var(--av-vlak-2); color: var(--av-link); } .menu-icoon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--av-primary-donker); } main { max-width: 1100px; margin: 1.4rem auto; padding: 0 1rem; } /* -- Formulieren ----------------------------------------------------------- */ form.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin-bottom: 1rem; } form.filters label, form.provision label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--av-tekst); } textarea { padding: 0.5rem 0.6rem; border: 1px solid var(--av-vlak-4); border-radius: var(--av-radius-klein); background: var(--av-vlak-1); color: var(--av-tekst); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; width: 100%; } textarea:focus-visible { outline: 2px solid var(--av-primary); outline-offset: 1px; } select, input[type="text"], input[type="file"] { /* Gelijke hoogte, anders staan de filters op verschillende basislijnen. */ height: 2.2rem; padding: 0.4rem 0.55rem; border: 1px solid var(--av-vlak-4); border-radius: var(--av-radius-klein); background: var(--av-vlak-1); font: inherit; color: var(--av-tekst); } select:focus-visible, input:focus-visible { outline: 2px solid var(--av-primary); outline-offset: 1px; } /* Aventus-knop: pill, licht groen, zwarte tekst, kop-lettertype. */ /* * Aventus-knop, ingetogener dan de pill van hun website: die is daar een * call-to-action op een marketingpagina, hier staat er soms een rij van in een * tabel. Zelfde groen en zelfde koplettertype, kleiner en met een normale * radius. */ button { padding: 0.35rem 0.85rem; border: 0; border-radius: var(--av-radius-klein); background: var(--av-groen); color: var(--av-op-groen); font-family: var(--av-kop); font-size: 0.95rem; letter-spacing: 0.03em; line-height: 1.4; cursor: pointer; transition: background-color 0.2s ease-out; } button:hover { background: var(--av-groen-hover); } button:focus-visible { outline: 2px solid var(--av-primary-donker); outline-offset: 2px; } /* * Rij-actie naast een badge: omlijnd in plaats van gevuld. Een groene pill * naast een statuslabel leest als nóg een label; een omlijnde knop leest als * iets wat je kunt indrukken. */ /* Een link die als knop moet lezen —