/* =============================================================
filmpeoplev4.css
Redesign overrides on top of bulma-prefixed.css (Bulma 1.0.4).
Accent color is injected by the layout via --theme-accent
(from config('app.accent_color')). Use Bulma standard classes
wherever possible; this stylesheet only carries deltas.
============================================================= */
:root {
/* tokens -------------------------------------------------- */
--fp-ink: #1f2937;
--fp-muted: #6b7280;
--fp-soft: #9ca3af;
--fp-line: #e5e7eb;
--fp-bg: #f5f5f5;
--fp-card: #ffffff;
/* shadow defaults; layouts/app.blade.php overrides --theme-shadow-drop
and --theme-shadow-drop-small from config('app.theme_shadow'). */
--fp-shadow: var(--theme-shadow-drop, rgba(0, 0, 40, 0.03) 0 2px 4px 0, rgba(0, 0, 40, 0.05) 0 1px 2px 0);
--fp-shadow-hover: rgba(0, 0, 40, 0.06) 0 4px 12px 0, rgba(0, 0, 40, 0.08) 0 1px 3px 0;
/* --fp-radius / --fp-radius-regular / --fp-radius-small are injected from
config('app.theme_corner_radius') in layouts/app.blade.php; sane fallbacks. */
--fp-radius: 7px;
--fp-radius-regular: 6px;
--fp-radius-small: 3px;
--fp-font: Inter, -apple-system, "system-ui", "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
/* Bulma 1 overrides --------------------------------------- */
--bulma-family-primary: var(--fp-font);
--bulma-family-secondary: var(--fp-font);
--bulma-body-family: var(--fp-font);
--bulma-body-size: 14px;
--bulma-body-color: rgb(74, 74, 74);
--bulma-body-background-color: var(--fp-bg);
--bulma-text: rgb(74, 74, 74);
--bulma-link: var(--theme-accent, #3298dc);
--bulma-link-text: var(--theme-accent, #3298dc);
--bulma-link-hover: var(--theme-accent, #3298dc);
--bulma-primary-h: 204deg; /* fallback before accent overrides */
}
html, body {
margin: 0;
padding: 0;
background: var(--fp-bg);
color: rgb(74, 74, 74);
font-family: var(--fp-font);
font-size: 14px;
line-height: 1.4;
}
body {
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
body > #app {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
body > #app > .fp-footer { margin-top: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--theme-accent, #3298dc); }
h1, h2, h3, h4, p { font-family: var(--fp-font); margin: 0; }
/* link helpers -------------------------------------------------- */
.has-text-link,
a.has-text-link {
color: var(--theme-accent, #3298dc) !important;
}
.has-background-link,
.has-background-primary,
.button.is-link,
.is-link.button,
.button.is-primary,
.is-primary.button {
background-color: var(--theme-accent, #3298dc) !important;
border-color: var(--theme-accent, #3298dc) !important;
color: #fff !important;
}
.button.is-link:hover,
.is-link.button:hover,
.button.is-primary:hover,
.is-primary.button:hover {
background-color: var(--theme-accent, #3298dc) !important;
color: #fff !important;
filter: brightness(.95);
}
/* Outlined/light variants of .is-link / .is-primary: keep the theme
accent for the text + border so they read as part of the same color
family. */
.button.is-link.is-outlined,
.is-link.button.is-outlined,
.button.is-primary.is-outlined,
.is-primary.button.is-outlined {
background-color: transparent !important;
border-color: var(--theme-accent, #3298dc) !important;
color: var(--theme-accent, #3298dc) !important;
}
.button.is-link.is-outlined:hover,
.is-link.button.is-outlined:hover,
.button.is-primary.is-outlined:hover,
.is-primary.button.is-outlined:hover {
background-color: var(--theme-accent, #3298dc) !important;
color: #fff !important;
filter: none;
}
.button.is-link.is-light,
.is-link.button.is-light,
.button.is-primary.is-light,
.is-primary.button.is-light {
background-color: color-mix(in srgb, var(--theme-accent, #3298dc) 12%, white) !important;
border-color: transparent !important;
color: var(--theme-accent, #3298dc) !important;
}
/* Backward-compatible light action-button chrome ----------------------
Older templates that don't carry the `.dashboard-action` class still
get the v4 light-pill look from plain Bulma `.button.is-light`
(neutral grey) and `.button.is-light.is-danger` (tinted red) — same
semibold + icon-gap pattern, so a row of
actions reads as the new design without any markup change.
.is-light.is-link and .is-light.is-primary are intentionally
excluded — they're handled above as accent-colored buttons. */
.button.is-light:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) {
background-color: #f3f4f6;
border-color: #e5e7eb;
color: #1f2937;
font-weight: 600;
box-shadow: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.button.is-light:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):hover,
.button.is-light:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus {
background-color: #e5e7eb;
border-color: #d1d5db;
color: #111827;
filter: none;
}
.button.is-light:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) .icon {
color: #6b7280;
margin: 0;
}
.button.is-light.is-danger {
background-color: #fdecec !important;
border-color: #f7d4d4 !important;
color: #b03a3a !important;
font-weight: 600;
box-shadow: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.button.is-light.is-danger:hover,
.button.is-light.is-danger:focus {
background-color: #f7d4d4 !important;
border-color: #ecb5b5 !important;
color: #8d2d2d !important;
filter: none;
}
.button.is-light.is-danger .icon {
color: #b03a3a;
margin: 0;
}
.button.is-light.is-danger:hover .icon,
.button.is-light.is-danger:focus .icon {
color: #8d2d2d;
}
.has-text-danger,
.has-text-primary,
a.has-text-danger,
a.has-text-primary { color: var(--theme-accent, #3298dc) !important; }
/* ---------- TOPBAR (custom) ---------------------------------- */
.fp-topbar {
background: #fff;
border-bottom: 1px solid var(--fp-line);
}
/* Sticky wrapper around topbar + optional in-page sticky strip
(e.g. country-strip on the homepage). One sticky element for the
whole stack so iOS rubber-band scroll moves them together, and so
inner children can transition height without sticky compositor
quirks. Slightly translucent + blurred backdrop so content is
visible underneath while scrolling. */
.fp-stuck-stack {
position: sticky;
top: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
}
.fp-stuck-stack .fp-topbar,
.fp-stuck-stack .fp-country-strip {
background: transparent;
}
/* Bulma modals must sit above the sticky stack and dropdown menus. */
.modal {
z-index: 100;
}
.fp-topbar-inner {
max-width: 1316px;
margin: 0 auto;
padding: 10px 24px 6px;
display: flex;
align-items: center;
gap: 44px;
}
.fp-logo {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
white-space: nowrap;
}
.fp-logo img { height: 19px; display: block; flex-shrink: 0; }
.fp-logo .fp-country-flag {
color: var(--fp-muted);
font-weight: 700;
font-size: 14px;
margin-left: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.fp-nav {
display: flex;
gap: 28px;
flex: 1;
}
.fp-nav a {
position: relative;
display: inline-flex;
align-items: center;
padding: 6px 0;
font-weight: 500;
color: #374151;
font-size: 15px;
}
.fp-nav a.is-active {
color: var(--fp-ink);
font-weight: 600;
}
.fp-nav a:hover { color: #000; }
.fp-nav a.is-active::after,
.fp-nav a:hover::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -6px;
height: 2px;
background: var(--theme-accent, #3298dc);
}
.fp-top-right {
display: flex;
align-items: center;
gap: 12px;
}
.fp-top-right .fp-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
font-size: 13px;
color: #374151;
}
.fp-top-right .fp-avatar-pill {
padding: 0;
line-height: 0;
}
.fp-top-right .fp-avatar-pill img {
height: 22px;
width: 22px;
border-radius: 50%;
border: 1px solid var(--fp-line);
background: #fff;
display: block;
}
/* ---------- detached topbar dropdowns (filmvacatures pattern) */
.fp-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.fp-dropdown-trigger {
background: none;
border: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
.fp-dropdown-menu {
position: absolute;
/* The menu starts flush against the trigger so hover never leaves
the hoverable surface; the visible chrome sits 10px below thanks
to the inner padding-top so it still reads as a standalone panel. */
top: 100%;
padding-top: 10px;
min-width: 180px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
z-index: 60;
pointer-events: none;
}
.fp-dropdown-menu-inner {
background: #fff;
border-radius: var(--fp-radius);
box-shadow: var(--theme-shadow-drop, rgba(0, 0, 40, 0.08) 0 8px 24px 0, rgba(0, 0, 40, 0.06) 0 2px 6px 0);
border: 1px solid var(--fp-line);
padding: 6px 0;
}
.fp-dropdown-menu-right { right: 0; }
.fp-dropdown:hover > .fp-dropdown-menu,
.fp-dropdown:focus-within > .fp-dropdown-menu {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
.fp-dropdown-menu a {
display: block;
padding: 8px 14px;
color: var(--fp-ink);
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
}
.fp-dropdown-menu a:hover { background: #fafafa; color: var(--theme-accent, #3298dc); }
.fp-dropdown-menu hr {
border: 0;
border-top: 1px solid var(--fp-line);
margin: 6px 0;
}
.fp-dropdown-menu .fp-dropdown-cta {
margin: 0 10px 6px;
padding: 8px 14px;
background: var(--theme-accent, #3298dc);
color: #fff;
border-radius: var(--fp-radius-regular);
text-align: center;
font-weight: 600;
}
.fp-dropdown-menu .fp-dropdown-cta:hover {
color: #fff;
background: var(--theme-accent, #3298dc);
filter: brightness(.95);
}
/* shared button look used in topbar / hero / ctas */
.fp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: var(--fp-radius);
font-family: var(--fp-font);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
border: 1px solid transparent;
line-height: 1;
}
.fp-btn-ghost {
background: #fff;
border-color: var(--fp-line);
color: #374151;
}
.fp-btn-primary {
background: var(--theme-accent, #3298dc);
color: #fff;
}
.fp-btn-primary:hover { color: #fff; filter: brightness(.95); }
.fp-burger {
display: none;
background: none;
border: 0;
padding: 6px;
cursor: pointer;
margin-left: auto;
}
.fp-burger span {
display: block;
width: 22px;
height: 2px;
background: var(--fp-ink);
margin: 4px 0;
border-radius: 2px;
}
/* ---------- STUCK STRIP (country strip on home, tabstrip on
crew/cast/companies/productions). The wrap collapses on hide
while the inner element slides up; an in-page spacer grows by the
same amount so the page below doesn't shift. ----------------- */
.fp-stuck-wrap {
overflow: hidden;
height: var(--strip-height, auto);
}
.fp-country-strip {
background: transparent;
border-bottom: 1px solid var(--fp-line);
}
.fp-strip-spacer {
height: 0;
}
body.fp-strip-hiding .fp-stuck-wrap {
animation: fp-strip-collapse .5s ease forwards;
}
body.fp-strip-hiding .fp-stuck-wrap > :first-child {
animation: fp-strip-slide-out .5s ease forwards;
}
body.fp-strip-hiding .fp-strip-spacer {
animation: fp-spacer-grow .5s ease forwards;
}
body.fp-strip-showing .fp-stuck-wrap {
animation: fp-strip-expand .5s ease forwards;
}
body.fp-strip-showing .fp-stuck-wrap > :first-child {
animation: fp-strip-slide-in .5s ease forwards;
}
body.fp-strip-showing .fp-strip-spacer {
animation: fp-spacer-shrink .5s ease forwards;
}
@keyframes fp-strip-collapse {
from { height: var(--strip-height, 43px); }
to { height: 0; }
}
@keyframes fp-strip-expand {
from { height: 0; }
to { height: var(--strip-height, 43px); }
}
@keyframes fp-strip-slide-out {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-100%); opacity: 0; }
}
@keyframes fp-strip-slide-in {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fp-spacer-grow {
from { height: 0; }
to { height: var(--strip-height, 43px); }
}
@keyframes fp-spacer-shrink {
from { height: var(--strip-height, 43px); }
to { height: 0; }
}
.fp-country-strip-inner {
max-width: 1316px;
margin: 0 auto;
padding: 8px 24px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.fp-country-label {
font-size: 12px;
color: var(--fp-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.fp-country-tabs { display: flex; gap: 4px; }
.fp-country-tabs a {
display: inline-flex;
padding: 4px 11px;
font-size: 13px;
color: #374151;
border-radius: 999px;
font-weight: 500;
}
.fp-country-tabs a.is-active {
background: #f5f5f5;
color: #333;
font-weight: 600;
}
.fp-country-strip-tag {
margin-left: auto;
font-family: var(--fp-font);
font-size: 13px;
color: var(--fp-muted);
font-weight: 500;
}
.fp-country-date {
margin-left: auto;
font-family: var(--fp-font);
font-size: 13px;
color: var(--fp-muted);
font-weight: 600;
text-transform: lowercase;
white-space: nowrap;
}
/* Tagline variant — same chrome, but the source string is sentence-cased
("Netwerk voor film- en televisiemakers") and reads weirdly fully
lowercased. Restore the natural case while keeping every other style. */
.fp-country-date--tagline { text-transform: none; }
/* Reusable: when a listing page wants the EDITIE-strip look but the
labels are not country names. Same chrome, slightly different
semantics. */
.fp-tabstrip { background: transparent; border-bottom: 1px solid var(--fp-line); }
.fp-tabstrip-inner {
max-width: 1316px;
margin: 0 auto;
padding: 8px 24px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.fp-tabstrip-label {
font-size: 12px;
color: var(--fp-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.fp-tabstrip-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fp-tabstrip-tabs a {
display: inline-flex;
padding: 4px 11px;
font-size: 13px;
color: #374151;
border-radius: 999px;
font-weight: 500;
}
.fp-tabstrip-tabs a.is-active {
background: #333;
color: #f5f5f5;
font-weight: 600;
}
/* Sidebar group label used in place of nested boxes. */
.fp-sidebar-group { margin-bottom: 24px; }
.fp-sidebar-group-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fp-muted);
margin: 0 0 10px;
}
/* Card-like container for sidebar content — heading sits above, outside the box. */
.fp-sidebar-box {
background: #fff;
border: 1px solid #e6e8ec;
border-radius: 8px;
padding: 10px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* ---------- HERO BAND ---------------------------------------- */
.fp-hero {
display: block;
background: transparent;
padding: 0;
}
.fp-hero-inner {
max-width: 1316px;
margin: 0 auto;
padding: 40px 24px 32px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.fp-hero-inner::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 1px;
background: var(--fp-line);
}
.fp-hero h1 {
font-family: var(--fp-font);
font-size: 36px;
font-weight: 600;
color: var(--fp-ink);
letter-spacing: -0.02em;
margin: 0;
text-align: center;
line-height: 1.1;
}
.fp-hero .fp-hero-title {
font-family: var(--fp-font);
font-size: 44px;
font-weight: 700;
color: var(--fp-ink);
margin: 0;
text-align: center;
max-width: 580px;
letter-spacing: -0.025em;
line-height: 1.05;
}
.fp-hero .fp-hero-title-accent {
color: var(--theme-accent, #3298dc);
}
.fp-hero-sub {
font-size: 18px;
font-weight: 500;
color: var(--fp-muted);
margin: 0 0 8px;
text-align: center;
max-width: 720px;
letter-spacing: 0;
line-height: 1.35;
}
.fp-hero-search {
width: 100%;
max-width: 720px;
display: flex;
gap: 0;
align-items: stretch;
border-radius: var(--fp-radius);
box-shadow: rgba(0, 0, 40, 0.04) 0 4px 12px 0, rgba(0, 0, 40, 0.06) 0 1px 3px 0;
margin-top: 6px;
}
.fp-hero-search .fp-search-field {
flex: 1;
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--fp-line);
border-right: 0;
border-radius: var(--fp-radius);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 8px 18px;
gap: 12px;
min-height: 44px;
}
.fp-hero-search .fp-search-field svg,
.fp-hero-search .fp-search-field .icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
color: var(--fp-muted);
}
.fp-hero-search .fp-search-field input {
flex: 1;
border: 0;
outline: none;
background: transparent;
font-family: var(--fp-font);
font-size: 16px;
color: var(--fp-ink);
}
.fp-hero-search .fp-search-field input::placeholder { color: var(--fp-soft); }
.fp-hero-search .fp-btn {
padding: 0 28px;
font-size: 15px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.fp-hero-cta {
margin-left: 10px;
padding: 0 18px;
font-size: 15px;
border-radius: var(--fp-radius);
align-self: stretch;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.fp-hero-sites {
display: flex;
gap: 8px;
margin-top: 11px;
justify-content: center;
flex-wrap: wrap;
}
.fp-hero-sites a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
color: var(--fp-ink);
background: #fff;
border: 1px solid var(--fp-line);
border-radius: 9999px;
box-shadow: rgba(0, 0, 40, 0.02) 0 1px 2px 0;
}
.fp-hero-sites a:hover {
background: #fafafa;
border-color: #d1d5db;
color: var(--fp-ink);
}
.fp-hero-sites a .ext {
font-size: 11px;
color: var(--fp-muted);
margin-left: 2px;
}
.fp-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 4px;
}
.fp-hero-tag {
padding: 5px 12px;
border-radius: 999px;
background: #f3f4f6;
color: #374151;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.fp-hero-tag:hover { background: #e5e7eb; }
/* ---------- stats-bar (logged-out homepage marketing strip) -- */
.fp-stats-strip {
background: #fff;
border-top: 1px solid #eef0f3;
border-bottom: 1px solid #eef0f3;
}
.fp-stats-inner {
max-width: 1316px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
flex-wrap: wrap;
gap: 16px 32px;
justify-content: center;
align-items: baseline;
font-family: var(--fp-font);
}
.fp-stats-inner .fp-stat {
display: inline-flex;
align-items: baseline;
gap: 6px;
color: #4a5160;
font-size: 14px;
}
.fp-stats-inner .fp-stat b {
color: #1a1f2c;
font-weight: 700;
font-size: 17px;
font-variant-numeric: tabular-nums;
}
.fp-stats-inner .fp-stat-sep {
color: #c7ccd4;
font-size: 14px;
}
/* ---------- profile-card iconbar (media + memberships) -------
Layout goal: the iconbar's border-top divider sits on the SAME
visual line in every card in a row, regardless of whether the
card has 0/1/2/3 media icons or membership badges. We achieve
that by making .card a flex column and letting the iconbar pin
to the bottom (flex: 0 0 auto + auto-margin pushes it down). */
.fp-page .card.has-ribbon.is-rounded {
display: flex;
flex-direction: column;
}
.fp-page .card.has-ribbon.is-rounded .card-image { flex: 0 0 auto; }
.fp-page .card.has-ribbon.is-rounded .card-content { flex: 1 1 auto; }
.fp-page .card.has-ribbon.is-rounded .profile-card-footer {
flex: 0 0 auto;
margin-top: auto;
}
.profile-card-footer {
background: #fff;
border-top: 1px solid #f0f1f4;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0;
/* Pull the divider line ~10px closer to the city/location text;
card-content has padding-bottom:0 inline so the gap is purely
from line-height inflation around the city text. Negative
margin-top compensates without changing the icon-row height. */
margin: -10px 0 0;
/* Reserve a fixed height so cards without icons/orgs still have
their divider line at the same level as cards that do.
Bump up to give visible top+bottom breathing room around the
centred icons/badges (raw padding inside the icon row only
affects the row, not the bar height itself). */
min-height: 40px;
/* Vertically center the icon row + badges within the bar so neither
sits flush against the divider line above or the card edge below. */
display: flex;
align-items: center;
}
.profile-card-icons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
padding: 0 11px;
width: 100%;
}
/* Match icon click-area height to the org badges (22px) so the FA
glyph centers on the same horizontal axis as the membership pill. */
.profile-card-icons__item {
color: #aab0bb;
text-decoration: none;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 22px;
}
.profile-card-icons__item i {
font-size: 11px;
line-height: 1;
}
.profile-card-icons__item:hover { color: #4a5160; }
/* Profile popup-header memberships — same colour scheme as the card
badges (option G + style 2: soft tint), but slightly larger so they
read at popup scale. Sit between the role line and the location. */
.profile-hero__memberships {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 4px;
}
.profile-hero__membership {
display: inline-block;
font-family: var(--fp-font);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: 5px;
background-color: color-mix(in srgb, var(--c, #6b7180) 14%, white);
color: color-mix(in srgb, var(--c, #6b7180) 80%, black);
}
/* "+ In lijst" action button — sits next to Contact + Portfolio. Uses
the same is-rounded outline pattern but its own data-hook so JS can
attach the save-to-list handler later. */
.profile-hero__action-savelist .icon i { font-weight: 600; }
/* membership badges — option G + style 2 (soft):
square with rounded corners, soft tint of the membership colour
as background, dark variant of the same colour as text. */
.profile-card-orgs {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
}
.profile-card-org {
min-width: 26px;
height: 22px;
padding: 0 6px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: var(--fp-font);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
background-color: color-mix(in srgb, var(--c, #6b7180) 14%, white);
color: color-mix(in srgb, var(--c, #6b7180) 80%, black);
}
.profile-card-org:hover {
background-color: color-mix(in srgb, var(--c, #6b7180) 24%, white);
}
/* ---------- main wrapper ------------------------------------- */
/* `#app` is `display: flex; flex-direction: column` (for footer push-to-
bottom). On a flex item, `margin: 0 auto` does NOT stretch the item to
its parent's cross-axis size — auto margins instead absorb the free
space and the item collapses to its content's intrinsic width. Force
stretching with `align-self: stretch` so the page wrapper always uses
the full viewport (capped by max-width) regardless of inner content. */
.fp-page {
align-self: stretch;
width: 100%;
max-width: 1316px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
}
/* ---------- sections ----------------------------------------- */
.fp-section { margin-bottom: 56px; }
.fp-section:last-child { margin-bottom: 24px; }
.fp-section:has(.fp-row-foot) { margin-bottom: 28px; }
.fp-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.fp-section-head h2 {
font-family: var(--fp-font);
font-size: 24px;
font-weight: 600;
margin: 0;
color: var(--fp-ink);
letter-spacing: -0.02em;
}
.fp-section-head a {
font-size: 14px;
color: var(--fp-muted);
font-weight: 500;
}
.fp-section-head a:hover { color: var(--fp-ink); }
/* row head with optional tabs */
.fp-row-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 14px;
border-bottom: 0px solid var(--fp-ink);
padding-bottom: 0;
}
.fp-row-tabs { display: flex; gap: 36px; }
.fp-row-tabs button,
.fp-row-tabs a {
background: transparent;
border: 0;
font-family: var(--fp-font);
font-size: 24px;
font-weight: 700;
color: var(--fp-muted);
padding: 6px 0 12px;
cursor: pointer;
letter-spacing: -0.02em;
text-decoration: none;
display: inline-flex;
}
.fp-row-tabs button.is-active,
.fp-row-tabs a.is-active {
color: var(--fp-ink);
text-decoration: underline;
text-decoration-color: var(--theme-accent, #3298dc);
text-decoration-thickness: 2px;
/* 8px offset keeps the underline INSIDE the link's 12px padding-bottom.
At 14px (the previous value) the underline rendered 2px past the
padding box and got covered by the profile-cards container below
(Bulma columns have a negative margin-top that pulls them up into
the gap, and the card backgrounds painted over the stripe). */
text-underline-offset: 8px;
}
.fp-row-tabs button:hover,
.fp-row-tabs a:hover {
color: var(--fp-ink);
}
.fp-row-head h2 {
font-family: var(--fp-font);
font-size: 24px;
font-weight: 700;
color: var(--fp-ink);
margin: 0;
padding-bottom: 12px;
letter-spacing: -0.02em;
text-transform: none;
}
.fp-row-more {
font-size: 13px;
color: var(--fp-muted);
font-weight: 500;
}
.fp-row-more:hover { color: var(--fp-ink); }
/* When .fp-row-more lives inside .fp-row-head (next to the section title
or tab strip), promote it visually so it reads as a deliberate CTA
rather than an afterthought, AND align its text baseline with the
title baseline (the h2 has 12px bottom padding, tabs have 6+12). */
.fp-row-head > .fp-row-more {
font-size: 14px;
font-weight: 600;
color: var(--theme-accent, #3298dc);
padding-bottom: 12px;
line-height: 1;
align-self: flex-end;
}
.fp-row-head > .fp-row-more:hover {
color: var(--fp-ink);
}
.fp-row-foot {
margin-top: 16px;
text-align: center;
}
.fp-row-foot a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 500;
color: var(--fp-ink);
}
.fp-row-foot a:hover { color: var(--fp-muted); }
/* ---------- NEWS CARD ---------------------------------------- */
.fp-news-card {
background: var(--fp-card);
border: 0;
border-radius: var(--fp-radius);
box-shadow: var(--fp-shadow);
overflow: hidden;
cursor: pointer;
height: 100%;
min-width: 0;
display: flex;
}
/* Cards stay flat on hover (CLAUDE.md: no transitions, no animated shadows).
Photo affordance is handled by `.fp-news-card .fp-img:hover` brightness
shift defined further below. */
.fp-news-card .fp-img {
flex: 0 0 50%;
width: 50%;
padding-top: 50%;
background: #e5e7eb center/cover no-repeat;
}
.fp-news-card .fp-meta {
flex: 1;
min-width: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.fp-news-card .fp-title {
font-family: var(--fp-font);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
color: var(--fp-ink);
margin: 0;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fp-news-card .fp-source {
font-size: 11px;
color: var(--fp-soft);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- WORK CARD --------------------------------------- */
.fp-work-card {
background: var(--fp-card);
border: 0;
border-radius: var(--fp-radius);
box-shadow: var(--fp-shadow);
overflow: hidden;
cursor: pointer;
height: 100%;
min-width: 0;
display: flex;
gap: 14px;
padding: 22px 30px 22px 22px;
align-items: flex-start;
}
/* No hover shadow shift — see .fp-news-card note. */
.fp-work-card .fp-thumb {
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: 50%;
background: #e5e7eb center/cover no-repeat;
}
/* Phase 8hr — child thumbnails are blurred for guests. `filter: blur()`
renders beyond the element's box, so it bleeds over rounded corners and the
bottom edge. Instead, blur an inner layer (a ::after that overflows the box)
and let the already-rounded container crop the soft fringe away. */
.fp-thumb.is-child-blurred {
position: relative;
overflow: hidden;
}
.fp-thumb.is-child-blurred::after {
content: "";
position: absolute;
inset: -12px; /* overshoot so the translucent fringe is cropped */
background: inherit; /* same image + center/cover as the parent thumb */
filter: blur(7px);
}
/* Square profile-card image (personen facet): clip a slightly scaled-up,
blurred copy so the blur never spills past the rounded corners / bottom. */
.profile-card-thumb--blurred {
overflow: hidden;
}
.profile-card-thumb--blurred img {
filter: blur(7px);
transform: scale(1.08);
}
.fp-work-card .fp-body {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.fp-work-card .fp-meta-line {
font-size: 13.5px;
color: var(--fp-ink);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-work-card .fp-meta-line .fp-pay {
color: var(--fp-muted);
font-weight: 400;
}
.fp-work-card .fp-title {
font-family: var(--fp-font);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
color: var(--fp-ink);
margin: 0;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fp-work-card .fp-desc {
font-size: 13.5px;
color: #4b5563;
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fp-work-card .fp-location {
font-size: 11px;
color: var(--fp-soft);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
margin-top: auto;
padding-top: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Tag-chips at the bottom of the work-card (PostsTagsService output).
Two kinds: type (vacancy/freelance/stage/casting/markt) and pay
(paid/expenses/low/unpaid). Soft-tint colour scheme — consistent with
the membership badges: light tint of --c as background, dark variant
as text. The chip's --c is set inline from the service's color value. */
.fp-work-card .fp-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding-top: 8px;
}
.fp-work-card .fp-chip {
display: inline-block;
font-family: var(--fp-font);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 999px;
line-height: 1.4;
background-color: color-mix(in srgb, var(--c, #6b7180) 14%, white);
color: color-mix(in srgb, var(--c, #6b7180) 80%, black);
}
/* ---------- PROFILE / FP CARD -------------------------------- */
/* keep Bulma column gutters tight on this layout */
.columns.is-tight { --bulma-column-gap: 0.6rem; }
.columns.is-multiline > .column { min-width: 0; }
.fp-card {
background: var(--fp-card);
border: 0;
border-radius: var(--fp-radius);
box-shadow: var(--fp-shadow);
overflow: hidden;
cursor: pointer;
height: 100%;
min-width: 0;
}
/* No hover shadow shift — image gets a brightness hover (see below). */
.fp-card .fp-img {
position: relative;
width: 100%;
padding-top: 100%;
background: #e5e7eb center/cover no-repeat;
}
.fp-card.is-poster .fp-img { padding-top: 150%; }
.fp-card.is-logo .fp-img {
padding-top: 100%;
background-color: #f4f4f5;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.fp-card.is-logo .fp-img::after {
content: '';
position: absolute;
inset: 0;
background: rgb(250, 250, 250);
mix-blend-mode: multiply;
}
.fp-card .fp-meta { padding: 14px 14px 16px; }
.fp-card .fp-name {
font-weight: 600;
font-size: 14px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-card .fp-role {
font-size: 12px;
color: var(--fp-muted);
margin: 0;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-card .fp-city {
font-size: 11px;
color: var(--fp-soft);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
margin-top: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* image hover: brightness only (project rule, hard cut) */
.fp-card .fp-img:hover,
.fp-news-card .fp-img:hover,
.fp-work-card .fp-thumb:hover {
filter: brightness(1.08);
}
/* Kill the global transition + opacity fade extra.css forces on every
`![]()
` chain. CLAUDE.md
forbids transitions/fades on hover; the brightness rule above is
the only allowed photo affordance. extra.css loads after this file
and uses `!important`, so we match with `!important`. Scoped to
.fp-page (filmpeoplev4 main wrapper) to avoid touching legacy
themes. */
.fp-page a .image img,
.fp-page .image a img,
.fp-page .image img,
.fp-card img,
.fp-news-card img,
.fp-work-card img {
transition: none !important;
-webkit-transition: none !important;
}
.fp-page a:hover .image img,
.fp-page .image a:hover img {
opacity: 1 !important;
}
/* ---------- profile card body (match post card) ---------------- */
/* Profile card markup: .card > .card-image + .card-content (direct child).
Use the direct-child combinator so production cards (which nest the
card-content under .columns > .column) do not match. */
.fp-page .card > .card-content {
padding: 14px 16px 22px !important;
}
.fp-page .card > .card-content .media-content {
padding: 0 !important;
margin: 0 !important;
}
.fp-page .card > .card-content + .card-footer.profile-card-footer,
.fp-page .card > .card-footer.profile-card-footer {
padding: 0 !important;
}
.fp-page .card > .card-footer.profile-card-footer .profile-card-icons {
/* Aligned with the membership/icon styling near the top of this file:
4px top + 4px bottom keeps icons centred in the bar (combined with
footer's display:flex; align-items:center); 16px sides match the
wider card-content padding. */
padding: 4px 16px !important;
gap: 14px !important;
}
.fp-page .card > .card-content .media-content > a:nth-of-type(1) > span {
font-family: var(--fp-font) !important;
font-weight: 600 !important;
font-size: 16px !important;
line-height: 1.3 !important;
color: var(--fp-ink) !important;
letter-spacing: -0.01em !important;
padding-top: 0 !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-height: none !important;
text-transform: none !important;
}
.fp-page .card > .card-content .media-content > a:nth-of-type(2) > span {
font-family: var(--fp-font) !important;
font-weight: 400 !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
color: #4b5563 !important;
letter-spacing: 0 !important;
padding-top: 2px !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-transform: none !important;
}
.fp-page .card > .card-content .media-content > a:nth-of-type(3) > span {
font-family: var(--fp-font) !important;
font-weight: 400 !important;
font-size: 11px !important;
line-height: 1 !important;
color: var(--fp-soft) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding-top: 6px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ---------- production card (livewire) — match news card look -- */
/* Production card markup: .card > .columns.is-mobile.is-flex.is-vcentered
> .column.is-4 (image) + .column.is-8 (content). Restyle so the card
reads like a news card: tight gutter-less split, larger title, simple
meta line — no "director" sub-line. */
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered {
margin: 0 !important;
--bulma-column-gap: 0 !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered > .column {
padding: 0 !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered > .column:first-child {
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
align-self: stretch !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered > .column + .column {
flex: 1 1 50% !important;
width: 50% !important;
max-width: 50% !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .card-image {
padding: 0 !important;
height: 100% !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .card-image figure.image {
height: 100% !important;
margin: 0 !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .card-image figure.image > a,
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .card-image figure.image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
/* legacy `has-rounded-corners-mobile` adds 7px radius on ![]()
in
extra.css; inside v4 cards the parent card handles rounding via
overflow:hidden, so individual images must be square. */
.fp-page .card .image img.has-rounded-corners-mobile,
.fp-page .card .image img {
border-radius: 0 !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .card-content {
padding: 16px !important;
margin-left: 0 !important;
width: 100% !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
line-height: normal !important;
}
/* hide the "director" sub-line on production cards (2nd anchor) */
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a:nth-of-type(2) {
display: none !important;
}
/* title — bigger, news-card style */
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a:nth-of-type(1) > span {
font-family: var(--fp-font) !important;
font-weight: 600 !important;
font-size: 17px !important;
line-height: 1.3 !important;
color: var(--fp-ink) !important;
letter-spacing: -0.01em !important;
padding-top: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: clip !important;
max-height: none !important;
text-transform: none !important;
}
/* meta (year · type · length) — news source style */
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a:nth-of-type(3) > span {
font-family: var(--fp-font) !important;
font-weight: 600 !important;
font-size: 11px !important;
line-height: 1 !important;
color: var(--fp-soft) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding-top: 4px !important;
margin-top: auto !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* responsive: unified card header size + center text on mobile */
@media (max-width: 768px) {
.fp-page .card > .card-content .media-content > a:nth-of-type(1) > span {
font-size: 15px !important;
}
.fp-page .card > .card-content .media-content > a:nth-of-type(2) > span {
font-size: 13px !important;
}
.fp-page .card > .card-content .media-content > a:nth-of-type(3) > span {
font-size: 10.5px !important;
}
/* news + production: image is 25% on mobile, content fills the rest.
Lock both min/max so a long unbreakable title can't push the image
column to shrink. Long titles wrap on word boundaries. */
.fp-news-card .fp-img {
flex: 0 0 25%;
width: 25%;
min-width: 25%;
max-width: 25%;
padding-top: 25%;
}
.fp-news-card .fp-meta {
min-width: 0;
overflow: hidden;
}
.fp-news-card .fp-title,
.fp-news-card .fp-source {
overflow-wrap: anywhere;
word-break: break-word;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered > .column:first-child {
flex: 0 0 25% !important;
width: 25% !important;
min-width: 25% !important;
max-width: 25% !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered > .column + .column {
flex: 1 1 75% !important;
width: 75% !important;
min-width: 0 !important;
max-width: 75% !important;
overflow: hidden !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a > span {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* news + production: vertically center the text block on mobile */
.fp-news-card .fp-meta {
justify-content: center;
}
.fp-news-card .fp-source {
margin-top: 0;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .card-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content {
justify-content: center !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a:nth-of-type(1) > span {
font-size: 15px !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a:nth-of-type(3) > span {
font-size: 10.5px !important;
}
.fp-page .card > .columns.is-mobile.is-flex.is-vcentered .media-content > a:nth-of-type(3) > span {
margin-top: 0 !important;
}
/* profile card on mobile: image left (25%), content + footer right (75%).
Same image dimensions as news card on mobile (25% × 25% square). */
.fp-page .card:has(> .card-image) {
display: grid !important;
grid-template-columns: 25% 75% !important;
grid-template-rows: 1fr auto !important;
}
.fp-page .card:has(> .card-image) > .card-image {
grid-column: 1 !important;
grid-row: 1 / -1 !important;
padding: 0 !important;
align-self: center !important;
position: relative !important;
background: transparent !important;
}
.fp-page .card:has(> .card-image) > .card-image figure.image {
position: relative !important;
width: 100% !important;
padding-top: 100% !important;
height: 0 !important;
margin: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.fp-page .card:has(> .card-image) > .card-image figure.image > a,
.fp-page .card:has(> .card-image) > .card-image figure.image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 8px !important;
}
.fp-page .card:has(> .card-image) > .card-image > a {
position: absolute !important;
inset: 0 !important;
}
.fp-page .card:has(> .card-image) > .card-content {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 14px 16px 8px !important;
}
.fp-page .card:has(> .card-image) > .card-footer.profile-card-footer .profile-card-icons {
padding: 0 16px 12px !important;
}
.fp-page .card:has(> .card-image) > .card-footer.profile-card-footer {
grid-column: 2 !important;
grid-row: 2 !important;
border-top: 0 !important;
}
.fp-page .card:has(> .card-image) > .card-footer.profile-card-footer .profile-card-icons {
padding: 0 16px 12px !important;
}
/* mobile reorder of home browse-mode sections: news → profile → posts.
Only fires when the profile-tabs ([data-fp-tabs="people"]) section
is present (browse mode); search mode keeps document order. */
.fp-page:has(> .fp-section[data-fp-tabs="people"]) {
display: flex;
flex-direction: column;
}
.fp-page:has(> .fp-section[data-fp-tabs="people"]) > .fp-section[data-fp-section="news"] {
order: 1;
}
.fp-page:has(> .fp-section[data-fp-tabs="people"]) > .fp-section[data-fp-tabs="people"] {
order: 2;
}
.fp-page:has(> .fp-section[data-fp-tabs="people"]) > .fp-section[data-fp-tabs="posts"] {
order: 3;
}
/* non-NL counterpart: messages is a single (non-tabbed) Posts widget
that takes the same bottom slot as werk/castings on NL mobile. */
.fp-page:has(> .fp-section[data-fp-tabs="people"]) > .fp-section[data-fp-section="messages"] {
order: 3;
}
/* news + post inner thumbs keep rounding even when we drop card chrome */
.fp-news-card .fp-img {
border-radius: 8px;
}
.fp-work-card .fp-thumb {
border-radius: 50%;
}
/* The unified "white panel with dividers" behaviour on mobile —
extra.css triggers it at 700px, but Bulma's mobile breakpoint is
768px, leaving a 701–768 gap. Replicate the rules here so they
apply at the Bulma breakpoint. */
.columns.is-condensed {
background-color: white;
margin-left: -20px;
margin-right: -20px;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
padding-top: 12px !important;
padding-bottom: 12px !important;
border-top: 1px solid #eef !important;
border-bottom: 1px solid #eef !important;
}
.columns.is-condensed > .column {
margin: 0;
border-bottom: 1px solid #eee;
}
.columns.is-condensed > .column:last-child {
border-bottom: none;
}
.columns.is-condensed .card-content {
padding: 8px 0;
margin-left: 0 !important;
}
.columns.is-condensed .has-shadow,
.columns.is-condensed .fp-news-card,
.columns.is-condensed .fp-work-card {
box-shadow: none !important;
border-radius: 0 !important;
}
/* hide the trailing divider on the *visible* last column when later
siblings carry .is-hidden-mobile (max-cap). */
.columns.is-condensed > .column:not(.is-hidden-mobile):not(:has(~ .column:not(.is-hidden-mobile))) {
border-bottom: none !important;
}
}
/* ---------- aside / right rail ------------------------------- */
.fp-right-rail {
display: flex;
flex-direction: column;
gap: 28px;
}
.fp-jump-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.fp-jump-buttons a,
.fp-jump-buttons button {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 0;
border-radius: var(--fp-radius);
box-shadow: var(--fp-shadow);
padding: 0 8px;
height: 38px;
font-family: var(--fp-font);
font-size: 14px;
font-weight: 500;
color: var(--fp-ink);
cursor: pointer;
text-decoration: none;
}
.fp-jump-buttons a:hover,
.fp-jump-buttons button:hover { background: #fafafa; }
.fp-widget {
background: #fff;
border: 0;
border-radius: var(--fp-radius);
box-shadow: var(--fp-shadow);
overflow: hidden;
}
.fp-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--fp-line);
}
.fp-widget-head h3 {
font-family: var(--fp-font);
font-size: 15px;
font-weight: 600;
margin: 0;
}
.fp-widget-head a {
font-size: 12px;
color: var(--fp-muted);
}
.fp-widget-list { padding: 8px 0; }
.fp-widget-list .fp-item {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #f3f4f6;
cursor: pointer;
}
.fp-widget-list .fp-item:last-child { border-bottom: 0; }
.fp-widget-list .fp-item:hover { background: #fafafa; }
.fp-item-thumb {
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 4px;
background: #e5e7eb center/cover no-repeat;
}
.fp-widget-profiles .fp-item-thumb { border-radius: 50%; }
.fp-item-body { min-width: 0; flex: 1; }
.fp-item-title {
font-family: var(--fp-font);
font-size: 13px;
font-weight: 600;
margin: 0;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fp-item-sub {
font-size: 11px;
color: var(--fp-soft);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
margin-top: 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fp-widget-foot {
padding: 10px 16px;
border-top: 1px solid var(--fp-line);
text-align: right;
}
.fp-widget-foot a {
font-size: 13px;
font-weight: 500;
color: var(--fp-muted);
}
.fp-widget-foot a:hover { color: var(--fp-ink); }
/* ---------- bulma overrides for redesign --------------------- */
.box,
.card,
.panel,
.notification,
.message,
.message-body,
.fp-card,
.fp-work-card,
.fp-news-card,
.fp-widget {
border-radius: var(--fp-radius);
}
/* widescreen 5-up / 8-up helpers */
.fp-fifth-card { display: none; }
@media (min-width: 1216px) {
.columns.is-multiline > .column.is-fifth-widescreen {
flex: none;
width: 20%;
}
.fp-fifth-card { display: block; }
}
.fp-widescreen-only { display: none; }
@media (min-width: 1216px) {
.columns.is-multiline > .column.is-eighth-widescreen {
flex: none;
width: 12.5%;
}
.fp-widescreen-only { display: block; }
}
/* ---------- FOOTER ------------------------------------------- */
.fp-footer {
background: #fff;
border-top: 1px solid var(--fp-line);
margin-top: 64px;
color: var(--fp-ink);
font-size: 13.5px;
}
.fp-footer-inner {
max-width: 1316px;
margin: 0 auto;
padding: 40px 24px 24px;
display: flex;
gap: 56px;
align-items: flex-start;
flex-wrap: wrap;
}
.fp-footer-brand {
flex: 1 1 240px;
min-width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.fp-footer-logo {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--fp-ink);
}
.fp-footer-logo img { height: 19px; display: block; }
.fp-footer-logo span {
color: var(--fp-ink);
font-weight: 700;
font-size: 14px;
}
.fp-footer-tagline {
color: var(--fp-muted);
font-size: 13px;
margin: 0;
}
.fp-footer-cols {
flex: 2 1 540px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.fp-footer-col h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fp-muted);
font-weight: 600;
margin: 0 0 12px;
}
.fp-footer-col a {
display: block;
color: var(--fp-ink);
padding: 4px 0;
font-size: 13.5px;
}
.fp-footer-col a:hover { color: var(--theme-accent, #3298dc); }
.fp-footer-bottom {
color: var(--fp-muted);
font-size: 12px;
}
.fp-footer-bottom-inner {
max-width: 1316px;
margin: 0 auto;
padding: 16px 24px;
display: flex;
justify-content: space-between;
}
.fp-footer-bottom-inner a {
color: var(--fp-muted);
text-decoration: none;
}
.fp-footer-bottom-inner a:hover { color: var(--theme-accent, #3298dc); }
@media (max-width: 768px) {
/* on mobile only the bottom strip is visible */
.fp-footer { margin-top: 12px; }
.fp-footer-inner { display: none; }
.fp-footer-bottom-inner { padding: 14px 16px; }
}
/* ---------- mobile menu drawer ------------------------------- */
.fp-mobile-menu {
display: none;
background: #fff;
border-bottom: 1px solid var(--fp-line);
padding: 8px 16px;
}
.fp-mobile-menu.is-open { display: flex; flex-direction: column; }
.fp-mobile-menu a {
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
color: var(--fp-ink);
font-size: 15px;
font-weight: 500;
}
.fp-mobile-menu a.is-active {
color: var(--theme-accent, #3298dc);
font-weight: 600;
}
.fp-mobile-menu a:last-child { border-bottom: 0; }
/* ---------- tab swap helpers --------------------------------- */
.fp-tab-panel { display: none; }
.fp-tab-panel.is-active { display: block; }
/* ---------- responsive --------------------------------------- */
@media (max-width: 1023px) {
.fp-country-strip-tag { display: none; }
}
@media (max-width: 768px) {
.fp-nav,
.fp-top-right .fp-pill,
.fp-top-right .fp-btn-ghost { display: none; }
.fp-burger { display: block; }
.fp-topbar-inner { gap: 12px; padding: 12px 16px; }
.fp-country-strip-inner {
padding: 8px 16px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fp-country-strip-inner::-webkit-scrollbar { display: none; }
.fp-country-tabs {
flex-wrap: nowrap;
white-space: nowrap;
}
.fp-country-tabs a { flex: 0 0 auto; }
.fp-page { padding: 16px; }
.fp-country-strip-tag,
.fp-country-label { display: none; }
.fp-top-right { gap: 6px; }
.fp-top-right .fp-btn-primary { padding: 6px 12px; font-size: 13px; }
.fp-hero-inner { padding: 28px 16px 18px; gap: 10px; }
.fp-hero .fp-hero-title { font-size: 24px; line-height: 1.15; }
.fp-hero-sub { display: none; }
.fp-hero-cta { display: none; }
.fp-hero-search .fp-search-field { min-height: 38px; padding: 4px 12px; }
.fp-hero-search .fp-search-field input { font-size: 14px; }
.fp-hero-search .fp-btn { padding: 0 14px; font-size: 14px; min-height: 38px; }
.fp-hero-sites { margin-top: 4px; gap: 4px; }
.fp-hero-sites a { padding: 3px 9px; font-size: 11px; gap: 3px; }
.fp-hero-sites a .ext { font-size: 9px; margin-left: 1px; }
.fp-row-tabs button,
.fp-row-tabs a { font-size: 20px; padding: 6px 12px 10px; }
.fp-row-tabs button:first-child,
.fp-row-tabs a:first-child { padding-left: 0; }
.fp-row-head {
margin-bottom: 0;
border-bottom: 0;
}
.fp-row-head h2 { font-size: 20px; padding-bottom: 10px; }
.fp-country-date { font-size: 11px; flex: 0 0 auto; }
.fp-row-tabs {
gap: 16px;
}
.fp-row-tabs a,
.fp-row-tabs button {
font-size: 18px;
padding: 4px 12px 8px;
margin-bottom: 0;
border-bottom-width: 3px;
}
.fp-row-tabs a:first-child,
.fp-row-tabs button:first-child {
padding-left: 0;
}
.fp-section { margin-bottom: 20px; }
.fp-section:has(.fp-row-foot) { margin-bottom: 20px; }
.fp-row-foot {
border-bottom: 1px solid var(--fp-line);
padding-bottom: 14px;
}
/* Werk/castings/markt's tabbed Posts row uses .fp-work-card whose
tighter internal bottom padding makes the "meer …" link visually
crowd the last card without an extra nudge. Berichten uses the
same widget but with `is-condensed` styling that already supplies
enough breathing room — no bump needed there. */
.fp-section[data-fp-tabs="posts"] .fp-row-foot {
margin-top: 24px;
}
.fp-news-card .fp-meta { padding: 0 16px; gap: 4px; }
.fp-news-card .fp-title { font-size: 15px; -webkit-line-clamp: 3; }
.fp-news-card .fp-source { font-size: 10.5px; }
.fp-work-card { padding: 8px 18px 8px 16px; gap: 16px; }
.fp-work-card .fp-thumb { flex: 0 0 56px; width: 56px; height: 56px; }
.fp-work-card .fp-title { font-size: 15px; }
.fp-work-card .fp-desc { font-size: 13px; -webkit-line-clamp: 3; }
.fp-work-card .fp-meta-line { font-size: 13px; }
.fp-work-card .fp-location { font-size: 10.5px; }
.fp-card .fp-meta { padding: 10px 12px 12px; }
.fp-card .fp-name { font-size: 15px; }
.fp-card .fp-role { font-size: 11.5px; }
.fp-card .fp-city { font-size: 10.5px; }
}
/* =============================================================
theme-token application (moved out of layouts/app.blade.php).
--theme-shadow-drop / --fp-radius / etc. are injected on :root
by app.blade.php from config(). Selectors below apply those
tokens — keep all static rules here, not inline.
============================================================= */
.has-shadow,
.box.has-shadow,
.panel.has-shadow,
.card.has-shadow,
.fp-card,
.fp-news-card,
.fp-work-card,
.fp-widget,
.fp-jump-buttons a,
.fp-jump-buttons button {
box-shadow: var(--theme-shadow-drop);
}
.input,
.textarea {
box-shadow:
inset 0 0.0625em 0.125em rgba(51, 51, 51, 0.05),
var(--theme-shadow-drop-small);
}
.button,
.fp-btn {
box-shadow: var(--theme-shadow-drop-small);
}
.fp-hero-search { box-shadow: var(--theme-shadow-drop); }
/* Containers (cards, boxes, panels, popups) */
.box,
.card,
.card.is-rounded,
.modal-card.is-rounded,
.panel,
.navbar.is-spaced .navbar-dropdown,
.navbar-dropdown.is-boxed,
.fp-card,
.fp-news-card,
.fp-work-card,
.fp-widget,
.fp-jump-buttons a,
.fp-jump-buttons button,
.fp-hero-search,
.fp-hero-search .fp-search-field,
.fp-hero-search .fp-btn {
border-radius: var(--fp-radius);
}
.fp-hero-search .fp-search-field {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.fp-hero-search .fp-btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.modal-card.is-rounded,
.card.is-rounded { overflow: hidden; }
/* Profile/production cards rendered via livewire/profiles.blade.php and
livewire/productions.blade.php use Bulma `.card.has-ribbon.is-rounded
.has-shadow`. extra.css (loaded after this file) hard-codes
`.card.is-rounded { border-radius: 7px }` and a heavier
`.card.has-shadow { box-shadow: ... }` — both fight the v4 tokens.
Bump specificity inside .fp-page so the v4 radius/shadow wins. */
.fp-page .card,
.fp-page .card.is-rounded {
border-radius: var(--fp-radius);
overflow: hidden;
box-shadow: var(--fp-shadow);
}
.fp-page .card.has-shadow {
box-shadow: var(--theme-shadow-drop, var(--fp-shadow));
}
.panel-heading,
.navbar-item.has-dropdown-up .navbar-dropdown {
border-radius: var(--fp-radius) var(--fp-radius) 0 0;
}
/* Controls (buttons, inputs, selects, tags, …) */
.button,
.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large),
.input,
.textarea,
.select select,
.notification,
.message,
.message-body,
.tag:not(body),
.dropdown-content,
.list,
.file-cta,
.file-name,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.fp-btn {
border-radius: var(--fp-radius-regular);
}
.button.is-small,
.is-small.input,
.is-small.textarea,
.select.is-small select,
.menu-list a,
.navbar-link:not(.is-arrowless)::after {
border-radius: var(--fp-radius-small);
}
.tabs.is-boxed a,
.file.is-boxed.has-name .file-cta,
.message-header {
border-radius: var(--fp-radius-regular) var(--fp-radius-regular) 0 0;
}
/* Unified button chrome — consistent across all Bulma color variants and
plain `.button`. Radius + shadow are already handled above; this block
covers font weight, transition kill (CLAUDE.md: hover = hard cut), and
hover-by-brightness so a form mixing .is-link / .is-success / .is-danger
/ plain buttons reads as the same family. Older templates keep using
.is-link as the theme-color trigger; semantic variants (success / danger
/ warning / info) keep their Bulma colors but pick up the same chrome. */
.button {
font-family: var(--fp-font);
font-weight: 500;
transition: none;
}
.button:hover,
.button:focus,
.button:active {
transition: none;
}
.button.is-primary:hover,
.button.is-info:hover,
.button.is-success:hover,
.button.is-warning:hover,
.button.is-danger:hover {
filter: brightness(.95);
}
.button.is-primary.is-outlined:hover,
.button.is-info.is-outlined:hover,
.button.is-success.is-outlined:hover,
.button.is-warning.is-outlined:hover,
.button.is-danger.is-outlined:hover {
filter: none;
}
/* Plain `.button` (no color modifier): keep Bulma's white-on-grey-border
look but match the v4 hover convention — slight darken via brightness,
no transition. */
.button:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-text):not(.is-ghost):hover {
filter: brightness(.97);
}
.file.is-boxed.has-name .file-name {
border-radius: 0 0 var(--fp-radius-regular) var(--fp-radius-regular);
}
.file.is-right .file-cta {
border-radius: 0 var(--fp-radius-regular) var(--fp-radius-regular) 0;
}
.file.is-right .file-name {
border-radius: var(--fp-radius-regular) 0 0 var(--fp-radius-regular);
}
.sticky_header { top: 0 !important; }
.is_sticky.sticky_title { top: 0 !important; }
/* Skeleton-loader (legacy listing placeholder) */
.skeleton-loader {
width: 100%;
height: 100%;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
.skeleton-loader::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: loading 1.5s infinite;
}
.skeleton-card { width: 100%; height: 300px; margin-bottom: 20px; border-radius: 8px; }
@keyframes loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Card skeletons (Bulma is-skeleton + skeleton-lines) */
.fp-skeleton {
/* warm-neutral grey palette */
--fp-skeleton-strong: #d8d8d6;
--fp-skeleton-soft: #e7e7e5;
--fp-skeleton-image: #dedddb;
--bulma-skeleton-background: var(--fp-skeleton-strong);
--bulma-skeleton-radius: var(--fp-radius-small);
/* Held invisible for the first 500ms after mount so a fast load
never flashes a skeleton. The skeleton is rendered server-side
via @if(!$readyToLoad) and removed from the DOM as soon as the
livewire response replaces it with the real cards — that
removal cancels the reveal entirely if it happens before 500ms. */
opacity: 0;
animation: fpSkeletonReveal 0s linear 0.5s forwards;
}
@keyframes fpSkeletonReveal {
to { opacity: 1; }
}
.fp-skeleton .card {
background-color: var(--fp-card);
/* Match Bulma's default card radius so skeleton cards line up with
real cards (which use --bulma-card-radius) instead of inheriting
the smaller --fp-radius and looking slightly narrower. */
border-radius: var(--bulma-card-radius, 0.75rem);
box-shadow: var(--fp-shadow);
overflow: hidden;
}
.fp-skeleton .card .card-image .image.is-skeleton {
background-color: var(--fp-skeleton-image);
/* Defensive: enforce a square placeholder. The figure has no ![]()
, so
Bulma's padding-top:100% trick can collapse to 0 in some flex contexts.
width:100% guarantees the figure fills its column; aspect-ratio + a
min-height keep it visibly square even when the column is briefly
narrow during morph/x-show reveal. */
display: block;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 80px;
}
/* Profiles: image sits on top of the card-content on desktop+, so only
the top corners stay rounded. Cards with no description (no content
area) keep all four corners rounded. */
.fp-skeleton--profiles .card .card-image .image.is-skeleton {
border-radius: 0.75rem 0.75rem 0 0;
}
.fp-skeleton--profiles .card:not(:has(.card-content)) .card-image .image.is-skeleton {
border-radius: 0.75rem;
}
/* Productions / feeds: horizontal card layout — image is on the left,
content on the right. Round only the left edges. */
.fp-skeleton--productions .card .card-image .image.is-skeleton,
.fp-skeleton--feeds .card .card-image .image.is-skeleton {
border-radius: 0.75rem 0 0 0.75rem;
}
/* Mobile: profile cards flip into the 25/75 horizontal grid (image left,
content right), so the image rounds left corners only — matching the
real-card mobile layout. */
@media screen and (max-width: 768px) {
.fp-skeleton--profiles .card .card-image .image.is-skeleton {
border-radius: 0.75rem 0 0 0.75rem;
}
}
.fp-skeleton .skeleton-lines {
--bulma-skeleton-lines-gap: 0.65em;
--bulma-skeleton-line-height: 0.85em;
}
.fp-skeleton .skeleton-lines > div {
background-color: var(--fp-skeleton-strong);
}
.fp-skeleton .skeleton-lines > div:nth-child(n+2) {
background-color: var(--fp-skeleton-soft);
}
.fp-skeleton--profiles .skeleton-lines > div:nth-child(1) { width: 80%; }
.fp-skeleton--profiles .skeleton-lines > div:nth-child(2) { width: 60%; }
.fp-skeleton--productions .skeleton-lines > div:nth-child(1) { width: 90%; }
.fp-skeleton--productions .skeleton-lines > div:nth-child(2) { width: 55%; }
/* Feeds: real card is one short meta line + a tall title block (up to
~6.7em). Bump line-height + gap so 4 placeholder bars fill the
horizontal layout to roughly the same height as the real title. */
.fp-skeleton--feeds .skeleton-lines {
--bulma-skeleton-lines-gap: 0.85em;
--bulma-skeleton-line-height: 1em;
}
.fp-skeleton--feeds .skeleton-lines > div:nth-child(1) { width: 55%; }
.fp-skeleton--feeds .skeleton-lines > div:nth-child(2) { width: 95%; }
.fp-skeleton--feeds .skeleton-lines > div:nth-child(3) { width: 80%; }
.fp-skeleton--feeds .skeleton-lines > div:nth-child(4) { width: 70%; }
.fp-skeleton--posts .skeleton-lines > div:nth-child(1) { width: 85%; }
.fp-skeleton--posts .skeleton-lines > div:nth-child(2) { width: 65%; }
/* ---------- LIDMAATSCHAP / SUBSCRIPTION SELECTOR -----------------
Layered on top of extra.css's legacy .pricing-table (Bulma 0.x
extension) so the plan cards adopt v4 chrome (radius, shadow,
theme-accent border + tint on the selected card, white-on-accent
Selecteer button). The legacy classes stay in place; we only
restyle them. */
.pricing-table .pricing-plan {
background-color: var(--fp-card, #fff);
border: 1px solid var(--fp-line, #e5e7eb);
border-radius: var(--fp-radius, 9px);
box-shadow: var(--theme-shadow-drop-small, 0 1px 2px rgba(0,0,40,.05));
transition: none;
overflow: hidden;
margin: .5rem;
}
.pricing-table .pricing-plan .plan-header {
background: transparent;
color: var(--fp-ink, #1f2937);
font-size: 1.05rem;
font-weight: 600;
padding: 1rem .75rem .35rem;
border-bottom: 1px solid var(--fp-line, #e5e7eb);
}
.pricing-table .pricing-plan .plan-price {
background: transparent;
padding: 1rem .75rem 1rem;
color: var(--fp-ink, #1f2937);
border-bottom: 1px solid var(--fp-line, #e5e7eb);
}
.pricing-table .pricing-plan .plan-price .plan-price-amount {
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
letter-spacing: -.02em;
}
.pricing-table .pricing-plan .plan-price .plan-price-currency {
color: var(--fp-muted, #6b7280);
}
.pricing-table .pricing-plan .plan-item {
background: transparent;
color: var(--fp-ink, #1f2937);
border-bottom: 1px solid var(--fp-line, #e5e7eb);
padding: .65rem .75rem;
font-size: .88rem;
}
.pricing-table .pricing-plan .plan-item:last-of-type {
border-bottom: 0;
}
.pricing-table .pricing-plan .plan-footer {
padding: .75rem .85rem 1rem;
background: transparent;
border-top: 1px solid var(--fp-line, #e5e7eb);
}
/* Selecteer label-buttons: outlined neutral by default, theme-accent
solid when this plan is the selected one. */
.pricing-table .pricing-plan .plan-footer .button {
background: #fff;
border: 1px solid var(--fp-line, #e5e7eb);
color: var(--fp-ink, #1f2937);
font-weight: 600;
box-shadow: none;
}
.pricing-table .pricing-plan .plan-footer .button:hover {
filter: brightness(.97);
color: var(--fp-ink, #1f2937);
}
/* Selected plan: theme-accent border + tint, accent solid Selecteer
button. Overrides extra.css's hardcoded turquoise (#00d1b2). */
.pricing-table .pricing-plan.is-active {
border-color: var(--theme-accent, #3298dc);
background: color-mix(in srgb, var(--theme-accent, #3298dc) 4%, white);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--theme-accent, #3298dc) 12%, transparent),
var(--theme-shadow-drop, 0 1px 2px rgba(0,0,40,.05));
transform: none;
}
.pricing-table .pricing-plan.is-active .plan-price .plan-price-amount {
/* extra.css (loaded after filmpeoplev4.css) hardcodes the legacy
turquoise here, so we have to win with !important. */
color: var(--theme-accent, #3298dc) !important;
}
.pricing-table .pricing-plan.is-active .plan-footer .button,
.pricing-table .pricing-plan.is-active .plan-footer .button.is-active {
background-color: var(--theme-accent, #3298dc) !important;
border-color: var(--theme-accent, #3298dc) !important;
color: #fff !important;
}
.pricing-table .pricing-plan.is-active .plan-footer .button:hover {
background-color: var(--theme-accent, #3298dc) !important;
color: #fff !important;
filter: brightness(.95);
}
/* "Verder" continue button: keep .is-success rendering as the legacy
green when no plan is picked (disabled state reads as muted), but
recolor the enabled state to the theme accent so it ties in with
the selected plan above it. Scoped to the subscription page so we
don't repaint .is-success globally. */
.pricing-table + br + br + .container .button.is-success:not([disabled]),
form .pricing-table ~ * .button.is-success:not([disabled]) {
background-color: var(--theme-accent, #3298dc) !important;
border-color: var(--theme-accent, #3298dc) !important;
color: #fff !important;
}
.pricing-table + br + br + .container .button.is-success:not([disabled]):hover {
filter: brightness(.95);
}
/* ==========================================================================
Variant 75-S — Profile header (square buttons, 2×2 grid + meta-row)
Overlays the existing .profile-hero-card / .profile-hero structure so it
inherits all padding/flush/tabs styling from _styles.blade.php; only the
v75-specific bits (meta-row, button-grid, larger popup avatar) are added.
========================================================================== */
/* Hero columns vertically centered (override the inherited `align-items: stretch`
so the avatar isn't pulled to fill the column height). */
.profile-hero-card--v75 .profile-hero {
align-items: center !important;
}
/* Override the inherited `overflow: hidden` from .profile-hero-card so the
"In lijst"-dropdown can escape the card. The avatar already has its own
border-radius + overflow:hidden, so we don't need it on the box. */
.profile-hero-card--v75 {
overflow: visible !important;
}
.profile-hero-card--v75 .profile-hero__image-col {
align-items: center !important;
}
/* Bump the popup avatar from 96px → 110px and tighten its margin so the card
doesn't grow taller than the avatar requires. Full profile keeps its 130px --lg. */
.profile-hero-card--v75 .profile-hero__image--md {
width: 110px;
height: 110px;
margin: 0.65rem 0 0.65rem 0.65rem;
}
.profile-hero-card--v75 .profile-hero__image--lg {
margin: 0.65rem 0 0.65rem 0.85rem;
}
.profile-hero-card--v75 .profile-hero__image--sm {
margin: 0.5rem 0 0.5rem 0.5rem;
}
/* Tighten body + actions padding from 1.1rem → 0.85rem so the card matches
the v75 mockup compactness. */
.profile-hero-card--v75 .profile-hero__body {
padding: 0.85rem 0.85rem 0.85rem 0.95rem !important;
}
.profile-hero-card--v75 .profile-hero__actions {
padding: 0.85rem 0.85rem 0.85rem 0.6rem !important;
}
.profile-hero-card--v75 .profile-hero__actions-mobile {
padding: 0 0.85rem 0.85rem 0.85rem !important;
}
/* Meta-row under city: NSC NBF + Beschikbaar (soft-tint chips). */
.profile-hero__meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.profile-hero-card--v75 .profile-hero__membership {
display: inline-block;
font: 700 9.5px/1.4 'Inter', system-ui, sans-serif;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 4px;
background-color: color-mix(in srgb, var(--c, #6b7180) 14%, white);
color: color-mix(in srgb, var(--c, #6b7180) 80%, black);
}
.profile-hero__availability {
display: inline-flex;
align-items: center;
gap: 5px;
font: 700 9.5px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.04em;
padding: 3px 7px;
border-radius: 4px;
}
.profile-hero__availability::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
}
.profile-hero__availability.is-available {
background: color-mix(in srgb, #2bb673 14%, white);
color: color-mix(in srgb, #2bb673 80%, black);
}
.profile-hero__availability.is-available::before { background: #2bb673; }
.profile-hero__availability.is-limited {
background: color-mix(in srgb, #d39e00 14%, white);
color: color-mix(in srgb, #d39e00 80%, black);
}
.profile-hero__availability.is-limited::before { background: #d39e00; }
.profile-hero__availability.is-unavailable {
background: color-mix(in srgb, #c62828 14%, white);
color: color-mix(in srgb, #c62828 80%, black);
}
.profile-hero__availability.is-unavailable::before { background: #c62828; }
/* 2×2 button grid that lives inside .profile-hero__actions (and the mobile twin).
No min-width — buttons size to their label so the grid stays compact. */
.profile-hero__btn-grid {
display: grid;
grid-template-columns: max-content max-content;
gap: 6px;
}
.profile-hero__btn-grid > * { min-width: 0; }
/* Phase 8bi — empty slot keeps the 2x2 grid alignment without
rendering a visible cell. Matches button height so the grid
row doesn't collapse. */
.profile-hero__btn-empty {
display: block;
visibility: hidden;
}
/* Phase 8bi — full-profile view collapses to a single 2-button
row: [Contact][In lijst]. Drop the second grid row entirely so
the row doesn't reserve empty space below. */
.profile-hero__btn-grid--no-portfolio {
grid-template-rows: auto;
}
/* Mobile actions row: stretch grid full-width inside the mobile container */
.profile-hero__actions-mobile .profile-hero__btn-grid {
grid-template-columns: 1fr 1fr;
width: 100%;
}
.fp75-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 7px 12px;
font: 600 12.5px/1 'Inter', system-ui, sans-serif;
text-decoration: none;
border: 1.5px solid transparent;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
background: #fff;
color: #1a1f2c;
}
.fp75-btn .icon { display: inline-flex; align-items: center; }
.fp75-btn .icon i { font-size: 12px; }
.fp75-btn--black { background: #1a1f2c; color: #fff; border-color: #1a1f2c; }
.fp75-btn--black:hover { background: #2a3041; border-color: #2a3041; color: #fff; }
/* "In lijst" active state — uses the tenant highlight colour, not a fixed blue. */
.fp75-btn--blue { background: var(--theme-accent, #3298dc); color: #fff; border-color: var(--theme-accent, #3298dc); }
.fp75-btn--blue:hover { background: color-mix(in srgb, var(--theme-accent, #3298dc) 85%, #000); border-color: color-mix(in srgb, var(--theme-accent, #3298dc) 85%, #000); color: #fff; }
.fp75-btn--outline-grey { background: #fff; color: #4a5160; border-color: #d8dde6; }
.fp75-btn--outline-grey:hover { border-color: #1a1f2c; color: #1a1f2c; }
.fp75-btn--tint-blue {
background: color-mix(in srgb, #3298dc 14%, white);
color: color-mix(in srgb, #3298dc 75%, black);
border-color: color-mix(in srgb, #3298dc 30%, white);
}
.fp75-btn--tint-blue:hover {
background: color-mix(in srgb, #3298dc 22%, white);
border-color: color-mix(in srgb, #3298dc 45%, white);
}
/* ==========================================================================
In lijst — hover dropdown (lists this profile is on, with toggle + add)
========================================================================== */
.fp-list-button {
position: relative;
/* Lift the entire button + dropdown into its own stacking context
above any sticky sibling in the popup (notably .profile-tabs at
z-index: 30 with position: sticky — that strip sat ON TOP of the
open dropdown when the hero grew taller because of a wrapping
availability badge like "Beperkt beschikbaar"). */
z-index: 60;
}
.fp-list-button .fp75-btn { width: 100%; }
.fp-list-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 180px;
max-width: 260px;
padding: 4px 0;
background: #fff;
border: 1px solid #d8dde6;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
z-index: 50;
display: none;
}
/* Reveal on hover (button OR dropdown) so the user can move into the dropdown
without it disappearing. A small invisible bridge keeps the gap forgiving. */
.fp-list-button:hover .fp-list-dropdown,
.fp-list-button:focus-within .fp-list-dropdown { display: block; }
.fp-list-dropdown::before {
content: "";
position: absolute;
top: -6px; left: 0; right: 0; height: 6px;
}
.fp-list-dropdown__item {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 7px 12px;
background: transparent;
border: 0;
cursor: pointer;
font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
color: #1a1f2c;
text-align: left;
}
.fp-list-dropdown__item:hover { background: #f3f4f6; }
.fp-list-dropdown__check {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
color: color-mix(in srgb, var(--theme-accent, #3298dc) 80%, black);
font-size: 11px;
}
/* Phase 8bd — UserList icon shown alongside each dropdown entry. */
.fp-list-dropdown__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
color: #5b6373;
font-size: 12px;
}
.fp-list-dropdown__name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fp-list-dropdown__divider {
height: 1px;
background: #eef0f3;
margin: 4px 0;
}
.fp-list-dropdown__empty {
padding: 7px 12px;
font: 500 12px/1.3 'Inter', system-ui, sans-serif;
color: #9aa0ad;
font-style: italic;
}
.fp-list-dropdown__header {
padding: 4px 12px 2px;
font: 600 10px/1.3 'Inter', system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9aa0ad;
}
.fp-list-dropdown__item--quick .fp-list-dropdown__check { color: #9aa0ad; }
.fp-list-dropdown__item--quick:hover .fp-list-dropdown__check { color: var(--theme-accent, #3298dc); }
/* ==========================================================================
Toast notification
========================================================================== */
.fp-toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
/* Above layer-4 interaction modals (z-index 999999) so the
confirmation/error toast is visible even when an interaction
modal — like the SaveToList chip-picker — is open. */
z-index: 1000001;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
/* Phase 8eq — neutral Bulma light surface as the base; per-status
tints below override background + text color but stay in the
dimmed `is-light` palette so the toast doesn't shout. */
background: #f5f5f5;
color: #363636;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
font: 600 13px/1.3 'Inter', system-ui, sans-serif;
max-width: 90vw;
}
.fp-toast__icon { display: inline-flex; align-items: center; }
.fp-toast__icon i { font-size: 14px; }
/* Phase 8eq — Bulma `is-light` palette for the per-status tints.
These are the same colors Bulma uses for `.notification.is-success.is-light`
etc., which read as dimmed/pastel instead of bright. */
.fp-toast--success { background: #effaf5; color: #257953; }
.fp-toast--error { background: #feecf0; color: #cc0f35; }
.fp-toast--info { background: #eff5fb; color: #1d72aa; }
/* ==========================================================================
MyListsPanel — sidebar list of saved-profile lists + header pill row
========================================================================== */
.my-lists-panel {
display: flex;
flex-direction: column;
gap: 2px;
}
.my-lists-panel__item {
/* `position: relative` anchors the active-indicator ::before line. */
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
font: 500 13px/1.3 'Inter', system-ui, sans-serif;
color: #1a1f2c;
text-align: left;
}
.my-lists-panel__item:hover { background: #f3f4f6; }
.my-lists-panel__item.is-active {
/* Match the tag-filter-scope--flat active style: thin accent line
on the left + pure accent text + bold. The line lives in a
::before pseudo-element rather than `box-shadow: inset` so its
edges stay STRAIGHT — `box-shadow: inset` follows the parent's
border-radius and rounds the line at top-left/bottom-left, which
looks broken next to the rounded hover pill. */
background: transparent;
color: var(--theme-accent, #3298dc);
border-color: transparent;
font-weight: 600;
}
.my-lists-panel__item.is-active::before {
content: '';
position: absolute;
/* Negative left pushes the line outside the item by:
padding (10px) + border (1px) = 11px
so it sits flush at the .fp-sidebar-box's outer-left edge,
overlapping the box's 1px border (no visible gap between
line and box). */
left: -11px;
top: 0;
bottom: 0;
width: 3px;
background: var(--theme-accent, #3298dc);
/* No border-radius — straight line from top to bottom regardless
of the item's rounded hover background. */
border-radius: 0;
}
.my-lists-panel__item.is-active:hover {
background: #f3f4f6;
}
.my-lists-panel__name {
flex: 1 1 auto;
min-width: 0; /* allow text-overflow on .__name-text inside */
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
}
/* Phase 8bl — actual label text ellipsizes when the row is too narrow
for the full name. The list icon stays full-size; the count chip on
the right keeps its full width via flex: 0 0 auto. */
.my-lists-panel__name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.my-lists-panel__name i { font-size: 11px; color: #9aa0ad; flex: 0 0 auto; }
.my-lists-panel__item.is-active .my-lists-panel__name i { color: inherit; }
.my-lists-panel__count {
flex: 0 0 auto;
padding: 2px 8px;
font: 600 11px/1.3 'Inter', system-ui, sans-serif;
color: #6b7180;
background: #eef0f3;
border-radius: 999px;
}
.my-lists-panel__item.is-active .my-lists-panel__count {
/* Active count chip: soft accent tint + pure accent text — reads as
"you're filtering by this list" with the same accent colour as
the line + label so the row holds together visually. */
background: color-mix(in srgb, var(--theme-accent, #3298dc) 16%, white);
color: var(--theme-accent, #3298dc);
}
.my-lists-panel__empty {
padding: 12px;
font: 500 12.5px/1.4 'Inter', system-ui, sans-serif;
color: #9aa0ad;
font-style: italic;
}
/* Phase 8bo — public-lists tab on profile / popup. Card row with
icon left, name + description in the middle, arrow on the right.
No hover animations (per project convention).
Phase 8bp — `.profile-public-lists` wrapper dropped; cards now sit
inside a standard Bulma `.columns.is-multiline` grid so the
per-breakpoint layout follows the project convention. The card
itself stays a styled flex row (icon + body + arrow) — that's
layout INSIDE one card, not grid markup. */
.profile-public-list-card {
height: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #f7f9fb;
border: 1px solid #e6e8ec;
border-radius: 8px;
text-decoration: none;
color: #1a1f2c;
}
.profile-public-list-card:hover {
background: #eef0f3;
}
.profile-public-list-card__icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--theme-accent, #3298dc) 12%, white);
color: var(--theme-accent, #3298dc);
border-radius: 8px;
font-size: 15px;
}
.profile-public-list-card__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.profile-public-list-card__name {
font-weight: 600;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-public-list-card__desc {
color: #5b6373;
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-public-list-card__arrow {
flex: 0 0 auto;
color: #9aa0ad;
font-size: 13px;
}
/* Phase 8bp — defensive #lijsten_main_* grid override (Phase 8bn)
removed. Bulma's own `is-X-mobile / is-X-tablet / ...` classes on
the `.column` are the source of truth for column widths across
breakpoints. The widget's `rows` config already feeds them in via
ProfilesComponent. No project-side CSS should be fighting Bulma
here. */
/* Phase 8bk — page-header row on /lists: title H3 on the left, edit
pen inline next to it (not right-of-the-whole-block). Pen only
renders when a list is selected and editable. */
.fp-lists-header-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 14px 0 12px;
}
.fp-lists-header-row__h3 {
flex: 0 1 auto;
margin: 0;
font: 600 1.25rem/1.3 'Inter', system-ui, sans-serif;
color: #1a1f2c;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.fp-lists-header-row__edit {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1.5px solid #d8dde6;
border-radius: 6px;
color: #5b6373;
cursor: pointer;
font-size: 13px;
}
.fp-lists-header-row__edit:hover {
color: var(--theme-accent, #3298dc);
border-color: var(--theme-accent, #3298dc);
background: color-mix(in srgb, var(--theme-accent, #3298dc) 8%, white);
}
/* Header pill row above profile grid */
.my-lists-header {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 12px 0 14px;
margin-bottom: 14px;
border-bottom: 1px solid #eef0f3;
}
.my-lists-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1.5px solid #d8dde6;
border-radius: 999px;
cursor: pointer;
font: 600 12.5px/1 'Inter', system-ui, sans-serif;
color: #4a5160;
}
.my-lists-pill i { font-size: 11px; color: #9aa0ad; }
.my-lists-pill:hover { border-color: #1a1f2c; color: #1a1f2c; }
.my-lists-pill:hover i { color: #1a1f2c; }
.my-lists-pill.is-active {
background: var(--theme-accent, #3298dc);
color: #fff;
border-color: var(--theme-accent, #3298dc);
}
.my-lists-pill.is-active i { color: #fff; }
.my-lists-pill__count {
padding: 1px 7px;
background: rgba(0,0,0,0.07);
border-radius: 999px;
font-size: 11px;
}
.my-lists-pill.is-active .my-lists-pill__count {
background: rgba(255,255,255,0.25);
color: #fff;
}
/* Hold the columns layout open even when the right pane has zero results
(otherwise the row collapses to the height of the small pill row + empty
sidebar, and the page reads as broken). */
.fp-page .columns.is-variable.is-5 { min-height: 360px; }
/* SearchHeaderTitle hardcodes a `
` inside .sticky_title for legacy spacing
in older themes. In v4 we drive spacing per-block (uitgelicht wrapper has
its own margin-bottom; main header sits flush against whatever's above it).
Suppress the legacy br so main doesn't sit too low when uitgelicht is hidden. */
.fp-page .sticky_title > br:first-child { display: none; }
/* Spacing below the conditional uitgelicht block — applies when it's visible
(x-show=true). When Alpine hides it via display:none, the margin doesn't
contribute to layout, so the main header sits flush. */
/* Uitgelicht-block: alleen ruimte onderaan. width/display worden door Bulma's
block-default afgehandeld; expliciete width veroorzaakte schuifgedrag in
sommige flex-contexts. */
.fp-uitgelicht-block { margin-bottom: 1.25rem; }
/* x-cloak — Alpine sets this attribute until init runs. Without this rule,
uitgelicht briefly renders visible (and at full skeleton width) before
Alpine evaluates x-show. */
[x-cloak] { display: none !important; }
/* Right pane min-height only — width is fully delegated to Bulma's standard
`.column.is-three-quarters-desktop` etc. classes on the column markup. We
no longer override flex/width: those overrides fought with Bulma's
responsive grid and broke the layout in some breakpoints. */
.fp-page .fp-page-main { min-height: 360px; }
/* ==========================================================================
ProfilesComponent reload state — uses the existing card-skeleton via
wire:loading.delay.short. No bespoke styling needed here; the skeleton
blade pulls in .fp-skeleton + .is-skeleton rules from the project's
skeleton stylesheet. The wrapper class is kept as a CSS hook in case
we later want to fade the swap. */
.profiles-component-wrap { position: relative; }
/* No-transition on hover anywhere else, but the toast slides in/out for clarity. */
.fp-toast-enter,
.fp-toast-leave {
transition: opacity 180ms ease, transform 180ms ease;
}
.fp-toast-enter-start { opacity: 0; transform: translate(-50%, -8px); }
.fp-toast-leave-end { opacity: 0; transform: translate(-50%, -8px); }
.fp-list-dropdown__item--add {
color: var(--theme-accent, #3298dc);
font-weight: 600;
}
.fp-list-dropdown__item--add .fp-list-dropdown__check { color: var(--theme-accent, #3298dc); }
/* "view your saved list" links — anchors styled to fit the button rows. */
.fp-list-dropdown__item--view,
.fp-list-dropdown__item--view:hover {
color: #1a1f2c;
text-decoration: none;
}
.fp-list-dropdown__item--view .fp-list-dropdown__check {
color: #6b7180;
font-size: 11px;
}
.fp-list-dropdown__item--view:hover .fp-list-dropdown__check { color: var(--theme-accent, #3298dc); }
/* Empty / guest state for the "Mijn lijst" tab. Reads as page content
rather than a marketing card — left-aligned, no leading icon, design
tokens identical to the sidebar boxes elsewhere on the page. */
.fp-list-empty-state {
background: #fff;
border: 1px solid var(--fp-line);
border-radius: var(--fp-radius);
padding: 20px 22px;
margin: 8px 0 32px;
}
.fp-list-empty-state__title {
font-family: var(--fp-font);
font-size: 1rem;
font-weight: 600;
color: var(--fp-ink);
margin: 0 0 6px;
}
.fp-list-empty-state__body {
font-family: var(--fp-font);
font-size: 0.9rem;
line-height: 1.55;
color: var(--fp-muted);
margin: 0 0 14px;
}
.fp-list-empty-state__cta { margin-top: 2px; }
.fp75-btn.is-disabled,
.fp75-btn[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
/* ==========================================================================
Layer-4 interaction modal (universal)
--------------------------------------------------------------------------
Apply `.fp-interaction-modal` (alongside Bulma's `.modal`) to any modal
that must sit on top of every other UI layer. Layer stack:
1. Main window (z-index baseline)
2. Preview popup (TB_window thickbox, z-index ~110000)
3. Media popup (photo/film modal, z-index 60–100)
4. Interaction modal (this class, z-index 999999)
Every interaction modal MUST be mounted in the main layout
(themes/filmpeoplev4/layouts/app.blade.php) — never inside the preview
popup — so it survives popup close/open cycles and never becomes a child
of a lower layer.
========================================================================== */
.modal.fp-interaction-modal {
inset: 0; /* Bulma's `.modal` is position:fixed but unset. */
z-index: 999999;
}
.modal.fp-interaction-modal .modal-background {
position: absolute;
inset: 0;
background-color: rgba(20, 28, 40, 0.5);
cursor: pointer;
}
/* ==========================================================================
Phase 8bg — Universal v4 chrome for every interaction-modal card.
Every .modal.fp-interaction-modal > .modal-card now picks these up by
default, so individual modals (SaveToList / Contact / PostReply /
ReportPost) don't need to re-declare the same width / border-radius /
head padding / foot flex rules. Modal-specific decorations (context
cards, intro paragraphs, media panel, list chips) still live in their
per-modal rule blocks below.
========================================================================== */
.fp-interaction-modal .modal-card {
width: 100%;
max-width: 640px;
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.fp-interaction-modal .modal-card-head,
.fp-interaction-modal .modal-card-body,
.fp-interaction-modal .modal-card-foot {
background: #fff;
border: 0;
border-radius: 0;
box-shadow: none;
}
.fp-interaction-modal .modal-card-head {
border-bottom: 1px solid #e6e8ec;
padding: 14px 18px;
}
.fp-interaction-modal .modal-card-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font: 600 1rem/1.3 'Inter', system-ui, sans-serif;
color: #1a1f2c;
}
.fp-interaction-modal .modal-card-body {
/* Phase 8bo — extra bottom padding so content (collaborator
tables, share blocks, etc.) doesn't sit flush against the
modal foot. Applies to every interaction modal automatically. */
padding: 18px 18px 28px 18px;
}
.fp-interaction-modal .modal-card-foot {
border-top: 1px solid #e6e8ec;
padding: 12px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
/* Symmetric foot slots — keep the close/secondary button(s) on the
left and the primary action on the right. Modals without a left
action just leave the left slot empty. */
.fp-interaction-modal__foot-left,
.fp-interaction-modal__foot-right { display: flex; gap: 0.5rem; }
/* Phase 8bl — Universal form layout for content inside any
interaction modal. Dashboard-form fields use a 200px-wide
horizontal label column on the full-page screens, which is too
wide for a narrow modal. Inside a modal, collapse every
`.field.is-horizontal` to stacked-label layout so labels sit
above their inputs at full body width. New popups inherit this
automatically; per-modal blade no longer needs to reshuffle the
form by hand. */
.fp-interaction-modal .modal-card-body .field.is-horizontal {
display: block;
margin-bottom: 1rem;
}
.fp-interaction-modal .modal-card-body .field.is-horizontal:last-child {
margin-bottom: 0;
}
.fp-interaction-modal .modal-card-body .field.is-horizontal > .field-label {
flex: none;
min-width: 0 !important;
text-align: left;
margin: 0 0 0.25rem 0;
padding-top: 0;
}
.fp-interaction-modal .modal-card-body .field.is-horizontal > .field-body {
display: block;
}
.fp-interaction-modal .modal-card-body .field.is-horizontal > .field-body > .field {
max-width: 100% !important;
}
.fp-interaction-modal .modal-card-body .field-label .label {
font-weight: 600;
color: #1a1f2c;
}
/* Compact icon-picker / chip grids stay flex-wrap inside the modal. */
.fp-interaction-modal .modal-card-body .control[style*="flex-wrap"] {
gap: 0.35rem;
}
/* Phase 8bk — list-edit modal is taller than the average interaction
modal (icon picker + collaborators + share URL all stack), so give
it room and let the body scroll when needed. */
.list-edit-modal__card { max-width: 760px; max-height: 88vh; }
.list-edit-modal__card .modal-card-body { overflow-y: auto; }
/* SaveToList modal — Bulma modal-card variant of the layer-4 interaction modal. */
/* SaveToList modal-card — looks like the dashboard form-popups: Bulma
modal-card chrome with .field/.label/.control/.button.is-* inside. The only
bespoke piece is the toggleable list-chips (no native Bulma equivalent). */
.save-list-modal-card {
width: 100%;
max-width: 520px;
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
/* Quieter v4-style head: white background, subtle bottom hairline, Inter type.
Overrides Bulma's grey-ish header + drop-shadow which clashes with v4. */
.save-list-modal-card .modal-card-head {
background: #fff;
border: 0;
border-bottom: 1px solid #e6e8ec;
border-radius: 0;
box-shadow: none;
padding: 14px 18px;
}
.save-list-modal-card .modal-card-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font: 600 1rem/1.3 'Inter', system-ui, sans-serif;
color: #1a1f2c;
}
.save-list-modal-card .modal-card-body {
padding: 18px;
background: #fff;
}
/* Quieter v4-style foot: white background, hairline divider, tighter padding. */
.save-list-modal-card .modal-card-foot.save-list-modal-card__foot {
background: #fff;
border: 0;
border-top: 1px solid #e6e8ec;
border-radius: 0;
box-shadow: none;
padding: 12px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.save-list-modal-card__foot-left,
.save-list-modal-card__foot-right { display: flex; gap: 0.5rem; }
/* Toggle-chips for the list picker (no native Bulma equivalent). */
.save-list-modal__lists {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.save-list-modal__list-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.7rem;
border: 1.5px solid #d8dde6;
border-radius: 999px;
background: #fff;
color: #4a5160;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
line-height: 1;
}
.save-list-modal__list-chip i { font-size: 0.7rem; }
.save-list-modal__list-chip:hover { border-color: #1a1f2c; color: #1a1f2c; }
.save-list-modal__list-chip.is-active {
background: color-mix(in srgb, var(--theme-accent, #3298dc) 14%, white);
color: color-mix(in srgb, var(--theme-accent, #3298dc) 80%, black);
border-color: color-mix(in srgb, var(--theme-accent, #3298dc) 35%, white);
}
/* Page-shortcut buttons section sits visually separated from the form fields. */
.save-list-modal__nav-field {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid #ededed;
}
/* Form-shell with same spacing as dashboard-form, but inline so it works
without the dashboard-form-styles partial being on the page. */
.save-list-modal__form .field { margin-bottom: 1rem; }
.save-list-modal__form .field:last-child { margin-bottom: 0; }
.save-list-modal__subject {
color: #6b7280;
font-size: 0.9rem;
margin: 0 0 1.25rem 0;
}
/* ==========================================================================
PostReplyModal — layer-4 "Reageer op …" modal with media picker.
Reuses the save-list-modal-card chrome (head/body/foot styling) so
visuals stay consistent across all v4 interaction modals.
========================================================================== */
.post-reply-modal__card {
width: 100%;
max-width: 640px;
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.post-reply-modal__card .modal-card-head,
.post-reply-modal__card .modal-card-body,
.post-reply-modal__card .modal-card-foot {
background: #fff;
border: 0;
border-radius: 0;
box-shadow: none;
}
.post-reply-modal__card .modal-card-head {
border-bottom: 1px solid #e6e8ec;
padding: 14px 18px;
}
.post-reply-modal__card .modal-card-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font: 600 1rem/1.3 'Inter', system-ui, sans-serif;
color: #1a1f2c;
}
.post-reply-modal__card .modal-card-body { padding: 18px; }
.post-reply-modal__card .modal-card-foot {
border-top: 1px solid #e6e8ec;
padding: 12px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.post-reply-modal__foot-left,
.post-reply-modal__foot-right { display: flex; gap: 0.5rem; }
/* Original-post context card above the form. */
.post-reply-modal__context {
background: #f7f8fa;
border: 1px solid #e6e8ec;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 14px;
box-shadow: none;
}
.post-reply-modal__context-title {
font-weight: 600;
color: #1a1f2c;
margin: 0 0 4px 0;
}
.post-reply-modal__context-body {
color: #6b7280;
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
/* Phase 8bj — when the context card carries the poster's "aanwijzingen
bij reageren" instructions (xbody3) instead of a generic body
excerpt, give it a soft accent tint + label so the applicant
recognises it as instructions, not just a post recap. */
.post-reply-modal__context--instructions {
background: color-mix(in srgb, var(--theme-accent, #3298dc) 6%, white);
border-color: color-mix(in srgb, var(--theme-accent, #3298dc) 22%, #e6e8ec);
}
.post-reply-modal__context-label {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--theme-accent, #3298dc);
/* Phase 8gx — clear gap above (separates from the title) and tight
below (heading sits right on top of its instructions body). */
margin: 12px 0 2px 0;
}
.post-reply-modal__context--instructions .post-reply-modal__context-body {
color: #1a1f2c;
white-space: pre-line;
}
.post-reply-modal__form .field { margin-bottom: 1rem; }
.post-reply-modal__form .field:last-child { margin-bottom: 0; }
/* ───────────────────────────────────────────────────────────
Phase 8ay — report-post modal shares the post-reply modal's
visual language: same context-card pattern (post title + short
body excerpt on a soft-grey card) and the same field spacing.
The danger-coloured icon + footer button keep the destructive
nature of the action clear without changing the modal frame.
─────────────────────────────────────────────────────────── */
.report-post-modal__context {
background: #f7f8fa;
border: 1px solid #e6e8ec;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 14px;
box-shadow: none;
}
.report-post-modal__context-title {
font-weight: 600;
color: #1a1f2c;
margin: 0 0 4px 0;
}
.report-post-modal__context-body {
color: #6b7280;
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
.report-post-modal__intro {
color: #6b7280;
font-size: 0.9rem;
font-style: italic;
margin: 0 0 14px 0;
}
.report-post-modal__form .field { margin-bottom: 1rem; }
.report-post-modal__form .field:last-child { margin-bottom: 0; }
/* Phase 8bg — bespoke foot override dropped; the universal
`.fp-interaction-modal .modal-card-foot` rule handles layout now
(close on left via __foot-left, submit on right via __foot-right). */
/* Collapsible "Voeg media toe" header. */
.post-reply-modal__media-toggle {
background: transparent;
border: 1px solid #e6e8ec;
border-radius: 6px;
padding: 8px 12px;
width: 100%;
display: inline-flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
color: #1a1f2c;
font: 500 0.95rem/1.2 'Inter', system-ui, sans-serif;
}
.post-reply-modal__media-toggle:hover {
background: #f7f8fa;
}
.post-reply-modal__media-caret {
margin-left: auto;
}
.post-reply-modal__media-panel {
margin-top: 10px;
padding: 12px;
border: 1px solid #e6e8ec;
border-radius: 6px;
background: #fafbfc;
}
/* Photo thumbnail grid — fixed-width cells (96px) so a single photo
doesn't stretch to fill the panel. Justify start so a partial row
aligns left rather than centering. */
.post-reply-modal__grid {
display: grid;
grid-template-columns: repeat(auto-fill, 96px);
justify-content: flex-start;
gap: 8px;
max-height: 260px;
overflow-y: auto;
}
.post-reply-modal__tile {
position: relative;
aspect-ratio: 1 / 1;
background: #e6e8ec;
border: 2px solid transparent;
border-radius: 4px;
padding: 0;
cursor: pointer;
overflow: hidden;
}
.post-reply-modal__tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.post-reply-modal__tile.is-picked {
border-color: #2563eb;
}
.post-reply-modal__tile.is-picked img {
filter: brightness(.85);
}
.post-reply-modal__tile-check {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.25rem;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* Films / sounds / websites — title-card list. */
.post-reply-modal__card-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 260px;
overflow-y: auto;
}
.post-reply-modal__card-list .post-reply-modal__card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid #e6e8ec;
border-radius: 4px;
background: #fff;
text-align: left;
cursor: pointer;
width: 100%;
/* The list is a flex column with a capped max-height; without this the
rows shrink to fit and clip the (now taller) thumbnail. Keep each row
at its natural height and let the list scroll instead. */
flex-shrink: 0;
}
.post-reply-modal__card-list .post-reply-modal__card:hover {
background: #f7f8fa;
}
.post-reply-modal__card-list .post-reply-modal__card.is-picked {
border-color: #2563eb;
background: #eff6ff;
}
.post-reply-modal__card-thumb {
width: 88px;
height: 56px;
background: #e6e8ec;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 88px;
overflow: hidden;
}
.post-reply-modal__card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder icons (video / audio / website) a touch larger. */
.post-reply-modal__card-thumb i {
font-size: 1.6rem;
}
.post-reply-modal__card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
/* Privé badge sits on the right of the card, sized to its content. */
.post-reply-modal__card-private {
flex: 0 0 auto;
margin-left: auto;
}
.post-reply-modal__card-title {
font-weight: 500;
color: #1a1f2c;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-reply-modal__card-meta {
font-size: 0.8rem;
color: #6b7280;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.post-reply-modal__card-check {
color: #2563eb;
}
/* Share-email checkbox + hint. */
.post-reply-modal__share-email { display: inline-flex; gap: 0.4rem; align-items: center; }
/* ==========================================================================
FAQ page (themes/.../cmspages/faq.blade.php)
========================================================================== */
/*
FAQ page now uses pure Bulma layout primitives (.container, .columns,
.card, .title, .content). Only the sticky menu position + chevron-on-
open styling stay in this stylesheet — Bulma doesn't ship those.
Legacy classes (.fp-faq-empty / .fp-faq-layout / etc.) are no longer
emitted by faq.blade.php; their definitions have been removed.
*/
.fp-faq-page { padding-top: 24px; }
@media (max-width: 768px) {
.fp-faq-page { padding-top: 12px; }
}
/* Sticky in-page menu — Bulma doesn't ship a "stick to viewport" helper. */
.fp-faq-menu {
position: sticky;
top: 96px; /* below the sticky topbar + country strip */
align-self: start;
}
.fp-faq-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.fp-faq-menu__list li { margin: 0; }
.fp-faq-menu__list li a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 0;
color: inherit;
text-decoration: none;
border-bottom: 1px solid #f3f4f6;
}
.fp-faq-menu__list li:last-child a { border-bottom: 0; }
.fp-faq-menu__list li a:hover { color: var(--theme-accent, #3298dc); }
/* Scrollspy: link of the section currently in view (set by inline IO
script in faq.blade.php). Visual cue is a colour swap + a thin left
border so the active row reads as "you are here". */
.fp-faq-menu__list li a.is-active {
color: var(--theme-accent, #3298dc);
font-weight: 600;
}
/* Native chevron rotates when the accordion opens. The default
triangle marker is hidden via the inline `list-style:none` on summary. */
.fp-faq-item > summary::-webkit-details-marker { display: none; }
.fp-faq-item .card-header-icon i { transition: transform 0.18s ease; }
.fp-faq-item[open] > summary .card-header-icon i { transform: rotate(180deg); }
/* Mobile: the section title (Bulma .title is-4) shrinks one notch on
narrow screens so it doesn't dominate. */
@media (max-width: 768px) {
.fp-faq-page .title.is-4 { font-size: 1.15rem; }
}
/* Phase 8bz — public Lijsten overview page. Card style for the
curated-list grid, plus a thumb strip that previews 4 member avatars.
Reuses Bulma .box base so the framework gives us shadow + padding
for free; we just add the hover-on cursor + thumb row. */
/* Phase 8dr — list cards pulled closer to .fp-work-card (the prikbord
card) aesthetic: same card chrome (white background, fp-shadow,
fp-radius, generous padding), same typography scale (16px semibold
title, 13.5px line-clamped desc, 11px uppercase footer). The small
profile circles at the bottom are kept as the user explicitly
liked them.
Layout stays vertical (vs fp-work-card's horizontal flex) because
list cards have richer per-card info (description + thumbs grid)
and reading them top-to-bottom feels right. */
.public-list-card {
display: flex;
flex-direction: column;
height: 100%;
gap: 8px;
padding: 22px;
background: var(--fp-card, #fff);
border: 0;
border-radius: var(--fp-radius, 12px);
box-shadow: var(--fp-shadow, 0 1px 3px rgba(0,0,0,.08));
color: inherit;
text-decoration: none;
cursor: pointer;
overflow: hidden;
}
/* No hover shadow shift — hard cut brightness only (repo "no hover
animations" convention). */
.public-list-card:hover {
filter: brightness(.96);
}
.public-list-card__head {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: 2px;
}
.public-list-card__icon {
font-size: 1.25rem;
color: var(--theme-accent, #3298dc);
flex-shrink: 0;
}
.public-list-card__head .title {
font-family: var(--fp-font);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
color: var(--fp-ink);
margin: 0;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.public-list-card__desc {
margin: 0;
font-size: 13.5px;
color: #4b5563;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.public-list-card__meta {
margin: 0;
font-size: 11px;
color: var(--fp-soft);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-top: 4px;
}
.public-list-card__thumbs {
display: flex;
gap: .4rem;
margin-top: auto;
padding-top: 4px;
}
.public-list-card__thumb {
width: 36px;
height: 36px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-color: #eee;
display: inline-block;
flex-shrink: 0;
}
/* Phase 8cb — hoofdvak (main function) picker on the ervaring form.
Two-column wrap on desktop, single column on mobile. The star icon
fills in gold when the checkbox is ticked. The native checkbox is
hidden — clicking the label toggles it. */
.main-tags-picker__grid {
display: grid;
grid-template-columns: 1fr;
gap: .35rem .8rem;
}
@media (min-width: 769px) {
.main-tags-picker__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.main-tags-picker__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.main-tags-picker__item {
display: flex;
align-items: center;
gap: .5rem;
padding: .25rem .35rem;
cursor: pointer;
border-radius: 4px;
}
.main-tags-picker__item:hover {
background: rgba(0,0,0,.04);
}
.main-tags-picker__item input[type="checkbox"] {
/* visually-hide the native checkbox but keep it accessible */
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.main-tags-picker__star {
color: #ccc;
font-size: 1.05rem;
width: 1.2rem;
text-align: center;
}
.main-tags-picker__item input:checked ~ .main-tags-picker__star {
color: #f5b50a;
}
.main-tags-picker__label {
flex: 1;
font-size: .95rem;
}
.main-tags-picker__item input:checked ~ .main-tags-picker__label {
font-weight: 600;
}
/* Phase 8cc — per-tag "Verfijn je ervaring" detail grid. 5 columns:
tag label | main star | depth select | education check | inactive check.
On mobile the rows wrap into 2 lines via min-width + flex. Reuses the
same gold-star paradigm as the original 8cb hoofdvak picker. */
.ervaring-detail-grid {
display: grid;
gap: .15rem 0;
}
.ervaring-detail-row {
display: grid;
grid-template-columns: minmax(140px, 1fr) 70px 130px 90px 90px;
gap: .25rem .5rem;
align-items: center;
padding: .3rem .25rem;
border-bottom: 1px solid rgba(0,0,0,.05);
}
.ervaring-detail-row--head {
border-bottom: 2px solid rgba(0,0,0,.1);
padding-bottom: .4rem;
}
.ervaring-detail-row__label {
font-size: .95rem;
line-height: 1.25;
}
.ervaring-detail-row__star-wrap {
cursor: pointer;
display: inline-block;
}
.ervaring-detail-row__star-wrap input[type="checkbox"] {
/* visually-hide the native checkbox but keep it accessible */
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.ervaring-detail-row__star {
color: #ccc;
font-size: 1.05rem;
}
.ervaring-detail-row__star-wrap input:checked ~ .ervaring-detail-row__star {
color: #f5b50a;
}
/* Mobile: stack each row's controls under the label (label spans full
width, controls become a small flex strip). */
@media (max-width: 640px) {
.ervaring-detail-row {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"label label label label"
"main depth depth edu inactive";
}
.ervaring-detail-row__label { grid-area: label; font-weight: 600; }
.ervaring-detail-row--head { display: none; }
}
/* Phase 8cf — grouped tag list on the ervaring form.
Each department renders as a native / accordion.
The summary shows the dept name + a ticked-count chip; clicking
toggles open. Inside: a 1/2/3-col responsive grid of checkbox
labels (same Bulma-friendly look as other tick lists in the app). */
.ervaring-dept {
border-top: 1px solid rgba(0,0,0,.08);
}
.ervaring-dept:first-of-type {
border-top: 0;
}
.ervaring-dept__head {
display: flex;
align-items: center;
gap: .5rem;
padding: .55rem .25rem;
cursor: pointer;
user-select: none;
list-style: none; /* hide native marker on Safari */
}
.ervaring-dept__head::-webkit-details-marker {
display: none; /* hide native marker on WebKit */
}
.ervaring-dept__label {
flex: 1;
font-weight: 600;
font-size: 1rem;
}
.ervaring-dept__count {
background: var(--theme-accent, #3298dc);
color: #fff;
font-size: .75rem;
font-weight: 600;
padding: .1rem .5rem;
border-radius: 999px;
}
.ervaring-dept__chev {
color: #888;
font-size: .85rem;
}
/* Phase 8ck — chevron rotation now driven by .ervaring-dept--open
(Alpine class), not the dead [open] attribute on . See the
open-state block lower in this file. */
.ervaring-dept__grid {
display: grid;
grid-template-columns: 1fr;
gap: .25rem .8rem;
padding: .25rem .25rem .85rem;
}
/* Phase 8hz — capped at two columns (was three at ≥1024px); the long
company "diensten" labels read better 2-up, consistent with the wizard. */
@media (min-width: 640px) { .ervaring-dept__grid { grid-template-columns: 1fr 1fr; } }
.ervaring-dept__item {
display: flex;
align-items: flex-start;
gap: .5rem;
padding: .2rem .25rem;
cursor: pointer;
font-size: .95rem;
}
.ervaring-dept__item:hover {
background: rgba(0,0,0,.03);
}
.ervaring-dept__item input[type="checkbox"] {
margin-top: .2rem;
flex-shrink: 0;
}
/* Phase 8cf — mobile-first "Verfijn je ervaring" cards.
Replaces the 5-column desktop grid from 8cc. Each tag now renders
as a card with the label on top and a wrap-able row of 4 compact
controls below. On wider screens the controls float to the right
of the label, but on mobile they stack into a 2x2 grid. */
.ervaring-detail-cards {
display: flex;
flex-direction: column;
gap: .35rem;
}
.ervaring-detail-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .75rem;
padding: .5rem .65rem;
border: 1px solid #e6e8ec;
border-radius: 6px;
background: #fff;
}
.ervaring-detail-card__label {
flex: 1 1 200px;
font-weight: 600;
font-size: .95rem;
line-height: 1.3;
}
.ervaring-detail-card__controls {
display: flex;
flex-wrap: wrap;
gap: .35rem .8rem;
align-items: center;
}
.ervaring-detail-card__control {
display: inline-flex;
align-items: center;
gap: .3rem;
cursor: pointer;
font-size: .85rem;
color: #555;
padding: .1rem .25rem;
border-radius: 4px;
white-space: nowrap;
}
.ervaring-detail-card__control:hover {
background: rgba(0,0,0,.04);
}
.ervaring-detail-card__control input[type="checkbox"] {
margin: 0;
}
.ervaring-detail-card__star {
color: #ccc;
font-size: 1rem;
}
.ervaring-detail-card__control input:checked ~ .ervaring-detail-card__star {
color: #f5b50a;
}
.ervaring-detail-card__control--select {
flex-wrap: nowrap;
}
.ervaring-detail-card__control-label {
/* hidden on tightest mobile to keep the row compact — reveal
again when there's room. */
}
@media (max-width: 480px) {
.ervaring-detail-card__label {
flex-basis: 100%;
}
.ervaring-detail-card__controls {
flex-basis: 100%;
}
}
/* Phase 8ci/8ck — accordion polish:
- Count chip lives inside .ervaring-dept__label (next to name) so
it stays attached to the name on wide screens. Spacer pushes the
chevron to the right edge.
- Slide animation now driven by Alpine's x-collapse (real sliding
height) — the dead @keyframes on never actually fired
because the browser opens instantly before CSS animations
can run. Click-driven, no hover animation (repo rule).
- Open-state pronunciation: when a dept is open, its header gets a
tinted background + accent-coloured label and the chevron rotates
180° (hard cut, no transition). Closed depts stay flat. */
.ervaring-dept__label .ervaring-dept__count {
margin-left: .6rem;
}
.ervaring-dept__spacer {
flex: 1;
}
.ervaring-dept--open > .ervaring-dept__head {
background: rgba(50, 152, 220, .08); /* matches --theme-accent tint */
}
.ervaring-dept--open > .ervaring-dept__head .ervaring-dept__label {
color: var(--theme-accent, #3298dc);
}
.ervaring-dept--open > .ervaring-dept__head .ervaring-dept__chev {
transform: rotate(180deg);
color: var(--theme-accent, #3298dc);
}
/* Phase 8cv → 8cx — narrow page chrome moved off this override and
onto Bulma column gutters (see + the wrapped
blades), per user feedback "niet Bulma overriden. graag gebruiken." */
/* Phase 8dj — DEPRECATION NOTE for the legacy margin utilities.
`.has-margin-(top|bottom)-1` resolves to 3rem !important across
every theme CSS (defined in blank.css and copies). The naming is
misleading: lower number = MORE space (-1 is biggest, -3 is
smallest). Reach for Bulma's `mb-N` / `mt-N` scale instead:
Bulma ≈ legacy
mb-2 (0.5rem) (none)
mb-3 (0.75rem) (none)
mb-4 (1rem) (none)
mb-5 (1.5rem) (none)
mb-6 (3rem) has-margin-bottom-1
When you actually want 3rem of separation between major sections,
use `mb-6` / `mt-6` from Bulma. The legacy utilities are kept for
other themes and existing call sites; we just stop reaching for
them in new filmpeoplev4 code. */
/* ==========================================================================
Phase 8eq — Dashboard modal chrome (.dashboard-modal__*).
==========================================================================
These styles used to live in an @once