/* Shared design tokens. Each site sets one accent variable via a .site- class on — structure, spacing and neutrals below are identical everywhere; only the accent differs. */ :root { --brand-neutral-bg: #f6f7f3; --brand-neutral-border: #dfe2d9; --brand-ink: #22261f; --brand-ink-muted: #5c6357; } .site-main { --brand-accent: #1f6f5c; --brand-accent-dark: #175646; } .site-webshop { --brand-accent: #2f5f8a; --brand-accent-dark: #24496b; } .site-admin { --brand-accent: #7a4a8a; --brand-accent-dark: #5f3a6c; } .site-oliebollen { --brand-accent: #b8862a; --brand-accent-dark: #966d20; } .site-stafleden { --brand-accent: #7a3050; --brand-accent-dark: #602540; } /* Shared chrome, reused by every site's navbar (see _partials/topnav.njk) */ .brand-nav { background: var(--brand-neutral-bg); border-bottom: 1px solid var(--brand-neutral-border); } .brand-nav .navbar-brand { font-weight: 700; color: var(--brand-accent); } .brand-nav .navbar-brand:hover { color: var(--brand-accent-dark); } .brand-nav .nav-link { color: var(--brand-ink-muted); } .brand-nav .nav-link:hover, .brand-nav .nav-link:focus { color: var(--brand-ink); } .brand-nav .nav-link.active { color: var(--brand-accent); font-weight: 600; } .brand-nav .navbar-text { color: var(--brand-ink-muted); font-size: 0.9rem; } .btn-brand { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } .btn-brand:hover, .btn-brand:focus { background: var(--brand-accent-dark); border-color: var(--brand-accent-dark); color: #fff; } a.admin_icon_link { color: #000; text-decoration: none; } fieldset.json-fieldset { border: 1px solid #000; background: rgb(230, 230, 230); padding: 10px; margin: 10px 0; } .shirt-div { width: 280px; height: 320px; border: 1px solid black; margin-bottom: 10px; } .shirt-image { width: 220px; height: 220px; } .image-width { width: 90%; }