/* ══════════════════════════════════════════════════════════════════════
BOBBY'S BACKLOT — GEDEELDE KOP EN TERUGKNOP
══════════════════════════════════════════════════════════════════════
Eén bestand voor twee dingen die op élke pagina hetzelfde horen te zijn:
de terugknop linksboven en de titel bovenaan.
Waarom een apart bestand: elke pagina had zijn eigen versie, dus een
kleine wijziging betekende dertien keer hetzelfde doen. Nu staat het
op één plek.
Gebruik in de :
Terugknop (linksboven, klein pijltje):
Titel (gecentreerd, hoofdletters, zwart met goud slotwoord):
INDUSTRY EVENTS
optionele ondertitel
De kleuren pakken we uit de pagina zelf. Elke pagina noemt zijn
variabelen net iets anders (--accent, --gold, --ac), vandaar de rij
terugvallen: de eerste die bestaat wint. Zo werkt dit bestand overal,
inclusief dark mode, zonder dat er per pagina iets aangepast hoeft.
══════════════════════════════════════════════════════════════════════ */
:root {
--bl-goud: var(--accent, var(--gold, var(--ac, #c4a35a)));
--bl-tekst: var(--text, var(--txt, #1a1a1a));
--bl-zacht: var(--text-muted, var(--muted, var(--txt2, #8a8a8a)));
--bl-rand: var(--border, rgba(0, 0, 0, .14));
}
/* ── TERUGKNOP ────────────────────────────────────────────────────────
Klein, rustig vierkantje met een pijltje. Geen woord "BACKLOT" meer:
het icoon is duidelijk genoeg en leidt niet af van de titel. */
a.backlot-terug {
width: 30px;
height: 30px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--bl-rand);
border-radius: 8px;
background: none;
color: var(--bl-zacht);
text-decoration: none;
font-size: 0; /* verbergt eventueel oude tekst binnenin */
line-height: 1;
cursor: pointer;
transition: color .15s ease, border-color .15s ease, background .15s ease;
-webkit-tap-highlight-color: transparent;
}
a.backlot-terug::before {
content: '\2039'; /* ‹ */
font-size: 18px;
font-weight: 400;
line-height: 1;
margin-top: -2px; /* optisch midden; het teken hangt hoog */
}
a.backlot-terug:hover {
color: var(--bl-goud);
border-color: var(--bl-goud);
}
a.backlot-terug:focus-visible {
outline: 2px solid var(--bl-goud);
outline-offset: 2px;
}
/* ── PAGINATITEL ──────────────────────────────────────────────────────
Gecentreerd, hoofdletters, Playfair. Het laatste woord staat in goud;
dat geeft elke pagina hetzelfde ritme als Slate Management. */
.backlot-kop {
text-align: center;
padding: 0 46px; /* houdt de titel vrij van de terugknop */
min-width: 0;
/* Staat de kop in een flex-balk (dat is bijna overal zo), dan neemt hij
de ruimte tussen de terugknop en de knoppen rechts en komt hij dus
vanzelf in het midden. Buiten een flex-balk doet dit niets. */
flex: 1 1 auto;
}
.backlot-kop h1,
h1.backlot-kop {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(19px, 2.6vw, 27px);
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--bl-tekst);
line-height: 1.15;
margin: 0;
}
.backlot-kop h1 span,
h1.backlot-kop span {
color: var(--bl-goud);
}
/* Ondertitel — alleen waar hij echt iets toevoegt (Box Office). */
.backlot-kop p {
margin: 6px 0 0;
font-size: 12px;
font-weight: 500;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--bl-zacht);
}
/* ── BALK WAARIN ZE SAMEN STAAN ───────────────────────────────────────
De terugknop links, de titel exact in het midden. Het lege blokje
rechts is even breed als de knop, anders staat de titel een halve
knopbreedte uit het midden. */
.backlot-balk {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.backlot-balk > .backlot-kop {
flex: 1;
padding: 0;
}
.backlot-balk::after {
content: '';
width: 30px;
flex-shrink: 0;
}
@media (max-width: 700px) {
.backlot-kop { padding: 0 12px; }
.backlot-kop p { font-size: 10.5px; letter-spacing: 1px; }
}