/* ── AllRoundGothic web fonts ────────────────────────────── */
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-XLig.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-XLigOblique.ttf") format("truetype");
font-weight: 200;
font-style: oblique;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-Book.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-BookOblique.ttf") format("truetype");
font-weight: 400;
font-style: oblique;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-MediumOblique.ttf") format("truetype");
font-weight: 500;
font-style: oblique;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-Demi.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-DemiOblique.ttf") format("truetype");
font-weight: 600;
font-style: oblique;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-Bold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "allroundgothic";
src: url("/fonts/AllRoundGothic-BoldOblique.ttf") format("truetype");
font-weight: 600;
font-style: oblique;
font-display: swap;
}
/* Utility-klassen */
.nib-font-round         { font-family: "allroundgothic", sans-serif; font-weight: 400; }
.nib-font-round-medium  { font-family: "allroundgothic", sans-serif; font-weight: 500; }
.nib-font-round-semi    { font-family: "allroundgothic", sans-serif; font-weight: 600; }
/* Alle koppen in AllRoundGothic */
h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-h4, .rz-text-h5, .rz-text-h6 {
font-family: "allroundgothic", sans-serif;
font-weight: 500;
}
.rz-button {
vertical-align: middle;
}
/* ── Blazor reconnect modal (vriendelijke UX) ───────────── */
#components-reconnect-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.42);
z-index: 10050;
padding: 1rem;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
display: flex;
}
.nib-reconnect-card {
width: min(92vw, 430px);
border-radius: 12px;
background: var(--rz-panel-background-color);
color: var(--rz-text-color);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
border: 1px solid var(--rz-border-color);
padding: 1.1rem 1.2rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.nib-reconnect-card h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.nib-reconnect-card p {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--rz-text-secondary-color);
}
.nib-reconnect-reload {
display: none;
align-items: center;
justify-content: center;
padding: 0.55rem 0.95rem;
border: none;
border-radius: 8px;
background: var(--rz-primary);
color: #fff;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
width: fit-content;
}
.nib-reconnect-reload:hover {
opacity: 0.9;
}
/* ── Collecties overzicht pagina ──────────────────────────── */
.nib-coll-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black  5%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 92%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 10%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 30%);
background: var(--photo-bg-5);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-coll-block-content {
}
/* ── Collectie overview block (nib-gd-block variant) ──── */
.nib-coll-overview-block {
--photo-color: var(--group-color, #075082);
--coll-color: var(--group-color, #075082);
}
/* ── Collectie kaart v2 (photo-card stijl) ────────────── */
.nib-coll-card-v2 {
--cc-light: color-mix(in oklab, var(--cc, #075082), white 82%);
--cc-base:  color-mix(in oklab, var(--cc, #075082), white 68%);
--cc-dark:  color-mix(in oklab, var(--cc, #075082), black 28%);
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
cursor: pointer;
border-radius: 0;
background: var(--cc-light);
}
/* Achtergrondvlak */
.nib-coll-card-v2-surface {
position: absolute;
inset: 0;
background: linear-gradient(160deg, var(--cc-light) 0%, var(--cc-base) 100%);
}
/* 2×2 foto-grid als achtergrond */
.nib-coll-card-v2-thumbs {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
position: absolute;
inset: 0;
}
.nib-coll-card-v2-thumbs img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Lichte scrim zodat percentage leesbaar blijft */
.nib-coll-card-v2-scrim {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--cc-light) 55%, transparent);
transition: background 0.3s ease;
}
.nib-coll-card-v2:hover .nib-coll-card-v2-scrim {
background: color-mix(in srgb, var(--cc-light) 42%, transparent);
}
/* Groot percentage centraal */
.nib-coll-card-v2-pct {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
gap: 0.15rem;
}
.nib-coll-card-v2-pct-num {
font-size: clamp(2.8rem, 8vw, 4rem);
font-weight: 600;
line-height: 1;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.25);
opacity: 0.88;
transition: opacity 0.3s ease;
}
.nib-coll-card-v2-pct-num small {
font-size: 0.45em;
font-weight: 600;
vertical-align: super;
margin-left: 0.05em;
}
.nib-coll-card-v2:hover .nib-coll-card-v2-pct-num {
opacity: 1;
}
.nib-coll-card-v2-pct-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.2);
opacity: 0.72;
}
/* Emoji rechtsboven */
.nib-coll-card-v2-emoji {
position: absolute;
top: 0.65rem;
right: 0.75rem;
font-size: 1.6rem;
z-index: 2;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12));
pointer-events: none;
}
/* Info-balk onderin */
.nib-coll-card-v2-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 0.9rem 0.8rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
z-index: 2;
background: color-mix(in srgb, var(--cc-dark) 68%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.nib-coll-card-v2-name {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.nib-coll-card-v2-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.7rem;
font-size: 0.72rem;
color: rgba(255,255,255,0.78);
}
.nib-coll-card-v2-meta i {
font-size: 0.62rem;
opacity: 0.7;
margin-right: 0.22rem;
}
/* Skeleton */
.nib-coll-card-sk {
display: flex;
flex-direction: column;
overflow: hidden;
}
.nib-coll-card-sk-surface {
height: 100px;
}
.nib-coll-card-sk-info {
height: 2.5rem;
opacity: 0.5;
}
/* Dark mode */
.rz-material-dark .nib-coll-card-v2 {
--cc-light: color-mix(in oklab, var(--cc, #075082), black 32%);
--cc-base:  color-mix(in oklab, var(--cc, #075082), black 48%);
--cc-dark:  color-mix(in oklab, var(--cc, #075082), black 62%);
}
.rz-material-dark .nib-coll-card-v2-chip {
background: rgba(0,0,0,0.4);
color: rgba(255,255,255,0.8);
}
.nib-coll-loading,
.nib-coll-empty {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 2rem;
justify-content: center;
color: var(--rz-text-secondary-color);
font-size: 0.9rem;
}
.nib-coll-empty i {
font-size: 2rem;
opacity: 0.25;
}
/* Grid */
.nib-coll-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1px;
}
@media (max-width: 1100px) { .nib-coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
.nib-coll-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}  }
/* Card */
.nib-coll-card {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black  5%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 92%);
--photo-text: color-mix(in oklab, var(--photo-color, #075082), black 10%);
background: var(--rz-base-background-color);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* Card header */
.nib-coll-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.85rem 1rem;
background: var(--photo-bg-1);
color: #fff;
}
.nib-coll-card-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1;
}
.nib-coll-card-icon {
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
}
.nib-coll-card-icon-fa {
font-size: 1rem;
opacity: 0.85;
flex-shrink: 0;
}
.nib-coll-card-title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
/* Donut in card header */
.nib-coll-donut-wrap {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.nib-coll-donut-wrap .nib-stat-donut {
width: 44px;
height: 44px;
}
.nib-coll-donut-pct {
font-size: 0.65rem;
font-weight: 600;
color: #fff;
line-height: 1;
}
/* Thumbnails */
.nib-coll-card-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
height: 90px;
overflow: hidden;
}
.nib-coll-thumb {
width: 100%;
height: 90px;
object-fit: cover;
display: block;
}
/* Body */
.nib-coll-card-body {
padding: 0.75rem 1rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.nib-coll-card-desc {
margin: 0;
font-size: 0.8rem;
color: var(--rz-text-secondary-color);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nib-coll-card-stats {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.85rem;
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
}
.nib-coll-card-stats i {
color: var(--photo-text);
opacity: 0.7;
width: 14px;
text-align: center;
}
/* Footer link */
.nib-coll-card-footer {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--photo-text);
border-top: 1px solid var(--photo-bg-3);
margin-top: auto;
transition: gap 0.15s ease;
}
.nib-coll-card:hover .nib-coll-card-footer {
gap: 0.65rem;
}
/* Dark mode */
.rz-material-dark .nib-coll-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
--photo-text: color-mix(in oklab, var(--photo-color, #075082), white 80%);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.rz-material-dark .nib-coll-card {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
--photo-text: color-mix(in oklab, var(--photo-color, #075082), white 80%);
background: var(--rz-base-700);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* ═══════════════════════════════════════════════════════
NIB COLLECTIE OVERVIEW CARDS  (professioneel, groter)
═══════════════════════════════════════════════════════ */
.nib-coll-ov-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1px;
background: color-mix(in oklab, var(--coll-color, #075082) 12%, transparent);
}
@media (max-width: 720px) {
.nib-coll-ov-grid {
grid-template-columns: 1fr;
}
}
/* ── Collectiekaart: hero met voortgangsring ───────────── */
.nib-coll-card .nib-card-hero {
padding: 2.25rem 1.5rem 2rem;
background:
radial-gradient(circle at 85% 15%,
color-mix(in oklab, var(--_color), white 50%) 0%,
transparent 55%),
var(--_hero-bg);
}
.nib-coll-ring {
position: relative;
width: 128px;
height: 128px;
transition: transform 0.5s ease;
}
.nib-coll-card:hover .nib-coll-ring {
transform: scale(1.05);
}
.nib-coll-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.nib-coll-ring-track,
.nib-coll-ring-bar {
fill: none;
stroke-width: 7;
}
.nib-coll-ring-track {
stroke: color-mix(in oklab, var(--_color), white 52%);
}
/* omtrek r=44 → 2π·44 ≈ 276.46 */
.nib-coll-ring-bar {
stroke: var(--_hero-text);
stroke-linecap: round;
stroke-dasharray: 276.46;
stroke-dashoffset: calc(276.46 * (100 - var(--ring-pct, 0)) / 100);
animation: nib-coll-ring-in 1.1s ease-out;
transition: stroke 0.3s ease;
}
@keyframes nib-coll-ring-in {
from {
stroke-dashoffset: 276.46;
}
}
.nib-coll-card:hover .nib-coll-ring-bar {
stroke: color-mix(in oklab, var(--_hero-text), black 15%);
}
.nib-coll-ring-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.9rem;
font-weight: 600;
line-height: 1;
color: var(--_hero-text);
}
.nib-coll-ring-pct small {
font-size: 0.45em;
font-weight: 600;
vertical-align: super;
margin-left: 0.1em;
opacity: 0.75;
}
.rz-material-dark .nib-coll-ring-track {
stroke: color-mix(in oklab, var(--_color), black 38%);
}
.rz-material-dark .nib-coll-card:hover .nib-coll-ring-bar {
stroke: color-mix(in oklab, var(--_hero-text), white 15%);
}
/* Skeleton-hero: zelfde opbouw en maten als de echte ring-hero */
.nib-coll-sk-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 2.25rem 1.5rem 2rem;
}
.nib-coll-sk-ring {
width: 128px;
height: 128px;
border-radius: 50%;
}
/* Beschrijving over 4 regels op de collectiekaart */
.nib-coll-card .nib-card-desc {
-webkit-line-clamp: 4;
}
/* Breder grid: max 3 kolommen op desktop (zoals nieuws-overzicht) */
.nib-coll-overview-block .nib-coll-ov-grid {
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}
@media (max-width: 720px) {
.nib-coll-overview-block .nib-coll-ov-grid {
grid-template-columns: 1fr;
}
}
/* ── Card ──────────────────────────────────────────────── */
.nib-coll-ov-card {
display: flex;
flex-direction: column;
cursor: pointer;
transition: opacity 0.15s;
}
.nib-coll-ov-card:hover {
opacity: 0.92;
}
/* ── Hero (percentage blok, donkerdere tint) ───────────── */
.nib-coll-ov-hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 2.5rem 1.5rem;
background: color-mix(in oklab, var(--coll-color, #075082), white 35%);
}
.nib-coll-ov-hero-pct {
font-size: clamp(3rem, 7vw, 4.5rem);
font-weight: 600;
line-height: 1;
color: color-mix(in oklab, var(--coll-color, #075082), black 25%);
}
.nib-coll-ov-hero-pct small {
font-size: 0.4em;
font-weight: 600;
vertical-align: super;
margin-left: 0.05em;
}
.nib-coll-ov-hero-count {
font-size: 0.85rem;
font-weight: 600;
color: color-mix(in oklab, var(--coll-color, #075082), black 15%);
letter-spacing: 0.02em;
}
/* ── Info (lichter blok: titel + beschrijving + tags) ──── */
.nib-coll-ov-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 1.25rem 1.5rem 1.35rem;
background: color-mix(in oklab, var(--coll-color, #075082), white 62%);
flex: 1;
}
/* Title */
.nib-coll-ov-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
color: color-mix(in oklab, var(--coll-color, #075082), black 32%);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Description */
.nib-coll-ov-desc {
margin: 0 0 1em 0;
font-size: 0.88rem;
color: color-mix(in oklab, var(--coll-color, #075082), black 12%);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Tags */
.nib-coll-ov-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-top: auto;
}
.nib-coll-ov-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.7rem;
font-size: 0.78rem;
font-weight: 600;
border-radius: 4px;
background: color-mix(in oklab, var(--coll-color, #075082), white 48%);
color: color-mix(in oklab, var(--coll-color, #075082), black 22%);
}
.nib-coll-ov-tag i {
font-size: 0.68rem;
opacity: 0.7;
}
/* ── Skeleton ──────────────────────────────────────────── */
.nib-coll-ov-card-sk {
display: flex;
flex-direction: column;
background: var(--rz-panel-background-color);
overflow: hidden;
}
.nib-coll-ov-sk-hero {
height: 140px;
}
.nib-coll-ov-sk-info {
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
flex: 1;
}
/* ── Dark mode ─────────────────────────────────────────── */
.rz-material-dark .nib-coll-ov-hero {
background: color-mix(in oklab, var(--coll-color, #075082), black 25%);
}
.rz-material-dark .nib-coll-ov-hero-pct {
color: color-mix(in oklab, var(--coll-color, #075082), white 55%);
}
.rz-material-dark .nib-coll-ov-hero-count {
color: color-mix(in oklab, var(--coll-color, #075082), white 35%);
}
.rz-material-dark .nib-coll-ov-info {
background: color-mix(in oklab, var(--coll-color, #075082), black 55%);
}
.rz-material-dark .nib-coll-ov-title {
color: color-mix(in oklab, var(--coll-color, #075082), white 75%);
}
.rz-material-dark .nib-coll-ov-desc {
color: color-mix(in oklab, var(--coll-color, #075082), white 50%);
}
.rz-material-dark .nib-coll-ov-tag {
background: color-mix(in oklab, var(--coll-color, #075082), black 35%);
color: color-mix(in oklab, var(--coll-color, #075082), white 55%);
}
/* ── Homepage specifiek ───────────────────────────────────── */
.nib-hp-main-split {
--_hp: var(--hp-color, #075082);
display: grid;
grid-template-columns: minmax(220px, 30%) 1fr;
min-height: 250px;
}
.nib-hp-main-split-left {
background: var(--_hp);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.nib-hp-main-logo {
width: min(210px, 72%);
height: auto;
display: block;
}
.nib-hp-main-split-right {
background: color-mix(in oklab, var(--_hp), white 82%);
padding: 1.65rem 1.85rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
justify-content: center;
}
.nib-hp-main-wordmark {
width: min(360px, 100%);
height: auto;
display: block;
}
.nib-hp-main-wordmark--light {
display: none;
}
.nib-hp-main-desc {
margin: 0;
color: color-mix(in oklab, var(--_hp), black 24%);
font-size: 0.96rem;
line-height: 1.58;
max-width: 64ch;
}
.nib-hp-main-link {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 0.45rem;
text-decoration: none;
font-size: 0.83rem;
font-weight: 600;
padding: 0.36rem 0.78rem;
border-radius: 4px;
background: color-mix(in oklab, var(--_hp), white 62%);
color: color-mix(in oklab, var(--_hp), black 30%);
}
.nib-hp-main-link i {
font-size: 0.65rem;
}
.nib-hp-main-link:hover {
text-decoration: none;
background: color-mix(in oklab, var(--_hp), white 56%);
}
.nib-hp-main-split-sk {
display: grid;
grid-template-columns: minmax(220px, 30%) 1fr;
min-height: 250px;
}
.nib-hp-main-split-sk-left {
background: #075082;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.nib-hp-main-split-sk-right {
background: color-mix(in oklab, #075082, white 82%);
padding: 1.65rem 1.85rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
justify-content: center;
}
.nib-hp-main-split-sk-logo {
width: min(210px, 72%);
height: 64px;
opacity: 0.55;
}
.nib-hp-main-split-sk-title {
width: min(360px, 100%);
height: 2.4rem;
}
.nib-hp-main-split-sk-line {
height: 0.8rem;
width: 96%;
}
.nib-hp-main-split-sk-tag {
width: 11rem;
height: 1.7rem;
}
.nib-hp-main-footer {
--_hp: var(--hp-color, #075082);
background: color-mix(in oklab, var(--_hp), white 72%);
color: color-mix(in oklab, var(--_hp), black 26%);
padding: 0.72rem 1.85rem;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.45;
}
.nib-hp-main-footer-sk {
background: color-mix(in oklab, #075082, white 72%);
padding: 0.72rem 1.85rem;
}
.rz-material-dark .nib-hp-main-split-right {
background: color-mix(in oklab, var(--_hp), black 56%);
}
.rz-material-dark .nib-hp-main-wordmark--dark {
display: none;
}
.rz-material-dark .nib-hp-main-wordmark--light {
display: block;
}
.rz-material-dark .nib-hp-main-desc {
color: color-mix(in oklab, var(--_hp), white 72%);
}
.rz-material-dark .nib-hp-main-link {
background: color-mix(in oklab, var(--_hp), black 34%);
color: color-mix(in oklab, var(--_hp), white 78%);
}
.rz-material-dark .nib-hp-main-link:hover {
background: color-mix(in oklab, var(--_hp), black 28%);
}
.rz-material-dark .nib-hp-main-footer {
background: color-mix(in oklab, var(--_hp), black 46%);
color: color-mix(in oklab, var(--_hp), white 74%);
}
.rz-material-dark .nib-hp-main-footer-sk {
background: color-mix(in oklab, #075082, black 46%);
}
@media (max-width: 860px) {
.nib-hp-main-split,
.nib-hp-main-split-sk {
grid-template-columns: 1fr;
}
.nib-hp-main-split-left,
.nib-hp-main-split-sk-left {
min-height: 150px;
}
}
.nib-hp-footer-link {
color: var(--gc-text);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: gap 0.15s;
}
.nib-hp-footer-link:hover {
gap: 0.55rem;
text-decoration: none;
}
.nib-hp-footer-link i {
font-size: 0.72rem;
}
.nib-hp-online i {
color: #2b8a6e;
font-size: 0.55rem;
vertical-align: middle;
}
/* ── Homepage sort-chip toggle ─── */
.nib-hp-sort {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.28rem 0.7rem;
border: 1px solid var(--gc-border, var(--rz-border-color));
border-radius: 20px;
background: transparent;
color: var(--gc-text, var(--rz-text-secondary-color));
font-size: 0.76rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.nib-hp-sort i {
font-size: 0.65rem;
opacity: 0.7;
}
.nib-hp-sort:hover:not(.nib-hp-sort--active) {
background: color-mix(in oklab, var(--group-color, #075082), transparent 88%);
border-color: color-mix(in oklab, var(--group-color, #075082), transparent 55%);
color: var(--gc-dark, var(--rz-text-color));
}
.nib-hp-sort--active {
background: var(--gc-dark, var(--group-color, #075082));
border-color: var(--gc-dark, var(--group-color, #075082));
color: #fff;
}
.nib-hp-sort--active i {
opacity: 1;
}
.rz-material-dark .nib-hp-sort--active {
background: color-mix(in oklab, var(--group-color, #075082), black 18%);
border-color: color-mix(in oklab, var(--group-color, #075082), black 18%);
}
/* ── Hero blok (Index pagina) ─────────────────────────────── */
/* Reserveert dezelfde hoogte als de hero tijdens auth-bepaling → geen layout-shift */
.nib-hero-placeholder {
min-height: 520px;
border-radius: 0;
}
/* ── Hero skeleton (zelfde afmetingen als .nib-hero) ─────── */
@keyframes nib-rotate {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}
.nib-spin {
display: inline-block;
animation: nib-rotate 1s linear infinite;
}
/* ══════════════════════════════════════════════════════════════
nib-reveal — herbruikbare "verschijn"-animatie (kaarten, blokken…)
SCROLL-GETRIGGERD: elementen zijn verborgen tot ze in beeld komen.
js/reveal.js (IntersectionObserver) zet `.nib-reveal--in` zodra het
element in de viewport scrolt; dan speelt de animatie.
Progressive enhancement: de verborgen begintoestand geldt alleen als
<html> de class `nib-reveal-js` heeft (vroeg in <head> gezet). Zonder
JS / zonder IntersectionObserver blijft alles gewoon zichtbaar.
- Losse elementen: class `nib-reveal` (optioneel `--reveal-i` voor delay).
- Grids/rijen: class `nib-reveal-stagger` op de container; de directe
kinderen cascaden via nth-child zodra de container in beeld komt.
Respecteert prefers-reduced-motion.
══════════════════════════════════════════════════════════════ */
@keyframes nib-reveal-in {
from { opacity: 0; transform: translateY(16px) scale(0.985); }
to   { opacity: 1; transform: translateY(0)    scale(1);     }
}
/* Verborgen begintoestand (alleen met JS, en vóór de trigger) */
.nib-reveal-js .nib-reveal:not(.nib-reveal--in),
.nib-reveal-js .nib-reveal-stagger:not(.nib-reveal--in) > * {
opacity: 0;
}
/* Los element in beeld → animeren (stagger-container zelf uitgezonderd) */
.nib-reveal--in:not(.nib-reveal-stagger) {
animation: nib-reveal-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
animation-delay: calc(var(--reveal-i, 0) * 45ms);
}
/* Stagger-container in beeld → kinderen getrapt animeren (cap ~0.63s) */
.nib-reveal-stagger.nib-reveal--in > * {
animation: nib-reveal-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.nib-reveal-stagger.nib-reveal--in > *:nth-child(1)  { animation-delay: 0ms;   }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(2)  { animation-delay: 45ms;  }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(3)  { animation-delay: 90ms;  }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(4)  { animation-delay: 135ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(5)  { animation-delay: 180ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(6)  { animation-delay: 225ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(7)  { animation-delay: 270ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(8)  { animation-delay: 315ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(9)  { animation-delay: 360ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(10) { animation-delay: 405ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(11) { animation-delay: 450ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(12) { animation-delay: 495ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(13) { animation-delay: 540ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(14) { animation-delay: 585ms; }
.nib-reveal-stagger.nib-reveal--in > *:nth-child(n+15) { animation-delay: 630ms; }
@media (prefers-reduced-motion: reduce) {
.nib-reveal-js .nib-reveal:not(.nib-reveal--in),
.nib-reveal-js .nib-reveal-stagger:not(.nib-reveal--in) > * { opacity: 1; }
.nib-reveal--in:not(.nib-reveal-stagger),
.nib-reveal-stagger.nib-reveal--in > * { animation: none; }
}
/* nib-reveal-scroll — lange/verticale grids: elk kind wordt APART geobserveerd
en animeert zodra HET in beeld komt (echte per-kaart scroll-reveal). Een
lichte kolom-cascade (4n) houdt het levendig zonder lange delays, dus ook
kaarten die je in scrolt verschijnen meteen vlot. */
.nib-reveal-js .nib-reveal-scroll > *:not(.nib-reveal--in) {
opacity: 0;
}
.nib-reveal-scroll > *.nib-reveal--in {
animation: nib-reveal-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.nib-reveal-scroll > *.nib-reveal--in:nth-child(4n+1) { animation-delay: 0ms;   }
.nib-reveal-scroll > *.nib-reveal--in:nth-child(4n+2) { animation-delay: 45ms;  }
.nib-reveal-scroll > *.nib-reveal--in:nth-child(4n+3) { animation-delay: 90ms;  }
.nib-reveal-scroll > *.nib-reveal--in:nth-child(4n)   { animation-delay: 135ms; }
@media (prefers-reduced-motion: reduce) {
.nib-reveal-js .nib-reveal-scroll > *:not(.nib-reveal--in) { opacity: 1; }
.nib-reveal-scroll > *.nib-reveal--in { animation: none; }
}
@keyframes nib-shimmer {
0%   { background-position: -600px 0; }
100% { background-position:  600px 0; }
}
.nib-hero-skeleton {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-hero-skeleton-left {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.85rem;
padding: 3.5rem 3rem 3.5rem 3.5rem;
background: var(--rz-base-200, #e8edf2);
}
.nib-hero-skeleton-right {
background: var(--rz-base-300, #d4dce6);
}
.nib-hero-skeleton-actions {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
/* Gedeelde shimmer-balk */
.nib-sk {
border-radius: 6px;
background: var(--rz-base-300, #d4dce6);
}
.nib-sk-pill  { height: 1rem;  width: 9rem;  border-radius: 20px; }
.nib-sk-title { height: 2.4rem; width: 85%; }
.nib-sk-line  { height: 0.85rem; width: 95%; }
.nib-sk-btn   { height: 2.6rem; width: 9rem; border-radius: 8px; }
.nib-sk-btn-ghost { opacity: 0.55; }
@media (max-width: 768px) {
.nib-hero-skeleton {
grid-template-columns: 1fr;
}
.nib-hero-skeleton-right { min-height: 120px; }
.nib-hero-skeleton-left  { padding: 2.5rem 1.5rem; }
}
.nib-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
position: relative;
/* Tone variabelen afgeleid van --photo-color (gezet als inline style) */
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 72%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-text-light:  color-mix(in oklab, var(--photo-color, #075082), white 75%);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-hero-dateburn {
position: absolute;
top: 1rem;
right: 1.5rem;
z-index: 2;
font-size: clamp(2rem, 6vw, 4.8rem);
font-weight: 900;
letter-spacing: -0.03em;
color: #fff;
opacity: 0.13;
pointer-events: none;
user-select: none;
text-transform: uppercase;
text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.nib-hero-left {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding: 3.5rem 3rem 3.5rem 3.5rem;
gap: 0;
background: var(--photo-bg-1);
}
.nib-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--photo-text-light);
margin-bottom: 1rem;
}
.nib-hero-title {
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 600;
color: #fff;
line-height: 1.15;
margin: 0 0 1.25rem 0;
letter-spacing: -0.02em;
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.nib-hero-sub {
font-size: 1rem;
color: var(--photo-text-light);
line-height: 1.65;
margin: 0 0 2rem 0;
max-width: 48ch;
}
.nib-hero-features {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 2rem;
}
.nib-hero-feature {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--photo-bg-2);
color: #fff;
padding: 0.35rem 0.75rem;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 500;
}
.nib-hero-feature i {
font-size: 0.75rem;
opacity: 0.9;
}
.nib-hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.nib-hero-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s ease;
text-decoration: none;
}
.nib-hero-btn-primary {
background: #fff;
color: var(--photo-text);
}
.nib-hero-btn-primary:hover {
background: var(--photo-bg-5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.nib-hero-btn-ghost {
background: var(--photo-bg-2);
color: #fff;
border: 1px solid var(--photo-bg-3);
}
.nib-hero-btn-ghost:hover {
background: var(--photo-bg-3);
transform: translateY(-1px);
}
.nib-hero-disclaimer {
font-size: 0.72rem;
color: var(--photo-text-light);
opacity: 0.6;
margin: 0;
letter-spacing: 0.03em;
}
.nib-hero-right {
display: flex;
align-items: center;
justify-content: center;
background: var(--photo-bg-4);
padding: 3rem 2.5rem;
position: relative;
overflow: hidden;
}
.nib-hero-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 320px;
}
.nib-hero-logo {
width: 80%;
max-width: 280px;
/* Kleur aanpassen aan de bg-4 achtergrond: donkere toon van photo-color */
filter: brightness(0) saturate(100%)
invert(18%) sepia(60%) saturate(600%) hue-rotate(178deg) brightness(90%);
opacity: 0.85;
}
@media (max-width: 768px) {
.nib-hero {
grid-template-columns: 1fr;
}
.nib-hero-dateburn {
top: 0.65rem;
right: 0.9rem;
opacity: 0.1;
font-size: clamp(1.5rem, 8vw, 3rem);
}
.nib-hero-right {
padding: 2.5rem 2rem;
min-height: 180px;
}
.nib-hero-left {
padding: 2.5rem 1.5rem;
}
}
/* ── Sidebar feature lijst ────────────────────────────────── */
/* ── Statistieken rij ─────────────────────────────────────── */
.nib-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.nib-stat-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 48%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 62%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 84%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), black 20%);
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 160px;
}
.nib-stat-block-header {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.1rem;
background: var(--photo-bg-1);
color: #fff;
}
.nib-stat-block-header i { font-size: 1rem; opacity: 0.85; flex-shrink: 0; }
.nib-stat-block-title {
font-size: 0.88rem;
font-weight: 600;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nib-stat-block-body {
background: var(--photo-bg-5);
padding: 1rem 1.1rem 0.85rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nib-stat-block-metrics {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.nib-stat-block-metric {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.nib-stat-block-value {
font-size: 1.6rem;
font-weight: 600;
color: var(--photo-text);
line-height: 1;
letter-spacing: -0.03em;
}
.nib-stat-block-label {
font-size: 0.65rem;
font-weight: 600;
color: var(--photo-text-accent);
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.75;
}
.nib-stat-block-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--photo-text-accent);
text-decoration: none;
margin-top: auto;
transition: gap 0.15s;
}
.nib-stat-block-link:hover { gap: 0.55rem; color: var(--photo-text); text-decoration: none; }
.nib-stat-block-link i { font-size: 0.65rem; }
/* ── Collectie-blok: donut + metrics rij ─────────────────── */
.nib-stat-coll-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.nib-stat-donut-wrap {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.nib-stat-donut {
width: 72px;
height: 72px;
transform: rotate(-90deg);
}
.nib-stat-donut-bg {
fill: none;
stroke: var(--photo-bg-3);
stroke-width: 3.5;
}
.nib-stat-donut-fill {
fill: none;
stroke: var(--photo-bg-1);
stroke-width: 3.5;
stroke-linecap: round;
transition: stroke-dasharray 0.6s ease;
}
.nib-stat-donut-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.nib-stat-donut-pct {
font-size: 1rem;
font-weight: 600;
color: var(--photo-text);
line-height: 1;
}
.nib-stat-coll-metrics {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.nib-stat-species-sub {
font-size: 0.68rem;
font-weight: 600;
color: var(--photo-text-accent);
opacity: 0.75;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nib-stat-block-body-logo {
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
}
.nib-stat-logo {
width: 70%;
max-width: 120px;
filter: brightness(0) saturate(100%)
invert(18%) sepia(60%) saturate(600%) hue-rotate(178deg) brightness(90%);
opacity: 0.7;
}
.nib-stat-tagline {
font-size: 0.78rem;
color: var(--photo-text-accent);
margin: 0;
line-height: 1.4;
}
@media (max-width: 900px) {
.nib-stats-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.nib-stats-row { grid-template-columns: 1fr; }
}
.rz-material-dark .nib-stat-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 28%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 42%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 56%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 72%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 85%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 60%);
}
.rz-material-dark .nib-stat-logo {
filter: brightness(0) invert(1);
opacity: 0.6;
}
.sidebar-feature {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.84rem;
color: var(--rz-text-secondary-color);
padding: 0.1rem 0;
}
.sidebar-feature i {
width: 20px;
text-align: center;
color: var(--rz-primary);
flex-shrink: 0;
font-size: 0.85rem;
}
/* ── Sidebar secties / dividers ───────────────────────────── */
.sidebar-section {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 1rem 1rem 1rem;
}
.sidebar-section-social {
gap: 0.4rem;
}
.sidebar-section-features {
gap: 0.65rem;
padding-bottom: 1rem;
}
.sidebar-section-nav {
gap: 0.15rem;
padding-bottom: 1rem;
}
.sidebar-intro {
font-size: 0.83rem;
color: var(--rz-text-secondary-color);
line-height: 1.55;
margin: 0 0 0.4rem;
}
.sidebar-divider {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem 0;
color: var(--rz-text-disabled-color);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sidebar-divider::before,
.sidebar-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--rz-border-color);
}
/* ── Social login knoppen ─────────────────────────────────── */
.sidebar-social-btn {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.85rem;
border-radius: 8px;
border: 1px solid var(--rz-border-color);
background: var(--rz-base-background-color);
color: var(--rz-text-color);
font-size: 0.84rem;
font-weight: 500;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
cursor: pointer;
}
.sidebar-social-btn:hover {
background: var(--rz-base-100);
border-color: var(--rz-primary-lighter, #a8d4f0);
color: var(--rz-text-color);
text-decoration: none;
}
/* ── Navigatie items (ingelogd) ───────────────────────────── */
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.85rem;
border-radius: 8px;
color: var(--rz-text-color);
font-size: 0.88rem;
font-weight: 500;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.sidebar-nav-item i {
width: 18px;
text-align: center;
color: var(--rz-primary);
flex-shrink: 0;
font-size: 0.85rem;
}
.sidebar-nav-item:hover {
background: var(--rz-base-100);
color: var(--rz-primary);
text-decoration: none;
}
.sidebar-nav-item:hover i {
color: var(--rz-primary);
}
/* ── Sidebar skeleton ─────────────────────────────────────── */
.sidebar-skeleton {
gap: 0.55rem;
}
.sidebar-sk-btn {
height: 2.6rem;
width: 100%;
border-radius: 8px;
}
.sidebar-sk-nav {
height: 2.4rem;
width: 100%;
border-radius: 8px;
}
.sidebar-sk-faded {
opacity: 0.55;
}
.sidebar-block-sk {
overflow: hidden;
}
.sidebar-block-sk-header {
height: 3.1rem;
background: color-mix(in oklab, var(--rz-secondary, #2b8a6e), white 78%);
}
.sidebar-block-sk-content {
display: flex;
flex-direction: column;
gap: 1px;
padding: 0.5rem;
background: color-mix(in oklab, var(--rz-secondary, #2b8a6e), white 90%);
}
.sidebar-block-sk-link {
height: 2rem;
border-radius: 7px;
}
.rz-material-dark .sidebar-block-sk-header {
background: color-mix(in oklab, var(--rz-secondary, #2b8a6e), black 68%);
}
.rz-material-dark .sidebar-block-sk-content {
background: color-mix(in oklab, var(--rz-secondary, #2b8a6e), black 78%);
}
/* ── Sidebar block (gedeeld) ──────────────────────────────── */
.sidebar-block {
--sb-header:  color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 78%);
--sb-content: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 90%);
--sb-text:    color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), black 18%);
--sb-icon-bg: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 30%);
border-radius: 0;
overflow: hidden;
box-shadow: none;
margin: 0;
}
.sidebar-block-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: var(--sb-header);
}
.sidebar-block-icon {
width: 2.2rem;
height: 2.2rem;
border-radius: 8px;
background: var(--sb-icon-bg);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.sidebar-block-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.15;
color: var(--sb-text);
}
.sidebar-block-content {
display: flex;
flex-direction: column;
gap: 1px;
padding: 0.5rem;
background: var(--sb-content);
}
.sidebar-block-link {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.65rem;
border-radius: 7px;
color: var(--sb-text);
font-size: 0.84rem;
font-weight: 500;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.sidebar-block-link i {
width: 16px;
text-align: center;
font-size: 0.78rem;
color: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), black 5%);
flex-shrink: 0;
}
.sidebar-block-link:hover {
background: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 70%);
color: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), black 30%);
text-decoration: none;
}
.sidebar-block-link:hover i {
color: var(--sidebar-block-color, #2b8a6e);
}
/* dark mode */
.rz-material-dark .sidebar-block {
--sb-header:  color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), black 68%);
--sb-content: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), black 78%);
--sb-text:    color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 82%);
--sb-icon-bg: rgba(255, 255, 255, 0.18);
}
.rz-material-dark .sidebar-block-link i {
color: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 45%);
}
.rz-material-dark .sidebar-block-link:hover {
background: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), black 60%);
color: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 80%);
}
.rz-material-dark .sidebar-block-link:hover i {
color: color-mix(in oklab, var(--sidebar-block-color, #2b8a6e), white 70%);
}
/* ── Foto-blok (Index pagina) ─────────────────────────────── */
.nib-photos-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 88%);
--photo-text:  color-mix(in oklab, var(--photo-color, #075082), black 35%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), black 15%);
background: var(--photo-bg-5);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-photos-header {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
padding: 1.25rem 1.5rem;
background: var(--photo-bg-4);
border-bottom: 1px solid var(--photo-bg-3);
}
.nib-photos-header-left {
flex: 1;
min-width: 0;
}
.nib-photos-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--photo-text);
margin: 0 0 0.2rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-photos-title i {
color: var(--photo-text-accent);
font-size: 1rem;
}
.nib-photos-sub {
font-size: 0.8rem;
color: var(--photo-text-accent);
margin: 0;
opacity: 0.8;
}
.nib-photos-stats {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
align-items: center;
}
.nib-stat-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.85rem;
background: var(--photo-bg-3);
border-radius: 20px;
font-size: 0.8rem;
color: var(--photo-text);
white-space: nowrap;
}
.nib-stat-pill i {
font-size: 0.72rem;
opacity: 0.75;
}
.nib-stat-pill strong {
font-weight: 600;
}
.nib-stat-pill-accent {
background: var(--photo-bg-2);
color: #fff;
}
.nib-photos-all-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.15rem;
background: var(--photo-bg-1);
color: #fff;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
white-space: nowrap;
}
.nib-photos-all-btn:hover {
opacity: 0.85;
color: #fff;
text-decoration: none;
}
.nib-photos-all-btn i {
font-size: 0.72rem;
transition: transform 0.15s;
}
.nib-photos-all-btn:hover i {
transform: translateX(3px);
}
.nib-photos-grid-wrap {
}
/* Orde — prominent, volle breedte */
.animal-group-order {
padding: 0.6rem 1rem;
background: var(--photo-bg-1, var(--rz-primary));
color: #fff;
}
.animal-group-order .animal-group-type {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(255,255,255,0.2);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.animal-group-order .animal-group-name {
flex: 1;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #fff;
}
.animal-group-order .animal-group-count {
font-size: 0.75rem;
font-weight: 600;
background: rgba(255,255,255,0.2);
color: #fff;
padding: 0.2rem 0.6rem;
border-radius: 20px;
white-space: nowrap;
}
/* Familie — subheader, geen inspringing, geen border */
.animal-group-family {
padding: 0.4rem 1rem;
background: var(--rz-base-background-color);
margin-left: 0;
}
.animal-group-family .animal-group-type {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--rz-base-300);
color: var(--rz-text-secondary-color);
padding: 0.15rem 0.5rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.animal-group-family .animal-group-name {
flex: 1;
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-color);
}
.animal-group-family .animal-group-count {
font-size: 0.7rem;
color: var(--rz-text-secondary-color);
background: var(--rz-base-300);
padding: 0.15rem 0.5rem;
border-radius: 20px;
white-space: nowrap;
}
/* Eerste orde-header geen top-margin */
.animal-group-order:first-child {
margin-top: 0;
}
/* ── Species foto skeleton grid ──────────────────────────── */
.nib-coll-species-grid-sk {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0;
padding: 0;
}
/* ── Sidebar stat row ─────────────────────────────────────── */
.sidebar-stat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.3rem 1rem;
font-size: 0.8rem;
color: var(--rz-text-secondary-color);
}
.sidebar-stat-row span {
display: flex;
align-items: center;
gap: 0.4rem;
}
.sidebar-stat-row strong {
color: var(--rz-text-color);
font-size: 0.82rem;
}
/* ── Collectie compact header ─────────────────────────────── */
.coll-compact-header {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--photo-bg-1, var(--rz-primary));
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
color: #fff;
}
.coll-compact-icon {
font-size: 2.4rem;
line-height: 1;
flex-shrink: 0;
margin-top: 0.1rem;
}
.coll-compact-body {
flex: 1;
min-width: 0;
}
.coll-compact-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 0.25rem 0;
color: #fff;
line-height: 1.2;
}
.coll-compact-desc {
margin: 0;
font-size: 0.9rem;
color: rgba(255,255,255,0.8);
line-height: 1.5;
max-height: 3rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.coll-compact-badge {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
background: rgba(255,255,255,0.2);
color: #fff;
border-radius: 8px;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
backdrop-filter: blur(4px);
}
.coll-compact-badge i {
font-size: 1.1rem;
}
/* ── Sidebar donut chart ──────────────────────────────────── */
.sidebar-donut-wrap {
position: relative;
width: 120px;
height: 120px;
margin: 1rem auto 0.5rem;
}
.sidebar-donut {
width: 120px;
height: 120px;
transform: rotate(-90deg);
}
.sidebar-donut-bg {
fill: none;
stroke: var(--rz-base-300);
stroke-width: 3.5;
}
.sidebar-donut-fill {
fill: none;
stroke: var(--rz-primary);
stroke-width: 3.5;
stroke-linecap: round;
transition: stroke-dasharray 0.6s ease;
}
.sidebar-donut-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.sidebar-donut-pct {
font-size: 1.3rem;
font-weight: 600;
color: var(--rz-text-color);
line-height: 1;
}
.sidebar-donut-sub {
font-size: 0.65rem;
color: var(--rz-text-secondary-color);
margin-top: 0.2rem;
text-align: center;
}
/**/
.sidebar-root {
height: 100vh; /* volledige viewport hoogte */
}
/* Binnenkant als flex kolom */
.sidebar-content {
height: 100%;
display: flex;
flex-direction: column;
}
/* Dit stuk mag groeien en duwt de footer naar beneden */
.sidebar-main {
flex: 1;
overflow: auto; /* optioneel: scrollen als menu lang is */
}
/* Onderste knop netjes onderin */
.sidebar-footer {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
align-items: stretch;
}
/* ── Sidebar newsletter block ────────────────────────── */
.snl-block {
margin-bottom: 0.75rem;
padding: 0.85rem 0.9rem;
border-left: 3px solid #1a6b3c;
background: color-mix(in oklab, #1a6b3c 7%, var(--rz-base-background-color));
border-radius: 0 8px 8px 0;
}
.snl-header {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.3rem;
}
.snl-icon {
color: #1a6b3c;
font-size: 0.85rem;
}
.snl-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--rz-text-color);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.snl-text {
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
margin: 0 0 0.6rem;
line-height: 1.4;
}
.snl-form {
display: flex;
gap: 0.35rem;
}
.snl-input {
flex: 1;
min-width: 0;
padding: 0.35rem 0.6rem;
border: 1px solid var(--rz-border-color);
border-radius: 6px;
background: var(--rz-base-background-color);
color: var(--rz-text-color);
font-size: 0.75rem;
outline: none;
transition: border-color 0.15s;
}
.snl-input:focus {
border-color: #1a6b3c;
}
.snl-input::placeholder {
color: var(--rz-text-disabled-color);
}
.snl-btn {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border: none;
border-radius: 6px;
background: #1a6b3c;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
transition: opacity 0.15s;
}
.snl-btn:disabled {
opacity: 0.45;
cursor: default;
}
.snl-btn:not(:disabled):hover {
opacity: 0.85;
}
.snl-success {
font-size: 0.78rem;
color: #1a6b3c;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.35rem;
}
/* ── Sidebar stats (online / bezoekers) ──────────────── */
.sidebar-stats {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0 0.15rem;
}
.sidebar-stats-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
color: var(--rz-text-secondary-color);
font-weight: 500;
}
.sidebar-stats-item i {
font-size: 0.62rem;
opacity: 0.6;
width: 0.7rem;
text-align: center;
}
.sidebar-stats-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex-shrink: 0;
}
.sidebar-stats-dot--online {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
animation: nib-pulse-dot 2s ease-in-out infinite;
}
@keyframes nib-pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.corner-badge {
position: absolute !important;
z-index: 10;
transform: rotate(45deg);
right: -3.2rem; /* finetunen naar wens */
top: 1rem;
padding: 0.5rem 4rem !important; /* brede strook */
border-radius: 0 !important; /* lint-gevoel i.p.v. ronde badge */
box-shadow: 0 4px 12px rgba(0,0,0,.2);
text-transform: uppercase;
font-weight: 600;
letter-spacing: .06em;
}
.validation-errors {
background-color: var(--rz-danger);
border-radius: 5px;
padding: 0.5em;
list-style: none;
color: white;
}
.validation-message {
opacity: 0.8;
margin: 0.3em;
font-size: medium;
}
.sidebar-header {
background-color: var(--bg-sidebar-header) !important;
}
.sidebar-subheader {
background-color: var(--bg-sidebar-subheader) !important;
}
.rz-avatar-pin {
/* Grootte kun je per plek overschrijven: style="--size:72px" */
--ring: #fff; /* randkleur; evt. overschrijven in dark mode */
background: white;
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 999px;
border: 4px solid var(--ring);
overflow: hidden;
display: grid;
place-items: center;
z-index: 1;
/*    box-shadow: 0 4px 24px rgba(0,0,0,.25);
*/
}
.relative {
position: relative !important;
}
.photo {
aspect-ratio: 16 / 9;
}
@media (max-aspect-ratio: 1/1) {
.photo {
aspect-ratio: 1 / 1;
}
}
.page-row {
--rz-row-gap: 0.5em !important;
}
@media(max-width: 576px) {
.rz-avatar--sm {
--size: 80px;
}
.page-row {
--rz-row-gap: 0 !important;
}
.rz-card {
border-radius: 0 !important;
}
.rz-card.rz-card.rz-variant-filled {
box-shadow: none;
}
.rz-avatar--md {
--size: 96px;
}
.rz-avatar--lg {
--size: 80px;
}
.rz-m-avatar--lg {
padding-top: 25px;
}
}
@media(min-width: 576px) {
.rz-body {
--rz-row-gap: 0.5em !important;
}
.rz-avatar--sm {
--size: 80px !important;
;
}
.rz-avatar--md {
--size: 96px !important;
;
}
.rz-avatar--lg {
--size: 80px !important;
}
.rz-m-avatar--lg {
padding-top: 35px;
}
}
@media(min-width: 768px) {
.rz-avatar--sm {
--size: 80px !important;
;
}
.rz-avatar--md {
--size: 96px !important;
;
}
.rz-avatar--lg {
--size: 100px !important;
;
}
.rz-m-avatar--lg {
padding-top: 40px !important;
}
}
@media(min-width: 992px) {
.rz-avatar--sm {
--size: 80px !important;
;
}
.rz-avatar--md {
--size: 96px !important;
;
}
.rz-avatar--lg {
--size: 110px !important;
}
.rz-m-avatar--lg {
padding-top: 45px !important;
}
}
@media(min-width: 1200px) {
.rz-avatar--sm {
--size: 80px !important;
;
}
.rz-avatar--md {
--size: 96px !important;
;
}
.rz-avatar--lg {
--size: 130px !important;
}
.rz-m-avatar--lg {
padding-top: 55px !important;
}
}
@media(min-width: 1400px) {
.rz-avatar--sm {
--size: 80px !important;
}
.rz-avatar--md {
--size: 96px !important;
}
.rz-avatar--lg {
--size: 160px !important;
}
.rz-m-avatar--lg {
padding-top: 70px !important;
}
}
/* Handige grootte-varianten (optioneel) */
/* ===== Verankering in VISUEEL RECHTERE kolom of onderste blok ===== */
/* Geef die kolom/blok in je markup: Class="col-right-anchor" */
.col-right-anchor {
position: relative; /* position context voor de avatar */
overflow: visible;
}
/* — Tussen twee kolommen —
Plaats .rz-avatar-pin als direct child van .col-right-anchor.
De avatar hangt half buiten de linkerrand, zodat het middelpunt op de naad valt. */
.col-right-anchor > .rz-avatar-pin {
left: 0;
top: 50%;
transform: translate(-50%, -50%); /* 50% naar links = midden op de naad */
}
.col-center-anchor > .rz-avatar-pin {
left: 50%; /* centreer horizontaal boven de seam */
top: 0; /* precies onder het foto-blok */
transform: translate(-50%, -50%); /* half overlap, dus 'tussen de blokken' */
}
@media (max-width: 767.98px) {
.pin-anchor > .rz-avatar-pin {
left: 50%; /* centreer horizontaal boven de seam */
top: 100%; /* precies onder het foto-blok */
transform: translate(-50%, -50%); /* half overlap, dus 'tussen de blokken' */
}
/* — Tussen twee rijen —
Gebruik dezelfde class .col-right-anchor maar dan op het ONDERSTE blok/container.
Verplaats de avatar naar de bovenrand (hart op de scheidslijn). */
.col-right-anchor.col-between-rows > .rz-avatar-pin {
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
}
/* ===== Responsief gedrag wanneer kolommen stacken (mobiel) =====
Bij Radzen/Bootstrap is md ~ 768px. Onder md centreren we de avatar. */
@media (max-width: 767.98px) {
.col-right-anchor > .rz-avatar-pin {
left: 50%;
transform: translate(-50%, -50%);
}
}
/* (Optioneel) Dark mode ring die matcht met je panelkleur
Zet waar nodig bv. op body: --avatar-ring: var(--rz-base-200); en haal onderstaande comment weg. */
/*
.rz-avatar-pin{ border-color: var(--avatar-ring, #fff); }
*/
.photo-box {
position: relative;
display: inline-block;
}
.rz-justify-content-space-between {
justify-content: space-between !important;
}
.rz-form-field-label {
color: inherit !important;
}
/*input, rz-html-editor-content {
background-color: inherit !important;
border: none !important;
border-block-end: none !important;
outline: none !important;
}
*/
/*.texteditor, .textbox input {
background-color: inherit !important;
}
*/
/*.texteditor, .textbox input {
background-color: rgba(0,0,0,0.1) !important;
}
.rz-html-editor-content {
background-color: rgba(0,0,0,0.1);
}
*/
/*.rz-form-field input {
background-color: rgba(0,0,0,0.05) !important;
}
*/ /**/
.rz-form-field.rz-variant-filled .rz-form-field-content:after, .rz-form-field.rz-variant-text .rz-form-field-content:after {
inset: 0 !important;
border: 0 !important;
}
.grid-stack-item-content {
border-radius: var(--rz-card-border-radius) !important;
overflow: hidden;
}
.loading-overlay {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.5); /* van 0.85 naar 0.8 */
z-index: 9999;
pointer-events: all; /* vang muis-events af zodat de cursor zichtbaar wordt */
overflow: hidden;
cursor: wait; /* zet de cursor op zandloper/progress */
}
/* de rest van je styles kun je ongemoeid laten */
.birds-container { /* … */
}
.bird { /* … */
}
.splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--rz-primary);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
/* 1s fade-in (optioneel), 2s zichtbaar, 1s fade-out */
animation: fadeInOut 2s ease-in-out forwards;
}
@keyframes fadeInOut {
0% {
opacity: 1;
}
/* fade-in */
50% {
opacity: 1;
}
/* zichtbaar */
100% {
opacity: 0;
visibility: hidden;
}
/* fade-out + hide */
}
.splash-screen img {
width: 70vmin; /* vult een groot deel van het scherm */
max-width: 500px;
height: auto;
}
.item-image {
object-fit: cover;
object-position: center;
}
.selectable img {
cursor: pointer;
filter: brightness(100%);
transition: filter .55s ease-in-out;
-moz-transition: filter.55s ease-in-out;
-webkit-transition: filter.55s ease-in-out;
}
.selectable img:hover {
filter: brightness(80%);
cursor: pointer;
transition: filter .55s ease-in-out;
-moz-transition: filter.55s ease-in-out;
-webkit-transition: filter.55s ease-in-out;
}
.textarea {
--rz-editor-focus-outline: none;
}
.datalist .li {
--rz-datalist-item-margin-inline: 0.5rem;
}
.rz-panel {
box-shadow: none;
border: var(--rz-input-border) !important;
background-color: var(--rz-panel-background-color);
}
.rz-panel-titlebar {
align-items: self-end;
}
.rz-panel-titlebar .rz-text-body1 {
margin: 0;
padding: 0;
}
:root {
/*    --rz-input-padding-block: 0;
--rz-input-padding-inline: 0;
--rz-input-height: 1;*/
--logo-header-height: var(--rz-header-min-height);
/*    --rz-input-padding-inline: 0.5em !important;
*/ --rz-text-h6-margin-block-end: 0.1em !important;
--rz-text-caption-margin-block-end: 0.1em !important;
--rz-layout-body-background-color: var(--rz-base);
--rz-datalist-item-margin-inline: 0;
--rz-datalist-item-padding: 0.1rem;
--rz-datalist-padding: 0 0 0.5rem 0;
--rz-datalist-item-border: none;
/*    --rz-input-disabled-border: none;
*/
--rz-sidebar-width: 290px !important;
--rz-text-disabled-color: var(--rz-input-value-color);
--rz-tabs-padding: 0;
--rz-panel-toggle-icon-background-color: transparent;
--rz-text-font-family: "kiro", "tablet-gothic", "new-atten-round", "NTR", "Bai Jamjuree", sans-serif;
--rz-primary: #075082; /* jouw gekozen basiskleur */
--rz-primary-light: #8fb5d9; /* iets donkerder dan je voorstel, beter contrast op wit */
--rz-primary-lighter: #d0e2f0; /* zachter, voor subtiele achtergronden/hover */
--rz-primary-dark: #064273; /* iets donkerder voor actieve elementen */
--rz-primary-darker: #042d4c; /* bijna navy, voor high-contrast states */
--rz-secondary: #2b8a6e; /* hoofdgroen */
--rz-secondary-light: #65c0a1; /* lichte variant, bijv. voor hover */
--rz-secondary-lighter: #b2e2d1; /* zeer licht, bijv. voor achtergrond of badges */
--rz-secondary-dark: #1e6f5c; /* donkerder, voor actieve knoppen of borders */
--rz-secondary-darker: #13483a; /* diep donker, voor contrastrijke toepassingen */
--rz-root-font-size: 1rem !important;
--rz-body-font-size: 1rem !important;
--rz-on-primary: #ffffff; /* witte tekst op donkerblauw */
--rz-on-primary-light: #1e2f3f; /* donkergrijsblauw op lichtblauw achtergrond */
--rz-on-primary-lighter: #1a2a36; /* iets donkerder voor contrast op zeer lichte kleur */
--rz-on-primary-dark: #ffffff;
--rz-on-primary-darker: #ffffff;
--rz-on-secondary: #ffffff;
--rz-on-secondary-light: #1e3e34; /* donker jadegroen */
--rz-on-secondary-lighter: #20433a; /* iets meer contrast voor pastelgroen */
--rz-on-secondary-dark: #ffffff;
--rz-on-secondary-darker: #ffffff;
--rz-panel-menu-item-active-color: var(--rz-on-primary);
--rz-panel-menu-item-active-background-color: var(--rz-primary);
--rz-panel-menu-font-size: calc(var(--rz-body-font-size) * 0.9);
--rz-text-body1-line-height: 1.2;
/*    --rz-input-disabled-background-color: var(--rz-layout-body-background-color);
*/
--rz-card-border-radius: 0;opacity
--rz-card-padding: 0.5rem !important;
--rz-panel-padding: 0.5rem 1rem;
/*    --rz-shadow: 0;
*/ --rz-layout-body-padding: 0;
--rz-sidebar-background-color: var(--rz-base-100);
--rz-header-background-color: var(--rz-primary-dark) !important;
--rz-header-shadow: none;
/*    --rz-input-shadow: none;
--rz-input-border: none;
--rz-input-border-block-end: 0;
*/
/*    --rz-card-shadow: none;
*/
}
/* ═══════════════════════════════════════════════════════════════
DONKER THEMA  –  alle nieuwe blokken
Radzen dark = .rz-material-dark op de <html> tag
═══════════════════════════════════════════════════════════════ */
/* ── Hero ── */
.rz-material-dark .nib-hero {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 80%);
--photo-text-light:  color-mix(in oklab, var(--photo-color, #075082), white 55%);
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
/* In dark mode is bg-4 (rechts) donkerder → logo wit tonen */
.rz-material-dark .nib-hero-logo {
filter: brightness(0) invert(1);
opacity: 0.9;
}
/* Ghost-knop: donkere toon, witte tekst blijft */
.rz-material-dark .nib-hero-btn-primary {
background: var(--photo-bg-3);
color: #fff;
}
.rz-material-dark .nib-hero-btn-primary:hover {
background: var(--photo-bg-2);
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.rz-material-dark .nib-hero-btn-ghost {
background: var(--photo-bg-4);
border-color: var(--photo-bg-3);
}
.rz-material-dark .nib-hero-btn-ghost:hover {
background: var(--photo-bg-3);
}
/* Feature pills */
.rz-material-dark .nib-hero-feature {
background: var(--photo-bg-3);
}
/* ── Foto-blok ── */
.rz-material-dark .nib-photos-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 25%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 72%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 85%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 60%);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
/* Scheiding header / grid in dark mode */
.rz-material-dark .nib-photos-header {
border-bottom-color: var(--photo-bg-3);
}
/* ── Collectie compact header ── */
.rz-material-dark .coll-compact-header {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
/* ── Collectie groep headers ── */
.rz-material-dark .animal-group-order {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 20%);
}
.rz-material-dark .animal-group-family {
background: var(--rz-base-200);
}
/* ── Loading overlay donker thema ── */
.rz-material-dark .loading-overlay {
background: rgba(0, 0, 0, 0.6);
}
padding-top: 0.5em;
padding-bottom: 0.5em;
}
*/
/* Kaartje */
/*.photo-item {
display: grid;
gap: .4rem;
}
*/
:root {
--tone-mix-with: white; /* licht thema => tints */
--opp-mix-with: black; /* inverse in licht => iets donkerder */
--tone-on: #000;
--tone-p1: 80%;
--tone-p2: 62%;
--tone-p3: 45%;
--tone-p4: 30%;
--tone-p5: 15%;
/* stappen voor inverse richting (iets donkerder) */
--opp-p1: 6%;
--opp-p2: 12%;
--opp-p3: 18%;
--opp-p4: 28%;
--opp-p5: 40%;
--rz-panel-background-color: var(--rz-base-200)
}
.rz-material-dark {
--tone-mix-with: black; /* donker thema => shades */
--opp-mix-with: white; /* inverse in donker => iets lichter */
--tone-on: #fff;
--tone-p1: 6%;
--tone-p2: 12%;
--tone-p3: 18%;
--tone-p4: 24%;
--tone-p5: 32%;
/* inverse richting (lichter) iets voorzichtiger dan licht thema */
--opp-p1: 10%;
--opp-p2: 18%;
--opp-p3: 26%;
--opp-p4: 36%;
--opp-p5: 50%;
--rz-panel-background-color: var(--rz-base-700);
}
/* Per foto mini-palet opbouwen */
.photo-item {
--c: var(--photo-color);
/* “Normale” richting per thema */
/* normale richting (thema-afhankelijk) */
--tone-0: var(--c);
--tone-1: color-mix(in oklab, var(--c), var(--tone-mix-with) var(--tone-p1));
--tone-2: color-mix(in oklab, var(--c), var(--tone-mix-with) var(--tone-p2));
--tone-3: color-mix(in oklab, var(--c), var(--tone-mix-with) var(--tone-p3));
--tone-4: color-mix(in oklab, var(--c), var(--tone-mix-with) var(--tone-p4));
--tone-5: color-mix(in oklab, var(--c), var(--tone-mix-with) var(--tone-p5));
/* inverse richting (licht: donkerder / donker: lichter) */
--contrast-1: color-mix(in oklab, var(--c), var(--opp-mix-with) var(--opp-p1));
--contrast-2: color-mix(in oklab, var(--c), var(--opp-mix-with) var(--opp-p2));
--contrast-3: color-mix(in oklab, var(--c), var(--opp-mix-with) var(--opp-p3));
--contrast-4: color-mix(in oklab, var(--c), var(--opp-mix-with) var(--opp-p4));
--contrast-5: color-mix(in oklab, var(--c), var(--opp-mix-with) var(--opp-p5));
/* Utilities: kies gewenste tint/shade */
}
.bg-tone-0 {
--bg: var(--tone-0);
}
.bg-tone-1 {
--bg: var(--tone-1);
}
.bg-tone-2 {
--bg: var(--tone-2);
}
.bg-tone-3 {
--bg: var(--tone-3);
}
.bg-tone-4 {
--bg: var(--tone-4);
}
.bg-tone-5 {
--bg: var(--tone-5);
}
.bg-contrast-1 {
--bg: var(--contrast-1);
}
.bg-contrast-2 {
--bg: var(--contrast-2);
}
.bg-contrast-3 {
--bg: var(--contrast-3);
}
.bg-contrast-4 {
--bg: var(--contrast-4);
}
.bg-contrast-5 {
--bg: var(--contrast-5);
}
/* Generieke blok-styling */
.tone-block {
background: var(--bg);
color: var(--tone-on);
/*    border-top: 1px solid oklch(from var(--bg) calc(l * 0.9) c h);
*/
}
.nib-text-editor {
--rz-input-border: none;
--rz-input-background-color: transparent;
--rz-input-disabled-border: none;
--rz-input-focus-background-color: transparent;
--rz-input-hover-background-color: transparent;
--rz-input-border: 1px solid var(--tone-4);
--rz-input-disabled-background-color: var(--tone-3);
}
.nib-text-editor input {
font-size: large !important;
}
:root {
--rz-body-background-color: var(--rz-base-100);
--rz-sidebar-background-color: var(--rz-base-3bela00);
--rz-header-background-color: var(--rz-primary);
--bg-sidebar-header: var(--rz-primary-darker);
--bg-sidebar-subheader: var(--rz-base-400);
--bg-gallery: rgba(255,255,255,0.3);
--bg-gallery-panel: rgba(255,255,255,0.90);
}
.rz-material-dark {
--rz-sidebar-background-color: var(--rz-base-600);
--rz-header-background-color: var(--rz-primary-darker);
--bg-sidebar-header: var(--rz-primary);
--bg-sidebar-subheader: var(--rz-base-900);
--bg-gallery: rgba(0,0,0,0.3);
--bg-gallery-panel: rgba(0,0,0,0.8);
/*    --rz-input-background-color: var(--rz-primary-dark);
--rz-input-focus-background-color: var(--rz-primary-dark);
--rz-input-hover-background-color: var(--rz-primary-dark);
--rz-input-background-border-color: var(--rz-primary-dark);
--rz-input-placeholder-color: var(--rz-on-primary);*/
}
/* ── Foto's: toolbar strak onder header ────────────────────── */
.fotos-block-content {
padding: 0;
}
.fotos-toolbar {
border-radius: 0;
margin: 0;
border: none;
background: var(--photo-bg-5);
border-bottom: 1px solid var(--photo-bg-3);
}
.fotos-filter-panel {
background: var(--photo-bg-5);
margin: 0;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
padding: 1rem;
}
/* Dimmed tweede teller in toolbar */
.fotos-result-count-dim {
background: transparent !important;
padding-left: 0 !important;
color: var(--rz-text-secondary-color);
}
/* Badge in collectie-header wanneer gebruiker foto's heeft */
.coll-header-badge {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: color-mix(in oklab, var(--group-color, var(--rz-primary)), white 85%);
color: color-mix(in oklab, var(--group-color, var(--rz-primary)), black 30%);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.rz-material-dark .coll-header-badge {
background: color-mix(in oklab, var(--group-color, var(--rz-primary)), black 55%);
color: color-mix(in oklab, var(--group-color, var(--rz-primary)), white 70%);
}
/* Compacte voortgangsdonut in de collectie-header (rechts) */
.nib-coll-header-donut {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.nib-coll-header-donut .sidebar-donut {
width: 72px;
height: 72px;
margin: 0;
}
.nib-coll-header-donut .sidebar-donut-bg {
stroke: color-mix(in oklab, var(--group-color, #075082), white 65%);
}
.nib-coll-header-donut .sidebar-donut-fill {
stroke: var(--group-color, #075082);
}
.nib-coll-header-donut .sidebar-donut-pct {
font-size: 0.85rem;
color: var(--group-color, #075082);
}
.nib-coll-header-donut .sidebar-donut-sub {
font-size: 0.55rem;
color: color-mix(in oklab, var(--group-color, #075082), black 10%);
}
.rz-material-dark .nib-coll-header-donut .sidebar-donut-bg {
stroke: color-mix(in oklab, var(--group-color, #075082), black 40%);
}
.rz-material-dark .nib-coll-header-donut .sidebar-donut-fill {
stroke: color-mix(in oklab, var(--group-color, #075082), white 50%);
}
.rz-material-dark .nib-coll-header-donut .sidebar-donut-pct {
color: color-mix(in oklab, var(--group-color, #075082), white 60%);
}
.rz-material-dark .nib-coll-header-donut .sidebar-donut-sub {
color: color-mix(in oklab, var(--group-color, #075082), white 40%);
}
.rz-dialog-content {
background-color: var(--rz-body-background-color);
}
/* ── Account dropdown ───────────────────────────────────── */
.account-menu-container {
position: relative;
}
.account-menu {
position: fixed;
top: 64px;
right: 1rem;
width: 320px;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 3000;
}
.account-menu.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.account-menu-panel {
background: var(--rz-base-background-color);
border: 1px solid var(--rz-base-300);
border-radius: 12px;
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.account-menu-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-color);
}
.account-menu-text {
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
}
.account-menu-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.account-menu-profile {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
}
.account-menu-avatar {
--size: 44px;
}
.account-menu-initials {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--rz-primary);
color: #fff;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
}
.account-menu-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-color);
}
.account-menu-email {
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
}
.account-menu-backdrop {
position: fixed;
inset: 0;
z-index: 1500;
background: transparent;
}
@media (max-width: 640px) {
.account-menu {
right: -0.5rem;
width: min(92vw, 340px);
}
}
/* ── Beta badge ───────────────────────────────────────────── */
.nib-beta-badge {
position: fixed;
bottom: 5rem;
right: 1.5rem;
z-index: 9999;
display: flex;
align-items: center;
gap: 0;
background: #12122a;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 2px rgba(245,158,11,0.3);
overflow: hidden;
user-select: none;
}
.nib-beta-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #f59e0b;
flex-shrink: 0;
margin-left: 0.8rem;
animation: nib-beta-pulse 2s ease-in-out infinite;
}
@keyframes nib-beta-pulse {
0%, 100% { opacity: 1; transform: scale(1);    box-shadow: 0 0 0 0   rgba(245,158,11,0.6); }
50%       { opacity: 0.7; transform: scale(0.75); box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}
.nib-beta-pill {
display: flex;
align-items: center;
padding: 0.55rem 0.7rem 0.55rem 0.5rem;
cursor: pointer;
transition: background 0.15s;
}
.nib-beta-pill:hover {
background: rgba(245,158,11,0.12);
}
.nib-beta-label {
color: #f59e0b;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
}
.nib-beta-sep {
color: rgba(255,255,255,0.15);
font-weight: 300;
padding: 0 0.1rem;
pointer-events: none;
}
.nib-beta-feedback {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.55rem 0.9rem 0.55rem 0.6rem;
color: rgba(255,255,255,0.8);
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
border-radius: 0 999px 999px 0;
}
.nib-beta-feedback:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.nib-beta-feedback i {
font-size: 0.8rem;
}
/* ── Welcome dialog ───────────────────────────────────────── */
.nib-welcome-dialog-host .rz-dialog {
border-radius: 14px !important;
overflow: hidden !important;
padding: 0 !important;
}
.nib-welcome-dialog-host .rz-dialog-content {
padding: 0 !important;
}
.welcome-dialog {
display: flex;
flex-direction: column;
gap: 0;
}
.welcome-dialog-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.65rem;
padding: 2rem 1.5rem 1.5rem;
background: var(--rz-primary);
text-align: center;
}
.rz-material-dark .welcome-dialog-hero {
background: var(--rz-primary-darker, var(--rz-primary));
}
.welcome-dialog-logo {
height: 2.2rem;
width: auto;
filter: brightness(0) invert(1);
}
.welcome-dialog-sub {
margin: 0;
font-size: 0.9rem;
color: rgba(255,255,255,0.82);
}
.welcome-dialog-body {
padding: 1.25rem 1.5rem 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.welcome-dialog-intro {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
opacity: 0.85;
}
.welcome-dialog-form {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.welcome-dialog-error {
margin: 0;
font-size: 0.8rem;
color: var(--rz-danger);
display: flex;
align-items: center;
gap: 0.4rem;
}
.welcome-dialog-success {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1rem;
border-radius: 8px;
background: color-mix(in oklab, var(--rz-success, #22c55e), white 85%);
}
.rz-material-dark .welcome-dialog-success {
background: color-mix(in oklab, var(--rz-success, #22c55e), black 65%);
}
.welcome-dialog-success i {
font-size: 1.4rem;
color: var(--rz-success, #22c55e);
flex-shrink: 0;
}
.welcome-dialog-success strong {
display: block;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.1rem;
}
.welcome-dialog-success span {
font-size: 0.8rem;
opacity: 0.75;
}
.welcome-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.5rem 1.25rem;
border-top: 1px solid var(--rz-border-color);
margin-top: 0.5rem;
}
/* ── Beta info dialog ─────────────────────────────────────── */
.beta-dialog {
display: flex;
flex-direction: column;
gap: 0;
}
.beta-dialog-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 2rem 1.5rem 1.5rem;
background: var(--rz-primary-dark);
border-radius: 8px 8px 0 0;
text-align: center;
}
.beta-dialog-logo {
height: 36px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.beta-dialog-tag {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.12em;
background: #f59e0b;
color: #12122a;
padding: 0.18rem 0.6rem;
border-radius: 999px;
}
.beta-dialog-title {
margin: 0 0 0.2rem;
font-size: 1.3rem;
font-weight: 600;
color: #fff;
display: flex;
align-items: center;
gap: 0.6rem;
}
.beta-dialog-sub {
margin: 0;
font-size: 0.85rem;
color: rgba(255,255,255,0.8);
}
.beta-dialog-body {
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 0.9rem;
line-height: 1.6;
background-color: var(--rz-card-background-color);
}
.beta-dialog-features {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.beta-dialog-feature {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.65rem 0.85rem;
background: var(--rz-base-100);
border-radius: 8px;
border-left: 3px solid var(--rz-primary-lighter);
}
.beta-dialog-feature i {
font-size: 1rem;
color: var(--rz-primary);
margin-top: 0.15rem;
flex-shrink: 0;
width: 18px;
text-align: center;
}
.beta-dialog-feature div {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.beta-dialog-feature strong {
font-size: 0.85rem;
color: var(--rz-text-color);
}
.beta-dialog-feature span {
font-size: 0.8rem;
color: var(--rz-text-secondary-color);
}
.beta-dialog-note {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.65rem 0.85rem;
background: var(--rz-primary-lighter);
color: var(--rz-primary-darker);
border-radius: 8px;
font-size: 0.78rem;
line-height: 1.5;
}
.beta-dialog-note i {
flex-shrink: 0;
margin-top: 0.1rem;
}
.beta-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 0.85rem 1.5rem 1.25rem;
border-top: 1px solid var(--rz-base-300);
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
:root {
font-size: var(--rz-root-font-size);
}
body {
font-family: var(--rz-text-font-family);
color: var(--rz-text-color);
/*    font-size: var(--rz-body-font-size);
*/
font-size: 1rem;
line-height: 1.2;
/*        var(--rz-body-line-height);
*/
/*    background-color: var(--rz-body-background-color);
*/}
.rz-body {
--rz-body-padding: 0;
}
a {
color: var(--rz-link-color);
}
a:hover,
a:focus {
color: var(--rz-link-hover-color);
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMgMjYzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
/* ===== Newsletter block (nib-blok stijl) ===== */
.nib-newsletter-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #2b8a6e), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #2b8a6e), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #2b8a6e), white 45%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #2b8a6e), white 58%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #2b8a6e), white 88%);
--photo-text: color-mix(in oklab, var(--photo-color, #2b8a6e), black 35%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #2b8a6e), black 15%);
background: var(--photo-bg-5);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.rz-material-dark .nib-newsletter-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #2b8a6e), black 15%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #2b8a6e), black 25%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #2b8a6e), black 38%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #2b8a6e), black 52%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #2b8a6e), black 70%);
--photo-text: color-mix(in oklab, var(--photo-color, #2b8a6e), white 82%);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.nib-newsletter-content {
padding: 0;
}
/* Interne layout nieuwsbrief-component (zonder outer card) */
.nib-newsletter-content .newsletter-inner {
padding: 1.5rem;
background: transparent;
}
.nib-newsletter-content .newsletter-form {
background: var(--photo-bg-3);
border-radius: 10px;
box-shadow: none;
}
.nib-newsletter-content .newsletter-highlight {
background: var(--photo-bg-3);
color: var(--photo-text);
}
.nib-newsletter-content .newsletter-highlight i {
color: var(--photo-text-accent);
}
.nib-newsletter-content .newsletter-badge {
background: var(--photo-bg-2);
color: #fff;
}
.nib-newsletter-content .newsletter-alert {
padding: 1.5rem;
}
/* ===== Newsletter Action (Homepage) ===== */
.newsletter-card {
padding: 0;
overflow: hidden;
background: var(--rz-panel-background-color);
}
.newsletter-inner {
padding: 32px;
}
.newsletter-row {
align-items: stretch;
}
.newsletter-info {
display: flex;
flex-direction: column;
gap: 12px;
}
.newsletter-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--rz-base-100);
color: var(--rz-primary);
font-weight: 600;
font-size: 13px;
width: fit-content;
}
.newsletter-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 12px;
}
.newsletter-highlight {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 12px;
background: var(--rz-base-100);
color: var(--rz-text-secondary-color);
font-size: 14px;
font-weight: 500;
}
.newsletter-highlight i {
color: var(--rz-primary);
}
.newsletter-form {
height: 100%;
background: var(--rz-base-100);
border-radius: 14px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
box-shadow: inset 0 0 0 1px var(--rz-border-color);
}
.newsletter-form-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
.newsletter-submit {
width: 100%;
}
.newsletter-alert {
padding: 24px;
}
@media (max-width: 768px) {
.newsletter-inner {
padding: 24px;
}
.newsletter-form {
padding: 20px;
}
}
/* ===== AnimalGrid ===== */
.animal-grid-container {
width: 100%;
}
.animal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1px;
margin-bottom: 0.5rem;
}
/* Soort-/dierenraster met de soortkaart (.nib-species-card).
- Collectie: compacte ~300px checklist.
- Dieren-pagina: ruimere ~390px kaarten (zelfde kaart, groter raster).
De compound-selector wint van de 300px-regel hierboven. */
.animal-grid:has(.nib-species-card) {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.nib-animals-main-block .animal-grid:has(.nib-species-card) {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
/* ─ Species cards — unified design matching nib-cover-card + nib-coll-ov-card ─ */
.nib-species-card {
--sc-color:     var(--group-color, #075082);
--sc-bar:       color-mix(in oklab, var(--sc-color), white 50%);
--sc-text:      color-mix(in oklab, var(--sc-color), black 48%);
--sc-sub:       color-mix(in oklab, var(--sc-color), black 22%);
--sc-hero:      color-mix(in oklab, var(--sc-color), white 35%);
--sc-hero-icon: color-mix(in oklab, var(--sc-color), black 12%);
display: flex;
flex-direction: column;
cursor: pointer;
overflow: hidden;
transition: opacity 0.15s;
}
.nib-species-card:hover {
opacity: 0.92;
}
/* Image wrapper */
.nib-species-card-img-wrapper {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: color-mix(in oklab, var(--sc-color), white 70%);
}
.nib-species-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease, filter 0.3s ease;
}
.nib-species-card:hover .nib-species-card-img {
transform: scale(1.04);
filter: brightness(0.92);
}
/* No-photo hero block */
.nib-species-card-hero {
aspect-ratio: 3 / 2;
display: flex;
align-items: center;
justify-content: center;
background: var(--sc-hero);
}
.nib-species-card-hero i {
font-size: 2.75rem;
color: var(--sc-hero-icon);
opacity: 0.5;
}
/* Rating badge (top-left, inside img-wrapper) */
.nib-species-card-score {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.55rem;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nib-species-card-score i {
font-size: 0.6rem;
color: rgba(255, 210, 74, 0.9);
}
/* Info bar — below the image. Zelfde content-patroon als de fotokaart
(nib-cover-card-bar): prominente titel, rustige subtitel, en één
samenhangende meta-rij met icoon + label. Strak verticaal ritme. */
.nib-species-card-bar {
display: flex;
flex-direction: column;
gap: 0.18rem;
padding: 0.65rem 0.9rem;
background: var(--sc-bar);
flex: 1;
}
.nib-species-card-bar-text {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.nib-species-card-title {
margin: 0;
font-size: 0.95rem;
font-weight: 500;
color: var(--sc-text);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-species-card-latin {
font-size: 0.72rem;
font-style: italic;
color: var(--sc-sub);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
/* Stats als tags — pill-chips, dezelfde rol als .photo-card-chip,
maar getint op de sectie-/fotokleur zodat ze in de balk passen. */
.nib-species-card-stats {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.15rem;
}
.nib-species-card-stat {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.55rem;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 600;
color: var(--sc-text);
background: color-mix(in oklab, var(--sc-color), white 66%);
white-space: nowrap;
}
.nib-species-card-stat i {
font-size: 0.62rem;
opacity: 0.75;
}
.rz-material-dark .nib-species-card-stat {
background: color-mix(in oklab, var(--sc-color), black 22%);
color: #fff;
}
/* Neutrale tag voor ontbrekende soorten ("Nog niet vastgelegd") */
.nib-species-card-stat--dim {
background: var(--rz-base-200);
color: var(--rz-text-secondary-color);
font-weight: 500;
font-style: italic;
}
.rz-material-dark .nib-species-card-stat--dim {
background: color-mix(in oklab, var(--rz-base-200), black 8%);
color: var(--rz-text-secondary-color);
}
.rz-material-dark .nib-species-card {
--sc-bar:       color-mix(in oklab, var(--sc-color), black 42%);
--sc-text:      #fff;
--sc-sub:       rgba(255,255,255,0.78);
--sc-hero:      color-mix(in oklab, var(--sc-color), black 20%);
--sc-hero-icon: rgba(255,255,255,0.5);
}
/* Ontbrekende soort — neutrale "ghost"-tegel.
Géén sectiekleur (die blijft voorbehouden aan gefotografeerde
soorten); een rustig grijs vlak dat als checklist-item leest
("deze soort mis je nog") zonder de foto-kaarten te overstemmen. */
.nib-species-card--missing {
cursor: default;
}
.nib-species-card--missing:hover {
opacity: 1;
}
.nib-species-card--missing .nib-species-card-hero {
background: var(--rz-base-200);
}
.nib-species-card--missing .nib-species-card-hero i {
font-size: 2.4rem;
color: var(--rz-text-secondary-color);
opacity: 0.45;
}
.nib-species-card--missing .nib-species-card-bar {
background: var(--rz-base-100);
}
.nib-species-card--missing .nib-species-card-title {
color: var(--rz-text-secondary-color);
font-weight: 500;
}
.nib-species-card--missing .nib-species-card-latin {
color: var(--rz-text-secondary-color);
opacity: 0.7;
}
.animal-grid-section {
margin-bottom: 1.5rem;
}
/* Grid onder een familie-header: geen inspringing */
.animal-group-family + .animal-grid-section {
margin-left: 0;
border-left: none;
}
/* ─ Groep-headers ─ */
.animal-group-header {
display: flex;
align-items: center;
gap: 0.6rem;
}
.animal-group-order {
font-size: 1.25rem;
font-weight: 600;
color: var(--rz-text-color);
}
.animal-group-family {
border-bottom: 1px solid var(--rz-base-300, #e2e8f0);
font-size: 1rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #64748b);
}
.animal-group-order:first-child {
margin-top: 0;
}
.animal-group-icon {
color: var(--rz-primary);
font-size: 0.9em;
flex-shrink: 0;
}
.animal-group-name {
flex: 1;
}
.animal-group-count {
font-size: 0.78rem;
font-weight: 500;
padding: 0.15rem 0.55rem;
background: var(--rz-base-200);
border-radius: 999px;
color: var(--rz-text-secondary-color, #64748b);
flex-shrink: 0;
}
/* ─ Latijnse naam ─ */
.animal-latin {
font-style: italic;
}
/* ─ Geen foto placeholder ─ */
.animal-card-no-photo {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--photo-text);
background: var(--rz-body-background-color, #fff);
}
/* ─ Empty state ─ */
.animal-grid-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 3rem 2rem;
color: var(--rz-text-secondary-color, #64748b);
}
.animal-grid-empty i {
font-size: 3rem;
opacity: 0.25;
}
.animal-grid-empty h3 {
margin: 0;
font-size: 1.1rem;
}
.animal-grid-empty p {
margin: 0;
opacity: 0.6;
font-size: 0.9rem;
}
/* ─ Groepering toggle-knoppen ─ */
.animal-group-toggles {
display: flex;
gap: 0.35rem;
}
.animal-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem;
border: 1px solid var(--rz-base-300, #e2e8f0);
border-radius: 8px;
background: var(--rz-base-100);
color: var(--rz-text-secondary-color, #64748b);
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
transition: background 0.14s, border-color 0.14s, color 0.14s;
white-space: nowrap;
}
.animal-toggle-btn:hover {
background: var(--rz-base-200);
border-color: var(--rz-primary-light, #8fb5d9);
color: var(--rz-primary);
}
.animal-toggle-btn.active {
background: var(--rz-primary-lighter, #d0e2f0);
border-color: var(--rz-primary-light, #8fb5d9);
color: var(--rz-primary-dark, #064273);
font-weight: 600;
}
.animal-toggle-btn i {
font-size: 0.72rem;
}
@media (max-width: 640px) {
.animal-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
}
}
/* ===== Profile Collections (pc-*) ===== */
.pc-section {
padding: 0;
}
.pc-section-header {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.25rem 0 1rem;
}
.pc-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--rz-text-color);
letter-spacing: 0.02em;
text-transform: uppercase;
opacity: 0.55;
}
.pc-section-count {
background: var(--rz-base-300);
color: var(--rz-text-color);
font-size: 0.72rem;
font-weight: 600;
padding: 0.15rem 0.55rem;
border-radius: 999px;
opacity: 0.7;
}
/* ── Gedeelde progress ──────────────────────────────────────── */
.pc-progress-track {
width: 100%;
height: 5px;
background: rgba(255,255,255,0.25);
border-radius: 999px;
overflow: hidden;
}
.pc-card-progress {
width: 100%;
height: 4px;
background: var(--rz-base-300);
border-radius: 0;
overflow: hidden;
}
.pc-progress-fill {
height: 100%;
background: linear-gradient(90deg, #34d399, #60a5fa);
border-radius: 999px;
transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* ── Badges ─────────────────────────────────────────────────── */
.pc-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pc-badge-general {
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.25);
}
.pc-badge-owner {
background: rgba(52,211,153,0.25);
color: #34d399;
border: 1px solid rgba(52,211,153,0.4);
}
/* ── Featured kaart (news-featured split-stijl) ─────────────── */
.pc-featured {
display: flex;
height: 360px;
overflow: hidden;
cursor: pointer;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
margin-bottom: 1.25rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pc-featured:hover {
transform: translateY(-3px);
box-shadow: 0 10px 32px rgba(0,0,0,0.16);
}
/* Links: primaire kleur + voortgang */
.pc-featured-left {
flex: 0 0 42%;
position: relative;
overflow: hidden;
background: var(--photo-bg-1, var(--pc-color, #075082));
display: flex;
align-items: center;
justify-content: center;
}
.pc-featured-progress-wrap {
position: relative;
z-index: 1;
text-align: center;
color: white;
padding: 2rem;
width: 100%;
}
.pc-featured-pct {
font-size: 5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.pc-featured-pct span {
font-size: 2.5rem;
font-weight: 600;
opacity: 0.85;
}
.pc-featured-pct-label {
font-size: 0.8rem;
opacity: 0.8;
margin: 0.5rem 0 1rem;
font-weight: 500;
}
.pc-featured-left-track {
width: 100%;
height: 6px;
background: rgba(255,255,255,0.25);
border-radius: 999px;
overflow: hidden;
}
.pc-featured-left-fill {
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.95));
border-radius: 999px;
transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
/* Rechts: body-achtergrond + content */
.pc-featured-right {
flex: 0 0 58%;
padding: 2rem 2.25rem;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--photo-bg-5, var(--rz-body-background-color));
gap: 0.5rem;
overflow: hidden;
}
.pc-featured-badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.pc-badge-general-light {
background: color-mix(in oklab, var(--pc-color, #075082), transparent 88%);
color: color-mix(in oklab, var(--pc-color, #075082), var(--rz-text-color) 15%);
border: 1px solid color-mix(in oklab, var(--pc-color, #075082), transparent 72%);
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pc-badge-owner-light {
background: rgba(16,185,129,0.1);
color: #059669;
border: 1px solid rgba(16,185,129,0.3);
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.pc-featured-title {
font-size: 1.6rem;
font-weight: 600;
color: var(--photo-text);
margin: 0;
line-height: 1.2;
}
.pc-featured-desc {
font-size: 0.85rem;
color: var(--rz-text-secondary-color);
margin: 0;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pc-featured-own-stats {
display: flex;
gap: 1.5rem;
margin-top: 0.15rem;
}
.pc-own-stat {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.pc-own-stat-val {
font-size: 1.5rem;
font-weight: 600;
color: var(--rz-text-color);
line-height: 1;
}
.pc-own-stat-lbl {
font-size: 0.68rem;
color: var(--rz-text-secondary-color);
font-weight: 500;
}
.pc-own-stat-lbl i {
margin-right: 0.2rem;
opacity: 0.7;
}
/* ── Stat-blokken in de collectie detail header ──────────── */
.cmd-stats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.25rem;
}
.cmd-stat-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
padding: 0.55rem 1rem;
background: var(--photo-color, #075082);
border-radius: 10px;
min-width: 72px;
text-align: center;
}
.cmd-stat-val {
font-size: 1.4rem;
font-weight: 600;
line-height: 1;
color: white;
letter-spacing: -0.02em;
}
.cmd-stat-lbl {
font-size: 0.65rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.72);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.pc-featured-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 0.5rem;
}
.pc-featured-tags {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.pc-tag {
font-size: 0.65rem;
font-weight: 600;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: color-mix(in oklab, var(--rz-base-300), transparent 40%);
color: var(--rz-text-secondary-color);
letter-spacing: 0.02em;
}
.pc-tag-mine {
background: var(--rz-success);
color: #fff;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.pc-featured-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: color-mix(in oklab, var(--pc-color, #075082), var(--rz-text-color) 20%);
margin-top: 0.15rem;
transition: gap 0.2s ease;
align-self: flex-start;
padding: 0.5rem 1rem;
border-radius: 8px;
background: color-mix(in oklab, var(--pc-color, #075082), transparent 90%);
border: 1px solid color-mix(in oklab, var(--pc-color, #075082), transparent 75%);
}
.pc-featured:hover .pc-featured-cta {
gap: 0.8rem;
background: color-mix(in oklab, var(--pc-color, #075082), transparent 82%);
}
/* Dark mode */
.rz-material-dark .pc-featured-right {
background: var(--rz-body-background-color);
border-left: 1px solid var(--rz-base-700);
}
/* ── Reguliere kaarten grid (photo-grid stijl) ──────────────── */
.pc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
/* Percentage-blok in het bovenste kleurvlak */
.pc-card-pct-block {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.75rem 1rem 0.85rem;
gap: 0.2rem;
}
.pc-card-big-pct {
font-size: 2.4rem;
font-weight: 900;
color: white;
line-height: 1;
letter-spacing: -0.03em;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.pc-card-big-pct span {
font-size: 1.3rem;
font-weight: 600;
opacity: 0.8;
}
.pc-card-pct-sub {
font-size: 0.68rem;
color: rgba(255,255,255,0.75);
font-weight: 500;
text-align: center;
}
/* Voortgangsbalk in het kleurvlak */
.pc-card-progress-bar {
width: 70%;
height: 4px;
background: rgba(255,255,255,0.25);
border-radius: 999px;
overflow: hidden;
margin-top: 0.35rem;
}
.pc-card-progress-fill {
height: 100%;
background: rgba(255,255,255,0.8);
border-radius: 999px;
transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
/* Responsive */
@media (max-width: 768px) {
.pc-featured {
flex-direction: column;
height: auto;
border-radius: 14px;
}
.pc-featured-left {
flex: 0 0 160px;
min-height: 160px;
}
.pc-featured-pct {
font-size: 3.5rem;
}
.pc-featured-right {
flex: 1;
padding: 1.5rem;
}
.pc-featured-title {
font-size: 1.35rem;
}
}
@media (max-width: 640px) {
.pc-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
}
}
/* ===== Fotos toolbar ===== */
.fotos-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--rz-base-100);
border: 1px solid var(--rz-base-200);
}
/* Fotos pagina toolbar-skeleton */
.fotos-toolbar-skeleton {
border-radius: 0;
margin: 0;
border: none;
background: var(--photo-bg-5);
border-bottom: 1px solid var(--photo-bg-3);
}
.fotos-sk-pill {
height: 1.85rem;
width: 8rem;
border-radius: 999px !important;
}
.fotos-sk-pill-dim {
width: 6rem;
opacity: 0.65;
}
.fotos-sk-btn {
height: 2rem;
width: 7.25rem;
border-radius: 8px !important;
}
/* PhotoGrid skeleton — exacte dimensies van echte kaart */
.photo-grid-card-skeleton {
pointer-events: none;
}
/* Afbeelding: vult de image-wrapper met aspect-ratio 4/3 */
.photo-grid-sk-image {
position: absolute;
inset: 0;
border-radius: 0 !important;
}
/* Titel: font-size 1rem × line-height 1.3 = 1.3rem */
.photo-grid-sk-title {
height: 1.3rem;
width: 78%;
border-radius: 4px !important;
flex-shrink: 0;
}
/* Meta-items: font-size 0.74rem, naast elkaar in photo-grid-meta */
.photo-grid-sk-meta-item {
height: 0.74rem;
width: 5.5rem;
border-radius: 4px !important;
flex-shrink: 0;
}
/* Footer stat-tekst: font-size 0.8rem */
.photo-grid-sk-stat {
height: 0.8rem;
width: 7rem;
border-radius: 4px !important;
}
/* Footer actie-knop: 30×30px, border-radius 8px */
.photo-grid-sk-action {
width: 30px;
height: 30px;
border-radius: 8px !important;
flex-shrink: 0;
}
/* ── PhotoCoverCard skeleton — exacte dimensies van cover-kaart ── */
.nib-cover-card-sk {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--rz-base-200, #e0e5ec);
pointer-events: none;
}
.nib-cover-card-sk-img {
position: absolute;
inset: 0;
border-radius: 0 !important;
}
.nib-cover-card-sk-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.9rem;
background: var(--rz-base-300, #c8d0da);
}
.nib-cover-card-sk-bar-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.nib-cover-card-sk-title {
height: 0.95rem;
width: 65%;
border-radius: 3px !important;
}
.nib-cover-card-sk-meta {
display: flex;
gap: 0.55rem;
}
.nib-cover-card-sk-meta-item {
height: 0.62rem;
width: 5rem;
border-radius: 3px !important;
}
.nib-cover-card-sk-btn {
width: 30px;
height: 30px;
border-radius: 50% !important;
flex-shrink: 0;
}
.rz-material-dark .nib-cover-card-sk {
background: var(--rz-base-700, #2a2d35);
}
.rz-material-dark .nib-cover-card-sk-bar {
background: var(--rz-base-800, #1e2028);
}
.fotos-toolbar-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.fotos-toolbar-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.fotos-view-toggle {
display: flex;
border: 1px solid var(--rz-border-color);
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.fotos-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--rz-text-secondary-color);
cursor: pointer;
font-size: 0.82rem;
transition: background 0.15s, color 0.15s;
}
.fotos-view-btn:hover {
background: var(--rz-base-300, rgba(0,0,0,0.06));
color: var(--rz-text-color);
}
.fotos-view-btn-active {
background: var(--rz-primary);
color: #fff;
}
.fotos-view-btn-active:hover {
background: var(--rz-primary);
color: #fff;
}
.fotos-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.fotos-filter-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1rem;
border-radius: 8px;
background: var(--photo-bg-1);
color: #fff;
border: none;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
}
.fotos-filter-btn:hover {
opacity: 0.85;
}
/* ===== Upload pagina (nib-upload-*) ===== */
.nib-upload-content {
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.nib-upload-content-skeleton {
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.nib-upload-credit-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.75rem;
border-radius: 999px;
background: var(--gc-mid);
color: var(--gc-text);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.nib-upload-credit-pill i { font-size: 0.75rem; opacity: 0.85; }
.nib-upload-credit-pill strong { font-size: 0.9rem; }
.nib-upload-requirements {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.nib-upload-requirements > div {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 0.8rem;
border-radius: 8px;
background: var(--gc-light);
font-size: 0.8rem;
color: var(--gc-text);
font-weight: 500;
}
.nib-upload-requirements i { color: var(--rz-success); }
.nib-upload-info {
padding: 0.95rem 1rem;
color: var(--rz-text-color);
}
.nib-upload-info p {
margin: 0 0 0.75rem;
font-size: 0.88rem;
line-height: 1.6;
opacity: 0.9;
}
.nib-upload-info p:last-child {
margin-bottom: 0;
}
@media (max-width: 900px) {
.nib-upload-requirements {
grid-template-columns: 1fr;
}
}
.photo-group-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--photo-text);
margin: 1.25rem 0 0.5rem;
}
.photo-group-header i {
color: var(--photo-text-accent);
}
.fotos-sort-label {
font-size: 0.9rem;
color: var(--rz-text-secondary-color, #64748b);
}
/* ─ Resultaat-teller ─ */
.fotos-result-count {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--rz-text-color);
padding: 0.3rem 0.75rem;
background: var(--rz-base-200);
border-radius: 999px;
white-space: nowrap;
}
.fotos-result-count i {
color: var(--rz-primary);
font-size: 0.8rem;
}
/* ─ Filter chips ─ */
.fotos-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.28rem 0.55rem 0.28rem 0.65rem;
background: var(--rz-primary-lighter, #d0e2f0);
color: var(--rz-primary-dark, #064273);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
border: 1px solid var(--rz-primary-light, #8fb5d9);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.fotos-chip i {
font-size: 0.7rem;
flex-shrink: 0;
}
.fotos-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: none;
background: rgba(6, 66, 115, 0.15);
border-radius: 50%;
cursor: pointer;
font-size: 0.75rem;
line-height: 1;
color: var(--rz-primary-dark, #064273);
padding: 0;
flex-shrink: 0;
transition: background 0.12s;
}
.fotos-chip-remove:hover {
background: rgba(6, 66, 115, 0.3);
}
.fotos-chip-clear {
background: transparent;
color: var(--rz-danger, #ef4444);
border-color: var(--rz-danger-light, #fca5a5);
cursor: pointer;
font-weight: 600;
}
.fotos-chip-clear:hover {
background: rgba(239, 68, 68, 0.08);
}
.fotos-chip-clear-subtle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.35rem;
background: transparent;
border: none;
color: var(--rz-text-secondary-color, #6b7280);
font-size: 0.75rem;
font-weight: 400;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
transition: color 0.12s;
}
.fotos-chip-clear-subtle:hover {
color: var(--rz-danger, #ef4444);
}
@media (max-width: 640px) {
.fotos-toolbar {
flex-direction: column;
align-items: flex-start;
padding: 0.65rem 0.75rem;
}
.fotos-toolbar-right {
width: 100%;
justify-content: flex-end;
}
}
/* ===== GroupSelector ===== */
.nib-group-selector-list {
display: flex;
padding: 1em;
flex-wrap: wrap;
gap: 0.5rem;
}
.nib-group-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
border-radius: 20px;
border: 1px solid var(--rz-border-color);
background: transparent;
color: var(--rz-text-color);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.nib-group-chip:hover:not(:disabled) {
background: color-mix(in oklab, var(--rz-primary), transparent 88%);
border-color: var(--rz-primary);
transform: translateY(-1px);
}
.nib-group-chip-active {
background: color-mix(in oklab, var(--rz-primary), transparent 82%);
border-color: var(--rz-primary);
color: var(--rz-primary);
font-weight: 600;
}
.nib-group-chip-check {
font-size: 0.7rem;
opacity: 0.85;
}
.nib-group-chip:disabled {
opacity: 0.55;
cursor: default;
}
.nib-group-chip-auto {
cursor: default;
opacity: 0.85;
border-style: dashed;
}
.nib-group-selector-empty {
font-size: 0.85rem;
color: var(--rz-text-secondary-color);
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-group-selector-loading {
padding: 0.25rem 0;
}
/* ===== PhotoOnboardingTour Bar ===== */
@keyframes photo-tour-slide-in {
from { opacity: 0; transform: translateY(-100%); }
to   { opacity: 1; transform: translateY(0); }
}
.photo-tour-bar {
position: sticky;
top: 0;
z-index: 500;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1rem;
height: 52px;
background: color-mix(in oklab, var(--rz-primary) 7%, var(--rz-base-background-color));
border-bottom: 1px solid color-mix(in oklab, var(--rz-primary) 18%, transparent);
animation: photo-tour-slide-in 0.22s ease both;
overflow: hidden;
}
.photo-tour-bar-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--rz-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
flex-shrink: 0;
}
.photo-tour-bar-text {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 0.4rem;
overflow: hidden;
}
.photo-tour-bar-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-text-color);
white-space: nowrap;
flex-shrink: 0;
}
.photo-tour-bar-sep {
color: var(--rz-text-disabled-color);
flex-shrink: 0;
font-size: 0.75rem;
}
.photo-tour-bar-body {
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-tour-bar-dots {
display: flex;
gap: 0.3rem;
align-items: center;
flex-shrink: 0;
}
.photo-tour-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--rz-border-color);
transition: background 0.2s, transform 0.2s;
}
.photo-tour-dot-active {
background: var(--rz-primary);
transform: scale(1.5);
}
.photo-tour-bar-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.photo-tour-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.65rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid var(--rz-border-color);
background: var(--rz-base-background-color);
color: var(--rz-text-secondary-color);
cursor: pointer;
transition: background 0.15s, color 0.15s;
line-height: 1;
white-space: nowrap;
}
.photo-tour-btn:hover {
background: var(--rz-base-300, rgba(0,0,0,0.05));
color: var(--rz-text-color);
}
.photo-tour-btn-primary {
background: var(--rz-primary);
color: #fff;
border-color: var(--rz-primary);
}
.photo-tour-btn-primary:hover {
opacity: 0.88;
background: var(--rz-primary);
color: #fff;
}
.photo-tour-btn-close {
padding: 0.3rem 0.5rem;
border-color: transparent;
background: transparent;
}
.photo-tour-btn-close:hover {
background: var(--rz-base-300, rgba(0,0,0,0.06));
border-color: transparent;
}
@media (max-width: 640px) {
.photo-tour-bar-body,
.photo-tour-bar-sep {
display: none;
}
}
/* ===== Data Deletion Status ===== */
.nib-deletion-status-box {
/* ===== PhotoCard — gallery-stijl ===== */
.photo-card {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 0;
cursor: pointer;
background: #111;
transition: box-shadow 0.25s ease;
}
.photo-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
/* ── Foto ── */
.photo-card-img {
position: absolute;
inset: 0;
}
.photo-card-img img {
width: 100%;
height: 100%;
display: block;
transition: transform 0.5s ease, filter 0.3s ease;
}
.photo-card:hover .photo-card-img img {
transform: scale(1.04);
filter: brightness(0.88);
}
/* ── Gradient scrim — zelfde opbouw als gallery ── */
.photo-card-scrim {
position: absolute;
inset: 0;
pointer-events: none;
/* Alleen bovenaan donker — info-balk dekt de onderkant */
background: linear-gradient(
to bottom,
rgba(0,0,0,0.28)  0%,
rgba(0,0,0,0)     30%,
rgba(0,0,0,0)    100%
);
transition: opacity 0.25s ease;
}
/* ── Bovenkant: soort + status chips ── */
.photo-card-top {
position: absolute;
top: 0.75rem;
left: 0.75rem;
right: 0.75rem;
display: flex;
align-items: flex-start;
gap: 0.4rem;
flex-wrap: wrap;
z-index: 2;
}
.photo-card-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.6rem;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #fff;
background: rgba(0,0,0,0.52);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap;
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-card-chip i {
font-size: 0.6rem;
flex-shrink: 0;
opacity: 0.85;
}
.photo-card-chip-status {
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(0,0,0,0.62);
}
.photo-card-chip-rating {
background: rgba(0,0,0,0.62);
color: #facc15;
margin-left: auto;
}
.photo-card-chip-rating i {
color: #facc15;
opacity: 1;
}
/* ── Actieknoppen rechtsboven — verschijnen op hover ── */
.photo-card-actions {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: flex;
gap: 0.4rem;
z-index: 3;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.photo-card:hover .photo-card-actions {
opacity: 1;
transform: translateY(0);
}
.photo-card-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.52);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 0.78rem;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, transform 0.15s ease;
flex-shrink: 0;
}
.photo-card-action-btn:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.1);
}
/* ── Info-balk onderin — gekleurde frosted-glass balk, gallery-stijl ── */
.photo-card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.6rem 0.75rem 0.7rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
z-index: 2;
background: color-mix(in srgb,
color-mix(in oklab, var(--pc-color, #075082), black 30%) 72%,
transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Titel-rij: titel links, hartje rechts */
.photo-card-info-row {
display: flex;
align-items: flex-start;
gap: 0.4rem;
}
.photo-card-title {
flex: 1;
min-width: 0;
margin: 0;
font-size: 0.92rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* Favoriet-knop */
.photo-card-fav {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.7);
font-size: 0.72rem;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
margin-top: 0.05rem;
}
.photo-card-fav:hover {
background: rgba(255,255,255,0.22);
color: #f87171;
transform: scale(1.15);
}
.photo-card-fav--active {
background: rgba(248, 113, 113, 0.25);
color: #f87171;
}
.photo-card-fav--active:hover {
background: rgba(248, 113, 113, 0.35);
}
/* ── Meta-items ── */
.photo-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.55rem;
align-items: center;
}
.photo-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.7rem;
color: rgba(255,255,255,0.78);
white-space: nowrap;
}
.photo-card-meta-item i {
font-size: 0.6rem;
opacity: 0.65;
}
.photo-card-meta-loc {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
max-width: 10rem;
}
/* Landcode badge */
.photo-card-meta-cc {
display: inline-block;
padding: 0.05rem 0.35rem;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.85);
line-height: 1.4;
}
/* Sterrenbalk */
.photo-card-meta-score {
margin-left: auto;
gap: 0.3rem;
}
.photo-card-stars {
display: inline-flex;
gap: 0.08rem;
align-items: center;
color: #facc15;
font-size: 0.6rem;
}
.photo-card-score-val {
font-size: 0.68rem;
font-weight: 600;
color: #facc15;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.photo-card-title    { font-size: 0.85rem; }
.photo-card-meta-item { font-size: 0.65rem; }
.photo-card-actions  { opacity: 1; transform: none; }
}
/* ══════════════════════════════════════════════════════════
PhotoCoverCard  –  herbruikbare foto-cover kaart
Foto bedekt de volledige kaart, compacte info-balk onderin
in de foto-kleur. Werkt voor licht én donker thema.
══════════════════════════════════════════════════════════ */
.nib-cover-card {
--cc-bar:      color-mix(in oklab, var(--pc-color, #075082), white 50%);
--cc-bar-text: color-mix(in oklab, var(--pc-color, #075082), black 48%);
--cc-bar-sub:  color-mix(in oklab, var(--pc-color, #075082), black 22%);
--cc-bar-icon: color-mix(in oklab, var(--pc-color, #075082), black 12%);
--cc-detail:   color-mix(in oklab, var(--pc-color, #075082), black 8%);
--cc-detail-h: color-mix(in oklab, var(--pc-color, #075082), black 18%);
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 0;
cursor: pointer;
background: #111;
}
.rz-material-dark .nib-cover-card {
--cc-bar:      color-mix(in oklab, var(--pc-color, #075082), black 42%);
--cc-bar-text: #fff;
--cc-bar-sub:  rgba(255,255,255,0.78);
--cc-bar-icon: rgba(255,255,255,0.6);
--cc-detail:   rgba(255,255,255,0.18);
--cc-detail-h: rgba(255,255,255,0.32);
}
.nib-cover-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease, filter 0.3s ease;
}
.nib-cover-card:hover .nib-cover-card-img {
transform: scale(1.04);
filter: brightness(0.92);
}
/* ── Actieknoppen rechtsboven — verschijnen op hover ── */
.nib-cover-card-actions {
position: absolute;
top: 0.6rem;
right: 0.6rem;
display: flex;
gap: 0.35rem;
z-index: 3;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.nib-cover-card:hover .nib-cover-card-actions {
opacity: 1;
transform: translateY(0);
}
.nib-cover-card-action {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 0.72rem;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, transform 0.15s ease;
}
.nib-cover-card-action:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.1);
color: #fff;
text-decoration: none;
}
/* ── Score badge linksboven ── */
.nib-cover-card-score {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.55rem;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
color: #facc15;
background: rgba(0,0,0,0.58);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nib-cover-card-score i {
font-size: 0.6rem;
}
/* ── Info-balk onderin — foto-kleur, solide ── */
.nib-cover-card-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.9rem;
background: var(--cc-bar);
}
.nib-cover-card-bar-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.nib-cover-card-title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--cc-bar-text);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-cover-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.55rem;
}
.nib-cover-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.22rem;
font-size: 0.68rem;
color: var(--cc-bar-sub);
white-space: nowrap;
}
.nib-cover-card-meta-item i {
font-size: 0.56rem;
color: var(--cc-bar-icon);
}
.nib-cover-card-meta-loc {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
a.nib-cover-card-meta-link {
text-decoration: none;
color: var(--cc-bar-sub);
cursor: pointer;
}
a.nib-cover-card-meta-link:hover {
text-decoration: underline;
color: var(--cc-bar-text);
}
/* ── Details-knop rechts in de balk ── */
.nib-cover-card-detail {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--cc-detail);
color: white;
font-size: 0.72rem;
text-decoration: none;
flex-shrink: 0;
transition: background 0.15s ease, transform 0.15s ease;
}
.nib-cover-card-detail:hover {
background: var(--cc-detail-h);
transform: scale(1.1);
color: #fff;
text-decoration: none;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.nib-cover-card-title     { font-size: 0.88rem; }
.nib-cover-card-meta-item { font-size: 0.64rem; }
.nib-cover-card-actions   { opacity: 1; transform: none; }
}
/* ── Card-view grid-variant ── */
.photo-grid-card-view {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.photo-grid-cover-view {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 640px) {
.photo-grid-card-view {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.photo-grid-cover-view {
grid-template-columns: 1fr 1fr;
}
}
/* ===== PhotoGrid ===== */
.photo-grid-container {
width: 100%;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0px;
}
.photo-grid-item {
cursor: pointer;
}
/* ── Kaart basis ────────────────────────────────────────── */
.photo-grid-card {
--card-color: var(--photo-bg-5, #e8f0f8);
--card-dark:  color-mix(in oklab, var(--photo-color, #075082), black 20%);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
height: 100%;
display: flex;
flex-direction: column;
background: var(--rz-base-background-color);
}
/* ── Foto ───────────────────────────────────────────────── */
.photo-grid-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--card-color);
flex-shrink: 0;
}
.photo-grid-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.32s ease;
}
.photo-grid-card:hover .photo-grid-image {
transform: scale(1.04);
}
/* ── Status badge (linksboven) ──────────────────────────── */
.photo-grid-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
padding: 0.18rem 0.55rem;
border-radius: 6px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.05em;
color: white;
backdrop-filter: blur(6px);
z-index: 1;
}
.photo-grid-badge-warning {
background: rgba(245, 158, 11, 0.88);
}
.photo-grid-badge-info {
background: rgba(59, 130, 246, 0.88);
}
.photo-grid-badge-danger {
background: rgba(239, 68, 68, 0.88);
}
.photo-grid-badge-secondary {
background: rgba(100, 116, 139, 0.88);
}
/* ── Soort badge (rechtsonder foto, optioneel te activeren) ── */
.photo-grid-species {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem 0.75rem 0.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.62), transparent);
color: white;
font-size: 0.8rem;
font-weight: 600;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-grid-species i {
opacity: 0.8;
font-size: 0.72rem;
flex-shrink: 0;
}
/* ── Tekst body ─────────────────────────────────────────── */
.photo-grid-body {
padding: 0.85rem 1rem 0;
background: var(--card-color);
color: white;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.photo-grid-title {
font-size: 1rem;
font-weight: 600;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.photo-grid-meta {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.photo-grid-meta-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.74rem;
opacity: 0.72;
white-space: nowrap;
}
.photo-grid-meta-item i {
font-size: 0.68rem;
}
/* ── Stats footer ───────────────────────────────────────── */
.photo-grid-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: var(--card-dark);
/* Automatisch zwart op lichte achtergrond, wit op donkere achtergrond:
oklch leest de lightness (l) van --card-dark.
(0.5 - l) * 10000% → positief (wit) als donker, negatief → geclipped naar 0 (zwart) als licht */
color: oklch(from var(--card-dark) calc((0.5 - l) * 10000%) 0 0);
gap: 0.5rem;
flex-shrink: 0;
}
.photo-grid-stats {
display: flex;
align-items: center;
gap: 0.85rem;
}
.photo-grid-stat {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.photo-grid-stat i {
font-size: 0.78rem;
}
.photo-grid-stat i.fa-star {
color: #fcd34d;
}
.photo-grid-stat-dim {
font-weight: 400;
opacity: 0.65;
}
/* ── Actie-knop ─────────────────────────────────────────── */
.photo-grid-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.18);
color: white;
cursor: pointer;
transition: background 0.15s;
font-size: 0.85rem;
flex-shrink: 0;
}
.photo-grid-action-btn:hover {
background: rgba(255, 255, 255, 0.32);
}
/* ── "Alle foto's" kaart ────────────────────────────────── */
.photo-grid-all-card {
background: linear-gradient(145deg, var(--card-color), var(--card-dark));
color: white;
cursor: pointer;
min-height: 280px;
border: none;
}
.photo-grid-all-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 2rem;
text-align: center;
width: 100%;
}
.photo-grid-all-icon {
font-size: 2.8rem;
opacity: 0.85;
}
.photo-grid-all-title {
font-size: 1.3rem;
font-weight: 600;
margin: 0;
}
.photo-grid-all-stats {
display: flex;
gap: 1.5rem;
}
.photo-grid-all-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.photo-grid-all-stat-number {
font-size: 1.5rem;
font-weight: 600;
}
.photo-grid-all-stat-label {
font-size: 0.78rem;
opacity: 0.7;
}
.photo-grid-all-link {
font-size: 0.85rem;
font-weight: 500;
opacity: 0.75;
margin-top: 0.25rem;
}
/* ── Loading / end / empty ──────────────────────────────── */
.photo-grid-loader,
.photo-grid-end,
.photo-grid-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 2rem;
color: var(--rz-text-secondary-color, #64748b);
}
.photo-grid-spinner {
font-size: 1.5rem;
}
.photo-grid-end i {
font-size: 1.25rem;
color: var(--rz-success, #22c55e);
}
.photo-grid-empty {
padding: 3rem 2rem;
}
.photo-grid-empty i,
.photo-grid-empty .rzi {
font-size: 3rem;
opacity: 0.25;
}
.photo-grid-empty h3 {
margin: 0;
font-size: 1.1rem;
}
.photo-grid-empty p {
margin: 0;
opacity: 0.6;
font-size: 0.9rem;
}
.photo-grid-observer {
height: 1px;
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
.photo-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0px;
}
.photo-grid-body {
padding: 0.6rem 0.75rem 0.5rem;
}
.photo-grid-footer {
padding: 0.4rem 0.75rem;
}
.photo-grid-title {
font-size: 0.9rem;
}
}
/* ── WaarnemingPreviewDialog ───────────────────────────── */
.nib-wnd-wrap {
font-size: 0.88rem;
}
.nib-wnd-state {
padding: 2rem 1rem;
text-align: center;
color: var(--rz-text-secondary-color);
font-size: 0.9rem;
}
.nib-wnd-state--error {
color: var(--rz-danger);
}
.nib-wnd-summary {
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
margin: 0 0 0.75rem 0;
}
.nib-wnd-table-wrap {
overflow-x: auto;
}
.nib-wnd-table {
width: 100%;
border-collapse: collapse;
font-size: 0.84rem;
}
.nib-wnd-table thead th {
text-align: left;
padding: 0.4rem 0.6rem;
border-bottom: 2px solid var(--rz-border-color);
font-weight: 600;
white-space: nowrap;
color: var(--rz-text-secondary-color);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.nib-wnd-table tbody tr {
border-bottom: 1px solid var(--rz-border-color);
transition: background 0.12s;
}
.nib-wnd-table tbody tr:hover {
background: var(--rz-base-200);
}
.nib-wnd-table td {
padding: 0.45rem 0.6rem;
vertical-align: middle;
}
.nib-wnd-date {
white-space: nowrap;
color: var(--rz-text-secondary-color);
}
.nib-wnd-vernacular {
display: block;
font-weight: 500;
}
.nib-wnd-scientific {
display: block;
font-size: 0.76rem;
color: var(--rz-text-secondary-color);
font-style: italic;
}
.nib-wnd-locality {
color: var(--rz-text-secondary-color);
font-size: 0.8rem;
}
.nib-wnd-thumb {
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 4px;
display: block;
margin: 0 auto;
}
.nib-wnd-no-photo {
color: var(--rz-border-color);
font-size: 1.1rem;
}
/* ═══════════════════════════════════════════════════════════
Over NatuurInBeeld pagina
═══════════════════════════════════════════════════════════ */
.nib-over-content {
padding: 1.5rem 1.75rem 1.75rem;
background: var(--rz-base-background-color);
}
.nib-over-lead {
font-size: 1.1rem;
line-height: 1.75;
color: var(--rz-text-color);
margin: 0 0 1rem;
max-width: 760px;
}
.nib-over-text {
font-size: 0.95rem;
line-height: 1.75;
color: var(--rz-text-secondary-color);
margin: 0 0 1rem;
max-width: 760px;
}
.nib-over-text:last-child { margin-bottom: 0; }
/* ── Persona blokken ── */
.nib-over-personas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.nib-over-persona {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1rem 1.1rem;
border-radius: 10px;
background: var(--rz-base-100);
border: 1px solid var(--rz-base-200);
}
.nib-over-persona-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: color-mix(in oklab, var(--rz-primary, #075082), white 75%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1rem;
color: var(--rz-primary, #075082);
}
.nib-over-persona-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.nib-over-persona-body strong {
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-over-persona-body span {
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
line-height: 1.5;
}
/* ── Feature blokken ── */
.nib-over-features {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.nib-over-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.1rem 1.25rem;
border-radius: 10px;
background: var(--rz-base-100);
border: 1px solid var(--rz-base-200);
}
.nib-over-feature-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: color-mix(in oklab, var(--fi-color, #075082), white 80%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
color: color-mix(in oklab, var(--fi-color, #075082), black 10%);
}
.nib-over-feature-body {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.nib-over-feature-body strong {
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-over-feature-body span {
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
line-height: 1.55;
}
/* ── CTA sectie ── */
.nib-over-cta {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.nib-over-cta-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.nib-over-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.4rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s ease;
}
.nib-over-btn:hover { opacity: 0.88; text-decoration: none; }
.nib-over-btn-primary {
background: #1a6b3c;
color: #fff;
}
.nib-over-btn-secondary {
background: var(--rz-base-200);
color: var(--rz-text-color);
}
/* ── Dark mode ── */
.rz-material-dark .nib-over-persona,
.rz-material-dark .nib-over-feature {
background: var(--rz-base-800);
border-color: var(--rz-base-700);
}
.rz-material-dark .nib-over-persona-icon {
background: color-mix(in oklab, var(--rz-primary, #075082), black 40%);
color: color-mix(in oklab, var(--rz-primary, #075082), white 60%);
}
.rz-material-dark .nib-over-feature-icon {
background: color-mix(in oklab, var(--fi-color, #075082), black 50%);
color: color-mix(in oklab, var(--fi-color, #075082), white 70%);
}
/* ── Responsive ── */
@media (max-width: 640px) {
.nib-over-content { padding: 1rem 1rem 1.25rem; }
.nib-over-lead    { font-size: 1rem; }
.nib-over-personas,
.nib-over-features { grid-template-columns: 1fr; }
.nib-over-cta-buttons { flex-direction: column; }
.nib-over-btn { justify-content: center; }
}
/* ===== Foto's overzicht pagina ===== */
/* Hoofdblok — editorial stijl (NibHomeHeader + sticky toolbar + flush grid),
identiek aan de homepage-blokken. Header/toolbar erven primary via
--group-color. De sticky filterbalk zelf (incl. de overflow-fix die
`position: sticky` mogelijk maakt) is generiek: zie `.nib-ff-toolbar`
in profiel.css. */
/* PhotoGrid edge-to-edge in het blok (zoals het homepage-foto's-blok) */
.nib-fotos-content > .photo-grid-container,
.nib-fotos-content .photo-grid-container {
margin: 0;
}
/* Filterknop in de header */
.nib-fotos-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: 0;
}
.nib-fotos-filter-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-radius: 8px;
border: 1px solid color-mix(in oklab, var(--group-color, #075082), white 55%);
background: color-mix(in oklab, var(--group-color, #075082), white 60%);
color: color-mix(in oklab, var(--group-color, #075082), black 22%);
font-size: 0.83rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.nib-fotos-filter-btn:hover {
background: color-mix(in oklab, var(--group-color, #075082), white 50%);
}
.rz-material-dark .nib-fotos-filter-btn {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.25);
color: #fff;
}
.rz-material-dark .nib-fotos-filter-btn:hover {
background: rgba(255,255,255,0.28);
}
.nib-fotos-filter-badge {
font-size: 0.55rem;
color: #fff;
margin-left: 0.15rem;
}
/* Content-gebied binnen het nib-gd-block (toolbar + grid) */
.nib-fotos-content {
background: var(--rz-base-background-color);
}
/* Toolbar */
.nib-fotos-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.65rem;
padding: 0.65rem 1rem;
background: var(--rz-base-100);
border-bottom: 1px solid var(--rz-base-200);
}
.nib-fotos-toolbar-sk {
background: var(--rz-base-background-color);
}
.nib-fotos-toolbar-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem;
flex: 1;
min-width: 0;
}
.nib-fotos-toolbar-right {
display: flex;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
}
.nib-fotos-toolbar-label {
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
}
.nib-fotos-result-count {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-fotos-result-count i {
opacity: 0.55;
}
/* Filterpaneel */
.nib-fotos-filter-panel {
border-bottom: 1px solid var(--rz-base-200);
background: var(--rz-base-background-color);
}
/* ===== NEW: Modern PhotoGrid - Matching News Card Design ===== */
.photo-grid-container {
width: 100%;
margin: 0 auto;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
gap: 1px;
}
.photo-grid.photo-grid-sm {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.photo-grid-item {
height: 100%;
cursor: pointer;
}
.photo-grid-card {
height: 100%;
overflow: hidden;
border-radius: 0;
display: flex;
flex-direction: column;
}
/* ===== All Photos Card ===== */
.photo-grid-all-card {
background: var(--photo-bg-4, var(--rz-panel-background-color));
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.photo-grid-item:hover .photo-grid-all-card {
transform: none;
box-shadow: none;
}
.photo-grid-all-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
width: 100%;
}
.photo-grid-all-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--photo-bg-3, var(--rz-base-200));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: all 0.3s ease;
}
.photo-grid-all-icon i {
font-size: 36px;
color: var(--photo-text, var(--rz-primary));
}
.photo-grid-all:hover .photo-grid-all-icon,
.photo-grid-item:hover .photo-grid-all-icon {
transform: scale(1.1);
background: var(--photo-bg-2, var(--rz-primary));
}
.photo-grid-all:hover .photo-grid-all-icon i,
.photo-grid-item:hover .photo-grid-all-icon i {
color: var(--photo-color, #fff);
}
.photo-grid-all-title {
font-size: 24px;
font-weight: 600;
color: var(--photo-text, var(--rz-text-color));
margin: 0 0 24px 0;
line-height: 1.3;
}
.photo-grid-all-stats {
display: flex;
gap: 32px;
margin-bottom: 24px;
}
.photo-grid-all-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.photo-grid-all-stat-number {
font-size: 48px;
font-weight: 600;
color: var(--photo-text, var(--rz-primary));
line-height: 1;
}
.photo-grid-all-stat-label {
font-size: 14px;
font-weight: 600;
color: var(--photo-text-accent, var(--rz-text-secondary-color));
text-transform: uppercase;
letter-spacing: 0.5px;
}
.photo-grid-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rz-primary);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
margin-top: 8px;
}
.photo-grid-item:hover .photo-grid-all-link {
gap: 12px;
}
.photo-grid-all-link i {
font-size: 12px;
transition: transform 0.3s ease;
}
.photo-grid-item:hover .photo-grid-all-link i {
transform: translateX(4px);
}
/* Image wrapper with 16:9 aspect ratio */
.photo-grid-image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
background: var(--rz-base-200);
}
.photo-grid-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease;
}
.photo-grid-item:hover .photo-grid-image {
filter: brightness(0.95);
transform: none;
}
/* Status badge */
.photo-grid-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 6px 12px;
border-radius: 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 2;
}
.photo-grid-badge-warning {
background: rgba(255, 193, 7, 0.9);
color: #000;
}
.photo-grid-badge-info {
background: rgba(33, 150, 243, 0.9);
color: #fff;
}
.photo-grid-badge-danger {
background: rgba(244, 67, 54, 0.9);
color: #fff;
}
.photo-grid-badge-secondary {
background: rgba(158, 158, 158, 0.9);
color: #fff;
}
/* Info bar - Matching news-card design */
.photo-grid-info {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--photo-bg-4, var(--rz-panel-background-color));
}
.photo-grid-info-main {
flex: 1;
min-width: 0;
}
/* Meta info (photographer, animal, date) */
.photo-grid-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 14px;
margin-bottom: 12px;
color: var(--photo-text);
}
.photo-grid-meta-item {
display: flex;
align-items: center;
gap: 6px;
}
.photo-grid-meta-item i {
font-size: 13px;
opacity: 0.8;
}
/* Title */
.photo-grid-title {
font-size: 20px;
font-weight: 600;
color: var(--photo-text);
margin: 0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Action button (3 dots) */
.photo-grid-info-actions {
flex-shrink: 0;
}
.photo-grid-action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--photo-bg-5);
color: var(--photo-text, var(--rz-text-color));
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-size: 16px;
}
.photo-grid-action-btn:hover {
background: var(--photo-bg-3);
color: var(--photo-color);
transform: scale(1.1);
}
.photo-grid-action-btn i {
font-size: 16px;
}
/* Loading state */
.photo-grid-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
color: var(--rz-text-secondary-color);
}
.photo-grid-spinner {
font-size: 48px;
margin-bottom: 20px;
color: var(--rz-primary);
}
.photo-grid-loader p {
margin: 0;
font-size: 16px;
font-weight: 500;
}
/* End state */
.photo-grid-end {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
color: var(--rz-text.secondary-color);
border-radius: 12px;
background: var(--rz-base-100);
}
.photo-grid-end i {
font-size: 48px;
margin-bottom: 16px;
color: var(--rz-success);
}
.photo-grid-end p {
margin: 0;
font-size: 16px;
font-weight: 500;
}
/* Empty state */
.photo-grid-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 40px;
text-align: center;
border-radius: 12px;
background: var(--rz-base-100);
}
.photo-grid-empty i {
font-size: 64px;
margin-bottom: 24px;
color: var(--rz-text-secondary-color);
opacity: 0.5;
}
.photo-grid-empty h3 {
font-size: 24px;
font-weight: 600;
margin: 0 0 12px 0;
color: var(--photo-text);
}
.photo-grid-empty p {
margin: 0;
font-size: 16px;
color: var(--rz-text-secondary-color);
}
/* ===== Dark Mode Support ===== */
.rz-material-dark .photo-grid-card {
background: var(--rz-base-800);
border-color: var(--rz-base-700);
}
.rz-material-dark .photo-grid-item:hover .photo-grid-card {
border-color: var(--rz-primary);
border-bottom-color: var(--photo-accent-color, #075082);
}
.rz-material-dark .photo-grid-info {
background: var(--rz-base-800);
}
.rz-material-dark .photo-grid-action-btn {
background: var(--rz-base-900);
}
.rz-material-dark .photo-grid-action-btn:hover {
background: var(--rz-primary);
}
.rz-material-dark .photo-grid-empty,
.rz-material-dark .photo-grid-end {
background: var(--rz-base-900);
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
.photo-grid {
grid-template-columns: 1fr;
gap: 0px;
}
.photo-grid.photo-grid-sm {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.photo-grid-info {
padding: 16px;
}
.photo-grid-title {
font-size: 18px;
}
.photo-grid-body,
.photo-grid-footer {
display: none;
}
}
@media (max-width: 480px) {
.photo-grid-loader,
.photo-grid-end,
.photo-grid-empty {
padding: 40px 20px;
}
.photo-grid-spinner,
.photo-grid-end i {
font-size: 36px;
}
.photo-grid-empty i {
font-size: 48px;
}
}
/* ===== PhotoGallery ===== */
.photo-viewer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
touch-action: none;
}
.photo-viewer-img {
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.photo-gallery-modal {
position: fixed;
inset: 0;
z-index: 999;
outline: none;
}
.photo-gallery-backdrop {
position: absolute;
inset: 0;
background: var(--rz-base);
}
.photo-gallery-shell {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: stretch;
background: var(--rz-base);
}
.photo-gallery-content {
width: 100%;
max-width: 2048px;
height: 100%;
display: flex;
background: var(--rz-base);
}
.photo-gallery-stage {
position: relative;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.photo-gallery-frame {
position: absolute;
inset: 0;
}
.photo-gallery-btn {
border: none;
background: rgba(0, 0, 0, 0.6);
color: white;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.photo-gallery-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.05);
}
.photo-gallery-btn:active:not(:disabled) {
transform: scale(0.95);
}
.photo-gallery-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.photo-gallery-btn-round {
width: 48px;
height: 48px;
border-radius: 50%;
padding: 0;
}
.photo-gallery-btn-round.active {
background: rgba(255, 255, 255, 0.3);
}
.photo-gallery-btn-icon {
width: 40px;
height: 40px;
border-radius: 50%;
padding: 0;
background: transparent;
}
.photo-gallery-btn-icon:hover {
background: rgba(0, 0, 0, 0.06);
}
.photo-gallery-comment-close {
color: var(--rz-text-color);
}
.photo-gallery-counter {
position: absolute;
top: 16px;
left: 16px;
z-index: 10;
color: #fff;
background: rgba(0, 0, 0, 0.6);
padding: 10px 16px;
border-radius: 24px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
}
.photo-gallery-counter i {
font-size: 16px;
}
/* Score + likes: overlay linksboven, onder de teller */
.photo-gallery-stats {
position: absolute;
top: 60px;
left: 16px;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
}
.photo-gallery-stat-badge {
color: #fff;
background: rgba(0, 0, 0, 0.6);
padding: 8px 16px;
border-radius: 24px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 700;
}
.photo-gallery-stat-badge i {
font-size: 16px;
}
.photo-gallery-stat-badge[title="Totaalscore"] i {
color: #f6b500;
}
.photo-gallery-stat-badge[title="Aantal likes"] i {
color: #ef5777;
}
.photo-gallery-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
padding: 40px 20px 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.photo-gallery-info-content {
max-width: 1200px;
margin: 0 auto;
}
.photo-gallery-info-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.photo-gallery-title {
color: #fff;
font-size: 24px;
font-weight: 600;
margin: 0;
line-height: 1.3;
flex: 1;
}
.photo-gallery-detail-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
text-decoration: none;
border-radius: 24px;
font-size: 14px;
font-weight: 600;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.2s ease;
white-space: nowrap;
}
.photo-gallery-detail-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.photo-gallery-detail-btn i {
font-size: 14px;
}
.photo-gallery-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
}
.photo-gallery-meta-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
}
.photo-gallery-meta-item i {
font-size: 14px;
opacity: 0.8;
}
a.photo-gallery-meta-link {
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
}
a.photo-gallery-meta-link:hover {
text-decoration: underline;
color: #fff;
}
.photo-gallery-description {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
line-height: 1.6;
margin: 0;
max-width: 800px;
}
.photo-gallery-actions {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
display: flex;
gap: 12px;
}
.photo-gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.photo-gallery-prev {
left: 16px;
transform-origin: left center;
}
.photo-gallery-next {
right: 16px;
transform-origin: right center;
}
.photo-gallery-nav:hover:not(:disabled) {
transform: translateY(-50%) scale(1.05);
}
.photo-gallery-comments {
flex-shrink: 0;
width: 0;
overflow: hidden;
background: var(--rz-panel-background-color);
border-left: 1px solid var(--rz-panel-border-color);
transition: width 0.25s ease;
display: flex;
flex-direction: column;
min-height: 0;
}
.photo-gallery-comments.open {
width: 380px;
}
@media (min-width: 768px) {
.photo-gallery-comments {
width: 380px;
}
.photo-gallery-comment-toggle,
.photo-gallery-comment-close {
display: none;
}
}
@media (max-width: 767px) {
.photo-gallery-comments.open {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
z-index: 20;
}
.photo-gallery-description {
display: none;
}
}
.photo-gallery-comments-header {
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--rz-panel-border-color);
flex-shrink: 0;
}
.photo-gallery-comments-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
}
.photo-gallery-comments-title i {
font-size: 15px;
color: var(--rz-primary);
}
.photo-gallery-comments-body {
padding: 16px;
flex: 1 1 auto;
overflow: auto;
}
.photo-gallery-comments-footer {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid var(--rz-panel-border-color);
}
.photo-gallery-stars {
display: flex;
gap: 8px;
}
.photo-gallery-rating-bar {
padding: 10px 16px;
border-bottom: 1px solid var(--rz-panel-border-color);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.photo-gallery-rating-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #6b7280);
}
.photo-gallery-rating {
display: flex;
align-items: center;
gap: 2px;
}
.photo-gallery-star {
background: none;
border: none;
cursor: pointer;
padding: 2px;
font-size: 1.15rem;
color: var(--rz-text-disabled-color, #d1d5db);
transition: color 0.12s, transform 0.12s;
line-height: 1;
}
.photo-gallery-star:hover {
color: #facc15;
transform: scale(1.2);
}
.photo-gallery-star.filled {
color: #facc15;
}
.photo-gallery-rating-avg {
margin-left: 8px;
font-size: 0.8rem;
color: var(--rz-text-secondary-color, #6b7280);
font-weight: 500;
}
.photo-gallery-score {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.78rem;
font-weight: 700;
color: #d97706;
}
.photo-gallery-score .rzi {
font-size: 0.8rem;
color: #d97706;
}
.photo-gallery-comment-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.photo-gallery-comment {
background: var(--rz-base-100);
padding: 12px;
border-radius: 8px;
margin-bottom: 12px;
}
/* ===== Photo Item Tone System with Smart Light Color Detection ===== */
.photo-item {
/* Base photo color (set via inline style: --photo-color) */
--photo-color-raw: var(--photo-color, #075082);
/* Use original color as base (no automatic darkening) */
--photo-color-base: var(--photo-color-raw);
/* Tone levels - progressively lighter from base */
--tone-1: color-mix(in oklch, var(--photo-color-base) 95%, white 5%);
--tone-2: color-mix(in oklch, var(--photo-color-base) 85%, white 15%);
--tone-3: color-mix(in oklch, var(--photo-color-base) 75%, white 25%);
--tone-4: color-mix(in oklch, var(--photo-color-base) 65%, white 35%);
--tone-5: color-mix(in oklch, var(--photo-color-base) 55%, white 45%);
/* Contrast colors for text - always readable */
--contrast-1: color-mix(in oklch, var(--photo-color-base) 10%, black 90%);
--contrast-2: color-mix(in oklch, var(--photo-color-base) 20%, black 80%);
--contrast-3: color-mix(in oklch, var(--photo-color-base) 40%, black 60%);
--contrast-4: color-mix(in oklch, var(--photo-color-base) 60%, black 40%);
--contrast-5: color-mix(in oklch, var(--photo-color-base) 80%, black 20%);
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.photo-item {
/* In dark mode: use original color, create darker tones */
--photo-color-base: var(--photo-color-raw);
/* Darker tones for dark mode */
--tone-1: color-mix(in oklch, var(--photo-color-base) 90%, black 10%);
--tone-2: color-mix(in oklch, var(--photo-color-base) 80%, black 20%);
--tone-3: color-mix(in oklch, var(--photo-color-base) 70%, black 30%);
--tone-1: color-mix(in oklch, var(--photo-color-base) 95%, white 5%);
--tone-2: color-mix(in oklch, var(--photo-color-base) 85%, white 15%);
--tone-3: color-mix(in oklch, var(--photo-color-base) 75%, white 25%);
--tone-4: color-mix(in oklch, var(--photo-color-base) 65%, white 35%);
--tone-4: color-mix(in oklch, var(--photo-color-base) 60%, black 40%);
--tone-5: color-mix(in oklch, var(--photo-color-base) 50%, black 50%);
/* Lighter contrast for dark mode */
--contrast-1: color-mix(in oklch, var(--photo-color-base) 90%, white 10%);
--contrast-2: color-mix(in oklch, var(--photo-color-base) 80%, white 20%);
--contrast-3: color-mix(in oklch, var(--photo-color-base) 60%, white 40%);
--contrast-4: color-mix(in oklch, var(--photo-color-base) 40%, white 60%);
--contrast-5: color-mix(in oklch, var(--photo-color-base) 20%, white 80%);
}
}
/* Radzen theme specific overrides */
.rz-material-dark .photo-item {
--photo-color-base: var(--photo-color-raw);
--tone-1: color-mix(in oklch, var(--photo-color-base) 90%, black 10%);
--tone-2: color-mix(in oklch, var(--photo-color-base) 80%, black 20%);
--tone-3: color-mix(in oklch, var(--photo-color-base) 70%, black 30%);
--tone-4: color-mix(in oklch, var(--photo-color-base) 60%, black 40%);
--tone-5: color-mix(in oklch, var(--photo-color-base) 50%, black 50%);
--contrast-1: color-mix(in oklch, var(--photo-color-base) 90%, white 10%);
--contrast-2: color-mix(in oklch, var(--photo-color-base) 80%, white 20%);
--contrast-3: color-mix(in oklch, var(--photo-color-base) 60%, white 40%);
--contrast-4: color-mix(in oklch, var(--photo-color-base) 40%, white 60%);
--contrast-5: color-mix(in oklch, var(--photo-color-base) 20%, white 80%);
}
/* Tone block utility classes */
.tone-block {
/* Apply tone background colors */
}
.bg-tone-1 {
background-color: var(--tone-1);
}
.bg-tone-2 {
background-color: var(--tone-2);
}
.bg-tone-3 {
background-color: var(--tone-3);
}
.bg-tone-4 {
background-color: var(--tone-4);
}
.bg-tone-5 {
background-color: var(--tone-5);
}
/* Contrast utility classes */
.text-contrast-1 {
color: var(--contrast-1);
}
.text-contrast-2 {
color: var(--contrast-2);
}
.text-contrast-3 {
color: var(--contrast-3);
}
.text-contrast-4 {
color: var(--contrast-4);
}
.text-contrast-5 {
color: var(--contrast-5);
}
/* ===== Photo Detail (New - Redesigned) ===== */
.photo-detail {
display: flex;
flex-direction: column;
gap: 0;
}
.photo-detail-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 16px;
}
.photo-detail-loader i {
font-size: 48px;
color: var(--rz-primary);
}
/* Hero Section met profiel foto anchor */
.photo-detail-hero-wrapper {
position: relative;
}
.photo-detail-hero {
position: relative;
width: 100%;
height: 70vh;
min-height: 420px;
overflow: hidden;
background: var(--rz-base-200);
}
.photo-detail-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Profiel foto: half op foto, half op metadata blok */
.photo-detail-profile-anchor {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
z-index: 10;
}
/* Content sectie: Metadata + Beschrijving in één blok (tone-4) */
.photo-detail-content {
padding: 0;
margin-top: 0;
background-color: var(--photo-bg-5);
}
.photo-detail-content-inner {
max-width: 1200px;
margin: 0 auto;
padding: 32px;
}
/* OPTIE A: Avatar links van titel */
.photo-detail-title-area-option-a {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.photo-detail-avatar-left {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--contrast-3);
transition: all 0.2s ease;
}
.photo-detail-avatar-left:hover {
border-color: var(--contrast-4);
transform: scale(1.05);
}
.photo-detail-avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-detail-avatar-placeholder {
width: 100%;
height: 100%;
background: var(--tone-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--contrast-4);
font-size: 20px;
}
/* OPTIE B: Author badge rechtsboven */
.photo-detail-title-area-option-b {
position: relative;
text-align: center;
margin-bottom: 32px;
}
.photo-detail-author-badge {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 8px;
border-radius: 24px;
background: var(--tone-3);
transition: all 0.2s ease;
border: 2px solid var(--tone-2);
}
.photo-detail-author-badge:hover {
background: var(--tone-2);
border-color: var(--contrast-3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.photo-detail-author-badge-image {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.photo-detail-author-badge-placeholder {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--tone-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--contrast-4);
font-size: 18px;
}
.photo-detail-author-badge-info {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.photo-detail-author-badge-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--contrast-3);
}
.photo-detail-author-badge-name {
font-size: 13px;
font-weight: 600;
color: var(--contrast-5);
}
/* Titel */
.photo-detail-title-area {
text-align: center;
margin-bottom: 32px;
}
.photo-detail-title {
font-size: clamp(28px, 5vw, 42px);
font-weight: 600;
color: var(--photo-text);
margin: 0;
line-height: 1.2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.photo-detail-edit-btn-inline {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
border: 2px solid var(--photo-text);
background: transparent;
color: var(--contrast-4);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.photo-detail-edit-btn-inline:hover {
background: var(--contrast-2);
border-color: var(--contrast-4);
color: var(--contrast-5);
transform: scale(1.1);
}
/* Compacte metadata cards - card-stijl */
.photo-detail-meta-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 32px;
}
.photo-detail-meta-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
background: var(--photo-bg-3);
transition: all 0.2s ease;
}
.photo-detail-meta-card:hover {
background: var(--photo-bg-2);
transform: translateY(-1px);
}
.photo-detail-meta-card > i {
font-size: 18px;
color: var(--contrast-4);
flex-shrink: 0;
}
.photo-detail-meta-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.photo-detail-meta-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--contrast-3);
opacity: 0.8;
}
.photo-detail-meta-value {
font-size: 14px;
font-weight: 500;
color: var(--contrast-5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-detail-date-picker-compact {
margin-left: auto;
flex-shrink: 0;
}
/* Beschrijving inline (zelfde blok) */
.photo-detail-description-inline {
border-top: 1px solid var(--tone-3);
padding-top: 24px;
margin-top: 8px;
}
.photo-detail-description-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
}
.photo-detail-description-header h6 {
margin: 0;
}
.photo-detail-description-text {
color: var(--contrast-4);
font-size: 1.2rem;
line-height: 1.8;
}
.photo-detail-description-text p {
margin: 0 0 1em;
}
.photo-detail-description-text p:last-child {
margin-bottom: 0;
}
.photo-detail-description-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 32px 20px;
text-align: center;
opacity: 0.6;
}
.photo-detail-description-empty i {
font-size: 36px;
color: var(--contrast-3);
}
.photo-detail-description-empty p {
margin: 0;
font-size: 14px;
color: var(--contrast-4);
}
/* Comments Card */
.photo-detail-comments-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.photo-detail-comments-header {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 32px;
background: var(--photo-bg-2);
color: var(--photo-text);
}
.photo-detail-comments-header i {
font-size: 28px;
color: var(--photo-text);
}
/* Action Buttons */
.photo-detail-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 0 0 24px;
flex-wrap: wrap;
}
/* Filter-titel wissen (fotos pagina) */
.nib-photos-clear-filter {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--rz-danger, #c62828);
text-decoration: none;
opacity: 0.8;
transition: opacity 0.15s;
}
.nib-photos-clear-filter:hover { opacity: 1; text-decoration: none; }
/* ===== Photo EXIF Card ===== */
.photo-exif-card {
overflow: hidden;
display: flex;
flex-direction: column;
background-color: var(--photo-bg-5)
/* Background via .photo-exif-card selector in news-section.css */
}
/* Header - identiek aan location header */
.photo-exif-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid var(--photo-bg-1);
background-color: var(--photo-bg-2)
}
.photo-exif-header i {
font-size: 24px;
color: var(--photo-text);
}
.photo-exif-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--photo-text);
}
/* Content */
.photo-exif-content {
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
background-color: var(--photo-bg-5);
height: 100%;
}
/* Section */
.photo-exif-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.photo-exif-section-title {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--photo-text-accent);
padding-bottom: 8px;
border-bottom: 1px solid var(--photo-bg-3);
}
/* Grid voor apparatuur */
.photo-exif-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.photo-exif-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: .45rem .55rem;
border-radius: 8px;
background: var(--photo-bg-3);
}
.photo-exif-item-full {
grid-column: 1 / -1;
}
.photo-exif-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--photo-text-accent);
opacity: 0.8;
}
.photo-exif-value {
font-size: 0.9375rem;
font-weight: 500;
color: var(--photo-text);
word-break: break-word;
}
/* Specs met iconen (voor instellingen) - Grid layout */
.photo-exif-specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.photo-exif-specs {
display: flex;
flex-direction: column;
gap: 8px;
}
.photo-exif-spec {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 8px;
background: var(--photo-bg-3);
transition: all 0.2s ease;
}
.photo-exif-spec:hover {
background: var(--photo-bg-2);
transform: translateX(2px);
}
.photo-exif-spec-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--photo-bg-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--photo-text);
flex-shrink: 0;
}
.photo-exif-spec-content {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.photo-exif-spec-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--photo-text-accent);
opacity: 0.8;
}
.photo-exif-spec-value {
font-size: 1rem;
font-weight: 600;
color: var(--photo-text);
}
/* Empty state */
.photo-exif-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
text-align: center;
}
.photo-exif-empty i {
font-size: 48px;
color: var(--photo-text-accent);
opacity: 0.5;
}
.photo-exif-empty p {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--photo-text);
}
.photo-exif-empty span {
font-size: 0.875rem;
color: var(--photo-text-accent);
}
/* Footer */
.photo-exif-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-top: 1px solid var(--photo-bg-2);
font-size: 0.8125rem;
color: var(--photo-text-accent);
}
.photo-exif-footer i {
font-size: 14px;
flex-shrink: 0;
}
/* Responsive */
@media (max-width: 768px) {
.photo-exif-header {
padding: 16px 20px;
}
.photo-exif-header h3 {
font-size: 1.125rem;
}
.photo-exif-content {
padding: 20px;
gap: 20px;
}
.photo-exif-grid {
grid-template-columns: 1fr;
}
.photo-exif-spec {
padding: 10px;
}
.photo-exif-footer {
padding: 10px 20px;
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.photo-exif-header {
padding: 14px 16px;
}
.photo-exif-header i {
font-size: 20px;
}
.photo-exif-header h3 {
font-size: 1rem;
}
.photo-exif-content {
padding: 16px;
}
.photo-exif-spec-icon {
width: 28px;
height: 28px;
}
.photo-exif-empty {
padding: 32px 16px;
}
.photo-exif-empty i {
font-size: 40px;
}
}
/* ===== Photo Detail - Uses news-section.css color system ===== */
/* Photo item wrapper for camera/location cards - no background on wrapper itself */
.photo-item:not(.photo-detail):not(.news-card):not(.photo-grid-card):not(.news-featured) {
background: transparent !important;
color: inherit;
}
/* Camera & Location cards - inherit --photo-color from parent and generate bg variables */
.photo-exif-card,
.photo-location-card {
overflow: hidden;
/* Licht thema: mix met wit voor tinten */
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 65%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 75%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 80%);
/* Tekstkleur: mix met foto kleur voor contrast */
--photo-text: color-mix(in oklab, var(--photo-color, #075082), black 35%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), black 15%);
background: var(--photo-bg-5);
color: var(--photo-text);
height: 100%;
}
/* Dark mode voor camera & location cards */
.rz-material-dark .photo-exif-card,
.rz-material-dark .photo-location-card {
/* Donker thema: mix met zwart voor shades */
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 10%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 20%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 80%);
/* Tekstkleur: mix met foto kleur voor contrast */
--photo-text: color-mix(in oklab, var(--photo-color, #075082), white 80%);
background: var(--photo-bg-1);
color: var(--photo-text);
}
/* Photo detail inherits colors from parent .photo-detail selector */
.photo-detail-content {
padding: 0;
margin-top: 0;
/* background wordt automatisch ingesteld via .photo-detail selector */
}
.photo-detail-meta-card {
background: var(--photo-bg-3);
}
.photo-detail-meta-card:hover {
background: var(--photo-bg-2);
}
.photo-detail-meta-card > i {
color: var(--photo-text);
}
.photo-detail-meta-label {
color: var(--photo-text-accent);
}
.photo-detail-meta-value {
color: var(--photo-text);
}
.photo-detail-title {
color: var(--photo-text);
}
.photo-detail-edit-btn-inline {
border-color: var(--photo-text-accent);
color: var(--photo-text);
}
.photo-detail-edit-btn-inline:hover {
background: var(--photo-bg-2);
border-color: var(--photo-text);
}
.photo-detail-avatar-left {
border-color: var(--photo-text-accent);
}
.photo-detail-avatar-placeholder {
background: var(--photo-bg-3);
color: var(--photo-text);
}
.photo-detail-description-inline {
border-top-color: var(--photo-bg-3);
}
.photo-detail-description-text {
color: var(--photo-text);
}
.photo-detail-description-empty i {
color: var(--photo-text-accent);
}
.photo-detail-description-empty p {
color: var(--photo-text);
}
/* Camera Settings & Location Cards - Match detail content styling */
.photo-exif-card,
.photo-location-card {
/* Background wordt automatisch ingesteld via selector in news-section.css */
}
.photo-exif-header,
.photo-location-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid var(--photo-bg-1);
background-color: var(--photo-bg-2)
}
.photo-exif-header i,
.photo-exif-header h3,
.photo-location-header i,
.photo-location-header h3 {
color: var(--photo-text);
}
.photo-exif-header h3,
.photo-location-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
}
.photo-exif-content,
.photo-location-content {
padding: 24px;
}
.photo-exif-section-title,
.photo-location-section-title {
color: var(--photo-text-accent);
border-bottom-color: var(--photo-bg-3);
}
.photo-exif-item,
.photo-exif-spec,
.photo-location-spec,
.photo-location-coord-item {
background: var(--photo-bg-3);
}
.photo-exif-spec:hover,
.photo-location-spec:hover {
background: var(--photo-bg-2);
}
.photo-exif-spec-icon,
.photo-location-spec-icon {
background: var(--photo-bg-2);
color: var(--photo-text);
}
.photo-exif-label,
.photo-exif-spec-label,
.photo-location-spec-label,
.photo-location-coord-label {
color: var(--photo-text-accent);
}
.photo-exif-value,
.photo-exif-spec-value,
.photo-location-spec-value,
.photo-location-coord-value {
color: var(--photo-text);
}
.photo-exif-footer,
.photo-location-footer {
border-top-color: var(--photo-bg-2);
color: var(--photo-text-accent);
}
.photo-exif-empty i,
.photo-location-empty i {
color: var(--photo-text-accent);
}
.photo-exif-empty p,
.photo-location-empty p {
color: var(--photo-text);
}
.photo-exif-empty span,
.photo-location-empty span {
color: var(--photo-text-accent);
}
/* ── Like-knop in de kaart info-balk ─────────────────────────────────── */
/* ── Login-prompt banner (PhotoGrid) ─────────────────────────────────── */
.nib-grid-login-prompt {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.65rem;
background: var(--rz-base-background-color, #fff);
border: 1px solid var(--rz-border-color);
border-radius: 10px;
padding: 0.65rem 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
font-size: 0.85rem;
z-index: 9000;
white-space: nowrap;
animation: nib-prompt-in 0.2s ease;
}
@keyframes nib-prompt-in {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nib-grid-login-prompt-icon {
color: #e84646;
font-size: 1.1rem;
flex-shrink: 0;
}
.nib-grid-login-prompt-btn {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
background: var(--rz-primary);
color: #fff;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s;
}
.nib-grid-login-prompt-btn:hover {
background: var(--rz-primary-dark, #0d5fa0);
color: #fff;
}
.nib-grid-login-prompt-close {
background: none;
border: none;
cursor: pointer;
color: var(--rz-text-secondary-color);
display: flex;
align-items: center;
padding: 0.1rem;
border-radius: 4px;
transition: color 0.12s;
}
.nib-grid-login-prompt-close:hover {
color: var(--rz-text-color);
}
.nib-card-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.nib-card-like-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.55rem;
border-radius: 6px;
border: 1px solid var(--_action-bg);
background: transparent;
color: var(--_action-color);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
line-height: 1;
}
.nib-card-like-btn:hover {
background: var(--_action-bg);
border-color: var(--_action-bg);
transform: scale(1.05);
}
.nib-card-like-btn .rzi {
font-size: 0.9rem;
line-height: 1;
}
.nib-card-like-btn--active {
color: #fff;
background: #e84646;
border-color: #e84646;
}
.nib-card-like-btn--active:hover {
background: #d03a3a;
border-color: #d03a3a;
color: #fff;
transform: scale(1.05);
}
/* ── Like-knop gallerij (actie-balk) ──────────────────────────────────── */
.nib-like-btn {
display: flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
color: #fff;
padding: 0.2rem;
font-size: 1.1rem;
cursor: pointer;
transition: color 0.18s, transform 0.12s;
line-height: 1;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.nib-like-btn:hover {
transform: scale(1.15);
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.85));
}
.nib-like-btn--active,
.nib-like-btn--active:hover {
color: #e84646;
}
.nib-like-btn .rzi {
font-size: 1.25rem;
line-height: 1;
}
.nib-like-count {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Gallery like count badge naast de like-knop */
.nib-gallery-like-count {
font-size: 0.78rem;
font-weight: 600;
}
/* Rode kleur voor de gallery like-knop (zit in .photo-gallery-btn-round) */
.photo-gallery-btn-round.nib-like-btn--active {
color: #e84646;
}
/* Variant voor de detail-pagina: iets groter, altijd zichtbaar */
.nib-like-btn--detail {
font-size: 1rem;
padding: 0.4rem 0.75rem;
color: var(--rz-text-color);
background: var(--rz-base-200, rgba(0,0,0,0.06));
color: var(--rz-text-color);
border: 1.5px solid rgba(0,0,0,0.15);
}
.nib-like-btn--detail:hover {
background: var(--rz-base-300, rgba(0,0,0,0.12));
transform: scale(1.05);
}
.nib-like-btn--detail.nib-like-btn--active {
color: #fff;
background: #e84646;
border-color: #e84646;
}
/* Dark-mode aanpassing */
.rz-material-dark .nib-like-btn--detail {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.15);
}
.rz-material-dark .nib-like-btn--detail:hover {
background: rgba(255,255,255,0.14);
}
/* Double-tap hint animatie (hart vliegt uit het midden) */
@keyframes nib-heart-pop {
0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
.photo-location-input {
background:white;
border-color: var(--photo-bg-1);
color: var(--photo-text);
}
.photo-location-map-wrapper {
background: var(--photo-bg-3);
}
.photo-location-empty-btn {
background: white;
color: var(--photo-text);
}
.photo-location-empty-btn:hover {
background: whiete;
}
/* Header - identiek aan EXIF header */
.photo-location-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid var(--photo-bg-3);
}
.photo-location-header i {
font-size: 24px;
color: var(--photo-text);
}
.photo-location-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--photo-text);
}
/* Content */
.photo-location-content {
padding: 0 24px 24px;
display: flex;
flex-direction: column;
gap: 24px;
flex: 1;
}
/* Section */
.photo-location-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.photo-location-section-title {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--photo-text-accent);
padding-bottom: 8px;
border-bottom: 1px solid var(--photo-bg-3);
}
/* Specs grid voor locatie info */
.photo-location-specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.photo-location-spec {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
border-radius: 8px;
background: var(--photo-bg-3);
transition: all 0.2s ease;
}
.photo-location-spec:hover {
background: var(--photo-bg-2);
}
.photo-location-spec-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--photo-bg-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--photo-text);
flex-shrink: 0;
}
.photo-location-spec-content {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.photo-location-spec-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--photo-text-accent);
opacity: 0.8;
}
.photo-location-spec-value {
font-size: 0.9375rem;
font-weight: 500;
color: var(--photo-text);
word-break: break-word;
}
.photo-location-input {
width: 100%;
background: white;
border: 1px solid var(--photo-bg-1);
border-radius: 6px;
/*  padding: 6px 10px;*/
color: var(--photo-text);
font-size: 0.9375rem;
}
/* Coördinaten */
.photo-location-coords {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.photo-location-coord-item {
display: flex;
align-items: center;
gap: 12px;
padding: .45rem .55rem;
border-radius: 8px;
background: var(--photo-bg-3);
}
.photo-location-coord-item i {
font-size: 20px;
color: var(--photo-text);
}
.photo-location-coord-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.photo-location-coord-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--photo-text-accent);
opacity: 0.8;
}
.photo-location-coord-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--photo-text);
font-family: 'Courier New', monospace;
}
/* Kaart wrapper */
.photo-location-map-wrapper {
border-radius: 12px;
overflow: hidden;
background: var(--photo-bg-3);
}
.photo-location-map {
width: 100%;
min-height: 400px;
}
/* Empty state */
.photo-location-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 20px;
text-align: center;
}
.photo-location-empty i {
font-size: 48px;
color: var(--photo-text-accent);
opacity: 0.5;
}
.photo-location-empty p {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--photo-text);
}
.photo-location-empty span {
font-size: 0.875rem;
color: var(--photo-text-accent);
}
.photo-location-empty-btn {
margin-top: 8px;
padding: 10px 20px;
border: none;
border-radius: 8px;
background: var(--photo-bg-2);
color: var(--photo-text);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.photo-location-empty-btn:hover {
background: var(--photo-bg-1);
transform: translateY(-2px);
}
/* Footer */
.photo-location-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-top: 1px solid var(--photo-bg-2);
font-size: 0.8125rem;
color: var(--photo-text-accent);
}
.photo-location-footer i {
font-size: 14px;
flex-shrink: 0;
}
/* Responsive */
@media (max-width: 768px) {
.photo-location-header {
padding: 16px 20px;
}
.photo-location-header h3 {
font-size: 1.125rem;
}
.photo-location-content {
padding: 20px;
gap: 20px;
}
.photo-location-specs-grid {
grid-template-columns: 1fr;
}
.photo-location-coords {
grid-template-columns: 1fr;
}
.photo-location-map {
min-height: 300px;
}
.photo-location-footer {
padding: 10px 20px;
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.photo-location-header {
padding: 14px 16px;
}
.photo-location-header i {
font-size: 20px;
}
.photo-location-header h3 {
font-size: 1rem;
}
.photo-location-content {
padding: 16px;
}
.photo-location-spec {
padding: 10px;
}
.photo-location-spec-icon {
width: 28px;
height: 28px;
}
.photo-location-empty {
padding: 40px 16px;
}
.photo-location-empty i {
font-size: 40px;
}
}
/* ===== Comment Avatar (Static Position) ===== */
.comment-avatar .rz-avatar-pin {
position: relative !important;
display: block;
width: var(--size);
height: var(--size);
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
/* =============================================
COMMENTS SECTION — Chat-style layout
Top: scrollable list | Bottom: sticky form
============================================= */
.comments-section {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
flex: 1 1 0;
min-height: 0;
background: var(--rz-panel-background-color);
}
/* ===== Scrollable List Area ===== */
.comments-list-area {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
.comments-count-label {
display: block;
padding: 12px 16px 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rz-text-secondary-color);
border-bottom: 1px solid var(--rz-base-200);
}
/* ===== Comments List ===== */
.comments-list {
display: flex;
flex-direction: column;
}
/* ===== Comment Item — Thread row ===== */
.comment-item {
display: flex;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--rz-base-200);
transition: background 0.15s ease;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-item:hover {
background: var(--rz-base-50, rgba(0,0,0,0.02));
}
.comment-item .comment-avatar {
flex-shrink: 0;
padding-top: 2px;
text-decoration: none;
cursor: pointer;
}
.comment-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.comment-meta {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.comment-author {
font-size: 13px;
font-weight: 600;
color: var(--rz-text-color);
text-decoration: none;
cursor: pointer;
}
.comment-author:hover {
text-decoration: underline;
}
.comment-date {
font-size: 11px;
color: var(--rz-text-secondary-color);
}
.comment-text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--rz-text-color);
white-space: pre-wrap;
word-break: break-word;
}
/* ===== Reply button ===== */
.comment-reply-btn {
align-self: flex-start;
background: none;
border: none;
padding: 3px 0;
font-size: 12px;
font-weight: 600;
color: var(--rz-text-secondary-color);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.15s ease;
margin-top: 2px;
}
.comment-reply-btn:hover {
color: var(--rz-primary);
}
.comment-reply-btn i {
font-size: 11px;
}
/* ===== Replies (nested thread) ===== */
.comment-replies {
display: flex;
flex-direction: column;
margin-top: 8px;
padding-left: 12px;
border-left: 2px solid var(--rz-base-300);
gap: 8px;
}
.comment-reply-item {
display: flex;
gap: 8px;
}
.comment-reply-item .comment-avatar {
flex-shrink: 0;
padding-top: 2px;
text-decoration: none;
cursor: pointer;
}
/* ===== Inline Reply Form ===== */
.reply-form {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
background: var(--rz-base-100);
border-radius: 8px;
border: 1px solid var(--rz-base-300);
}
.reply-form-body {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ===== Empty state ===== */
.comments-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 20px;
gap: 10px;
color: var(--rz-text-secondary-color);
}
.comments-empty i {
font-size: 28px;
opacity: 0.35;
}
.comments-empty span {
font-size: 13px;
}
/* =============================================
STICKY FORM AREA — bottom of panel
============================================= */
.comments-form-area {
flex-shrink: 0;
padding: 12px 16px 14px;
border-top: 1px solid var(--rz-panel-border-color);
background: var(--rz-base-50, var(--rz-panel-background-color));
}
/* ===== Compose Form ===== */
.comment-form {
display: flex;
gap: 10px;
align-items: flex-start;
}
.comment-form .comment-avatar {
flex-shrink: 0;
padding-top: 6px;
}
.comment-form-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.comment-textarea {
width: 100%;
resize: none;
min-height: 60px;
font-size: 14px;
line-height: 1.5;
border: 1px solid var(--rz-input-border-color);
border-radius: 8px;
padding: 8px 12px;
background: var(--rz-input-background-color);
color: var(--rz-text-color);
transition: border-color 0.2s ease;
font-family: inherit;
}
.comment-textarea:focus {
outline: none;
border-color: var(--rz-primary);
box-shadow: 0 0 0 2px rgba(7, 80, 130, 0.1);
}
.comment-textarea::placeholder {
color: var(--rz-text-secondary-color);
opacity: 0.6;
}
.comment-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.comment-char-count {
font-size: 11px;
color: var(--rz-text-secondary-color);
}
.comment-char-count.over-limit {
color: var(--rz-danger);
font-weight: 600;
}
.comment-form-actions {
display: flex;
gap: 8px;
}
/* ===== Status notices (logged-in but already posted / not logged in) ===== */
.comment-posted-notice,
.comment-login-notice {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--rz-text-secondary-color);
padding: 4px 0;
}
.comment-posted-notice i {
font-size: 15px;
color: #10b981;
}
.comment-login-notice {
justify-content: space-between;
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 480px) {
.comments-form-area {
padding: 10px 12px 12px;
}
.comment-item {
padding: 10px 12px;
}
.comment-form-footer {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.comment-form-actions {
width: 100%;
justify-content: flex-end;
}
}
/* =============================================
DARK THEME
============================================= */
.rz-material-dark .comments-form-area {
background: var(--rz-base-800);
border-top-color: var(--rz-base-700);
}
.rz-material-dark .comments-count-label {
border-bottom-color: var(--rz-base-700);
}
.rz-material-dark .comment-item {
border-bottom-color: var(--rz-base-700);
}
.rz-material-dark .comment-item:hover {
background: rgba(255,255,255,0.03);
}
.rz-material-dark .comment-replies {
border-left-color: var(--rz-base-600);
}
.rz-material-dark .reply-form {
background: var(--rz-base-900);
border-color: var(--rz-base-700);
}
/* ===== News Section - Professional Homepage Design ===== */
.news-section {
display: flex;
flex-direction: column;
gap: 0.1em;
}
/* ── Nieuws skeleton ──────────────────────────────────── */
.nib-news-skeleton {
background: var(--rz-base-200, #e8edf2);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-news-skeleton-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: var(--rz-base-300, #d4dce6);
border-bottom: 1px solid var(--rz-base-300, #d4dce6);
}
.nib-news-skeleton-featured {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.nib-news-skeleton-image {
min-height: 420px;
}
.nib-news-skeleton-content {
display: flex;
flex-direction: column;
gap: 0.85rem;
justify-content: center;
padding: 2rem 2.5rem;
background: var(--rz-base-200, #e8edf2);
}
.nib-news-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1px;
background: var(--rz-base-300, #d4dce6);
}
.nib-news-skeleton-card {
display: flex;
flex-direction: column;
background: var(--rz-base-200, #e8edf2);
}
.nib-news-skeleton-card-image {
height: 160px;
width: 100%;
}
.nib-news-skeleton-card-body {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1rem 1.25rem;
}
@media (max-width: 768px) {
.nib-news-skeleton-featured { grid-template-columns: 1fr; }
.nib-news-skeleton-image    { min-height: 200px; }
}
/* ═══════════════════════════════════════════════════════
NIB NIEUWS BLOK  (Index pagina)
Zelfde structuur als nib-photos-block:
blok = visuele container, header = aangehechte balk.
═══════════════════════════════════════════════════════ */
/* Toon-variabelen: blok-niveau (header) én per item (featured, card) */
.nib-news-block,
.nib-news-featured,
.nib-news-card {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 48%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 62%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 80%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), black 20%);
}
/* ── Blok-container (identiek aan nib-photos-block) ── */
.nib-news-block {
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* ── Header balk (identiek aan nib-photos-header) ── */
.nib-news-header {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.25rem 1.5rem;
background: var(--photo-bg-4);
border-bottom: 1px solid var(--photo-bg-3);
}
/* ── Content-wrapper met padding ── */
.nib-news-content {
display: flex;
flex-direction: column;
gap: 1px;
}
.nib-news-header-left { flex: 1; min-width: 0; }
.nib-news-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--photo-text);
margin: 0 0 0.15rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-news-title i { font-size: 0.95rem; color: var(--photo-text-accent); }
.nib-news-sub {
font-size: 0.8rem;
color: var(--photo-text-accent);
margin: 0;
opacity: 0.8;
}
.nib-news-all-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.15rem;
background: var(--photo-bg-1);
color: #fff;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
white-space: nowrap;
}
.nib-news-all-btn:hover { opacity: 0.85; color: #fff; text-decoration: none; }
.nib-news-all-btn:hover i { transform: translateX(3px); }
.nib-news-all-btn i { font-size: 0.72rem; transition: transform 0.15s; }
/* ── Featured kaart ── */
.nib-news-featured {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
border-radius: 0;
overflow: hidden;
cursor: pointer;
transition: none;
}
.nib-news-featured:hover {
box-shadow: none;
transform: none;
}
/* Afbeelding: rechterhelft */
.nib-news-featured-image {
position: relative;
overflow: hidden;
background: var(--photo-bg-3);
}
.nib-news-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.3s ease;
}
.nib-news-featured:hover .nib-news-featured-image img { filter: brightness(0.95); }
.nib-news-featured-placeholder {
width: 100%;
height: 100%;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
background: var(--photo-bg-3);
color: var(--photo-text-accent);
font-size: 4rem;
opacity: 0.3;
}
/* Content: linkerhelft */
.nib-news-featured-content {
background: var(--photo-bg-5);
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.75rem;
}
.nib-news-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.nib-news-meta-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem;
background: var(--photo-bg-3);
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
color: var(--photo-text);
letter-spacing: 0.02em;
}
.nib-news-meta-item i { font-size: 0.7rem; opacity: 0.8; }
.nib-news-featured-title {
font-size: clamp(1.3rem, 2.2vw, 1.8rem);
font-weight: 600;
color: var(--photo-text);
margin: 0;
line-height: 1.25;
letter-spacing: -0.01em;
}
.nib-news-featured-excerpt {
font-size: 0.9rem;
color: var(--photo-text-accent);
line-height: 1.65;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Verwijder HTML-tags visueel niet nodig — clip doet het werk */
.nib-news-featured-excerpt p,
.nib-news-featured-excerpt br { display: none; }
.nib-news-featured-excerpt * { display: inline; }
.nib-news-featured-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
background: var(--photo-bg-1);
color: #fff;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
align-self: flex-start;
transition: opacity 0.15s;
margin-top: 0.25rem;
}
.nib-news-featured:hover .nib-news-featured-link { opacity: 0.88; }
.nib-news-featured-link i { font-size: 0.72rem; }
/* ── Beschrijving in NibCard nieuwskaart (HTML-inhoud, max 4 regels) ── */
.nib-card-news-excerpt {
font-size: 0.82rem;
color: var(--_desc-color);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 0.25rem;
}
.nib-card-news-excerpt p,
.nib-card-news-excerpt br { display: none; }
.nib-card-news-excerpt * { display: inline; }
.nib-news-grid .nib-card-tags {
margin-top: 0.5rem;
}
/* ── Grid kleinere kaarten ── */
.nib-news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 0.1rem;
}
.nib-news-card {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 48%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 80%);
--photo-text: color-mix(in oklab, var(--photo-color, #075082), black 40%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), black 20%);
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
cursor: pointer;
background: #111;
border-radius: 0;
transition: box-shadow 0.25s ease;
}
.nib-news-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.nib-news-card-img {
position: absolute;
inset: 0;
}
.nib-news-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease, filter 0.3s ease;
}
.nib-news-card:hover .nib-news-card-img img {
transform: scale(1.04);
filter: brightness(0.88);
}
.nib-news-card-scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
}
.nib-news-card-top {
position: absolute;
top: 0.75rem;
left: 0.75rem;
right: 0.75rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
z-index: 2;
}
.nib-news-card-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.6rem;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 600;
color: #fff;
background: rgba(0,0,0,0.52);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap;
}
.nib-news-card-chip i { font-size: 0.6rem; opacity: 0.85; }
.nib-news-card-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--photo-color, #075082), black 20%);
color: rgba(255,255,255,0.3);
font-size: 3rem;
}
.nib-news-card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 0.9rem 0.8rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
z-index: 2;
background: color-mix(in srgb,
color-mix(in oklab, var(--photo-color, #075082), black 30%) 72%,
transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.nib-news-card-title {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.nib-news-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.7rem;
}
.nib-news-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.72rem;
color: rgba(255,255,255,0.8);
white-space: nowrap;
}
.nib-news-card-meta-item i { font-size: 0.62rem; opacity: 0.7; }
/* ── Responsive ── */
@media (max-width: 768px) {
.nib-news-featured {
grid-template-columns: 1fr;
}
.nib-news-featured-image {
aspect-ratio: 16 / 9;
min-height: auto;
}
.nib-news-featured-content {
padding: 1.5rem 1.25rem;
}
.nib-news-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.nib-news-grid {
grid-template-columns: 1fr;
}
}
/* ── Dark mode ── */
.rz-material-dark .nib-news-block,
.rz-material-dark .nib-news-featured,
.rz-material-dark .nib-news-card {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 15%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 28%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 42%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 56%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 85%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 60%);
}
.rz-material-dark .nib-news-header {
border-bottom-color: var(--photo-bg-3);
}
/* ===== Animal Featured Block - Matching News Featured Style ===== */
/* ═══════════════════════════════════════════════════════
NIB ANIMAL BLOCK  (AnimalBlockColor)
Zelfde structuur als nib-foto-block / nib-news-block
═══════════════════════════════════════════════════════ */
.nib-animal-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 72%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), black 10%);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.rz-material-dark .nib-animal-block {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 10%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 20%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 45%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 80%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 50%);
}
/* ── Header balk ──────────────────────────────────────── */
.nib-animal-header {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.25rem 1.5rem;
background: var(--photo-bg-4);
border-bottom: 1px solid var(--photo-bg-3);
}
.nib-animal-header-left { flex: 1; min-width: 0; }
.nib-animal-header-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--photo-text);
margin: 0 0 0.15rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-animal-header-title i { font-size: 0.95rem; }
.nib-animal-header-sub {
font-size: 0.8rem;
color: var(--photo-text);
margin: 0;
opacity: 0.72;
}
.nib-animal-header-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.15rem;
background: var(--photo-bg-1);
color: #fff;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
white-space: nowrap;
}
.nib-animal-header-link:hover { opacity: 0.85; color: #fff; text-decoration: none; }
.nib-animal-header-link i { font-size: 0.72rem; transition: transform 0.15s; }
.nib-animal-header-link:hover i { transform: translateX(3px); }
/* Ontkoppelen-knop in de header */
.nib-animal-unlink-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 1rem;
background: rgba(211, 47, 47, 0.12);
color: #c62828;
border: 1.5px solid rgba(211, 47, 47, 0.35);
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
white-space: nowrap;
}
.nib-animal-unlink-btn:hover {
background: rgba(211, 47, 47, 0.22);
border-color: #c62828;
transform: translateY(-1px);
}
.nib-animal-unlink-btn i { font-size: 0.78rem; }
.rz-material-dark .nib-animal-unlink-btn {
background: rgba(239, 83, 80, 0.15);
color: #ef9a9a;
border-color: rgba(239, 83, 80, 0.3);
}
.rz-material-dark .nib-animal-unlink-btn:hover {
background: rgba(239, 83, 80, 0.28);
border-color: #ef9a9a;
}
/* ── Body: afbeelding + content ───────────────────────── */
.nib-animal-body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
/* Afbeelding */
.nib-animal-image {
position: relative;
overflow: hidden;
background: var(--photo-bg-3);
}
.nib-animal-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.nib-animal-block:hover .nib-animal-image img { transform: scale(1.03); }
.nib-animal-image-placeholder {
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: var(--photo-text);
opacity: 0.4;
}
.nib-animal-image-placeholder i { font-size: 3rem; }
.nib-animal-image-placeholder span { font-size: 0.9rem; font-weight: 500; }
/* Content */
.nib-animal-content {
padding: 2rem 2rem 2rem 2.5rem;
background: var(--photo-bg-5);
display: flex;
flex-direction: column;
gap: 1.1rem;
justify-content: center;
}
/* Taxonomie pills */
.nib-animal-taxon-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.nib-animal-taxon-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.7rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
background: var(--photo-bg-2);
color: var(--photo-text);
white-space: nowrap;
}
.nib-animal-taxon-pill i { font-size: 0.68rem; }
.nib-animal-taxon-dim { opacity: 0.75; }
/* Stats rij */
.nib-animal-stats {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.nib-animal-stat {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.nib-animal-stat > i {
font-size: 0.85rem;
color: var(--photo-text);
opacity: 0.7;
margin-top: 0.15rem;
flex-shrink: 0;
width: 1rem;
text-align: center;
}
.nib-animal-stat-label {
display: block;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--photo-text);
opacity: 0.6;
line-height: 1.2;
}
.nib-animal-stat-value {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--photo-text);
line-height: 1.3;
}
/* Beschrijving */
.nib-animal-description {
font-size: 0.9rem;
line-height: 1.7;
color: var(--photo-text);
border-top: 1px solid var(--photo-bg-3);
padding-top: 1rem;
flex: 1;
}
.nib-animal-description p { margin: 0; }
.nib-animal-description-empty {
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0.5;
font-style: italic;
font-size: 0.85rem;
}
/* Tags */
.nib-animal-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.nib-animal-tag {
padding: 0.2rem 0.55rem;
border-radius: 12px;
font-size: 0.72rem;
font-weight: 500;
background: var(--photo-bg-3);
color: var(--photo-text);
opacity: 0.8;
}
/* ── Skeleton (exact dimensies van nib-animal-block) ──── */
.nib-animal-sk-block {
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-animal-sk-header {
padding: 1.25rem 1.5rem;
background: var(--rz-base-300, #d4dce6);
display: flex;
flex-direction: column;
gap: 0.35rem;
border-bottom: 1px solid var(--rz-base-200, #e8edf2);
}
/* Body: zelfde 2-koloms grid als .nib-animal-body */
.nib-animal-sk-body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
/* Linker kolom: volledige shimmer als image-placeholder */
.nib-animal-sk-image {
border-radius: 0 !important;
min-height: 420px;
}
/* Rechter kolom: content placeholders */
.nib-animal-sk-content {
padding: 2rem 2rem 2rem 2.5rem;
background: var(--rz-base-100, #f4f7fa);
display: flex;
flex-direction: column;
gap: 1.1rem;
justify-content: center;
}
@media (max-width: 900px) {
.nib-animal-sk-body      { grid-template-columns: 1fr; min-height: auto; }
.nib-animal-sk-image     { min-height: 260px; }
.nib-animal-sk-content   { padding: 1.5rem; }
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
.nib-animal-body {
grid-template-columns: 1fr;
min-height: auto;
}
.nib-animal-image { min-height: 260px; }
.nib-animal-content { padding: 1.5rem; }
}
/* ── Legacy animal-featured (behoud voor eventueel andere plekken) ── */
.animal-featured {
display: none; /* vervangen door nib-animal-block */
}
@media (max-width: 768px) {
.animal-featured-content {
padding: 24px;
}
.animal-featured-title {
font-size: 28px;
}
.animal-featured-latin {
font-size: 16px;
margin-bottom: 16px;
}
.animal-taxonomy {
gap: 8px;
}
.animal-taxonomy-btn {
padding: 8px 14px;
font-size: 13px;
}
.animal-featured-excerpt {
font-size: 15px;
}
.animal-featured-image {
height: 300px;
}
}
/* ===== VARIANT 1: 50/50 Split (Current - Light Background) ===== */
.news-featured {
display: flex;
height: 500px;
/*    ;
*/ overflow: hidden;
cursor: pointer;
/*    transition: all 0.3s ease;
*/ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: var(--photo-bg-4, var(--rz-panel-background-color));
/*    border: 1px solid var(--rz-panel-border-color);
*/
}
.news-featured:hover {
/*        transform: translateY(-4px);
*/ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
}
.news-featured-image {
flex: 0 0 50%;
position: relative;
overflow: hidden;
background: var(--rz-base-200);
}
.news-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-featured:hover .news-featured-image img {
transform: scale(1.05);
}
.news-featured-content {
flex: 0 0 50%;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--photo-bg-4, var(--rz-panel-background-color));
}
.news-featured-title {
font-size: 32px;
font-weight: 600;
color: var(--rz-text-color);
margin: 0 0 16px;
line-height: 1.3;
}
.news-featured-excerpt {
font-size: 16px;
color: var(--rz-text-secondary-color);
line-height: 1.7;
margin: 0 0 24px;
}
.news-featured-link {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
padding: 12px 24px;
background: var(--photo-bg-5);
color: var(--photo-text);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.news-featured:hover .news-featured-link {
background: var(--photo-bg-3);
}
.news-featured-link i {
font-size: 14px;
transition: transform 0.3s ease;
}
.news-featured:hover .news-featured-link i {
transform: translateX(4px);
}
/* ===== VARIANT 2: Full Width with Dark Overlay (Magazine Style) ===== */
.news-featured-v2 {
position: relative;
height: 600px;
/*    ;
*/ overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-featured-v2:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.news-featured-v2 .news-featured-image {
position: absolute;
inset: 0;
flex: none;
}
.news-featured-v2 .news-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-featured-v2:hover .news-featured-image img {
transform: scale(1.05);
}
.news-featured-v2 .news-featured-overlay {
position: absolute;
inset: 0;
background: linear-gradient( to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 70%, transparent 100% );
}
.news-featured-v2 .news-featured-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 48px;
z-index: 2;
flex: none;
background: none;
}
.news-featured-v2 .news-featured-title {
font-size: 42px;
font-weight: 600;
color: white;
margin: 0 0 16px;
line-height: 1.2;
}
.news-featured-v2 .news-featured-excerpt {
font-size: 18px;
color: rgba(255, 255, 255, 0.95);
line-height: 1.7;
margin: 0 0 24px;
max-width: 800px;
}
.news-featured-v2 .news-meta {
color: rgba(255, 255, 255, 0.9);
}
.news-featured-v2 .news-featured-link {
background: white;
color: var(--rz-primary);
}
.news-featured-v2:hover .news-featured-link {
background: var(--rz-primary);
color: white;
}
/* ===== VARIANT 3: Card Style with Image on Top ===== */
.news-featured-v3 {
display: flex;
flex-direction: column;
height: auto;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: var(--rz-panel-background-color);
border: 1px solid var(--rz-panel-border-color);
}
.news-featured-v3:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
}
.news-featured-v3 .news-featured-image {
flex: 0 0 400px;
width: 100%;
position: relative;
overflow: hidden;
background: var(--rz-base-200);
}
.news-featured-v3 .news-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-featured-v3:hover .news-featured-image img {
transform: scale(1.05);
}
.news-featured-v3 .news-featured-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
background: var(--rz-panel-background-color);
}
.news-featured-v3 .news-featured-title {
font-size: 36px;
font-weight: 600;
color: var(--rz-text-color);
margin: 0 0 16px;
line-height: 1.3;
}
.news-featured-v3 .news-featured-excerpt {
font-size: 17px;
color: var(--rz-text-secondary-color);
line-height: 1.7;
margin: 0 0 24px;
}
/* ===== VARIANT 4: Asymmetric Layout (60/40 Split with Accent) ===== */
.news-featured-v4 {
display: flex;
height: 550px;
;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: var(--rz-panel-background-color);
border: 1px solid var(--rz-panel-border-color);
position: relative;
}
.news-featured-v4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: var(--rz-primary);
z-index: 3;
}
.news-featured-v4:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
}
.news-featured-v4 .news-featured-image {
flex: 0 0 60%;
position: relative;
overflow: hidden;
background: var(--rz-base-200);
}
.news-featured-v4 .news-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-featured-v4:hover .news-featured-image img {
transform: scale(1.05);
}
.news-featured-v4 .news-featured-content {
flex: 0 0 40%;
padding: 48px 40px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--rz-panel-background-color);
}
.news-featured-v4 .news-featured-title {
font-size: 30px;
font-weight: 600;
color: var(--rz-text-color);
margin: 0 0 16px;
line-height: 1.3;
}
.news-featured-v4 .news-featured-excerpt {
font-size: 15px;
color: var(--rz-text-secondary-color);
line-height: 1.7;
margin: 0 0 24px;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-featured-v4 .news-meta {
padding: 12px 16px;
background: var(--rz-base-100);
border-radius: 8px;
margin-bottom: 20px;
}
/* ===== News Meta (Date/Author) ===== */
.news-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 14px;
margin-bottom: 20px;
}
.news-featured .news-meta {
color: var(--rz-text-secondary-color);
}
.news-date,
.news-author {
display: flex;
align-items: center;
gap: 6px;
}
.news-meta i {
font-size: 13px;
opacity: 0.8;
}
/* ===== News Grid (3 Smaller Articles) ===== */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 0.1em;
}
/* ===== CARD VARIANT 1: Classic Card (Image Top - Current) ===== */
.news-card {
background: var(--rz-panel-background-color);
;
overflow: hidden;
cursor: pointer;
/*    transition: all 0.3s ease;
*/ /*    border: 1px solid var(--rz-panel-border-color);
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: var(--news-card-accent-color, #075082);
*/
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-card:hover {
/*        transform: translateY(-4px);
*/ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
border-bottom-color: var(--news-card-accent-color, #075082);
}
.news-card-image {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
background: var(--rz-base-200);
}
.news-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card:hover .news-card-image img {
transform: scale(1.08);
}
.news-card-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.news-card .news-meta {
color: var(--rz-text-secondary-color);
margin-bottom: 12px;
}
.news-card-title {
font-size: 20px;
font-weight: 600;
margin: 0 0 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-excerpt {
font-size: 15px;
color: var(--rz-text-secondary-color);
line-height: 1.6;
margin: 0 0 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rz-primary);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
margin-top: auto;
}
.news-card:hover .news-card-link {
gap: 10px;
}
.news-card-link i {
font-size: 12px;
transition: transform 0.3s ease;
}
.news-card:hover .news-card-link i {
transform: translateX(4px);
}
/* ===== CARD VARIANT 2: Horizontal Layout (Image Left) ===== */
.news-card-v2 {
background: var(--rz-panel-background-color);
;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid var(--rz-panel-border-color);
border-bottom-width: 4px;
border-bottom-color: var(--news-card-accent-color, #075082);
display: flex;
flex-direction: row;
height: 200px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-card-v2:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
border-bottom-color: var(--news-card-accent-color, #075082);
}
.news-card-v2 .news-card-image {
flex: 0 0 40%;
position: relative;
padding-top: 0;
height: 100%;
overflow: hidden;
background: var(--rz-base-200);
}
.news-card-v2 .news-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card-v2:hover .news-card-image img {
transform: scale(1.08);
}
.news-card-v2 .news-card-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
}
.news-card-v2 .news-meta {
color: var(--rz-text-secondary-color);
margin-bottom: 8px;
font-size: 13px;
gap: 12px;
}
.news-card-v2 .news-card-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-v2 .news-card-excerpt {
font-size: 14px;
line-height: 1.5;
margin: 0 0 12px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-v2 .news-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: all 0.3s ease;
margin-top: auto;
}
/* ===== CARD VARIANT 3: Compact Card (Small Image, More Text) ===== */
.news-card-v3 {
background: var(--rz-panel-background-color);
;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid var(--rz-panel-border-color);
border-bottom-width: 4px;
border-bottom-color: var(--news-card-accent-color, #075082);
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-card-v3:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
border-bottom-color: var(--news-card-accent-color, #075082);
}
.news-card-v3 .news-card-image {
position: relative;
width: 100%;
padding-top: 40%; /* Smaller 5:2 aspect ratio */
overflow: hidden;
background: var(--rz-base-200);
}
.news-card-v3 .news-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.news-card-v3:hover .news-card-image img {
transform: scale(1.08);
}
.news-card-v3 .news-card-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.news-card-v3 .news-meta {
color: var(--rz-text-secondary-color);
margin-bottom: 10px;
font-size: 13px;
padding: 8px 12px;
background: var(--rz-base-100);
border-radius: 6px;
display: inline-flex;
align-self: flex-start;
}
.news-card-v3 .news-card-title {
font-size: 19px;
font-weight: 600;
margin: 0 0 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-v3 .news-card-excerpt {
font-size: 15px;
color: var(--rz-text-secondary-color);
line-height: 1.6;
margin: 0 0 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-v3 .news-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--rz-base-100);
color: var(--rz-primary);
border-radius: 6px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
margin-top: auto;
align-self: flex-start;
}
.news-card-v3:hover .news-card-link {
background: var(--rz-primary);
color: white;
}
/* ===== CARD VARIANT 4: Minimal Card (Text Focused with Badge) ===== */
.news-card-v4 {
background: var(--rz-panel-background-color);
;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid var(--rz-panel-border-color);
border-bottom-width: 4px;
border-bottom-color: var(--news-card-accent-color, #075082);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.news-card-v4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--rz-primary);
}
.news-card-v4:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
border-color: var(--rz-primary-lighter);
border-bottom-color: var(--news-card-accent-color, #075082);
}
/* ===== Alle Berichten Card ===== */
.news-card-all {
background: var(--photo-bg-4, var(--rz-panel-background-color));
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
.news-card-all-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px;
width: 100%;
}
.news-card-all-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--photo-bg-3, var(--rz-base-200));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: all 0.3s ease;
}
.news-card-all-icon i {
font-size: 36px;
color: var(--photo-text, var(--rz-primary));
}
.news-card-all:hover .news-card-all-icon {
transform: scale(1.1);
background: var(--photo-bg-2, var(--rz-primary));
}
.news-card-all:hover .news-card-all-icon i {
color: var(--photo-color, #fff);
}
.news-card-all-title {
font-size: 24px;
font-weight: 600;
color: var(--photo-text, var(--rz-text-color));
margin: 0 0 24px 0;
line-height: 1.3;
}
.news-card-all-stats {
display: flex;
gap: 32px;
margin-bottom: 24px;
}
.news-card-all-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.news-card-all-stat-number {
font-size: 48px;
font-weight: 600;
color: var(--photo-text, var(--rz-primary));
line-height: 1;
}
.news-card-all-stat-label {
font-size: 14px;
font-weight: 600;
color: var(--photo-text-accent, var(--rz-text-secondary-color));
text-transform: uppercase;
letter-spacing: 0.5px;
}
.news-card-all-link {
margin-top: 8px;
}
/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
.news-featured,
.news-featured-v4 {
height: 450px;
}
.news-featured-v2 {
height: 500px;
}
.news-featured-content,
.news-featured-v4 .news-featured-content {
padding: 36px;
}
.news-featured-v2 .news-featured-content {
padding: 36px;
}
.news-featured-v3 .news-featured-image {
flex: 0 0 350px;
}
.news-featured-v3 .news-featured-content {
padding: 36px;
}
.news-featured-title,
.news-featured-v3 .news-featured-title {
font-size: 28px;
}
.news-featured-v2 .news-featured-title {
font-size: 36px;
}
.news-featured-v4 .news-featured-title {
font-size: 26px;
}
.news-featured-excerpt {
font-size: 15px;
}
.news-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
}
@media (max-width: 768px) {
.news-featured,
.news-featured-v4 {
flex-direction: column;
height: auto;
}
.news-featured-image,
.news-featured-v4 .news-featured-image {
flex: 0 0 300px;
width: 100%;
}
.news-featured-v2 {
height: 450px;
}
.news-featured-v3 .news-featured-image {
flex: 0 0 300px;
}
.news-featured-content,
.news-featured-v4 .news-featured-content {
flex: 1;
padding: 24px;
}
.news-featured-v2 .news-featured-content {
padding: 24px;
}
.news-featured-v3 .news-featured-content {
padding: 30px;
}
.news-featured-title,
.news-featured-v3 .news-featured-title,
.news-featured-v4 .news-featured-title {
font-size: 24px;
}
.news-featured-v2 .news-featured-title {
font-size: 30px;
}
.news-featured-excerpt {
font-size: 14px;
margin: 0 0 16px;
}
.news-featured-v2 .news-featured-excerpt {
font-size: 16px;
}
.news-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.news-card-content {
padding: 20px;
}
.news-card-title {
font-size: 18px;
}
/* Card V2 responsive */
.news-card-v2 {
flex-direction: column;
height: auto;
}
.news-card-v2 .news-card-image {
flex: 0 0 200px;
width: 100%;
}
/* Card V3 responsive */
.news-card-v3 .news-card-image {
padding-top: 50%;
}
/* Card V4 responsive */
.news-card-v4 .news-card-image {
padding-top: 56.25%;
}
}
@media (max-width: 480px) {
.news-featured-image,
.news-featured-v4 .news-featured-image {
flex: 0 0 250px;
}
.news-featured-v2 {
height: 400px;
}
.news-featured-v3 .news-featured-image {
flex: 0 0 250px;
}
.news-featured-content,
.news-featured-v4 .news-featured-content {
padding: 20px;
}
.news-featured-v2 .news-featured-content {
padding: 24px;
}
.news-featured-v3 .news-featured-content {
padding: 24px;
}
.news-featured-title,
.news-featured-v3 .news-featured-title,
.news-featured-v4 .news-featured-title {
font-size: 20px;
}
.news-featured-v2 .news-featured-title {
font-size: 26px;
}
.news-featured-excerpt {
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-featured-v2 .news-featured-excerpt {
font-size: 15px;
-webkit-line-clamp: 3;
}
.news-card-excerpt {
-webkit-line-clamp: 2;
}
.news-view-all-btn {
width: 100%;
justify-content: center;
}
}
/* ===== Dark Mode ===== */
.rz-material-dark .news-featured,
.rz-material-dark .news-featured-v3,
.rz-material-dark .news-featured-v4,
.rz-material-dark .news-card,
.rz-material-dark .news-card-v2,
.rz-material-dark .news-card-v3,
.rz-material-dark .news-card-v4 {
background: var(--rz-base-800);
border-color: var(--rz-base-700);
}
.rz-material-dark .news-featured:hover,
.rz-material-dark .news-featured-v3:hover,
.rz-material-dark .news-featured-v4:hover,
.rz-material-dark .news-card:hover,
.rz-material-dark .news-card-v2:hover,
.rz-material-dark .news-card-v3:hover,
.rz-material-dark .news-card-v4:hover {
border-color: var(--rz-primary);
}
.rz-material-dark .news-featured-content,
.rz-material-dark .news-featured-v3 .news-featured-content,
.rz-material-dark .news-featured-v4 .news-featured-content {
background: var(--rz-base-800);
}
.rz-material-dark .news-featured-v4 .news-meta,
.rz-material-dark .news-card-v3 .news-meta,
.rz-material-dark .news-card-v3 .news-card-link {
background: var(--rz-base-900);
}
.rz-material-dark .news-view-all-btn {
background: var(--rz-primary);
}
.rz-material-dark .news-view-all-btn:hover {
background: var(--rz-primary-light);
}
/* Dynamische foto kleur (per card) - EXTENDED voor FotoNew pagina */
/* Geen global fallback meer - elke card zet zijn eigen --photo-color */
/* Card achtergronden en tekst worden per card berekend */
/* photo-exif-card en photo-location-card NIET hier - die erven --photo-color van parent .photo-item */
.news-card, .photo-grid-card, .pc-featured, .news-featured, .photo-detail {
/* Default fallback als --photo-color niet gezet is */
--photo-color: #075082;
/* Licht thema: mix met wit voor tinten */
--photo-bg-1: color-mix(in oklab, var(--photo-color), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color), white 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color), white 65%);
/* Tekstkleur: mix met foto kleur voor contrast */
--photo-text: color-mix(in oklab, var(--photo-color), black 35%);
--photo-text-accent: color-mix(in oklab, var(--photo-color), black 15%);
background: var(--photo-bg-4);
color: var(--photo-text);
}
.rz-material-dark .news-card, .pc-featured
.rz-material-dark .photo-grid-card,
.rz-material-dark .photo-detail {
/* Donker thema: mix met zwart voor shades */
--photo-bg-1: color-mix(in oklab, var(--photo-color), black 10%);
--photo-bg-2: color-mix(in oklab, var(--photo-color), black 20%);
--photo-bg-3: color-mix(in oklab, var(--photo-color), black 30%);
--photo-bg-4: color-mix(in oklab, var(--photo-color), black 40%);
--photo-bg-5: color-mix(in oklab, var(--photo-color), black 80%);
/* Tekstkleur: mix met foto kleur voor contrast */
--photo-text: color-mix(in oklab, var(--photo-color), white 80%);
background: var(--photo-bg-1);
color: var(--photo-text);
}
/* ===== Nieuws / Verhalen overzichtspagina ===== */
.nib-news-overview-block {
margin-bottom: 0;
}
/* De sticky filterbalk is generiek (sticky + overflow-fix):
zie `.nib-ff-toolbar` in profiel.css. */
/* ── Content-gebied ─────────────────────────────────────── */
.nib-news-ov-content {
background: var(--rz-base-background-color);
}
/* ── Pager ────────────────────────────────────────────── */
.nib-news-ov-pager {
width: 100%;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* ── Lege staat ────────────────────────────────────────── */
.nib-coll-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 4rem 2rem;
color: var(--rz-text-secondary-color);
font-size: 1rem;
}
.nib-coll-empty i {
font-size: 2.5rem;
opacity: 0.4;
}
/* ── NewsCard: placeholder (geen coverfoto) ─────────────── */
.nib-news-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--pc-color, #075082), white 40%);
}
.nib-news-card-placeholder i {
font-size: 3rem;
color: color-mix(in oklab, var(--pc-color, #075082), black 20%);
opacity: 0.4;
}
/* ── NewsCard: statusbadge (Concept / Ingediend) ────────── */
.nib-news-card-badge {
position: absolute;
top: 0.55rem;
left: 0.55rem;
z-index: 3;
padding: 0.2rem 0.55rem;
border-radius: 4px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
background: rgba(0, 0, 0, 0.45);
color: #fff;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ── NewsCard-specifieke overrides ──────────────────────── */
.nib-news-card .nib-card-desc {
-webkit-line-clamp: 4;
}
.nib-news-card .nib-card-meta {
margin-bottom: 0.5rem;
}
/* ── Breder grid: max 3 kolommen op desktop ─────────────── */
.nib-news-overview-block .photo-grid,
.nib-news-more-block .photo-grid {
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}
/* ===== Photo Type Selector - Matching Camera/Location Headers ===== */
.photo-type-selector-card {
background: var(--photo-bg-5, var(--rz-panel-background-color));
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
height: 100%;
transition: box-shadow 0.3s ease;
}
.photo-type-selector-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
/* Header - Match photo-exif-header and photo-location-header exactly */
.photo-type-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid var(--photo-bg-1);
background-color: var(--photo-bg-2);
}
.photo-type-header i {
font-size: 24px;
color: var(--photo-text);
flex-shrink: 0;
}
.photo-type-header-content {
flex: 1;
}
.photo-type-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--photo-text);
}
.photo-type-subtitle {
display: none; /* Hide subtitle to match other headers */
}
/* Options Grid */
.photo-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
padding: 24px;
background: var(--photo-bg-5);
}
.photo-type-option {
position: relative;
padding: 20px;
border-radius: 12px;
border: 2px solid var(--photo-bg-3);
background: var(--rz-base);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 12px;
}
.photo-type-option:hover {
border-color: var(--photo-text-accent, var(--rz-primary-lighter));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.photo-type-option-selected {
border-color: var(--photo-color, var(--rz-primary));
background: var(--photo-bg-2, var(--rz-primary-lighter));
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.photo-type-option-icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--rz-base-100);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.photo-type-option-selected .photo-type-option-icon {
background: var(--photo-color, var(--rz-primary));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.photo-type-option-icon i {
font-size: 28px;
color: var(--rz-text-secondary-color);
transition: all 0.3s ease;
}
.photo-type-option-selected .photo-type-option-icon i {
color: white;
}
.photo-type-option-content {
flex: 1;
}
.photo-type-option-title {
font-size: 18px;
font-weight: 600;
color: var(--rz-text-color);
margin: 0 0 6px 0;
line-height: 1.3;
}
.photo-type-option-desc {
font-size: 14px;
color: var(--rz-text-secondary-color);
margin: 0;
line-height: 1.5;
}
.photo-type-option-checkmark {
position: absolute;
top: 16px;
right: 16px;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--photo-color, var(--rz-success));
display: flex;
align-items: center;
justify-content: center;
animation: checkmark-pop 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.photo-type-option-checkmark i {
font-size: 14px;
color: white;
font-weight: 600;
}
@keyframes checkmark-pop {
0% {
transform: scale(0) rotate(-45deg);
opacity: 0;
}
50% {
transform: scale(1.2) rotate(5deg);
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
/* ===== Dark Mode ===== */
.rz-material-dark .photo-type-selector-card {
background: var(--rz-base-800);
}
.rz-material-dark .photo-type-header {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.rz-material-dark .photo-type-option {
background: var(--rz-base-900);
border-color: var(--rz-base-700);
}
.rz-material-dark .photo-type-option:hover {
border-color: var(--rz-primary);
}
.rz-material-dark .photo-type-option-icon {
background: var(--rz-base-800);
}
/* ===== Animal Selection Card ===== */
.animal-selection-card {
padding: 24px;
margin: 0 24px 24px 24px;
background: var(--rz-base);
border: 2px dashed var(--photo-color, var(--rz-primary));
}
.animal-selection-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.animal-selection-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--photo-bg-3, var(--rz-primary-lighter));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.animal-selection-icon i {
font-size: 20px;
color: var(--photo-color, var(--rz-primary));
}
.animal-selection-content {
flex: 1;
}
.animal-selection-title {
font-size: 18px;
font-weight: 600;
color: var(--rz-text-color);
margin: 0 0 4px 0;
line-height: 1.3;
}
.animal-selection-desc {
font-size: 14px;
color: var(--rz-text-secondary-color);
margin: 0;
}
.animal-selection-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.animal-selection-button {
width: 100%;
display: flex !important;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 24px !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.animal-selection-button i:last-child {
margin-left: auto;
}
.animal-selection-hint {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--photo-bg-5, var(--rz-info-lighter));
border-left: 4px solid var(--photo-color, var(--rz-info));
border-radius: 0 8px 8px 0;
}
.animal-selection-hint i {
font-size: 16px;
color: var(--photo-text, var(--rz-info));
flex-shrink: 0;
}
.animal-selection-hint span {
font-size: 14px;
color: var(--rz-text-secondary-color);
line-height: 1.5;
}
.rz-material-dark .animal-selection-card {
background: var(--rz-base-900);
}
.rz-material-dark .animal-selection-hint {
background: var(--rz-base-800);
}
/* ===== Selected Animal Wrapper ===== */
.selected-animal-wrapper {
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
/*    border: 2px solid var(--photo-color, var(--rz-success));
*/
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.selected-animal-wrapper:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.selected-animal-header {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
}
.selected-animal-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 8px;
background: var(--photo-color, var(--rz-success));
color: white;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.selected-animal-badge i {
font-size: 16px;
}
.selected-animal-remove {
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: var(--rz-danger);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.selected-animal-remove:hover {
background: var(--rz-danger-dark);
transform: scale(1.1);
}
.selected-animal-remove i {
font-size: 18px;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
.photo-type-grid {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px;
}
.photo-type-header {
padding: 16px;
}
.photo-type-title {
font-size: 20px;
}
.photo-type-option {
padding: 16px;
}
.photo-type-option-icon {
width: 48px;
height: 48px;
}
.photo-type-option-icon i {
font-size: 24px;
}
}
/* ── Filter Drawer ────────────────────────────────────── */
/* Overlay */
.nib-filter-overlay {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0,0,0,0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.nib-filter-overlay--open {
opacity: 1;
pointer-events: auto;
}
/* Drawer */
.nib-filter-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 90vw);
z-index: 1000;
background: var(--rz-base-background-color);
box-shadow: -4px 0 24px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nib-filter-drawer--open {
transform: translateX(0);
}
/* Header */
.nib-filter-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--rz-base-200);
flex-shrink: 0;
}
.nib-filter-drawer-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--rz-text-color);
display: flex;
align-items: center;
gap: 0.45rem;
}
.nib-filter-drawer-title i {
opacity: 0.55;
font-size: 0.9rem;
}
.nib-filter-drawer-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-filter-clear-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.75rem;
border-radius: 6px;
border: 1px solid var(--rz-base-300);
background: transparent;
color: var(--rz-danger);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.nib-filter-clear-btn:hover {
background: var(--rz-danger-lighter, rgba(220,53,69,0.08));
}
.nib-filter-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
border: none;
background: transparent;
color: var(--rz-text-secondary-color);
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s;
}
.nib-filter-close-btn:hover {
background: var(--rz-base-200);
}
/* Body — scrollable */
.nib-filter-drawer-body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.nib-filter-drawer-footer {
padding: 0.85rem 1.25rem 1rem;
border-top: 1px solid var(--rz-base-200);
background: var(--rz-base-background-color);
flex-shrink: 0;
}
.nib-filter-apply-btn {
width: 100%;
height: 2.5rem;
border: 1px solid color-mix(in srgb, var(--rz-primary) 35%, transparent);
background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
color: var(--rz-primary);
font-size: 0.9rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.nib-filter-apply-btn:hover {
background: color-mix(in srgb, var(--rz-primary) 18%, transparent);
}
/* Sectie */
.nib-filter-section {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.nib-filter-section-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rz-text-secondary-color);
display: flex;
align-items: center;
gap: 0.4rem;
}
.nib-filter-badge {
font-size: 0.58rem;
font-weight: 600;
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: var(--rz-primary-lighter, rgba(13,110,253,0.12));
color: var(--rz-primary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Datum rij */
.nib-filter-date-row {
display: flex;
gap: 0.5rem;
}
.nib-filter-field-icon {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rz-text-secondary-color);
padding-right: 0.25rem;
}
/* Presets */
.nib-filter-presets {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.nib-filter-preset {
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--rz-base-300);
background: transparent;
color: var(--rz-text-secondary-color);
font-size: 0.7rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.nib-filter-preset:hover {
background: var(--rz-base-200);
border-color: var(--rz-base-400);
color: var(--rz-text-color);
}
.nib-filter-preset--clear {
color: var(--rz-danger);
border-color: color-mix(in srgb, var(--rz-danger) 30%, transparent);
}
.nib-filter-preset--clear:hover {
background: var(--rz-danger-lighter, rgba(220,53,69,0.08));
border-color: var(--rz-danger);
}
/* Facets */
.nib-filter-facets {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nib-filter-facet {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.nib-filter-facet-label {
font-size: 0.68rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
opacity: 0.85;
}
/* Compact Radzen form fields inside drawer */
.nib-filter-drawer .rz-form-field {
font-size: 0.85rem;
}
/* ── Legacy filter grid (kept for backwards compat) ──── */
/* Date Range Filter Styles */
.rz-datepicker-input {
width: 100%;
}
/* ── Filter 3-koloms grid ─────────────────────────────── */
.filter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem 1.25rem;
align-items: start;
}
.filter-cell {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.filter-cell-full {
grid-column: 1 / -1;
}
.filter-cell-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rz-text-secondary-color);
opacity: 0.8;
}
.filter-grid .rz-form-field,
.filter-grid .rz-dropdown,
.filter-grid .rz-textbox,
.filter-grid .rz-datepicker {
width: 100%;
}
@media (max-width: 900px) {
.filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.filter-grid {
grid-template-columns: 1fr;
}
}
/* ── Facet groep sectie ──────────────────────────────── */
.filter-group {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.filter-group-header {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--rz-text-secondary-color);
padding-bottom: 0.45rem;
border-bottom: 1px solid var(--rz-base-300);
}
.filter-group-header i {
font-size: 0.72rem;
color: var(--rz-primary);
opacity: 0.75;
flex-shrink: 0;
}
.filter-group-badge {
margin-left: auto;
font-size: 0.62rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: var(--rz-primary-lighter);
color: var(--rz-primary-dark);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.filter-group-body {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
}
@media (max-width: 900px) {
.filter-group-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.filter-group-body {
grid-template-columns: 1fr;
}
}
.photo-grid-date-filter-active {
color: var(--rz-info);
font-weight: 600;
}
/* Badge positioning in panel header */
.radzen-panel-header .rz-badge {
margin-left: auto;
}
/* Date preset buttons */
.date-preset-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.date-preset-buttons .rz-button {
flex: 0 0 auto;
white-space: nowrap;
}
/* Compact preset button styling */
.rz-button.rz-button-xs {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
}
/* Responsive preset buttons */
@media (max-width: 768px) {
.date-preset-buttons .rz-button {
flex: 1 1 calc(50% - 0.25rem);
min-width: 0;
}
}
@media (max-width: 480px) {
.date-preset-buttons .rz-button {
flex: 1 1 100%;
}
}
/* ── Saved Filters ───────────────────────────────────── */
.nib-saved-filters-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.nib-saved-filter-item {
display: flex;
align-items: center;
gap: 0.25rem;
border-radius: 6px;
background: var(--rz-base-100);
transition: background 0.15s;
}
.nib-saved-filter-item:hover {
background: var(--rz-base-200);
}
.nib-saved-filter-item--default {
background: color-mix(in srgb, var(--rz-primary) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--rz-primary) 20%, transparent);
}
.nib-saved-filter-apply {
flex: 1;
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.65rem;
border: none;
background: transparent;
color: var(--rz-text-color);
font-size: 0.82rem;
cursor: pointer;
text-align: left;
min-width: 0;
}
.nib-saved-filter-apply i {
font-size: 0.75rem;
opacity: 0.5;
flex-shrink: 0;
}
.nib-saved-filter-item--default .nib-saved-filter-apply i {
color: var(--rz-warning);
opacity: 1;
}
.nib-saved-filter-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.nib-saved-filter-tag {
font-size: 0.68rem;
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: var(--rz-base-200);
color: var(--rz-text-secondary-color);
white-space: nowrap;
flex-shrink: 0;
}
.nib-saved-filter-tag--default {
background: color-mix(in srgb, var(--rz-primary) 15%, transparent);
color: var(--rz-primary);
font-weight: 600;
}
.nib-saved-filter-actions {
display: flex;
align-items: center;
gap: 0.15rem;
padding-right: 0.35rem;
flex-shrink: 0;
}
.nib-saved-filter-action {
display: flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border: none;
border-radius: 4px;
background: transparent;
color: var(--rz-text-secondary-color);
font-size: 0.72rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.nib-saved-filter-action:hover {
background: var(--rz-base-300);
color: var(--rz-text-color);
}
.nib-saved-filter-action--delete:hover {
background: color-mix(in srgb, var(--rz-danger) 12%, transparent);
color: var(--rz-danger);
}
.nib-save-filter-btn {
margin-top: 0.25rem;
}
.nib-save-filter-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.65rem;
border-radius: 6px;
background: var(--rz-base-100);
margin-top: 0.35rem;
}
.nib-save-filter-default-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--rz-text-secondary-color);
cursor: pointer;
}
.nib-save-filter-default-label input[type="checkbox"] {
accent-color: var(--rz-primary);
}
.nib-save-filter-form-actions {
display: flex;
gap: 0.35rem;
}
/* ── Profiel page: saved filters management ───────── */
.nib-profiel-saved-filters {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.5rem 1rem 1rem;
}
.nib-profiel-filter-count {
margin-left: auto;
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
}
/* ════════════════════════════════════════════════════════════════════
NibFilterButton — herbruikbare 3-delige filterknop
1) Filteren  2) Opgeslagen filters  3) Wissen
Accent via --nib-fbtn-accent (default primary).
════════════════════════════════════════════════════════════════════ */
.nib-filter-btn {
--nib-fbtn-accent: var(--rz-primary);
position: relative;
display: inline-flex;
align-items: stretch;
height: 2.15rem;
border-radius: 8px;
border: 1px solid var(--rz-base-300);
background: var(--rz-base-background-color);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.nib-filter-btn--active {
border-color: var(--nib-fbtn-accent);
background: color-mix(in srgb, var(--nib-fbtn-accent) 7%, var(--rz-base-background-color));
box-shadow: 0 1px 3px color-mix(in srgb, var(--nib-fbtn-accent) 22%, transparent);
}
/* Segmenten — Radzen-knop neutraliseren */
.nib-filter-btn .nib-filter-btn-seg.rz-button {
height: 100%;
min-width: 0;
padding: 0 0.8rem !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--rz-text-color) !important;
font-size: 0.82rem;
font-weight: 500;
box-shadow: none !important;
transition: background 0.12s, color 0.12s;
}
.nib-filter-btn .nib-filter-btn-seg .rz-button-box {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.nib-filter-btn .nib-filter-btn-seg .rzi {
font-size: 1.05rem;
line-height: 1;
}
.nib-filter-btn .nib-filter-btn-seg.rz-button:hover {
background: var(--rz-base-200) !important;
}
.nib-filter-btn--active .nib-filter-btn-seg.rz-button {
color: var(--nib-fbtn-accent) !important;
}
.nib-filter-btn--active .nib-filter-btn-seg.rz-button:hover {
background: color-mix(in srgb, var(--nib-fbtn-accent) 12%, transparent) !important;
}
/* Buitenste segmenten volgen de afronding van de container (binnenradius
= container-radius − rand), zodat de hover binnen de knop blijft. */
.nib-filter-btn-main.rz-button {
border-radius: 7px 0 0 7px !important;
}
/* Laatste zichtbare segment: rechts afgerond. Wis-knop is laatst bij een
actief filter; anders is dat de opgeslagen-filters-knop. */
.nib-filter-btn-clear.rz-button,
.nib-filter-btn-saved-wrap:last-child .nib-filter-btn-saved.rz-button {
border-radius: 0 7px 7px 0 !important;
}
/* Segment-scheidingslijnen */
.nib-filter-btn-saved.rz-button,
.nib-filter-btn-clear.rz-button {
border-left: 1px solid var(--rz-base-300) !important;
}
.nib-filter-btn--active .nib-filter-btn-saved.rz-button,
.nib-filter-btn--active .nib-filter-btn-clear.rz-button {
border-left-color: color-mix(in srgb, var(--nib-fbtn-accent) 28%, transparent) !important;
}
/* Segment 2 — opgeslagen filters */
.nib-filter-btn-saved-wrap {
display: inline-flex;
position: relative;
}
.nib-filter-btn-saved.rz-button {
padding: 0 0.5rem !important;
color: var(--rz-text-secondary-color) !important;
}
.nib-filter-btn--active .nib-filter-btn-saved.rz-button {
color: var(--nib-fbtn-accent) !important;
}
.nib-filter-btn-caret {
font-size: 0.95rem !important;
opacity: 0.7;
}
/* Segment 3 — wissen */
.nib-filter-btn-clear.rz-button {
padding: 0 0.55rem !important;
color: var(--rz-text-secondary-color) !important;
}
.nib-filter-btn-clear.rz-button:hover {
background: color-mix(in srgb, var(--rz-danger) 12%, transparent) !important;
color: var(--rz-danger) !important;
}
/* Dropdown-menu — verschijnt op hover/focus */
.nib-filter-btn-menu {
display: none;
flex-direction: column;
position: absolute;
top: calc(100% + 5px);
right: 0;
min-width: 210px;
max-width: 290px;
z-index: 500;
background: var(--rz-base-background-color);
border: 1px solid var(--rz-base-300);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
padding: 0.4rem;
gap: 0.1rem;
}
.nib-filter-btn-saved-wrap:hover .nib-filter-btn-menu,
.nib-filter-btn-saved-wrap:focus-within .nib-filter-btn-menu {
display: flex;
}
.nib-filter-btn-menu-header {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--rz-text-secondary-color);
padding: 0.35rem 0.5rem 0.45rem;
border-bottom: 1px solid var(--rz-base-200);
margin-bottom: 0.25rem;
}
.nib-filter-btn-menu-item.rz-button {
display: flex !important;
width: 100%;
justify-content: flex-start !important;
padding: 0.45rem 0.6rem !important;
border: none !important;
border-radius: 6px !important;
background: transparent !important;
color: var(--rz-text-color) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
box-shadow: none !important;
text-align: left;
}
.nib-filter-btn-menu-item .rz-button-box {
display: flex;
align-items: center;
gap: 0.45rem;
width: 100%;
overflow: hidden;
}
.nib-filter-btn-menu-item.rz-button:hover {
background: var(--rz-base-200) !important;
}
.nib-filter-btn-menu-item .rzi {
font-size: 0.9rem;
opacity: 0.6;
flex-shrink: 0;
}
.nib-filter-btn-menu-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nib-filter-btn-menu-default {
margin-left: auto;
font-size: 0.65rem;
font-weight: 600;
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: color-mix(in srgb, var(--nib-fbtn-accent) 14%, transparent);
color: var(--nib-fbtn-accent);
white-space: nowrap;
flex-shrink: 0;
}
.nib-filter-btn-menu-empty {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0.6rem;
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
}
.nib-filter-btn-menu-empty .rzi {
font-size: 0.95rem;
opacity: 0.6;
}
/* ── Account layout ─────────────────────────────────────── */
.login-page {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
.login-page { grid-template-columns: 1fr; }
.login-brand { display: none; }
}
/* ── Linker branded kant ─────────────────────────────────── */
.login-brand {
background: var(--rz-primary-darker);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
color: #fff;
}
.login-brand-top {
}
.login-brand-logo {
height: 32px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.login-brand-center {
}
.login-brand-title {
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 600;
line-height: 1.2;
margin: 0 0 1rem;
letter-spacing: -0.02em;
}
.login-brand-sub {
font-size: 1rem;
opacity: 0.8;
line-height: 1.65;
max-width: 36ch;
margin: 0 0 2rem;
}
.login-brand-features {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.login-brand-feature {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.88rem;
opacity: 0.85;
}
.login-brand-feature i {
width: 18px;
text-align: center;
opacity: 0.9;
color: #a7f3d0;
flex-shrink: 0;
}
.login-brand-bottom {
}
.login-brand-beta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.85rem;
background: var(--rz-primary-dark);
border: 1px solid var(--rz-primary);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
}
.login-brand-beta-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f59e0b;
animation: nib-beta-pulse 2s ease-in-out infinite;
}
/* ── Rechter formulier kant ──────────────────────────────── */
.login-form-side {
background: var(--rz-base-background-color);
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
overflow-y: auto;
position: relative;
}
/* Sluitknop rechtsboven */
.login-back-home {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--rz-text-secondary-color);
font-size: 1.1rem;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.login-back-home:hover {
background: var(--rz-base-200);
color: var(--rz-text-color);
text-decoration: none;
}
.login-form-wrap {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.login-form-header h1 {
font-size: 1.75rem;
font-weight: 600;
margin: 0 0 0.35rem;
letter-spacing: -0.02em;
}
.login-form-header p {
font-size: 0.9rem;
color: var(--rz-text-secondary-color);
margin: 0;
}
/* ── Social knoppen ─────────────────────────────────────── */
.login-social {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.login-social-btn {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 1rem;
border-radius: 10px;
border: 1.5px solid var(--rz-base-300);
background: var(--rz-base-background-color);
color: var(--rz-text-color);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.login-social-btn:hover {
border-color: var(--rz-primary-light);
background: var(--rz-base-100);
color: var(--rz-text-color);
text-decoration: none;
}
.login-social-btn-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.login-social-btn-icon img {
width: 20px;
height: 20px;
object-fit: contain;
}
/* ── Divider ────────────────────────────────────────────── */
.login-divider {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--rz-text-secondary-color);
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--rz-base-300);
}
/* ── Formulier velden ───────────────────────────────────── */
.login-fields {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
/* ── Inlogknop ──────────────────────────────────────────── */
.login-submit-btn {
width: 100%;
padding: 0.8rem;
background: var(--rz-primary);
color: #fff;
border: none;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.12s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.login-submit-btn:hover {
background: var(--rz-primary-dark);
transform: translateY(-1px);
}
.login-submit-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
/* ── Links onderaan ─────────────────────────────────────── */
.login-links {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.login-link {
font-size: 0.83rem;
color: var(--rz-primary);
text-decoration: none;
cursor: pointer;
padding: 0.2rem 0;
background: none;
border: none;
text-align: left;
transition: color 0.12s;
}
.login-link:hover {
color: var(--rz-primary-dark);
text-decoration: underline;
}
.login-register-link {
font-size: 0.87rem;
color: var(--rz-text-secondary-color);
text-align: center;
padding-top: 0.5rem;
border-top: 1px solid var(--rz-base-200);
}
.login-register-link a,
.login-register-link button {
color: var(--rz-primary);
font-weight: 600;
text-decoration: none;
background: none;
border: none;
cursor: pointer;
}
.login-register-link a:hover,
.login-register-link button:hover {
text-decoration: underline;
}
/* ── Aanmelden specifiek ─────────────────────────────────── */
.register-name-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
@media (max-width: 420px) {
.register-name-row {
grid-template-columns: 1fr;
}
}
.register-terms {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.register-terms-text {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--rz-text-secondary-color);
cursor: pointer;
}
.register-terms-text a {
color: var(--rz-primary);
text-decoration: none;
}
.register-terms-text a:hover {
text-decoration: underline;
}
.register-validation {
margin-top: 0.5rem;
font-size: 0.82rem;
color: var(--rz-danger);
}
background: none;
border: none;
text-align: left;
transition: color 0.12s;
}
.login-link:hover {
color: var(--rz-primary-dark);
text-decoration: underline;
}
.login-register-link {
font-size: 0.87rem;
color: var(--rz-text-secondary-color);
text-align: center;
padding-top: 0.5rem;
border-top: 1px solid var(--rz-base-200);
}
.login-register-link a,
.login-register-link button {
color: var(--rz-primary);
font-weight: 600;
text-decoration: none;
background: none;
border: none;
cursor: pointer;
}
.login-register-link a:hover,
.login-register-link button:hover {
text-decoration: underline;
}
/* Custom File Upload Styles */
.custom-upload-container {
width: 100%;
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.upload-zone-wrapper {
display: block;
width: 100%;
margin-bottom: 1.5rem;
cursor: pointer;
}
.upload-zone {
min-height: 200px;
border: 3px dashed var(--rz-border-color);
border-radius: 8px;
background: var(--rz-base-100);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
user-select: none;
}
.upload-zone-with-files {
min-height: 100px;
background: var(--rz-base-200);
}
.upload-zone:hover:not(.disabled) {
border-color: var(--rz-primary);
background: var(--rz-primary-lighter);
}
.upload-zone.dragging {
border-color: var(--rz-primary);
background: var(--rz-primary-lighter);
transform: scale(1.01);
}
.upload-zone.disabled {
opacity: 0.5;
cursor: not-allowed !important;
}
.upload-prompt {
text-align: center;
pointer-events: none;
}
.upload-icon {
font-size: 3.5rem;
margin-bottom: 1rem;
opacity: 0.7;
color: var(--rz-primary);
}
.upload-icon-small {
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.6;
color: var(--rz-primary);
}
.upload-title {
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--rz-text-color);
}
.upload-title-small {
font-size: 0.875rem;
font-weight: 500;
color: var(--rz-text-color);
opacity: 0.8;
}
.upload-subtitle {
font-size: 0.875rem;
opacity: 0.7;
color: var(--rz-text-color);
}
/* File Preview Section */
.file-preview-section {
margin-top: 0;
}
/* Preview Grid - matches PhotoGrid */
.file-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.5rem;
}
.preview-tile {
width: 100%;
aspect-ratio: 4 / 3;
position: relative;
}
/* Preview Card - matches PhotoGrid cards */
.preview-card {
height: 100%;
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.preview-image {
flex: 1;
width: 100%;
position: relative;
overflow: hidden;
}
.preview-loading {
flex: 1;
width: 100%;
background: var(--rz-base-200);
}
/* Preview Info - matches PhotoGrid info bar */
.preview-info {
width: 100%;
position: relative;
}
.preview-info i {
color: var(--rz-primary);
margin-right: 0.25rem;
}
/* Remove Button - positioned like corner badge */
.preview-remove-btn {
position: absolute !important;
top: 0.5rem;
right: 0.5rem;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
/*    border: 2px solid white !important;
*/    border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
z-index: 10;
}
.preview-remove-btn:hover {
transform: scale(1.1);
}
.preview-remove-btn:active {
transform: scale(0.95);
}
/* Responsive */
@media (max-width: 768px) {
.upload-zone {
min-height: 150px;
padding: 1.5rem;
}
.upload-zone-with-files {
min-height: 80px;
}
.upload-icon {
font-size: 2.5rem;
}
.file-preview-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.25rem;
}
.preview-remove-btn {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
}
}
@media (max-width: 480px) {
.file-preview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===================================================
NIB FOTO DETAIL PAGE  (FotoNew.razor)
Consistent met nib-news-block / nib-photos-block
=================================================== */
/* ── Status-badge over de foto (PhotoColor) ────────── */
.photo-color-status-badge {
position: absolute;
top: 0.9rem;
right: 0.9rem;
z-index: 10;
padding: 0.25rem 0.7rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.photo-color-status-badge-warning  { background: rgba(217, 119, 6,  0.82); }
.photo-color-status-badge-info     { background: rgba(37,  99,  235, 0.82); }
.photo-color-status-badge-danger   { background: rgba(220, 38,  38,  0.82); }
.photo-color-status-badge-secondary{ background: rgba(71,  85,  105, 0.72); }
/* ── Kleur-variabelen (net als news & photos blokken) ─ */
.nib-foto-block,
.nib-foto-two-col {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 40%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 72%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 75%);
}
.rz-material-dark .nib-foto-block,
.rz-material-dark .nib-foto-two-col {
--photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 10%);
--photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 20%);
--photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 30%);
--photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 45%);
--photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
--photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 80%);
--photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 50%);
}
/* ── Basis blok ───────────────────────────────────────── */
.nib-foto-block {
border-radius: 0;
overflow: hidden;
box-shadow: none;
background: var(--rz-panel-background-color);
}
.photo-keyword-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 1em;
}
/* ── Twee-koloms wrapper (camera + locatie) ───────────── */
.nib-foto-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
}
.nib-foto-two-col .nib-foto-block {
margin: 0;
}
@media (max-width: 900px) {
.nib-foto-two-col { grid-template-columns: 1fr; }
}
/* ── Header balk (identiek aan nib-news-header) ───────── */
.nib-foto-block-header {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.25rem 1.5rem;
background: var(--photo-bg-4);
border-bottom: 1px solid var(--photo-bg-3);
}
.nib-foto-block-header-left { flex: 1; min-width: 0; }
.nib-foto-block-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--photo-text);
margin: 0 0 0.15rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-foto-block-title i { font-size: 0.95rem; }
.nib-foto-block-sub {
font-size: 0.8rem;
color: var(--photo-text);
margin: 0;
opacity: 0.75;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40ch;
}
/* ── Status badges ────────────────────────────────────── */
.nib-foto-status-badge {
padding: 0.3rem 0.85rem;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.nib-foto-status-concept   { background: rgba(255,193,7,0.25); color: #92640a; }
.nib-foto-status-ingediend { background: rgba(33,150,243,0.2); color: #0d5c9e; }
.nib-foto-status-afgewezen { background: rgba(244,67,54,0.2);  color: #b71c1c; }
.rz-material-dark .nib-foto-status-concept   { background: rgba(255,193,7,0.2);  color: #ffd54f; }
.rz-material-dark .nib-foto-status-ingediend { background: rgba(33,150,243,0.2); color: #90caf9; }
.rz-material-dark .nib-foto-status-afgewezen { background: rgba(244,67,54,0.2);  color: #ef9a9a; }
/* ── Hero afbeelding ──────────────────────────────────── */
.nib-foto-hero {
position: relative;
width: 100%;
overflow: hidden;
background: #000;
}
.nib-foto-hero-img {
width: 100%;
height: auto;
display: block;
}
/* Vaste verhouding (bijv. nieuwsbericht 5:3) */
.nib-foto-hero--ratio .nib-foto-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Status-badge over de foto */
.nib-foto-status-overlay {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.28rem 0.75rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap;
}
.nib-foto-status-concept    { background: rgba(202, 138, 4,   0.82); }
.nib-foto-status-ingediend  { background: rgba(37,  99,  235, 0.82); }
.nib-foto-status-afgewezen  { background: rgba(220, 38,  38,  0.82); }
/* ── Hero placeholder (geen foto geselecteerd) ────────── */
.nib-foto-hero-placeholder {
min-height: 240px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
background: var(--photo-bg-4);
color: var(--photo-text);
cursor: default;
}
.nib-foto-hero-placeholder i {
font-size: 2.5rem;
opacity: 0.35;
}
.nib-foto-hero-placeholder span {
font-size: 0.9rem;
opacity: 0.55;
}
/* ── Info-sectie (onder foto) ─────────────────────────── */
.nib-foto-info {
padding: 2rem 2.5rem;
background: var(--photo-bg-5);
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Auteur rij */
.nib-foto-author {
display: flex;
align-items: center;
gap: 0.9rem;
}
.nib-foto-author-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--photo-bg-3);
cursor: pointer;
transition: transform 0.15s;
flex-shrink: 0;
}
.nib-foto-author-avatar:hover { transform: scale(1.06); }
.nib-foto-author-avatar-placeholder {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--photo-bg-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--photo-text);
font-size: 1.4rem;
border: 2px solid var(--photo-bg-2);
cursor: pointer;
flex-shrink: 0;
}
.nib-foto-author-label {
display: block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--photo-text);
opacity: 0.65;
}
.nib-foto-author-name {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--photo-text);
text-decoration: none;
cursor: pointer;
}
a.nib-foto-author-name:hover {
text-decoration: underline;
}
/* Stuur bericht knop (auteur-rij) */
.nib-foto-send-msg-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 1rem;
border-radius: 20px;
border: 1.5px solid var(--photo-text);
background: transparent;
color: var(--photo-text);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.15s, background 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.nib-foto-send-msg-btn:hover {
opacity: 1;
background: var(--photo-bg-3);
}
.nib-foto-send-msg-btn i {
font-size: 0.78rem;
}
@media (max-width: 600px) {
.nib-foto-send-msg-btn span { display: none; }
.nib-foto-send-msg-btn { padding: 0.4rem 0.65rem; }
}
/* Meta chips rij */
.nib-foto-meta-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.nib-foto-meta-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.75rem;
background: var(--photo-bg-3);
border-radius: 20px;
font-size: 0.82rem;
color: var(--photo-text);
}
.nib-foto-meta-chip i { font-size: 0.75rem; opacity: 0.8; }
.nib-foto-date-picker { margin-left: 0.25rem; }
/* Titel */
.nib-foto-title {
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 600;
color: var(--photo-text);
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
/* Inline edit knop */
.nib-foto-edit-btn {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1.5px solid var(--photo-text);
background: transparent;
color: var(--photo-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: right;
font-size: 0.75rem;
opacity: 0.6;
transition: opacity 0.15s, background 0.15s;
flex-shrink: 0;
}
.nib-foto-edit-btn:hover { opacity: 1; background: var(--photo-bg-3); }
/* Verfijning camera- en locatievelden in subblokken */
.photo-detail-subgrid .photo-exif-section-title,
.photo-detail-subgrid .photo-location-section-title {
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .72;
margin-bottom: .45rem;
}
.photo-detail-subgrid .photo-exif-spec,
.photo-detail-subgrid .photo-location-spec {
padding: .45rem .55rem;
border: 1px solid color-mix(in oklab, var(--photo-text, #0f2b3a), transparent 82%);
background: color-mix(in oklab, var(--photo-bg-5, #f7fbfd), white 25%);
}
.photo-detail-subgrid .photo-exif-spec-icon,
.photo-detail-subgrid .photo-location-spec-icon,
.photo-detail-subgrid .photo-location-coord-item > i {
display: none;
}
.photo-detail-subgrid .photo-exif-spec-label,
.photo-detail-subgrid .photo-location-spec-label,
.photo-detail-subgrid .photo-exif-label {
font-size: .68rem;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .66;
}
.photo-detail-subgrid .photo-exif-spec-value,
.photo-detail-subgrid .photo-location-spec-value,
.photo-detail-subgrid .photo-exif-value {
font-size: .85rem;
font-weight: 600;
}
.photo-location-inline-edit-row {
display: flex;
align-items: center;
gap: .45rem;
margin-top: .2rem;
}
.photo-location-inline-edit-row .photo-location-input {
width: 100%;
}
.photo-location-inline-edit-btn {
width: 1.65rem;
height: 1.65rem;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--photo-text, #0f2b3a), transparent 68%);
background: transparent;
color: var(--photo-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .72rem;
cursor: pointer;
opacity: .72;
}
.photo-location-inline-edit-btn:hover {
opacity: 1;
background: color-mix(in oklab, var(--photo-bg-3, #dbeaf2), white 40%);
}
/* Beschrijving */
.nib-foto-description-block {
border-top: 1px solid var(--photo-bg-3);
padding-top: 1.25rem;
}
.nib-foto-description-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--photo-text);
opacity: 0.65;
}
.nib-foto-description-text {
font-size: 1rem;
line-height: 1.75;
color: var(--photo-text);
}
.nib-foto-description-empty {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--photo-text);
opacity: 0.5;
font-size: 0.9rem;
font-style: italic;
}
/* ── Block body ───────────────────────────────────────── */
.nib-foto-block-body {
background: var(--photo-bg-5);
height: 100%;
}
.nib-foto-block-body-flush {
padding: 0;
}
/* ── Dier-blok wrapper ────────────────────────────────── */
.nib-foto-animal-wrapper {
position: relative;
}
.nib-foto-animal-actions {
display: flex;
justify-content: flex-end;
margin-bottom: 0.5rem;
}
/* ── Dier selecteren prompt ───────────────────────────── */
.nib-foto-animal-select {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: var(--photo-bg-4);
border-radius: 8px;
flex-wrap: wrap;
}
.nib-foto-animal-select i {
font-size: 1.5rem;
color: var(--photo-text);
flex-shrink: 0;
}
.nib-foto-animal-select strong {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--photo-text);
}
.nib-foto-animal-select p {
margin: 0.2rem 0 0;
font-size: 0.82rem;
color: var(--photo-text);
opacity: 0.7;
}
/* ── Skeleton blok ────────────────────────────────────── */
/* Gedeelde skeleton-header (matches nib-foto-block-header) */
.nib-foto-sk-header {
padding: 1.25rem 1.5rem;
background: var(--rz-base-300, #d4dce6);
display: flex;
flex-direction: column;
gap: 0.35rem;
border-bottom: 1px solid var(--rz-base-200, #e8edf2);
}
/* Blok 1: hero-afbeelding (16:9 → CLS-vrij) */
.nib-foto-sk-hero {
width: 100%;
aspect-ratio: 16 / 9;
}
/* Blok 1: info-sectie (matches .nib-foto-info) */
.nib-foto-sk-info {
padding: 2rem 2.5rem;
background: var(--rz-base-100, #f4f7fa);
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Author-rij (matches .nib-foto-author) */
.nib-foto-sk-author {
display: flex;
align-items: center;
gap: 0.9rem;
}
.nib-foto-sk-avatar {
width: 52px;
height: 52px;
border-radius: 50% !important;
flex-shrink: 0;
}
/* Meta-chips rij (matches .nib-foto-meta-row) */
.nib-foto-sk-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.nib-foto-sk-chip {
height: 1.65rem;
width: 7rem;
border-radius: 20px !important;
}
/* Beschrijving-sectie */
.nib-foto-sk-desc {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding-top: 1.25rem;
border-top: 1px solid var(--rz-base-300, #d4dce6);
}
/* Blok 2+3: skeleton-card wrapper */
.nib-foto-skeleton-card {
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* Blok 2+3: spec-items grid (matches photo-exif-specs-grid / photo-location-specs-grid) */
.nib-foto-sk-card-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
padding: 1.25rem;
background: var(--rz-base-100, #f4f7fa);
}
.nib-foto-sk-spec {
height: 3.6rem;
border-radius: 8px !important;
}
/* Responsive */
@media (max-width: 768px) {
.nib-foto-sk-info  { padding: 1.25rem 1rem; }
.nib-foto-sk-hero  { aspect-ratio: 4 / 3; }
.nib-foto-sk-card-body { grid-template-columns: 1fr; }
}
/* ── Groepen op foto-detail pagina ────────────────────────
Kleur #2b8a6e (NIB-groen) — zelfde als secondary thema.
Dezelfde aanpak als nib-foto-coll-block.
─────────────────────────────────────────────────────── */
.nib-foto-groups-block {
--gc-base:   #2b8a6e;
--gc-dark:   color-mix(in oklab, #2b8a6e, black 18%);
--gc-mid:    color-mix(in oklab, #2b8a6e, white 62%);
--gc-light:  color-mix(in oklab, #2b8a6e, white 86%);
--gc-border: color-mix(in oklab, #2b8a6e, white 52%);
--gc-text:   color-mix(in oklab, #2b8a6e, black 18%);
--gc-text-inv: #fff;
--photo-bg-4:        var(--gc-mid);
--photo-bg-5:        var(--gc-light);
--photo-bg-3:        var(--gc-border);
--photo-text:        var(--gc-text);
--photo-text-accent: color-mix(in oklab, #2b8a6e, white 32%);
}
.rz-material-dark .nib-foto-groups-block {
--gc-dark:   color-mix(in oklab, #2b8a6e, black 28%);
--gc-mid:    color-mix(in oklab, #2b8a6e, black 52%);
--gc-light:  color-mix(in oklab, #2b8a6e, black 68%);
--gc-border: color-mix(in oklab, #2b8a6e, black 42%);
--gc-text:   color-mix(in oklab, #2b8a6e, white 82%);
--gc-text-inv: #fff;
}
/* De chip-kleuren in de GroupSelector meekleuren */
.nib-foto-groups-block .nib-group-chip-active {
background: color-mix(in oklab, #2b8a6e, transparent 82%);
border-color: #2b8a6e;
color: var(--gc-text);
}
.nib-foto-groups-block .nib-group-chip:hover:not(:disabled) {
background: color-mix(in oklab, #2b8a6e, transparent 88%);
border-color: #2b8a6e;
}
/* ── Collecties op foto-detail pagina ─────────────────────
Kleur #075082 (NIB-blauw) — zelfde als collectiepagina's.
Variabelen worden direct op de component-classes gezet
zodat dark-mode-overrides altijd werken.
─────────────────────────────────────────────────────── */
/* ── Variabelen: licht thema ──────────────────────────── */
.nib-foto-coll-block,
.nib-foto-coll-grid,
.nib-foto-coll-card {
--cc-base:   #075082;
--cc-dark:   color-mix(in oklab, #075082, black 18%);
--cc-mid:    color-mix(in oklab, #075082, white 62%);
--cc-light:  color-mix(in oklab, #075082, white 86%);
--cc-border: color-mix(in oklab, #075082, white 52%);
--cc-text:   color-mix(in oklab, #075082, black 18%);
--cc-text-inv: #fff;
}
/* ── Variabelen: donker thema ─────────────────────────── */
.rz-material-dark .nib-foto-coll-block,
.rz-material-dark .nib-foto-coll-grid,
.rz-material-dark .nib-foto-coll-card {
--cc-dark:   color-mix(in oklab, #075082, black 28%);
--cc-mid:    color-mix(in oklab, #075082, black 52%);
--cc-light:  color-mix(in oklab, #075082, black 68%);
--cc-border: color-mix(in oklab, #075082, black 42%);
--cc-text:   color-mix(in oklab, #075082, white 82%);
--cc-text-inv: #fff;
}
/* Blok-wrapper: geeft nib-foto-block-header de collectiekleur */
.nib-foto-coll-block {
--photo-color:       #075082;
--photo-bg-4:        var(--cc-mid);
--photo-bg-3:        var(--cc-border);
--photo-text:        var(--cc-text);
--photo-text-accent: color-mix(in oklab, #075082, white 32%);
}
/* "Alle collecties" link in blok-header */
.nib-foto-coll-all-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.15rem;
background: var(--cc-dark);
color: var(--cc-text-inv);
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.15s;
}
.nib-foto-coll-all-link:hover { opacity: 0.82; color: var(--cc-text-inv); text-decoration: none; }
.nib-foto-coll-all-link i { font-size: 0.72rem; transition: transform 0.15s; }
.nib-foto-coll-all-link:hover i { transform: translateX(3px); }
/* Grid: auto-fill, minimaal 260px per kaart */
.nib-foto-coll-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1px;
background: var(--cc-light);
}
/* ── Card ─────────────────────────────────────────────── */
.nib-foto-coll-card {
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
background: var(--rz-panel-background-color);
transition: box-shadow 0.18s, transform 0.18s;
}
.nib-foto-coll-card:hover {
}
/* ── Card header: titel + "Bekijk"-knop ───────────────── */
.nib-foto-coll-card-header {
display: flex;
align-items: center;        /* verticaal centreren */
gap: 0.75rem;
flex-wrap: nowrap;          /* GEEN wrap → gelijke kaardhoogte */
padding: 0.9rem 1.1rem;
background: var(--cc-mid);
border-bottom: 1px solid var(--cc-border);
min-height: 4rem;           /* vaste minimumhoogte → gelijke cards */
}
/* Linker deel: icon + titel + sub */
.nib-foto-coll-card-header .nib-foto-block-header-left {
flex: 1;
min-width: 0;               /* nodig voor text-overflow op kind */
overflow: hidden;
}
/* Titel: truncate bij overloop */
.nib-foto-coll-card-header .nib-foto-block-title {
font-size: 0.95rem;
color: var(--cc-text);
margin: 0 0 0.1rem;
white-space: nowrap;
overflow: hidden;
/* text-overflow werkt niet direct op flex containers met text-nodes;
de tekst zit in .nib-foto-coll-title-text */
}
.nib-foto-coll-title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Beschrijving: maximaal 1 regel */
.nib-foto-coll-card-header .nib-foto-block-sub {
color: var(--cc-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* "Bekijk" knop rechts */
.nib-foto-coll-card-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.85rem;
background: var(--cc-dark);
color: var(--cc-text-inv);
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: opacity 0.15s;
}
.nib-foto-coll-card-link:hover { opacity: 0.82; color: var(--cc-text-inv); text-decoration: none; }
.nib-foto-coll-card-link i { font-size: 0.68rem; transition: transform 0.15s; }
.nib-foto-coll-card-link:hover i { transform: translateX(3px); }
/* ── Donut "hero" ─────────────────────────────────────── */
.nib-foto-coll-donut-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.1rem;
padding: 2.25rem 1.5rem 2rem;
background: var(--cc-dark);
}
.nib-foto-coll-donut-wrap {
position: relative;
width: 164px;
height: 164px;
}
/* ── Sticky action-bar ─────────────────────────────────── */
@keyframes foto-bar-in {
from { transform: translateY(100%); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}
.foto-action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1.5rem;
background: color-mix(in oklab, var(--rz-base-background-color), transparent 12%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--rz-border-color);
box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
animation: foto-bar-in 0.3s cubic-bezier(.4,0,.2,1) both;
}
/* Info-sectie links */
.foto-action-bar-info {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.foto-action-bar-status {
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.foto-action-bar-status-concept    { background: rgba(202,138,4,0.15); color: #92640a; }
.foto-action-bar-status-ingediend  { background: rgba(37,99,235,0.12);  color: #1d4ed8; }
.foto-action-bar-status-goedgekeurd{ background: rgba(22,163,74,0.12);  color: #15803d; }
.rz-material-dark .foto-action-bar-status-concept    { background: rgba(202,138,4,0.2);  color: #fcd34d; }
.rz-material-dark .foto-action-bar-status-ingediend  { background: rgba(96,165,250,0.15); color: #93c5fd; }
.rz-material-dark .foto-action-bar-status-goedgekeurd{ background: rgba(74,222,128,0.15); color: #86efac; }
.foto-action-bar-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--rz-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Knoppen rechts */
.foto-action-bar-actions {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}
.foto-action-bar-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.52rem 1.1rem;
border-radius: 8px;
border: none;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
line-height: 1;
}
.foto-action-bar-btn:hover {
transform: translateY(-1px);
}
.foto-action-bar-btn-publish {
background: var(--rz-primary);
color: #fff;
box-shadow: 0 2px 8px color-mix(in oklab, var(--rz-primary), transparent 55%);
}
.foto-action-bar-btn-publish:hover {
background: color-mix(in oklab, var(--rz-primary), black 10%);
box-shadow: 0 4px 14px color-mix(in oklab, var(--rz-primary), transparent 40%);
}
.foto-action-bar-btn-delete {
background: transparent;
color: var(--rz-danger, #dc2626);
border: 1px solid color-mix(in oklab, var(--rz-danger, #dc2626), transparent 55%);
}
.foto-action-bar-btn-delete:hover {
background: color-mix(in oklab, var(--rz-danger, #dc2626), transparent 88%);
}
.foto-action-bar-btn-unpublish {
background: transparent;
color: var(--rz-warning, #b45309);
border: 1px solid color-mix(in oklab, var(--rz-warning, #b45309), transparent 55%);
}
.foto-action-bar-btn-unpublish:hover {
background: color-mix(in oklab, var(--rz-warning, #b45309), transparent 88%);
}
/* Ruimte voor de sticky bar onderaan de pagina */
.foto-detail-page {
padding-bottom: 4.5rem;
}
/* Responsive: icoon-only op kleine schermen */
@media (max-width: 560px) {
.foto-action-bar {
padding: 0.6rem 1rem;
}
.foto-action-bar-info {
flex: 1;
}
.foto-action-bar-btn span {
display: none;
}
.foto-action-bar-btn {
width: 2.4rem;
height: 2.4rem;
padding: 0;
border-radius: 50%;
justify-content: center;
}
}
.nib-foto-coll-donut-svg {
width: 164px;
height: 164px;
transform: rotate(-90deg);
}
.nib-foto-coll-donut-bg {
fill: none;
stroke: rgba(255,255,255,0.18);
stroke-width: 2.5;
}
.nib-foto-coll-donut-fill {
fill: none;
stroke: #fff;
stroke-width: 2.5;
stroke-linecap: round;
transition: stroke-dasharray 0.9s ease;
}
.nib-foto-coll-donut-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
pointer-events: none;
}
.nib-foto-coll-donut-pct {
font-size: 2.6rem;
font-weight: 600;
color: #fff;
line-height: 1;
}
.nib-foto-coll-donut-sub {
font-size: 0.68rem;
font-weight: 600;
color: rgba(255,255,255,0.62);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.nib-foto-coll-donut-legend {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.nib-foto-coll-legend-filled {
font-size: 0.9rem;
font-weight: 600;
color: #fff;
}
.nib-foto-coll-legend-total {
font-size: 0.76rem;
color: rgba(255,255,255,0.62);
}
/* ── Info sectie (meta-chips) ───────────────────────────── */
.nib-foto-coll-info {
padding: 1rem 1.1rem;
background: var(--cc-light);
}
.nib-foto-coll-chip {
--photo-bg-3: var(--cc-border);
--photo-text: var(--cc-text);
}
/* Responsive */
@media (max-width: 640px) {
.nib-foto-coll-grid       { grid-template-columns: 1fr; gap: 0.75rem; }
.nib-foto-coll-donut-wrap { width: 140px; height: 140px; }
.nib-foto-coll-donut-svg  { width: 140px; height: 140px; }
.nib-foto-coll-donut-pct  { font-size: 2.2rem; }
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
.nib-foto-info { padding: 1.25rem 1rem; }
.nib-foto-block-header { padding: 1rem; }
.nib-foto-block-body { padding: 1rem; }
.nib-foto-hero-img { max-height: 60vw; }
}
/* ── Foto detail: hoofd-layout ────────────────────────── */
.photo-detail-main > .nib-gd-block-header {
padding: 0;
}
.photo-detail-head-grid {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
.photo-detail-head-left {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 2rem;
}
.photo-detail-head-right {
min-height: 320px;
background: color-mix(in oklab, var(--group-color, #075082), white 20%);
position: relative;
overflow: hidden;
}
.photo-detail-hero-trigger {
display: block;
width: 100%;
height: 100%;
min-height: 320px;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.photo-detail-hero-image {
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
display: block;
}
.photo-detail-author-row {
display: flex;
align-items: center;
gap: .55rem;
flex-wrap: wrap;
}
.photo-detail-author-label {
font-size: .72rem;
letter-spacing: .08em;
opacity: .65;
}
.photo-detail-author-link {
font-weight: 600;
color: var(--gc-text);
text-decoration: none;
}
.photo-detail-inline-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-right: .45rem;
margin-bottom: .35rem;
padding: .2rem .55rem;
background: color-mix(in oklab, var(--group-color, #075082), white 72%);
font-size: .76rem;
border-radius: 999px;
color: var(--gc-text);
}
.photo-detail-score-chip {
background: color-mix(in oklab, #d97706, white 78%);
color: #92580a;
font-weight: 700;
}
.photo-detail-score-chip .rzi {
font-size: 0.8rem;
color: #d97706;
}
.rz-material-dark .photo-detail-score-chip {
background: rgba(217, 119, 6, 0.18);
color: #fbbf24;
}
.rz-material-dark .photo-detail-score-chip .rzi {
color: #fbbf24;
}
.photo-detail-like-chip {
background: color-mix(in oklab, #e84646, white 82%);
color: #b03030;
font-weight: 700;
}
.photo-detail-like-chip .rzi {
font-size: 0.8rem;
color: #e84646;
}
.rz-material-dark .photo-detail-like-chip {
background: rgba(232, 70, 70, 0.15);
color: #f87171;
}
.rz-material-dark .photo-detail-like-chip .rzi {
color: #f87171;
}
.photo-edit-btn-round {
width: 1.95rem;
min-width: 1.95rem;
height: 1.95rem;
border-radius: 999px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1 !important;
}
.photo-detail-summary-wrap {
margin-top: 1rem;
display: flex;
align-items: flex-start;
gap: .5rem;
}
.photo-detail-summary-wrap .photo-detail-summary {
margin-top: 0;
flex: 1;
}
.photo-detail-summary {
font-size: 1.1rem;
color: var(--_title);
line-height: 1.2;
margin-top: 1rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
/* ── Type-selector blok ───────────────────────────────── */
.photo-type-body {
padding: 0;
background: color-mix(in oklab, var(--rz-primary, #075082), white 75%);
}
.photo-type-split {
display: grid;
grid-template-columns: minmax(200px, 30%) 1fr;
}
.photo-type-split-left {
display: flex;
align-items: start;
padding: 24px;
}
.photo-type-label-block {
width: 100%;
}
.photo-type-section-label {
display: block;
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: color-mix(in oklab, var(--rz-primary, #075082), black 20%);
opacity: .75;
margin-bottom: .45rem;
}
.photo-type-divider {
border: none;
border-top: 1px solid color-mix(in oklab, var(--rz-primary, #075082), white 55%);
margin: 0 0 .75rem 0;
}
.rz-material-dark .photo-type-section-label {
color: color-mix(in oklab, var(--rz-primary, #075082), white 60%);
opacity: .9;
}
.rz-material-dark .photo-type-divider {
border-top-color: color-mix(in oklab, var(--rz-primary, #075082), black 30%);
}
.photo-type-split-right {
padding: .85rem;
}
.photo-type-intro {
margin: 0;
font-size: .875rem;
font-weight: 500;
color: color-mix(in oklab, var(--rz-primary, #075082), black 20%);
opacity: .85;
line-height: 1.55;
}
.rz-material-dark .photo-type-intro {
color: color-mix(in oklab, var(--rz-primary, #075082), white 60%);
opacity: .9;
}
/* ── Subgrid (instellingen + kaart) ───────────────────── */
.photo-detail-subgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
align-items: stretch;
}
.photo-detail-settings-stack {
display: flex;
flex-direction: column;
}
.photo-detail-map-col {
display: flex;
flex-direction: column;
min-height: 0;
}
.photo-detail-map-col .photo-detail-map-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
padding: 0;
}
.photo-detail-map-col .photo-location-card,
.photo-detail-map-col .photo-location-content,
.photo-detail-map-col .photo-location-map-only {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.photo-detail-map-col .photo-location-map-only > * {
flex: 1 1 auto;
min-height: 0;
}
@media (max-width: 600px) {
.photo-type-split {
grid-template-columns: 1fr;
}
.photo-type-split-left {
padding: .85rem 1rem .5rem;
}
.photo-type-split-right {
padding: .5rem .85rem .85rem;
}
}
@media (max-width: 900px) {
.photo-detail-head-grid {
grid-template-columns: 1fr;
}
.photo-detail-head-left {
padding: 1.1rem 1rem;
}
.photo-detail-head-right,
.photo-detail-hero-trigger,
.photo-detail-hero-image {
min-height: 220px;
}
.photo-detail-subgrid {
grid-template-columns: 1fr;
}
.photo-detail-map-col,
.photo-detail-map-col .photo-detail-map-body,
.photo-detail-map-col .photo-location-card,
.photo-detail-map-col .photo-location-content,
.photo-detail-map-col .photo-location-map-only {
height: 600px;
}
.photo-detail-map-col .photo-detail-map-body {
padding: 0;
}
}
/* ── Score-specificatie dialog (fotokaart) ────────────── */
.nib-score-dialog {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.nib-score-dialog-total {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.nib-score-dialog-total .rzi {
font-size: 1.2rem;
color: #f6b500;
align-self: center;
}
.nib-score-dialog-total-num {
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: color-mix(in oklab, var(--rz-primary), black 20%);
}
.rz-material-dark .nib-score-dialog-total-num {
color: color-mix(in oklab, var(--rz-primary), white 60%);
}
.nib-score-dialog-total-max {
font-size: 0.8rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
}
.nib-score-dialog-community {
display: flex;
gap: 1.5rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in oklab, var(--rz-primary), white 78%);
font-size: 0.85rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
}
.nib-score-dialog-community .rzi {
font-size: 0.95rem;
margin-right: 0.2rem;
vertical-align: middle;
}
.rz-material-dark .nib-score-dialog-community {
border-top-color: color-mix(in oklab, var(--rz-primary), black 45%);
}
/* ── AI-kwaliteitsscore blok ──────────────────────────── */
.nib-foto-tech-block .nib-foto-block-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.nib-tech-score {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.75rem;
align-items: center;
}
/* Vervolgsecties (natuurwaarde, waardering) onder de technische score */
.nib-tech-score--nature,
.nib-tech-score--community {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in oklab, var(--rz-primary), white 78%);
}
.rz-material-dark .nib-tech-score--nature,
.rz-material-dark .nib-tech-score--community {
border-top-color: color-mix(in oklab, var(--rz-primary), black 45%);
}
/* Totaalscore-ring (waardering): goudtint i.p.v. de primaire kleur */
.nib-tech-score-ring--total {
--_c: #f6b500;
}
.nib-tech-score-ring--total .nib-tech-score-num {
color: color-mix(in oklab, #f6b500, black 25%);
}
.rz-material-dark .nib-tech-score-ring--total .nib-tech-score-num {
color: color-mix(in oklab, #f6b500, white 25%);
}
/* Sterren + likes onder de totaalscore */
.nib-foto-community-stats {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.nib-foto-community-stat {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.92rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-foto-community-stat .rzi {
font-size: 1.05rem;
color: #f6b500;
}
/* "Alleen voor jou zichtbaar"-label bij eigenaar-only AI-commentaar */
.nib-feedback-private {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.25rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
}
.nib-feedback-private .rzi {
font-size: 0.85rem;
}
/* Lege staat: nog geen waardering */
.nib-foto-no-waardering {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
}
.nib-foto-no-waardering .rzi {
font-size: 1.15rem;
color: color-mix(in oklab, #f6b500, white 25%);
}
/* AI-/uitlegnoot bij een score */
.nib-tech-score-note {
margin: 0.6rem 0 0;
display: flex;
gap: 0.4rem;
align-items: flex-start;
font-size: 0.78rem;
line-height: 1.45;
color: var(--rz-text-secondary-color);
}
.nib-tech-score-note .rzi {
font-size: 0.95rem;
flex-shrink: 0;
margin-top: 0.05rem;
color: color-mix(in oklab, var(--rz-primary), white 15%);
}
.nib-tech-score-total {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.nib-tech-score-caption {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--rz-text-secondary-color);
}
/* Totaalscore als ring */
.nib-tech-score-ring {
--_c: var(--rz-primary);
width: 116px;
height: 116px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.1rem;
background:
radial-gradient(closest-side, var(--rz-base-background-color) 73%, transparent 74% 100%),
conic-gradient(var(--_c) calc(var(--tech-pct, 0) * 1%), color-mix(in oklab, var(--_c), white 70%) 0);
}
.nib-tech-score-num {
font-size: 1.9rem;
font-weight: 600;
line-height: 1;
color: color-mix(in oklab, var(--rz-primary), black 25%);
}
.nib-tech-score-max {
font-size: 0.72rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
}
.nib-tech-score-detail {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
/* Deelscore-balken */
.nib-tech-bar {
display: grid;
grid-template-columns: 7.5rem 1fr 2.2rem;
align-items: center;
gap: 0.65rem;
}
.nib-tech-bar-label {
font-size: 0.82rem;
font-weight: 500;
color: var(--rz-text-color);
}
.nib-tech-bar-track {
height: 7px;
border-radius: 999px;
background: color-mix(in oklab, var(--group-color, #075082), white 80%);
overflow: hidden;
}
.nib-tech-bar-fill {
height: 100%;
border-radius: 999px;
background: var(--group-color, #075082);
transition: width 0.6s ease;
}
.nib-tech-bar-val {
font-size: 0.78rem;
font-weight: 600;
text-align: right;
color: color-mix(in oklab, var(--group-color, #075082), black 20%);
}
.nib-tech-score-feedback {
margin: 0.5rem 0 0;
display: flex;
gap: 0.45rem;
font-size: 0.85rem;
line-height: 1.5;
font-style: italic;
color: var(--rz-text-secondary-color);
}
.nib-tech-score-feedback .rzi {
font-size: 0.95rem;
color: var(--rz-primary);
flex-shrink: 0;
margin-top: 0.1rem;
}
.rz-material-dark .nib-tech-score-num {
color: color-mix(in oklab, var(--rz-primary), white 65%);
}
.rz-material-dark .nib-tech-bar-track {
background: color-mix(in oklab, var(--group-color, #075082), black 45%);
}
.rz-material-dark .nib-tech-bar-val {
color: color-mix(in oklab, var(--group-color, #075082), white 55%);
}
@media (max-width: 600px) {
.nib-tech-score {
grid-template-columns: 1fr;
gap: 1.1rem;
justify-items: center;
}
.nib-tech-score-detail {
width: 100%;
}
.nib-tech-bar {
grid-template-columns: 6.5rem 1fr 2rem;
}
}
/* ── Groepen overzicht ─────────────────────────────────── */
.nib-groups-block {
--photo-color: var(--group-color, #c0622a);
--photo-bg-1: color-mix(in oklab, var(--photo-color), black  5%);
--photo-bg-3: color-mix(in oklab, var(--photo-color), white 55%);
--photo-bg-5: color-mix(in oklab, var(--photo-color), white 92%);
--photo-text: color-mix(in oklab, var(--photo-color), black 10%);
background: var(--photo-bg-5);
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-groups-block-content {
/* no extra padding – nib-coll-grid handles its own 1px gap */
}
/* ── Groep kaart (photo-card stijl, zonder foto) ────── */
.nib-group-card {
/* Kleur-palet afgeleid van de groepskleur */
--gc-light:  color-mix(in oklab, var(--gc, #c0622a), white 82%);
--gc-base:   color-mix(in oklab, var(--gc, #c0622a), white 68%);
--gc-dark:   color-mix(in oklab, var(--gc, #c0622a), black 28%);
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
cursor: pointer;
border-radius: 0;
}
/* Gekleurde achtergrond i.p.v. foto */
.nib-group-card-surface {
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
var(--gc-light) 0%,
var(--gc-base)  100%
);
transition: filter 0.3s ease;
}
.nib-group-card:hover .nib-group-card-surface {
filter: brightness(0.96);
}
/* Type chip linksboven — zelfde als photo-card-chip */
.nib-group-card-chip {
position: absolute;
top: 0.75rem;
left: 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.6rem;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--gc-dark);
background: rgba(255,255,255,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 2;
}
.nib-group-card-chip i {
font-size: 0.6rem;
opacity: 0.75;
}
/* Icoon centraal */
.nib-group-card-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
}
.nib-group-card-icon i {
font-size: 3rem;
color: rgba(255,255,255,0.3);
transition: transform 0.4s ease, color 0.3s ease;
}
.nib-group-card:hover .nib-group-card-icon i {
transform: scale(1.08);
color: rgba(255,255,255,0.42);
}
/* Info-balk onderin — zelfde opbouw als photo-card-info */
.nib-group-card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 0.9rem 0.8rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
z-index: 2;
background: color-mix(in srgb,
var(--gc-dark) 68%,
transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.nib-group-card-name {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.nib-group-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.7rem;
font-size: 0.72rem;
color: rgba(255,255,255,0.78);
}
.nib-group-card-meta i {
font-size: 0.62rem;
opacity: 0.7;
margin-right: 0.22rem;
}
/* Dark mode */
.rz-material-dark .nib-group-card {
--gc-light: color-mix(in oklab, var(--gc, #c0622a), black 32%);
--gc-base:  color-mix(in oklab, var(--gc, #c0622a), black 48%);
--gc-dark:  color-mix(in oklab, var(--gc, #c0622a), black 62%);
}
.rz-material-dark .nib-group-card-chip {
background: rgba(0,0,0,0.4);
color: rgba(255,255,255,0.8);
}
/* ── Skeleton ─────────────────────────────────────────── */
.nib-group-card-sk {
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-color);
}
.nib-group-card-sk-header {
height: 3rem;
}
.nib-group-card-sk-body {
padding: 0.85rem 1rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* ── Dark mode ────────────────────────────────────────── */
.rz-material-dark .nib-groups-block {
--photo-bg-5: color-mix(in oklab, var(--photo-color, #2f7d32), black 58%);
}
/* ── NibCard map-hero variant (Gebied groepen) ────────── */
.nib-card--with-map .nib-card-hero {
padding: 0;
height: 200px;
display: block;
overflow: hidden;
}
.nib-group-card-map-hero {
width: 100%;
height: 100%;
}
.nib-group-card-map-hero .nib-groupmap {
height: 100%;
border-radius: 0;
}
/* ── Groep detail ─────────────────────────────────────── */
.nib-gd-hero {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 2rem 2.5rem;
border-radius: 12px;
background: color-mix(in oklab, var(--group-color, #075082), white 82%);
position: relative;
overflow: hidden;
flex-wrap: wrap;
}
.rz-material-dark .nib-gd-hero {
background: color-mix(in oklab, var(--group-color, #075082), black 60%);
}
.nib-gd-hero-sk {
height: 10rem;
border-radius: 12px;
}
.nib-gd-hero-icon {
width: 3.4rem;
height: 3.4rem;
border-radius: 14px;
background: var(--group-color, var(--rz-primary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.nib-gd-hero-content {
flex: 1;
min-width: 0;
}
.nib-gd-hero-type {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--group-color, var(--rz-primary));
opacity: 0.75;
}
.nib-gd-hero-title {
margin: 0.2rem 0 0.6rem;
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 600;
line-height: 1.15;
color: var(--rz-text-color);
}
.nib-gd-hero-stats {
display: flex;
gap: 1rem;
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
}
.nib-gd-hero-stats i {
margin-right: 0.3rem;
opacity: 0.6;
}
.nib-gd-hero-tags {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
align-self: flex-start;
margin-left: auto;
}
.nib-gd-tag {
padding: 0.2rem 0.65rem;
border-radius: 14px;
font-size: 0.72rem;
font-weight: 600;
background: color-mix(in oklab, var(--group-color, var(--rz-primary)), transparent 72%);
color: var(--group-color, var(--rz-primary));
}
/* Sections */
.nib-gd-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.nib-gd-section-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--rz-text-color);
}
.nib-gd-section-title i {
font-size: 0.9rem;
opacity: 0.55;
}
.nib-gd-section-count {
font-size: 0.72rem;
font-weight: 600;
padding: 0.1rem 0.5rem;
border-radius: 10px;
background: var(--rz-base-300, rgba(0,0,0,0.06));
color: var(--rz-text-secondary-color);
}
.nib-gd-description {
font-size: 0.9rem;
line-height: 1.7;
color: var(--rz-text-color);
max-width: 72ch;
}
.nib-gd-empty {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--rz-text-secondary-color);
padding: 1.5rem 0;
}
.nib-gd-empty i {
opacity: 0.35;
}
/* Members */
.nib-gd-members {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.5rem;
}
.nib-gd-member {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.85rem;
border-radius: 8px;
border: 1px solid var(--rz-border-color);
transition: background 0.12s;
}
.nib-gd-member:hover {
background: var(--rz-base-200, rgba(0,0,0,0.03));
}
.nib-gd-member-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--rz-base-300, rgba(0,0,0,0.06));
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
flex-shrink: 0;
}
.nib-gd-member-info {
flex: 1;
min-width: 0;
}
.nib-gd-member-name {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--rz-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nib-gd-member-role {
font-size: 0.68rem;
color: var(--rz-text-secondary-color);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.nib-gd-member-date {
font-size: 0.72rem;
color: var(--rz-text-secondary-color);
opacity: 0.65;
flex-shrink: 0;
}
/* Responsive */
@media (max-width: 600px) {
.nib-gd-hero {
padding: 1.5rem;
gap: 1rem;
}
.nib-gd-hero-tags {
margin-left: 0;
width: 100%;
}
.nib-groups-grid {
grid-template-columns: 1fr;
}
}
.nib-gd-section-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.nib-groupmap {
width: 100%;
height: 380px;
border-radius: 0;
overflow: hidden;
border: none;
z-index: 0;
}
/* Kaart direct als kind van een blok: geen extra border-radius */
.nib-gd-block--sub > .nib-groupmap {
border-radius: 0;
}
.nib-gd-map-compact {
max-width: 50%;
min-width: 320px;
}
.nib-gd-map-compact .nib-groupmap {
height: 220px;
}
.nib-gd-map-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.nib-gd-map-placeholder {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--rz-text-secondary-color);
font-size: 0.84rem;
padding: 0.4rem 0;
}
.nib-gd-obs-list {
display: flex;
flex-direction: column;
}
.nib-gd-obs-day-list {
display: flex;
flex-direction: column;
}
.nib-gd-obs-day-group {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--rz-border-color);
}
.nib-gd-obs-day-group:last-child {
border-bottom: none;
}
.nib-gd-obs-day-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1.5rem;
background: color-mix(in oklab, var(--group-color, #c0622a) 6%, var(--rz-panel-background-color));
border-bottom: 1px solid var(--rz-border-color);
}
.nib-gd-obs-day-label {
font-size: 0.82rem;
font-weight: 600;
text-transform: capitalize;
color: var(--gc-text);
}
.nib-gd-obs-day-count {
font-size: 0.74rem;
color: var(--rz-text-secondary-color);
}
.nib-gd-obs-species-group {
border-bottom: 1px solid var(--rz-border-color);
}
.nib-gd-obs-species-group:last-child {
border-bottom: none;
}
.nib-gd-obs-species-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 1.5rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-gd-obs-species-summary::-webkit-details-marker {
display: none;
}
.nib-gd-obs-species-summary::before {
content: '/f054';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.65rem;
opacity: 0.6;
transition: transform 0.15s;
}
.nib-gd-obs-species-group[open] > .nib-gd-obs-species-summary::before {
transform: rotate(90deg);
}
.nib-gd-obs-species-name {
flex: 1;
}
.nib-gd-obs-species-count {
font-size: 0.72rem;
color: var(--rz-text-secondary-color);
}
.nib-gd-obs-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--rz-border-color);
}
.nib-gd-obs-item:last-child {
border-bottom: none;
}
.nib-gd-obs-left {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.nib-gd-obs-name {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-gd-obs-link {
color: var(--rz-text-color);
text-decoration: none;
}
.nib-gd-obs-link:hover {
color: var(--gc-text);
text-decoration: underline;
}
.nib-gd-obs-count {
font-size: 0.75rem;
font-weight: 500;
color: var(--rz-text-secondary-color);
}
.nib-gd-obs-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.76rem;
color: var(--rz-text-secondary-color);
}
.nib-gd-obs-meta i,
.nib-gd-obs-date i {
margin-right: 0.2rem;
opacity: 0.65;
}
.nib-gd-obs-date {
flex-shrink: 0;
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
white-space: nowrap;
}
@media (max-width: 700px) {
.nib-gd-obs-item {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.nib-gd-obs-date {
white-space: normal;
}
}
.nib-gd-edit-btn {
margin-left: 0.45rem;
border: none;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: color-mix(in oklab, var(--rz-primary), transparent 85%);
color: var(--rz-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .12s, background .12s;
}
.nib-gd-edit-btn:hover {
transform: translateY(-1px);
background: color-mix(in oklab, var(--rz-primary), transparent 78%);
}
/* ── Variant voor op lichte header (light theme) ─────── */
.nib-gd-edit-btn-inv {
background: color-mix(in oklab, var(--group-color, #c0622a), white 55%);
color: var(--gc-text);
border: 1px solid var(--gc-border);
}
.nib-gd-edit-btn-inv:hover {
background: color-mix(in oklab, var(--group-color, #c0622a), white 45%);
}
/* Op donker thema: wit */
.rz-material-dark .nib-gd-edit-btn-inv {
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.3);
}
.rz-material-dark .nib-gd-edit-btn-inv:hover {
background: rgba(255,255,255,0.28);
color: #fff;
}
/* ── Groep detail: header block (nieuw design) ─────────
Twee varianten:
nib-gd-block--main  → hoofdblok, H1, grote header (SEO)
nib-gd-block--sub   → subblok, H2, kleinere compactere header
─────────────────────────────────────────────────────── */
.nib-gd-block {
--gc-dark:   color-mix(in oklab, var(--group-color, #c0622a), black 18%);
--gc-mid:    color-mix(in oklab, var(--group-color, #c0622a), white 65%);
--gc-light:  color-mix(in oklab, var(--group-color, #c0622a), white 50%);
--gc-border: color-mix(in oklab, var(--group-color, #c0622a), white 52%);
--gc-text:   color-mix(in oklab, var(--group-color, #c0622a), black 18%);
border-radius: 0;
overflow: hidden;
box-shadow: none;
background: var(--rz-panel-background-color);
}
.rz-material-dark .nib-gd-block {
--gc-dark:   color-mix(in oklab, var(--group-color, #c0622a), black 25%);
--gc-mid:    color-mix(in oklab, var(--group-color, #c0622a), black 70%);
--gc-light:  color-mix(in oklab, var(--group-color, #c0622a), black 40%);
--gc-border: color-mix(in oklab, var(--group-color, #c0622a), black 70%);
--gc-text:   color-mix(in oklab, var(--group-color, #c0622a), white 82%);
}
/* ── Gedeelde header-layout ──────────────────────────── */
.nib-gd-block-header {
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
background: var(--gc-light);
}
/* ── Hoofdblok (H1) — grote prominente header ─────────── */
.nib-gd-block--main > .nib-gd-block-header {
padding: 1.5rem 2rem;
}
.nib-gd-block--main .nib-gd-block-icon {
width: 3.4rem;
height: 3.4rem;
border-radius: 14px;
font-size: 1.3rem;
}
.nib-gd-block--main .nib-gd-block-title {
font-size: clamp(1.4rem, 3vw, 2rem);
}
/* ── Subblok (H2) — kleinere compacte header ─────────── */
.nib-gd-block--sub > .nib-gd-block-header {
padding: 1rem 1.5rem;
gap: 0.85rem;
}
.nib-gd-block--sub .nib-gd-block-icon {
width: 2.6rem;
height: 2.6rem;
border-radius: 10px;
font-size: 1rem;
}
.nib-gd-block--sub .nib-gd-block-title {
font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.nib-gd-block--sub .nib-gd-block-type {
font-size: 0.62rem;
}
.nib-gd-block--sub .nib-gd-block-desc {
font-size: 0.82rem;
}
/* ── Nieuwe subblok-header structuur (herbruikbaar) ───── */
.nib-subblock-header {
padding: 0 !important;
gap: 0 !important;
align-items: stretch;
flex-wrap: nowrap;
}
.nib-subblock-header--main .nib-subblock-strip {
width: 4.1rem;
min-width: 4.1rem;
font-size: 1.2rem;
}
.nib-subblock-header--main .nib-subblock-main {
padding: 1.2rem 1.6rem;
}
.nib-subblock-header--main .nib-subblock-subtitle {
font-size: .86rem;
}
.nib-subblock-strip {
width: 3.25rem;
min-width: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: color-mix(in oklab, var(--group-color, #c0622a), black 16%);
}
.nib-subblock-main {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .85rem 1rem;
}
.nib-subblock-title-wrap {
min-width: 0;
}
.nib-subblock-subtitle {
margin: .25rem 0 0;
font-size: .78rem;
opacity: .72;
color: var(--gc-text);
}
.nib-subblock-action {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .78rem;
font-weight: 600;
color: var(--gc-text);
text-decoration: none;
}
.nib-subblock-action:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.nib-subblock-subheader {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
flex-wrap: wrap;
padding: .6rem 1rem;
background: color-mix(in oklab, var(--gc-mid), var(--gc-light) 35%);
border-top: 1px solid var(--gc-border);
color: var(--gc-text);
font-size: .78rem;
}
.rz-material-dark .nib-subblock-strip {
background: color-mix(in oklab, var(--group-color, #c0622a), black 36%);
}
.rz-material-dark .nib-subblock-subheader {
background: color-mix(in oklab, var(--gc-dark), var(--gc-mid) 45%);
}
@media (max-width: 600px) {
.nib-subblock-strip {
width: 2.8rem;
min-width: 2.8rem;
}
.nib-subblock-main {
padding: .72rem .8rem;
gap: .6rem;
}
.nib-subblock-header--main .nib-subblock-strip {
width: 3.2rem;
min-width: 3.2rem;
font-size: 1rem;
}
.nib-subblock-header--main .nib-subblock-main {
padding: .95rem 1rem;
}
}
/* ── Gedeelde icon-stijl ─────────────────────────────── */
.nib-gd-block-icon {
background: color-mix(in oklab, var(--group-color, #c0622a), white 30%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nib-gd-block-header-left {
flex: 1;
min-width: 0;
}
.nib-gd-block-type {
display: block;
font-size: 0.68rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gc-text);
opacity: 0.65;
margin-bottom: 0.15rem;
}
.nib-gd-block-title {
margin: 0;
font-weight: 500;
line-height: 1.15;
color: var(--gc-text);
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Beschrijving in de header */
.nib-gd-block-desc {
margin: 0.4rem 0 0;
font-size: 0.88rem;
line-height: 1.55;
color: var(--gc-text);
opacity: 0.72;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 75%;
}
/* ── Footer ──────────────────────────────────────────── */
.nib-gd-block-footer {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 2rem;
background: var(--gc-light);
border-top: 1px solid var(--gc-border);
font-size: 0.82rem;
color: var(--gc-text);
}
.nib-gd-block--sub .nib-gd-block-footer {
padding: 0.6rem 1.5rem;
}
.nib-gd-block-footer a {
color: var(--gc-text);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: gap 0.15s;
}
.nib-gd-block-footer a:hover {
gap: 0.55rem;
text-decoration: none;
}
.nib-gd-block-footer a i {
font-size: 0.72rem;
}
/* ── Dark theme ──────────────────────────────────────── */
.rz-material-dark .nib-gd-block-header {
background: var(--gc-dark);
}
.rz-material-dark .nib-gd-block-footer {
background: var(--gc-dark);
}
.rz-material-dark .nib-gd-block-icon {
background: rgba(255,255,255,0.18);
color: #fff;
}
.rz-material-dark .nib-gd-block-type {
color: rgba(255,255,255,0.6);
opacity: 1;
}
.rz-material-dark .nib-gd-block-title {
color: #fff;
}
.rz-material-dark .nib-gd-block-desc {
color: rgba(255,255,255,0.72);
opacity: 1;
}
/* Alle block-level elementen uit de rich-text editor platslaan */
.nib-gd-block-desc p,
.nib-gd-block-desc ul,
.nib-gd-block-desc ol {
display: inline;
margin: 0;
padding: 0;
}
.nib-gd-block-desc li::before { content: ' · '; }
.nib-gd-block-desc li { display: inline; }
/* Kleine edit-knop naast de beschrijving */
.nib-gd-edit-btn-sm {
width: 1.4rem;
height: 1.4rem;
font-size: 0.62rem;
margin-left: 0.3rem;
vertical-align: middle;
flex-shrink: 0;
}
/* "Beschrijving toevoegen" placeholder voor admins */
.nib-gd-block-desc-add {
margin-top: 0.4rem;
background: none;
border: 1px dashed rgba(255,255,255,0.35);
border-radius: 6px;
color: rgba(255,255,255,0.5);
font-size: 0.8rem;
padding: 0.3rem 0.65rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: border-color 0.15s, color 0.15s;
}
.nib-gd-block-desc-add:hover {
border-color: rgba(255,255,255,0.65);
color: rgba(255,255,255,0.85);
}
/* Tags in de header */
.nib-gd-block-tags {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
align-self: flex-start;
margin-left: auto;
}
.nib-gd-tag-inv {
background: color-mix(in oklab, var(--group-color, #c0622a), white 60%);
color: var(--gc-text);
border: 1px solid var(--gc-border);
}
.rz-material-dark .nib-gd-tag-inv {
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.28);
}
/* Statistieken-balk: medium kleur */
.nib-gd-block-stats-bar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.7rem 2rem;
background: var(--gc-mid);
border-top: 1px solid var(--gc-border);
font-size: 0.82rem;
color: var(--gc-text);
min-height: 2.8rem;
}
/* Sticky variant: kleeft onder de Radzen topbar */
.nib-gd-block-stats-bar--sticky {
position: sticky;
top: var(--rz-header-min-height, 56px);
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.nib-gd-block-stats-bar i {
margin-right: 0.25rem;
opacity: 0.7;
font-size: 0.8rem;
}
/* Pushes controls (sort, grouping) naar de rechterkant */
.nib-gd-stats-bar-right {
display: flex;
align-items: center;
gap: 0.45rem;
margin-left: auto;
flex-shrink: 0;
}
@media (max-width: 600px) {
.nib-gd-block-stats-bar { padding: 0.7rem 1rem; }
.nib-gd-stats-bar-right { margin-left: 0; width: 100%; }
}
.nib-gd-block-slug {
margin-left: auto;
opacity: 0.6;
font-size: 0.75rem;
font-family: monospace;
}
/* Skeleton voor het nieuwe header-block */
.nib-gd-block-sk {
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
.nib-gd-block-sk-header {
height: 6rem;
border-radius: 0 !important;
}
.nib-gd-block-sk-stats {
height: 3rem;
border-radius: 0 !important;
}
@media (max-width: 600px) {
.nib-gd-block-header { padding: 1.25rem 1rem; }
.nib-gd-block-stats-bar { padding: 0.75rem 1rem; gap: 0.75rem; }
.nib-gd-block-slug { display: none; }
.nib-gd-block-tags { margin-left: 0; width: 100%; }
}
/* ── Chip-wrapper: toggle-knop + navigatie-link ────────── */
.nib-group-chip-wrap {
display: inline-flex;
align-items: center;
border-radius: 20px;
border: 1px solid var(--rz-border-color);
overflow: hidden;
transition: border-color 0.15s;
}
.nib-group-chip-wrap:has(.nib-group-chip-active) {
border-color: var(--rz-primary);
}
.nib-group-chip-wrap .nib-group-chip {
border: none;
border-radius: 0;
}
.nib-group-chip-wrap .nib-group-chip:hover:not(:disabled) {
transform: none;
}
.nib-group-chip-link {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 100%;
min-height: 2rem;
background: transparent;
color: var(--rz-text-secondary-color);
border-left: 1px solid var(--rz-border-color);
font-size: 0.65rem;
text-decoration: none;
transition: background 0.14s, color 0.14s;
flex-shrink: 0;
}
.nib-group-chip-link:hover {
background: color-mix(in oklab, var(--rz-primary), transparent 88%);
color: var(--rz-primary);
text-decoration: none;
}
.nib-group-chip-wrap:has(.nib-group-chip-active) .nib-group-chip-link {
border-left-color: var(--rz-primary);
color: var(--rz-primary);
opacity: 0.75;
}
/* ── GeoFence editor ─────────────────────────────────── */
.nib-geoeditor {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.nib-geoeditor-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: space-between;
}
.nib-geoeditor-hint {
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
display: flex;
align-items: center;
gap: 0.3rem;
}
.nib-geoeditor-presets {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.nib-geo-preset-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.65rem;
border-radius: 14px;
border: 1px solid var(--rz-border-color);
background: var(--rz-base-background-color);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
color: var(--rz-text-color);
transition: background 0.12s, border-color 0.12s;
}
.nib-geo-preset-btn:hover {
background: color-mix(in oklab, var(--rz-primary), transparent 88%);
border-color: var(--rz-primary);
color: var(--rz-primary);
}
.nib-geo-preset-btn-danger:hover {
background: color-mix(in oklab, var(--rz-danger), transparent 88%);
border-color: var(--rz-danger);
color: var(--rz-danger);
}
.nib-geoeditor-map {
width: 100%;
height: 360px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--rz-border-color);
z-index: 0;
}
.nib-geoeditor-info {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
padding: 0.3rem 0.5rem;
background: color-mix(in oklab, var(--rz-primary), transparent 92%);
border-radius: 6px;
}
/* Leaflet marker override */
.nib-geo-marker div {
width: 12px;
height: 12px;
border-radius: 50%;
background: #075082;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.35);
cursor: grab;
}
.nib-geo-marker div:active {
cursor: grabbing;
}
/* ── Dialoog (beheer) ────────────────────────────────── */
.nib-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0,0,0,0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.nib-dialog {
background: var(--rz-base-background-color);
border-radius: 14px;
box-shadow: 0 12px 48px rgba(0,0,0,0.25);
width: 100%;
max-width: 560px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: nib-dialog-in 0.2s ease-out;
}
@keyframes nib-dialog-in {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nib-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.5rem;
border-bottom: 1px solid var(--rz-border-color);
}
.nib-dialog-header h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
}
.nib-dialog-close {
background: none;
border: none;
font-size: 1.1rem;
cursor: pointer;
color: var(--rz-text-secondary-color);
padding: 0.3rem;
border-radius: 6px;
transition: background 0.12s;
}
.nib-dialog-close:hover {
background: var(--rz-base-300, rgba(0,0,0,0.06));
}
.nib-dialog-body {
padding: 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
.nib-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--rz-border-color);
}
.nib-form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.nib-form-group label {
font-size: 0.78rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.nib-form-fieldset {
border: 1px solid var(--rz-border-color);
border-radius: 8px;
padding: 1rem;
margin: 0;
}
.nib-form-fieldset legend {
font-size: 0.78rem;
font-weight: 600;
padding: 0 0.4rem;
color: var(--rz-text-secondary-color);
}
.nib-form-row {
display: flex;
gap: 0.75rem;
}
@media (max-width: 480px) {
.nib-form-row {
flex-direction: column;
}
}
/* ── Subblokken (onder het hoofdblok) ──────────────────────
Gebruikt dezelfde --group-color als het hoofdblok.
Sub-blokken zijn lichter van toon dan de donkere header.
─────────────────────────────────────────────────────────── */
.nib-gd-sub-block {
--gc-dark:   color-mix(in oklab, var(--group-color, #c0622a), black 18%);
--gc-mid:    color-mix(in oklab, var(--group-color, #c0622a), white 62%);
--gc-light:  color-mix(in oklab, var(--group-color, #c0622a), white 86%);
--gc-border: color-mix(in oklab, var(--group-color, #c0622a), white 52%);
--gc-text:   color-mix(in oklab, var(--group-color, #c0622a), black 18%);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
background: var(--gc-light);
}
.rz-material-dark .nib-gd-sub-block {
--gc-dark:   color-mix(in oklab, var(--group-color, #c0622a), black 25%);
--gc-mid:    color-mix(in oklab, var(--group-color, #c0622a), black 55%);
--gc-light:  color-mix(in oklab, var(--group-color, #c0622a), black 68%);
--gc-border: color-mix(in oklab, var(--group-color, #c0622a), black 42%);
--gc-text:   color-mix(in oklab, var(--group-color, #c0622a), white 82%);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.nib-gd-sub-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.5rem;
background: var(--gc-mid);
border-bottom: 1px solid var(--gc-border);
}
.nib-gd-sub-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--gc-text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-gd-sub-title i {
font-size: 0.85rem;
opacity: 0.7;
}
.nib-gd-sub-count {
font-size: 0.72rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 10px;
background: rgba(0,0,0,0.08);
color: var(--gc-text);
opacity: 0.75;
}
.nib-gd-sub-all-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--gc-text);
text-decoration: none;
padding: 0.4rem 0.85rem;
border-radius: 8px;
background: rgba(0,0,0,0.07);
transition: background 0.14s, gap 0.14s;
white-space: nowrap;
flex-shrink: 0;
}
.nib-gd-sub-all-link:hover {
background: rgba(0,0,0,0.13);
gap: 0.6rem;
color: var(--gc-text);
text-decoration: none;
}
.nib-gd-sub-all-link i {
font-size: 0.68rem;
}
/* ── Bewerkknop in sub-blok header (concept-only) ──────── */
.nib-gd-sub-edit-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--gc-text);
background: rgba(0,0,0,0.07);
border: none;
border-radius: 8px;
padding: 0.4rem 0.85rem;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.14s;
}
.nib-gd-sub-edit-btn:hover {
background: rgba(0,0,0,0.13);
}
.nib-gd-sub-edit-btn i {
font-size: 0.72rem;
opacity: 0.8;
}
/* ── Kaart-content wrapper (padding voor editor, niet voor de kaart zelf) */
.nib-gd-sub-map-content {
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── Sub-blok skeleton (exacte afmetingen van het echte blok) */
.nib-gd-sub-block-sk {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.nib-gd-sub-block-sk-header {
height: 3.25rem;
border-radius: 0 !important;
}
.nib-gd-sub-block-sk-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1px;
background: var(--rz-base-200, #e8edf2);
padding: 1px;
}
.nib-gd-sub-block-sk-photo {
aspect-ratio: 4 / 3;
border-radius: 0 !important;
}
@media (max-width: 640px) {
.nib-gd-sub-block-sk-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Leden sub-blok ────────────────────────────────────────
nib-gd-mem-* klassen — gebruikt --gc-* van nib-gd-sub-block
─────────────────────────────────────────────────────────── */
.nib-gd-mem-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.6rem;
padding: 0.85rem 1rem;
background: var(--gc-light);
}
.nib-gd-mem-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.9rem;
background: var(--rz-base-background-color);
border: 1px solid var(--gc-border);
border-radius: 8px;
transition: background 0.12s, border-color 0.12s;
}
.nib-gd-mem-card:hover {
background: var(--gc-mid);
border-color: color-mix(in oklab, var(--group-color, #c0622a), white 35%);
}
/* Avatar: cirkel met initialen */
.nib-gd-mem-avatar {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: var(--gc-mid);
color: var(--gc-text);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.03em;
flex-shrink: 0;
user-select: none;
}
.nib-gd-mem-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.nib-gd-mem-name {
font-size: 0.84rem;
font-weight: 600;
color: var(--rz-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
/* Rol-badge */
.nib-gd-mem-role {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.1rem 0.45rem;
border-radius: 10px;
width: fit-content;
}
.nib-gd-mem-role i {
font-size: 0.55rem;
}
.nib-gd-mem-role-beheerder {
background: color-mix(in oklab, var(--group-color, #c0622a), transparent 75%);
color: var(--gc-text);
border: 1px solid color-mix(in oklab, var(--group-color, #c0622a), transparent 52%);
}
.nib-gd-mem-role-lid {
background: var(--rz-base-200, rgba(0,0,0,0.05));
color: var(--rz-text-secondary-color);
}
.nib-gd-mem-role-volger {
background: transparent;
color: var(--rz-text-secondary-color);
opacity: 0.75;
}
/* Datum rechts */
.nib-gd-mem-date {
font-size: 0.7rem;
color: var(--rz-text-secondary-color);
opacity: 0.65;
flex-shrink: 0;
white-space: nowrap;
}
/* Dark mode */
.rz-material-dark .nib-gd-mem-card {
background: var(--rz-base-700, rgba(255,255,255,0.04));
}
.rz-material-dark .nib-gd-mem-card:hover {
background: var(--gc-mid);
}
@media (max-width: 480px) {
.nib-gd-mem-grid {
grid-template-columns: 1fr;
gap: 0.4rem;
}
}
/* ============================================================
Onboarding Flow  (.nib-ob)
============================================================ */
:root {
--nib-ob-accent: #1a6b3c;
--nib-ob-accent-light: color-mix(in oklab, #1a6b3c 14%, transparent);
--nib-ob-accent-text: #1a6b3c;
--nib-ob-radius: 12px;
--nib-ob-badge-size: 32px;
}
/* Container */
.nib-ob {
background: var(--rz-base-background-color);
border: 1px solid var(--rz-border-disabled-color);
border-radius: var(--nib-ob-radius);
overflow: hidden;
container-type: inline-size;
}
/* Header */
.nib-ob-head {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.1rem 1.25rem 1rem;
border-bottom: 1px solid var(--rz-border-disabled-color);
background: color-mix(in oklab, var(--nib-ob-accent) 5%, var(--rz-base-background-color));
}
.nib-ob-head-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: var(--nib-ob-accent-light);
color: var(--nib-ob-accent-text);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.nib-ob-title {
font-size: 0.9rem;
font-weight: 600;
margin: 0;
color: var(--rz-text-color);
line-height: 1.3;
}
.nib-ob-subtitle {
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
margin: 0.1rem 0 0;
line-height: 1.3;
}
/* Steps wrapper */
.nib-ob-steps {
padding: 1rem 1.25rem 0.5rem 1.25rem;
display: flex;
flex-direction: column;
}
/* Single step row */
.nib-ob-step {
display: flex;
gap: 0.875rem;
align-items: flex-start;
}
/* Left column: badge + connector */
.nib-ob-step-left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: var(--nib-ob-badge-size);
}
/* Badge circle */
.nib-ob-badge {
width: var(--nib-ob-badge-size);
height: var(--nib-ob-badge-size);
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 600;
border: 2px solid var(--rz-border-disabled-color);
color: var(--rz-text-disabled-color);
background: transparent;
transition: background 0.2s, border-color 0.2s, color 0.2s;
line-height: 1;
}
/* Vertical connector between steps */
.nib-ob-connector {
width: 2px;
flex: 1;
min-height: 16px;
background: var(--rz-border-disabled-color);
margin: 3px 0;
border-radius: 1px;
transition: background 0.2s;
}
/* Right column: content */
.nib-ob-step-body {
flex: 1;
padding-bottom: 1.1rem;
min-width: 0;
}
.nib-ob-step-body--sk {
padding-top: 0.45rem;
}
.nib-ob-step-top {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
min-width: 0;
}
.nib-ob-step-title {
font-size: 0.845rem;
font-weight: 600;
margin: 0.2rem 0 0;
color: var(--rz-text-color);
line-height: 1.3;
flex: 1;
min-width: 0;
}
.nib-ob-step-desc {
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
margin: 0.25rem 0 0.55rem;
line-height: 1.45;
}
/* Action button */
.nib-ob-action {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.8rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
cursor: pointer;
background: var(--nib-ob-accent);
color: #fff;
line-height: 1.5;
}
.nib-ob-action:hover {
opacity: 0.85;
color: #fff;
text-decoration: none;
}
/* Action disabled (locked) */
.nib-ob-action--locked {
background: var(--rz-base-300, rgba(0,0,0,0.06));
color: var(--rz-text-disabled-color);
pointer-events: none;
cursor: not-allowed;
opacity: 0.7;
}
/* "Klaar" pill */
.nib-ob-done-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.68rem;
font-weight: 600;
color: var(--nib-ob-accent-text);
background: var(--nib-ob-accent-light);
border-radius: 20px;
padding: 0.1rem 0.5rem;
white-space: nowrap;
flex-shrink: 0;
}
/* ─── States ──────────────────────────────────────────────── */
/* Done */
.nib-ob-step--done .nib-ob-badge {
background: var(--nib-ob-accent-light);
border-color: var(--nib-ob-accent);
color: var(--nib-ob-accent-text);
}
.nib-ob-step--done .nib-ob-connector {
background: color-mix(in oklab, var(--nib-ob-accent) 35%, var(--rz-border-disabled-color));
}
.nib-ob-step--done .nib-ob-step-title {
color: var(--rz-text-secondary-color);
font-weight: 500;
}
.nib-ob-step--done .nib-ob-step-desc {
font-size: 0.75rem;
opacity: 0.8;
}
/* Active */
.nib-ob-step--active .nib-ob-badge {
background: var(--nib-ob-accent);
border-color: var(--nib-ob-accent);
color: #fff;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--nib-ob-accent) 22%, transparent);
}
.nib-ob-step--active .nib-ob-step-title {
color: var(--rz-text-color);
font-weight: 600;
}
/* Locked */
.nib-ob-step--locked .nib-ob-step-title {
color: var(--rz-text-disabled-color);
font-weight: 500;
}
.nib-ob-step--locked .nib-ob-step-desc {
opacity: 0.5;
}
/* ─── All done banner ─────────────────────────────────────── */
.nib-ob-complete {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 1.25rem 1rem;
padding: 0.6rem 0.9rem;
border-radius: 8px;
background: var(--nib-ob-accent-light);
color: var(--nib-ob-accent-text);
font-size: 0.8rem;
font-weight: 600;
}
.nib-ob-complete i {
font-size: 0.9rem;
}
/* ─── Skeleton ────────────────────────────────────────────── */
.nib-ob-sk-title {
height: 13px;
width: 62%;
border-radius: 4px;
margin-bottom: 7px;
}
.nib-ob-sk-desc {
height: 10px;
width: 82%;
border-radius: 4px;
}
/* ─── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] {
--nib-ob-accent-light: color-mix(in oklab, #1a6b3c 22%, transparent);
--nib-ob-accent-text: color-mix(in oklab, #1a6b3c 80%, #a8ffcb);
}
[data-theme="dark"] .nib-ob-head {
background: color-mix(in oklab, var(--nib-ob-accent) 9%, var(--rz-base-background-color));
}
[data-theme="dark"] .nib-ob-action--locked {
background: rgba(255,255,255,0.06);
}
/* ── Profiel pagina ─────────────────────────────────────── */
/* ── Hero-statistieken blok ──────────────────────────── */
.nib-profiel-hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1px;
background: var(--gc-border, color-mix(in oklab, var(--group-color) 15%, transparent));
}
@media (max-width: 700px) {
.nib-profiel-hero-stats {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
.nib-profiel-hero-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 1.6rem 1rem;
background: var(--rz-panel-background-color);
cursor: default;
transition: background 0.15s;
}
.nib-profiel-hero-stat[onclick],
.nib-profiel-hero-stat:has([onclick]) {
cursor: pointer;
}
.nib-profiel-hero-stat:hover {
background: color-mix(in oklab, var(--group-color) 6%, var(--rz-panel-background-color));
}
.nib-profiel-hero-stat-val {
font-size: 2.4rem;
font-weight: 600;
line-height: 1;
color: var(--gc-text, var(--group-color));
}
.nib-profiel-hero-stat-lbl {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--rz-text-secondary-color);
display: flex;
align-items: center;
gap: 0.35rem;
}
.nib-profiel-hero-stat-lbl i {
font-size: 0.65rem;
opacity: 0.7;
}
/* ── Generieke sticky filterbalk ─────────────────────────────
ÉÉN balk voor álle schermen (foto's, collecties, nieuws/verhalen,
fotograaf-profiel …). Basis = de foto's-filterbalk: schone
paneel-achtergrond, subtiele onderrand + zachte schaduw en een
vaste controle-hoogte. Plak `.nib-ff-toolbar` als directe child
in een `.nib-gd-block` en hij blijft onder de nav plakken bij
scrollen — automatisch, zonder pagina-specifieke CSS.
De basis `.nib-gd-block` heeft `overflow: hidden`, wat
`position: sticky` op de balk breekt. Elk blok mét een filterbalk
krijgt daarom automatisch `overflow: visible` (border-radius is 0,
dus clippen is niet nodig). */
.nib-gd-block:has(.nib-ff-toolbar) {
overflow: visible;
margin-bottom: 0;
}
.nib-ff-toolbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.55rem 0.85rem;
padding: 0.7rem 2.5rem;
background: var(--rz-panel-background-color);
border-bottom: 1px solid var(--rz-base-200);
box-shadow: 0 4px 10px -8px rgba(0, 0, 0, 0.35);
}
/* Alle controls (knoppen + dropdowns) gelijke hoogte voor een nette balk */
.nib-ff-toolbar .rz-button,
.nib-ff-toolbar .rz-dropdown {
height: 2rem;
}
@media (max-width: 700px) {
.nib-ff-toolbar {
padding: 0.7rem 1.25rem;
}
}
.nib-ff-toolbar--sk {
pointer-events: none;
}
/* Niet-plakkende variant — voor detailpagina's met losse sub-blokken eronder,
waar een meeplakkende balk over die secties ongewenst is. */
.nib-ff-toolbar--static {
position: static;
}
/* Linkergroep in de balk (telling + actieve-filter chips) — clustert links,
zodat de controls-groep rechts blijft staan (space-between). */
.nib-ff-toolbar-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem 0.6rem;
min-width: 0;
flex: 1 1 auto;
}
.nib-ff-count {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-text-color);
white-space: nowrap;
}
.nib-ff-count .rzi {
font-size: 1rem;
opacity: 0.5;
}
.nib-ff-count-filter-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--group-color, #075082);
margin-left: 0.1rem;
vertical-align: middle;
}
.nib-ff-toolbar-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.nib-ff-filter-btn {
white-space: nowrap;
}
/* Opgeslagen filters chips */
.nib-ff-saved-filters {
display: flex;
align-items: center;
gap: 0.3rem;
flex-wrap: wrap;
}
.nib-ff-saved-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.28rem 0.65rem;
border-radius: 20px;
border: 1px solid color-mix(in oklab, var(--group-color, #075082) 28%, transparent);
background: color-mix(in oklab, var(--group-color, #075082) 8%, var(--rz-panel-background-color));
color: color-mix(in oklab, var(--group-color, #075082), black 20%);
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.nib-ff-saved-chip:hover {
background: color-mix(in oklab, var(--group-color, #075082) 16%, var(--rz-panel-background-color));
border-color: color-mix(in oklab, var(--group-color, #075082) 45%, transparent);
}
.nib-ff-saved-chip .rzi {
font-size: 0.78rem;
opacity: 0.7;
}
.nib-ff-saved-chip--default {
border-color: color-mix(in oklab, var(--group-color, #075082) 45%, transparent);
background: color-mix(in oklab, var(--group-color, #075082) 14%, var(--rz-panel-background-color));
}
.nib-ff-saved-chip-label {
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
}
.rz-material-dark .nib-ff-saved-chip {
background: color-mix(in oklab, var(--group-color, #075082) 14%, var(--rz-panel-background-color));
border-color: color-mix(in oklab, var(--group-color, #075082) 35%, transparent);
color: color-mix(in oklab, var(--group-color, #075082), white 55%);
}
.rz-material-dark .nib-ff-saved-chip:hover {
background: color-mix(in oklab, var(--group-color, #075082) 24%, var(--rz-panel-background-color));
}
@media (max-width: 480px) {
.nib-ff-toolbar {
flex-wrap: wrap;
gap: 0.5rem;
}
.nib-ff-toolbar-right {
width: 100%;
}
.nib-ff-saved-filters {
order: -1;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.nib-ff-saved-filters::-webkit-scrollbar { display: none; }
}
.rz-material-dark .nib-ff-toolbar {
background: var(--rz-panel-background-color);
border-bottom-color: var(--rz-base-300);
box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.6);
}
/* ── Pagina wrapper ──────────────────────────────────── */
.profiel-detail-page {
display: flex;
flex-direction: column;
}
/* ── Breadcrumb ──────────────────────────────────────── */
.profiel-breadcrumb-wrap {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.25rem;
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
min-height: 2.5rem;
}
.profiel-breadcrumb-wrap a {
color: var(--rz-text-secondary-color);
text-decoration: none;
}
.profiel-breadcrumb-wrap a:hover {
text-decoration: underline;
}
.profiel-breadcrumb-sep {
font-size: 0.6rem;
opacity: 0.5;
}
/* ── Hoofdblok ───────────────────────────────────────── */
.profiel-main .nib-gd-block-header {
padding: 0;
overflow: hidden;
}
/* ── Full-bleed hero (Concept D) ─────────────────────── */
.profiel-d-hero {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
background: var(--gc-dark, #1a1a2e);
}
@media (max-width: 900px) {
.profiel-d-hero { height: 420px; }
}
@media (max-width: 600px) {
.profiel-d-hero { height: 320px; }
}
/* Coverfoto */
.profiel-d-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
/* Gekleurde achtergrond als er geen foto is */
.profiel-d-bg-color {
position: absolute;
inset: 0;
background: color-mix(in oklab, var(--group-color) 55%, #0a0a14);
}
/* Overlay: donkere tint onder de coverfoto-inhoud */
.profiel-d-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
display: flex;
align-items: flex-end;
}
/* Inhoud onderin de overlay */
.profiel-d-overlay-inner {
display: flex;
align-items: flex-end;
gap: 1.25rem;
padding: 1.4rem 1.75rem;
width: 100%;
}
@media (max-width: 480px) {
.profiel-d-overlay-inner {
gap: 1rem;
padding: 1.1rem 1.1rem;
}
}
/* Avatar */
.profiel-d-avatar-wrap {
flex-shrink: 0;
z-index: 2;
}
.profiel-d-avatar-wrap .profiel-avatar-img,
.profiel-d-avatar-wrap .profiel-avatar-placeholder {
width: 72px;
height: 72px;
border: 2.5px solid rgba(255, 255, 255, 0.65);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.profiel-d-avatar-wrap .profiel-avatar-placeholder {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.7);
font-size: 1.6rem;
backdrop-filter: blur(6px);
}
/* Info: type, naam, bio */
.profiel-d-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
.profiel-d-type {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.65);
line-height: 1;
}
.profiel-d-name {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 500;
color: #fff;
margin: 0;
line-height: 1.15;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profiel-d-since {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 0.1rem;
letter-spacing: 0.02em;
}
.profiel-d-bio {
font-size: 1.1rem;
color: var(--_title);
line-height: 1.55;
margin-top: 0.15rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.profiel-d-bio-add {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
background: none;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-radius: 6px;
padding: 0.3rem 0.65rem;
cursor: pointer;
margin-top: 0.3rem;
transition: color 0.15s, border-color 0.15s;
}
.profiel-d-bio-add:hover {
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.5);
}
/* Pennetje voor bio bewerken */
.nib-profiel-edit-inline {
float: right;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 6px;
border: none;
background: rgba(255, 255, 255, 0.12);
color: var(--_title);
font-size: 0.7rem;
cursor: pointer;
margin-left: 0.5rem;
transition: background 0.15s, color 0.15s;
}
.nib-profiel-edit-inline:hover {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
/* Berichtknop voor bezoekers */
.profiel-d-msg-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.5rem;
padding: 0.4rem 0.9rem;
border-radius: 8px;
border: 1.5px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 0.15s, border-color 0.15s;
}
.profiel-d-msg-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.75);
}
/* ── Avatar ──────────────────────────────────────────── */
.profiel-avatar-img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--rz-panel-background-color);
display: block;
}
.profiel-avatar-placeholder {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--gc-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--rz-text-secondary-color);
border: 3px solid var(--rz-panel-background-color);
}
.profiel-avatar-sk {
width: 80px;
height: 80px;
border-radius: 50%;
}
/* ── Biografie ───────────────────────────────────────── */
.profiel-bio {
font-size: 0.9rem;
line-height: 1.6;
color: var(--rz-text-secondary-color);
margin-top: 0.25rem;
}
.profiel-bio-empty {
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
opacity: 0.55;
display: flex;
align-items: center;
gap: 0.4rem;
}
/* ── Wijzig-knoppen (gedeeld) ────────────────────────── */
.nib-profiel-change-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: none;
border-radius: 8px;
padding: 0.45rem 0.85rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
background: rgba(0, 0, 0, 0.52);
color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.15s, transform 0.15s;
z-index: 3;
}
.nib-profiel-change-btn:hover {
background: rgba(0, 0, 0, 0.72);
transform: scale(1.03);
}
.nib-profiel-change-btn i {
font-size: 0.82rem;
}
.nib-profiel-change-header {
top: 0.85rem;
right: 0.85rem;
bottom: auto;
}
.nib-profiel-change-avatar {
position: absolute;
bottom: -0.15rem;
right: -0.15rem;
padding: 0.35rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
justify-content: center;
border: 2px solid var(--rz-panel-background-color);
}
.nib-profiel-avatar {
position: relative;
flex-shrink: 0;
width: fit-content;
}
/* ── Subblokken grid (verouderd, voor eventuele toekomstige twee-koloms) ── */
.nib-profiel-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
}
@media (max-width: 900px) {
.nib-profiel-grid {
grid-template-columns: 1fr;
}
}
.nib-profiel-sub { align-self: start; }
/* ── Statistieken grid in subblok ────────────────────── */
.nib-profiel-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--gc-border);
}
.nib-profiel-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 1.1rem 0.75rem;
background: var(--rz-panel-background-color);
cursor: default;
transition: background 0.15s;
}
.nib-profiel-stat:hover { background: var(--gc-light); }
.nib-profiel-stat-val {
font-size: 1.6rem;
font-weight: 600;
line-height: 1;
color: var(--gc-text);
}
.nib-profiel-stat-lbl {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rz-text-secondary-color);
}
.nib-profiel-stat-lbl i {
margin-right: 0.2rem;
font-size: 0.65rem;
opacity: 0.7;
}
/* ── Collecties sub-block ────────────────────────────── */
.nib-profiel-coll-block {
--coll-color: #0d7377;
--group-color: #0d7377;
}
.nib-profiel-coll-block .photo-grid-loader {
}
/* Grid: max 4 kolommen, kaarten rekken mee */
.nib-coll-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1px;
background: color-mix(in oklab, var(--coll-color) 15%, transparent);
}
@media (min-width: 900px) {
.nib-coll-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
/* Kaart */
.nib-coll-card {
display: flex;
flex-direction: column;
background: var(--rz-panel-background-color);
cursor: pointer;
transition: background 0.15s;
}
.nib-coll-card:hover {
background: color-mix(in oklab, var(--coll-color) 5%, var(--rz-panel-background-color));
}
/* Even/oneven tint-wissel */
.nib-coll-card:nth-child(odd) .nib-coll-card-hero {
background: color-mix(in oklab, var(--coll-color) 4%, var(--rz-panel-background-color));
}
.nib-coll-card:nth-child(even) .nib-coll-card-hero {
background: color-mix(in oklab, var(--coll-color) 9%, var(--rz-panel-background-color));
}
/* Hero: percentage groot in beeld */
.nib-coll-card-hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 1.6rem 1rem 1.2rem;
}
.nib-coll-card-pct {
font-size: 2.8rem;
font-weight: 600;
line-height: 1;
color: var(--coll-color);
}
.nib-coll-card-pct-sign {
font-size: 1.1rem;
font-weight: 600;
opacity: 0.65;
}
.nib-coll-card-progress {
width: 80%;
height: 4px;
border-radius: 2px;
background: color-mix(in oklab, var(--coll-color) 16%, transparent);
}
.nib-coll-card-progress-fill {
height: 100%;
border-radius: 2px;
background: var(--coll-color);
transition: width 0.4s ease;
}
.nib-coll-card-sub {
font-size: 0.72rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
}
/* Bottom: titel + pijl (als photo-cover-card bar) */
.nib-coll-card-bottom {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
border-top: 1px solid color-mix(in oklab, var(--coll-color) 10%, transparent);
}
.nib-coll-card-title {
flex: 1;
margin: 0;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.3;
color: var(--rz-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-coll-card-go {
display: flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
flex-shrink: 0;
border-radius: 50%;
font-size: 0.65rem;
color: var(--coll-color);
background: color-mix(in oklab, var(--coll-color) 10%, transparent);
transition: background 0.15s, transform 0.15s;
}
.nib-coll-card:hover .nib-coll-card-go {
background: color-mix(in oklab, var(--coll-color) 20%, transparent);
transform: translateX(2px);
}
/* ── Laatste foto's sub-block ────────────────────────── */
.nib-profiel-photos-block {
}
/* ── Waarneming dialog ───────────────────────────────── */
.nib-waard-dialog {
padding: 0.5rem 0;
}
.nib-waard-dialog-desc {
font-size: 0.85rem;
color: var(--rz-text-secondary-color);
margin: 0 0 1rem 0;
line-height: 1.55;
}
.nib-waard-dialog-ok {
font-size: 0.75rem;
color: var(--rz-success);
margin: 0.4rem 0 0 0;
}
.nib-waard-dialog-sync-info {
font-size: 0.8rem;
color: var(--rz-text-secondary-color);
margin: 0.75rem 0 0.25rem 0;
}
.nib-waard-dialog-actions {
margin-top: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nib-waard-dialog-sync-notice {
margin-top: 0.75rem;
padding: 0.6rem 0.8rem;
border-left: 3px solid var(--rz-info);
background: color-mix(in srgb, var(--rz-info) 8%, transparent);
font-size: 0.8rem;
color: var(--rz-text-color);
line-height: 1.5;
border-radius: 0 4px 4px 0;
}
.nib-waard-dialog-hint {
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
margin: 0.3rem 0 0 0;
}
/* ── Dark theme ──────────────────────────────────────── */
.rz-material-dark .nib-profiel-hero:not(:has(img)) {
background: var(--photo-bg-4);
}
.rz-material-dark .nib-profiel-stat {
background: var(--rz-panel-background-color);
}
.rz-material-dark .nib-profiel-stat:hover {
background: var(--gc-dark);
}
.rz-material-dark .nib-profiel-stat-val {
color: #fff;
}
.rz-material-dark .nib-profiel-change-btn {
background: rgba(0, 0, 0, 0.6);
}
.rz-material-dark .nib-profiel-change-btn:hover {
background: rgba(0, 0, 0, 0.8);
}
.rz-material-dark .nib-coll-card:nth-child(odd) .nib-coll-card-hero {
background: color-mix(in oklab, var(--coll-color) 8%, var(--rz-panel-background-color));
}
.rz-material-dark .nib-coll-card:nth-child(even) .nib-coll-card-hero {
background: color-mix(in oklab, var(--coll-color) 14%, var(--rz-panel-background-color));
}
.rz-material-dark .nib-coll-card-pct {
color: color-mix(in oklab, var(--coll-color), white 30%);
}
.rz-material-dark .nib-coll-card-go {
color: color-mix(in oklab, var(--coll-color), white 30%);
}
/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 600px) {
.nib-profiel-hero {
aspect-ratio: 2.5 / 1;
}
.nib-profiel-change-header span {
display: none;
}
}
/* ── Waarnemingen lijst ──────────────────────────────── */
.nib-obs-list {
display: flex;
flex-direction: column;
}
.nib-obs-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 1.25rem;
border-bottom: 1px solid var(--rz-border-color);
}
.nib-obs-item:last-child {
border-bottom: none;
}
.nib-obs-item-name {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
font-size: 0.9rem;
}
.nib-obs-item-link {
color: var(--rz-text-color);
text-decoration: none;
}
.nib-obs-item-link:hover {
color: #3a7d44;
text-decoration: underline;
}
.nib-obs-item-count {
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
font-weight: 400;
}
.nib-obs-item-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
white-space: nowrap;
flex-shrink: 0;
}
.nib-obs-item-meta i {
opacity: 0.6;
margin-right: 0.2rem;
}
.nib-obs-sk-list {
display: flex;
flex-direction: column;
gap: 0;
}
.nib-obs-sk-item {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--rz-border-color);
}
.nib-obs-sk-item:last-child {
border-bottom: none;
}
@media (max-width: 600px) {
.nib-obs-item {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.nib-obs-item-meta {
white-space: normal;
flex-wrap: wrap;
}
}
/* ── Waarnemingen overzicht pagina ───────────────────── */
.nib-waard-ov-list {
display: flex;
flex-direction: column;
}
.nib-waard-ov-year-group {
display: flex;
flex-direction: column;
}
.nib-waard-ov-year-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.85rem 1.25rem 0.5rem;
background: color-mix(in oklab, #3a7d44 8%, var(--rz-panel-background-color));
border-bottom: 2px solid color-mix(in oklab, #3a7d44 25%, transparent);
position: sticky;
top: 0;
z-index: 1;
}
.nib-waard-ov-year-label {
font-size: 1.15rem;
font-weight: 600;
color: #3a7d44;
}
.rz-material-dark .nib-waard-ov-year-label {
color: color-mix(in oklab, #3a7d44, white 35%);
}
.nib-waard-ov-year-count {
font-size: 0.78rem;
color: var(--rz-text-secondary-color);
}
.nib-waard-ov-month-group {
display: flex;
flex-direction: column;
}
.nib-waard-ov-month-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1.25rem;
font-size: 0.85rem;
font-weight: 600;
text-transform: capitalize;
color: var(--rz-text-secondary-color);
background: color-mix(in oklab, #3a7d44 4%, var(--rz-panel-background-color));
border-bottom: 1px solid var(--rz-border-color);
}
.nib-waard-ov-month-header i {
font-size: 0.75rem;
opacity: 0.6;
}
.nib-waard-ov-month-count {
margin-left: auto;
font-size: 0.75rem;
font-weight: 400;
opacity: 0.6;
}
.nib-waard-ov-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 3rem 1.5rem;
color: var(--rz-text-secondary-color);
font-size: 0.9rem;
text-align: center;
}
.nib-waard-ov-empty i {
font-size: 2.5rem;
opacity: 0.25;
}
.nib-waard-ov-sk {
display: flex;
flex-direction: column;
padding: 1rem 0;
}
.nib-waard-ov-sk-year {
padding: 0.85rem 1.25rem 0.5rem;
background: color-mix(in oklab, #3a7d44 6%, var(--rz-panel-background-color));
margin-bottom: 0.25rem;
}
/* ─── Waarnemingen filter bar ─── */
.nib-waard-filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.nib-waard-filter-controls {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.nib-waard-filter-select {
height: 2rem;
padding: 0 0.6rem;
border: 1px solid var(--rz-base-300);
border-radius: 6px;
background: var(--rz-panel-background-color);
color: var(--rz-text-color);
font-size: 0.8rem;
cursor: pointer;
}
.nib-waard-filter-select:disabled {
opacity: 0.4;
cursor: default;
}
.nib-waard-filter-clear {
height: 2rem;
padding: 0 0.75rem;
border: 1px solid var(--rz-base-300);
border-radius: 6px;
background: transparent;
color: var(--rz-text-color);
font-size: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
}
.nib-waard-filter-clear:hover {
background: var(--rz-base-100);
}
/* ── "Stuur bericht" chip op profiel pagina ───────────── */
.nib-profiel-msg-chip {
background: var(--rz-primary);
color: #fff;
font-weight: 600;
transition: background 0.15s, transform 0.15s;
}
.nib-profiel-msg-chip:hover {
background: var(--rz-primary-dark);
transform: scale(1.03);
}
.nib-profiel-msg-chip i {
opacity: 1;
}
/* ══════════════════════════════════════════════════════════
Profiel subblok-header – Variant A
Strip donker + lichte achtergrond, afgeleid van de
primaire merkkleur (#075082), onafhankelijk van fotokkleur.
══════════════════════════════════════════════════════════ */
.profiel-detail-page .nib-subblock-header {
--psd-color: #075082;
}
/* Strip: donkere tint van primaire kleur */
.profiel-detail-page .nib-subblock-strip {
background: color-mix(in oklab, var(--psd-color), black 16%);
color: #fff;
}
/* Achtergrond van het main-deel: lichte tint */
.profiel-detail-page .nib-subblock-main {
background: color-mix(in oklab, var(--psd-color), white 88%);
color: color-mix(in oklab, var(--psd-color), black 40%);
}
/* Titeltekst */
.profiel-detail-page .nib-subblock-main .nib-gd-block-title {
color: color-mix(in oklab, var(--psd-color), black 35%);
}
/* Subtiteltekst */
.profiel-detail-page .nib-subblock-main .nib-subblock-subtitle {
color: color-mix(in oklab, var(--psd-color), black 30%);
opacity: .72;
}
/* ── Donker thema ──────────────────────────────────────── */
.rz-material-dark .profiel-detail-page .nib-subblock-strip {
background: color-mix(in oklab, var(--psd-color), black 36%);
}
.rz-material-dark .profiel-detail-page .nib-subblock-main {
background: color-mix(in oklab, var(--psd-color), black 62%);
color: color-mix(in oklab, var(--psd-color), white 80%);
}
.rz-material-dark .profiel-detail-page .nib-subblock-main .nib-gd-block-title {
color: color-mix(in oklab, var(--psd-color), white 75%);
}
.rz-material-dark .profiel-detail-page .nib-subblock-main .nib-subblock-subtitle {
color: color-mix(in oklab, var(--psd-color), white 60%);
opacity: .8;
}
/* ── Tabnavigatie ────────────────────────────────────── */
.nib-profiel-tabs {
display: flex;
align-items: center;
gap: 2px;
padding: 0.45rem 0.75rem;
background: color-mix(in oklab, var(--group-color) 6%, var(--rz-panel-background-color));
border-bottom: 1px solid color-mix(in oklab, var(--group-color) 16%, transparent);
overflow-x: auto;
scrollbar-width: none;
}
.nib-profiel-tabs::-webkit-scrollbar {
display: none;
}
.nib-profiel-tab {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 1rem;
background: transparent;
border: none;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, background 0.15s, transform 0.12s;
text-decoration: none;
position: relative;
}
.nib-profiel-tab i {
font-size: 0.82rem;
opacity: 0.6;
transition: opacity 0.15s, transform 0.15s;
}
.nib-profiel-tab:hover {
color: var(--group-color);
background: color-mix(in oklab, var(--group-color) 9%, var(--rz-panel-background-color));
}
.nib-profiel-tab:hover i {
opacity: 0.9;
transform: scale(1.1);
}
.nib-profiel-tab--active {
color: var(--group-color);
background: color-mix(in oklab, var(--group-color) 13%, var(--rz-panel-background-color));
box-shadow: 0 1px 4px color-mix(in oklab, var(--group-color) 18%, transparent),
inset 0 0 0 1px color-mix(in oklab, var(--group-color) 22%, transparent);
}
.nib-profiel-tab--active i {
opacity: 1;
transform: scale(1.08);
}
.nib-profiel-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.3rem;
height: 1.3rem;
padding: 0 0.28rem;
border-radius: 99px;
background: color-mix(in oklab, var(--group-color) 14%, transparent);
color: var(--group-color);
font-size: 0.66rem;
font-weight: 700;
line-height: 1;
transition: background 0.15s;
}
.nib-profiel-tab--active .nib-profiel-tab-count {
background: color-mix(in oklab, var(--group-color) 22%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--group-color) 30%, transparent);
}
.nib-profiel-tab-panel {
display: flex;
flex-direction: column;
}
.nib-profiel-tab-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 3.5rem 1.5rem;
color: var(--rz-text-secondary-color);
font-size: 0.9rem;
text-align: center;
}
.nib-profiel-tab-empty i {
font-size: 2.5rem;
opacity: 0.2;
}
.rz-material-dark .nib-profiel-tabs {
background: color-mix(in oklab, var(--group-color) 10%, var(--rz-panel-background-color));
border-bottom-color: color-mix(in oklab, var(--group-color) 22%, transparent);
}
.rz-material-dark .nib-profiel-tab:hover {
background: color-mix(in oklab, var(--group-color) 14%, var(--rz-panel-background-color));
}
.rz-material-dark .nib-profiel-tab--active {
background: color-mix(in oklab, var(--group-color) 20%, var(--rz-panel-background-color));
box-shadow: 0 1px 6px color-mix(in oklab, var(--group-color) 25%, transparent),
inset 0 0 0 1px color-mix(in oklab, var(--group-color) 30%, transparent);
}
@media (max-width: 600px) {
.nib-profiel-tabs {
padding: 0.4rem 0.5rem;
gap: 1px;
}
.nib-profiel-tab {
padding: 0.55rem 0.75rem;
border-radius: 8px;
}
.nib-profiel-tab span:not(.nib-profiel-tab-count) {
display: none;
}
.nib-profiel-tab i {
font-size: 1rem;
opacity: 0.75;
}
.nib-profiel-tab--active i {
opacity: 1;
}
}
/* ── Statistieken + collectie-kaart layout ───────────────── */
.nib-profiel-stats-layout {
display: flex;
flex-direction: column;
}
.nib-profiel-stats-layout--with-card {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
/* Stats kolom: max 2 breed */
.nib-profiel-hero-stats--max2 {
grid-template-columns: repeat(2, 1fr);
}
/* Collectie-kaart rechts — Variant B: lichte achtergrond, cirkel-badge */
.nib-profiel-stats-card {
--_c: var(--card-color, #075082);
display: flex;
flex-direction: column;
cursor: pointer;
overflow: hidden;
background: color-mix(in oklab, var(--_c), white 82%);
border-left: 1px solid color-mix(in oklab, var(--_c), white 55%);
transition: filter 0.18s;
}
.nib-profiel-stats-card:hover {
filter: brightness(0.97);
}
/* Bovenste rij: badge + titel/soorten/bar */
.nib-profiel-stats-card-top {
background: color-mix(in oklab, var(--_c), white 72%);
padding: 1.1rem 1.15rem;
display: flex;
align-items: center;
gap: 1rem;
}
/* Ronde percentage-badge */
.nib-profiel-stats-card-badge {
flex-shrink: 0;
width: 3.8rem;
height: 3.8rem;
border-radius: 50%;
background: color-mix(in oklab, var(--_c), white 30%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.nib-profiel-stats-card-pct-val {
font-size: 1.3rem;
font-weight: 700;
color: color-mix(in oklab, var(--_c), black 30%);
}
.nib-profiel-stats-card-pct-sign {
font-size: 0.62rem;
font-weight: 700;
color: color-mix(in oklab, var(--_c), black 20%);
opacity: 0.7;
}
/* Rechts van de badge */
.nib-profiel-stats-card-top-info {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
flex: 1;
}
.nib-profiel-stats-card-title {
font-size: 1.25rem;
font-weight: 500;
margin: 0;
color: color-mix(in oklab, var(--_c), black 35%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-profiel-stats-card-species {
font-size: 0.73rem;
font-weight: 600;
color: color-mix(in oklab, var(--_c), black 18%);
opacity: 0.75;
}
.nib-profiel-stats-card-bar {
height: 3px;
background: rgba(0,0,0,0.08);
border-radius: 2px;
overflow: hidden;
}
.nib-profiel-stats-card-bar-fill {
height: 100%;
border-radius: 2px;
background: color-mix(in oklab, var(--_c), black 10%);
transition: width 0.5s ease;
}
/* Onderste rij: beschrijving + tag */
.nib-profiel-stats-card-bottom {
padding: 0.8rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.nib-profiel-stats-card-desc {
font-size: 0.78rem;
color: color-mix(in oklab, var(--_c), black 20%);
opacity: 0.72;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nib-profiel-stats-card-tag {
font-size: 0.7rem;
color: color-mix(in oklab, var(--_c), black 18%);
opacity: 0.55;
display: flex;
align-items: center;
gap: 0.3rem;
}
/* ── Donker thema ── */
.rz-material-dark .nib-profiel-stats-card {
background: color-mix(in oklab, var(--_c), black 55%);
border-left-color: color-mix(in oklab, var(--_c), black 42%);
}
.rz-material-dark .nib-profiel-stats-card:hover {
filter: brightness(1.08);
}
.rz-material-dark .nib-profiel-stats-card-top {
background: color-mix(in oklab, var(--_c), black 62%);
}
.rz-material-dark .nib-profiel-stats-card-badge {
background: color-mix(in oklab, var(--_c), black 30%);
}
.rz-material-dark .nib-profiel-stats-card-pct-val {
color: color-mix(in oklab, var(--_c), white 70%);
}
.rz-material-dark .nib-profiel-stats-card-pct-sign {
color: rgba(255,255,255,0.5);
opacity: 1;
}
.rz-material-dark .nib-profiel-stats-card-title {
color: color-mix(in oklab, var(--_c), white 72%);
}
.rz-material-dark .nib-profiel-stats-card-species {
color: rgba(255,255,255,0.5);
opacity: 1;
}
.rz-material-dark .nib-profiel-stats-card-bar {
background: rgba(255,255,255,0.1);
}
.rz-material-dark .nib-profiel-stats-card-bar-fill {
background: color-mix(in oklab, var(--_c), white 55%);
}
.rz-material-dark .nib-profiel-stats-card-desc {
color: rgba(255,255,255,0.48);
opacity: 1;
}
.rz-material-dark .nib-profiel-stats-card-tag {
color: rgba(255,255,255,0.35);
opacity: 1;
}
/* Skeleton variant */
.nib-profiel-stats-card--sk {
cursor: default;
}
.nib-profiel-stats-card--sk .nib-profiel-stats-card-top {
padding: 1.1rem 1.15rem;
gap: 1rem;
}
@media (max-width: 580px) {
.nib-profiel-stats-layout--with-card {
grid-template-columns: 1fr;
}
.nib-profiel-stats-card {
border-left: none;
border-top: 1px solid color-mix(in oklab, var(--_c), white 55%);
}
}
/* ── Profielpagina tegelgrid ─────────────────────────────── */
.nib-profiel-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: color-mix(in oklab, var(--group-color) 22%, transparent);
}
@media (max-width: 900px) {
.nib-profiel-tiles {
grid-template-columns: repeat(2, 1fr);
}
}
/* Basisstijl tegel */
.nib-profiel-tile {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.4rem 1.2rem 1.4rem 1.4rem;
background: color-mix(in oklab, var(--group-color) 5%, var(--rz-panel-background-color));
text-decoration: none;
color: var(--rz-text-color);
cursor: pointer;
transition: background 0.18s;
overflow: hidden;
}
.nib-profiel-tile:hover {
background: color-mix(in oklab, var(--group-color) 11%, var(--rz-panel-background-color));
text-decoration: none;
color: var(--rz-text-color);
}
/* Verticale strip links met icoontje — mini subblock-header */
.nib-profiel-tile-icon {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
width: 3.2rem;
flex-shrink: 0;
background: color-mix(in oklab, var(--group-color), black 18%);
color: rgba(255, 255, 255, 0.9);
font-size: 1.05rem;
transition: background 0.18s;
margin: -1.4rem -1rem -1.4rem -1.4rem;
padding: 0 0.75rem;
}
.nib-profiel-tile:hover .nib-profiel-tile-icon {
background: color-mix(in oklab, var(--group-color), black 28%);
}
/* Tekstblok */
.nib-profiel-tile-body {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1;
min-width: 0;
padding: 1rem;
}
.nib-profiel-tile-val {
font-size: 1.85rem;
font-weight: 800;
line-height: 1;
color: color-mix(in oklab, var(--group-color), var(--rz-text-color) 25%);
letter-spacing: -0.02em;
}
.nib-profiel-tile-lbl {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--rz-text-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Pijltje rechts */
.nib-profiel-tile-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
flex-shrink: 0;
border-radius: 50%;
font-size: 0.65rem;
color: var(--group-color);
background: color-mix(in oklab, var(--group-color) 13%, transparent);
border: 1px solid color-mix(in oklab, var(--group-color) 22%, transparent);
transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.nib-profiel-tile:hover .nib-profiel-tile-arrow {
background: color-mix(in oklab, var(--group-color) 24%, transparent);
border-color: color-mix(in oklab, var(--group-color) 40%, transparent);
transform: translateX(3px);
}
/* Gedimde actietegel (visitekaartje, koppeling) */
.nib-profiel-tile--muted {
background: var(--rz-panel-background-color);
}
.nib-profiel-tile--muted:hover {
background: color-mix(in oklab, var(--rz-text-secondary-color) 5%, var(--rz-panel-background-color));
}
.nib-profiel-tile--muted .nib-profiel-tile-icon {
background: color-mix(in oklab, var(--rz-text-secondary-color) 40%, var(--rz-panel-background-color));
color: rgba(255,255,255,0.75);
}
.nib-profiel-tile--muted:hover .nib-profiel-tile-icon {
background: color-mix(in oklab, var(--rz-text-secondary-color) 52%, var(--rz-panel-background-color));
}
.nib-profiel-tile--muted .nib-profiel-tile-arrow {
background: color-mix(in oklab, var(--rz-text-secondary-color) 8%, transparent);
border-color: color-mix(in oklab, var(--rz-text-secondary-color) 16%, transparent);
color: var(--rz-text-secondary-color);
}
.nib-profiel-tile--muted:hover .nib-profiel-tile-arrow {
background: color-mix(in oklab, var(--rz-text-secondary-color) 15%, transparent);
transform: translateX(2px);
}
/* Skeleton */
.nib-profiel-tile--sk .nib-profiel-tile-icon {
background: color-mix(in oklab, var(--group-color) 20%, var(--rz-panel-background-color));
}
.nib-profiel-tile--muted .nib-profiel-tile-lbl {
font-size: 0.78rem;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
/* Skeleton */
.nib-profiel-tile--sk {
cursor: default;
pointer-events: none;
background: color-mix(in oklab, var(--group-color) 4%, var(--rz-panel-background-color));
}
.nib-profiel-tile--sk::before {
opacity: 0.2;
}
/* ── Donker thema ── */
.rz-material-dark .nib-profiel-tile {
background: color-mix(in oklab, var(--group-color) 9%, var(--rz-panel-background-color));
}
.rz-material-dark .nib-profiel-tile:hover {
background: color-mix(in oklab, var(--group-color) 17%, var(--rz-panel-background-color));
}
.rz-material-dark .nib-profiel-tile-icon {
background: color-mix(in oklab, var(--group-color), black 32%);
color: rgba(255,255,255,0.85);
}
.rz-material-dark .nib-profiel-tile:hover .nib-profiel-tile-icon {
background: color-mix(in oklab, var(--group-color), black 44%);
}
.rz-material-dark .nib-profiel-tile-val {
color: color-mix(in oklab, var(--group-color), white 45%);
}
.rz-material-dark .nib-profiel-tile-arrow {
color: color-mix(in oklab, var(--group-color), white 30%);
background: color-mix(in oklab, var(--group-color) 18%, transparent);
border-color: color-mix(in oklab, var(--group-color) 30%, transparent);
}
.rz-material-dark .nib-profiel-tile--muted {
background: var(--rz-panel-background-color);
}
.rz-material-dark .nib-profiel-tile--muted:hover {
background: color-mix(in oklab, var(--rz-text-secondary-color) 8%, var(--rz-panel-background-color));
}
/* ══════════════════════════════════════════════════════════════
NibPageHero — Paginaheader: foto + infobalk eronder
Kleur-systeem identiek aan nib-card.css
══════════════════════════════════════════════════════════════ */
.nib-page-hero {
position: relative;
width: 100%;
container-type: inline-size;
/* Afgeleide kleuren — licht thema (zelfde percentages als nib-card) */
--_color:   var(--nph-color, #075082);
--_info-bg: color-mix(in oklab, var(--_color), white 52%);
--_border:  color-mix(in oklab, var(--_color), white 35%);
--_type:    color-mix(in oklab, var(--_color), black 10%);
--_title:   color-mix(in oklab, var(--_color), black 32%);
--_since:   color-mix(in oklab, var(--_color), black 12%);
}
/* ── Fotovlak ─────────────────────────────────────────── */
.nib-page-hero-photo {
position: relative;
width: 100%;
overflow: hidden;
background: color-mix(in oklab, var(--_color) 55%, #0a0a14);
/* Desktop: standaard 3:1, overschrijfbaar via --nph-ratio-desktop */
aspect-ratio: var(--nph-ratio-desktop, 3/1);
}
.nib-page-hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
.nib-page-hero-bg-color {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.nib-page-hero-bg-color.nib-sk {
border-radius: 0;
opacity: 0.6;
}
/* ── Acties rechtsboven in de foto ──────────────────────── */
.nib-page-hero-actions {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 4;
display: flex;
gap: 0.5rem;
max-width: calc(100% - 2rem);
flex-wrap: wrap;
justify-content: flex-end;
}
/* ── Infobalk onder foto ─────────────────────────────────── */
.nib-page-hero-infobar {
position: relative;
display: flex;
align-items: flex-start;
background: var(--_info-bg);
padding: calc(40px + 0.6rem) 1.5rem 1.25rem;
min-height: 4rem;
}
/* ── Avatar zweeft over de rand ──────────────────────────── */
.nib-page-hero-avatar {
position: absolute;
top: -2.5rem;
left: 1.5rem;
z-index: 5;
flex-shrink: 0;
}
/* Extra linker-ruimte als avatar aanwezig is */
.nib-page-hero-content--with-avatar {
padding-left: calc(80px + 1.5rem);
}
/* ── Tekstinhoud ─────────────────────────────────────────── */
.nib-page-hero-content {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1;
padding-top: 0;
}
.nib-page-hero-type {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--_type);
opacity: 0.8;
line-height: 1;
}
.nib-page-hero-title {
font-size: clamp(1.35rem, 2.8cqi, 2rem);
font-weight: 500;
color: var(--_title);
margin: 0.1rem 0 0;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-page-hero-since {
font-size: 0.75rem;
color: var(--_since);
line-height: 1;
letter-spacing: 0.02em;
margin-top: 0.1rem;
opacity: 0.75;
}
/* ── Actieknoppen rechts in de infobalk ─────────────────────── */
.nib-page-hero-info-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
align-self: center;
padding-left: 1rem;
}
/* Knoppen in de infobalk (fotograaf-acties) krijgen een donkerdere stijl */
.nib-page-hero-info-actions .rz-button {
filter: brightness(0.82) saturate(1.1);
}
.nib-page-hero-body {
margin-top: 0.5rem;
/*    display: flex;
flex-wrap: wrap;
*/    align-items: flex-start;
gap: 0.5rem;
overflow: hidden;
}
/* ── Skeleton ────────────────────────────────────────────── */
.nib-page-hero-sk-type {
height: 0.6rem;
width: 4rem;
border-radius: 3px;
opacity: 0.4;
}
.nib-page-hero-sk-title {
height: 1.7rem;
width: min(16rem, 55cqi);
margin-top: 0.35rem;
border-radius: 4px;
opacity: 0.35;
}
.nib-page-hero-sk-since {
height: 0.6rem;
width: 8rem;
margin-top: 0.3rem;
border-radius: 3px;
opacity: 0.25;
}
.nib-page-hero-sk-body {
margin-top: 0.5rem;
height: 100px;
display: flex;
flex-direction: column;
gap: 0.55rem;
justify-content: flex-start;
}
/* ── Avatar-rand matcht de infobalk-achtergrond ──────────── */
.nib-page-hero-avatar .profiel-avatar-img,
.nib-page-hero-avatar .profiel-avatar-placeholder {
border: 3px solid var(--_info-bg);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
/* ── Donker thema — zelfde percentages als nib-card dark ─── */
.rz-material-dark .nib-page-hero {
--_info-bg: color-mix(in oklab, var(--_color), black 55%);
--_border:  color-mix(in oklab, var(--_color), black 35%);
--_type:    color-mix(in oklab, var(--_color), white 55%);
--_title:   color-mix(in oklab, var(--_color), white 75%);
--_since:   color-mix(in oklab, var(--_color), white 50%);
}
/* ── Statsbalk onderaan (beide layouts) ─────────────────── */
.nib-page-hero-stats-bar {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.55rem 1.5rem;
background: color-mix(in oklab, var(--_color), black 8%);
font-size: 0.78rem;
color: color-mix(in oklab, var(--_color), white 80%);
flex-wrap: wrap;
}
.nib-page-hero-stats-bar > * {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* ── Photo layout: foto breed boven, info eronder ───────── */
.nib-page-hero--photo-layout {
display: flex;
flex-direction: column;
container-type: inline-size;
--_info-bg: color-mix(in oklab, var(--_color), white 52%);
}
.rz-material-dark .nib-page-hero--photo-layout {
--_info-bg: color-mix(in oklab, var(--_color), black 55%);
}
.nib-page-hero-photo-area {
position: relative;
width: 100%;
overflow: hidden;
min-height: 340px;
background: color-mix(in oklab, var(--_color), black 15%);
max-height: 80vh;
}
.nib-page-hero-photo-area > button,
.nib-page-hero-photo-area > button img {
width: 100%;
height: 100%;
min-height: 340px;
max-height: 80vh;
object-fit: contain;
display: block;
}
.nib-page-hero-photo-area > button {
display: block;
border: 0;
padding: 0;
background: transparent;
cursor: zoom-in;
}
.nib-page-hero-photo-info {
background: var(--_info-bg);
padding: 1.25rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.rz-material-dark .nib-page-hero--photo-layout {
--_info-bg: color-mix(in oklab, var(--_color), black 55%);
--_type:    color-mix(in oklab, var(--_color), white 55%);
--_title:   color-mix(in oklab, var(--_color), white 75%);
--_since:   color-mix(in oklab, var(--_color), white 50%);
}
@media (max-width: 600px) {
.nib-page-hero-photo-area,
.nib-page-hero-photo-area > button,
.nib-page-hero-photo-area > button img {
min-height: 220px;
}
.nib-page-hero-photo-info {
padding: 1rem;
}
}
/* ── Split layout ────────────────────────────────────────── */
.nib-page-hero--split {
display: flex;
flex-direction: column;
container-type: inline-size;
--_info-bg: color-mix(in oklab, var(--_color), white 52%);
}
.rz-material-dark .nib-page-hero--split {
--_info-bg: color-mix(in oklab, var(--_color), black 55%);
}
.nib-page-hero-split-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
background: var(--_info-bg);
}
.nib-page-hero-split-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 2rem;
min-width: 0;
}
.nib-page-hero-split-right {
position: relative;
overflow: hidden;
min-height: 320px;
background: color-mix(in oklab, var(--_color), white 20%);
}
.nib-page-hero-title--split {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
@media (max-width: 900px) {
.nib-page-hero-split-grid {
grid-template-columns: 1fr;
}
.nib-page-hero-split-left {
padding: 1.1rem 1rem;
order: 2;
}
.nib-page-hero-split-right {
order: 1;
min-height: 220px;
}
}
/* Laptop/tablet: standaard 2:1, overschrijfbaar via --nph-ratio-tablet */
@media (max-width: 1024px) {
.nib-page-hero-photo {
aspect-ratio: var(--nph-ratio-tablet, 2/1);
}
}
/* Mobiel: standaard 1:1, overschrijfbaar via --nph-ratio-mobile */
@media (max-width: 600px) {
.nib-page-hero-photo {
aspect-ratio: var(--nph-ratio-mobile, 1/1);
}
.nib-page-hero-infobar {
padding: calc(32px + 0.6rem) 1rem 1rem;
}
.nib-page-hero-content--with-avatar {
padding-left: calc(64px + 1rem);
}
.nib-page-hero-avatar {
left: 1rem;
top: -1.75rem;
}
}
/* ══════════════════════════════════════════════════════════════
Profiel subblok-header demo — 5 varianten
Alle varianten werken met --psd-color (de primaire kleur).
══════════════════════════════════════════════════════════════ */
.psd-page {
max-width: 860px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.psd-intro h1 { margin: 0 0 .4rem; }
.psd-intro p  { margin: 0; opacity: .7; }
.psd-concept-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
opacity: .5;
padding: 0 .25rem;
margin-bottom: -.75rem;
}
/* ── gemeenschappelijke subblok-basis ───────────────────── */
.psd-block {
border: none;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* Statistieken-rij (identiek aan huidige nib-profiel-hero-stats) */
.psd-stats {
display: flex;
gap: 0;
padding: 1.25rem 1.5rem;
flex-wrap: wrap;
}
.psd-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
flex: 1;
min-width: 80px;
cursor: pointer;
padding: .5rem;
transition: background .2s;
}
.psd-stat:hover { background: rgba(0,0,0,.04); }
.psd-stat-val {
font-size: 2rem;
font-weight: 500;
line-height: 1;
}
.psd-stat-lbl {
font-size: .7rem;
opacity: .65;
text-align: center;
}
/* ── Variant A – vaste strip links, rest neutraal ───────── */
.psd-block--a .psd-header {
display: flex;
align-items: stretch;
}
.psd-block--a .psd-strip {
width: 3.25rem;
min-width: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: color-mix(in oklab, var(--psd-color, #075082), black 16%);
}
.psd-block--a .psd-main {
flex: 1;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .2rem;
background: color-mix(in oklab, var(--psd-color, #075082), white 88%);
}
/* ── Variant B – strip + volle kleur header met gradient ── */
.psd-block--b .psd-header {
display: flex;
align-items: stretch;
background: linear-gradient(
to right,
color-mix(in oklab, var(--psd-color, #075082), black 10%) 0%,
color-mix(in oklab, var(--psd-color, #075082), white 8%) 100%
);
}
.psd-block--b .psd-strip {
width: 3.25rem;
min-width: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.9);
background: rgba(0,0,0,.15);
}
.psd-block--b .psd-main {
flex: 1;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .2rem;
color: #fff;
}
.psd-block--b .psd-main h2,
.psd-block--b .psd-main p { color: #fff; }
.psd-block--b .psd-main p { opacity: .72; }
/* ── Variant C – vervaagde kleur header, onderkant gradient → wit */
.psd-block--c .psd-header {
display: flex;
align-items: stretch;
background: linear-gradient(
to bottom,
color-mix(in oklab, var(--psd-color, #075082), white 72%) 0%,
color-mix(in oklab, var(--psd-color, #075082), white 92%) 100%
);
}
.psd-block--c .psd-strip {
width: 3.25rem;
min-width: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: var(--psd-color, #075082);
}
.psd-block--c .psd-main {
flex: 1;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .2rem;
color: color-mix(in oklab, var(--psd-color, #075082), black 35%);
}
.psd-block--c .psd-main p { opacity: .7; }
/* ── Variant D – diagonale gradient, modern ─────────────── */
.psd-block--d .psd-header {
display: flex;
align-items: stretch;
background: linear-gradient(
120deg,
color-mix(in oklab, var(--psd-color, #075082), black 5%)  0%,
color-mix(in oklab, var(--psd-color, #075082), white 20%) 60%,
color-mix(in oklab, var(--psd-color, #075082), white 35%) 100%
);
}
.psd-block--d .psd-strip {
width: 3.25rem;
min-width: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.85);
background: rgba(0,0,0,.18);
backdrop-filter: blur(4px);
}
.psd-block--d .psd-main {
flex: 1;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .2rem;
color: #fff;
}
.psd-block--d .psd-main h2,
.psd-block--d .psd-main p { color: #fff; }
.psd-block--d .psd-main p { opacity: .72; }
/* ── Variant E – subtiele tint, accent-lijn links ────────── */
.psd-block--e .psd-header {
display: flex;
align-items: stretch;
border-left: 4px solid var(--psd-color, #075082);
background: color-mix(in oklab, var(--psd-color, #075082), white 92%);
}
.psd-block--e .psd-strip {
width: 3rem;
min-width: 3rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--psd-color, #075082);
background: color-mix(in oklab, var(--psd-color, #075082), white 78%);
}
.psd-block--e .psd-main {
flex: 1;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .2rem;
color: color-mix(in oklab, var(--psd-color, #075082), black 40%);
}
.psd-block--e .psd-main p { opacity: .7; }
/* ── Donker thema ────────────────────────────────────────── */
.rz-material-dark .psd-block--a .psd-main {
background: color-mix(in oklab, var(--psd-color, #075082), black 62%);
}
.rz-material-dark .psd-block--c .psd-header {
background: linear-gradient(
to bottom,
color-mix(in oklab, var(--psd-color, #075082), black 35%) 0%,
color-mix(in oklab, var(--psd-color, #075082), black 52%) 100%
);
}
.rz-material-dark .psd-block--c .psd-main {
color: color-mix(in oklab, var(--psd-color, #075082), white 75%);
}
.rz-material-dark .psd-block--e .psd-header {
background: color-mix(in oklab, var(--psd-color, #075082), black 58%);
}
.rz-material-dark .psd-block--e .psd-strip {
color: color-mix(in oklab, var(--psd-color, #075082), white 70%);
background: color-mix(in oklab, var(--psd-color, #075082), black 50%);
}
.rz-material-dark .psd-block--e .psd-main {
color: color-mix(in oklab, var(--psd-color, #075082), white 80%);
}
/* ═══════════════════════════════════════════════════════════════
NIB-CARD  —  Generiek kaart-systeem
═══════════════════════════════════════════════════════════════
CSS-variabelen (inline style op .nib-card):
--card-color : #075082     hoofd-kleur (verplicht)
--card-ratio : 4 / 3      aspect-ratio hero-blok (optioneel)
Structuur:
.nib-card
.nib-card-hero                     bovenblok — content-gedreven (padding)
.nib-card-hero--media            modifier: foto-modus (aspect-ratio + overflow)
.nib-card-hero-img             optioneel: <img>
.nib-card-hero-placeholder     optioneel: placeholder zonder foto
[vrije content]                  optioneel: eigen markup (bijv. percentage)
.nib-card-badge                  optioneel: linksboven badge
.nib-card-info                     onderblok (lichter)
.nib-card-info-header            rij: titel links, actieknop rechts
.nib-card-info-text            flex-kolom: titel + beschrijving
.nib-card-title
.nib-card-desc
.nib-card-action               optioneel: ronde knop rechts
.nib-card-tags                   optioneel: tags
.nib-card-tag
═══════════════════════════════════════════════════════════════ */
/* ── Kaart wrapper ─────────────────────────────────────────── */
.nib-card {
--_color: var(--card-color, #075082);
--_ratio: var(--card-ratio, 4 / 3);
height: 100%;
/* Afgeleide kleuren — licht thema */
--_hero-bg:     color-mix(in oklab, var(--_color), white 35%);
--_hero-text:   color-mix(in oklab, var(--_color), black 25%);
--_hero-sub:    color-mix(in oklab, var(--_color), black 15%);
--_info-bg:     color-mix(in oklab, var(--_color), white 62%);
--_title-color: color-mix(in oklab, var(--_color), black 32%);
--_desc-color:  color-mix(in oklab, var(--_color), black 12%);
--_tag-bg:      color-mix(in oklab, var(--_color), white 48%);
--_tag-color:   color-mix(in oklab, var(--_color), black 22%);
--_action-bg:   color-mix(in oklab, var(--_color), white 42%);
--_action-hover:color-mix(in oklab, var(--_color), white 30%);
--_action-color:color-mix(in oklab, var(--_color), black 32%);
--_placeholder-bg: color-mix(in oklab, var(--_color), white 25%);
--_placeholder-icon: color-mix(in oklab, var(--_color), black 12%);
display: flex;
flex-direction: column;
cursor: pointer;
transition: opacity 0.15s;
}
.nib-card:hover {
opacity: 0.92;
}
/* ── Cover-modus: foto vult volledige kaart, info als frosted-glass overlay ── */
.nib-card--cover {
position: relative;
aspect-ratio: var(--_ratio);
overflow: hidden;
}
/* Hero vult volledige kaart — verwijdert eigen aspect-ratio */
.nib-card--cover .nib-card-hero {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: unset;
overflow: hidden;
}
/* Lichte scrim bovenin zodat de badge leesbaar blijft */
.nib-card--cover .nib-card-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 35%);
pointer-events: none;
z-index: 1;
}
/* Info-blok als frosted-glass overlay onderin */
.nib-card--cover .nib-card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 0.75rem 0.9rem 0.8rem;
gap: 0.3rem;
background: color-mix(in srgb,
color-mix(in oklab, var(--_color), black 30%) 72%,
transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.nib-card--cover .nib-card-title {
color: #fff;
font-size: 0.92rem;
}
.nib-card--cover .nib-card-tag {
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.85);
}
/* ── Hero (bovenblok) ──────────────────────────────────────── */
/* Basis = oorspronkelijke nib-coll-ov-hero */
.nib-card-hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 2.5rem 1.5rem;
background: var(--_hero-bg);
}
/* Media-modus (foto/placeholder): schaalbaar hero-vlak */
.nib-card-hero--media {
aspect-ratio: var(--_ratio);
overflow: hidden;
padding: 0;
gap: 0;
}
/* Foto in hero */
.nib-card-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease, filter 0.3s ease;
}
.nib-card:hover .nib-card-hero-img {
transform: scale(1.04);
filter: brightness(0.88);
}
/* Placeholder (geen foto) */
.nib-card-hero-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--_placeholder-bg);
width: 100%;
height: 100%;
}
.nib-card-hero-placeholder i {
font-size: 2.75rem;
color: var(--_placeholder-icon);
opacity: 0.5;
}
/* Badge linksboven in hero */
.nib-card-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.55rem;
border-radius: 20px;
font-size: 0.72rem;
font-weight: 600;
color: #facc15;
background: rgba(0, 0, 0, 0.58);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nib-card-badge:empty {
display: none;
}
.nib-card-badge i {
font-size: 0.6rem;
}
/* Altijd zichtbare inhoud rechtsboven in hero (bijv. score-badge) */
.nib-card-topright {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 3;
}
/* Score-badge op de fotokaart */
.nib-card-score-badge {
display: inline-flex;
align-items: center;
gap: 0.22rem;
padding: 0.18rem 0.45rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.72rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
background: rgba(0, 0, 0, 0.38);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.15s ease;
}
.nib-card-score-badge:hover {
background: rgba(0, 0, 0, 0.5);
}
/* Lege staat: foto nog zonder score (niet klikbaar) */
.nib-card-score-badge--empty {
cursor: default;
color: rgba(255, 255, 255, 0.7);
background: rgba(0, 0, 0, 0.3);
}
.nib-card-score-badge--empty:hover {
background: rgba(0, 0, 0, 0.3);
}
/* Actieknoppen rechtsboven in hero — verschijnen op hover */
.nib-card-hero-actions {
position: absolute;
top: 0.6rem;
right: 0.6rem;
display: flex;
gap: 0.35rem;
z-index: 3;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.nib-card:hover .nib-card-hero-actions {
opacity: 1;
transform: translateY(0);
}
.nib-card-hero-action {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 0.72rem;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, transform 0.15s ease;
}
.nib-card-hero-action:hover {
background: rgba(255, 255, 255, 0.22);
transform: scale(1.1);
color: #fff;
text-decoration: none;
}
/* Inhoud in hero (optionele wrapper, bijv. voor tekst over een afbeelding) */
.nib-card-hero-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-align: center;
color: var(--_hero-text);
}
/* Groot percentage-getal in hero */
.nib-card-hero-pct {
font-size: clamp(3rem, 7vw, 4.5rem);
font-weight: 600;
line-height: 1;
color: var(--_hero-text);
}
.nib-card-hero-pct small {
font-size: 0.4em;
font-weight: 600;
vertical-align: super;
margin-left: 0.05em;
}
/* Sub-tekst onder het percentage */
.nib-card-hero-count {
font-size: 0.85rem;
font-weight: 600;
color: var(--_hero-sub);
letter-spacing: 0.02em;
}
/* ── Info (onderblok) ──────────────────────────────────────── */
.nib-card-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.85rem 1.25rem 1rem;
background: var(--_info-bg);
flex: 1;
}
/* Header rij: titel-tekst links, actieknop rechts */
.nib-card-info-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
/* Tekstkolom (titel + beschrijving) */
.nib-card-info-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
/* Titel */
.nib-card-title {
margin: 0;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.3;
color: var(--_title-color);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Detail-link naast de titel */
.nib-card-detail-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.65rem;
border-radius: 6px;
border: 1px solid var(--_action-bg);
background: transparent;
color: var(--_action-color);
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
flex-shrink: 0;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.nib-card-detail-link .rzi {
font-size: 0.85rem;
}
.nib-card-detail-link:hover {
background: var(--_action-bg);
border-color: var(--_action-bg);
color: var(--_action-color);
text-decoration: none;
}
/* Meta-regel (bijv. datum + auteur) tussen titel en beschrijving */
.nib-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--_desc-color);
line-height: 1.4;
margin-top: 0.1rem;
}
.nib-card-meta i {
font-size: 0.68rem;
opacity: 0.6;
}
.nib-card-meta-sep {
opacity: 0.35;
}
/* Beschrijving */
.nib-card-desc {
margin: 0 0 0.6em 0;
font-size: 0.8rem;
color: var(--_desc-color);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Actieknop (rond, rechts naast titel) */
.nib-card-action {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--_action-bg);
color: var(--_action-color);
font-size: 0.82rem;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, transform 0.15s ease;
text-decoration: none;
margin-top: 0.1rem;
}
.nib-card-action:hover {
background: var(--_action-hover);
transform: scale(1.08);
color: var(--_action-color);
text-decoration: none;
}
/* ── Tags ──────────────────────────────────────────────────── */
.nib-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-top: auto;
}
.nib-card-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.7rem;
font-size: 0.78rem;
font-weight: 600;
border-radius: 4px;
background: var(--_tag-bg);
color: var(--_tag-color);
}
.nib-card-tag i {
font-size: 0.68rem;
opacity: 0.7;
}
/* Admin-only tag (bijv. datum gepubliceerd) — visueel onderscheidend */
.nib-card-tag--admin {
background: rgba(120, 80, 184, 0.12);
color: #7650b8;
}
.nib-card--cover .nib-card-tag--admin {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
/* Klikbare tag-links */
a.nib-card-tag-link {
text-decoration: none;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
a.nib-card-tag-link:hover {
background: var(--_tag-color);
color: var(--_info-bg);
text-decoration: none;
}
a.nib-card-tag-link:hover .nib-card-cc {
background: var(--_info-bg);
color: var(--_tag-color);
}
/* Locatie-tag: stad + landcode badge */
.nib-card-cc {
display: inline-block;
padding: 0.05rem 0.3rem;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
background: var(--_tag-color);
color: var(--_info-bg);
line-height: 1.4;
margin-left: 0.1rem;
}
/* Score-tag: ster-icoon + getal */
.nib-card-tag-score {
gap: 0.2rem;
margin-left: auto;
}
.nib-card-tag-score .rzi {
font-size: 0.75rem;
color: #d97706;
}
.nib-card-score-val {
font-size: 0.7rem;
font-weight: 700;
color: #d97706;
}
/* ── Skeleton ──────────────────────────────────────────────── */
.nib-card-sk {
display: flex;
flex-direction: column;
overflow: hidden;
}
.nib-card-sk-hero {
aspect-ratio: var(--card-ratio, 4 / 3);
}
/* Content-modus skeleton (geen aspect-ratio, vaste hoogte) */
.nib-card-sk-hero--content {
aspect-ratio: unset;
height: 140px;
}
.nib-card-sk-info {
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
flex: 1;
}
/* ── Dark mode ─────────────────────────────────────────────── */
.rz-material-dark .nib-card {
--_hero-bg:     color-mix(in oklab, var(--_color), black 25%);
--_hero-text:   color-mix(in oklab, var(--_color), white 55%);
--_hero-sub:    color-mix(in oklab, var(--_color), white 35%);
--_info-bg:     color-mix(in oklab, var(--_color), black 55%);
--_title-color: color-mix(in oklab, var(--_color), white 75%);
--_desc-color:  color-mix(in oklab, var(--_color), white 50%);
--_tag-bg:      color-mix(in oklab, var(--_color), black 35%);
--_tag-color:   color-mix(in oklab, var(--_color), white 55%);
--_action-bg:   color-mix(in oklab, var(--_color), black 35%);
--_action-hover:color-mix(in oklab, var(--_color), black 20%);
--_action-color:color-mix(in oklab, var(--_color), white 75%);
--_placeholder-bg: color-mix(in oklab, var(--_color), black 20%);
--_placeholder-icon: rgba(255, 255, 255, 0.5);
}
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
.nib-card-info {
padding: 1rem 1.1rem 1.1rem;
}
.nib-card-title {
font-size: 1.1rem;
}
.nib-card-desc {
font-size: 0.82rem;
}
.nib-card-hero-actions {
opacity: 1;
transform: none;
}
}
/* ══════════════════════════════════════════════════════════════
HomeCarousel — homepage hero carousel
Matcht de schaal van NibPageHero (nib-page-hero.css)
══════════════════════════════════════════════════════════════ */
/* ── Join-strip (niet-ingelogd) — compacte horizontale balk ─── */
.nib-join-strip {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.85rem 1.5rem;
background: color-mix(in oklab, var(--rz-primary) 10%, var(--rz-base-background-color));
border-top: 1px solid color-mix(in oklab, var(--rz-primary) 15%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--rz-primary) 15%, transparent);
flex-wrap: wrap;
}
.nib-join-strip-lead {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.nib-join-strip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: var(--rz-primary);
color: #fff;
flex-shrink: 0;
}
.nib-join-strip-icon .rzi { font-size: 1.1rem; }
.nib-join-strip-title {
display: block;
font-family: "allroundgothic", sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: var(--rz-text-color);
line-height: 1.2;
}
.nib-join-strip-proof {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--rz-text-secondary-color);
}
.nib-join-strip-proof .rzi { font-size: 0.8rem; }
/* Pill-lijst met voordelen */
.nib-join-strip-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.nib-join-strip-pills li {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
font-weight: 500;
padding: 0.25rem 0.65rem 0.25rem 0.5rem;
border-radius: 99px;
background: color-mix(in oklab, var(--rz-primary) 10%, transparent);
color: var(--rz-text-color);
white-space: nowrap;
}
.nib-join-strip-pills li .rzi {
font-size: 0.88rem;
color: var(--rz-primary);
}
.nib-join-strip-actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
/* Dark mode */
.rz-material-dark .nib-join-strip {
background: color-mix(in oklab, var(--rz-primary) 10%, var(--rz-base-background-color));
}
/* Responsive */
@media (max-width: 900px) {
.nib-join-strip-pills {
display: none;
}
}
@media (max-width: 560px) {
.nib-join-strip {
padding: 0.75rem 1rem;
gap: 0.75rem;
}
.nib-join-strip-actions {
width: 100%;
}
.nib-join-strip-actions .rz-button {
flex: 1;
}
}
/* ── Welkom banner (ingelogd) ─────────────────────────────── */
.nib-welcome-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 1rem 1.5rem;
background: color-mix(in oklab, var(--rz-primary) 8%, var(--rz-panel-background-color));
border-bottom: 1px solid color-mix(in oklab, var(--rz-primary) 18%, transparent);
}
.nib-welcome-banner-left {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.nib-welcome-avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: color-mix(in oklab, var(--rz-primary) 20%, var(--rz-panel-background-color));
display: flex;
align-items: center;
justify-content: center;
color: var(--rz-primary);
font-size: 1.4rem;
}
.nib-welcome-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nib-welcome-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.nib-welcome-greeting {
font-size: .78rem;
color: var(--rz-text-secondary-color);
line-height: 1.2;
}
.nib-welcome-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--rz-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-welcome-actions {
display: flex;
gap: .5rem;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Skeleton */
.nib-welcome-banner--sk .nib-welcome-avatar {
background: var(--rz-base-200);
}
@media (max-width: 700px) {
.nib-welcome-banner {
flex-direction: column;
align-items: flex-start;
}
.nib-welcome-actions {
width: 100%;
}
.nib-welcome-actions .rz-button {
flex: 1;
}
}
/* ── Nieuwsbrief banner ───────────────────────────────────── */
:root {
--nib-nl-color: #b06a00;
--nib-nl-bg: #fff8ee;
--nib-nl-border: #e8960a;
}
[data-theme="dark"], .dark-theme,
.rz-material-dark {
--nib-nl-color: #f0a832;
--nib-nl-bg: color-mix(in oklab, #b06a00 14%, var(--rz-base-background-color, #1a1a1a));
--nib-nl-border: #c97f10;
}
.nib-nl-banner {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 1.5rem;
background: var(--nib-nl-bg);
border-left: 5px solid var(--nib-nl-border);
}
.nib-nl-banner-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
background: color-mix(in oklab, var(--nib-nl-border) 20%, transparent);
color: var(--nib-nl-color);
font-size: 1.35rem;
flex-shrink: 0;
}
.nib-nl-banner-body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.nib-nl-banner-title {
font-weight: 700;
font-size: 1rem;
color: var(--nib-nl-color);
}
.nib-nl-banner-sub {
font-size: .82rem;
color: var(--rz-text-secondary-color);
margin-top: .1rem;
}
.nib-nl-banner-form {
display: flex;
gap: .5rem;
align-items: center;
flex-shrink: 0;
}
.nib-nl-banner-input {
width: 230px;
}
.nib-nl-banner-input .rz-inputtext {
height: 2.5rem;
padding: 0 .85rem;
border: 1px solid var(--nib-nl-border);
border-radius: var(--rz-border-radius);
background: var(--rz-panel-background-color);
color: var(--rz-text-color);
font-size: .88rem;
width: 100%;
outline: none;
}
.nib-nl-banner-input .rz-inputtext:focus {
border-color: var(--nib-nl-color);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--nib-nl-border) 25%, transparent);
}
.nib-nl-banner-success {
display: flex;
align-items: center;
gap: .4rem;
color: var(--rz-secondary);
font-weight: 600;
font-size: .9rem;
flex-shrink: 0;
}
@media (max-width: 700px) {
.nib-nl-banner {
flex-wrap: wrap;
}
.nib-nl-banner-form {
width: 100%;
}
.nib-nl-banner-input {
flex: 1;
width: auto;
}
.nib-nl-banner-input .rz-inputtext {
width: 100%;
}
}
/* ── Statistieken tegels ──────────────────────────────────── */
.nib-hp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: color-mix(in oklab, var(--rz-primary) 22%, transparent);
}
/* Iets donkerdere achtergrond dan de standaard profiel-tile (5% → 12%) */
.nib-hp-stats .nib-profiel-tile {
background: color-mix(in oklab, var(--group-color) 12%, var(--rz-panel-background-color));
}
.nib-hp-stats .nib-profiel-tile:hover {
background: color-mix(in oklab, var(--group-color) 18%, var(--rz-panel-background-color));
}
@media (max-width: 900px) {
.nib-hp-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.nib-hp-stats {
grid-template-columns: 1fr;
}
}
.nib-hc {
position: relative;
width: 100%;
overflow: hidden;
container-type: inline-size;
}
/* ── Track + slides ───────────────────────────────────────── */
.nib-hc-track {
display: flex;
transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.nib-hc-slide {
flex: 0 0 100%;
min-width: 100%;
/* Licht thema — afgeleide kleuren per slide op basis van --nph-color */
--_color:   var(--nph-color, var(--rz-primary));
--_bg:      color-mix(in oklab, var(--_color), white 82%);
--_bg-dark: color-mix(in oklab, var(--_color) 55%, #0a0a14);
--_type:    color-mix(in oklab, var(--_color), black 10%);
--_title:   color-mix(in oklab, var(--_color), black 28%);
--_desc:    color-mix(in oklab, var(--_color), black 20%);
}
/* ── Fotovlak (slide-inhoud bovenin) ──────────────────────── */
.nib-hc-photo {
position: relative;
width: 100%;
overflow: hidden;
}
/* Slide 1: logo/tekst split — zelfde aspect als nib-page-hero 3:1 */
.nib-hc-photo--split {
display: grid;
grid-template-columns: minmax(200px, 30%) 1fr;
min-height: 250px;
aspect-ratio: 3 / 1;
background: var(--_bg-dark);
}
.nib-hc-split-left {
background: var(--_color);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
/* Rechter paneel: lichte tint van de slidekelur */
.nib-hc-split-right,
.nib-hc-stats-panel {
background: var(--_bg);
}
.nib-hc-logo {
width: min(310px, 85%);
height: auto;
display: block;
}
.nib-hc-split-right {
padding: 1.65rem 1.85rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
justify-content: center;
}
.nib-hc-wordmark {
width: min(340px, 100%);
height: auto;
display: block;
}
.nib-hc-wordmark--light { display: none; }
.nib-hc-desc {
margin: 0;
color: var(--_desc);
font-size: 0.93rem;
line-height: 1.58;
max-width: 64ch;
}
/* ── Gedeelde label (boven tagline, slides 2+3) ──────────── */
.nib-hc-news-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: color-mix(in oklab, var(--_color), black 5%);
opacity: 0.75;
margin: 0;
}
/* Pakkende tagline */
.nib-hc-tagline {
margin: 0;
font-size: clamp(1rem, 2.2cqi, 1.3rem);
font-weight: 700;
color: var(--_title);
letter-spacing: -0.01em;
line-height: 1.2;
}
/* Feature badges */
.nib-hc-features {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.5rem;
margin: 0;
}
.nib-hc-feature {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
font-weight: 600;
padding: 0.28rem 0.65rem 0.28rem 0.45rem;
border-radius: 99px;
background: color-mix(in oklab, var(--_color), white 62%);
color: var(--_title);
white-space: nowrap;
}
.nib-hc-feature .rzi {
font-size: 0.95rem;
opacity: 0.85;
}
/* CTA knop — prominenter dan nib-hc-link */
.nib-hc-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
padding: 0.55rem 1.1rem;
border-radius: 6px;
background: var(--_color);
color: #fff;
width: fit-content;
transition: background 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 8px color-mix(in oklab, var(--_color), transparent 55%);
}
.nib-hc-cta .rzi {
font-size: 1rem;
}
.nib-hc-cta:hover {
text-decoration: none;
background: color-mix(in oklab, var(--_color), black 12%);
box-shadow: 0 4px 14px color-mix(in oklab, var(--_color), transparent 45%);
}
/* Slide 2: nieuws — links foto, rechts tekst (zelfde stijl als slide 1/3) */
.nib-hc-photo--news-split {
display: grid;
grid-template-columns: 1fr minmax(200px, 55%);
aspect-ratio: 3 / 1;
background: var(--_bg-dark);
}
.nib-hc-news-img {
overflow: hidden;
position: relative;
}
.nib-hc-news-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.nib-hc-news-img-placeholder {
width: 100%;
height: 100%;
background: color-mix(in oklab, var(--_color), black 30%);
}
/* Skeleton color van placeholder */
.nib-hc-photo--color {
aspect-ratio: 3 / 1;
background: var(--_bg-dark);
}
.nib-hc-bg-color {
position: absolute;
inset: 0;
border-radius: 0;
opacity: 0.6;
}
/* ── Slide 3: Statistieken ────────────────────────────────── */
.nib-hc-photo--stats {
display: grid;
grid-template-columns: 1fr 1fr;
aspect-ratio: 3 / 1;
background: var(--_bg-dark);
}
.nib-hc-stats-img {
overflow: hidden;
position: relative;
}
.nib-hc-stats-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.nib-hc-stats-img-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem 0.75rem;
background: linear-gradient(transparent, rgba(0,0,0,0.55));
color: rgba(255,255,255,0.9);
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-hc-stats-img-label .rzi {
font-size: 0.85rem;
flex-shrink: 0;
opacity: 0.85;
}
.nib-hc-stats-panel {
padding: 1.5rem 1.85rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
justify-content: center;
overflow: hidden;
}
/* Statistieken grid: 2×2 */
.nib-hc-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem 1rem;
}
.nib-hc-stat {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.nib-hc-stat-val {
font-size: clamp(1.4rem, 3cqi, 2.1rem);
font-weight: 700;
color: var(--_title);
line-height: 1;
letter-spacing: -0.02em;
}
.nib-hc-stat-lbl {
font-size: 0.73rem;
color: var(--_desc);
opacity: 0.85;
line-height: 1.2;
}
/* ── Link knop ────────────────────────────────────────────── */
.nib-hc-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
font-size: 0.83rem;
font-weight: 600;
padding: 0.36rem 0.78rem;
border-radius: 4px;
background: color-mix(in oklab, var(--_color), white 62%);
color: color-mix(in oklab, var(--_color), black 30%);
width: fit-content;
transition: background 0.15s;
}
.nib-hc-link .rzi {
font-size: 0.9rem;
}
.nib-hc-link:hover {
text-decoration: none;
background: color-mix(in oklab, var(--_color), white 52%);
}
/* ── Navigatiepijlen ──────────────────────────────────────── */
.nib-hc-arrow {
position: absolute;
top: 0;
bottom: 0;
width: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.28);
color: #fff;
border: none;
cursor: pointer;
z-index: 10;
transition: background 0.15s, opacity 0.2s;
font-size: 1.6rem;
}
.nib-hc-arrow--prev { left: 0; }
.nib-hc-arrow--next { right: 0; }
.nib-hc-arrow--hidden {
opacity: 0;
pointer-events: none;
}
.nib-hc-arrow:hover {
background: rgba(0, 0, 0, 0.46);
}
/* ── Dots ─────────────────────────────────────────────────── */
.nib-hc-dots {
position: absolute;
bottom: 0.75rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 10;
}
.nib-hc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.45);
cursor: pointer;
padding: 0;
transition: background 0.2s, transform 0.2s;
}
.nib-hc-dot--active {
background: #fff;
transform: scale(1.25);
}
/* ── Dark theme (systeem voorkeur + Radzen handmatige schakelaar) ── */
@media (prefers-color-scheme: dark) {
.nib-hc-slide {
--_bg:    color-mix(in oklab, var(--_color), black 52%);
--_title: color-mix(in oklab, var(--_color), white 75%);
--_desc:  color-mix(in oklab, var(--_color), white 55%);
--_type:  color-mix(in oklab, var(--_color), white 45%);
}
.nib-hc-feature {
background: color-mix(in oklab, var(--_color), black 35%);
color: color-mix(in oklab, var(--_color), white 72%);
}
.nib-hc-wordmark--dark  { display: none; }
.nib-hc-wordmark--light { display: block; }
}
/* Radzen handmatige dark mode — gelijke regels als prefers-color-scheme: dark */
.rz-material-dark .nib-hc-slide {
--_bg:    color-mix(in oklab, var(--_color), black 52%);
--_title: color-mix(in oklab, var(--_color), white 75%);
--_desc:  color-mix(in oklab, var(--_color), white 55%);
--_type:  color-mix(in oklab, var(--_color), white 45%);
}
.rz-material-dark .nib-hc-feature {
background: color-mix(in oklab, var(--_color), black 35%);
color: color-mix(in oklab, var(--_color), white 72%);
}
.rz-material-dark .nib-hc-link {
background: color-mix(in oklab, var(--_color), black 28%);
color: color-mix(in oklab, var(--_color), white 75%);
}
.rz-material-dark .nib-hc-link:hover {
background: color-mix(in oklab, var(--_color), black 18%);
}
.rz-material-dark .nib-hc-wordmark--dark  { display: none; }
.rz-material-dark .nib-hc-wordmark--light { display: block; }
/* ── Responsive: mobiel ──────────────────────────────────── */
@media (max-width: 640px) {
/* Slide 1 split: logo boven, tekst onder */
.nib-hc-photo--split {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
aspect-ratio: unset;
}
.nib-hc-split-left {
padding: 1.5rem;
min-height: 130px;
}
.nib-hc-split-right {
padding: 1.25rem;
gap: 0.7rem;
}
.nib-hc-feature {
font-size: 0.75rem;
padding: 0.22rem 0.55rem 0.22rem 0.38rem;
}
/* Slide 2 nieuws + slide 3 stats: foto boven, tekst onder */
.nib-hc-photo--news-split,
.nib-hc-photo--stats {
grid-template-columns: 1fr;
grid-template-rows: 200px auto;
aspect-ratio: unset;
}
.nib-hc-news-text {
padding: 1.25rem;
}
/* Pijlen kleiner */
.nib-hc-arrow {
width: 2.2rem;
font-size: 1.2rem;1
}
}
/* ══════════════════════════════════════════════════════════════
"Deze maand in de natuur" — seizoenssectie (HomeSeasonHighlight)
Volle breedte, flush blok. Géén gradient: subtiele tint + seizoenskleur
als accent (rand, eyebrow, iconen), in lijn met de rest van de site.
══════════════════════════════════════════════════════════════ */
.nib-season {
border-left: 4px solid var(--season);
background: color-mix(in oklab, var(--season) 25%, var(--rz-base-background-color));
color: var(--rz-text-color);
}
.nib-season-inner {
max-width: 1180px;
margin: 0 auto;
padding: 2.6rem 2rem 2.4rem;
}
.nib-season-head {
max-width: 64ch;
}
.nib-season-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.9rem;
margin: 1.9rem 0 1.6rem;
}
.nib-season-card {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.2rem 1.2rem 1.3rem;
border-radius: 12px;
background: var(--rz-card-background-color);
border: 1px solid color-mix(in oklab, var(--season) 22%, transparent);
transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}
.nib-season-card:hover {
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--season) 45%, transparent);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.nib-season-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 11px;
margin-bottom: 0.55rem;
background: color-mix(in oklab, var(--season) 14%, transparent);
}
.nib-season-card-icon .rzi {
font-size: 1.4rem;
color: var(--season);
}
.nib-season-card-title {
font-family: "allroundgothic", sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--rz-text-color);
}
.nib-season-card-text {
font-size: 0.875rem;
line-height: 1.5;
color: var(--rz-text-secondary-color);
}
.nib-season-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.4rem;
border-top: 1px solid color-mix(in oklab, var(--season) 18%, transparent);
}
.nib-season-tip {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0;
max-width: 64ch;
font-size: 0.9rem;
color: var(--rz-text-secondary-color);
}
.nib-season-tip .rzi {
font-size: 1.15rem;
color: var(--season);
flex-shrink: 0;
}
.nib-season-tip strong {
font-weight: 700;
color: var(--rz-text-color);
}
.nib-season-cta.rz-button {
color: var(--season) !important;
font-weight: 600 !important;
white-space: nowrap;
}
.nib-season-cta.rz-button:hover {
background: color-mix(in oklab, var(--season) 12%, transparent) !important;
}
@media (max-width: 760px) {
.nib-season-inner {
padding: 2.25rem 1.25rem 2rem;
}
.nib-season-grid {
grid-template-columns: 1fr;
gap: 0.6rem;
margin: 1.5rem 0 1.4rem;
}
.nib-season-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* ══════════════════════════════════════════════════════════════
Homepage sectiekop (boven contentgrids, bv. "Nieuwste foto's")
══════════════════════════════════════════════════════════════ */
.nib-home-section-head {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.6rem 1.5rem 1.1rem;
border-left: 4px solid var(--section-color, var(--rz-primary));
background: color-mix(in oklab, var(--section-color) 15%, transparent);
}
.nib-home-section-titles {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-right: auto;
}
.nib-home-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--section-color, var(--rz-primary));
}
.nib-home-section-eyebrow .rzi {
font-size: 0.85rem;
}
.nib-home-section-title {
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
font-weight: 500;
margin: 0;
color: var(--rz-text-color);
}
.nib-home-section-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.28rem 0.62rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
background: color-mix(in oklab, var(--section-color) 15%, transparent);
color: var(--section-color, var(--rz-primary));
}
.nib-home-section-badge .rzi {
font-size: 0.9rem;
}
.nib-home-section-action {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
font-family: "allroundgothic", sans-serif;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
color: var(--section-color, var(--rz-primary));
transition: gap 0.2s;
}
.nib-home-section-action:hover {
gap: 0.6rem;
}
.nib-home-section-action .rzi {
font-size: 1rem;
}
@media (max-width: 640px) {
.nib-home-section-head {
padding: 1.25rem 1rem 0.9rem;
gap: 0.55rem 0.8rem;
flex-wrap: wrap;
}
.nib-home-section-badge {
order: 3;
}
}
/* ══════════════════════════════════════════════════════════════
Ontdek-rijen (HomeDiscoverRow) — header + scrollende strip
══════════════════════════════════════════════════════════════ */
.nib-disc-track {
display: flex;
gap: 1px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
background: color-mix(in oklab, var(--section-color) 18%, transparent);
}
.nib-disc-track::-webkit-scrollbar {
height: 8px;
}
.nib-disc-track::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--section-color) 45%, transparent);
border-radius: 99px;
}
.nib-disc-track::-webkit-scrollbar-track {
background: transparent;
}
.nib-disc-card {
position: relative;
flex: 0 0 248px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
overflow: hidden;
text-decoration: none !important;
background: var(--rz-card-background-color, #fff);
transition: transform 0.18s ease;
}
.nib-disc-card:hover {
transform: translateY(-3px);
z-index: 2;
}
.nib-disc-card-img {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: color-mix(in oklab, var(--disc-color) 16%, var(--rz-card-background-color));
}
.nib-disc-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.nib-disc-card:hover .nib-disc-card-img img {
transform: scale(1.05);
}
.nib-disc-card-ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--disc-color) 88%, black 6%);
}
.nib-disc-card-ph .rzi {
font-size: 2.6rem;
color: rgba(255, 255, 255, 0.88);
}
.nib-disc-card-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.55rem;
border-radius: 99px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.nib-disc-card-badge .rzi {
font-size: 0.8rem;
}
.nib-disc-card-body {
display: flex;
flex-direction: column;
gap: 0.18rem;
flex: 1;
padding: 0.8rem 0.9rem 0.95rem;
border-top: 1px solid var(--rz-base-200, #e6eaee);
}
.nib-disc-card-title {
font-family: "allroundgothic", sans-serif;
font-size: 0.98rem;
font-weight: 600;
line-height: 1.25;
color: var(--rz-text-color);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nib-disc-card-sub {
font-size: 0.8rem;
font-style: italic;
color: var(--rz-text-secondary-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-disc-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.7rem;
margin-top: 0.35rem;
}
.nib-disc-card-meta span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.74rem;
color: var(--rz-text-secondary-color);
}
.nib-disc-card-meta .rzi {
font-size: 0.85rem;
color: var(--disc-color);
}
.nib-disc-card--sk {
pointer-events: none;
}
.nib-disc-card--sk .nib-disc-card-body {
border-top-color: transparent;
}
@media (max-width: 640px) {
.nib-disc-card {
flex-basis: 200px;
}
}
/* ══════════════════════════════════════════════════════════════
NatuurInBeeld — homepage
Rustig, professioneel: wit + grijstinten, diep-neutrale donkere
panelen en één accentkleur (thema-primary). De seizoenssectie
gebruikt secondary als enige tweede accent.
══════════════════════════════════════════════════════════════ */
/* ── Design tokens — licht thema ─────────────────────────────── */
:root {
--nib-hp-parchment:   #f4f6f8;            /* zachte grijze paginarand */
--nib-hp-card:        #ffffff;            /* witte panelen */
--nib-hp-forest:      #15191e;            /* diep neutraal donker paneel */
--nib-hp-forest-mid:  #1e242b;            /* iets lichter donker (statsband) */
--nib-hp-gold:        var(--rz-primary);  /* accent = thema-primary */
--nib-hp-gold-lt:     #e6eef5;            /* lichte tint voor cijfers op donker */
--nib-hp-text2:       #5b6770;
--nib-hp-muted:       #99a3ab;
}
/* ── Design tokens — donker thema (Radzen schakelaar) ─────────── */
.rz-material-dark {
--nib-hp-parchment:  var(--rz-base-background-color);
--nib-hp-card:       var(--rz-panel-background-color);
--nib-hp-forest:     #0f1216;
--nib-hp-forest-mid: #161b21;
--nib-hp-gold-lt:    #e6eef5;
--nib-hp-text2:      rgba(255, 255, 255, 0.55);
--nib-hp-muted:      rgba(255, 255, 255, 0.35);
}
/* ── Design tokens — donker thema (systeem voorkeur) ─────────── */
@media (prefers-color-scheme: dark) {
:root {
--nib-hp-parchment:  #0f1216;
--nib-hp-card:       #161b21;
--nib-hp-forest:     #0c0f12;
--nib-hp-forest-mid: #14181d;
--nib-hp-text2:      rgba(255, 255, 255, 0.55);
--nib-hp-muted:      rgba(255, 255, 255, 0.35);
}
}
/* ── Pagina-wrapper ─────────────────────────────────────────── */
.nib-home-wrap {
background: var(--nib-hp-parchment);
}
/* ── /fotos-stijl blokken (NibBlock + NibBlockHeader) ──────────
Inhoud-padding voor blok-bodies op de homepage. De blokken zelf
staan flush onder elkaar (zoals op /fotos). */
.nib-home-block-body {
padding: 1.25rem;
}
@media (max-width: 600px) {
.nib-home-block-body {
padding: 0.85rem 0.6rem;
}
}
/* ── Foto's-blok: PhotoGrid flush (geen padding-wrapper) ────── */
.nib-photos-block {
overflow: hidden;
}
.nib-photos-block > .photo-grid-container {
margin: 0;
padding: 0;
}
/* ── NibHomeHeader — gedeeld component voor alle homepage-blokken ─
Gebruik: <NibHomeHeader Icon="..." Eyebrow="..." Title="..." Subtitle="..." />
Variant "main" (groot, standaard) of "compact" (disc-rijen).       */
.nib-home-header {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 1rem;
background: color-mix(in oklab, var(--rz-primary) 20%, #ffffff) !important;
}
.nib-home-header--main    { padding: 2rem 2.5rem; }
.nib-home-header--compact { padding: 1.25rem 2rem; }
.rz-material-dark .nib-home-header {
background: color-mix(in oklab, var(--rz-primary) 8%, #1a2029) !important;
}
@media (prefers-color-scheme: dark) {
.nib-home-header {
background: color-mix(in oklab, var(--rz-primary) 8%, #1a2029) !important;
}
}
.nib-home-header-watermark {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: var(--rz-primary);
opacity: 0.07;
pointer-events: none;
z-index: 0;
line-height: 1;
}
.nib-home-header--main    .nib-home-header-watermark .rzi { font-size: 13rem; }
.nib-home-header--compact .nib-home-header-watermark .rzi { font-size: 8rem; }
.nib-home-header-body {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
}
.nib-home-header-eyebrow {
display: block;
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rz-primary);
margin-bottom: 0.2rem;
}
.nib-home-header--main .nib-home-header-title {
margin: 0 0 0.3rem;
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
font-weight: 700;
color: var(--rz-text-color);
line-height: 1.1;
}
.nib-home-header--compact .nib-home-header-title {
margin: 0;
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 700;
color: var(--rz-text-color);
line-height: 1.1;
}
.nib-home-header-subtitle {
margin: 0 0 1.1rem;
font-size: 0.92rem;
color: var(--rz-text-secondary-color);
line-height: 1.55;
max-width: 60ch;
}
.nib-home-header-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.nib-home-header-all-link {
position: relative;
z-index: 1;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--rz-primary);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease;
}
.nib-home-header-all-link:hover {
color: color-mix(in oklab, var(--rz-primary), black 15%);
}
@media (max-width: 700px) {
.nib-home-header--main {
padding: 1.5rem 1.25rem;
align-items: flex-start;
}
.nib-home-header--compact { padding: 1rem 1.25rem; }
}
/* Statistiek-blok — cijfers nu op lichte blok-achtergrond (was donkere balk) */
.nib-stats-block .nib-stats-val            { color: var(--rz-primary); }
.nib-stats-block .nib-stats-lbl            { color: var(--rz-text-secondary-color); }
.nib-stats-block .nib-stats-sep            { background: var(--rz-base-300); }
.nib-stats-block .nib-stats-item:hover     { background: var(--rz-base-100); }
.nib-stats-block .nib-stats-item--live .nib-stats-val { color: var(--rz-secondary); }
.nib-stats-block .nib-stats-item--sk .nib-stats-val   { background: var(--rz-base-200); }
/* Join-blok — lichte variant binnen NibBlock (was donkere CTA-sectie) */
.nib-join-block-body {
text-align: center;
max-width: 860px;
margin: 0 auto;
padding: 1.75rem 1.25rem 2rem;
}
.nib-join-block .nib-join-impact-benefit-icon {
background: color-mix(in oklab, var(--rz-primary) 10%, transparent);
border-color: var(--rz-base-200);
color: var(--rz-primary);
}
.nib-join-block .nib-join-impact-benefit-label { color: var(--rz-text-color); }
.nib-join-block .nib-join-impact-benefit-text  { color: var(--rz-text-secondary-color); }
.nib-join-block .nib-join-impact-proof         { color: var(--rz-text-secondary-color); }
.nib-join-block .nib-join-impact-ctas .rz-button.rz-button-light.rz-variant-text {
color: var(--rz-text-secondary-color) !important;
}
.nib-join-block .nib-join-impact-ctas .rz-button.rz-button-light.rz-variant-text:hover {
color: var(--rz-text-color) !important;
background: var(--rz-base-100) !important;
}
/* ══════════════════════════════════════════════════════════════
HERO — "Veldpost"
Links: community foto, rechts: portaal-paneel
══════════════════════════════════════════════════════════════ */
.nib-hero {
--nib-hero-max-h: 640px;       /* cap op de hero-hoogte (brede schermen) */
--hp-photo-color: var(--rz-primary);  /* fallback; Blazor zet dit via inline style */
display: flex;
height: clamp(420px, 58vw, var(--nib-hero-max-h));
}
/* ── Fotovlak ─────────────────────────────────────────────── */
/* Hoogte = hero-hoogte; breedte volgt via aspect-ratio. */
.nib-hero-photo {
position: relative;
overflow: hidden;
flex: 0 0 auto;
height: 100%;
aspect-ratio: 4 / 3;
background: color-mix(in srgb, var(--hp-photo-color) 22%, #000 78%);
}
/* <picture> mag de layout niet beïnvloeden — de <img> vult .nib-hero-photo */
.nib-hero-photo picture {
display: contents;
}
/* Klikbare hero-foto */
.nib-hero-photo-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
/* "Foto van de week"-label, linksboven */
.nib-hero-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.nib-hero-badge i {
font-size: 1rem;
color: #f6b500;
}
/* Titel + fotograaf, onderin over de foto */
.nib-hero-photo-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 2.5rem 1rem 0.9rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
color: #fff;
}
.nib-hero-photo-title {
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.nib-hero-photo-author {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
opacity: 0.95;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.nib-hero-photo-author i {
font-size: 0.95rem;
}
/* Tablet: vierkant (1/1) */
@media (max-width: 1024px) and (min-width: 701px) {
.nib-hero-photo {
aspect-ratio: 1 / 1;
}
}
.nib-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: opacity 0.55s ease, transform 0.6s ease;
}
/* Subtiele zoom bij hover op de klikbare hero-foto */
.nib-hero-photo-link:hover .nib-hero-img {
transform: scale(1.03);
}
.nib-hero-img--out { opacity: 0; }
.nib-hero-img-placeholder {
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--hp-photo-color) 22%, #000 78%);
display: flex;
align-items: center;
justify-content: center;
}
.nib-hero-placeholder-icon {
font-size: 4rem !important;
color: rgba(255, 255, 255, 0.18);
animation: nib-hero-sk-pulse 2.2s ease-in-out infinite;
user-select: none;
pointer-events: none;
}
@keyframes nib-hero-sk-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50%       { opacity: 1;   transform: scale(1.08); }
}
/* ── Portaal-paneel ───────────────────────────────────────── */
/* Paneel-lokale tokens: afgeleid van de PrimaryColor van de actieve foto.
Blazor zet --hp-photo-color via inline style; CSS valt terug op primary.
Licht thema: zachte tint van de fotokleur; donker thema: idem maar op dark bg. */
.nib-hero-panel {
--hp-bg:       color-mix(in oklab, var(--hp-photo-color) 15%, #ffffff);
--hp-text:     var(--rz-text-color);
--hp-dim:      var(--rz-text-secondary-color);
--hp-tile:     color-mix(in oklab, var(--hp-photo-color) 40%, #f5f6f8);
--hp-tile-hov: color-mix(in oklab, var(--hp-photo-color) 50%, #edeef1);
--hp-border:   color-mix(in oklab, var(--hp-photo-color) 35%, #e5e7ea);
flex: 1;
min-width: 0;
background: var(--hp-bg);
transition: background 0.55s ease;
display: flex;
flex-direction: column;
padding: 1.75rem 1.5rem 1.5rem;
gap: 1.5rem;
overflow: hidden;
}
/* Dark mode — donker paneel; tegels licht getint met fotokleur */
.rz-material-dark .nib-hero-panel {
--hp-bg:       var(--nib-hp-forest);
--hp-text:     rgba(255, 255, 255, 0.88);
--hp-dim:      rgba(255, 255, 255, 0.5);
--hp-tile:     color-mix(in oklab, var(--hp-photo-color) 12%, #1a2029);
--hp-tile-hov: color-mix(in oklab, var(--hp-photo-color) 18%, #20272f);
--hp-border:   color-mix(in oklab, var(--hp-photo-color) 12%, #212930);
}
@media (prefers-color-scheme: dark) {
.nib-hero-panel {
--hp-bg:       var(--nib-hp-forest);
--hp-text:     rgba(255, 255, 255, 0.88);
--hp-dim:      rgba(255, 255, 255, 0.5);
--hp-tile:     color-mix(in oklab, var(--hp-photo-color) 12%, #1a2029);
--hp-tile-hov: color-mix(in oklab, var(--hp-photo-color) 18%, #20272f);
--hp-border:   color-mix(in oklab, var(--hp-photo-color) 12%, #212930);
}
}
.nib-hero-panel-top {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
.nib-hero-logo {
height: 76px;
width: auto;
display: block;
margin-left: auto;          /* logo helemaal rechts */
}
/* Logo volgt het paneel: donker logo op wit paneel (licht thema),
wit logo op donker paneel (dark mode) — zelfde signalen als de paneel-bg. */
.nib-hero-logo--dark { display: none; }
.rz-material-dark .nib-hero-logo--light { display: none; }
.rz-material-dark .nib-hero-logo--dark  { display: block; }
@media (prefers-color-scheme: dark) {
.nib-hero-logo--light { display: none; }
.nib-hero-logo--dark  { display: block; }
}
.nib-hero-tagline {
margin: 0;
font-family: "allroundgothic", sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--hp-text);
line-height: 1.25;
max-width: 20ch;
}
/* ── Portaal-navigatiegrid ────────────────────────────────── */
.nib-hero-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
flex: 1;
}
.nib-hero-entry {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 0.1rem;
min-height: 124px;
padding: 1.1rem 1.1rem 1rem;
background: var(--hp-tile);
border: 1px solid var(--hp-border);
text-decoration: none !important;
transition: background 0.18s ease, border-color 0.18s ease;
}
/* Subtiele hover — geen kermis */
.nib-hero-entry:hover {
background: var(--hp-tile-hov);
border-color: color-mix(in oklab, var(--hp-photo-color) 35%, var(--hp-border));
}
/* Groot, vaag icoon als achtergrond-watermerk */
.nib-hero-entry-icon {
position: absolute;
right: -0.6rem;
top: 50%;
transform: translateY(-50%);
color: var(--hp-photo-color);
opacity: 0.12;
line-height: 1;
pointer-events: none;
z-index: 0;
transition: opacity 0.18s ease;
}
.nib-hero-entry-icon .rzi {
font-size: 5.5rem;
}
.nib-hero-entry:hover .nib-hero-entry-icon {
opacity: 0.16;
}
/* Inhoud boven het watermerk */
.nib-hero-entry-count,
.nib-hero-entry-label,
.nib-hero-entry-label--big {
position: relative;
z-index: 1;
}
/* Groot getal = focus van de tegel */
.nib-hero-entry-count {
font-family: "allroundgothic", sans-serif;
font-size: clamp(2.2rem, 3.2vw, 3rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
color: var(--hp-text);
font-variant-numeric: tabular-nums;
transition: color 0.18s ease;
}
.nib-hero-entry-label {
font-family: "allroundgothic", sans-serif;
font-size: 0.82rem;
color: var(--hp-dim);
white-space: nowrap;
}
/* Tegels zonder getal (Nieuws, Logboek): sectienaam groot als focus */
.nib-hero-entry-label--big {
font-size: clamp(1.25rem, 1.9vw, 1.6rem);
line-height: 1.05;
color: var(--hp-text);
transition: color 0.18s ease;
}
.nib-hero-entry:hover .nib-hero-entry-count,
.nib-hero-entry:hover .nib-hero-entry-label--big {
color: var(--hp-photo-color);
}
/* ── Paneel-onderkant: live stats + CTA ───────────────────── */
.nib-hero-panel-bottom {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding-top: 0.5rem;
border-top: 1px solid var(--hp-border);
}
.nib-hero-live {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
color: var(--hp-dim);
flex-wrap: wrap;
}
.nib-hero-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rz-secondary);
flex-shrink: 0;
animation: nib-live-blink 2s ease-in-out infinite;
}
@keyframes nib-live-blink {
0%, 100% { opacity: 1; }
50%       { opacity: 0.3; }
}
.nib-hero-live-sep {
opacity: 0.4;
}
.nib-hero-ctas {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
/* Inloggen — scheidingslijn + drie gelabelde knoppen */
.nib-hero-login-divider {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--hp-dim);
font-size: 0.72rem;
}
.nib-hero-login-divider::before,
.nib-hero-login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--hp-border);
}
.nib-hero-login-btns {
display: flex;
gap: 0.5rem;
}
.nib-hero-login-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.45rem 0.4rem;
border: 1px solid var(--hp-border);
border-radius: 8px;
background: var(--hp-tile);
font-size: 0.76rem;
font-weight: 500;
color: var(--rz-text-color);
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease;
}
.nib-hero-login-btn:hover {
background: var(--hp-tile-hov);
border-color: color-mix(in oklab, var(--hp-photo-color) 30%, var(--hp-border));
}
.nib-hero-login-btn .rzi {
font-size: 15px;
color: var(--hp-photo-color);
}
.nib-hero-login-btn svg {
display: block;
flex-shrink: 0;
}
/* ── Radzen button override: compacte primary CTA ─────────── */
.nib-hero-ctas .rz-button.rz-button-primary.rz-variant-filled {
background: var(--nib-hp-gold) !important;
border-color: var(--nib-hp-gold) !important;
color: #fff !important;
font-weight: 600 !important;
}
.nib-hero-ctas .rz-button.rz-button-primary.rz-variant-filled:hover {
background: color-mix(in oklab, var(--nib-hp-gold), white 12%) !important;
}
/* ══════════════════════════════════════════════════════════════
STATISTIEKEN BAND — donkere data-balk
══════════════════════════════════════════════════════════════ */
.nib-stats-band {
background: var(--nib-hp-forest-mid);
color: #fff;
}
.nib-stats-band-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0.75rem 1.75rem;
gap: 0;
}
.nib-stats-item {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 1.4rem;
text-decoration: none !important;
transition: background 0.15s;
border-radius: 4px;
}
.nib-stats-item:hover {
background: rgba(255,255,255,0.07);
}
.nib-stats-val {
font-family: "allroundgothic", sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--nib-hp-gold-lt);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.nib-stats-lbl {
font-size: 0.78rem;
color: rgba(255,255,255,0.5);
white-space: nowrap;
}
.nib-stats-sep {
width: 1px;
height: 1.4rem;
background: rgba(255,255,255,0.12);
flex-shrink: 0;
margin: 0 0.25rem;
}
.nib-stats-sep--live {
height: 1rem;
background: rgba(255,255,255,0.2);
margin: 0 0.75rem;
}
.nib-stats-item--live .nib-stats-val {
color: color-mix(in oklab, var(--rz-secondary), white 45%);
}
.nib-stats-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--rz-secondary);
flex-shrink: 0;
animation: nib-live-blink 2s ease-in-out infinite;
}
/* Skeleton voor stats */
.nib-stats-item--sk .nib-stats-val {
min-width: 3rem;
min-height: 1.25rem;
background: rgba(255,255,255,0.15);
border-radius: 4px;
color: transparent;
animation: nib-hero-sk-pulse 1.8s ease-in-out infinite;
}
@media (max-width: 640px) {
.nib-stats-band-inner {
padding: 0.5rem 1rem;
gap: 0;
}
.nib-stats-item {
padding: 0.4rem 0.7rem;
}
.nib-stats-val {
font-size: 1.05rem;
}
.nib-stats-sep { display: none; }
.nib-stats-sep--live { display: none; }
}
/* ══════════════════════════════════════════════════════════════
EDITORIAL FOTOGALERIJ — magazine-grid
══════════════════════════════════════════════════════════════ */
.nib-eg {
background: var(--nib-hp-parchment);
}
.rz-material-dark .nib-eg {
background: var(--rz-base-background-color);
}
/* Sectiekop: eyebrow + titel + sorteer-tabs + alle-link */
.nib-eg-head {
display: flex;
align-items: flex-end;
gap: 1rem;
padding: 1.75rem 1.5rem 1.1rem;
border-bottom: 1px solid var(--rz-base-200, #e6eaee);
}
.nib-eg-head-titles {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-right: auto;
}
.nib-eg-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rz-primary);
}
.nib-eg-eyebrow .rzi { font-size: 0.85rem; }
.nib-eg-title {
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
font-weight: 600;
margin: 0;
color: var(--rz-text-color);
}
.nib-eg-sort {
display: flex;
gap: 0.2rem;
align-items: center;
flex-shrink: 0;
}
.nib-eg-sort-btn {
font-size: 0.78rem;
font-weight: 500;
padding: 0.3rem 0.65rem;
border-radius: 99px;
border: none;
background: transparent;
color: var(--rz-text-secondary-color);
cursor: pointer;
transition: background 0.15s, color 0.15s;
font-family: inherit;
white-space: nowrap;
}
.nib-eg-sort-btn:hover {
background: color-mix(in oklab, var(--rz-primary) 10%, transparent);
color: var(--rz-primary);
}
.nib-eg-sort-btn--active {
background: color-mix(in oklab, var(--rz-primary) 14%, transparent);
color: var(--rz-primary);
font-weight: 700;
}
.nib-eg-all-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
font-family: "allroundgothic", sans-serif;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
color: var(--rz-primary);
flex-shrink: 0;
transition: gap 0.2s;
}
.nib-eg-all-link:hover { gap: 0.6rem; }
.nib-eg-all-link .rzi { font-size: 1rem; }
/* Hoofd-fotogrid: featured (groot) + 4 secondair */
.nib-eg-top {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
grid-template-rows: 220px 220px;
gap: 2px;
}
.nib-eg-photo {
position: relative;
overflow: hidden;
display: block;
background: color-mix(in oklab, var(--rz-primary) 8%, var(--rz-base-background-color));
text-decoration: none !important;
}
.nib-eg-photo--featured {
grid-row: 1 / 3;
}
.nib-eg-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.nib-eg-photo:hover img {
transform: scale(1.04);
}
/* Overlay met info onderin elke foto */
.nib-eg-photo-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.25rem 0.9rem 0.75rem;
background: linear-gradient(transparent, rgba(0,0,0,0.62));
display: flex;
flex-direction: column;
gap: 0.2rem;
pointer-events: none;
}
.nib-eg-photo-title {
font-family: "allroundgothic", sans-serif;
font-size: 0.9rem;
font-weight: 600;
color: #fff;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nib-eg-photo--featured .nib-eg-photo-title {
font-size: clamp(1rem, 1.8cqw, 1.35rem);
}
/* Skeleton placeholder foto */
.nib-eg-photo--sk {
pointer-events: none;
animation: nib-hero-sk-pulse 1.8s ease-in-out infinite;
background: color-mix(in oklab, var(--rz-primary) 12%, var(--rz-base-background-color));
}
/* Strip met meer foto's (horizontaal scroll) */
.nib-eg-strip {
display: flex;
gap: 2px;
overflow-x: auto;
scroll-snap-type: x proximity;
background: color-mix(in oklab, var(--rz-primary) 12%, transparent);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: color-mix(in oklab, var(--rz-primary) 40%, transparent) transparent;
}
.nib-eg-strip-photo {
flex: 0 0 200px;
height: 150px;
position: relative;
overflow: hidden;
scroll-snap-align: start;
background: color-mix(in oklab, var(--rz-primary) 8%, var(--rz-base-background-color));
display: block;
text-decoration: none !important;
}
.nib-eg-strip-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.nib-eg-strip-photo:hover img {
transform: scale(1.06);
}
.nib-eg-strip-photo--sk {
pointer-events: none;
animation: nib-hero-sk-pulse 1.8s ease-in-out infinite;
background: color-mix(in oklab, var(--rz-primary) 12%, var(--rz-base-background-color));
}
@media (max-width: 900px) {
.nib-eg-top {
grid-template-columns: 2fr 1fr;
grid-template-rows: 180px 180px;
}
}
@media (max-width: 600px) {
.nib-eg-head {
padding: 1.25rem 1rem 0.9rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.nib-eg-sort { order: 3; width: 100%; }
.nib-eg-top {
grid-template-columns: 1fr 1fr;
grid-template-rows: 150px 150px;
}
.nib-eg-photo--featured {
grid-column: 1 / 3;
grid-row: 1;
}
.nib-eg-strip-photo {
flex-basis: 150px;
height: 120px;
}
}
/* ══════════════════════════════════════════════════════════════
SEIZOENSSECTIE — herontworpen editorial
Overschrijft de stijlen in home-carousel.css
══════════════════════════════════════════════════════════════ */
.nib-season {
position: relative;
overflow: hidden;
border-left: none;
border-top: 4px solid var(--season);
background: var(--nib-hp-parchment);
color: var(--rz-text-color);
}
.rz-material-dark .nib-season {
background: var(--rz-base-background-color);
}
/* Watermark maandnaam op de achtergrond */
.nib-season::before {
content: attr(data-month);
position: absolute;
right: -0.05em;
top: -0.15em;
font-family: "allroundgothic", sans-serif;
font-size: clamp(7rem, 22vw, 20rem);
font-weight: 700;
color: var(--season);
opacity: 0.04;
line-height: 0.85;
pointer-events: none;
user-select: none;
white-space: nowrap;
}
.nib-season-inner {
position: relative;
z-index: 1;
max-width: 1180px;
margin: 0 auto;
padding: 2.8rem 2rem 2.5rem;
}
.nib-season-eyebrow {
color: var(--season);
}
.nib-season-title {
color: var(--rz-text-color);
}
.nib-season-card {
background: var(--nib-hp-card);
}
.rz-material-dark .nib-season-card {
background: var(--rz-card-background-color);
}
/* Tip als citaat-stijl */
.nib-season-tip {
font-style: italic;
border-left: 3px solid var(--season);
padding-left: 0.85rem;
}
/* ══════════════════════════════════════════════════════════════
NIEUWSSECTIE — magazine editorial grid
══════════════════════════════════════════════════════════════ */
.nib-news-section {
background: var(--nib-hp-card);
border-top: 1px solid color-mix(in oklab, var(--rz-primary) 12%, transparent);
}
.rz-material-dark .nib-news-section {
background: var(--rz-panel-background-color);
border-top-color: var(--rz-base-300);
}
.nib-news-head {
display: flex;
align-items: flex-end;
gap: 1rem;
padding: 1.75rem 1.5rem 1.1rem;
border-bottom: 1px solid var(--rz-base-200, #e6eaee);
}
.nib-news-head-titles { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.nib-news-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rz-primary);
}
.nib-news-eyebrow .rzi { font-size: 0.85rem; }
.nib-news-title {
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
font-weight: 600;
margin: 0;
color: var(--rz-text-color);
}
.nib-news-all-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
font-family: "allroundgothic", sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: var(--rz-primary);
white-space: nowrap;
flex-shrink: 0;
transition: gap 0.2s;
}
.nib-news-all-link:hover { gap: 0.6rem; }
.nib-news-all-link .rzi { font-size: 1rem; }
/* Grid: featured links + 3 kleiner rechts */
.nib-news-grid {
display: grid;
grid-template-columns: 5fr 3fr;
gap: 1px;
background: color-mix(in oklab, var(--rz-primary) 14%, transparent);
}
/* Featured artikel */
.nib-news-featured {
position: relative;
display: block;
text-decoration: none !important;
overflow: hidden;
}
.nib-news-featured-img {
aspect-ratio: 16 / 9;
overflow: hidden;
position: relative;
background: color-mix(in oklab, var(--rz-primary) 10%, var(--rz-base-background-color));
}
.nib-news-featured-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.nib-news-featured:hover .nib-news-featured-img img {
transform: scale(1.03);
}
.nib-news-featured-body {
padding: 1.25rem 1.5rem 1.5rem;
background: var(--nib-hp-card);
}
.rz-material-dark .nib-news-featured-body {
background: var(--rz-panel-background-color);
}
.nib-news-featured-date {
font-size: 0.72rem;
color: var(--rz-text-secondary-color);
margin-bottom: 0.5rem;
display: block;
}
.nib-news-featured-title {
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.1rem, 2cqw, 1.45rem);
font-weight: 700;
line-height: 1.2;
color: var(--rz-text-color);
margin: 0 0 0.6rem;
}
.nib-news-featured-excerpt {
font-size: 0.88rem;
line-height: 1.65;
color: var(--rz-text-secondary-color);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nib-news-featured-cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.85rem;
font-size: 0.82rem;
font-weight: 600;
color: var(--rz-primary);
text-decoration: none !important;
transition: gap 0.2s;
}
.nib-news-featured-cta:hover { gap: 0.6rem; }
.nib-news-featured-cta .rzi { font-size: 0.95rem; }
/* Rechterkolom: kleinere artikelen */
.nib-news-aside {
display: flex;
flex-direction: column;
background: var(--nib-hp-card);
gap: 1px;
}
.rz-material-dark .nib-news-aside {
background: var(--rz-panel-background-color);
}
.nib-news-item {
display: flex;
gap: 0.85rem;
padding: 1rem 1.25rem;
text-decoration: none !important;
background: var(--nib-hp-card);
flex: 1;
transition: background 0.15s;
align-items: flex-start;
}
.rz-material-dark .nib-news-item {
background: var(--rz-panel-background-color);
}
.nib-news-item:hover {
background: color-mix(in oklab, var(--rz-primary) 5%, var(--nib-hp-card));
}
.rz-material-dark .nib-news-item:hover {
background: color-mix(in oklab, var(--rz-primary) 8%, var(--rz-panel-background-color));
}
.nib-news-item-img {
width: 80px;
height: 60px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
background: color-mix(in oklab, var(--rz-primary) 12%, var(--rz-base-background-color));
}
.nib-news-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nib-news-item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.nib-news-item-date {
font-size: 0.68rem;
color: var(--rz-text-secondary-color);
}
.nib-news-item-title {
font-family: "allroundgothic", sans-serif;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.3;
color: var(--rz-text-color);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Skeletons */
.nib-news-sk-img {
animation: nib-hero-sk-pulse 1.8s ease-in-out infinite;
background: color-mix(in oklab, var(--rz-primary) 10%, var(--rz-base-background-color));
}
@media (max-width: 860px) {
.nib-news-grid {
grid-template-columns: 1fr;
}
.nib-news-aside {
flex-direction: row;
overflow-x: auto;
flex-wrap: nowrap;
}
.nib-news-item {
flex: 0 0 260px;
flex-direction: column;
}
.nib-news-item-img {
width: 100%;
height: 130px;
}
}
@media (max-width: 560px) {
.nib-news-head {
padding: 1.25rem 1rem 0.9rem;
}
}
/* ══════════════════════════════════════════════════════════════
JOIN IMPACT — donkere impactvolle sectie voor niet-ingelogden
══════════════════════════════════════════════════════════════ */
.nib-join-impact {
background: var(--nib-hp-forest);
color: #fff;
padding: 4rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
/* Subtiele achtergrond-textuur met CSS */
.nib-join-impact::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 60% 40% at 20% 50%, color-mix(in oklab, var(--rz-primary), transparent 82%) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 80% 30%, rgba(0,0,0,0.55) 0%, transparent 70%);
pointer-events: none;
}
.nib-join-impact-inner {
position: relative;
z-index: 1;
max-width: 840px;
margin: 0 auto;
}
.nib-join-impact-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--nib-hp-gold);
margin-bottom: 0.85rem;
}
.nib-join-impact-eyebrow .rzi { font-size: 0.88rem; }
.nib-join-impact-headline {
font-family: "allroundgothic", sans-serif;
font-size: clamp(1.9rem, 5vw, 3.2rem);
font-weight: 700;
line-height: 1.1;
margin: 0 0 1rem;
color: #fff;
}
.nib-join-impact-sub {
font-size: 1rem;
color: rgba(255,255,255,0.6);
line-height: 1.65;
margin: 0 auto 2.5rem;
max-width: 52ch;
}
.nib-join-impact-benefits {
display: flex;
justify-content: center;
gap: 1.5rem 2.5rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
list-style: none;
padding: 0;
}
.nib-join-impact-benefit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
width: 130px;
}
.nib-join-impact-benefit-icon {
width: 3rem;
height: 3rem;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--nib-hp-gold);
}
.nib-join-impact-benefit-icon .rzi { font-size: 1.4rem; }
.nib-join-impact-benefit-label {
font-family: "allroundgothic", sans-serif;
font-size: 0.85rem;
font-weight: 600;
color: rgba(255,255,255,0.82);
text-align: center;
}
.nib-join-impact-benefit-text {
font-size: 0.74rem;
color: rgba(255,255,255,0.42);
text-align: center;
line-height: 1.4;
}
.nib-join-impact-ctas {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.nib-join-impact-proof {
margin-top: 1.25rem;
font-size: 0.78rem;
color: rgba(255,255,255,0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.nib-join-impact-proof .rzi { font-size: 0.88rem; opacity: 0.7; }
/* Radzen button overrides in impact sectie */
.nib-join-impact-ctas .rz-button.rz-button-primary.rz-variant-filled {
background: var(--nib-hp-gold) !important;
border-color: var(--nib-hp-gold) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
padding: 0.65rem 1.75rem !important;
box-shadow: 0 4px 18px color-mix(in oklab, var(--rz-primary), transparent 65%) !important;
}
.nib-join-impact-ctas .rz-button.rz-button-primary.rz-variant-filled:hover {
background: color-mix(in oklab, var(--nib-hp-gold), white 12%) !important;
}
.nib-join-impact-ctas .rz-button.rz-button-light.rz-variant-text {
color: rgba(255,255,255,0.6) !important;
font-size: 0.95rem !important;
}
.nib-join-impact-ctas .rz-button.rz-button-light.rz-variant-text:hover {
color: rgba(255,255,255,0.9) !important;
background: rgba(255,255,255,0.07) !important;
}
@media (max-width: 600px) {
.nib-join-impact {
padding: 3rem 1.25rem;
}
.nib-join-impact-benefits {
gap: 1.25rem 1.5rem;
}
.nib-join-impact-benefit {
width: 110px;
}
}
/* ══════════════════════════════════════════════════════════════
HERO responsive
══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
.nib-hero {
flex-direction: column;
height: auto;
}
/* Gestapeld: 4/3 banner boven het paneel */
.nib-hero-photo {
aspect-ratio: 4 / 3;
height: auto;
width: 100%;
}
.nib-hero-panel {
padding: 1.25rem 1rem;
gap: 1rem;
}
.nib-hero-logo { height: 44px; }
.nib-hero-tagline { display: none; }
.nib-hero-entry {
min-height: 96px;
padding: 0.85rem 0.8rem;
}
.nib-hero-entry-icon .rzi { font-size: 3.4rem; }
.nib-hero-entry-count { font-size: 1.9rem; }
.nib-hero-entry-label { font-size: 0.74rem; }
.nib-hero-entry-label--big { font-size: 1.15rem; }
}
/* ══════════════════════════════════════════════════════════════
DONKER THEMA — systeem voorkeur
Tokens (--nib-hp-parchment / --nib-hp-card) handelen
achtergronden automatisch af. Dit blok dekt de resterende
kleur-waarden die Radzen-variabelen gebruiken.
══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
/* Pagina-wrapper */
.nib-home-wrap {
background: #111410;
}
/* Redactionele fotogalerij */
.nib-eg {
background: #111410;
}
/* Seizoenssectie */
.nib-season {
background: #111410;
}
.nib-season-card {
background: #1a1d18;
border-color: rgba(255, 255, 255, 0.06);
}
.nib-season-card:hover {
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
/* Watermark iets zichtbaarder op donkere achtergrond */
.nib-season::before {
opacity: 0.06;
}
/* Nieuwssectie */
.nib-news-section {
background: #1a1d18;
border-top-color: rgba(255, 255, 255, 0.08);
}
.nib-news-featured-body {
background: #1a1d18;
}
.nib-news-aside {
background: #1a1d18;
}
.nib-news-item {
background: #1a1d18;
}
.nib-news-item:hover {
background: color-mix(in oklab, var(--rz-primary) 10%, #1a1d18);
}
/* Statistieken-balk: scheidingslijnen */
.nib-stats-sep {
background: rgba(255, 255, 255, 0.18);
}
}
/* ─── Social Media Admin Page ─── */
/* ─── Foto-detail dialog ─── */
.nib-sm-dialog {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.nib-sm-dialog-previews {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.nib-sm-dialog-preview-card {
flex: 1;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.nib-sm-dialog-preview-label {
font-size: 0.78rem;
font-weight: 600;
opacity: 0.7;
display: flex;
align-items: center;
gap: 0.35rem;
}
.nib-sm-dialog-preview-fb {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--rz-base-300);
}
.nib-sm-dialog-preview-ig {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--rz-base-300);
}
.nib-sm-dialog-caption-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.4rem;
}
.nib-sm-dialog-label {
font-size: 0.85rem;
font-weight: 600;
}
.nib-social-sk-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 1rem;
}
.nib-social-photo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 1rem;
}
@media (max-width: 600px) {
.nib-social-photo-grid,
.nib-social-sk-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.nib-social-photo-item {
position: relative;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
transition: border-color 0.15s ease, transform 0.1s ease;
background: var(--rz-base-200);
}
.nib-social-photo-item:hover {
border-color: var(--rz-primary-lighter);
transform: scale(1.02);
}
.nib-social-photo-selected {
border-color: var(--rz-primary) !important;
}
.nib-social-photo-item img {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
}
.nib-social-photo-empty {
width: 100%;
height: 120px;
background: var(--rz-base-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--rz-base-500);
font-size: 1.5rem;
}
.nib-social-photo-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
font-size: 0.75rem;
background: var(--rz-base-background);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
gap: 0.25rem;
}
.nib-social-photo-info > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nib-social-photo-rating {
color: #f59e0b;
font-weight: 600;
flex-shrink: 0;
}
.nib-social-photo-check {
position: absolute;
top: 6px;
right: 6px;
font-size: 1.25rem;
color: var(--rz-primary);
background: white;
border-radius: 50%;
line-height: 1;
}
/* ─── Compose form ─── */
.nib-social-compose {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* ─── Preview ─── */
.nib-social-preview-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.nib-social-preview-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
min-width: 220px;
}
.nib-social-preview-label {
font-size: 0.85rem;
font-weight: 600;
}
.nib-social-preview-img {
width: 100%;
border-radius: 8px;
display: block;
border: 1px solid var(--rz-base-300);
}
.nib-social-preview-square {
aspect-ratio: 1 / 1;
object-fit: cover;
}
/* ─── Platforms ─── */
.nib-social-platforms {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.nib-social-platform-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border-radius: 8px;
border: 2px solid var(--rz-base-300);
background: var(--rz-base-background);
flex: 1;
min-width: 180px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.nib-social-platform-card.nib-social-platform-active {
border-color: var(--rz-primary);
background: var(--rz-primary-lighter);
}
.nib-social-platform-card.nib-social-platform-disabled {
opacity: 0.5;
}
.nib-social-platform-header {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nib-social-platform-name {
font-weight: 600;
font-size: 1rem;
}
.nib-social-platform-note {
font-size: 0.75rem;
color: var(--rz-danger);
}
/* ─── Webhook badge ─── */
.nib-social-webhook-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--rz-success-dark, #1a7f4b);
background: var(--rz-success-lighter, #d4f5e5);
border: 1px solid var(--rz-success-light, #6dd5a6);
border-radius: 20px;
padding: 0.2rem 0.7rem;
margin-bottom: 0.6rem;
}
/* ─── Char counter ─── */
.nib-social-char-counter {
font-size: 0.8rem;
opacity: 0.6;
}
.nib-social-char-counter.nib-social-char-warn {
color: var(--rz-warning);
opacity: 1;
}
.nib-social-char-counter.nib-social-char-over {
color: var(--rz-danger);
opacity: 1;
font-weight: 600;
}
/* ─── Payload preview ─── */
.nib-social-payload-toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--rz-text-secondary-color);
background: none;
border: none;
cursor: pointer;
padding: 0.3rem 0;
opacity: 0.7;
transition: opacity 0.15s ease;
}
.nib-social-payload-toggle:hover {
opacity: 1;
}
.nib-social-payload-pre {
font-size: 0.75rem;
background: var(--rz-base-200);
border: 1px solid var(--rz-base-300);
border-radius: 6px;
padding: 0.75rem 1rem;
overflow-x: auto;
white-space: pre;
margin-top: 0.4rem;
color: var(--rz-text-color);
line-height: 1.5;
}
/* ── Inbox page ──────────────────────────────────── */
.nib-inbox-page {
display: flex;
flex-direction: column;
}
.nib-inbox-block {
margin-bottom: 0;
}
.nib-inbox-unread-badge {
display: inline-flex;
align-items: center;
background: #075082;
color: #fff;
font-size: .75rem;
font-weight: 600;
padding: .15rem .55rem;
border-radius: 10px;
margin-left: .5rem;
}
/* ── Inbox list ──────────────────────────────────── */
.nib-inbox-list {
display: flex;
flex-direction: column;
}
.nib-inbox-item {
display: flex;
align-items: center;
gap: .6rem;
padding: .6rem 1.25rem;
cursor: pointer;
border-bottom: 1px solid var(--rz-base-200, #e8e8e8);
transition: background .15s;
font-size: .88rem;
color: var(--rz-text-secondary-color, #666);
}
.nib-inbox-item:hover {
background: var(--rz-base-100, #f5f5f5);
}
.nib-inbox-item--unread {
background: color-mix(in srgb, #075082 5%, transparent);
font-weight: 600;
color: var(--rz-text-color, #222);
}
.nib-inbox-item--unread:hover {
background: color-mix(in srgb, #075082 9%, transparent);
}
.nib-inbox-item-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #075082;
flex-shrink: 0;
}
.nib-inbox-item-sender-name {
flex-shrink: 0;
min-width: 8rem;
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nib-inbox-item-subject {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nib-inbox-item-date {
flex-shrink: 0;
font-size: .75rem;
color: var(--rz-text-tertiary-color, #999);
white-space: nowrap;
font-weight: 400;
}
/* ── Inbox empty state ───────────────────────────── */
.nib-inbox-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 3rem;
color: var(--rz-text-tertiary-color, #999);
}
.nib-inbox-empty i {
font-size: 2.5rem;
opacity: .5;
}
.nib-inbox-empty p {
margin: 0;
font-size: .9rem;
}
/* ── Inbox skeleton ──────────────────────────────── */
.nib-inbox-item-sk {
display: flex;
flex-direction: column;
gap: .5rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--rz-base-200, #e8e8e8);
}
/* ── Send message dialog ─────────────────────────── */
.nib-send-msg-dialog {
display: flex;
flex-direction: column;
gap: 1rem;
padding: .5rem 0;
}
.nib-send-msg-to {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
}
.nib-send-msg-label {
font-size: .8rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #666);
}
.nib-send-msg-recipient {
font-weight: 600;
color: var(--rz-text-color, #333);
}
.nib-send-msg-photo {
display: flex;
align-items: center;
gap: .4rem;
font-size: .85rem;
color: #075082;
background: color-mix(in srgb, #075082 8%, transparent);
padding: .4rem .75rem;
border-radius: 6px;
}
.nib-send-msg-field {
display: flex;
flex-direction: column;
gap: .3rem;
}
.nib-send-msg-error {
display: flex;
align-items: center;
gap: .4rem;
font-size: .85rem;
color: var(--rz-danger, #d32f2f);
padding: .5rem .75rem;
background: color-mix(in srgb, var(--rz-danger, #d32f2f) 8%, transparent);
border-radius: 6px;
}
.nib-send-msg-actions {
display: flex;
justify-content: flex-end;
gap: .5rem;
padding-top: .5rem;
}
/* ── Message detail dialog ───────────────────────── */
.nib-msg-detail {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.nib-msg-detail-subject {
font-size: 1.15rem;
font-weight: 600;
color: var(--rz-text-color, #222);
padding-bottom: .75rem;
margin: 0;
}
.nib-msg-detail-meta {
display: flex;
flex-direction: column;
gap: .3rem;
padding: .75rem 0;
border-top: 1px solid var(--rz-base-200, #e8e8e8);
border-bottom: 1px solid var(--rz-base-200, #e8e8e8);
}
.nib-msg-detail-meta-row {
display: flex;
align-items: baseline;
gap: .5rem;
font-size: .85rem;
line-height: 1.5;
}
.nib-msg-detail-meta-label {
flex-shrink: 0;
min-width: 3rem;
color: var(--rz-text-tertiary-color, #999);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .03em;
}
.nib-msg-detail-meta-value {
color: var(--rz-text-color, #333);
}
.nib-msg-detail-meta-photo {
color: #075082;
}
.nib-msg-detail-meta-photo i {
font-size: .78rem;
}
.nib-msg-detail-body {
font-size: .9rem;
line-height: 1.7;
color: var(--rz-text-color, #333);
white-space: pre-wrap;
word-break: break-word;
padding-top: 1rem;
}
/* ── Unread badge in main menu ───────────────────── */
.nib-unread-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: #d32f2f;
color: #fff;
font-size: .65rem;
font-weight: 600;
border-radius: 10px;
padding: 0 4px;
line-height: 1;
}
.nib-user-btn-wrap {
position: relative;
display: inline-flex;
}
/* ═══════════════════════════════════════
MIJN DIEREN  —  /mijn/dieren
═══════════════════════════════════════ */
/* ── Groep headers (scoped tot dieren-blok) ─────────────── */
.nib-dieren-block .animal-group-header {
display: flex;
align-items: center;
gap: 0.6rem;
}
/* Hoofdgroep (klasse) — lichte tint van groen */
.nib-dieren-block .animal-group-order {
background: color-mix(in oklab, var(--group-color, #3a7d44), white 82%);
color: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
padding: 0.55rem 1rem;
margin-left: 0;
}
.nib-dieren-block .animal-group-order .animal-group-type {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: color-mix(in oklab, var(--group-color, #3a7d44), white 60%);
color: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
padding: 0.15rem 0.5rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.nib-dieren-block .animal-group-order .animal-group-name {
color: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
font-size: 0.95rem;
font-weight: 600;
}
.nib-dieren-block .animal-group-order .animal-group-count {
background: color-mix(in oklab, var(--group-color, #3a7d44), white 60%);
color: color-mix(in oklab, var(--group-color, #3a7d44), black 25%);
}
/* Subgroep (familie) — iets lichtere tint, geen inspringing, geen border */
.nib-dieren-block .animal-group-family {
background: color-mix(in oklab, var(--group-color, #3a7d44), white 91%);
border-left: none;
padding: 0.4rem 1rem;
margin-left: 0;
}
.nib-dieren-block .animal-group-family .animal-group-type {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: color-mix(in oklab, var(--group-color, #3a7d44), white 72%);
color: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
padding: 0.15rem 0.5rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.nib-dieren-block .animal-group-family .animal-group-name {
color: color-mix(in oklab, var(--group-color, #3a7d44), black 35%);
font-size: 0.88rem;
font-weight: 600;
}
.nib-dieren-block .animal-group-family .animal-group-count {
background: color-mix(in oklab, var(--group-color, #3a7d44), white 72%);
color: color-mix(in oklab, var(--group-color, #3a7d44), black 25%);
}
/* Donker thema */
.rz-material-dark .nib-dieren-block .animal-group-order {
background: color-mix(in oklab, var(--group-color, #3a7d44), black 35%);
color: color-mix(in oklab, var(--group-color, #3a7d44), white 80%);
}
.rz-material-dark .nib-dieren-block .animal-group-order .animal-group-type {
background: color-mix(in oklab, var(--group-color, #3a7d44), black 20%);
color: color-mix(in oklab, var(--group-color, #3a7d44), white 80%);
}
.rz-material-dark .nib-dieren-block .animal-group-order .animal-group-name {
color: color-mix(in oklab, var(--group-color, #3a7d44), white 85%);
}
.rz-material-dark .nib-dieren-block .animal-group-order .animal-group-count {
background: color-mix(in oklab, var(--group-color, #3a7d44), black 20%);
color: color-mix(in oklab, var(--group-color, #3a7d44), white 80%);
}
.rz-material-dark .nib-dieren-block .animal-group-family {
background: color-mix(in oklab, var(--group-color, #3a7d44), black 55%);
border-left: none;
}
.rz-material-dark .nib-dieren-block .animal-group-family .animal-group-type {
background: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
color: color-mix(in oklab, var(--group-color, #3a7d44), white 70%);
}
.rz-material-dark .nib-dieren-block .animal-group-family .animal-group-name {
color: color-mix(in oklab, var(--group-color, #3a7d44), white 75%);
}
.rz-material-dark .nib-dieren-block .animal-group-family .animal-group-count {
background: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
color: color-mix(in oklab, var(--group-color, #3a7d44), white 70%);
}
/* ═══════════════════════════════════════
DIEREN OVERZICHT  —  /dieren
Zelfde patroon als mijn-dieren, scoped
op .nib-animals-main-block
═══════════════════════════════════════ */
.nib-animals-main-block .animal-group-header {
display: flex;
align-items: center;
gap: 0.6rem;
}
.nib-animals-main-block .animal-group-order {
background: color-mix(in oklab, var(--group-color, #1a6b3c), white 82%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 30%);
padding: 0.55rem 1rem;
margin-left: 0;
}
.nib-animals-main-block .animal-group-order .animal-group-type {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: color-mix(in oklab, var(--group-color, #1a6b3c), white 60%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 30%);
padding: 0.15rem 0.5rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.nib-animals-main-block .animal-group-order .animal-group-name {
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 30%);
font-size: 0.95rem;
font-weight: 600;
}
.nib-animals-main-block .animal-group-order .animal-group-count {
background: color-mix(in oklab, var(--group-color, #1a6b3c), white 60%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 25%);
}
.nib-animals-main-block .animal-group-family {
background: color-mix(in oklab, var(--group-color, #1a6b3c), white 91%);
border-left: none;
padding: 0.4rem 1rem;
margin-left: 0;
}
.nib-animals-main-block .animal-group-family .animal-group-type {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
background: color-mix(in oklab, var(--group-color, #1a6b3c), white 72%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 30%);
padding: 0.15rem 0.5rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.nib-animals-main-block .animal-group-family .animal-group-name {
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 35%);
font-size: 0.88rem;
font-weight: 600;
}
.nib-animals-main-block .animal-group-family .animal-group-count {
background: color-mix(in oklab, var(--group-color, #1a6b3c), white 72%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), black 25%);
}
.rz-material-dark .nib-animals-main-block .animal-group-order {
background: color-mix(in oklab, var(--group-color, #1a6b3c), black 35%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 80%);
}
.rz-material-dark .nib-animals-main-block .animal-group-order .animal-group-type {
background: color-mix(in oklab, var(--group-color, #1a6b3c), black 20%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 80%);
}
.rz-material-dark .nib-animals-main-block .animal-group-order .animal-group-name {
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 85%);
}
.rz-material-dark .nib-animals-main-block .animal-group-order .animal-group-count {
background: color-mix(in oklab, var(--group-color, #1a6b3c), black 20%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 80%);
}
.rz-material-dark .nib-animals-main-block .animal-group-family {
background: color-mix(in oklab, var(--group-color, #1a6b3c), black 55%);
border-left: none;
}
.rz-material-dark .nib-animals-main-block .animal-group-family .animal-group-type {
background: color-mix(in oklab, var(--group-color, #1a6b3c), black 30%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 70%);
}
.rz-material-dark .nib-animals-main-block .animal-group-family .animal-group-name {
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 75%);
}
.rz-material-dark .nib-animals-main-block .animal-group-family .animal-group-count {
background: color-mix(in oklab, var(--group-color, #1a6b3c), black 30%);
color: color-mix(in oklab, var(--group-color, #1a6b3c), white 70%);
}
/* ── Search ─────────────────────────────────────────── */
.nib-dieren-search {
display: flex;
align-items: center;
position: relative;
}
.nib-dieren-search-input {
height: 2rem;
padding: 0 2rem 0 0.75rem;
border: 1px solid color-mix(in oklab, var(--group-color, #3a7d44), white 55%);
border-radius: 1rem;
background: color-mix(in oklab, var(--group-color, #3a7d44), white 88%);
color: color-mix(in oklab, var(--group-color, #3a7d44), black 30%);
font-size: 0.85rem;
outline: none;
width: 13rem;
transition: border-color .15s;
}
.nib-dieren-search-input:focus {
border-color: color-mix(in oklab, var(--group-color, #3a7d44), white 25%);
}
.nib-dieren-search-icon {
position: absolute;
right: 0.6rem;
font-size: 0.75rem;
color: color-mix(in oklab, var(--group-color, #3a7d44), white 30%);
pointer-events: none;
}
/* ── Empty state ─────────────────────────────────────── */
.nib-dieren-block .nib-coll-empty {
padding: 3rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: color-mix(in oklab, var(--group-color, #3a7d44), black 15%);
font-size: 0.95rem;
}
.nib-dieren-block .nib-coll-empty i {
font-size: 2.5rem;
opacity: 0.35;
}
/* ── Animal card grid ────────────────────────────────────── */
.nib-animal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1px;
}
/* ── Animal card — gebaseerd op nib-cover-card ───────────── */
.nib-animal-card {
--cc-bar:      color-mix(in oklab, var(--pc-color, #3a7d44), white 50%);
--cc-bar-text: color-mix(in oklab, var(--pc-color, #3a7d44), black 48%);
--cc-bar-sub:  color-mix(in oklab, var(--pc-color, #3a7d44), black 22%);
--cc-bar-icon: color-mix(in oklab, var(--pc-color, #3a7d44), black 12%);
--cc-detail:   color-mix(in oklab, var(--pc-color, #3a7d44), black 8%);
--cc-detail-h: color-mix(in oklab, var(--pc-color, #3a7d44), black 18%);
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 0;
cursor: pointer;
background: color-mix(in oklab, var(--pc-color, #3a7d44), black 40%);
display: block;
}
.rz-material-dark .nib-animal-card {
--cc-bar:      color-mix(in oklab, var(--pc-color, #3a7d44), black 42%);
--cc-bar-text: #fff;
--cc-bar-sub:  rgba(255,255,255,0.78);
--cc-bar-icon: rgba(255,255,255,0.6);
--cc-detail:   rgba(255,255,255,0.18);
--cc-detail-h: rgba(255,255,255,0.32);
}
/* Foto */
.nib-animal-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease, filter 0.3s ease;
}
.nib-animal-card:hover .nib-animal-card-img {
transform: scale(1.04);
filter: brightness(0.92);
}
/* Foto count linksboven — zelfde als nib-cover-card-score */
.nib-animal-card-score {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.55rem;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 600;
color: #fff;
background: rgba(0,0,0,0.52);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nib-animal-card-score i {
font-size: 0.58rem;
}
/* Info-balk onderin — identiek aan nib-cover-card-bar */
.nib-animal-card-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
background: var(--cc-bar);
}
.nib-animal-card-bar-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.nib-animal-card-title {
margin: 0;
font-size: 0.88rem;
font-weight: 600;
color: var(--cc-bar-text);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-animal-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.5rem;
}
.nib-animal-card-meta-item {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.65rem;
color: var(--cc-bar-sub);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nib-animal-card-meta-item i {
font-size: 0.54rem;
color: var(--cc-bar-icon);
}
/* Pijl-knop rechts in de balk — identiek aan nib-cover-card-detail */
.nib-animal-card-detail {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--cc-detail);
color: var(--cc-bar-text);
font-size: 0.68rem;
flex-shrink: 0;
}
/* Skeleton */
.nib-animal-card-sk {
aspect-ratio: 4 / 3;
}
/* ── Contact pagina ──────────────────────────────────────── */
/* Kleur-variabelen obv de blok-kleur (zelfde idee als foto-detail: header + content afgeleid) */
.nib-static-block-page .nib-gd-block,
.nib-contact-page .nib-gd-block {
--contact-color: var(--group-color, #075082);
--contact-bg-1: color-mix(in oklab, var(--contact-color), white 20%);
--contact-bg-2: color-mix(in oklab, var(--contact-color), white 35%);
--contact-bg-3: color-mix(in oklab, var(--contact-color), white 40%);
--contact-bg-4: color-mix(in oklab, var(--contact-color), white 55%);
--contact-bg-5: color-mix(in oklab, var(--contact-color), white 72%);
}
.rz-material-dark .nib-static-block-page .nib-gd-block,
.rz-material-dark .nib-contact-page .nib-gd-block {
--contact-bg-1: color-mix(in oklab, var(--contact-color), black 10%);
--contact-bg-2: color-mix(in oklab, var(--contact-color), black 20%);
--contact-bg-3: color-mix(in oklab, var(--contact-color), black 30%);
--contact-bg-4: color-mix(in oklab, var(--contact-color), black 45%);
--contact-bg-5: color-mix(in oklab, var(--contact-color), black 70%);
}
/* Content achtergrond (afgeleid van headerkleur) */
.nib-static-block-page .nib-gd-block .nib-over-content,
.nib-contact-page .nib-gd-block .nib-over-content {
background: var(--contact-bg-5);
border-top: 1px solid var(--contact-bg-3);
padding: 1rem;
}
.nib-contact-form {
max-width: 640px;
}
.nib-contact-success {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.2rem;
border-radius: 8px;
background: color-mix(in srgb, #1a6b3c 10%, transparent);
border: 1px solid color-mix(in srgb, #1a6b3c 30%, transparent);
color: var(--rz-text-color);
max-width: 640px;
}
.nib-contact-success i {
font-size: 1.6rem;
color: #1a6b3c;
flex-shrink: 0;
margin-top: .1rem;
}
.nib-contact-success strong {
display: block;
margin-bottom: .25rem;
}
.nib-contact-success p {
margin: 0;
font-size: .9rem;
opacity: .85;
}
/* ── Visitekaartje pagina ───────────────────────────────────────────── */
.nib-vk-block {
--group-color: #1565a8;
}
.nib-vk-content {
padding: 2rem 1.5rem;
min-height: 420px;
}
/* ── Kies-foto knop ──────────────────────────────────────────────────── */
.nib-vk-actions-top {
margin-bottom: 2rem;
}
.nib-vk-choose-btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .6rem 1.4rem;
background: var(--group-color, #1565a8);
color: #fff;
border: none;
border-radius: 6px;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
transition: opacity .15s;
}
.nib-vk-choose-btn:hover { opacity: .85; }
/* ── Opties (subtitel, e-mail) ───────────────────────────────────────── */
.nib-vk-options {
display: flex;
flex-direction: column;
gap: .75rem;
margin-bottom: 1.75rem;
max-width: 480px;
}
.nib-vk-option-row {
display: flex;
align-items: center;
gap: .75rem;
}
.nib-vk-option-row--check {
font-size: .9rem;
color: var(--rz-text-color);
cursor: pointer;
}
.nib-vk-option-row--check input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--group-color, #1565a8);
}
.nib-vk-option-label {
font-size: .82rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #888);
min-width: 70px;
}
.nib-vk-option-input {
flex: 1;
padding: .4rem .75rem;
border: 1px solid var(--rz-border-color, #ddd);
border-radius: 5px;
font-size: .9rem;
background: var(--rz-base-background-color, #fff);
color: var(--rz-text-color);
}
.nib-vk-option-input:focus {
outline: none;
border-color: var(--group-color, #1565a8);
}
.nib-vk-cards-row {
display: flex;
gap: 2.5rem;
flex-wrap: wrap;
align-items: flex-start;
}
.nib-vk-card-wrap {
display: flex;
flex-direction: column;
gap: .75rem;
}
.nib-vk-card-label {
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--rz-text-secondary-color, #888);
}
/* ── Preview wrapper + snijlijn overlay ──────────────────────────────── */
/*
* De PNG is gegenereerd op print-formaat inclusief 3 mm bleed (1074 × 720 px).
* Bleed als % van de print-afmeting:
*   horizontaal: 35 / 1074 ≈ 3.26 %
*   verticaal:   35 / 720  ≈ 4.86 %
* De ::after pseudo-element toont de snijlijn als witte stippelijn op exact
* die positie. In het PDF zit de bleed er al correct in; de overlay is
* puur visueel en alleen zichtbaar in de browser-preview.
*/
.nib-vk-card-img-wrap {
position: relative;
display: inline-block;
width: 510px;
max-width: 100%;
}
.nib-vk-card-img-wrap::after {
content: '';
position: absolute;
inset: 4.86% 3.26%;          /* = bleed-zone in procenten */
border: 1.5px dashed rgba(255, 255, 255, 0.55);
border-radius: 3px;
pointer-events: none;
}
.nib-vk-preview-img {
width: 100%;
aspect-ratio: 1074 / 720;    /* werkelijke PNG-verhouding incl. bleed */
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0,0,0,.22);
display: block;
}
/* ── Skeleton (zelfde aspect ratio) ─────────────────────────────────── */
.nib-vk-skeleton-card {
width: 510px;
max-width: 100%;
aspect-ratio: 1074 / 720;
border-radius: 6px;
}
/* ── Download knop ───────────────────────────────────────────────────── */
.nib-vk-download-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1.1rem;
background: #1a9456;
color: #fff;
border: none;
border-radius: 6px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: opacity .15s;
align-self: flex-start;
}
.nib-vk-download-btn:hover   { opacity: .85; }
.nib-vk-download-btn:disabled { opacity: .4; cursor: not-allowed; }
/* ── Genereren label ─────────────────────────────────────────────────── */
.nib-vk-generating-label {
margin-top: 1rem;
color: var(--rz-text-secondary-color, #888);
font-size: .9rem;
display: flex;
align-items: center;
gap: .5rem;
}
/* ── Lege staat ──────────────────────────────────────────────────────── */
.nib-vk-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 4rem 2rem;
color: var(--rz-text-disabled-color, #888);
text-align: center;
}
.nib-vk-empty-icon {
font-size: 3.5rem;
opacity: .25;
}
/* ── Bestelknop ──────────────────────────────────────────────────────── */
.nib-vk-order-row {
margin-top: 1.5rem;
}
.nib-vk-order-btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .65rem 1.6rem;
background: #1a6b2e;
color: #fff;
border: none;
border-radius: 6px;
font-size: .95rem;
font-weight: 600;
cursor: pointer;
transition: opacity .15s;
}
.nib-vk-order-btn:hover { opacity: .88; }
/* ── Print-order dialoog ─────────────────────────────────────────────── */
.nib-print-dialog {
padding: .5rem 0;
}
.nib-print-dialog-intro {
font-size: .9rem;
color: var(--rz-text-secondary-color, #666);
margin-bottom: 1.25rem;
}
.nib-print-dialog-form {
display: flex;
flex-direction: column;
gap: .9rem;
margin-bottom: 1.5rem;
}
.nib-print-dialog-row {
display: flex;
gap: .75rem;
}
.nib-print-dialog-row--half > * { flex: 1; }
.nib-print-dialog-row--wide .nib-print-dialog-field--grow { flex: 1; }
.nib-print-dialog-row--wide .nib-print-dialog-field--small { width: 90px; flex-shrink: 0; }
.nib-print-dialog-field {
display: flex;
flex-direction: column;
gap: .3rem;
}
.nib-print-dialog-field label {
font-size: .78rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #666);
}
.nib-print-dialog-field input {
padding: .42rem .7rem;
border: 1px solid var(--rz-border-color, #ddd);
border-radius: 5px;
font-size: .9rem;
background: var(--rz-base-background-color, #fff);
color: var(--rz-text-color);
}
.nib-print-dialog-field input:focus {
outline: none;
border-color: #1a6b2e;
}
.nib-print-dialog-validation {
color: #c0392b;
font-size: .85rem;
margin: 0;
}
.nib-print-dialog-actions {
display: flex;
justify-content: flex-end;
gap: .75rem;
}
.nib-print-dialog-btn {
padding: .5rem 1.2rem;
border: 1px solid var(--rz-border-color, #ccc);
border-radius: 5px;
background: transparent;
font-size: .9rem;
cursor: pointer;
color: var(--rz-text-color);
transition: background .12s;
}
.nib-print-dialog-btn:hover { background: var(--rz-base-100, #f5f5f5); }
.nib-print-dialog-btn--primary {
background: #1a6b2e;
color: #fff;
border-color: #1a6b2e;
}
.nib-print-dialog-btn--primary:hover { background: #145524; border-color: #145524; }
.nib-print-dialog-loading,
.nib-print-dialog-success,
.nib-print-dialog-error {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
padding: 2rem 0;
text-align: center;
}
/* ── Afwerking / hoeken opties ────────────────────────────────────────── */
.nib-print-dialog-options {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.nib-print-dialog-radio-group {
display: flex;
flex-direction: column;
gap: .4rem;
margin-top: .2rem;
}
.nib-print-dialog-radio {
display: flex;
align-items: center;
gap: .5rem;
padding: .35rem .65rem;
border: 1px solid var(--rz-border-color, #ddd);
border-radius: 5px;
font-size: .88rem;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.nib-print-dialog-radio input[type="radio"] {
accent-color: #1a6b2e;
cursor: pointer;
}
.nib-print-dialog-radio--active {
border-color: #1a6b2e;
background: #f0faf3;
}
.nib-print-dialog-extra {
font-size: .78rem;
color: var(--rz-text-secondary-color, #888);
margin-left: auto;
}
/* ── Totaalprijs ──────────────────────────────────────────────────────── */
.nib-print-dialog-total {
font-size: .95rem;
color: var(--rz-text-color);
margin-bottom: 1.25rem;
}
.nib-print-dialog-total strong {
color: #1a6b2e;
}
.nib-print-dialog-loading i { font-size: 2rem; color: #1a6b2e; }
.nib-print-dialog-success i { font-size: 2.5rem; color: #1a6b2e; }
.nib-print-dialog-error   i { font-size: 2.5rem; color: #c0392b; }
.nib-print-dialog-orderid {
font-size: .85rem;
color: var(--rz-text-secondary-color, #666);
}
.nib-print-dialog-price {
font-size: 1.2rem;
font-weight: 600;
color: #1a6b2e;
}
.nib-print-dialog-errormsg {
font-size: .85rem;
color: #c0392b;
max-width: 380px;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.nib-vk-preview-img,
.nib-vk-skeleton-card {
width: 100%;
}
}
@media (max-width: 600px) {
.nib-vk-cards-row {
flex-direction: column;
}
}
/* ══════════════════════════════════════════════════════════════════════
Bestelpagina (/mijn/visitekaartje/bestellen)
══════════════════════════════════════════════════════════════════════ */
/* ── Formulierinhoud binnen sub-blokken ──────────────────────────────── */
.nib-order-form-body {
padding: 1.5rem 1.5rem 1.75rem 1.5rem;
max-width: 660px;
}
/* ── Afwerking: twee kolommen naast elkaar ───────────────────────────── */
.nib-order-finish-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 2.5rem;
max-width: 720px;
}
@media (max-width: 640px) {
.nib-order-finish-grid {
grid-template-columns: 1fr;
}
}
/* ── Factuuradres velden (met ruimte boven) ──────────────────────────── */
.nib-order-billing-fields {
margin-top: 1.1rem;
}
/* ── Prijsbadge in sub-blok header (afwerking) ───────────────────────── */
.nib-order-total-badge {
font-size: 1.05rem;
font-weight: 600;
color: #1a6b2e;
white-space: nowrap;
margin-left: auto;
padding-right: .25rem;
}
/* ── Formuliervelden ─────────────────────────────────────────────────── */
.nib-order-field {
display: flex;
flex-direction: column;
gap: .3rem;
margin-bottom: .85rem;
}
.nib-order-field:last-child { margin-bottom: 0; }
.nib-order-field label {
font-size: .78rem;
font-weight: 600;
color: var(--rz-text-secondary-color, #666);
}
.nib-order-field input {
padding: .45rem .75rem;
border: 1px solid var(--rz-border-color, #ddd);
border-radius: 5px;
font-size: .9rem;
background: var(--rz-base-background-color, #fff);
color: var(--rz-text-color);
transition: border-color .12s;
}
.nib-order-field input:focus {
outline: none;
border-color: #1565a8;
}
/* ── Input in photo-exif-item context ───────────────────────────────── */
.nib-vk-order-card .photo-exif-item {
background: color-mix(in oklab, var(--photo-color), white 88%);
}
.nib-vk-order-card .photo-exif-section-title {
border-bottom-color: color-mix(in oklab, var(--photo-color), white 75%);
}
.nib-order-input {
width: 100%;
border: none;
background: transparent;
font-size: 0.9375rem;
font-weight: 500;
color: var(--photo-text);
outline: none;
padding: 0;
font-family: inherit;
box-sizing: border-box;
}
.nib-order-input::placeholder {
color: var(--photo-text-accent);
opacity: 0.5;
}
.nib-order-input:focus {
opacity: 1;
}
.nib-order-row {
display: flex;
gap: .75rem;
}
.nib-order-row--half > * { flex: 1; }
/* ── Checkbox rij ────────────────────────────────────────────────────── */
.nib-order-check-row {
display: flex;
align-items: center;
gap: .65rem;
font-size: .9rem;
color: var(--rz-text-color);
margin-bottom: .5rem;
}
.nib-order-check-row input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #1565a8;
flex-shrink: 0;
}
/* ── Radio groep (afwerking / hoeken) ────────────────────────────────── */
.nib-order-radio-group {
display: flex;
flex-direction: column;
gap: .4rem;
margin-top: .25rem;
}
.nib-order-radio {
display: flex;
align-items: center;
gap: .55rem;
padding: .4rem .7rem;
border: 1px solid var(--rz-border-color, #ddd);
border-radius: 5px;
font-size: .88rem;
cursor: pointer;
transition: border-color .12s, background .12s;
max-width: 380px;
}
.nib-order-radio input[type="radio"] {
accent-color: #1a6b2e;
cursor: pointer;
}
.nib-order-radio--active {
border-color: #1a6b2e;
background: #f0faf3;
}
.nib-order-extra {
font-size: .78rem;
color: var(--rz-text-secondary-color, #888);
margin-left: auto;
}
/* ── Totaalprijs ─────────────────────────────────────────────────────── */
.nib-order-total {
font-size: 1.05rem;
color: var(--rz-text-color);
margin-bottom: 1rem;
}
.nib-order-total strong { color: #1a6b2e; font-size: 1.15rem; }
/* ── Validatiefout ───────────────────────────────────────────────────── */
.nib-order-validation {
color: #c0392b;
font-size: .85rem;
margin: .5rem 0 0 0;
}
/* ── Link-knop (voorwaarden) ─────────────────────────────────────────── */
.nib-order-link-btn {
background: none;
border: none;
padding: 0;
color: #1565a8;
font-size: inherit;
cursor: pointer;
text-decoration: underline;
}
.nib-order-link-btn:hover { color: #1a6b2e; }
/* ── Actieknoppen ────────────────────────────────────────────────────── */
.nib-order-actions {
display: flex;
gap: .75rem;
justify-content: flex-end;
padding-top: 1.25rem;
flex-wrap: wrap;
}
.nib-order-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem 1.3rem;
border-radius: 6px;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--rz-border-color, #ccc);
background: transparent;
color: var(--rz-text-color);
text-decoration: none;
transition: background .12s;
}
.nib-order-btn:hover { background: var(--rz-base-100, #f5f5f5); }
.nib-order-btn--primary {
background: #1a6b2e;
color: #fff;
border-color: #1a6b2e;
}
.nib-order-btn--primary:hover { background: #145524; border-color: #145524; }
.nib-order-btn--secondary { }
/* ── Laden / fout ────────────────────────────────────────────────────── */
.nib-order-loading,
.nib-order-error {
display: flex;
flex-direction: column;
align-items: center;
gap: .85rem;
padding: 3rem 1rem;
text-align: center;
color: var(--rz-text-color);
}
.nib-order-loading i { color: #1a6b2e; }
.nib-order-error   i { color: #c0392b; font-size: 2.5rem; }
.nib-order-errormsg {
font-size: .85rem;
color: #c0392b;
max-width: 420px;
}
/* ── Voorwaarden overlay / dialog ────────────────────────────────────── */
.nib-terms-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .55);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.nib-terms-dialog {
background: var(--rz-base-background-color, #fff);
border-radius: 10px;
max-width: 640px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.nib-terms-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.1rem 1.5rem;
border-bottom: 1px solid var(--rz-border-color, #e8e8e8);
}
.nib-terms-header h2 {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: var(--rz-text-color);
}
.nib-terms-close {
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
color: var(--rz-text-secondary-color, #888);
padding: .25rem;
line-height: 1;
}
.nib-terms-close:hover { color: var(--rz-text-color); }
.nib-terms-body {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.5rem;
font-size: .9rem;
line-height: 1.65;
color: var(--rz-text-color);
}
.nib-terms-body h3 {
font-size: .9rem;
font-weight: 600;
margin: 1.2rem 0 .4rem 0;
color: #1565a8;
}
.nib-terms-body p { margin: 0 0 .6rem 0; }
.nib-terms-body a { color: #1565a8; }
.nib-terms-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--rz-border-color, #e8e8e8);
display: flex;
justify-content: flex-end;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.nib-order-content { padding: 1.25rem 1rem; }
.nib-order-row     { flex-direction: column; gap: 0; }
.nib-order-actions { flex-direction: column-reverse; }
.nib-order-btn     { width: 100%; justify-content: center; }
}
/* ══════════════════════════════════════════════════════════════════════
Betaling succes pagina (/mijn/visitekaartje/betaling-succes)
══════════════════════════════════════════════════════════════════════ */
/* ── Gekleurde strip varianten ───────────────────────────────────────── */
.nib-subblock-strip--success { background: #1a6b2e !important; }
.nib-subblock-strip--error   { background: #c0392b !important; }
/* ── Status body ─────────────────────────────────────────────────────── */
.nib-payment-status-body {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 620px;
}
/* ── Status icoon ────────────────────────────────────────────────────── */
.nib-payment-status-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
}
.nib-payment-status-icon--loading { background: #eaf3fb; color: #1565a8; }
.nib-payment-status-icon--success { background: #eaf7ee; color: #1a6b2e; }
.nib-payment-status-icon--error   { background: #fdecea; color: #c0392b; }
/* ── Tekst ───────────────────────────────────────────────────────────── */
.nib-payment-status-msg {
font-size: .95rem;
color: var(--rz-text-color);
margin: 0;
line-height: 1.6;
}
.nib-payment-status-hint {
font-size: .875rem;
color: var(--rz-text-secondary-color, #666);
margin: 0;
}
.nib-payment-status-hint a {
color: #1565a8;
text-decoration: underline;
}
.nib-payment-status-orderid {
font-size: .9rem;
color: var(--rz-text-secondary-color, #666);
margin: 0;
}
/* ── Stappen ─────────────────────────────────────────────────────────── */
.nib-payment-status-steps {
display: flex;
flex-direction: column;
gap: .75rem;
padding: 1.1rem 1.25rem;
background: var(--rz-base-100, #f8f8f8);
border-radius: 6px;
border-left: 3px solid #1a6b2e;
}
.nib-payment-step {
display: flex;
align-items: flex-start;
gap: .85rem;
}
.nib-payment-step-icon {
width: 28px;
flex-shrink: 0;
color: #1a6b2e;
font-size: 1rem;
padding-top: .15rem;
}
.nib-payment-step-text {
display: flex;
flex-direction: column;
gap: .15rem;
font-size: .875rem;
color: var(--rz-text-color);
}
.nib-payment-step-text strong {
font-weight: 600;
}
.nib-payment-step-text span {
color: var(--rz-text-secondary-color, #555);
}
/* ===== NibFooter ===== */
:root {
--nib-footer-color: #1a7fc1;
}
.nib-footer {
background: color-mix(in oklab, var(--rz-primary), white 20%);
color: color-mix(in oklab, var(--rz-primary), white 80%);
border-top: 1px solid color-mix(in oklab, var(--nib-footer-color) 20%, transparent);
margin-bottom: 0.8rem;
}
.nib-footer-logo-bar {
background: color-mix(in oklab, var(--rz-primary), white 0%);
border-top: 1px solid var(--rz-primary);
padding: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.nib-footer-inner {
max-width: 960px;
margin: 0 auto;
padding: 1rem 1.5rem 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
text-align: center;
}
/* Onderbalk: copyright + versie */
.nib-footer-bottom {
border-top: 1px solid color-mix(in oklab, var(--nib-footer-color) 20%, transparent);
padding: 0.9rem 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem 1.25rem;
font-size: 0.78rem;
color: color-mix(in oklab, var(--rz-primary), white 65%);
}
.nib-footer-version {
opacity: 0.85;
}
/* Logo + tagline */
.nib-footer-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.nib-footer-logo {
height: 4rem;
width: auto;
}
/* Licht thema: toon licht logo, verberg donker */
.nib-footer-logo--light { display: block; }
.nib-footer-logo--dark  { display: none; }
/* Donker thema: toon donker logo, verberg licht */
.rz-material-dark .nib-footer-logo--light { display: none; }
.rz-material-dark .nib-footer-logo--dark  { display: block; }
.nib-footer-tagline {
margin: 0;
font-size: 0.82rem;
opacity: 0.65;
}
/* Kolommen */
.nib-footer-cols {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem 3rem;
}
.nib-footer-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-width: 140px;
}
.nib-footer-col-title {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: color-mix(in oklab, var(--rz-primary), white 70%);
opacity: 0.4;
margin-bottom: 0.25rem;
}
.nib-footer-col a {
line-height: 0.70rem;
color:  color-mix(in oklab, var(--rz-primary), white 75%);
text-decoration: none;
font-size: 0.9rem;
text-transform: lowercase;
transition: color 0.15s;
}
.nib-footer-col a:hover {
color: color-mix(in oklab, var(--rz-primary), white 100%);
text-decoration: none;
text-underline-offset: 2px;
}
/* Donker thema */
.rz-material-dark .nib-footer {
background: color-mix(in oklab, var(--nib-footer-color), black 62%);
color: color-mix(in oklab, var(--nib-footer-color), white 80%);
border-top-color: color-mix(in oklab, var(--nib-footer-color) 30%, transparent);
}
.rz-material-dark .nib-footer-logo-bar {
background: color-mix(in oklab, var(--nib-footer-color), black 72%);
border-bottom-color: color-mix(in oklab, var(--nib-footer-color) 30%, transparent);
}
.rz-material-dark .nib-footer-col a {
color: color-mix(in oklab, var(--nib-footer-color), white 70%);
}
.rz-material-dark .nib-footer-col a:hover {
color: color-mix(in oklab, var(--nib-footer-color), white 90%);
}
.rz-material-dark .nib-footer-col-title {
color: color-mix(in oklab, var(--nib-footer-color), white 60%);
}
/* ===== NibBreadcrumb ===== */
.nib-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.1rem;
padding: 0.55rem 1.25rem;
font-size: 0.78rem;
min-height: 2.25rem;
background: transparent;
background: var(--rz-panel-background-color);
}
.nib-bc-item {
display: inline-flex;
align-items: center;
gap: 0.1rem;
}
.nib-bc-item:last-child .nib-breadcrumb-chevron {
display: none;
}
.nib-breadcrumb-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--rz-text-secondary-color);
text-decoration: none;
padding: 0.15rem 0.35rem;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.nib-breadcrumb-link:hover {
color: var(--rz-primary);
background: color-mix(in oklab, var(--rz-primary), transparent 92%);
text-decoration: none;
}
.nib-breadcrumb-current {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--rz-text-color);
font-weight: 500;
padding: 0.15rem 0.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 22rem;
}
.nib-breadcrumb-chevron {
display: inline-flex;
align-items: center;
color: var(--rz-text-disabled-color);
font-size: 0.7rem;
flex-shrink: 0;
margin: 0 -0.1rem;
}
.nib-breadcrumb-chevron .rzi {
font-size: 1rem;
}
.nib-breadcrumb-icon {
font-size: 0.9rem !important;
line-height: 1 !important;
vertical-align: middle;
}
/* Skeleton */
.nib-breadcrumb--sk .nib-breadcrumb-current {
pointer-events: none;
}
.nib-breadcrumb-sk-label {
display: inline-block;
width: 6rem;
height: 0.9em;
border-radius: 3px;
vertical-align: middle;
}
/* Donker thema */
.rz-material-dark .nib-breadcrumb-link:hover {
background: color-mix(in oklab, var(--rz-primary), transparent 85%);
}
/* ===================================================
NIB COLLECTIE DETAIL  (CollectionDetails.razor)
=================================================== */
/* ── Hoofd-layout ─────────────────────────────────────── */
.coll-detail-main-block > .nib-gd-block-header {
padding: 0;
}
.coll-detail-main-grid {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
gap: 0;
align-items: stretch;
}
.coll-detail-main-left {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 2rem;
}
.coll-detail-main-right {
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--group-color, var(--rz-primary)), white 20%);
min-height: 220px;
}
/* Hero-foto die het rechterpaneel vult (bv. dierdetail). */
.coll-detail-main-right.coll-detail-hero {
padding: 0;
overflow: hidden;
position: relative;
}
.coll-detail-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Klikbare variant (opent de gallery) */
.coll-detail-hero-btn {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.coll-detail-hero-btn .coll-detail-hero-img {
transition: transform 0.45s ease, filter 0.3s ease;
}
.coll-detail-hero-btn:hover .coll-detail-hero-img {
transform: scale(1.04);
filter: brightness(0.92);
}
/* Soortpagina: taxonomie-kaart in het rechterpaneel.
Band iets donkerder gemengd zodat witte tekst contrast houdt,
ongeacht de (variabele) fotokleur van de soort. */
.coll-detail-main-right.coll-species-tax {
background: color-mix(in oklab, var(--group-color, var(--rz-primary)), black 26%);
}
.coll-species-taxonomy {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 1.4rem 1.6rem;
color: #fff;
}
.coll-tax-row {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.coll-tax-label {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: rgba(255, 255, 255, 0.7);
}
.coll-tax-value {
font-size: 0.95rem;
font-weight: 500;
line-height: 1.2;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Klikbare taxonomie-waarde → gefilterde dieren-pagina */
a.coll-tax-value {
display: inline-block;
max-width: 100%;
text-decoration: none;
cursor: pointer;
transition: color 0.15s ease;
}
a.coll-tax-value:hover {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
/* ── Voortgangspaneel rechts in de header ─────────────────── */
.coll-progress-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.45rem;
padding: 1.4rem 1.25rem;
color: #fff;
}
.coll-progress-eyebrow {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: rgba(255, 255, 255, 0.85);
}
.coll-progress-caption {
margin-top: -0.1rem;
font-size: 0.78rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
/* Grotere, contrastrijke donut op de gekleurde band */
.nib-coll-header-donut--lg,
.nib-coll-header-donut--lg .sidebar-donut {
width: 104px;
height: 104px;
}
.nib-coll-header-donut--lg .sidebar-donut-bg {
stroke: rgba(255, 255, 255, 0.3);
}
.nib-coll-header-donut--lg .sidebar-donut-fill {
stroke: #fff;
}
.nib-coll-header-donut--lg .sidebar-donut-pct {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
}
.nib-coll-header-donut--lg .sidebar-donut-sub {
font-size: 0.6rem;
color: rgba(255, 255, 255, 0.8);
}
/* Witte knop met collectiekleur als tekst — valt op tegen de band */
.coll-progress-btn.rz-button {
margin-top: 0.5rem;
background: #fff !important;
color: var(--group-color, var(--rz-primary)) !important;
font-weight: 600;
box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.35);
}
.coll-progress-btn.rz-button:hover {
background: color-mix(in oklab, #fff, var(--group-color, var(--rz-primary)) 8%) !important;
}
.coll-progress-hint {
max-width: 16rem;
margin: 0;
font-size: 0.72rem;
line-height: 1.35;
color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 900px) {
.coll-detail-main-grid {
grid-template-columns: 1fr;
}
.coll-detail-main-left {
padding: 1.1rem 1rem;
}
.coll-detail-main-right {
min-height: 180px;
}
}
/* De filterbalk zelf is generiek (sticky + overflow-fix): zie
`.nib-ff-toolbar` in profiel.css. Hieronder enkel de collectie-
specifieke inhoud van de balk. */
/* Stats links in de balk (soorten + secundaire tellingen) */
.coll-detail-stats {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.9rem;
min-width: 0;
}
.coll-detail-stat {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--rz-text-secondary-color);
white-space: nowrap;
}
.coll-detail-stat i {
font-size: 0.9rem;
opacity: 0.55;
}
/* ===================================================
NIB DIER DETAIL  (AnimalDetails.razor)
=================================================== */
/* ── Hoofd-layout ─────────────────────────────────────── */
.animal-detail-main > .nib-gd-block-header {
padding: 0;
}
.animal-detail-head-grid {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0;
align-items: stretch;
}
.animal-detail-head-left {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 2rem;
}
.animal-detail-head-right {
min-height: 280px;
background: color-mix(in oklab, var(--group-color, #7650b8), white 20%);
}
.animal-detail-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
.animal-detail-hero-skeleton {
width: 100%;
height: 100%;
min-height: 280px;
}
.animal-detail-hero-image {
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
display: block;
}
.animal-detail-hero-trigger {
display: block;
width: 100%;
height: 100%;
min-height: 280px;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.animal-detail-hero-placeholder {
width: 100%;
height: 100%;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--group-color, #7650b8), white 35%);
}
.animal-detail-hero-placeholder img {
width: 110px;
opacity: .7;
}
.animal-detail-photo-skeleton {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
padding: 0.75rem;
}
.animal-detail-sub-footer {
padding: .75rem;
border-top: 1px solid var(--rz-base-300);
}
.animal-detail-link-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
text-decoration: none;
font-weight: 600;
}
.animal-detail-obs-item {
border-bottom: 1px solid var(--rz-base-300);
}
@media (max-width: 768px) {
.animal-detail-photo-skeleton {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.animal-detail-head-grid {
grid-template-columns: 1fr;
}
.animal-detail-head-left {
padding: 1.1rem 1rem;
}
.animal-detail-head-right,
.animal-detail-hero-image,
.animal-detail-hero-placeholder,
.animal-detail-hero-skeleton {
min-height: 220px;
}
}
/* ===================================================
NIB GROEP DETAIL  (GroupDetail.razor)
=================================================== */
.group-detail-main-header {
padding: 0 !important;
}
.group-detail-main-grid {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
gap: 0;
align-items: stretch;
}
.group-detail-main-left {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 2rem;
}
.group-detail-main-right {
min-height: 220px;
background: color-mix(in oklab, var(--group-color, #c0622a), white 20%);
display: flex;
align-items: stretch;
justify-content: stretch;
}
.group-detail-main-right .group-map-container,
.group-detail-main-right .group-map {
width: 100%;
height: 100%;
min-height: 220px;
}
@media (max-width: 900px) {
.group-detail-main-grid {
grid-template-columns: 1fr;
}
.group-detail-main-left {
padding: 1.1rem 1rem;
}
.group-detail-main-right,
.group-detail-main-right .group-map-container,
.group-detail-main-right .group-map {
min-height: 180px;
}
}
/* ===================================================
NIB NIEUWS BERICHT  (NewsMessage.razor)
=================================================== */
.grid-container {
display: grid;
gap: 0.5em;
}
.nib-news-text-wrap {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.nib-news-item-text {
padding: 0.75rem 0.5rem 0.5rem;
}
.nib-news-item-actions {
position: absolute;
top: 0.4rem;
right: 0.4rem;
z-index: 10;
display: flex;
gap: 0.2rem;
align-items: center;
}
/* ===================================================
NIB UPLOAD  (Upload.razor)
=================================================== */
.nib-upload-split {
display: grid;
grid-template-columns: minmax(200px, 30%) 1fr;
align-items: start;
}
.nib-upload-split-left {
display: flex;
flex-direction: column;
padding: 1.5rem 1.25rem;
background: color-mix(in oklab, var(--rz-primary, #075082), white 75%);
align-self: stretch;
}
.rz-material-dark .nib-upload-split-left {
background: color-mix(in oklab, var(--rz-primary, #075082), black 62%);
}
.nib-upload-split-right {
padding: 1.25rem;
background: color-mix(in oklab, var(--rz-primary, #075082), white 80%);
height: 100%;
}
.nib-upload-section-label {
display: block;
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: color-mix(in oklab, var(--rz-primary, #075082), black 20%);
opacity: .75;
margin-bottom: .4rem;
}
.rz-material-dark .nib-upload-section-label {
color: color-mix(in oklab, var(--rz-primary, #075082), white 60%);
opacity: .9;
}
.nib-upload-divider {
border: none;
border-top: 1px solid color-mix(in oklab, var(--rz-primary, #075082), white 55%);
margin: 0 0 .75rem;
}
.rz-material-dark .nib-upload-divider {
border-top-color: color-mix(in oklab, var(--rz-primary, #075082), black 30%);
}
.nib-upload-intro {
margin: 0;
font-size: .875rem;
font-weight: 500;
color: color-mix(in oklab, var(--rz-primary, #075082), black 20%);
opacity: .85;
line-height: 1.55;
}
.rz-material-dark .nib-upload-intro {
color: color-mix(in oklab, var(--rz-primary, #075082), white 60%);
}
.nib-upload-req-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: .35rem;
}
.nib-upload-req-list li {
display: flex;
align-items: center;
gap: .4rem;
font-size: .85rem;
color: color-mix(in oklab, var(--rz-primary, #075082), black 15%);
opacity: .85;
}
.nib-upload-req-list .rzi {
font-size: 1rem;
color: color-mix(in oklab, var(--rz-primary, #075082), black 10%);
}
@media (max-width: 700px) {
.nib-upload-split {
grid-template-columns: 1fr;
}
.nib-upload-split-left {
padding: .85rem 1rem .65rem;
}
.nib-upload-split-right {
padding: .85rem;
}
}
/* ═══════════════════════════════════════════════════════════
NIB Navigation — desktop header + mobile tab bar
═══════════════════════════════════════════════════════════ */
/* ── Header wrapper ─────────────────────────────────────── */
.rz-header .nib-nav-bar {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 0 0.75rem 0 0.5rem;
gap: 0;
}
/* ── Logo ─────────────────────────────────────────────────── */
.nib-nav-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none !important;
padding: 0.25rem 0;
margin-right: 0.25rem;
transition: opacity 0.15s;
}
.nib-nav-logo:hover { opacity: 0.85; }
.nib-nav-logo-img {
height: 28px;
width: auto;
display: block;
}
/* ── Desktop nav links ────────────────────────────────────── */
.nib-nav-desktop {
display: flex;
align-items: center;
flex: 1;
height: 100%;
min-width: 0;
}
/* Override Radzen for nav links — needs 3-class specificity to beat .rz-button.rz-button-light.rz-variant-text */
.nib-nav-desktop .nib-nav-link.rz-button {
font-family: "allroundgothic", sans-serif !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
letter-spacing: 0.015em !important;
color: rgba(255, 255, 255, 0.78) !important;
background: transparent !important;
padding: 0 0.85rem !important;
height: var(--rz-header-min-height, 56px) !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
white-space: nowrap;
position: relative;
transition: color 0.15s, background 0.15s !important;
}
/* Hover underline indicator */
.nib-nav-desktop .nib-nav-link.rz-button::after {
content: '';
position: absolute;
bottom: 0;
left: 0.85rem;
right: 0.85rem;
height: 2.5px;
background: rgba(255, 255, 255, 0.8);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nib-nav-desktop .nib-nav-link.rz-button:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.07) !important;
}
.nib-nav-desktop .nib-nav-link.rz-button:hover::after {
transform: scaleX(1);
}
/* Current section — persistent highlight + underline */
.nib-nav-desktop .nib-nav-link--active.rz-button {
color: #fff !important;
}
.nib-nav-desktop .nib-nav-link--active.rz-button::after {
transform: scaleX(1);
}
/* Admin badge */
.nib-nav-desktop .nib-nav-link--admin.rz-button {
color: #fcd34d !important;
}
.nib-nav-desktop .nib-nav-link--admin.rz-button:hover {
color: #fef3c7 !important;
background: rgba(252, 211, 77, 0.08) !important;
}
/* ── Right side actions ───────────────────────────────────── */
.nib-nav-actions {
display: flex;
align-items: center;
gap: 0.2rem;
margin-left: auto;
flex-shrink: 0;
padding-left: 0.5rem;
}
/* Icon-only buttons (login, theme toggle) */
.nib-nav-actions .nib-nav-icon-btn.rz-button {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 50% !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.8) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: background 0.15s, color 0.15s !important;
}
.nib-nav-actions .nib-nav-icon-btn.rz-button .rz-button-box {
display: flex;
align-items: center;
justify-content: center;
}
.nib-nav-actions .nib-nav-icon-btn.rz-button:hover {
background: rgba(255, 255, 255, 0.13) !important;
color: #fff !important;
}
/* Avatar skeleton shown while Member data loads for authenticated users */
.nib-nav-avatar-sk {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
margin: 0 0.25rem;
animation: nib-avatar-pulse 1.4s ease-in-out infinite;
}
@keyframes nib-avatar-pulse {
0%, 100% { opacity: 1; }
50%       { opacity: 0.45; }
}
/* ── Mobile bottom tab bar ────────────────────────────────── */
.nib-mobile-tabs {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 500;
background: var(--rz-base-background-color);
border-top: 1px solid var(--rz-base-200);
box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.1);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nib-mobile-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.18rem;
padding: 0.55rem 0.2rem 0.45rem;
text-decoration: none !important;
color: var(--rz-text-secondary-color);
font-family: "allroundgothic", sans-serif;
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: color 0.15s, background 0.15s;
-webkit-tap-highlight-color: transparent;
user-select: none;
position: relative;
}
.nib-mobile-tab .rzi {
font-size: 1.4rem;
line-height: 1;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
}
.nib-mobile-tab:active .rzi {
transform: scale(0.9);
}
/* Tab accent on hover — één rustige primary kleur */
.nib-mobile-tab:hover { color: var(--rz-primary); }
/* Active tab indicator pill */
.nib-mobile-tab::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 28px;
height: 3px;
border-radius: 0 0 3px 3px;
background: currentColor;
transition: transform 0.2s;
}
/* Current section — primary tab + revealed pill */
.nib-mobile-tab--active { color: var(--rz-primary); }
.nib-mobile-tab--active::before {
transform: translateX(-50%) scaleX(1);
}
.nib-mobile-tab--active span {
font-weight: 700;
}
/* ── Dark mode ────────────────────────────────────────────── */
.rz-material-dark .nib-mobile-tabs {
border-top-color: var(--rz-base-300);
box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.3);
}
/* ── Responsive breakpoints ───────────────────────────────── */
/* Tablet: condense nav link padding */
@media (max-width: 960px) and (min-width: 577px) {
.nib-nav-desktop .nib-nav-link.rz-button {
font-size: 0.82rem !important;
padding: 0 0.6rem !important;
}
.nib-nav-desktop .nib-nav-link.rz-button::after {
left: 0.6rem;
right: 0.6rem;
}
.nib-nav-logo-img {
height: 25px;
}
}
/* Mobile: show tab bar, hide desktop nav */
@media (max-width: 576px) {
.nib-nav-desktop {
display: none;
}
.nib-nav-logo-img {
height: 22px;
}
.nib-mobile-tabs {
display: flex;
}
/* Body padding so content doesn't hide behind tab bar */
body {
padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Hide copyright bar on mobile */
.nib-copyright-bar {
display: none !important;
}
}
/* ── Copyright bar ────────────────────────────────────────── */
.nib-copyright-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--rz-primary);
padding: 0.45rem 1.5rem;
text-align: center;
font-size: 0.68rem;
color: rgba(255, 255, 255, 0.68);
letter-spacing: 0.01em;
}
/* ── Beta feedback icon size fix ──────────────────────────── */
.nib-beta-feedback .rzi {
font-size: 0.8rem;
}
/* ── Mobile: push beta badge above tab bar ────────────────── */
@media (max-width: 576px) {
.nib-beta-badge {
bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 0.75rem);
}
}