/* ============================================================ CR POST · Shared tokens + reusable components Source of truth: /sketches/huisstijl/README.md + tokens.css Drop-in: link in van elke post-schets ============================================================ */ /* === Fonts === */ @font-face { font-family: 'Museo Sans'; src: url('https://creatieverevolte.nl/fonts/MuseoSans_900.otf') format('opentype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Museo Sans'; src: url('https://creatieverevolte.nl/fonts/MuseoSans_700.otf') format('opentype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Museo Sans'; src: url('https://creatieverevolte.nl/fonts/MuseoSans-300.otf') format('opentype'); font-weight: 300; font-style: normal; } /* === Tokens (identiek aan live portfolio.html) === */ :root { --cr-grijs: #343434; --cr-achtergrond: #e5e5e5; --cr-grijs-2: #6d6f71; --cr-cyaan: #4b9fc3; --cr-magenta: #bf4974; --cr-orange: #f28a2e; --cr-geel: #fbc933; --cr-donker-orange:#f25430; --c-video: #bf4974; --c-animatie: #fbc933; --c-vormgeving: #f28a2e; --c-webdesign: #4b9fc3; --c-3d: #f25430; --frame-w: 1024px; --frame-pad: 32px; --nav-h-desktop: 80px; --nav-h-mobiel: calc(72px + env(safe-area-inset-bottom, 0px)); } /* === Reset === */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Museo Sans', system-ui, -apple-system, sans-serif; background-color: #0a0a0a; color: var(--cr-achtergrond); min-width: 1024px; } body { position: relative; overflow-x: visible; padding-top: 80px; min-height: 100vh; } /* Stof textuur overlay */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-image: url('https://creatieverevolte.nl/sketches/mobile/stof-909090.svg'); background-size: 2400px; background-repeat: repeat; background-attachment: local; opacity: 0.55; z-index: 0; pointer-events: none; } body > * { position: relative; z-index: 1; } /* ============================================================ DESKTOP NAVBAR (drop-in, identiek aan live portfolio.html) ============================================================ */ .cr-navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: var(--cr-achtergrond); border-bottom: 1px solid rgba(52,52,52,0.1); z-index: 40; } .cr-navbar-strip { height: var(--nav-h-desktop); max-width: var(--frame-w); margin: 0 auto; padding: 0 var(--frame-pad); display: flex; align-items: center; gap: 24px; } .cr-navbar-logo-wrap { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cr-grijs); flex-shrink: 0; } .cr-navbar-logo { width: 80px; height: 80px; display: block; overflow: hidden; position: relative; flex-shrink: 0; } .cr-navbar-logo img, .cr-navbar-logo video { width: 100%; height: 100%; object-fit: contain; display: block; } .cr-navbar-wordmark { font-weight: 900; font-size: 16px; color: var(--cr-grijs); letter-spacing: -0.005em; white-space: nowrap; } .cr-navbar-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; } .cr-navbar-link { font-weight: 900; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(52,52,52,0.55); text-decoration: none; padding: 0 16px; height: var(--nav-h-desktop); line-height: var(--nav-h-desktop); position: relative; transition: color 180ms; } .cr-navbar-link:hover { color: var(--cr-grijs); } .cr-navbar-link.active { color: var(--cr-grijs); } .cr-navbar-link.active::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 18px; height: 2px; background: var(--cr-grijs); } .cr-navbar-cart { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--cr-grijs); } .cr-navbar-cart .icon { width: 26px; height: 26px; fill: currentColor; } .cr-navbar-cart .cr-navbar-badge { position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--cr-donker-orange); color: #fff; font-size: 10px; font-weight: 900; border-radius: 40px; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .cr-navbar { display: none; } } /* ============================================================ FOOTER (drop-in, volledig full-width breakout) ============================================================ */ .cr-footer-grid { position: relative; width: 100vw; left: 50%; margin-left: -50vw; background: #000000; color: var(--cr-achtergrond); border-top: 1px solid rgba(229,229,229,0.08); margin-top: 80px; } .cr-footer-inner { max-width: var(--frame-w); margin: 0 auto; padding: 20px var(--frame-pad) 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .cr-footer-brand strong { display: block; font-size: 13px; font-weight: 900; margin-bottom: 6px; } .cr-footer-brand p { font-size: 11px; font-weight: 300; line-height: 1.45; max-width: 360px; color: rgba(229,229,229,0.75); } .cr-footer-connect h4 { font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; color: rgba(229,229,229,0.85); } .cr-footer-connect-line a { color: rgba(229,229,229,0.85); font-size: 11px; font-weight: 300; text-decoration: none; transition: color 200ms; } .cr-footer-connect-line a:hover { color: #fff; } .cr-footer-legal-block { font-size: 9px; font-weight: 300; color: rgba(229,229,229,0.6); line-height: 1.5; margin-top: 6px; } .cr-footer-socials { display: flex; gap: 10px; margin-top: 14px; } .cr-footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; line-height: 0; } .cr-footer-social-icon { display: inline-block; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; aspect-ratio: 1 / 1; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 220ms, transform 220ms; vertical-align: middle; } .cr-footer-social-icon:hover { opacity: 1; transform: translateY(-2px); } .cr-footer-bottom { max-width: var(--frame-w); margin: 0 auto; padding: 10px var(--frame-pad); display: flex; justify-content: space-between; border-top: 1px solid rgba(229,229,229,0.08); font-size: 9px; font-weight: 300; color: rgba(229,229,229,0.55); } @media (max-width: 768px) { .cr-footer-inner { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================ POST · Reusable building blocks (alleen voor de body) ============================================================ */ /* Container binnen 1024px frame */ .cr-post-frame { max-width: var(--frame-w); margin: 0 auto; padding: 0 var(--frame-pad); } /* Back link (klein, naast hero of bovenaan) */ .cr-post-back { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(229,229,229,0.55); text-decoration: none; padding: 8px 0; transition: color 180ms; } .cr-post-back::before { content: '←'; font-size: 14px; transition: transform 180ms; } .cr-post-back:hover { color: #fff; } .cr-post-back:hover::before { transform: translateX(-3px); } /* Categorie badge (filled, vierkant) */ .cr-post-cat { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: #1a1a1a; padding: 6px 10px; border-radius: 0; line-height: 1; } /* Klant / meta strip */ .cr-post-meta { font-size: 11px; font-weight: 300; color: rgba(229,229,229,0.65); letter-spacing: 0.04em; } /* Hoofdtitel */ .cr-post-title { font-size: 56px; font-weight: 900; line-height: 1.05; color: #fff; margin: 0; letter-spacing: -0.01em; } .cr-post-title em { font-style: normal; font-weight: 900; } /* Lead (korte beschrijving) */ .cr-post-lead { font-size: 18px; font-weight: 300; line-height: 1.55; color: rgba(229,229,229,0.85); max-width: 720px; } /* Body content (artikel-tekst uit CMS) */ .cr-post-body { color: rgba(229,229,229,0.85); font-size: 16px; font-weight: 300; line-height: 1.7; } .cr-post-body p { margin-bottom: 18px; } .cr-post-body h1, .cr-post-body h2, .cr-post-body h3, .cr-post-body h4, .cr-post-body h5, .cr-post-body h6 { font-weight: 900; color: #fff; margin-top: 32px; margin-bottom: 14px; line-height: 1.2; } .cr-post-body h1 { font-size: 32px; } .cr-post-body h2 { font-size: 26px; } .cr-post-body h3 { font-size: 22px; } .cr-post-body h4 { font-size: 18px; } .cr-post-body h5 { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; } .cr-post-body h6 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .cr-post-body a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cr-post-body figure { margin: 28px 0; } .cr-post-body figure iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; margin: 0; } .cr-post-body figure img { width: 100%; height: auto; display: block; } .cr-post-body figcaption { font-size: 11px; font-weight: 300; color: rgba(229,229,229,0.55); margin-top: 8px; text-align: center; font-style: italic; } .cr-post-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; margin: 28px 0; } /* Stats row (categorie + klant + datum) */ .cr-post-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 32px 0; border-top: 1px solid rgba(229,229,229,0.12); border-bottom: 1px solid rgba(229,229,229,0.12); } .cr-post-stat-label { font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(229,229,229,0.55); margin-bottom: 10px; } .cr-post-stat-value { font-size: 15px; font-weight: 700; color: #fff; display: inline-block; } /* Variant: categorie als vierkante badge met achtergrondkleur */ .cr-post-stat-value.is-badge { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: #1a1a1a; padding: 6px 10px; line-height: 1; } /* Video embed wrapper (responsive 16:9) */ .cr-post-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 32px 0; } .cr-post-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Afbeelding hero (gewoon img, 100%) */ .cr-post-hero-img { width: 100%; height: auto; display: block; } /* Navigatie vorige/volgende project */ .cr-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 40px 0; border-top: 1px solid rgba(229,229,229,0.12); margin-top: 60px; } .cr-post-nav-link { display: block; padding: 16px 20px; background: rgba(0,0,0,0.5); text-decoration: none; color: #fff; transition: background 220ms; } .cr-post-nav-link:hover { background: rgba(0,0,0,0.75); } .cr-post-nav-link.is-next { text-align: right; } .cr-post-nav-direction { font-size: 10px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(229,229,229,0.55); margin-bottom: 6px; } .cr-post-nav-title { font-size: 16px; font-weight: 700; } /* Loading state */ .cr-post-loading { text-align: center; padding: 80px 0; color: rgba(229,229,229,0.5); font-weight: 300; font-size: 14px; } /* Error state */ .cr-post-error { text-align: center; padding: 80px var(--frame-pad); } .cr-post-error h2 { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 12px; } .cr-post-error p { color: rgba(229,229,229,0.65); margin-bottom: 24px; } .cr-post-error a { display: inline-block; padding: 10px 18px; background: #fff; color: #0a0a0a; font-weight: 900; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } /* ============================================================ MOBILE NAVBAR (bottom tabbar, identiek aan portfolio-mobile) Wordt alleen getoond op @media (max-width: 768px) ============================================================ */ .mobmenu { display: none; } @media (max-width: 768px) { html, body { min-width: 0; } body { padding-top: 0; padding-bottom: var(--nav-h-mobiel); overflow-x: hidden; } .cr-post-frame { padding: 0 16px; } .cr-post-title { font-size: 36px; } .cr-post-lead { font-size: 16px; } .cr-post-body { font-size: 15px; } .cr-post-body h1 { font-size: 24px; } .cr-post-body h2 { font-size: 20px; } .cr-post-stats { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; } .cr-post-stat-label { margin-bottom: 8px; } .cr-post-nav { grid-template-columns: 1fr; } .mobmenu { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0% 0%; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); z-index: 15; padding-bottom: env(safe-area-inset-bottom, 0); } .mobmenu a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--cr-grijs); padding: 8px 4px 6px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; gap: 4px; min-height: 56px; } .mobmenu a.active { color: var(--cr-grijs); border-top: 2px solid var(--cr-donker-orange); margin-top: -1px; } .mobmenu .icon { width: 22px; height: 22px; fill: currentColor; } /* Mobiel: geen footer — de mobiele navbar (.mobmenu) staat onderaan. */ .cr-footer-grid { display: none !important; } } /* ===== CONTENT BLOCKS · LIVE RENDERING ===== */ /* Gallery block */ .cr-gallery-block { max-width: 1024px; margin: 0 auto; padding: 32px var(--frame-pad, 32px) 48px; } .cr-gallery-header { margin-bottom: 24px; max-width: 720px; } .cr-gallery-overline { font-size: 11px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin-bottom: 6px; } .cr-gallery-title { font-size: clamp(22px, 4vw, 32px); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; } .cr-gallery-body { font-size: 14px; font-weight: 300; line-height: 1.6; opacity: 0.7; margin-top: 12px; } .cr-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cr-gallery-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; background: #1a1a1a; } .cr-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); } .cr-gallery-item:hover img { transform: scale(1.04); } .cr-gallery-item-thumb { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #1a1a1a; position: relative; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); } .cr-gallery-item:hover .cr-gallery-item-thumb { transform: scale(1.04); } .cr-gallery-item-num { position: absolute; bottom: 8px; left: 8px; font-size: 9px; font-weight: 900; letter-spacing: 0.15em; color: #fff; background: rgba(0,0,0,0.6); padding: 3px 7px; z-index: 1; } .cr-gallery-item-video-tag { position: absolute; top: 8px; right: 8px; font-size: 8px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--cr-magenta, #bf4974); padding: 3px 6px; z-index: 2; } .cr-gallery-item-meta { padding: 12px 14px; border-top: 3px solid var(--cr-magenta, #bf4974); background: #1a1a1a; } .cr-gallery-item-overline { font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cr-magenta, #bf4974); margin-bottom: 4px; } .cr-gallery-item-title { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 4px; } .cr-gallery-item-body { font-size: 12px; font-weight: 300; line-height: 1.5; opacity: 0.7; } @media (max-width: 768px) { .cr-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .cr-gallery-block { padding: 24px var(--frame-pad, 16px) 40px; } } /* Quote block */ .cr-post-quote { border-left: 3px solid var(--cr-magenta, #bf4974); padding-left: 20px; margin: 28px 0; } .cr-post-quote p { font-size: 20px; font-weight: 300; line-height: 1.5; font-style: italic; } .cr-post-quote footer { margin-top: 10px; font-size: 12px; font-weight: 700; } .cr-post-quote cite { font-style: normal; } .cr-quote-context { opacity: 0.6; } /* Callout block */ .cr-post-callout { padding: 20px 24px; margin: 28px 0; border: 1px solid; } .cr-post-callout--info { border-color: var(--cr-cyaan, #4b9fc3); background: rgba(75,159,195,0.08); } .cr-post-callout--success { border-color: var(--success, #4b9fc3); background: rgba(75,159,195,0.08); } .cr-post-callout--warning { border-color: var(--cr-donker-orange, #f25430); background: rgba(242,84,48,0.08); } .cr-post-callout-title { font-size: 14px; font-weight: 900; margin-bottom: 6px; } .cr-post-callout-body { font-size: 13px; font-weight: 300; line-height: 1.6; } /* Image block */ .cr-post-figure { margin: 28px 0; } .cr-post-figure.is-full-bleed { max-width: 100%; margin: 28px calc(-1 * var(--frame-pad, 32px)); } .cr-post-figure figcaption { font-size: 11px; font-weight: 300; color: rgba(229,229,229,0.55); margin-top: 8px; text-align: center; font-style: italic; } /* ===== AUDIO BLOCK ===== */ .cr-post-audio-block { margin: 32px 0; background: var(--bg-elev, #18181b); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; } .cr-audio-player { padding: 20px 24px 16px; } .cr-audio-waveform { position: relative; cursor: pointer; margin-bottom: 12px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.03); } .cr-audio-canvas { display: block; width: 100%; height: 80px; } .cr-audio-progress-overlay { position: absolute; inset: 0; z-index: 1; } .cr-audio-controls { display: flex; align-items: center; gap: 12px; } .cr-audio-playpause { width: 40px; height: 40px; border-radius: 50%; background: var(--cr-magenta, #bf4974); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: background 200ms; } .cr-audio-playpause:hover { background: #d45f88; } .cr-audio-playpause svg { width: 16px; height: 16px; } .cr-audio-time { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(229,229,229,0.6); flex-shrink: 0; font-family: 'Courier New', monospace; min-width: 36px; } .cr-audio-seek { flex: 1; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; cursor: pointer; position: relative; } .cr-audio-seek-fill { height: 100%; background: var(--cr-magenta, #bf4974); border-radius: 2px; width: 0%; transition: width 100ms linear; } .cr-audio-volume { display: flex; align-items: center; gap: 6px; color: rgba(229,229,229,0.5); } .cr-audio-vol-slider { width: 70px; height: 4px; -webkit-appearance: none; background: rgba(255,255,255,0.12); border-radius: 2px; cursor: pointer; } .cr-audio-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cr-magenta, #bf4974); cursor: pointer; } .cr-audio-title { font-size: 13px; font-weight: 900; color: var(--text, #ededef); margin-top: 12px; } .cr-audio-caption { font-size: 11px; font-weight: 300; color: rgba(229,229,229,0.5); margin-top: 6px; line-height: 1.5; } @media (max-width: 768px) { .cr-audio-vol-slider { width: 50px; } }