/* * Mierlo voor Mierlo — Unified Child Theme Style Lock * Canonical final presentation layer for Newsup Pro + MvM public plugins. * This file is deliberately loaded last in so plugin/theme CSS updates * cannot silently recolour core MvM components. */ :root { --mvm-lock-blue: #1966AE; --mvm-lock-blue-hover: #155A94; --mvm-lock-blue-deep: #0F4F88; --mvm-lock-white: #FFFFFF; --mvm-lock-ink: #172333; --mvm-lock-muted: #52697D; --mvm-lock-page: #F1F5F8; --mvm-lock-surface: #FFFFFF; --mvm-lock-border: #C9D7E3; --mvm-lock-dark-page: #0F1720; --mvm-lock-dark-surface: #17222D; --mvm-lock-dark-raised: #202F3C; --mvm-lock-dark-border: #344757; --mvm-lock-dark-text: #F3F7FA; --mvm-lock-dark-muted: #B7C6D3; --mvm-lock-dark-link: #78BAF3; } /* ------------------------------------------------------------------------- * 1. Core MvM brand hierarchy * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) #content, body:not(.mvm-header-dark) .mg-content, body:not(.mvm-header-dark) .mg-card-box { color: var(--mvm-lock-ink); } body:not(.mvm-header-dark) #content h1, body:not(.mvm-header-dark) #content h2, body:not(.mvm-header-dark) #content h3, body:not(.mvm-header-dark) #content h4, body:not(.mvm-header-dark) #content h5, body:not(.mvm-header-dark) #content h6 { color: var(--mvm-lock-blue-deep); } body.mvm-header-dark #content, body.mvm-header-dark .mg-content, body.mvm-header-dark .mg-card-box { color: var(--mvm-lock-dark-text); } body.mvm-header-dark #content h1, body.mvm-header-dark #content h2, body.mvm-header-dark #content h3, body.mvm-header-dark #content h4, body.mvm-header-dark #content h5, body.mvm-header-dark #content h6 { color: var(--mvm-lock-dark-text); } body:not(.mvm-header-dark) #content a:not(.btn):not(.more-link):not(.newsup-categories), body:not(.mvm-header-dark) .mg-content a:not(.btn):not(.more-link):not(.newsup-categories) { color: var(--mvm-lock-blue-hover); } body.mvm-header-dark #content a:not(.btn):not(.more-link):not(.newsup-categories), body.mvm-header-dark .mg-content a:not(.btn):not(.more-link):not(.newsup-categories) { color: var(--mvm-lock-dark-link); } /* ------------------------------------------------------------------------- * 2. Newsup section bars: labels always white on MvM blue * ---------------------------------------------------------------------- */ .mg-sec-title .wtitle, .mg-sec-title .wtitle *, .mg-latest-news .bn_title, .mg-latest-news .bn_title .wtitle, .mg-latest-news .bn_title .wtitle *, .mg-featured-slider .mg-sec-title .wtitle, .missed-inner .mg-sec-title .wtitle, .missed-inner .mg-sec-title .wtitle *, .widget_tag_cloud > h6, #tag_cloud-2 > h6, footer .mg-widget h6 { color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; } .mg-sec-title .wtitle, .mg-latest-news .bn_title, .mg-featured-slider .mg-sec-title .wtitle, .missed-inner .mg-sec-title .wtitle, footer .mg-widget h6 { background-color: var(--mvm-lock-blue) !important; } /* ------------------------------------------------------------------------- * 3. News cards: titles + metadata * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) .mg-sec-top-post .title a, body:not(.mvm-header-dark) .small-post .title a, body:not(.mvm-header-dark) .title_small_post .title a, body:not(.mvm-header-dark) .mg-blog-post-box:not(.single) .title a { color: var(--mvm-lock-blue) !important; -webkit-text-fill-color: var(--mvm-lock-blue) !important; font-weight: 800 !important; } body.mvm-header-dark .mg-sec-top-post .title a, body.mvm-header-dark .small-post .title a, body.mvm-header-dark .title_small_post .title a, body.mvm-header-dark .mg-blog-post-box:not(.single) .title a { color: var(--mvm-lock-dark-link) !important; -webkit-text-fill-color: var(--mvm-lock-dark-link) !important; font-weight: 800 !important; } body:not(.mvm-header-dark) .mg-blog-meta, body:not(.mvm-header-dark) .mg-blog-date, body:not(.mvm-header-dark) .mg-info-author-block, body:not(.mvm-header-dark) .mg-info-author-block .media-body { color: var(--mvm-lock-muted) !important; } body.mvm-header-dark .mg-blog-meta, body.mvm-header-dark .mg-blog-date, body.mvm-header-dark .mg-info-author-block, body.mvm-header-dark .mg-info-author-block .media-body { color: var(--mvm-lock-dark-muted) !important; } /* Anything positioned on a photo/gradient must remain white in BOTH modes. */ .mg-blog-post-3.back-img .mg-blog-inner .title, .mg-blog-post-3.back-img .mg-blog-inner .title a, .mg-blog-post-3.back-img .mg-blog-inner .mg-blog-meta, .mg-blog-post-3.back-img .mg-blog-inner .mg-blog-meta a, .mg-blog-post-3.back-img .mg-blog-inner .mg-blog-meta i, .mg-blog-post-3.back-img .mg-blog-inner .mg-blog-date, .mg-blog-post-3.back-img .mg-blog-inner .mg-blog-date a, .mg-blog-post-3.back-img .mg-blog-inner .comments-link, .mg-blog-post-3.back-img .mg-blog-inner .comments-link a, .mg-blog-post-3.back-img .mg-blog-inner .post-edit-link, .mg-blog-post-3.back-img .mg-blog-inner .post-edit-link i, .mg-blog-post.lg .mg-blog-meta, .mg-blog-post.lg .mg-blog-meta a, .mg-blog-post.lg .mg-blog-meta i, .mg-blog-post.md .mg-blog-meta, .mg-blog-post.md .mg-blog-meta a, .mg-blog-post.md .mg-blog-meta i, .mg-blog-post .bottom .title, .mg-blog-post .bottom .title a, .mg-blog-post .bottom .mg-blog-meta, .mg-blog-post .bottom .mg-blog-meta a, .mg-blog-post .bottom .mg-blog-meta i, .bs-blog-post.three .title, .bs-blog-post.three .title a, .bs-blog-post.three .mg-blog-meta, .bs-blog-post.three .mg-blog-meta a, .bs-blog-post.three .mg-blog-meta i, .mg-post-box .title, .mg-post-box .title a, .mg-post-box .mg-blog-meta, .mg-post-box .mg-blog-meta a, .mg-post-box .mg-blog-meta i { color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; } /* ------------------------------------------------------------------------- * 4. News categories: retain category identity, force readable white labels * ---------------------------------------------------------------------- */ .mg-blog-category a, .mg-blog-category a:visited, .mg-blog-category a:hover, .mg-blog-category a:focus, .bs-blog-category a, .bs-blog-category a:visited, .bs-blog-category a:hover, .bs-blog-category a:focus, a.newsup-categories, a.newsup-categories:visited, a.newsup-categories:hover, a.newsup-categories:focus { color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; font-weight: 800 !important; } /* Category colours: own identity is preserved; only inaccessible shades are darkened. */ .mg-blog-category a[href*="/category/veiligheid/"], .bs-blog-category a[href*="/category/veiligheid/"] { background-color: #CE2746 !important; } .mg-blog-category a[href*="/category/algemeen/"], .bs-blog-category a[href*="/category/algemeen/"] { background-color: #1966AE !important; } .mg-blog-category a[href*="/category/archief/"], .bs-blog-category a[href*="/category/archief/"] { background-color: #6D6D6D !important; } .mg-blog-category a[href*="/category/cultuur/"], .bs-blog-category a[href*="/category/cultuur/"] { background-color: #24756F !important; } .mg-blog-category a[href*="/category/agenda/"], .bs-blog-category a[href*="/category/agenda/"] { background-color: #A85D00 !important; } .mg-blog-category a[href*="/category/politiek/"], .bs-blog-category a[href*="/category/politiek/"] { background-color: #8224E3 !important; } .mg-blog-category a[href*="/category/sport/"], .bs-blog-category a[href*="/category/sport/"] { background-color: #3F7429 !important; } .mg-blog-category a[href*="/category/verenigingen/"], .bs-blog-category a[href*="/category/verenigingen/"] { background-color: #8E0000 !important; } /* ------------------------------------------------------------------------- * 5. Tags: article/sidebar vs footer are deliberately different * ---------------------------------------------------------------------- */ .mg-blog-post-box.single .newsup-tags a[rel="tag"], .mg-sidebar .tagcloud a, .wp-block-tag-cloud a { display: inline-block; background: var(--mvm-lock-blue) !important; border: 1px solid var(--mvm-lock-blue) !important; border-radius: 999px !important; color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; font-weight: 700 !important; text-decoration: none !important; } .mg-blog-post-box.single .newsup-tags a[rel="tag"]:hover, .mg-blog-post-box.single .newsup-tags a[rel="tag"]:focus, .mg-sidebar .tagcloud a:hover, .mg-sidebar .tagcloud a:focus, .wp-block-tag-cloud a:hover, .wp-block-tag-cloud a:focus { background: var(--mvm-lock-blue-deep) !important; border-color: var(--mvm-lock-blue-deep) !important; color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; } /* Footer tags: white pill, Mierlo-blue text. Never allow white-on-white again. */ footer #tag_cloud-2 .tagcloud a, footer .widget_tag_cloud .tagcloud a, footer .mg-widget.widget_tag_cloud .tagcloud a { display: inline-block; background: var(--mvm-lock-white) !important; border: 1px solid var(--mvm-lock-white) !important; border-radius: 12px !important; color: var(--mvm-lock-blue-deep) !important; -webkit-text-fill-color: var(--mvm-lock-blue-deep) !important; font-weight: 800 !important; text-decoration: none !important; } footer #tag_cloud-2 .tagcloud a:hover, footer #tag_cloud-2 .tagcloud a:focus, footer .widget_tag_cloud .tagcloud a:hover, footer .widget_tag_cloud .tagcloud a:focus, footer .mg-widget.widget_tag_cloud .tagcloud a:hover, footer .mg-widget.widget_tag_cloud .tagcloud a:focus { background: var(--mvm-lock-blue-deep) !important; border-color: var(--mvm-lock-white) !important; color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; } /* ------------------------------------------------------------------------- * 6. Footer * ---------------------------------------------------------------------- */ footer .site-title-footer, footer .site-title-footer a, footer .site-description-footer, footer .mg-widget, footer .mg-widget p, footer .mg-widget li, footer .mg-blog-post h3, footer .mg-blog-post h3 a, footer .mg-blog-meta, footer .mg-blog-meta a, footer .mg-blog-meta i, footer .mg-blog-meta span { color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; } /* ------------------------------------------------------------------------- * 7. Primary buttons * ---------------------------------------------------------------------- */ a.more-link, a.more-link:visited, #content .btn-theme, #content a.btn-theme, #content button.btn-theme, .wpcf7 input[type="submit"], .mvm-public-search button, .wpem-main input[type="submit"], #wpforo-wrap input[type="submit"], #wpforo-wrap button[type="submit"], .ps-page .ps-btn--action, .ps-page .ps-btn--primary, .ps-page .ps-btn-primary, .ps-page .ps-button-action { background: var(--mvm-lock-blue) !important; border-color: var(--mvm-lock-blue) !important; color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; font-weight: 700 !important; } a.more-link:hover, a.more-link:focus, #content .btn-theme:hover, #content .btn-theme:focus, .wpcf7 input[type="submit"]:hover, .wpcf7 input[type="submit"]:focus, .mvm-public-search button:hover, .mvm-public-search button:focus, .wpem-main input[type="submit"]:hover, .wpem-main input[type="submit"]:focus, #wpforo-wrap input[type="submit"]:hover, #wpforo-wrap input[type="submit"]:focus, #wpforo-wrap button[type="submit"]:hover, #wpforo-wrap button[type="submit"]:focus, .ps-page .ps-btn--action:hover, .ps-page .ps-btn--primary:hover, .ps-page .ps-btn-primary:hover, .ps-page .ps-button-action:hover { background: var(--mvm-lock-blue-deep) !important; border-color: var(--mvm-lock-blue-deep) !important; color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; } /* ------------------------------------------------------------------------- * 8. Forms * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), body:not(.mvm-header-dark) textarea, body:not(.mvm-header-dark) select { background: var(--mvm-lock-surface) !important; border-color: #AFC2D2 !important; color: var(--mvm-lock-ink) !important; -webkit-text-fill-color: var(--mvm-lock-ink) !important; } body.mvm-header-dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), body.mvm-header-dark textarea, body.mvm-header-dark select { background: var(--mvm-lock-dark-raised) !important; border-color: var(--mvm-lock-dark-border) !important; color: var(--mvm-lock-dark-text) !important; -webkit-text-fill-color: var(--mvm-lock-dark-text) !important; } /* ------------------------------------------------------------------------- * 9. wpForo: MvM surfaces, own forum/icon colour remains untouched * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) #wpforo-wrap, body:not(.mvm-header-dark) #wpforo-wrap .wpforo-main, body:not(.mvm-header-dark) #wpforo-wrap .wpforo-content, body:not(.mvm-header-dark) #wpforo-wrap .wpforo-section, body:not(.mvm-header-dark) #wpforo-wrap .forum-wrap, body:not(.mvm-header-dark) #wpforo-wrap .wpforo-forum { background-color: var(--mvm-lock-surface) !important; border-color: var(--mvm-lock-border) !important; color: var(--mvm-lock-ink) !important; } body.mvm-header-dark #wpforo-wrap, body.mvm-header-dark #wpforo-wrap .wpforo-main, body.mvm-header-dark #wpforo-wrap .wpforo-content, body.mvm-header-dark #wpforo-wrap .wpforo-section, body.mvm-header-dark #wpforo-wrap .forum-wrap, body.mvm-header-dark #wpforo-wrap .wpforo-forum { background-color: var(--mvm-lock-dark-surface) !important; border-color: var(--mvm-lock-dark-border) !important; color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) #wpforo-wrap #wpforo-title, body:not(.mvm-header-dark) #wpforo-wrap .wpforo-forum-title a { color: var(--mvm-lock-blue-deep) !important; -webkit-text-fill-color: var(--mvm-lock-blue-deep) !important; font-weight: 800 !important; } body.mvm-header-dark #wpforo-wrap #wpforo-title, body.mvm-header-dark #wpforo-wrap .wpforo-forum-title a { color: var(--mvm-lock-dark-text) !important; -webkit-text-fill-color: var(--mvm-lock-dark-text) !important; } #wpforo-wrap .wpforo-category .cat-title, #wpforo-wrap .wpforo-category .cat-name, #wpforo-wrap .wpforo-cat-panel .cat-title, #wpforo-wrap .wpforo-cat-panel .cat-name { color: var(--mvm-lock-white) !important; -webkit-text-fill-color: var(--mvm-lock-white) !important; font-weight: 800 !important; } body:not(.mvm-header-dark) #wpforo-wrap .wpforo-forum-description, body:not(.mvm-header-dark) #wpforo-wrap .wpforo-forum-info > div { color: var(--mvm-lock-muted) !important; } body.mvm-header-dark #wpforo-wrap .wpforo-forum-description, body.mvm-header-dark #wpforo-wrap .wpforo-forum-info > div { color: var(--mvm-lock-dark-muted) !important; } /* ------------------------------------------------------------------------- * 10. PeepSo * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) .ps-page .ps-landing__form, body:not(.mvm-header-dark) .ps-page .ps-postbox, body:not(.mvm-header-dark) .ps-page .ps-post, body:not(.mvm-header-dark) .ps-page .ps-comment, body:not(.mvm-header-dark) .ps-page .ps-dialog, body:not(.mvm-header-dark) .ps-page .ps-popover, body:not(.mvm-header-dark) .ps-page .ps-dropdown__menu { background: var(--mvm-lock-surface) !important; border-color: var(--mvm-lock-border) !important; color: var(--mvm-lock-ink) !important; } body.mvm-header-dark .ps-page .ps-landing__form, body.mvm-header-dark .ps-page .ps-postbox, body.mvm-header-dark .ps-page .ps-post, body.mvm-header-dark .ps-page .ps-comment, body.mvm-header-dark .ps-page .ps-dialog, body.mvm-header-dark .ps-page .ps-popover, body.mvm-header-dark .ps-page .ps-dropdown__menu { background: var(--mvm-lock-dark-surface) !important; border-color: var(--mvm-lock-dark-border) !important; color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) .ps-page .ps-form__label, body:not(.mvm-header-dark) .ps-page .ps-page__title, body:not(.mvm-header-dark) .ps-page .ps-page__body-title { color: var(--mvm-lock-blue-deep) !important; } body.mvm-header-dark .ps-page .ps-form__label, body.mvm-header-dark .ps-page .ps-page__title, body.mvm-header-dark .ps-page .ps-page__body-title { color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) .ps-page .ps-form__field-desc, body:not(.mvm-header-dark) .ps-page .lbl-descript, body:not(.mvm-header-dark) .ps-page .ps-text--muted, body:not(.mvm-header-dark) .ps-page .ps-post__meta, body:not(.mvm-header-dark) .ps-page .ps-comment__meta { color: var(--mvm-lock-muted) !important; } body.mvm-header-dark .ps-page .ps-form__field-desc, body.mvm-header-dark .ps-page .lbl-descript, body.mvm-header-dark .ps-page .ps-text--muted, body.mvm-header-dark .ps-page .ps-post__meta, body.mvm-header-dark .ps-page .ps-comment__meta { color: var(--mvm-lock-dark-muted) !important; } /* ------------------------------------------------------------------------- * 11. WP Event Manager * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) .wpem-main, body:not(.mvm-header-dark) .wpem-event-layout-wrapper, body:not(.mvm-header-dark) .wpem-event-listings, body:not(.mvm-header-dark) .wpem-single-event-page, body:not(.mvm-header-dark) .single_event_listing { color: var(--mvm-lock-ink) !important; } body.mvm-header-dark .wpem-main, body.mvm-header-dark .wpem-event-layout-wrapper, body.mvm-header-dark .wpem-event-listings, body.mvm-header-dark .wpem-single-event-page, body.mvm-header-dark .single_event_listing { color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) .wpem-event-layout-wrapper { background: var(--mvm-lock-surface) !important; border-color: var(--mvm-lock-border) !important; } body.mvm-header-dark .wpem-event-layout-wrapper { background: var(--mvm-lock-dark-surface) !important; border-color: var(--mvm-lock-dark-border) !important; } body:not(.mvm-header-dark) .wpem-heading-text, body:not(.mvm-header-dark) .wpem-event-title .wpem-heading-text { color: var(--mvm-lock-blue-deep) !important; -webkit-text-fill-color: var(--mvm-lock-blue-deep) !important; font-weight: 800 !important; } body.mvm-header-dark .wpem-heading-text, body.mvm-header-dark .wpem-event-title .wpem-heading-text { color: var(--mvm-lock-dark-text) !important; -webkit-text-fill-color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) .wpem-event-date-time, body:not(.mvm-header-dark) .wpem-event-location { color: var(--mvm-lock-muted) !important; } body.mvm-header-dark .wpem-event-date-time, body.mvm-header-dark .wpem-event-location { color: var(--mvm-lock-dark-muted) !important; } /* ------------------------------------------------------------------------- * 12. Encyclopedie * ---------------------------------------------------------------------- */ body:not(.mvm-header-dark) .mvm-hero, body:not(.mvm-header-dark) .mvm-entry-grid a, body:not(.mvm-header-dark) .mvm-public-card, body:not(.mvm-header-dark) .mvm-az-letter, body:not(.mvm-header-dark) .mvm-timeline-item, body:not(.mvm-header-dark) .mvm-theme-card, body:not(.mvm-header-dark) .mvm-dossier-card { background: var(--mvm-lock-surface) !important; border-color: var(--mvm-lock-border) !important; color: var(--mvm-lock-ink) !important; } body.mvm-header-dark .mvm-hero, body.mvm-header-dark .mvm-entry-grid a, body.mvm-header-dark .mvm-public-card, body.mvm-header-dark .mvm-az-letter, body.mvm-header-dark .mvm-timeline-item, body.mvm-header-dark .mvm-theme-card, body.mvm-header-dark .mvm-dossier-card { background: var(--mvm-lock-dark-surface) !important; border-color: var(--mvm-lock-dark-border) !important; color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) .mvm-public-card h3, body:not(.mvm-header-dark) .mvm-section-head h2 { color: var(--mvm-lock-blue-deep) !important; } body.mvm-header-dark .mvm-public-card h3, body.mvm-header-dark .mvm-section-head h2 { color: var(--mvm-lock-dark-text) !important; } body:not(.mvm-header-dark) .mvm-card-meta, body:not(.mvm-header-dark) .mvm-section-head > span { color: var(--mvm-lock-muted) !important; } body.mvm-header-dark .mvm-card-meta, body.mvm-header-dark .mvm-section-head > span { color: var(--mvm-lock-dark-muted) !important; } /* ------------------------------------------------------------------------- * 13. Focus visibility / accessibility * ---------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--mvm-lock-blue) !important; outline-offset: 2px; } @media (max-width: 767px) { .mg-blog-post-3.back-img .mg-blog-inner .title a, .mg-sec-top-post .title a, .mg-blog-post .bottom .title a { line-height: 1.32 !important; } .mg-blog-meta, .mg-info-author-block, #wpforo-wrap .wpforo-forum-info > div, .wpem-event-date-time, .wpem-event-location { line-height: 1.45 !important; } }