body {
font-family: system-ui, sans-serif;
width: min(95%, 90rem);
margin: 1.5rem auto 4rem;
padding: 0 1rem;
box-sizing: border-box;
}
h1, h2 { color: #ff7e5f; }
@media (max-width: 480px) {
body { width: 100%; margin: 1rem auto 2rem; }
}
button { font: inherit; padding: 0.5rem 1rem; cursor: pointer; }
input { font: inherit; padding: 0.4rem; width: 100%; box-sizing: border-box; margin-bottom: 0.75rem; }
label { display: block; font-size: 0.85rem; margin-bottom: 0.2rem; }
/* Formulieren blijven op leesbare breedte staan ook al mag de pagina zelf
(tegel-overzichten, het diagram) nu de volle schermbreedte gebruiken. */
form { margin-bottom: 1rem; max-width: 28rem; }
ul { padding-left: 1.2rem; }
p.hint { color: #666; font-size: 0.85rem; }
p.error { color: #b00020; font-size: 0.85rem; }
p.success { color: #1b7a1b; font-size: 0.85rem; }
a { color: #0284c7; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.links { font-size: 0.9rem; }
.logo { display: block; width: 220px; height: auto; margin-bottom: 2rem; }
[hidden] { display: none !important; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
#app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; position: relative; }
#app-header .logo { width: 240px; margin-bottom: 0; }
/* Het logo van de organisatie rechts naast dat van Architrium (story installatie-voor-organisaties/02):
even hoog, hoogstens 200 px breed, met een dun streepje ertussen. De hoogte staat vast (het logo van
Architrium is 500 × 130): een SVG zonder eigen maat zou de rij anders hoger maken. Een kop met een
ander logo zet hem zelf (editor.css, model.css, docs.css). */
.logo-with-organization { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.logo-with-organization > .logo { margin-bottom: 0; }
#app-header .logo-with-organization, .publication-header .logo-with-organization { margin-bottom: 0; }
#app-header .logo-with-organization .organization-logo { height: calc(240px * 130 / 500); }
.logo-with-organization .organization-logo {
width: auto;
height: calc(220px * 130 / 500);
max-width: 200px;
object-fit: contain;
object-position: left center;
padding-left: 0.75rem;
border-left: 1px solid #cbd5e1;
}
/* Het voorbeeld op het instellingenscherm. */
.settings-logo { margin: 0 0 1rem; }
.settings-logo img { display: block; max-width: 200px; max-height: 4rem; padding: 0.5rem; border: 1px solid #e2e8f0; }
.settings-logo figcaption { font-size: 0.9rem; color: #475569; margin-top: 0.25rem; }
/* Het inloggen op het instellingenscherm (story installatie-voor-organisaties/04). */
#settings-login .copy-row { flex-wrap: nowrap; margin: 0 0 1rem; }
#settings-login .copy-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.settings-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.settings-check input { width: auto; margin: 0; }
/* Het logo is een link naar de startpagina (story startscherm-en-editor/93). */
#app-header > a { display: flex; }
/* Groter dan de standaard .icon-button (2rem) — dit is de hoofdknop van de
header, niet een van de kleinere actieknoppen elders (tenant.js e.d.),
die moeten wel op hun huidige, compactere formaat blijven. */
#menu-toggle {
width: 2.75rem;
height: 2.75rem;
}
#menu-toggle svg {
width: 24px;
height: 24px;
}
/* De bel met notificaties (epic "notificaties", notifications.js), vóór de menuknop. */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
#notifications-toggle {
position: relative;
width: 2.75rem;
height: 2.75rem;
}
#notifications-toggle svg { width: 22px; height: 22px; }
#notifications-count {
position: absolute;
top: 0.2rem;
right: 0.15rem;
min-width: 1.05rem;
padding: 0 0.2rem;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
line-height: 1.05rem;
text-align: center;
}
#notifications-panel {
position: absolute;
top: 100%;
right: 0;
z-index: 100;
width: min(26rem, calc(100vw - 2rem));
max-height: 70vh;
overflow-y: auto;
margin: 0.4rem 0 0;
padding: 0.6rem 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.notifications-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 1rem 0.4rem; }
.notifications-head h4 { margin: 0; }
#notifications-read-all { width: auto; margin: 0; padding: 0.2rem 0.5rem; font-size: 0.75rem; }
#notifications-list { list-style: none; margin: 0; padding: 0; }
#notifications-list li { padding: 0; }
#notifications-empty { margin: 0; padding: 0.4rem 1rem; }
.notification {
display: block;
padding: 0.5rem 1rem;
border-left: 3px solid transparent;
color: #334155;
font-size: 0.85rem;
}
.notification:hover { background: #f2f2f2; text-decoration: none; }
.notification-unread { border-left-color: #ff7e5f; color: #0f172a; font-weight: 600; }
.notification-text { display: block; overflow-wrap: anywhere; }
.notification-when { display: block; margin-top: 0.1rem; color: #64748b; font-size: 0.72rem; font-weight: 400; }
#menu-dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 100;
margin: 0.4rem 0 0;
padding: 0.4rem 0;
min-width: 10rem;
list-style: none;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
#menu-dropdown li { padding: 0; }
/* Een streep tussen de groepen van het menu (van jou, over Architrium, uitloggen, de taal). */
#menu-dropdown .menu-divider { height: 0; margin: 0.35rem 0; border-top: 1px solid #e2e8f0; }
#menu-dropdown .menu-divider[hidden] { display: none; }
#menu-dropdown a {
display: block;
padding: 0.5rem 1rem;
color: #0f172a;
font-weight: 500;
}
#menu-dropdown a:hover { background: #f2f2f2; text-decoration: none; }
/* Taalschakelaar (NL/EN) onderaan het menu — zie i18n.js. De actieve taal
krijgt geen apart element/icoon, alleen een subtiele markering
(aria-current, door i18n.js gezet), zodat dit ook zonder extra assets kan. */
.menu-lang {
display: flex;
gap: 0.25rem;
padding: 0.5rem 1rem !important;
border-top: 1px solid #eee;
margin-top: 0.25rem;
}
.lang-option {
flex: 1 1 0;
padding: 0.3rem 0;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
color: #0f172a;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
}
.lang-option:hover { background: #ffd2c2; border-color: #ff7e5f; }
.lang-option[aria-current="true"] {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.tile-meta { font-size: 0.8rem; color: #666; display: block; }
/* Balk-layout voor lijsten (organisaties, projecten, views, elementen, ...)
— één volledig klikbare balk per item i.p.v. een tegel-grid, duidelijk
zichtbaar in de headerkleur als rand op een lichte achtergrond. */
.bar-list {
list-style: none;
padding: 0;
margin: 0 0 1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.bar-list li { margin: 0; }
.bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 0.7rem 1rem;
border: 1px solid #ff7e5f;
border-radius: 8px;
background: #fff2ee;
color: inherit;
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease;
box-sizing: border-box;
}
.bar:hover { background: #ffe6dd; text-decoration: none; }
.bar-title {
color: #ff7e5f;
font-weight: 600;
word-break: break-word;
}
.bar-meta { font-size: 0.8rem; color: #7c3f34; flex-shrink: 0; }
.bar-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
/* Een project in de lijst (story startscherm-en-editor/88): de naam, twee knoppen met tekst naar het model
en de documentatie, en de iconen. De balk zelf is niet klikbaar; de knoppen zijn echte links. */
.project-bar { cursor: default; flex-wrap: wrap; }
.project-bar:hover { background: #fff2ee; }
.project-bar-name { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 14rem; min-width: 0; }
.project-bar-name .bar-meta { flex-shrink: 1; }
.project-bar-open { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Ruimte voor drie iconen, rechts uitgelijnd: zo staan de knoppen met tekst in elke rij onder elkaar. */
.project-bar .bar-actions { min-width: calc(3 * 2rem + 2 * 0.4rem); justify-content: flex-end; }
.project-open {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.8rem;
border: 1px solid #ff7e5f;
border-radius: 6px;
background: #fff;
color: #b83a1d;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease;
}
.project-open:hover { background: #ffd2c2; text-decoration: none; }
.project-open:focus-visible { outline: 2px solid #ff7e5f; outline-offset: 2px; }
.project-open svg { width: 18px; height: 18px; }
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 6px;
background: #fff;
color: #334155;
cursor: pointer;
}
/* Hover in een schakering van de titelkleur (#ff7e5f, oranje uit het logo):
sterker dan de hover van .bar (#ffe6dd), zodat een icoonknop ook binnen een
balk zichtbaar oplicht. */
.icon-button { transition: background-color 0.15s ease, color 0.15s ease; }
.icon-button:hover { background: #ffd2c2; color: #b83a1d; }
.icon-button:focus-visible { outline: 2px solid #ff7e5f; outline-offset: 2px; }
.icon-button svg { width: 16px; height: 16px; }
/* Kaart (.panel) + lichter sub-blok (.panel-block) daarbinnen — gedeeld
patroon over meerdere pagina's (model.html, tenant.html), zodat losstaande
secties (structuur, infoblok, projecten, uitnodigen, …) er als bij elkaar
horende, herkenbare blokken uitzien i.p.v. losse koppen met een
ertussen. */
.panel {
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
}
.panel + .panel {
margin-top: 1rem;
}
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.panel-header h3 { margin: 0; }
.panel-block {
margin-top: 1rem;
padding: 0.75rem 0.9rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
}
/* Een knop die eruitziet als een link (het beheerscherm, story pakketten-en-betalen/12). */
.link-button { background: none; border: 0; padding: 0; color: #c2410c; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-button:disabled { color: inherit; text-decoration: none; cursor: default; }
.copy-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.copy-row code { word-break: break-all; }
.copy-row .icon-button { border: 1px solid #e2e8f0; width: 1.75rem; height: 1.75rem; }
.copy-row .icon-button:hover { border-color: #ff7e5f; }
.panel-block h4 {
margin: 0 0 0.5rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
/* Links naar voorwaarden, privacy en about, rechtsonder op elke pagina (story
startscherm-en-editor/58): klein, en alleen de links zelf zijn klikbaar. */
.legal-links {
position: fixed;
right: 0.75rem;
bottom: 0.4rem;
z-index: 40;
display: flex;
gap: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.85);
font-size: 0.75rem;
pointer-events: none;
}
.legal-links a {
color: #64748b;
pointer-events: auto;
}
@media print {
.legal-links { display: none; }
}
/* De pagina's zelf: leesbare regellengte. */
.legal-page article {
max-width: 46rem;
line-height: 1.55;
}
.legal-page article h2 { margin-top: 1.75rem; }
.legal-page .legal-meta { color: #666; font-size: 0.85rem; }
.legal-page .lang-switch { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.legal-page .lang-option[aria-current="true"] { font-weight: 600; }
/* De publieke startpagina en de pagina over de plugin (home.html, plugin.html,
story platform-en-infrastructuur/18): dezelfde leesbare kolom als de
juridische pagina's, met een inleiding, knoppen, genummerde stappen en
blokken per platform. */
.info-page .lead { font-size: 1.1rem; color: #334155; }
.info-page h1 { line-height: 1.2; }
.info-page h3 { margin: 1.25rem 0 0.25rem; font-size: 1rem; color: #0f172a; }
.page-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 1.25rem 0 0.5rem;
}
.button-link {
display: inline-block;
padding: 0.55rem 1rem;
border: 1px solid #ff7e5f;
border-radius: 6px;
background: #ff7e5f;
color: #fff;
font-weight: 600;
}
.button-link:hover { background: #f26a4a; border-color: #f26a4a; text-decoration: none; }
.button-link.secondary { background: #fff; color: #b83a1d; }
.button-link.secondary:hover { background: #fff2ee; }
.info-page ol.steps {
list-style: none;
counter-reset: step;
padding: 0;
}
.info-page ol.steps > li {
counter-increment: step;
position: relative;
padding: 0 0 0.25rem 2.75rem;
margin: 0 0 0.75rem;
}
.info-page ol.steps > li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0.1rem;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: #ff7e5f;
color: #fff;
font-weight: 700;
text-align: center;
line-height: 1.9rem;
}
.info-page ol.steps h3 { margin-top: 0; }
.info-page ol.steps p { margin: 0.2rem 0 0; }
.info-page section.platform {
margin: 1rem 0;
padding: 0.25rem 1rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
}
.info-page code {
padding: 0.05rem 0.3rem;
border-radius: 3px;
background: #eef2f7;
font-size: 0.9em;
overflow-wrap: anywhere;
}
.info-page pre {
margin: 0.5rem 0;
padding: 0.6rem 0.8rem;
border-radius: 6px;
background: #0f172a;
color: #e2e8f0;
overflow-x: auto;
}
.info-page pre code { padding: 0; background: none; color: inherit; overflow-wrap: normal; }
.info-page dl.faq dt { margin-top: 0.9rem; font-weight: 600; }
.info-page dl.faq dd { margin: 0.2rem 0 0; }
/* Een keuze uit een paar mogelijkheden met elk een regel uitleg (story
samenwerken/11: de manier van samenwerken bij een nieuw project). */
.choice-group {
margin: 0.75rem 0;
padding: 0;
border: none;
}
.choice-group legend { padding: 0; font-weight: 600; }
.choice {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0.4rem 0;
font-weight: 400;
}
.choice input { width: auto; margin: 0.2rem 0 0; }
.choice .hint { display: block; margin: 0; }
/* Het formulier voor een nieuw project: de teksten over de volle breedte van het
blok, het naamveld en de knop zo smal als in andere formulieren (story
pakketten-en-betalen/16). */
#form-create-project { max-width: none; }
#form-create-project input[type="text"] { max-width: 28rem; }
/* Een lijst met per regel een knop (de apparaten waarop Archi is ingelogd, story samenwerken/03). */
.working-share-list { list-style: none; margin: 0.5rem 0; padding: 0; }
.working-share-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.35rem 0; border-top: 1px solid #e2e8f0; }
/* Vensters (