/* ============================================================ Rankkraft - blog-article.css Verfijning voor blog-artikel pagina's. Activeer per blog door: Veranderlat layout van blog niet, voegt alleen typografie, visuele structuur en lees-comfort toe. ============================================================ */ /* ---- 1. Page-hero richer: subtiele gradient ----------- */ body.blog-article .page-hero{ background: linear-gradient(135deg, var(--dark) 0%, #1e293b 50%, #0f172a 100%); position: relative; padding: 4.5rem 0 4rem; } body.blog-article .page-hero::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(37,99,235,.18) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 100%, rgba(16,185,129,.12) 0%, transparent 60%); pointer-events: none; } body.blog-article .page-hero > .container{ position: relative; z-index: 1; } body.blog-article .page-hero h1{ font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; margin-top: .75rem; } body.blog-article .page-hero > .container > div:first-child{ /* meta-row: terug-link + tag + leestijd */ opacity: .95; } /* ---- 2. Article body typografie ----------------------- */ body.blog-article article{ font-size: 1.075rem; line-height: 1.85; color: var(--dark-2, #1e293b); } body.blog-article article > p{ margin-bottom: 1.35rem; } /* Lead paragraph: eerste alinea krijgt iets groter, donkerder en met linker-accent. Geeft magazine-feel zonder floating drop-cap rommel. */ body.blog-article article > p:first-of-type{ font-size: 1.2rem; line-height: 1.75; color: var(--dark); font-weight: 500; margin-bottom: 2rem; padding-left: 1.25rem; border-left: 3px solid var(--accent); } @media (max-width: 640px){ body.blog-article article > p:first-of-type{ font-size: 1.08rem; padding-left: 1rem; } } /* H2 met accent-balk links + ruimere top-marge */ body.blog-article article h2{ position: relative; padding-left: 1.25rem; margin-top: 3.5rem !important; margin-bottom: 1rem; font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.25; letter-spacing: -.015em; } body.blog-article article h2::before{ content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-dark)); border-radius: 2px; } /* Strong-words pop subtiel */ body.blog-article article strong{ color: var(--dark); font-weight: 700; } /* Lists nicer */ body.blog-article article ul, body.blog-article article ol{ margin: 0 0 1.5rem 1.5rem; line-height: 2; } body.blog-article article ul li, body.blog-article article ol li{ margin-bottom: .25rem; } /* ---- 3. CTA-boxen polish ------------------------------- */ body.blog-article article > div[style*="background:var(--light)"], body.blog-article article > div[style*="background:#f0fdf4"]{ margin: 3rem 0; position: relative; overflow: hidden; border-radius: var(--radius-xl); transition: transform .3s ease, box-shadow .3s ease; } body.blog-article article > div[style*="background:#f0fdf4"]{ box-shadow: 0 4px 20px -8px rgba(16,185,129,.25); } body.blog-article article > div[style*="background:#f0fdf4"]:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(16,185,129,.35); } /* ---- 4. Scroll-progress balk bovenaan ----------------- */ .scroll-progress{ position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 50%, var(--accent) 100%); background-size: 200% 100%; z-index: 1000; transition: width .12s ease-out; animation: progressFlow 4s linear infinite; } @keyframes progressFlow{ to{ background-position: 200% 0; } } /* ---- 5. Article-nav bottom polish --------------------- */ body.blog-article main nav[aria-label="Artikelnavigatie"]{ background: var(--light); padding: 1.25rem 1.5rem !important; border-radius: var(--radius); border-top: none !important; } body.blog-article main nav[aria-label="Artikelnavigatie"] a{ transition: color .2s ease; } body.blog-article main nav[aria-label="Artikelnavigatie"] a:hover{ color: var(--primary) !important; } /* ---- 6. Subtiel "table of contents" via blockquote ---- */ body.blog-article article blockquote{ margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--primary-light); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--dark); } /* ---- 7. Mobile spacing tweaks ------------------------- */ @media (max-width: 640px){ body.blog-article article{ font-size: 1rem; line-height: 1.75; } body.blog-article article h2{ margin-top: 2.5rem !important; padding-left: 1rem; } body.blog-article article h2::before{ width: 3px; } body.blog-article article > div[style*="background"]{ padding: 1.5rem !important; } }