/* ========================================================================== Rudy Digital Lab — theme-enhancements.css Geladen ná main.css. Bevat uitbreidingen die main.css niet aanraken. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Dark Mode Toggle Knop -------------------------------------------------------------------------- */ .rdl-darkmode-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: transparent; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; transition: color var(--transition), border-color var(--transition), background var(--transition); } .rdl-darkmode-toggle:hover, .rdl-darkmode-toggle:focus-visible { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-light); outline: none; } .rdl-darkmode-toggle svg { display: block; width: 16px; height: 16px; pointer-events: none; } /* -------------------------------------------------------------------------- 2. Dark Mode — CSS Custom Properties override Alle dark mode stijlen werken via het overschrijven van :root variabelen. De class 'dark-mode' staat op , zodat het anti-FOUC script vroeg kan ingrijpen vóór de gerenderd is. -------------------------------------------------------------------------- */ html.dark-mode { /* Kleuren */ --color-bg: #0f1117; --color-surface: #1a1d27; --color-border: #2a2e42; --color-border-hover: #4f7ef7; --color-text: #e8eaf0; --color-text-muted: #9499b0; --color-text-subtle: #565c7a; --color-accent: #4f7ef7; --color-accent-dark: #3b6ef0; --color-accent-light: #1a2240; /* Schaduwen — subtieler in dark mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); } /* -------------------------------------------------------------------------- 3. Dark Mode — specifieke component overrides Onderdelen die niet volledig via CSS custom properties worden aangestuurd. -------------------------------------------------------------------------- */ /* Code blokken */ html.dark-mode pre, html.dark-mode code { background: #12151f; border-color: var(--color-border); color: #c9d1e8; } /* Inline code */ html.dark-mode :not(pre) > code { background: #1e2235; color: #c9d1e8; } /* Selectie */ html.dark-mode ::selection { background: var(--color-accent); color: #ffffff; } /* Formulier inputs (comments, etc.) */ html.dark-mode input[type="text"], html.dark-mode input[type="email"], html.dark-mode input[type="url"], html.dark-mode input[type="search"], html.dark-mode textarea, html.dark-mode select { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } html.dark-mode input[type="text"]:focus, html.dark-mode input[type="email"]:focus, html.dark-mode input[type="url"]:focus, html.dark-mode input[type="search"]:focus, html.dark-mode textarea:focus { border-color: var(--color-accent); outline: none; } /* Nav overlay — iets donkerder in dark mode */ html.dark-mode .site-nav-overlay { background: rgba(0, 0, 0, 0.60); } /* Mobile nav achtergrond */ @media (max-width: 900px) { html.dark-mode .site-nav.is-open { background: var(--color-surface); border-color: var(--color-border); } } /* Avatar borders */ html.dark-mode .comment-author img, html.dark-mode .author-box__avatar img { border-color: var(--color-border); } /* Experiment card hover in dark mode */ html.dark-mode .card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-md); } /* Tool tags in dark mode */ html.dark-mode .tool-tag { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); } /* Post thumbnail hover */ html.dark-mode .post-card__thumbnail img, html.dark-mode .note-item__thumbnail img, html.dark-mode .related-post__thumbnail img { opacity: 0.85; } html.dark-mode .post-card__thumbnail:hover img, html.dark-mode .note-item__thumbnail:hover img, html.dark-mode .related-post__thumbnail:hover img { opacity: 1.0; } /* Blockquote */ html.dark-mode blockquote { border-left-color: var(--color-accent); background: var(--color-surface); } /* Nested comment border */ html.dark-mode .comment-list .children { border-left-color: var(--color-border); } /* -------------------------------------------------------------------------- 4. Dark Mode — Toggle icon wisseling Sun-icoon tonen in dark mode (klik → naar light) Moon-icoon tonen in light mode (klik → naar dark) JS beheert het hidden-attribuut; dit is de CSS-fallback. -------------------------------------------------------------------------- */ /* Standaard: maan zichtbaar, zon verborgen */ .rdl-dm-icon--sun { display: none; } .rdl-dm-icon--moon { display: block; } /* Dark mode: zon zichtbaar, maan verborgen */ html.dark-mode .rdl-dm-icon--sun { display: block; } html.dark-mode .rdl-dm-icon--moon { display: none; } /* Als JS hidden-attribuut zet, laat dat voorgaan */ .rdl-dm-icon--sun[hidden], .rdl-dm-icon--moon[hidden] { display: none !important; } /* -------------------------------------------------------------------------- 5. Dark Mode — Kleur-transitie Smooth overgang bij wisselen, maar niet bij initial page load (dan is de klasse al gezet door anti-FOUC script). -------------------------------------------------------------------------- */ html.dark-mode-ready, html.dark-mode-ready * { transition: background-color 200ms ease, border-color 200ms ease, color 150ms ease !important; } /* -------------------------------------------------------------------------- 6. Dark Mode — Forum (Rudy Forum Lite) overrides De forumplugin gebruikt eigen hardcoded kleuren die niet reageren op de CSS custom properties van het thema. Deze sectie overschrijft ze gericht zodat het forum leesbaar blijft in dark mode. Scope: html.dark-mode body.rfl-forum-page -------------------------------------------------------------------------- */ /* Pagina-achtergrond — de lichtblauwe achtergrond van het forum */ html.dark-mode body.rfl-forum-page { background-color: var(--color-bg) !important; } /* Algemene containers en wrappers */ html.dark-mode body.rfl-forum-page .rfl-wrap, html.dark-mode body.rfl-forum-page .rfl-container, html.dark-mode body.rfl-forum-page [class*="rfl-"] { background-color: transparent; color: var(--color-text); } /* Forum cards / thread-blokken (witte achtergrond met schaduw) */ html.dark-mode body.rfl-forum-page .rfl-topic, html.dark-mode body.rfl-forum-page .rfl-post, html.dark-mode body.rfl-forum-page .rfl-reply, html.dark-mode body.rfl-forum-page .rfl-card, html.dark-mode body.rfl-forum-page .rfl-box, html.dark-mode body.rfl-forum-page .rfl-panel, html.dark-mode body.rfl-forum-page .rfl-thread, html.dark-mode body.rfl-forum-page .rfl-message { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Post-inhoud — de tekst die bijna onleesbaar was */ html.dark-mode body.rfl-forum-page .rfl-post-content, html.dark-mode body.rfl-forum-page .rfl-reply-content, html.dark-mode body.rfl-forum-page .rfl-message-body, html.dark-mode body.rfl-forum-page .rfl-topic-content, html.dark-mode body.rfl-forum-page [class*="rfl-content"], html.dark-mode body.rfl-forum-page [class*="rfl-body"] { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* Header-rij boven een post (datum, #nummer) */ html.dark-mode body.rfl-forum-page [class*="rfl-post-header"], html.dark-mode body.rfl-forum-page [class*="rfl-reply-header"], html.dark-mode body.rfl-forum-page [class*="rfl-meta"] { background-color: var(--color-bg) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } /* Avatar-kolom / user-sidebar */ html.dark-mode body.rfl-forum-page [class*="rfl-author"], html.dark-mode body.rfl-forum-page [class*="rfl-user"], html.dark-mode body.rfl-forum-page .rfl-avatar-col { background-color: var(--color-surface) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } /* "Nog geen replies" sectie */ html.dark-mode body.rfl-forum-page [class*="rfl-empty"], html.dark-mode body.rfl-forum-page [class*="rfl-no-reply"] { background-color: var(--color-surface) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important; } /* Reactie-formulier — textarea en omgeving */ html.dark-mode body.rfl-forum-page [class*="rfl-form"], html.dark-mode body.rfl-forum-page .rfl-reply-form, html.dark-mode body.rfl-forum-page .rfl-respond { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html.dark-mode body.rfl-forum-page textarea, html.dark-mode body.rfl-forum-page input[type="text"], html.dark-mode body.rfl-forum-page input[type="email"] { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode body.rfl-forum-page textarea::placeholder, html.dark-mode body.rfl-forum-page input::placeholder { color: var(--color-text-subtle) !important; } /* Moderatie-balk */ html.dark-mode body.rfl-forum-page [class*="rfl-mod"], html.dark-mode body.rfl-forum-page [class*="rfl-admin"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Links */ html.dark-mode body.rfl-forum-page a { color: var(--color-accent); } html.dark-mode body.rfl-forum-page a:hover { color: var(--color-accent-dark); } /* Breadcrumbs */ html.dark-mode body.rfl-forum-page [class*="rfl-breadcrumb"], html.dark-mode body.rfl-forum-page .breadcrumb { color: var(--color-text-muted) !important; } /* Category-badge / label */ html.dark-mode body.rfl-forum-page [class*="rfl-category"], html.dark-mode body.rfl-forum-page [class*="rfl-badge"], html.dark-mode body.rfl-forum-page [class*="rfl-tag"] { background-color: var(--color-accent-light) !important; color: var(--color-accent) !important; border-color: transparent !important; } /* -------------------------------------------------------------------------- 7. Lab Status Widget -------------------------------------------------------------------------- */ .lab-status { font-family: var(--font-mono); } .lab-status__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 2px; margin-bottom: var(--space-4); } /* Status-kleuren */ .lab-status__badge--development { background: #fef3c7; color: #92400e; } .lab-status__badge--active { background: #d1fae5; color: #065f46; } .lab-status__badge--paused { background: #f3f4f6; color: #374151; } .lab-status__badge--completed { background: #ede9fe; color: #5b21b6; } .lab-status__badge--planned { background: var(--color-accent-light); color: var(--color-accent); } /* Pulserende statusdot */ .lab-status__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .lab-status__badge--development .lab-status__dot, .lab-status__badge--active .lab-status__dot { animation: rdl-pulse 2s ease-in-out infinite; } @keyframes rdl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .lab-status__project { font-size: 1rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; margin-bottom: var(--space-1); } .lab-status__link { color: var(--color-text); text-decoration: none; } .lab-status__link:hover { color: var(--color-accent); } .lab-status__version { font-size: 0.75rem; color: var(--color-text-subtle); letter-spacing: 0.04em; margin-bottom: var(--space-3); } .lab-status__desc { font-family: var(--font-ui); font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.5; margin-top: var(--space-2); } /* Dark mode aanpassingen voor Lab Status badges */ html.dark-mode .lab-status__badge--development { background: #422006; color: #fcd34d; } html.dark-mode .lab-status__badge--active { background: #022c22; color: #6ee7b7; } html.dark-mode .lab-status__badge--paused { background: #1f2937; color: #9ca3af; } html.dark-mode .lab-status__badge--completed { background: #2e1065; color: #c4b5fd; } /* -------------------------------------------------------------------------- 8. Post Card — Fallback Thumbnail & Categorie -------------------------------------------------------------------------- */ .post-card__thumbnail--fallback { display: flex; align-items: center; justify-content: center; background: var(--color-accent-light); border: 1px solid var(--color-border); border-radius: var(--radius); height: 200px; overflow: hidden; margin-bottom: var(--space-4); } .post-card__fallback-icon { color: var(--color-accent); opacity: 0.5; } .post-card__thumbnail--fallback:hover .post-card__fallback-icon { opacity: 0.8; } .post-card__category { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .post-card__category a { color: var(--color-accent); text-decoration: none; } .post-card__category a:hover { text-decoration: underline; } .post-card__meta-sep { color: var(--color-text-subtle); } /* -------------------------------------------------------------------------- 9. Experiment Cards — CPT-specifieke stijlen -------------------------------------------------------------------------- */ .card__title-link { color: var(--color-text); text-decoration: none; } .card__title-link:hover { color: var(--color-accent); } .card__thumbnail { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: var(--space-4); } .card__thumbnail img { width: 100%; height: 180px; object-fit: cover; display: block; transition: opacity var(--transition); } .card__thumbnail:hover img { opacity: 0.88; } .card__read-more { display: inline-block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); text-decoration: none; letter-spacing: 0.04em; } .card__read-more:hover { text-decoration: underline; } /* Link naar het experiments-archief */ .experiments-archive-link { margin-top: var(--space-8); font-family: var(--font-mono); font-size: 0.875rem; } .experiments-archive-link a { color: var(--color-accent); text-decoration: none; } .experiments-archive-link a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 10. Dark Mode — WP MicroStream overrides -------------------------------------------------------------------------- */ /* Kaarten / feed-items */ html.dark-mode .wp-microstream, html.dark-mode [class*="microstream"], html.dark-mode [class*="ms-"], html.dark-mode [id*="microstream"] { background-color: var(--color-bg) !important; color: var(--color-text) !important; } /* Individuele stream-items (witte kaarten) */ html.dark-mode [class*="ms-post"], html.dark-mode [class*="ms-item"], html.dark-mode [class*="ms-card"], html.dark-mode [class*="ms-entry"], html.dark-mode [class*="ms-feed"], html.dark-mode [class*="microstream-post"], html.dark-mode [class*="microstream-item"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Compose-formulier */ html.dark-mode [class*="ms-form"], html.dark-mode [class*="ms-compose"], html.dark-mode [class*="microstream-form"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } html.dark-mode [class*="ms-form"] textarea, html.dark-mode [class*="ms-compose"] textarea, html.dark-mode [class*="ms-form"] input[type="text"], html.dark-mode [class*="microstream-form"] textarea { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode [class*="ms-form"] textarea::placeholder, html.dark-mode [class*="ms-compose"] textarea::placeholder { color: var(--color-text-subtle) !important; } /* Toolbar onder het tekstveld (emoji, afbeelding, link) */ html.dark-mode [class*="ms-toolbar"], html.dark-mode [class*="ms-actions"], html.dark-mode [class*="ms-footer"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Knoppen */ html.dark-mode [class*="ms-btn"], html.dark-mode [class*="ms-button"], html.dark-mode [class*="ms-submit"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Meta: auteur, datum, bewerk/verwijder links */ html.dark-mode [class*="ms-meta"], html.dark-mode [class*="ms-date"], html.dark-mode [class*="ms-author"] { color: var(--color-text-subtle) !important; } /* Link previews (de URL-kaart met favicon) */ html.dark-mode [class*="ms-link-preview"], html.dark-mode [class*="ms-preview"], html.dark-mode [class*="ms-embed"] { background-color: var(--color-bg) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Reactie-tellers / likes */ html.dark-mode [class*="ms-reactions"], html.dark-mode [class*="ms-likes"], html.dark-mode [class*="ms-reaction"] { background-color: transparent !important; color: var(--color-text-muted) !important; } /* Vernieuwen-knop */ html.dark-mode [class*="ms-refresh"], html.dark-mode [class*="ms-load"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* Algemene links */ html.dark-mode [class*="ms-"] a, html.dark-mode [class*="microstream-"] a { color: var(--color-accent) !important; } /* -------------------------------------------------------------------------- 11. Dark Mode — Contactformulier overrides Vangt Contact Form 7, WPForms, Fluent Forms en vergelijkbare plugins. -------------------------------------------------------------------------- */ /* Formulier-wrapper */ html.dark-mode .wpcf7, html.dark-mode .wpforms-container, html.dark-mode .fluentform, html.dark-mode [class*="contact-form"], html.dark-mode [class*="wpcf7"], html.dark-mode [class*="wpforms"] { background-color: transparent !important; color: var(--color-text) !important; } /* Labels */ html.dark-mode .wpcf7 label, html.dark-mode .wpforms-container label, html.dark-mode [class*="contact-form"] label, html.dark-mode [class*="wpcf7"] label, html.dark-mode [class*="wpforms"] label { color: var(--color-text) !important; } /* Inputvelden en textarea */ html.dark-mode .wpcf7 input[type="text"], html.dark-mode .wpcf7 input[type="email"], html.dark-mode .wpcf7 input[type="tel"], html.dark-mode .wpcf7 input[type="number"], html.dark-mode .wpcf7 textarea, html.dark-mode .wpcf7 select, html.dark-mode [class*="wpforms"] input, html.dark-mode [class*="wpforms"] textarea, html.dark-mode [class*="wpforms"] select, html.dark-mode [class*="contact-form"] input, html.dark-mode [class*="contact-form"] textarea { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode .wpcf7 input::placeholder, html.dark-mode .wpcf7 textarea::placeholder, html.dark-mode [class*="wpforms"] input::placeholder, html.dark-mode [class*="wpforms"] textarea::placeholder { color: var(--color-text-subtle) !important; } /* Submit-knop */ html.dark-mode .wpcf7 input[type="submit"], html.dark-mode [class*="wpforms"] button[type="submit"], html.dark-mode [class*="contact-form"] input[type="submit"], html.dark-mode [class*="contact-form"] button[type="submit"] { background-color: var(--color-accent) !important; color: #ffffff !important; border-color: var(--color-accent) !important; } /* -------------------------------------------------------------------------- 12. Dark Mode — Forum login, registratie en profielpagina -------------------------------------------------------------------------- */ /* Witte kaart-wrapper (login, registratie, profiel) */ html.dark-mode body.rfl-forum-page [class*="rfl-login"], html.dark-mode body.rfl-forum-page [class*="rfl-register"], html.dark-mode body.rfl-forum-page [class*="rfl-profile"], html.dark-mode body.rfl-forum-page [class*="rfl-account"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Titels binnen die kaarten */ html.dark-mode body.rfl-forum-page [class*="rfl-login"] h1, html.dark-mode body.rfl-forum-page [class*="rfl-login"] h2, html.dark-mode body.rfl-forum-page [class*="rfl-login"] h3, html.dark-mode body.rfl-forum-page [class*="rfl-register"] h1, html.dark-mode body.rfl-forum-page [class*="rfl-register"] h2, html.dark-mode body.rfl-forum-page [class*="rfl-register"] h3, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] h1, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] h2, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] h3 { color: var(--color-text) !important; } /* Inputvelden in login/registratie */ html.dark-mode body.rfl-forum-page [class*="rfl-login"] input, html.dark-mode body.rfl-forum-page [class*="rfl-register"] input, html.dark-mode body.rfl-forum-page [class*="rfl-profile"] input, html.dark-mode body.rfl-forum-page [class*="rfl-login"] textarea, html.dark-mode body.rfl-forum-page [class*="rfl-register"] textarea { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Profielkaarten (avatar, stats, topics) */ html.dark-mode body.rfl-forum-page [class*="rfl-profile-card"], html.dark-mode body.rfl-forum-page [class*="rfl-stats"], html.dark-mode body.rfl-forum-page [class*="rfl-topics-list"], html.dark-mode body.rfl-forum-page [class*="rfl-activity"] { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html.dark-mode body.rfl-forum-page [class*="rfl-stats"] span, html.dark-mode body.rfl-forum-page [class*="rfl-stats"] p { color: var(--color-text-muted) !important; } /* -------------------------------------------------------------------------- 13. Dark Mode — Vangnet voor hardcoded witte plugin-kaarten Pakt witte achtergronden op die niet via custom properties worden gestuurd. Scope beperkt tot bekende plugin-wrappers zodat thema-elementen niet worden geraakt. -------------------------------------------------------------------------- */ html.dark-mode .page-content [style*="background:#fff"], html.dark-mode .page-content [style*="background: #fff"], html.dark-mode .page-content [style*="background:#ffffff"], html.dark-mode .page-content [style*="background: #ffffff"], html.dark-mode .page-content [style*="background-color:#fff"], html.dark-mode .page-content [style*="background-color: #fff"], html.dark-mode .page-content [style*="background-color:#ffffff"], html.dark-mode .page-content [style*="background-color: #ffffff"], html.dark-mode .post-content [style*="background:#fff"], html.dark-mode .post-content [style*="background-color:#ffffff"] { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* -------------------------------------------------------------------------- 14. Dark Mode — RFL auth en profiel (exacte class-namen) -------------------------------------------------------------------------- */ /* Login en registratie wrapper */ html.dark-mode .rfl-auth-wrapper, html.dark-mode .rfl-login-wrapper, html.dark-mode .rfl-register-wrapper { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* Titels en labels binnen de auth-wrappers */ html.dark-mode .rfl-auth-wrapper h1, html.dark-mode .rfl-auth-wrapper h2, html.dark-mode .rfl-auth-wrapper h3, html.dark-mode .rfl-auth-wrapper label, html.dark-mode .rfl-auth-wrapper p { color: var(--color-text) !important; } /* Inputvelden */ html.dark-mode .rfl-auth-wrapper input[type="text"], html.dark-mode .rfl-auth-wrapper input[type="email"], html.dark-mode .rfl-auth-wrapper input[type="password"] { background-color: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html.dark-mode .rfl-auth-wrapper input::placeholder { color: var(--color-text-subtle) !important; } /* Submit-knop */ html.dark-mode .rfl-auth-wrapper input[type="submit"], html.dark-mode .rfl-auth-wrapper button[type="submit"], html.dark-mode .rfl-auth-wrapper .rfl-btn { background-color: var(--color-accent) !important; color: #ffffff !important; border-color: var(--color-accent) !important; } /* Hulpteksten en links (wachtwoord vergeten, registreer je hier) */ html.dark-mode .rfl-auth-wrapper small, html.dark-mode .rfl-auth-wrapper .rfl-auth-links, html.dark-mode .rfl-auth-wrapper a { color: var(--color-accent) !important; } /* Checkbox (onthoud mij) */ html.dark-mode .rfl-auth-wrapper input[type="checkbox"] { accent-color: var(--color-accent); } /* Profiel stats blok (witte achtergrond) */ html.dark-mode .rfl-profile-stats, html.dark-mode .rfl-stat-block { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } html.dark-mode .rfl-stat-block strong, html.dark-mode .rfl-stat-block span { color: var(--color-text) !important; } /* Scheidingslijn tussen stat-blokken */ html.dark-mode .rfl-stat-block + .rfl-stat-block { border-left-color: var(--color-border) !important; } /* -------------------------------------------------------------------------- 15. Forum — rfl-post-content altijd surface-kleur De Customizer past --color-bg aan, maar forum post-content hoort altijd de card-kleur (--color-surface) te gebruiken, niet de pagina-achtergrond. -------------------------------------------------------------------------- */ body.rfl-forum-page .rfl-post-content, body.rfl-forum-page [class*="rfl-post-content"], body.rfl-forum-page [class*="rfl-reply-content"], body.rfl-forum-page [class*="rfl-message-body"] { background-color: var(--color-surface) !important; } /* ========================================================================== IMPROVEMENTS v1.5.0 Batch A — Bugfixes | B — Header | C — Homepage | D — Footer | E — Polish ========================================================================== */ /* -------------------------------------------------------------------------- BATCH A — Kritieke bugfixes -------------------------------------------------------------------------- */ /* A1. Ontbrekende CSS variabele */ :root { --space-10: 2.5rem; } /* A2. .card__read-more — ontbrak volledig */ .card__read-more { display: inline-block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-accent); text-decoration: none; letter-spacing: 0.02em; transition: opacity 150ms ease; } .card__read-more:hover { opacity: 0.75; text-decoration: none; } /* A3. .experiments-archive-link — ontbrak */ .experiments-archive-link { margin-top: var(--space-8); text-align: center; } .experiments-archive-link a { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-accent); text-decoration: none; letter-spacing: 0.02em; } .experiments-archive-link a:hover { text-decoration: underline; } /* A4. Hero gradient dark mode fix — hardcoded rgba overschrijven */ html.dark-mode .hero--service { background: radial-gradient(circle at top right, rgba(79, 126, 247, 0.13), transparent 32rem), linear-gradient(180deg, var(--color-surface), var(--color-bg)); } /* A5. lab-card--primary dark mode fix */ html.dark-mode .lab-card--primary { background: var(--color-accent); border-color: var(--color-accent); } html.dark-mode .lab-card--primary h3, html.dark-mode .lab-card--primary p, html.dark-mode .lab-card--primary .card__read-more { color: #ffffff; } /* -------------------------------------------------------------------------- BATCH B — Header: CTA + layout + nav contrast -------------------------------------------------------------------------- */ /* B1. Header inner: gap-based layout (override space-between) */ .site-header__inner { justify-content: flex-start; gap: var(--space-6); } /* B2. End-groep: CTA + toggle + hamburger gegroepeerd rechts */ .site-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } /* B3. Header CTA-knop */ .header-cta { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; padding: 0.5rem 1rem; background: var(--color-accent); color: #ffffff !important; border: 1px solid var(--color-accent); border-radius: var(--radius); text-decoration: none; white-space: nowrap; transition: background 150ms ease, border-color 150ms ease; line-height: 1; display: inline-flex; align-items: center; } .header-cta:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); text-decoration: none; color: #ffffff !important; } /* B4. Nav links: iets meer contrast (muted → bijna-text) */ .site-nav a { color: var(--color-text-muted); } .site-nav > ul > li > a { color: var(--color-text); opacity: 0.75; font-size: 0.875rem; letter-spacing: 0; transition: opacity 150ms ease, color 150ms ease; } .site-nav > ul > li > a:hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a { opacity: 1; color: var(--color-accent); } /* B5. Header CTA verbergen op mobiel (<900px) — hero heeft al de CTA */ @media (max-width: 900px) { .header-cta { display: none; } } /* -------------------------------------------------------------------------- BATCH C — Homepage verbeteringen -------------------------------------------------------------------------- */ /* C1. Service card: CTA-link onderin */ .service-card__link { display: inline-block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-accent); text-decoration: none; letter-spacing: 0.02em; } .service-card__link:hover { text-decoration: underline; } /* C2. Closing CTA section */ .section--closing-cta { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: none; padding: var(--space-20) 0; } .closing-cta { max-width: 600px; margin: 0 auto; text-align: center; padding: 0 var(--space-6); } .closing-cta__title { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: -0.025em; color: var(--color-text); margin-bottom: var(--space-4); line-height: 1.2; } .closing-cta__desc { font-size: 1rem; color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-8); } .closing-cta__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* C3. Philosophy — rustiger en compacter */ #philosophy .section__header { margin-bottom: var(--space-6); } .philosophy__block p { line-height: 1.9; color: var(--color-text-muted); } /* -------------------------------------------------------------------------- BATCH D — Footer: quicklinks + social -------------------------------------------------------------------------- */ /* D1. Footer nav */ .footer-nav { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-10) 0; } .footer-nav__inner { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; } /* D2. Footer brand/tagline */ .footer-brand { display: flex; flex-direction: column; gap: var(--space-2); max-width: 220px; } .footer-brand__name { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; color: var(--color-text); text-decoration: none; } .footer-brand__name:hover { color: var(--color-accent); text-decoration: none; } .footer-brand__tagline { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; } /* D3. Footer links kolom */ .footer-links { display: flex; gap: var(--space-12); flex-wrap: wrap; } .footer-links__group { display: flex; flex-direction: column; gap: var(--space-3); } .footer-links__heading { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-1); } .footer-links__group a { font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none; transition: color 150ms ease; } .footer-links__group a:hover { color: var(--color-accent); text-decoration: none; } /* D4. Social links */ .footer-social { display: flex; flex-direction: column; gap: var(--space-3); } .footer-social__links { display: flex; gap: var(--space-3); } .footer-social__link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; transition: border-color 150ms ease, color 150ms ease, background 150ms ease; } .footer-social__link:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-light); text-decoration: none; } .footer-social__link svg { width: 16px; height: 16px; display: block; pointer-events: none; } /* D5. Footer nav responsive */ @media (max-width: 640px) { .footer-nav__inner { flex-direction: column; gap: var(--space-8); } .footer-links { gap: var(--space-8); } } /* -------------------------------------------------------------------------- BATCH E — Typography & spacing polish -------------------------------------------------------------------------- */ /* E1. Section titles: meer impact */ .section__title { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.2; } /* E2. Section label: iets meer ruimte eronder */ .section__label { margin-bottom: var(--space-3); } /* E3. Section header meer lucht */ .section__header { margin-bottom: var(--space-10); } /* E4. Secties: lichtere rhythme-variatie Elke 2e sectie iets minder padding zodat het niet robotisch aanvoelt */ .section--compact { padding: var(--space-16) 0; } /* E5. Hero sub spacing fix (space-10 was undefined — nu hersteld) */ .hero__sub { margin-bottom: var(--space-6); } /* E6. Hero actions meer lucht */ .hero__actions { margin-top: var(--space-6); gap: var(--space-4); } /* E7. Buttons: iets meer padding voor betere klikbaarheid */ .btn { padding: 0.6875rem 1.375rem; font-size: 0.9rem; border-radius: 6px; } .btn--primary { letter-spacing: 0.01em; } /* E8. Service/lab cards: subtiele hover-transitie */ .service-card, .lab-card { transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .service-card:hover, .lab-card:hover { transform: translateY(-2px); } /* E9. Note items leesbaarder */ .note-item__title { font-size: 1.1875rem; letter-spacing: -0.015em; } /* E10. Experiment cards leesbaarder */ .card__title { font-size: 1.0625rem; letter-spacing: -0.015em; } /* -------------------------------------------------------------------------- v1.5.1 — Diensten page + Fullwidth template -------------------------------------------------------------------------- */ /* Wrapper padding voor beide templates */ .diensten-page, .fullwidth-page { padding: var(--space-16) 0 var(--space-24); } /* Diensten: wat ruimere max-width voor de content-kolom */ .diensten-post-content { max-width: 820px; } /* Verberg overmatige lege spacer-blokken die de editor soms toevoegt */ .diensten-post-content .wp-block-spacer { height: var(--space-8) !important; min-height: 0 !important; } /* Sterkere typografie voor de diensten-hero kopregels */ .diensten-post-content h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-4); } /* Diensten H2 secties iets meer lucht */ .diensten-post-content h2 { margin-top: var(--space-16); margin-bottom: var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--color-border); font-size: 1.375rem; } /* Eerste H2 op de diensten pagina geen border-top */ .diensten-post-content h2:first-of-type { border-top: none; padding-top: 0; } /* H3 diensten */ .diensten-post-content h3 { font-size: 1.125rem; font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); } /* Prijslabel styling (Vanaf €XX) */ .diensten-post-content p strong:only-child, .diensten-post-content > p > strong { /* intentionally left to default */ } /* ========================================================================== Community Page — v1.5.2 ========================================================================== */ /* -------------------------------------------------------------------------- Community: gedeelde layout -------------------------------------------------------------------------- */ .community-page { padding: var(--space-16) 0 var(--space-24); } .community-page .container { max-width: 860px; } /* -------------------------------------------------------------------------- Community: uitgelogd — welkom / registreer -------------------------------------------------------------------------- */ .community-guest { display: flex; flex-direction: column; gap: var(--space-12); } .community-guest__intro { text-align: center; padding: var(--space-16) 0 var(--space-8); } .community-guest__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-3); } .community-guest__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--color-text); margin-bottom: var(--space-4); } .community-guest__sub { font-size: 1.0625rem; color: var(--color-text-muted); line-height: 1.65; max-width: 520px; margin: 0 auto; } /* Auth kaarten */ .community-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .community-auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); } .community-auth-card--primary { border-color: var(--color-accent); background: var(--color-accent-light); } .community-auth-card__kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .community-auth-card__title { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin-bottom: var(--space-1); } .community-auth-card__desc { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.6; flex: 1; } /* Preview van wat je krijgt als lid */ .community-preview { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-8); } .community-preview__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin-bottom: var(--space-4); } .community-preview__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-8); } .community-preview__list li { position: relative; padding-left: 1.4rem; font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.55; } .community-preview__list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; } @media (max-width: 600px) { .community-auth-grid { grid-template-columns: 1fr; } .community-preview__list { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Community: ingelogd — member dashboard -------------------------------------------------------------------------- */ .community-member { display: flex; flex-direction: column; gap: var(--space-12); } /* Profielkaart bovenaan */ .community-profile-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-8); display: flex; align-items: center; gap: var(--space-6); } .community-profile-card__avatar { flex-shrink: 0; } .community-profile-card__avatar img { width: 80px; height: 80px; border-radius: 50%; display: block; border: 2px solid var(--color-border); } .community-profile-card__info { flex: 1; min-width: 0; } .community-profile-card__welcome { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-1); display: block; } .community-profile-card__name { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: var(--space-1); } .community-profile-card__username { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: var(--space-4); } .community-profile-card__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* Quick-links grid */ .community-links-section__title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-4); } .community-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .community-link-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: var(--space-6); text-decoration: none; display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .community-link-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .community-link-card__icon { font-size: 1.5rem; line-height: 1; margin-bottom: var(--space-1); } .community-link-card__label { font-size: 1rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; } .community-link-card__desc { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; } /* Donatie sectie */ .community-support { background: linear-gradient(135deg, var(--color-accent-light), var(--color-surface)); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; } .community-support__text { flex: 1; min-width: 200px; } .community-support__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); } .community-support__desc { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.6; } .community-support__actions { display: flex; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; } /* Uitloggen link onderaan */ .community-logout { text-align: center; padding-top: var(--space-4); } .community-logout a { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-subtle); text-decoration: none; letter-spacing: 0.02em; } .community-logout a:hover { color: var(--color-text-muted); text-decoration: underline; } @media (max-width: 640px) { .community-profile-card { flex-direction: column; text-align: center; align-items: center; } .community-profile-card__actions { justify-content: center; } .community-links-grid { grid-template-columns: 1fr 1fr; } .community-support { flex-direction: column; text-align: center; } .community-support__actions { justify-content: center; } } @media (max-width: 420px) { .community-links-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- v1.5.3 — Community: drie donatie-platform knoppen -------------------------------------------------------------------------- */ .community-support__actions--platforms { flex-direction: column; gap: var(--space-2); min-width: 160px; } .community-donate-btn { display: flex; align-items: center; gap: var(--space-3); padding: 0.6rem 1.1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; white-space: nowrap; } .community-donate-btn:hover { border-color: var(--color-accent); background: var(--color-accent-light); transform: translateX(3px); text-decoration: none; } .community-donate-btn__icon { font-size: 1rem; line-height: 1; flex-shrink: 0; } .community-donate-btn__label { font-size: 0.9rem; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; } @media (max-width: 640px) { .community-support__actions--platforms { flex-direction: row; flex-wrap: wrap; justify-content: center; } .community-donate-btn:hover { transform: translateY(-2px); } }