/* TheFreedomWriters — Premium Dark News Design The Intercept × The Guardian aesthetic Fonts: Playfair Display + DM Sans + Lora Dark mode default, light via data-theme="light" on */ /* ── Design Tokens ───────────────────────────────────────── */ :root { --bg: #0c0c0e; --bg-card: #141417; --bg-card-h: #1c1c20; --border: #252529; --border-h: #3a3a42; --text: #d0d0de; --text-muted: #6e6e82; --text-dim: #3a3a48; --heading: #f0f0f8; --accent: #dc2626; --accent-h: #b91c1c; --accent-glow: rgba(220, 38, 38, 0.15); --danger: #dc2626; --success: #16a34a; --warning: #d97706; --max-w: 1280px; --radius: 6px; --radius-lg: 12px; --trans: 0.2s ease; --trans-slow: 0.5s ease; --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display:'Playfair Display', Georgia, 'Times New Roman', serif; --font-artikel: 'Lora', Georgia, 'Times New Roman', serif; --shadow-sm: 0 1px 4px rgba(0,0,0,0.5); --shadow-md: 0 6px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 48px rgba(0,0,0,0.65); } [data-theme="light"] { --bg: #f7f6f2; --bg-card: #ffffff; --bg-card-h: #f0efe9; --border: #e2e0d8; --border-h: #c8c6bc; --text: #1c1c28; --text-muted: #5a5a70; --text-dim: #9494a8; --heading: #0c0c1a; --accent-glow: rgba(220, 38, 38, 0.08); --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 6px 24px rgba(0,0,0,0.1); --shadow-lg: 0 16px 48px rgba(0,0,0,0.14); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 1rem; font-weight: 400; transition: background var(--trans), color var(--trans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; transition: color var(--trans); } a:hover { color: var(--accent-h); } /* ── Layout ──────────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } .container-sm { max-width: 780px; margin: 0 auto; padding: 0 2rem; } /* ── Reading Progress Bar ────────────────────────────────── */ #reading-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 3px; width: 0%; background: var(--accent); transition: width 0.1s linear; pointer-events: none; } /* ── Header / Nav ────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(12,12,14,0.96); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); transition: background var(--trans); } [data-theme="light"] .site-header { background: rgba(247,246,242,0.96); } /* Logo: dark variant default, light variant only on light theme */ .logo-light { display: none; } .logo-dark { display: block; } [data-theme="light"] .logo-light { display: block; } [data-theme="light"] .logo-dark { display: none; } .logo-light, .logo-dark { height: 75px; width: 300px; object-fit: contain; } .site-header-inner { display: flex; align-items: center; gap: 2rem; height: 64px; } .site-logo { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--heading); text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; line-height: 1.1; padding-top: 15px; } .site-logo span { color: var(--accent); } .site-logo small { display: block; font-family: var(--font); font-size: 0.45rem; font-weight: 600; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; } .site-nav { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; } .site-nav a { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; padding: 0.45rem 0.8rem; border-radius: var(--radius); transition: all var(--trans); letter-spacing: 0.01em; } .site-nav a:hover { color: var(--heading); background: var(--bg-card); } .site-nav a.active { color: var(--heading); background: var(--bg-card); } .site-nav-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.75rem; } .btn-search, .btn-theme { background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; border-radius: var(--radius); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: all var(--trans); } .btn-search:hover, .btn-theme:hover { color: var(--heading); background: var(--bg-card); border-color: var(--border-h); } .btn-search svg, .btn-theme svg { pointer-events: none; } .btn-hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 0.25rem; line-height: 1; } /* ── Hero ────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); min-height: 540px; } .hero-afbeelding { width: 100%; height: 540px; object-fit: cover; opacity: 0.42; transform: scale(1); transition: transform 8s ease; } .hero:hover .hero-afbeelding { transform: scale(1.04); } .hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 5rem 0 2.75rem; background: linear-gradient(to top, var(--bg) 0%, rgba(12,12,14,0.88) 35%, rgba(12,12,14,0.4) 65%, transparent 100%); } [data-theme="light"] .hero-content { background: linear-gradient(to top, var(--bg) 0%, rgba(247,246,242,0.88) 35%, rgba(247,246,242,0.4) 65%, transparent 100%); } .hero-label { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; background: var(--accent); color: #fff; font-family: var(--font); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.3rem 0.75rem; border-radius: 3px; } .hero-titel { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3.5rem); font-weight: 900; color: var(--heading); line-height: 1.1; letter-spacing: -0.02em; max-width: 800px; margin-bottom: 1rem; } .hero-titel a { color: inherit; } .hero-titel a:hover { color: var(--accent); } .hero-meta { display: flex; gap: 1.5rem; font-size: 0.78rem; color: var(--text-muted); font-family: var(--font); align-items: center; } /* ── Section Headers ─────────────────────────────────────── */ .section { padding: 3rem 0; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border); position: relative; } .section-header::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 52px; height: 2px; background: var(--accent); } .section-titel { font-family: var(--font); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; } .section-meer { font-family: var(--font); font-size: 0.78rem; color: var(--accent); font-weight: 500; } .section-meer:hover { color: var(--accent-h); } /* ── Article Grid ────────────────────────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* ── Article Card ────────────────────────────────────────── */ .artikel-kaart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; display: flex; flex-direction: column; position: relative; } .artikel-kaart::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s ease; z-index: 2; pointer-events: none; } .artikel-kaart:hover { border-color: var(--border-h); transform: translateY(-4px); box-shadow: var(--shadow-md); } .artikel-kaart:hover::after { transform: scaleY(1); } .kaart-afb { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--border); position: relative; } .kaart-afb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; } .artikel-kaart:hover .kaart-afb img { transform: scale(1.07); } .kaart-afb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-dim); background: linear-gradient(135deg, var(--bg-card), var(--border)); } .kaart-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; } .kaart-meta { display: flex; gap: 0.55rem; align-items: center; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.6rem; font-family: var(--font); } .kaart-cat { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.62rem; } .kaart-meta-sep { color: var(--text-dim); } .kaart-titel { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--heading); line-height: 1.28; letter-spacing: -0.01em; margin-bottom: 0.6rem; } .kaart-titel a { color: inherit; } .kaart-titel a:hover { color: var(--accent); } .kaart-excerpt { font-family: var(--font); font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.85rem; flex: 1; } .kaart-auteur { font-family: var(--font); font-size: 0.72rem; color: var(--text-dim); margin-top: auto; display: flex; align-items: center; gap: 0.35rem; } .kaart-auteur::before { content: '\2014'; color: var(--accent); font-weight: 900; } .kaart-auteur a { color: var(--text-muted); } .kaart-auteur a:hover { color: var(--accent); } .kaart-groot .kaart-afb { aspect-ratio: 16/7; } .kaart-groot .kaart-titel { font-size: 1.3rem; } /* ── Article Page ────────────────────────────────────────── */ .artikel-pagina { padding-bottom: 5rem; } .artikel-header { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.75rem; } .breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-family: var(--font); font-size: 0.74rem; color: var(--text-muted); margin-bottom: 1.25rem; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb-sep { color: var(--text-dim); } .artikel-categorie { display: inline-block; margin-bottom: 1rem; background: var(--accent); color: #fff; font-family: var(--font); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.28rem 0.75rem; border-radius: 3px; } .artikel-titel-groot { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 900; color: var(--heading); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 1.25rem; } .artikel-submeta { display: flex; gap: 1.5rem; align-items: center; font-family: var(--font); font-size: 0.8rem; color: var(--text-muted); flex-wrap: wrap; } .artikel-submeta-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; overflow: hidden; } .artikel-featured-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); margin-bottom: 2rem; } .artikel-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; } .artikel-content { min-width: 0; } .artikel-sidebar-pub { position: sticky; top: 5.5rem; } /* Article typography */ .artikel-tekst { font-family: var(--font-artikel); font-size: 1.08rem; line-height: 1.85; color: var(--text); } .artikel-tekst h2 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--heading); margin: 2.5rem 0 0.9rem; letter-spacing: -0.015em; line-height: 1.2; } .artikel-tekst h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--heading); margin: 2rem 0 0.6rem; line-height: 1.25; } .artikel-tekst h4 { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--heading); margin: 1.5rem 0 0.4rem; letter-spacing: 0.01em; } .artikel-tekst p { margin-bottom: 1.4rem; } .artikel-tekst br { line-height: inherit; } /* single enter = normale regelafstand via line-height, geen extra wit */ .artikel-tekst p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.75rem; font-weight: 900; line-height: 0.78; float: left; margin: 0.06em 0.1em 0 0; color: var(--accent); } .artikel-tekst ul, .artikel-tekst ol { margin: 0.75rem 0 1.4rem 1.5rem; } .artikel-tekst li { margin-bottom: 0.5rem; } .artikel-tekst blockquote { border-left: 4px solid var(--accent); margin: 2rem 0; padding: 1rem 1.5rem; color: var(--text-muted); background: rgba(220,38,38,0.04); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; font-size: 1.1rem; line-height: 1.7; } .artikel-tekst blockquote p { margin-bottom: 0; } .artikel-tekst blockquote p:first-of-type::first-letter { font-size: 1rem; float: none; margin: 0; color: inherit; } .artikel-tekst a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .artikel-tekst a:hover { color: var(--accent-h); } .artikel-tekst img { border-radius: var(--radius-lg); margin: 2rem 0; } .artikel-tekst strong { font-weight: 700; color: var(--heading); } .artikel-samenvatting { font-family: var(--font-artikel); font-size: 1.15rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 2.5rem; font-style: italic; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } /* Tags */ .artikel-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2.5rem 0; } .artikel-tag { padding: 0.25rem 0.75rem; border-radius: 100px; border: 1px solid var(--border); font-family: var(--font); font-size: 0.74rem; color: var(--text-muted); transition: all var(--trans); } .artikel-tag:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } /* Share */ .deel-sectie { margin: 2rem 0; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .deel-sectie p { font-family: var(--font); font-size: 0.68rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; } .deel-knoppen { display: flex; gap: 0.5rem; flex-wrap: wrap; } .deel-knop { padding: 0.4rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); font-family: var(--font); font-size: 0.8rem; color: var(--text-muted); background: var(--bg); cursor: pointer; transition: all var(--trans); font-weight: 500; } .deel-knop:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } /* Author box */ .auteur-box { margin-top: 2.5rem; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; gap: 1.25rem; border-left: 3px solid var(--accent); } .auteur-box-avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; overflow: hidden; } .auteur-box-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .auteur-box-naam { font-family: var(--font-display); font-weight: 700; color: var(--heading); margin-bottom: 0.3rem; font-size: 1.05rem; } .auteur-box-bio { font-family: var(--font); font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; } /* Sidebar */ .sidebar-widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; } .sidebar-widget-titel { font-family: var(--font); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } .sidebar-artikel-lijst { list-style: none; } .sidebar-artikel-item { padding: 0.7rem 0; border-bottom: 1px solid var(--border); } .sidebar-artikel-item:last-child { border-bottom: none; padding-bottom: 0; } .sidebar-artikel-item a { font-family: var(--font-display); color: var(--text); font-size: 0.88rem; font-weight: 700; line-height: 1.3; } .sidebar-artikel-item a:hover { color: var(--accent); } .sidebar-artikel-meta { font-family: var(--font); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; } /* Related */ .gerelateerd { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .gerelateerd-titel { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--heading); margin-bottom: 1.5rem; } /* ── Homepage Layout ─────────────────────────────────────── */ .home-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; padding: 2.5rem 0 1rem; } .home-main { min-width: 0; } .home-sidebar { position: sticky; top: 5.5rem; } /* 2 featured kaarten naast elkaar */ .home-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 0; } .home-featured-kaart .kaart-afb { aspect-ratio: 3/2; } .home-featured-kaart .kaart-titel { font-size: 1rem; } /* Artikel namen lijst */ .home-artikel-lijst { list-style: none; margin-top: 0; } .home-artikel-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); } .home-artikel-item:first-child { border-top: 1px solid var(--border); } .home-artikel-item-inner { display: flex; align-items: baseline; gap: 0.6rem; flex: 1; min-width: 0; } .home-item-cat { flex-shrink: 0; font-family: var(--font); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); white-space: nowrap; } .home-item-titel { font-family: var(--font); font-size: 0.875rem; font-weight: 500; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-item-titel:hover { color: var(--accent); } .home-item-tijd { flex-shrink: 0; font-family: var(--font); font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; } /* Advertentie blok */ .home-ad-wrap { margin-bottom: 1.5rem; } .home-ad-label { font-family: var(--font); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 0.4rem; } .home-ad-block { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); transition: border-color var(--trans), box-shadow var(--trans); } .home-ad-block:hover { border-color: var(--border-h); box-shadow: var(--shadow-md); } .home-ad-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .home-ad-placeholder { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: var(--bg-card); } .home-ad-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .home-ad-block:hover .home-ad-overlay { opacity: 1; } .home-ad-beschrijving { color: #fff; font-family: var(--font); font-size: 0.875rem; line-height: 1.65; text-align: center; } .home-ad-naam { padding: 0.6rem 0.85rem; font-family: var(--font); font-size: 0.78rem; font-weight: 600; color: var(--text-muted); } /* Meest bekeken lijst */ .home-top-lijst { list-style: none; } .home-top-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; border-bottom: 1px solid var(--border); } .home-top-item:last-child { border-bottom: none; padding-bottom: 0; } .home-top-nr { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; line-height: 1; color: var(--text-dim); flex-shrink: 0; width: 1.6rem; text-align: right; padding-top: 0.05rem; } .home-top-item:first-child .home-top-nr { color: var(--accent); } .home-top-titel { display: block; font-family: var(--font); font-size: 0.83rem; font-weight: 600; color: var(--text); line-height: 1.38; } .home-top-titel:hover { color: var(--accent); } .home-top-meta { font-family: var(--font); font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem; } /* Media home badges */ .media-home-badge { position: absolute; bottom: 0.65rem; right: 0.65rem; padding: 0.12rem 0.5rem; border-radius: 3px; font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; } .media-badge-audio { background: rgba(30,58,95,0.9); color: #7eb8f7; } .media-badge-video { background: rgba(90,30,30,0.9); color: #f78b7e; } /* ── Media Player ────────────────────────────────────────── */ .media-wrapper { margin: 2rem 0; border-radius: var(--radius-lg); overflow: hidden; } .video-aspect-wrap { background:#000; border-radius:var(--radius-lg); overflow:hidden; } .video-aspect-wrap.video-portrait { max-width:380px; margin-left:auto; margin-right:auto; } .youtube-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-lg); } .youtube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* ── Forms ───────────────────────────────────────────────── */ .form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .form-groep { margin-bottom: 1.4rem; } .form-groep label { display: block; font-family: var(--font); font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.45rem; text-transform: uppercase; letter-spacing: 0.07em; } .form-groep input, .form-groep textarea, .form-groep select { width: 100%; padding: 0.7rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font); font-size: 0.9rem; transition: border-color var(--trans), box-shadow var(--trans); } .form-groep input:focus, .form-groep textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-groep textarea { min-height: 150px; resize: vertical; line-height: 1.6; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1.4rem; border-radius: var(--radius); font-family: var(--font); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all var(--trans); text-decoration: none; border: 1px solid transparent; letter-spacing: 0.01em; } .btn-primair { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primair:hover { background: var(--accent-h); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,38,38,0.35); } .btn-omlijnd { background: none; border-color: var(--border); color: var(--text-muted); } .btn-omlijnd:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } /* ── Pagination ──────────────────────────────────────────── */ .paginering { display: flex; gap: 0.35rem; justify-content: center; padding: 2.5rem 0; } .paginering a, .paginering span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem; border: 1px solid var(--border); color: var(--text-muted); transition: all var(--trans); } .paginering a:hover { background: var(--bg-card); color: var(--text); border-color: var(--accent); } .paginering .actief { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Badges ──────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 100px; font-family: var(--font); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .badge-cat { background: rgba(220,38,38,0.1); color: var(--accent); } .badge-tag { background: rgba(110,110,130,0.12); color: var(--text-muted); } /* ── Leestijd ────────────────────────────────────────────── */ .leestijd { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--font); font-size: 0.7rem; color: var(--text-muted); } .leestijd::before { content: "\23F1"; font-size: 0.75em; } /* ── Alert ───────────────────────────────────────────────── */ .alert { padding: 0.9rem 1.2rem; border-radius: var(--radius); font-family: var(--font); font-size: 0.875rem; margin-bottom: 1rem; } .alert-succes { background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.25); color: var(--success); } .alert-fout { background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.25); color: var(--danger); } /* ── Footer ──────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-card); padding: 4rem 0 2rem; margin-top: 5rem; position: relative; } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, transparent 55%); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer-logo { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--heading); letter-spacing: -0.01em; margin-bottom: 0.75rem; } .footer-tagline { font-family: var(--font); font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; } .footer-col-titel { font-family: var(--font); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 1rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { font-family: var(--font); font-size: 0.875rem; color: var(--text-muted); } .footer-links a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-family: var(--font); font-size: 0.74rem; color: var(--text-dim); flex-wrap: wrap; gap: 0.5rem; } .footer-social { display: flex; gap: 0.5rem; margin-top: 1.25rem; flex-wrap: wrap; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); transition: all var(--trans); text-decoration: none; } .footer-social-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); } /* ── Donaties ────────────────────────────────────────────── */ .donatie-kaart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.25rem; } .donatie-kaart-titel { font-family: var(--font); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.85rem; } .donatie-adres { font-family: monospace; font-size: 0.85rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 1rem; word-break: break-all; color: var(--text); cursor: pointer; user-select: all; } /* ── Zoeken ──────────────────────────────────────────────── */ .zoek-bar { display: flex; gap: 0.75rem; margin-bottom: 2rem; } .zoek-bar input { flex: 1; } /* ── Archief filters ─────────────────────────────────────── */ .filter-balk { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; padding: 1rem 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .filter-balk select, .filter-balk input { width: auto; min-width: 140px; padding: 0.5rem 0.85rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font); font-size: 0.85rem; } /* ── 404 ─────────────────────────────────────────────────── */ .fout-pagina { text-align: center; padding: 7rem 1.5rem; } .fout-code { font-family: var(--font-display); font-size: 8rem; font-weight: 900; color: var(--accent); line-height: 1; opacity: 0.2; } .fout-bericht { font-family: var(--font); font-size: 1.25rem; color: var(--text-muted); margin: 0.5rem 0 2rem; } /* ── Media homepage kaarten ──────────────────────────────── */ .media-home-kaart { cursor: pointer; } .media-home-thumb { position: relative; aspect-ratio: 16/9; } .media-home-thumb.has-play img { transition: transform .25s ease; } .media-home-thumb.has-play:hover img { transform: scale(1.03); } /* Forceer exact dezelfde verhouding als op /media en video detail pagina */ .media-home-thumb.video-teaser { aspect-ratio: 16/9; overflow: hidden; position: relative; } /* Als de database aspect_ratio = 9:16 (of andere), forceer die vorm keihard */ .media-home-thumb.video-teaser.has-aspect, .media-home-thumb.video-teaser[style*="aspect-ratio"] { aspect-ratio: var(--video-aspect, 16/9) !important; } .media-home-thumb.video-teaser.is-portrait, .media-home-thumb.video-teaser[style*="9/16"] { aspect-ratio: 9/16 !important; max-height: 480px; } /* Afbeelding of placeholder moet de container vullen (net als op /media) */ .media-home-thumb.video-teaser img, .media-home-thumb.video-teaser .media-home-video-placeholder { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .media-home-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; background: rgba(0,0,0,0.65); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; border: 2px solid rgba(255,255,255,0.85); pointer-events: none; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,0.4); } .media-home-thumb.has-play:hover .media-home-play { background: var(--accent); border-color: #fff; } /* === Media homepage smart grid (16:9 = breed, 9:16 = smal) === */ .media-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: start; } .media-home-grid .media-home-kaart.is-wide { grid-column: span 2; } .media-home-grid .media-home-kaart.is-portrait { grid-column: span 1; } .media-home-video-placeholder { background: #111; display: flex; align-items: center; justify-content: center; } .media-home-badge { /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 1100px) { .home-layout { grid-template-columns: 1fr 300px; gap: 1.75rem; } } @media (max-width: 1024px) { .artikel-layout { grid-template-columns: 1fr; } .artikel-sidebar-pub { display: none; } .home-layout { grid-template-columns: 1fr; } .home-sidebar { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .media-home-grid { grid-template-columns: repeat(2, 1fr); } .media-home-grid .media-home-kaart.is-wide { grid-column: span 2; } .media-home-grid .media-home-kaart.is-portrait { grid-column: span 1; } } @media (max-width: 768px) { .container { padding: 0 1.25rem; } .grid-3 { grid-template-columns: 1fr 1fr; } .hero-afbeelding { height: 320px; } .hero { min-height: 320px; } .btn-hamburger { display: flex; } .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); flex-direction: column; padding: 1rem 1.5rem; gap: 0.25rem; } .site-nav.open { display: flex; } .footer-grid { grid-template-columns: 1fr; } .site-logo small { display: none; } .artikel-tekst p:first-of-type::first-letter { font-size: 2.5rem; } } @media (max-width: 540px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } .media-home-grid { grid-template-columns: 1fr; } .media-home-grid .media-home-kaart.is-wide, .media-home-grid .media-home-kaart.is-portrait { grid-column: span 1; } .home-featured { grid-template-columns: 1fr; } .artikel-titel-groot { font-size: 1.7rem; } .hero-titel { font-size: 1.55rem; } .footer-bottom { flex-direction: column; text-align: center; } } /* ── Print ───────────────────────────────────────────────── */ @media print { .site-header, .site-footer, .artikel-sidebar-pub, .gerelateerd, .deel-sectie, .btn-hamburger, #reading-progress { display: none !important; } body { background: #fff; color: #000; } .artikel-tekst { font-size: 11pt; line-height: 1.7; } a { text-decoration: underline; } } /* ═══════════════════════════════════════════════════════════════════ COOKIE CONSENT BANNER - exactly the CSS you sent from freedom-music.nl (adapted only the color variables to our theme) This makes the banner: - fixed at bottom - starts below viewport (translateY 100%) - JS adds .visible to slide it up immediately into view - STAYS at bottom while scrolling (does not disappear) - only goes away when user accepts - text area centered via max-width + margin auto ═══════════════════════════════════════════════════════════════════ */ /* Exact FM CSS you sent, with !important on positioning to guarantee it works even with cached CSS or containing blocks */ #fm-cookie-banner, #fm-cookie-banner * { background-color: #ffffff !important; } #fm-cookie-banner { display: none; /* standaard verborgen */ } .fm-cb-inner { max-width: 900px; width: 100%; margin: 0 auto; text-align: center; } .fm-cb-actions { justify-content: center; } #fm-cookie-banner.visible { display: block !important; } /* Extra voor nette verticale spacing */ .fm-cb-text { margin-bottom: 20px; text-align: center; } .fm-cb-title { font-weight: 900; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin-bottom: 8px; } .fm-cb-btn { padding: 9px 20px; font-weight: 900; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; border: none; cursor: pointer; clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); transition: background .2s, color .2s; } .fm-cb-btn-primary { background: var(--accent); color: #fff; } .fm-cb-btn-primary:hover { filter: brightness(0.9); } .fm-cb-btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .fm-cb-btn-secondary:hover { color: var(--text); border-color: var(--text-muted); } .fm-cb-btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; font-size: .68rem; } .fm-cb-btn-ghost:hover { color: var(--text); } .fm-cb-link { font-size: .7rem; color: var(--text-muted); } .fm-cb-link a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 600px) { #fm-cookie-banner { padding: 20px 16px; } .fm-cb-actions { flex-direction: column; } .fm-cb-btn { width: 100%; clip-path: none; } }