/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Description: Default GeneratePress child theme Author: Tom Usborne Author URI: https://tomusborne.com Template: generatepress Version: 0.1 */ /* STANDARD STYLESHEET */ /* Here you find general settings that should are not website specific (and can be used on other websites as well) */ /* * CONTENTS * * 1. DEFAULTS * 1.1 TYPOGRAPHY * 1.2 OTHER * 2. HEADER and NAV * 3. HOME PAGE * 4. CONTENT * 5. COMPONENTS * 6. WIDGETS * 7. OTHER * 8. ANIMATIONS * * */ .developing { display: none; /*turn this line off when developing */ } body.logged-in .developing { /* only logged-in users see elements with the developing class */ display: block; } :root { /* =================== */ /* == 1 Light mode == */ /* =================== */ /* 1.1 background */ --light-bg: var(--neutral-50); --light-home-pilar-bg: var(--brand-primary-l-4); --light-home-pilar-bg-image: transparent; --light-blog-card-bg: var(--neutral-0); --light-blog-card-bg-image: transparent; --light-blog-card-title-bg: var(--neutral-0); --light-blog-card-title-bg-image: transparent; --light-article-group-bg: var(--neutral-0); --light-article-group-bg-image: transparent; --light-article-group-description-bg: var(--brand-primary-l-4); --light-article-group-description-bg-image: transparent; --light-takeaways-bg: var(--brand-primary-l-4); --light-previous-next-bg: var(--brand-primary-l-2); --light-other-topics-bg: var(--brand-primary-l-4); --light-footer-bg: var(--brand-primary-d-4); --light-pilar-intro-2cols-bg: var(--brand-primary-l-4); --light-pilar-intro-2cols-bg-image: transparent; --light-nieuwsbrief-overlay-bg: var(--neutral-0); --light-nieuwsbrief-overlay-bg-image: transparent; --light-navigation-bg: hsl(0 0% 98%); /* var(--neutral-800);*/ --light-navigation-bg-image: linear-gradient(var(--dim-04dp), var(--dim-04dp)); /* background-image */ /* transparent;*/ --light-mobile-navigation-bg: var(--neutral-800); --light-blockquote-bg: hsl(from var(--brand-primary-l-4) h s l / 50%); --light-blockquote-bg-image: transparent; /* 1.1.1 Elevation levels */ /* lightest level (with higher numer) is ALWAYS on top "closer" to the user. 00dp equals background */ --light-00dp-fallback: hsl(0, 0%, 0%); /* fallback for older browsers */ --light-00dp: hsl(from hsl(0 0% 100%) h s l / 0%); --light-01dp-fallback: hsl(0, 0%, 26%); /* fallback for older browsers */ --light-01dp: hsl(from hsl(0 0% 100%) h s l / 26%); --light-02dp-fallback: hsl(0, 0%, 37%); /* fallback for older browsers */ --light-02dp: hsl(from hsl(0 0% 100%) h s l / 37%); --light-03dp-fallback: hsl(0, 0%, 42%); /* fallback for older browsers */ --light-03dp: hsl(from hsl(0 0% 100%) h s l / 42%); --light-04dp-fallback: hsl(0, 0%, 47%); /* fallback for older browsers */ --light-04dp: hsl(from hsl(0 0% 100%) h s l / 47%); --light-06dp-fallback: hsl(0, 0%, 58%); /* fallback for older browsers */ --light-06dp: hsl(from hsl(0 0% 100%) h s l / 58%); --light-08dp-fallback: hsl(0, 0%, 63%); /* fallback for older browsers */ --light-08dp: hsl(from hsl(0 0% 100%) h s l / 63%); --light-12dp-fallback: hsl(0, 0%, 74%); /* fallback for older browsers */ --light-12dp: hsl(from hsl(0 0% 100%) h s l / 74%); --light-16dp-fallback: hsl(0, 0%, 79%); /* fallback for older browsers */ --light-16dp: hsl(from hsl(0 0% 100%) h s l / 79%); --light-24dp-fallback: hsl(0, 0%, 100%); /* fallback for older browsers */ --light-24dp: hsl(from hsl(0 0% 100%) h s l / 85%); /* 1.1.2 Button bg */ --light-primary-button-bg-color: var(--brand-primary); --light-primary-button-bg-hover-color: var(--brand-primary-alt); --light-terms-button-bg-color: var(--brand-primary-l-1); --light-terms-button-bg-hover-color: var(--brand-primary); --light-blog-card-button-bg-color: var(--neutral-900); /* 1.1.3 Form bg */ --light-form-bg-color: linear-gradient(var(--neutral-100), var(--neutral-100)); /* background-image */ --light-form-bg-focus-color: linear-gradient(var(--08dp), var(--08dp)); /* background-image */ --light-form-bg-color-attention: linear-gradient(var(--neutral-50), var(--neutral-50)); /* background-image */ /* 1.2 text*/ --light-heading: hsl(0 0% 5%); --light-text: hsl(0 0% 13%); --light-text-muted: hsl(0 0% 40%); --light-text-disabled: hsl(0 0% 62%); --light-link-color: var(--link); --light-link-hover-color: var(--link-d-1); --light-footer-text: hsl(0 0% 87%); --light-text-on-button-primary: var(--neutral-0); --light-text-on-button-primary-hover: var(--neutral-0); --light-blog-card-title-text-color: var(--neutral-900); --light-text-on-article-group: var(--light-text); --light-text-on-article-group-accent: var(--brand-primary); --light-text-on-nieuwsbrief-overlay: var(--neutral-700); --light-text-on-nieuwsbrief-overlay-gdpr: var(--neutral-900); --light-text-on-menu-color: hsl(0 0% 15%); --light-text-on-mobile-menu-color: var(--neutral-100); --light-text-on-toc: var(--brand-primary); --light-text-on-toc-hover: var(--brand-primary-alt); /* 1.3 UI elements */ --light-border-color: var(--neutral-150); --light-navigation-border-color: var(--neutral-100); /* line under navigation bar */ --light-navigation-border-top-color: hsl(from var(--navigation-border-color) h s calc(l - 5)); /* line that connects menu (on top) with the navigation bar */ --light-navigation-menu-border-color: var(--neutral-900); /* border of navigation menu's */ --light-home-pilar-border-color: var(--light-border-color); --light-takeaways-border-color: var(--light-border-color); --light-takeaways-left-listitem-border-color: var(--brand-primary-l-3); --light-search-form-border-color: var(--brand-primary-l-2); --light-pilar-intro-2cols-border-color: var(--brand-primary-l-3); /* 1.4 imagery */ --light-logo-color-on-bg: var(--neutral-1000); --light-logo-color-on-menu: var(--neutral-0); --light-image-filter: brightness(1) contrast(1); /* ================= */ /* == 2 Dim mode == */ /* ================= */ /* 2.1 background */ --dim-bg: #181863; --dim-home-pilar-bg: var(--dim-bg); --dim-home-pilar-bg-image: linear-gradient(var(--dim-06dp), var(--dim-06dp)); /* background-image */ --dim-blog-card-bg: var(--dim-bg); --dim-blog-card-bg-image: linear-gradient(var(--dim-06dp), var(--dim-06dp)); /* background-image */ --dim-blog-card-title-bg: var(--dim-bg); --dim-blog-card-title-bg-image: linear-gradient(var(--dim-12dp), var(--dim-12dp)); /* background-image */ --dim-article-group-bg: var(--dim-bg); --dim-article-group-bg-image: linear-gradient(var(--dim-08dp), var(--dim-03dp)); /* background-image */ --dim-article-group-description-bg: var(--dim-bg); --dim-article-group-description-bg-image: linear-gradient(var(--dim-03dp), var(--dim-01dp)); /* background-image */ --dim-takeaways-bg: var(--dim-06dp); --dim-previous-next-bg: var(--dim-01dp); --dim-other-topics-bg: var(--dim-01dp); --dim-footer-bg: hsl(from var(--neutral-900) h s l / 50%); --dim-pilar-intro-2cols-bg: var(--dim-bg); --dim-pilar-intro-2cols-bg-image: linear-gradient(var(--dim-03dp), var(--dim-01dp)); /* background-image */ --dim-nieuwsbrief-overlay-bg: var(--dim-bg); --dim-nieuwsbrief-overlay-bg-image: linear-gradient(var(--dim-08dp), var(--dim-03dp)); /* background-image */ --dim-navigation-bg: var(--dim-bg); --dim-navigation-bg-image: linear-gradient(var(--dim-24dp), var(--dim-24dp)); /* background-image */ --dim-mobile-navigation-bg: var(--neutral-800); --dim-blockquote-bg: var(--dim-bg); --dim-blockquote-bg-image: linear-gradient(var(--dim-01dp), var(--dim-01dp)); /* background-image */ /* 2.1.1 Elevation levels */ /* lightest level (with higher numer) is ALWAYS on top "closer" to the user. 00dp equals background */ --dim-00dp: hsl(from hsl(0 0% 100%) h s l / 0%); --dim-01dp: hsl(from hsl(0 0% 100%) h s l / 5%); --dim-02dp: hsl(from hsl(0 0% 100%) h s l / 7%); --dim-03dp: hsl(from hsl(0 0% 100%) h s l / 8%); --dim-04dp: hsl(from hsl(0 0% 100%) h s l / 9%); --dim-06dp: hsl(from hsl(0 0% 100%) h s l / 11%); --dim-08dp: hsl(from hsl(0 0% 100%) h s l / 12%); --dim-12dp: hsl(from hsl(0 0% 100%) h s l / 14%); --dim-16dp: hsl(from hsl(0 0% 100%) h s l / 15%); --dim-24dp: hsl(from hsl(0 0% 100%) h s l / 16%); /* 2.1.2 Button bg */ --dim-primary-button-bg-color: var(--brand-primary); --dim-primary-button-bg-hover-color: var(--brand-primary-alt); --dim-terms-button-bg-color: var(--dim-08dp); --dim-terms-button-bg-hover-color: var(--dim-24dp); --dim-blog-card-button-bg-color: var(--dim-24dp); /* 2.1.3 Form bg */ --dim-form-bg-color: linear-gradient(var(--dim-08dp), var(--dim-08dp)); /* background-image */ --dim-form-bg-focus-color: linear-gradient(var(--dim-16dp), var(--dim-16dp)); /* background-image */ --dim-form-bg-color-attention: linear-gradient(var(--dim-24dp), var(--dim-24dp)); /* background-image */ /* 2.2 text*/ --dim-heading: hsl(0 0% 90%); --dim-text: hsl(0 0% 85%); --dim-text-muted: hsl(0 0% 60%); --dim-text-disabled: hsl(0 0% 38%); --dim-link-color: var(--link-l-2); --dim-link-hover-color: var(--link-l-3); --dim-footer-text: hsl(0 0% 87%); --dim-text-on-button-primary: var(--text-color); --dim-text-on-button-primary-hover: var(--heading-color); --dim-blog-card-title-text-color: var(--neutral-100); --dim-text-on-article-group: var(--neutral-300); --dim-text-on-article-group-accent: var(--text-color); --dim-text-on-nieuwsbrief-overlay: var(--neutral-300); --dim-text-on-nieuwsbrief-overlay-gdpr: var(--neutral-300); --dim-text-on-menu-color: hsl(0 0% 85%); --dim-text-on-mobile-menu-color: var(--neutral-100); --dim-text-on-toc: var(--text-color); --dim-text-on-toc-hover: var(--heading-color); /* 2.3 UI elements */ --dim-border-color: var(--dim-08dp); /* var(--neutral-800) */ --dim-navigation-border-color: var(--neutral-900); --dim-navigation-border-top-color: hsl(from var(--navigation-border-color) h s calc(l + 15)); --dim-navigation-menu-border-color: var(--neutral-900); --dim-home-pilar-border-color: var(--dim-border-color); --dim-takeaways-border-color: var(--dim-01dp); --dim-takeaways-left-listitem-border-color: var(--dim-12dp); --dim-search-form-border-color: transparent; --dim-pilar-intro-2cols-border-color: var(--dim-01dp); /* 2.4 imagery */ --dim-logo-color-on-bg: var(--neutral-0); --dim-logo-color-on-menu: var(--neutral-0); --dim-image-filter: brightness(.92) contrast(1.15); /* ================== */ /* == 3 Dark mode == */ /* ================== */ /* 3.1 background */ --dark-bg: #282828; /* #121212 is Recommened background-color for dark mode */ /* An alternative with a little primary color mixed in: #0e0201 */ --dark-home-pilar-bg: var(--dark-bg); --dark-home-pilar-bg-image: linear-gradient(var(--dark-06dp), var(--dark-06dp)); /* background-image */ --dark-blog-card-bg: var(--dark-bg); --dark-blog-card-bg-image: linear-gradient(var(--dark-06dp), var(--dark-06dp)); /* background-image */ --dark-blog-card-title-bg: var(--dark-bg); --dark-blog-card-title-bg-image: linear-gradient(var(--dark-12dp), var(--dark-12dp)); /* background-image */ --dark-article-group-bg: var(--dark-bg); --dark-article-group-bg-image: linear-gradient(var(--dark-08dp), var(--dark-03dp)); /* background-image */ --dark-article-group-description-bg: var(--dark-bg); --dark-article-group-description-bg-image: linear-gradient(var(--dark-03dp), var(--dark-01dp)); /* background-image */ --dark-takeaways-bg: var(--dark-06dp); --dark-previous-next-bg: var(--dark-01dp); --dark-other-topics-bg: var(--dark-01dp); --dark-footer-bg: var(--neutral-900); --dark-pilar-intro-2cols-bg: var(--dark-bg); --dark-pilar-intro-2cols-bg-image: linear-gradient(var(--dark-03dp), var(--dark-01dp)); /* background-image */ --dark-nieuwsbrief-overlay-bg: var(--dark-bg); --dark-nieuwsbrief-overlay-bg-image: linear-gradient(var(--dark-08dp), var(--dark-03dp)); /* background-image */ --dark-navigation-bg: var(--dark-bg); --dark-navigation-bg-image: linear-gradient(var(--dark-24dp), var(--dark-24dp)); /* background-image */ --dark-mobile-navigation-bg: var(--neutral-800); --dark-blockquote-bg: var(--dark-bg); --dark-blockquote-bg-image: linear-gradient(var(--dark-01dp), var(--dark-01dp)); /* background-image */ /* 3.1.1 Elevation levels */ /* lightest level (with higher numer) is ALWAYS on top "closer" to the user. 00dp equals background */ --dark-00dp: hsl(from hsl(0 0% 100%) h s l / 0%); --dark-01dp: hsl(from hsl(0 0% 100%) h s l / 5%); --dark-02dp: hsl(from hsl(0 0% 100%) h s l / 7%); --dark-03dp: hsl(from hsl(0 0% 100%) h s l / 8%); --dark-04dp: hsl(from hsl(0 0% 100%) h s l / 9%); --dark-06dp: hsl(from hsl(0 0% 100%) h s l / 11%); --dark-08dp: hsl(from hsl(0 0% 100%) h s l / 12%); --dark-12dp: hsl(from hsl(0 0% 100%) h s l / 14%); --dark-16dp: hsl(from hsl(0 0% 100%) h s l / 15%); --dark-24dp: hsl(from hsl(0 0% 100%) h s l / 16%); /* 3.1.2 Button bg */ --dark-primary-button-bg-color: var(--dark-primary); --dark-primary-button-bg-hover-color: var(--dark-primary-d-1); --dark-terms-button-bg-color: var(--dark-08dp); --dark-terms-button-bg-hover-color: var(--dark-24dp); --dark-blog-card-button-bg-color: var(--dark-dark-24dp); /* 3.1.3 Form bg */ --dark-form-bg-color: linear-gradient(var(--08dp), var(--08dp)); /* background-image */ --dark-form-bg-focus-color: linear-gradient(var(--dark-16dp), var(--dark-16dp)); /* background-image */ --dark-form-bg-color-attention: linear-gradient(var(--dark-24dp), var(--dark-24dp)); /* background-image */ /* 3.2 text*/ --dark-heading: hsl(0 0% 90%); --dark-text: hsl(0 0% 85%); --dark-text-muted: hsl(0 0% 60%); --dark-text-disabled: hsl(0 0% 38%); --dark-link-color: var(--link-l-2); --dark-link-hover-color: var(--link-l-3); --dark-footer-text: hsl(0 0% 87%); --dark-text-on-button-primary: hsl(0 0% 87%); --dark-text-on-button-primary-hover: var(--neutral-50); --dark-blog-card-title-text-color: var(--neutral-100); --dark-text-on-article-group: var(--neutral-300); --dark-text-on-article-group-accent: var(--text-color); --dark-text-on-nieuwsbrief-overlay: var(--neutral-300); --dark-text-on-nieuwsbrief-overlay-gdpr: var(--neutral-300); --dark-text-on-menu-color: hsl(0 0% 85%); --dark-text-on-mobile-menu-color: var(--neutral-100); --dark-text-on-toc: var(--text-color); --dark-text-on-toc-hover: var(--heading-color); /* 3.3 UI elements */ --dark-border-color: var(--dark-08dp); /* var(--neutral-800) */ --dark-navigation-border-color: var(--neutral-900); --dark-navigation-border-top-color: hsl(from var(--navigation-border-color) h s calc(l + 15)); --dark-navigation-menu-border-color: var(--neutral-900); --dark-home-pilar-border-color: var(--dark-border-color); --dark-takeaways-border-color: var(--dark-01dp); --dark-takeaways-left-listitem-border-color: var(--dark-12dp); --dark-search-form-border-color: transparent; --dark-pilar-intro-2cols-border-color: var(--dark-01dp); /* 3.4 imagery */ --dark-logo-color-on-bg: var(--neutral-0); --dark-logo-color-on-menu: var(--neutral-0); --dark-image-filter: brightness(.85) contrast(1.15); /* ======================== */ /* == 4 Developing mode == */ /* ======================== */ --develop-color: #08ff00; /* 4.1 background */ --develop-bg: var(--develop-color); --develop-home-pilar-bg: var(--develop-bg); --develop-home-pilar-bg-image: linear-gradient(var(--develop-06dp)); /* background-image */ --develop-blog-card-bg: var(--develop-bg); --develop-blog-card-bg-image: linear-gradient(var(--develop-06dp), var(--develop-06dp)); /* background-image */ --develop-blog-card-title-bg: var(--develop-bg); --develop-blog-card-title-bg-image: linear-gradient(var(--develop-06dp), var(--develop-06dp)); /* background-image */ --develop-article-group-bg: var(--develop-bg); --develop-article-group-bg-image: linear-gradient(var(--develop-08dp), var(--develop-08dp)); /* background-image */ --develop-article-group-description-bg: var(--develop-bg); --develop-article-group-description-bg-image: linear-gradient(var(--develop-03dp), var(--develop-03dp)); /* background-image */ --develop-takeaways-bg: var(--develop-06dp); --develop-previous-next-bg: var(--develop-01dp); --develop-other-topics-bg: var(--develop-01dp); --develop-footer-bg: var(--develop-color); --develop-pilar-intro-2cols-bg: var(--develop-bg); --develop-pilar-intro-2cols-bg-image: linear-gradient(var(--develop-03dp), var(--develop-01dp)); /* background-image */ --develop-nieuwsbrief-overlay-bg: var(--develop-bg); --develop-nieuwsbrief-overlay-bg-image: linear-gradient(var(--develop-08dp), var(--develop-03dp)); /* background-image */ --develop-navigation-bg: var(--develop-bg); --develop-navigation-bg-image: linear-gradient(var(--develop-24dp), var(--develop-24dp)); /* background-image */ --develop-mobile-navigation-bg: var(--develop-color); --develop-blockquote-bg: var(--develop-bg); --develop-blockquote-bg-image: linear-gradient(var(--develop-04dp), var(--develop-04dp)); /* background-image */ /* 4.1.1 Elevation levels */ /* lightest level (with higher numer) is ALWAYS on top "closer" to the user. 00dp equals background */ --develop-00dp: hsl(from var(--develop-color) h s l / 0%); --develop-01dp: hsl(from var(--develop-color) h s l / 26%); --develop-02dp: hsl(from var(--develop-color) h s l / 37%); --develop-03dp: hsl(from var(--develop-color) h s l / 42%); --develop-04dp: hsl(from var(--develop-color) h s l / 47%); --develop-06dp: hsl(from var(--develop-color) h s l / 58%); --develop-08dp: hsl(from var(--develop-color) h s l / 63%); --develop-12dp: hsl(from var(--develop-color) h s l / 74%); --develop-16dp: hsl(from var(--develop-color) h s l / 79%); --develop-24dp: hsl(from var(--develop-color) h s l / 85%); /* 4.1.2 Button bg */ --develop-primary-button-bg-color: var(--develop-color); --develop-primary-button-bg-hover-color: var(--develop-color); --develop-terms-button-bg-color: var(--develop-color); --develop-terms-button-bg-hover-color: var(--develop-color); --develop-blog-card-button-bg-color: var(--develop-color); /* 3.1.3 Form bg */ --develop-form-bg-color: var(--develop-color); /* background-image */ --develop-form-bg-focus-color: var(--develop-color); /* background-image */ --develop-form-bg-color-attention: var(--develop-color); /* background-image */ /* 4.2 text*/ --develop-heading: var(--develop-color); --develop-text: var(--develop-color); --develop-text-muted: var(--develop-color); --develop-text-disabled: var(--develop-color); --develop-link-color: var(--develop-color); --develop-link-hover-color: var(--develop-color); --develop-footer-text: var(--develop-color); --develop-text-on-button-primary: var(--develop-color); --develop-text-on-button-primary-hover: var(--develop-color); --develop-blog-card-title-text-color: var(--develop-color); --develop-text-on-article-group: var(--develop-text-muted); --develop-text-on-article-group-accent: var(--text-color); --develop-text-on-nieuwsbrief-overlay: var(--develop-color); --develop-text-on-nieuwsbrief-overlay-gdpr: var(--develop-color); --develop-text-on-menu-color: var(--develop-color); --develop-text-on-mobile-menu-color: var(--develop-color); --develop-text-on-toc: var(--develop-color); --develop-text-on-toc-hover: var(--develop-color); /* 4.3 UI elements */ --develop-border-color: var(--develop-color); --develop-navigation-border-color: var(--develop-color); --develop-navigation-border-top-color: hsl(from var(--navigation-border-color) h s calc(l + 15)); --develop-navigation-menu-border-color: var(--neutral-900); --develop-home-pilar-border-color: var(--develop-border-color); --develop-takeaways-border-color: var(--develop-border-color); --develop-takeaways-left-listitem-border-color: var(--develop-color); --develop-search-form-border-color: transparent; --develop-pilar-intro-2cols-border-color: var(--develop-01dp); /* 4.4 imagery */ --develop-logo-color-on-bg: var(--develop-color); --develop-logo-color-on-menu: var(--develop-color); --develop-image-filter: brightness(1.15) contrast(1.15); /* DEFAULT LIGHT THEME */ /* ============================= */ /* == A Default (Light) mode == */ /* ============================= */ @media (prefers-color-scheme: light) { color-scheme: light; /* A.1 background */ --bg-color: var(--light-bg); --home-pilar-bg: var(--light-home-pilar-bg); --home-pilar-bg-image: var(--light-home-pilar-bg-image); --blog-card-bg: var(--light-blog-card-bg); --blog-card-bg-image: var(--light-blog-card-bg-image); --blog-card-title-bg: var(--light-blog-card-title-bg); --blog-card-title-bg-image: var(--light-blog-card-title-bg-image); --article-group-bg: var(--light-article-group-bg); --article-group-bg-image: var(--light-article-group-bg-image); --article-group-description-bg: var(--light-article-group-description-bg); --article-group-description-bg-image: var(--light-article-group-description-bg-image); --takeaways-bg: var(--light-takeaways-bg); --previous-next-bg: var(--light-previous-next-bg); --other-topics-bg: var(--light-other-topics-bg); --footer-bg: var(--light-footer-bg); --pilar-intro-2cols-bg: var(--light-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--light-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--light-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--light-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--light-navigation-bg); --navigation-bg-image: var(--light-navigation-bg-image); --mobile-navigation-bg: var(--light-mobile-navigation-bg); --blockquote-bg: var(--light-blockquote-bg); --blockquote-bg-image: var(--light-blockquote-bg-image); /* A.1.1 Elevation levels */ --00dp-fallback: var(--light-00dp-fallback); /* fallback for older browsers */ --00dp: var(--light-00dp); --01dp-fallback: var(--light-01dp-fallback); /* fallback for older browsers */ --01dp: var(--light-01dp); --02dp-fallback: var(--light-02dp-fallback); /* fallback for older browsers */ --02dp: var(--light-02dp); --03dp-fallback: var(--light-03dp-fallback); /* fallback for older browsers */ --03dp: var(--light-03dp); --04dp-fallback: var(--light-04dp-fallback); /* fallback for older browsers */ --04dp: var(--light-04dp); --06dp-fallback: var(--light-06dp-fallback); /* fallback for older browsers */ --06dp: var(--light-06dp); --08dp-fallback: var(--light-08dp-fallback); /* fallback for older browsers */ --08dp: var(--light-08dp); --12dp-fallback: var(--light-12dp-fallback); /* fallback for older browsers */ --12dp: var(--light-12dp); --16dp-fallback: var(--light-16dp-fallback); /* fallback for older browsers */ --16dp: var(--light-16dp); --24dp-fallback: var(--light-24dp-fallback); /* fallback for older browsers */ --24dp: var(--light-24dp); /* A.1.2 Button bg */ --primary-button-bg-color: var(--light-primary-button-bg-color); --primary-button-bg-hover-color: var(--light-primary-button-bg-hover-color); --terms-button-bg-color: var(--light-terms-button-bg-color); --terms-button-bg-hover-color: var(--light-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--light-blog-card-button-bg-color); /* A.1.3 Form bg */ --form-bg-color: var(--light-form-bg-color); /* background-image */ --form-bg-focus-color: var(--light-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--light-form-bg-color-attention); /* background-image */ /* A.2 text*/ --heading-color: var(--light-heading); --text-color: var(--light-text); --text-muted-color: var(--light-text-muted); --text-disabled-color: var(--light-text-disabled); --link-color: var(--light-link-color); --link-hover-color: var(--light-link-hover-color); --footer-text: var(--light-footer-text); --text-on-button-primary: var(--light-text-on-button-primary); --text-on-button-primary-hover: var(--light-text-on-button-primary-hover); --blog-card-title-text-color: var(--light-blog-card-title-text-color); --text-on-article-group: var(--light-text-on-article-group); --text-on-article-group-accent: var(--light-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--light-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--light-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--light-text-on-menu-color); --text-on-mobile-menu-color: var(--light-text-on-mobile-menu-color); --text-on-toc: var(--light-text-on-toc); --text-on-toc-hover: var(--light-text-on-toc-hover); /* A.3 UI elements */ --border-color: var(--light-border-color); --navigation-border-color: var(--light-navigation-border-color); --navigation-border-top-color: var(--light-navigation-border-top-color); --navigation-menu-border-color: var(--light-navigation-menu-border-color); --home-pilar-border-color: var(--light-home-pilar-border-color); --takeaways-border-color: var(--light-takeaways-border-color); --takeaways-left-listitem-border-color: var(--light-takeaways-left-listitem-border-color); --search-form-border-color: var(--light-search-form-border-color); --pilar-intro-2cols-border-color: var(--light-pilar-intro-2cols-border-color); /* A.4 imagery */ --logo-color-on-bg: var(--light-logo-color-on-bg); --logo-color-on-menu: var(--light-logo-color-on-menu); --image-filter: var(--light-image-filter); } /*}*/ } /* SYSTEM DARK PREFERENCE */ @media (prefers-color-scheme: dark) { /*:root:not(.light), :root:not(.dim), :root:not(.develop) { /* ONLY apply dark if NOT overridden by .light */ :root { color-scheme: dark; /* ================== */ /* == C Dark mode == */ /* ================== */ /* C.1 background */ --bg-color: var(--dark-bg); --home-pilar-bg: var(--dark-home-pilar-bg); --home-pilar-bg-image: var(--dark-home-pilar-bg-image); --blog-card-bg: var(--dark-blog-card-bg); --blog-card-bg-image: var(--dark-blog-card-bg-image); --blog-card-title-bg: var(--dark-blog-card-title-bg); --blog-card-title-bg-image: var(--dark-blog-card-title-bg-image); --article-group-bg: var(--dark-article-group-bg); --article-group-bg-image: var(--dark-article-group-bg-image); --article-group-description-bg: var(--dark-article-group-description-bg); --article-group-description-bg-image: var(--dark-article-group-description-bg-image); --takeaways-bg: var(--dark-takeaways-bg); --previous-next-bg: var(--dark-previous-next-bg); --other-topics-bg: var(--dark-other-topics-bg); --footer-bg: var(--dark-footer-bg); --pilar-intro-2cols-bg: var(--dark-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--dark-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--dark-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--dark-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--dark-navigation-bg); --navigation-bg-image: var(--dark-navigation-bg-image); --mobile-navigation-bg: var(--dark-mobile-navigation-bg); --blockquote-bg: var(--dark-blockquote-bg); --blockquote-bg-image: var(--dark-blockquote-bg-image); /* C.1.1 Elevation levels */ --00dp-fallback: var(--dark-00dp-fallback); /* fallback for older browsers */ --00dp: var(--dark-00dp); --01dp-fallback: var(--dark-01dp-fallback); /* fallback for older browsers */ --01dp: var(--dark-01dp); --02dp-fallback: var(--dark-02dp-fallback); /* fallback for older browsers */ --02dp: var(--dark-02dp); --03dp-fallback: var(--dark-03dp-fallback); /* fallback for older browsers */ --03dp: var(--dark-03dp); --04dp-fallback: var(--dark-04dp-fallback); /* fallback for older browsers */ --04dp: var(--dark-04dp); --06dp-fallback: var(--dark-06dp-fallback); /* fallback for older browsers */ --06dp: var(--dark-06dp); --08dp-fallback: var(--dark-08dp-fallback); /* fallback for older browsers */ --08dp: var(--dark-08dp); --12dp-fallback: var(--dark-12dp-fallback); /* fallback for older browsers */ --12dp: var(--dark-12dp); --16dp-fallback: var(--dark-16dp-fallback); /* fallback for older browsers */ --16dp: var(--dark-16dp); --24dp-fallback: var(--dark-24dp-fallback); /* fallback for older browsers */ --24dp: var(--dark-24dp); /* C.1.2 Button bg */ --primary-button-bg-color: var(--dark-primary-button-bg-color); --primary-button-bg-hover-color: var(--dark-primary-button-bg-hover-color); --terms-button-bg-color: var(--dark-terms-button-bg-color); --terms-button-bg-hover-color: var(--dark-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--dark-blog-card-button-bg-color); /* C.1.3 Form bg */ --form-bg-color: var(--dark-form-bg-color); /* background-image */ --form-bg-focus-color: var(--dark-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--dark-form-bg-color-attention); /* background-image */ /* C.2 text*/ --heading-color: var(--dark-heading); --text-color: var(--dark-text); --text-muted-color: var(--dark-text-muted); --text-disabled-color: var(--dark-text-disabled); --link-color: var(--dark-link-color); --link-hover-color: var(--dark-link-hover-color); --footer-text: var(--dark-footer-text); --text-on-button-primary: var(--dark-text-on-button-primary); --text-on-button-primary-hover: var(--dark-text-on-button-primary-hover); --blog-card-title-text-color: var(--dark-blog-card-title-text-color); --text-on-article-group: var(--dark-text-on-article-group); --text-on-article-group-accent: var(--dark-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--dark-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--dark-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--dark-text-on-menu-color); --text-on-mobile-menu-color: var(--dark-text-on-mobile-menu-color); --text-on-toc: var(--dark-text-on-toc); --text-on-toc-hover: var(--dark-text-on-toc-hover); /* C.3 UI elements */ --border-color: var(--dark-border-color); --navigation-border-color: var(--dark-navigation-border-color); --navigation-border-top-color: var(--dark-navigation-border-top-color); --navigation-menu-border-color: var(--dark-navigation-menu-border-color); --home-pilar-border-color: var(--dark-home-pilar-border-color); --takeaways-border-color: var(--dark-takeaways-border-color); --takeaways-left-listitem-border-color: var(--dark-takeaways-left-listitem-border-color); --search-form-border-color: var(--dark-search-form-border-color); --pilar-intro-2cols-border-color: var(--dark-pilar-intro-2cols-border-color); /* C.4 imagery */ --logo-color-on-bg: var(--dark-logo-color-on-bg); --logo-color-on-menu: var(--dark-logo-color-on-menu); --image-filter: var(--dark-image-filter); } } /* CSS CLASSES OVERRIDE SYSTEM PREFERENCE */ /* Light mode with class on the HTML element */ .light { color-scheme: light; /* ================== */ /* == A Light mode == */ /* ================== */ /* A.1 background */ --bg-color: var(--light-bg); --home-pilar-bg: var(--light-home-pilar-bg); --home-pilar-bg-image: var(--light-home-pilar-bg-image); --blog-card-bg: var(--light-blog-card-bg); --blog-card-bg-image: var(--light-blog-card-bg-image); --blog-card-title-bg: var(--light-blog-card-title-bg); --blog-card-title-bg-image: var(--light-blog-card-title-bg-image); --article-group-bg: var(--light-article-group-bg); --article-group-bg-image: var(--light-article-group-bg-image); --article-group-description-bg: var(--light-article-group-description-bg); --article-group-description-bg-image: var(--light-article-group-description-bg-image); --takeaways-bg: var(--light-takeaways-bg); --previous-next-bg: var(--light-previous-next-bg); --other-topics-bg: var(--light-other-topics-bg); --footer-bg: var(--light-footer-bg); --pilar-intro-2cols-bg: var(--light-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--light-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--light-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--light-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--light-navigation-bg); --navigation-bg-image: var(--light-navigation-bg-image); --mobile-navigation-bg: var(--light-mobile-navigation-bg); --blockquote-bg: var(--light-blockquote-bg); --blockquote-bg-image: var(--light-blockquote-bg-image); /* A.1.1 Elevation levels */ --00dp-fallback: var(--light-00dp-fallback); /* fallback for older browsers */ --00dp: var(--light-00dp); --01dp-fallback: var(--light-01dp-fallback); /* fallback for older browsers */ --01dp: var(--light-01dp); --02dp-fallback: var(--light-02dp-fallback); /* fallback for older browsers */ --02dp: var(--light-02dp); --03dp-fallback: var(--light-03dp-fallback); /* fallback for older browsers */ --03dp: var(--light-03dp); --04dp-fallback: var(--light-04dp-fallback); /* fallback for older browsers */ --04dp: var(--light-04dp); --06dp-fallback: var(--light-06dp-fallback); /* fallback for older browsers */ --06dp: var(--light-06dp); --08dp-fallback: var(--light-08dp-fallback); /* fallback for older browsers */ --08dp: var(--light-08dp); --12dp-fallback: var(--light-12dp-fallback); /* fallback for older browsers */ --12dp: var(--light-12dp); --16dp-fallback: var(--light-16dp-fallback); /* fallback for older browsers */ --16dp: var(--light-16dp); --24dp-fallback: var(--light-24dp-fallback); /* fallback for older browsers */ --24dp: var(--light-24dp); /* A.1.2 Button bg */ --primary-button-bg-color: var(--light-primary-button-bg-color); --primary-button-bg-hover-color: var(--light-primary-button-bg-hover-color); --terms-button-bg-color: var(--light-terms-button-bg-color); --terms-button-bg-hover-color: var(--light-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--light-blog-card-button-bg-color); /* A.1.3 Form bg */ --form-bg-color: var(--light-form-bg-color); /* background-image */ --form-bg-focus-color: var(--light-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--light-form-bg-color-attention); /* background-image */ /* A.2 text*/ --heading-color: var(--light-heading); --text-color: var(--light-text); --text-muted-color: var(--light-text-muted); --text-disabled-color: var(--light-text-disabled); --link-color: var(--light-link-color); --link-hover-color: var(--light-link-hover-color); --footer-text: var(--light-footer-text); --text-on-button-primary: var(--light-text-on-button-primary); --text-on-button-primary-hover: var(--light-text-on-button-primary-hover); --blog-card-title-text-color: var(--light-blog-card-title-text-color); --text-on-article-group: var(--light-text-on-article-group); --text-on-article-group-accent: var(--light-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--light-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--light-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--light-text-on-menu-color); --text-on-mobile-menu-color: var(--light-text-on-mobile-menu-color); --text-on-toc: var(--light-text-on-toc); --text-on-toc-hover: var(--light-text-on-toc-hover); /* A.3 UI elements */ --border-color: var(--light-border-color); --navigation-border-color: var(--light-navigation-border-color); --navigation-border-top-color: var(--light-navigation-border-top-color); --navigation-menu-border-color: var(--light-navigation-menu-border-color); --home-pilar-border-color: var(--light-home-pilar-border-color); --takeaways-border-color: var(--light-takeaways-border-color); --takeaways-left-listitem-border-color: var(--light-takeaways-left-listitem-border-color); --search-form-border-color: var(--light-search-form-border-color); --pilar-intro-2cols-border-color: var(--light-pilar-intro-2cols-border-color); /* A.4 imagery */ --logo-color-on-bg: var(--light-logo-color-on-bg); --logo-color-on-menu: var(--light-logo-color-on-menu); --image-filter: var(--light-image-filter); } /* Light mode with :HAS selector */ :root:has(#light:checked) { color-scheme: light; /* ================== */ /* == A Light mode == */ /* ================== */ /* A.1 background */ --bg-color: var(--light-bg); --home-pilar-bg: var(--light-home-pilar-bg); --home-pilar-bg-image: var(--light-home-pilar-bg-image); --blog-card-bg: var(--light-blog-card-bg); --blog-card-bg-image: var(--light-blog-card-bg-image); --blog-card-title-bg: var(--light-blog-card-title-bg); --blog-card-title-bg-image: var(--light-blog-card-title-bg-image); --article-group-bg: var(--light-article-group-bg); --article-group-bg-image: var(--light-article-group-bg-image); --article-group-description-bg: var(--light-article-group-description-bg); --article-group-description-bg-image: var(--light-article-group-description-bg-image); --takeaways-bg: var(--light-takeaways-bg); --previous-next-bg: var(--light-previous-next-bg); --other-topics-bg: var(--light-other-topics-bg); --footer-bg: var(--light-footer-bg); --pilar-intro-2cols-bg: var(--light-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--light-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--light-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--light-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--light-navigation-bg); --navigation-bg-image: var(--light-navigation-bg-image); --mobile-navigation-bg: var(--light-mobile-navigation-bg); --blockquote-bg: var(--light-blockquote-bg); --blockquote-bg-image: var(--light-blockquote-bg-image); /* A.1.1 Elevation levels */ --00dp-fallback: var(--light-00dp-fallback); /* fallback for older browsers */ --00dp: var(--light-00dp); --01dp-fallback: var(--light-01dp-fallback); /* fallback for older browsers */ --01dp: var(--light-01dp); --02dp-fallback: var(--light-02dp-fallback); /* fallback for older browsers */ --02dp: var(--light-02dp); --03dp-fallback: var(--light-03dp-fallback); /* fallback for older browsers */ --03dp: var(--light-03dp); --04dp-fallback: var(--light-04dp-fallback); /* fallback for older browsers */ --04dp: var(--light-04dp); --06dp-fallback: var(--light-06dp-fallback); /* fallback for older browsers */ --06dp: var(--light-06dp); --08dp-fallback: var(--light-08dp-fallback); /* fallback for older browsers */ --08dp: var(--light-08dp); --12dp-fallback: var(--light-12dp-fallback); /* fallback for older browsers */ --12dp: var(--light-12dp); --16dp-fallback: var(--light-16dp-fallback); /* fallback for older browsers */ --16dp: var(--light-16dp); --24dp-fallback: var(--light-24dp-fallback); /* fallback for older browsers */ --24dp: var(--light-24dp); /* A.1.2 Button bg */ --primary-button-bg-color: var(--light-primary-button-bg-color); --primary-button-bg-hover-color: var(--light-primary-button-bg-hover-color); --terms-button-bg-color: var(--light-terms-button-bg-color); --terms-button-bg-hover-color: var(--light-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--light-blog-card-button-bg-color); /* A.1.3 Form bg */ --form-bg-color: var(--light-form-bg-color); /* background-image */ --form-bg-focus-color: var(--light-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--light-form-bg-color-attention); /* background-image */ /* A.2 text*/ --heading-color: var(--light-heading); --text-color: var(--light-text); --text-muted-color: var(--light-text-muted); --text-disabled-color: var(--light-text-disabled); --link-color: var(--light-link-color); --link-hover-color: var(--light-link-hover-color); --footer-text: var(--light-footer-text); --text-on-button-primary: var(--light-text-on-button-primary); --text-on-button-primary-hover: var(--light-text-on-button-primary-hover); --blog-card-title-text-color: var(--light-blog-card-title-text-color); --text-on-article-group: var(--light-text-on-article-group); --text-on-article-group-accent: var(--light-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--light-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--light-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--light-text-on-menu-color); --text-on-mobile-menu-color: var(--light-text-on-mobile-menu-color); --text-on-toc: var(--light-text-on-toc); --text-on-toc-hover: var(--light-text-on-toc-hover); /* A.3 UI elements */ --border-color: var(--light-border-color); --navigation-border-color: var(--light-navigation-border-color); --navigation-border-top-color: var(--light-navigation-border-top-color); --navigation-menu-border-color: var(--light-navigation-menu-border-color); --home-pilar-border-color: var(--light-home-pilar-border-color); --takeaways-border-color: var(--light-takeaways-border-color); --takeaways-left-listitem-border-color: var(--light-takeaways-left-listitem-border-color); --search-form-border-color: var(--light-search-form-border-color); --pilar-intro-2cols-border-color: var(--light-pilar-intro-2cols-border-color); /* A.4 imagery */ --logo-color-on-bg: var(--light-logo-color-on-bg); --logo-color-on-menu: var(--light-logo-color-on-menu); --image-filter: var(--light-image-filter); } /* DIM mode with class on the HTML element */ .dim { color-scheme: dark; /* ================== */ /* == B Dim mode == */ /* ================== */ /* B.1 background */ --bg-color: var(--dim-bg); --home-pilar-bg: var(--dim-home-pilar-bg); --home-pilar-bg-image: var(--dim-home-pilar-bg-image); --blog-card-bg: var(--dim-blog-card-bg); --blog-card-bg-image: var(--dim-blog-card-bg-image); --blog-card-title-bg: var(--dim-blog-card-title-bg); --blog-card-title-bg-image: var(--dim-blog-card-title-bg-image); --article-group-bg: var(--dim-article-group-bg); --article-group-bg-image: var(--dim-article-group-bg-image); --article-group-description-bg: var(--dim-article-group-description-bg); --article-group-description-bg-image: var(--dim-article-group-description-bg-image); --takeaways-bg: var(--dim-takeaways-bg); --previous-next-bg: var(--dim-previous-next-bg); --other-topics-bg: var(--dim-other-topics-bg); --footer-bg: var(--dim-footer-bg); --pilar-intro-2cols-bg: var(--dim-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--dim-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--dim-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--dim-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--dim-navigation-bg); --navigation-bg-image: var(--dim-navigation-bg-image); --mobile-navigation-bg: var(--dim-mobile-navigation-bg); --blockquote-bg: var(--dim-blockquote-bg); --blockquote-bg-image: var(--dim-blockquote-bg-image); /* B.1.1 Elevation levels */ --00dp-fallback: var(--dim-00dp-fallback); /* fallback for older browsers */ --00dp: var(--dim-00dp); --01dp-fallback: var(--dim-01dp-fallback); /* fallback for older browsers */ --01dp: var(--dim-01dp); --02dp-fallback: var(--dim-02dp-fallback); /* fallback for older browsers */ --02dp: var(--dim-02dp); --03dp-fallback: var(--dim-03dp-fallback); /* fallback for older browsers */ --03dp: var(--dim-03dp); --04dp-fallback: var(--dim-04dp-fallback); /* fallback for older browsers */ --04dp: var(--dim-04dp); --06dp-fallback: var(--dim-06dp-fallback); /* fallback for older browsers */ --06dp: var(--dim-06dp); --08dp-fallback: var(--dim-08dp-fallback); /* fallback for older browsers */ --08dp: var(--dim-08dp); --12dp-fallback: var(--dim-12dp-fallback); /* fallback for older browsers */ --12dp: var(--dim-12dp); --16dp-fallback: var(--dim-16dp-fallback); /* fallback for older browsers */ --16dp: var(--dim-16dp); --24dp-fallback: var(--dim-24dp-fallback); /* fallback for older browsers */ --24dp: var(--dim-24dp); /* B.1.2 Button bg */ --primary-button-bg-color: var(--dim-primary-button-bg-color); --primary-button-bg-hover-color: var(--dim-primary-button-bg-hover-color); --terms-button-bg-color: var(--dim-terms-button-bg-color); --terms-button-bg-hover-color: var(--dim-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--dim-blog-card-button-bg-color); /* B.1.3 Form bg */ --form-bg-color: var(--dim-form-bg-color); /* background-image */ --form-bg-focus-color: var(--dim-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--dim-form-bg-color-attention); /* background-image */ /* B.2 text*/ --heading-color: var(--dim-heading); --text-color: var(--dim-text); --text-muted-color: var(--dim-text-muted); --text-disabled-color: var(--dim-text-disabled); --link-color: var(--dim-link-color); --link-hover-color: var(--dim-link-hover-color); --footer-text: var(--dim-footer-text); --text-on-button-primary: var(--dim-text-on-button-primary); --text-on-button-primary-hover: var(--dim-text-on-button-primary-hover); --blog-card-title-text-color: var(--dim-blog-card-title-text-color); --text-on-article-group: var(--dim-text-on-article-group); --text-on-article-group-accent: var(--dim-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--dim-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--dim-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--dim-text-on-menu-color); --text-on-mobile-menu-color: var(--dim-text-on-mobile-menu-color); --text-on-toc: var(--dim-text-on-toc); --text-on-toc-hover: var(--dim-text-on-toc-hover); /* B.3 UI elements */ --border-color: var(--dim-border-color); --navigation-border-color: var(--dim-navigation-border-color); --navigation-border-top-color: var(--dim-navigation-border-top-color); --navigation-menu-border-color: var(--dim-navigation-menu-border-color); --home-pilar-border-color: var(--dim-home-pilar-border-color); --takeaways-border-color: var(--dim-takeaways-border-color); --takeaways-left-listitem-border-color: var(--dim-takeaways-left-listitem-border-color); --search-form-border-color: var(--dim-search-form-border-color); --pilar-intro-2cols-border-color: var(--dim-pilar-intro-2cols-border-color); /* B.4 imagery */ --logo-color-on-bg: var(--dim-logo-color-on-bg); --logo-color-on-menu: var(--dim-logo-color-on-menu); --image-filter: var(--dim-image-filter); } /* DIM mode with :HAS selector */ :root:has(#dim:checked) { color-scheme: dark; /* ================== */ /* == B Dim mode == */ /* ================== */ /* B.1 background */ --bg-color: var(--dim-bg); --home-pilar-bg: var(--dim-home-pilar-bg); --home-pilar-bg-image: var(--dim-home-pilar-bg-image); --blog-card-bg: var(--dim-blog-card-bg); --blog-card-bg-image: var(--dim-blog-card-bg-image); --blog-card-title-bg: var(--dim-blog-card-title-bg); --blog-card-title-bg-image: var(--dim-blog-card-title-bg-image); --article-group-bg: var(--dim-article-group-bg); --article-group-bg-image: var(--dim-article-group-bg-image); --article-group-description-bg: var(--dim-article-group-description-bg); --article-group-description-bg-image: var(--dim-article-group-description-bg-image); --takeaways-bg: var(--dim-takeaways-bg); --previous-next-bg: var(--dim-previous-next-bg); --other-topics-bg: var(--dim-other-topics-bg); --footer-bg: var(--dim-footer-bg); --pilar-intro-2cols-bg: var(--dim-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--dim-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--dim-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--dim-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--dim-navigation-bg); --navigation-bg-image: var(--dim-navigation-bg-image); --mobile-navigation-bg: var(--dim-mobile-navigation-bg); --blockquote-bg: var(--dim-blockquote-bg); --blockquote-bg-image: var(--dim-blockquote-bg-image); /* B.1.1 Elevation levels */ --00dp-fallback: var(--dim-00dp-fallback); /* fallback for older browsers */ --00dp: var(--dim-00dp); --01dp-fallback: var(--dim-01dp-fallback); /* fallback for older browsers */ --01dp: var(--dim-01dp); --02dp-fallback: var(--dim-02dp-fallback); /* fallback for older browsers */ --02dp: var(--dim-02dp); --03dp-fallback: var(--dim-03dp-fallback); /* fallback for older browsers */ --03dp: var(--dim-03dp); --04dp-fallback: var(--dim-04dp-fallback); /* fallback for older browsers */ --04dp: var(--dim-04dp); --06dp-fallback: var(--dim-06dp-fallback); /* fallback for older browsers */ --06dp: var(--dim-06dp); --08dp-fallback: var(--dim-08dp-fallback); /* fallback for older browsers */ --08dp: var(--dim-08dp); --12dp-fallback: var(--dim-12dp-fallback); /* fallback for older browsers */ --12dp: var(--dim-12dp); --16dp-fallback: var(--dim-16dp-fallback); /* fallback for older browsers */ --16dp: var(--dim-16dp); --24dp-fallback: var(--dim-24dp-fallback); /* fallback for older browsers */ --24dp: var(--dim-24dp); /* B.1.2 Button bg */ --primary-button-bg-color: var(--dim-primary-button-bg-color); --primary-button-bg-hover-color: var(--dim-primary-button-bg-hover-color); --terms-button-bg-color: var(--dim-terms-button-bg-color); --terms-button-bg-hover-color: var(--dim-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--dim-blog-card-button-bg-color); /* B.1.3 Form bg */ --form-bg-color: var(--dim-form-bg-color); /* background-image */ --form-bg-focus-color: var(--dim-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--dim-form-bg-color-attention); /* background-image */ /* B.2 text*/ --heading-color: var(--dim-heading); --text-color: var(--dim-text); --text-muted-color: var(--dim-text-muted); --text-disabled-color: var(--dim-text-disabled); --link-color: var(--dim-link-color); --link-hover-color: var(--dim-link-hover-color); --footer-text: var(--dim-footer-text); --text-on-button-primary: var(--dim-text-on-button-primary); --text-on-button-primary-hover: var(--dim-text-on-button-primary-hover); --blog-card-title-text-color: var(--dim-blog-card-title-text-color); --text-on-article-group: var(--dim-text-on-article-group); --text-on-article-group-accent: var(--dim-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--dim-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--dim-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--dim-text-on-menu-color); --text-on-mobile-menu-color: var(--dim-text-on-mobile-menu-color); --text-on-toc: var(--dim-text-on-toc); --text-on-toc-hover: var(--dim-text-on-toc-hover); /* B.3 UI elements */ --border-color: var(--dim-border-color); --navigation-border-color: var(--dim-navigation-border-color); --navigation-border-top-color: var(--dim-navigation-border-top-color); --navigation-menu-border-color: var(--dim-navigation-menu-border-color); --home-pilar-border-color: var(--dim-home-pilar-border-color); --takeaways-border-color: var(--dim-takeaways-border-color); --takeaways-left-listitem-border-color: var(--dim-takeaways-left-listitem-border-color); --search-form-border-color: var(--dim-search-form-border-color); --pilar-intro-2cols-border-color: var(--dim-pilar-intro-2cols-border-color); /* B.4 imagery */ --logo-color-on-bg: var(--dim-logo-color-on-bg); --logo-color-on-menu: var(--dim-logo-color-on-menu); --image-filter: var(--dim-image-filter); } /* Dark mode with class on the HTML element */ .dark { color-scheme: dark; /* ================== */ /* == C Dark mode == */ /* ================== */ /* C.1 background */ --bg-color: var(--dark-bg); --home-pilar-bg: var(--dark-home-pilar-bg); --home-pilar-bg-image: var(--dark-home-pilar-bg-image); --blog-card-bg: var(--dark-blog-card-bg); --blog-card-bg-image: var(--dark-blog-card-bg-image); --blog-card-title-bg: var(--dark-blog-card-title-bg); --blog-card-title-bg-image: var(--dark-blog-card-title-bg-image); --article-group-bg: var(--dark-article-group-bg); --article-group-bg-image: var(--dark-article-group-bg-image); --article-group-description-bg: var(--dark-article-group-description-bg); --article-group-description-bg-image: var(--dark-article-group-description-bg-image); --takeaways-bg: var(--dark-takeaways-bg); --previous-next-bg: var(--dark-previous-next-bg); --other-topics-bg: var(--dark-other-topics-bg); --footer-bg: var(--dark-footer-bg); --pilar-intro-2cols-bg: var(--dark-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--dark-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--dark-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--dark-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--dark-navigation-bg); --navigation-bg-image: var(--dark-navigation-bg-image); --mobile-navigation-bg: var(--dark-mobile-navigation-bg); --blockquote-bg: var(--dark-blockquote-bg); --blockquote-bg-image: var(--dark-blockquote-bg-image); /* C.1.1 Elevation levels */ --00dp-fallback: var(--dark-00dp-fallback); /* fallback for older browsers */ --00dp: var(--dark-00dp); --01dp-fallback: var(--dark-01dp-fallback); /* fallback for older browsers */ --01dp: var(--dark-01dp); --02dp-fallback: var(--dark-02dp-fallback); /* fallback for older browsers */ --02dp: var(--dark-02dp); --03dp-fallback: var(--dark-03dp-fallback); /* fallback for older browsers */ --03dp: var(--dark-03dp); --04dp-fallback: var(--dark-04dp-fallback); /* fallback for older browsers */ --04dp: var(--dark-04dp); --06dp-fallback: var(--dark-06dp-fallback); /* fallback for older browsers */ --06dp: var(--dark-06dp); --08dp-fallback: var(--dark-08dp-fallback); /* fallback for older browsers */ --08dp: var(--dark-08dp); --12dp-fallback: var(--dark-12dp-fallback); /* fallback for older browsers */ --12dp: var(--dark-12dp); --16dp-fallback: var(--dark-16dp-fallback); /* fallback for older browsers */ --16dp: var(--dark-16dp); --24dp-fallback: var(--dark-24dp-fallback); /* fallback for older browsers */ --24dp: var(--dark-24dp); /* C.1.2 Button bg */ --primary-button-bg-color: var(--dark-primary-button-bg-color); --primary-button-bg-hover-color: var(--dark-primary-button-bg-hover-color); --terms-button-bg-color: var(--dark-terms-button-bg-color); --terms-button-bg-hover-color: var(--dark-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--dark-blog-card-button-bg-color); /* C.1.3 Form bg */ --form-bg-color: var(--dark-form-bg-color); /* background-image */ --form-bg-focus-color: var(--dark-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--dark-form-bg-color-attention); /* background-image */ /* C.2 text*/ --heading-color: var(--dark-heading); --text-color: var(--dark-text); --text-muted-color: var(--dark-text-muted); --text-disabled-color: var(--dark-text-disabled); --link-color: var(--dark-link-color); --link-hover-color: var(--dark-link-hover-color); --footer-text: var(--dark-footer-text); --text-on-button-primary: var(--dark-text-on-button-primary); --text-on-button-primary-hover: var(--dark-text-on-button-primary-hover); --blog-card-title-text-color: var(--dark-blog-card-title-text-color); --text-on-article-group: var(--dark-text-on-article-group); --text-on-article-group-accent: var(--dark-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--dark-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--dark-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--dark-text-on-menu-color); --text-on-mobile-menu-color: var(--dark-text-on-mobile-menu-color); --text-on-toc: var(--dark-text-on-toc); --text-on-toc-hover: var(--dark-text-on-toc-hover); /* C.3 UI elements */ --border-color: var(--dark-border-color); --navigation-border-color: var(--dark-navigation-border-color); --navigation-border-top-color: var(--dark-navigation-border-top-color); --navigation-menu-border-color: var(--dark-navigation-menu-border-color); --home-pilar-border-color: var(--dark-home-pilar-border-color); --takeaways-border-color: var(--dark-takeaways-border-color); --takeaways-left-listitem-border-color: var(--dark-takeaways-left-listitem-border-color); --search-form-border-color: var(--dark-search-form-border-color); --pilar-intro-2cols-border-color: var(--dark-pilar-intro-2cols-border-color); /* C.4 imagery */ --logo-color-on-bg: var(--dark-logo-color-on-bg); --logo-color-on-menu: var(--dark-logo-color-on-menu); --image-filter: var(--dark-image-filter); } /* Dark mode with :HAS selector */ :root:has(#dark:checked) { color-scheme: dark; /* ================== */ /* == C Dark mode == */ /* ================== */ /* C.1 background */ --bg-color: var(--dark-bg); --home-pilar-bg: var(--dark-home-pilar-bg); --home-pilar-bg-image: var(--dark-home-pilar-bg-image); --blog-card-bg: var(--dark-blog-card-bg); --blog-card-bg-image: var(--dark-blog-card-bg-image); --blog-card-title-bg: var(--dark-blog-card-title-bg); --blog-card-title-bg-image: var(--dark-blog-card-title-bg-image); --article-group-bg: var(--dark-article-group-bg); --article-group-bg-image: var(--dark-article-group-bg-image); --article-group-description-bg: var(--dark-article-group-description-bg); --article-group-description-bg-image: var(--dark-article-group-description-bg-image); --takeaways-bg: var(--dark-takeaways-bg); --previous-next-bg: var(--dark-previous-next-bg); --other-topics-bg: var(--dark-other-topics-bg); --footer-bg: var(--dark-footer-bg); --pilar-intro-2cols-bg: var(--dark-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--dark-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--dark-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--dark-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--dark-navigation-bg); --navigation-bg-image: var(--dark-navigation-bg-image); --mobile-navigation-bg: var(--dark-mobile-navigation-bg); --blockquote-bg: var(--dark-blockquote-bg); --blockquote-bg-image: var(--dark-blockquote-bg-image); /* D.1.1 Elevation levels */ --00dp-fallback: var(--dark-00dp-fallback); /* fallback for older browsers */ --00dp: var(--dark-00dp); --01dp-fallback: var(--dark-01dp-fallback); /* fallback for older browsers */ --01dp: var(--dark-01dp); --02dp-fallback: var(--dark-02dp-fallback); /* fallback for older browsers */ --02dp: var(--dark-02dp); --03dp-fallback: var(--dark-03dp-fallback); /* fallback for older browsers */ --03dp: var(--dark-03dp); --04dp-fallback: var(--dark-04dp-fallback); /* fallback for older browsers */ --04dp: var(--dark-04dp); --06dp-fallback: var(--dark-06dp-fallback); /* fallback for older browsers */ --06dp: var(--dark-06dp); --08dp-fallback: var(--dark-08dp-fallback); /* fallback for older browsers */ --08dp: var(--dark-08dp); --12dp-fallback: var(--dark-12dp-fallback); /* fallback for older browsers */ --12dp: var(--dark-12dp); --16dp-fallback: var(--dark-16dp-fallback); /* fallback for older browsers */ --16dp: var(--dark-16dp); --24dp-fallback: var(--dark-24dp-fallback); /* fallback for older browsers */ --24dp: var(--dark-24dp); /* C.1.2 Button bg */ --primary-button-bg-color: var(--dark-primary-button-bg-color); --primary-button-bg-hover-color: var(--dark-primary-button-bg-hover-color); --terms-button-bg-color: var(--dark-terms-button-bg-color); --terms-button-bg-hover-color: var(--dark-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--dark-blog-card-button-bg-color); /* C.1.3 Form bg */ --form-bg-color: var(--dark-form-bg-color); /* background-image */ --form-bg-focus-color: var(--dark-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--dark-form-bg-color-attention); /* background-image */ /* C.2 text*/ --heading-color: var(--dark-heading); --text-color: var(--dark-text); --text-muted-color: var(--dark-text-muted); --text-disabled-color: var(--dark-text-disabled); --link-color: var(--dark-link-color); --link-hover-color: var(--dark-link-hover-color); --footer-text: var(--dark-footer-text); --text-on-button-primary: var(--dark-text-on-button-primary); --text-on-button-primary-hover: var(--dark-text-on-button-primary-hover); --blog-card-title-text-color: var(--dark-blog-card-title-text-color); --text-on-article-group: var(--dark-text-on-article-group); --text-on-article-group-accent: var(--dark-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--dark-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--dark-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--dark-text-on-menu-color); --text-on-mobile-menu-color: var(--dark-text-on-mobile-menu-color); --text-on-toc: var(--dark-text-on-toc); --text-on-toc-hover: var(--dark-text-on-toc-hover); /* C.3 UI elements */ --border-color: var(--dark-border-color); --navigation-border-color: var(--dark-navigation-border-color); --navigation-border-top-color: var(--dark-navigation-border-top-color); --navigation-menu-border-color: var(--dark-navigation-menu-border-color); --home-pilar-border-color: var(--dark-home-pilar-border-color); --takeaways-border-color: var(--dark-takeaways-border-color); --takeaways-left-listitem-border-color: var(--dark-takeaways-left-listitem-border-color); --search-form-border-color: var(--dark-search-form-border-color); --pilar-intro-2cols-border-color: var(--dark-pilar-intro-2cols-border-color); /* C.4 imagery */ --logo-color-on-bg: var(--dark-logo-color-on-bg); --logo-color-on-menu: var(--dark-logo-color-on-menu); --image-filter: var(--dark-image-filter); } /* DEVELOP mode with class on the HTML element */ .develop { color-scheme: dark; /* ===================== */ /* == D Develop mode == */ /* ===================== */ /* D.1 background */ --bg-color: var(--develop-bg); --home-pilar-bg: var(--develop-home-pilar-bg); --home-pilar-bg-image: var(--develop-home-pilar-bg-image); --blog-card-bg: var(--develop-blog-card-bg); --blog-card-bg-image: var(--develop-blog-card-bg-image); --blog-card-title-bg: var(--develop-blog-card-title-bg); --blog-card-title-bg-image: var(--develop-blog-card-title-bg-image); --article-group-bg: var(--develop-article-group-bg); --article-group-bg-image: var(--develop-article-group-bg-image); --article-group-description-bg: var(--develop-article-group-description-bg); --article-group-description-bg-image: var(--develop-article-group-description-bg-image); --takeaways-bg: var(--develop-takeaways-bg); --previous-next-bg: var(--develop-previous-next-bg); --other-topics-bg: var(--develop-other-topics-bg); --footer-bg: var(--develop-footer-bg); --pilar-intro-2cols-bg: var(--develop-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--develop-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--develop-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--develop-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--develop-navigation-bg); --navigation-bg-image: var(--develop-navigation-bg-image); --mobile-navigation-bg: var(--develop-mobile-navigation-bg); --blockquote-bg: var(--develop-blockquote-bg); --blockquote-bg-image: var(--develop-blockquote-bg-image); /* D.1.1 Elevation levels */ --00dp-fallback: var(--develop-00dp-fallback); /* fallback for older browsers */ --00dp: var(--develop-00dp); --01dp-fallback: var(--develop-01dp-fallback); /* fallback for older browsers */ --01dp: var(--develop-01dp); --02dp-fallback: var(--develop-02dp-fallback); /* fallback for older browsers */ --02dp: var(--develop-02dp); --03dp-fallback: var(--develop-03dp-fallback); /* fallback for older browsers */ --03dp: var(--develop-03dp); --04dp-fallback: var(--develop-04dp-fallback); /* fallback for older browsers */ --04dp: var(--develop-04dp); --06dp-fallback: var(--develop-06dp-fallback); /* fallback for older browsers */ --06dp: var(--develop-06dp); --08dp-fallback: var(--develop-08dp-fallback); /* fallback for older browsers */ --08dp: var(--develop-08dp); --12dp-fallback: var(--develop-12dp-fallback); /* fallback for older browsers */ --12dp: var(--develop-12dp); --16dp-fallback: var(--develop-16dp-fallback); /* fallback for older browsers */ --16dp: var(--develop-16dp); --24dp-fallback: var(--develop-24dp-fallback); /* fallback for older browsers */ --24dp: var(--develop-24dp); /* D.1.2 Button bg */ --primary-button-bg-color: var(--develop-primary-button-bg-color); --primary-button-bg-hover-color: var(--develop-primary-button-bg-hover-color); --terms-button-bg-color: var(--develop-terms-button-bg-color); --terms-button-bg-hover-color: var(--develop-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--develop-blog-card-button-bg-color); /* D.1.3 Form bg */ --form-bg-color: var(--develop-form-bg-color); /* background-image */ --form-bg-focus-color: var(--develop-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--develop-form-bg-color-attention); /* background-image */ /* D.2 text*/ --heading-color: var(--develop-heading); --text-color: var(--develop-text); --text-muted-color: var(--develop-text-muted); --text-disabled-color: var(--develop-text-disabled); --link-color: var(--develop-link-color); --link-hover-color: var(--develop-link-hover-color); --footer-text: var(--develop-footer-text); --text-on-button-primary: var(--develop-text-on-button-primary); --text-on-button-primary-hover: var(--develop-text-on-button-primary-hover); --blog-card-title-text-color: var(--develop-blog-card-title-text-color); --text-on-article-group: var(--develop-text-on-article-group); --text-on-article-group-accent: var(--develop-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--develop-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--develop-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--develop-text-on-menu-color); --text-on-mobile-menu-color: var(--develop-text-on-mobile-menu-color); --text-on-toc: var(--develop-text-on-toc); --text-on-toc-hover: var(--develop-text-on-toc-hover); /* D.3 UI elements */ --border-color: var(--develop-border-color); --navigation-border-color: var(--develop-navigation-border-color); --navigation-border-top-color: var(--develop-navigation-border-top-color); --navigation-menu-border-color: var(--develop-navigation-menu-border-color); --home-pilar-border-color: var(--develop-home-pilar-border-color); --takeaways-border-color: var(--develop-takeaways-border-color); --takeaways-left-listitem-border-color: var(--develop-takeaways-left-listitem-border-color); --search-form-border-color: var(--develop-search-form-border-color); --pilar-intro-2cols-border-color: var(--develop-pilar-intro-2cols-border-color); /* D.4 imagery */ --logo-color-on-bg: var(--develop-logo-color-on-bg); --logo-color-on-menu: var(--develop-logo-color-on-menu); --image-filter: var(--develop-image-filter); } /* DEVELOP mode with :HAS selector */ :root:has(#develop:checked) { color-scheme: dark; /* ===================== */ /* == D Develop mode == */ /* ===================== */ /* D.1 background */ --bg-color: var(--develop-bg); --home-pilar-bg: var(--develop-home-pilar-bg); --home-pilar-bg-image: var(--develop-home-pilar-bg-image); --blog-card-bg: var(--develop-blog-card-bg); --blog-card-bg-image: var(--develop-blog-card-bg-image); --blog-card-title-bg: var(--develop-blog-card-title-bg); --blog-card-title-bg-image: var(--develop-blog-card-title-bg-image); --article-group-bg: var(--develop-article-group-bg); --article-group-bg-image: var(--develop-article-group-bg-image); --article-group-description-bg: var(--develop-article-group-description-bg); --article-group-description-bg-image: var(--develop-article-group-description-bg-image); --takeaways-bg: var(--develop-takeaways-bg); --previous-next-bg: var(--develop-previous-next-bg); --other-topics-bg: var(--develop-other-topics-bg); --footer-bg: var(--develop-footer-bg); --pilar-intro-2cols-bg: var(--develop-pilar-intro-2cols-bg); --pilar-intro-2cols-bg-image: var(--develop-pilar-intro-2cols-bg-image); --nieuwsbrief-overlay-bg: var(--develop-nieuwsbrief-overlay-bg); --nieuwsbrief-overlay-bg-image: var(--develop-nieuwsbrief-overlay-bg-image); --navigation-bg: var(--develop-navigation-bg); --navigation-bg-image: var(--develop-navigation-bg-image); --mobile-navigation-bg: var(--develop-mobile-navigation-bg); --blockquote-bg: var(--develop-blockquote-bg); --blockquote-bg-image: var(--develop-blockquote-bg-image); /* D.1.1 Elevation levels */ --00dp-fallback: var(--develop-00dp-fallback); /* fallback for older browsers */ --00dp: var(--develop-00dp); --01dp-fallback: var(--develop-01dp-fallback); /* fallback for older browsers */ --01dp: var(--develop-01dp); --02dp-fallback: var(--develop-02dp-fallback); /* fallback for older browsers */ --02dp: var(--develop-02dp); --03dp-fallback: var(--develop-03dp-fallback); /* fallback for older browsers */ --03dp: var(--develop-03dp); --04dp-fallback: var(--develop-04dp-fallback); /* fallback for older browsers */ --04dp: var(--develop-04dp); --06dp-fallback: var(--develop-06dp-fallback); /* fallback for older browsers */ --06dp: var(--develop-06dp); --08dp-fallback: var(--develop-08dp-fallback); /* fallback for older browsers */ --08dp: var(--develop-08dp); --12dp-fallback: var(--develop-12dp-fallback); /* fallback for older browsers */ --12dp: var(--develop-12dp); --16dp-fallback: var(--develop-16dp-fallback); /* fallback for older browsers */ --16dp: var(--develop-16dp); --24dp-fallback: var(--develop-24dp-fallback); /* fallback for older browsers */ --24dp: var(--develop-24dp); /* D.1.2 Button bg */ --primary-button-bg-color: var(--develop-primary-button-bg-color); --primary-button-bg-hover-color: var(--develop-primary-button-bg-hover-color); --terms-button-bg-color: var(--develop-terms-button-bg-color); --terms-button-bg-hover-color: var(--develop-terms-button-bg-hover-color); --blog-card-button-bg-color: var(--develop-blog-card-button-bg-color); /* D.1.3 Form bg */ --form-bg-color: var(--develop-form-bg-color); /* background-image */ --form-bg-focus-color: var(--develop-form-bg-focus-color); /* background-image */ --form-bg-color-attention: var(--develop-form-bg-color-attention); /* background-image */ /* D.2 text*/ --heading-color: var(--develop-heading); --text-color: var(--develop-text); --text-muted-color: var(--develop-text-muted); --text-disabled-color: var(--develop-text-disabled); --link-color: var(--develop-link-color); --link-hover-color: var(--develop-link-hover-color); --footer-text: var(--develop-footer-text); --text-on-button-primary: var(--develop-text-on-button-primary); --text-on-button-primary-hover: var(--develop-text-on-button-primary-hover); --blog-card-title-text-color: var(--develop-blog-card-title-text-color); --text-on-article-group: var(--develop-text-on-article-group); --text-on-article-group-accent: var(--develop-text-on-article-group-accent); --text-on-nieuwsbrief-overlay: var(--develop-text-on-nieuwsbrief-overlay); --text-on-nieuwsbrief-overlay-gdpr: var(--develop-text-on-nieuwsbrief-overlay-gdpr); --text-on-menu-color: var(--develop-text-on-menu-color); --text-on-mobile-menu-color: var(--develop-text-on-mobile-menu-color); --text-on-toc: var(--develop-text-on-toc); --text-on-toc-hover: var(--develop-text-on-toc-hover); /* D.3 UI elements */ --border-color: var(--develop-border-color); --navigation-border-color: var(--develop-navigation-border-color); --navigation-border-top-color: var(--develop-navigation-border-top-color); --navigation-menu-border-color: var(--develop-navigation-menu-border-color); --home-pilar-border-color: var(--develop-home-pilar-border-color); --takeaways-border-color: var(--develop-takeaways-border-color); --takeaways-left-listitem-border-color: var(--develop-takeaways-left-listitem-border-color); --search-form-border-color: var(--develop-search-form-border-color); --pilar-intro-2cols-border-color: var(--develop-pilar-intro-2cols-border-color); --text-on-menu-color: var(--develop-text-on-menu-color); /* D.4 imagery */ --logo-color-on-bg: var(--develop-logo-color-on-bg); --logo-color-on-menu: var(--develop-logo-color-on-menu); --image-filter: var(--develop-image-filter); } html { color-scheme: dark light; } /*body { margin: 0; font-family: system-ui, sans-serif; font-size: 1.25rem; line-height: 1.5; background: var(--clr-body-bg); color: var(--clr-text); } h1, h2, h3 { color: var(--clr-heading); line-height: 1.1; } .auto-grid { --min-column-size: 225px; display: grid; gap: clamp(1rem, 5vmax, 1.625rem); grid-template-columns: repeat( auto-fit, minmax(min(100%, var(--min-column-size)), 1fr) ); } .wrapper { --max-width: 55rem; width: min(100% - 2rem, var(--max-width)); margin-inline: auto; } .card { padding: 1rem; background-color: var(--clr-card-bg); border-block-start: 0.5rem solid; border-radius: 0.5rem; } .card > * { margin: 0; } .card > *:not(:last-child) { margin-bottom: 0.75rem; }*/ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* =========================================================== */ /* =========================================================== * 1. DEFAULTS * ==========================================================*/ /* =========================================================== * 1.1 TYPOGRAPHY * ==========================================================*/ /* ========================================================================== TYPOGRAPHY VARIABLES Define base font sizes, font families, and fluid typography scale variables using CSS custom properties for consistent usage throughout the site. ========================================================================== */ :root { /* ---- Font Families ---- */ /* You can define your font families here or reference existing variables */ /*--font-family-base: 'Roboto', sans-serif; /* Base font family for body text */ /* --font-family-heading: 'Montserrat', sans-serif; /* Font family for headings */ --font-family-base: var(--gp-font--body), sans-serif; --font-family-heading: var(--gp-font--body), sans-serif; /* ---- Fluid Font Sizes (clamped to viewport width) ---- */ --font-size-base: clamp(0.9375rem, 0.8523rem + 0.3409vw, 1.125rem); --font-size-p: clamp(1.0417rem, 0.947rem + 0.3788vw, 1.25rem); --font-size-h1: clamp(2.625rem, 2.3864rem + 0.9545vw, 3.15rem); --font-size-h2: clamp(1.9688rem, 1.7898rem + 0.7159vw, 2.3625rem); --font-size-h3: clamp(1.6406rem, 1.4915rem + 0.5966vw, 1.9688rem); --font-size-h4: clamp(1.3125rem, 1.1932rem + 0.4773vw, 1.575rem); --font-size-h5: clamp(1.0938rem, 0.9943rem + 0.3977vw, 1.3125rem); --font-size-h6: clamp(0.9844rem, 0.8949rem + 0.358vw, 1.1813rem); /* ---- Additional typography variables (optional) ---- */ --font-weight-normal: 400; --font-weight-bold: 700; --line-height-base: 1.5; /* Standard line height for text */ /* ---- Letter spacing (positive values) ---- */ --letter-spacing-xxs: 0.01em; --letter-spacing-xs: 0.02em; --letter-spacing-s: 0.03em; --letter-spacing-m: 0.04em; --letter-spacing-l: 0.05em; --letter-spacing-xl: 0.07em; /* ---- Letter spacing (negative values) ---- */ --letter-spacing-xxs-neg: -0.01em; --letter-spacing-xs-neg: -0.02em; --letter-spacing-s-neg: -0.03em; --letter-spacing-m-neg: -0.04em; --letter-spacing-l-neg: -0.05em; --letter-spacing-xl-neg: -0.07em; /* General */ --navigation-height: 60px; /* box-shadow */ --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030, /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */ --shadow-m: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030, /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */ --shadow-l: inset 0 1px 2px #ffffff70, /* top highlight */ 0 4px 6px #00000030, /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */ } /* ========================================================================== GLOBAL TYPOGRAPHY BASE SETTINGS Set base font families, colors, and line heights for body and general text. ========================================================================== */ body { margin: 0; /* Remove default margin for edge-to-edge layout */ padding: 0; /* Remove default padding */ font-family: var(--font-family-base); /* Set a clean, readable font */ font-size: var(--font-size-base); line-height: var(--line-height-base); /* Improve text readability with line height */ color: var(--text-color); /* fallback color #222222 */ background-color: var(--bg-color); /* fallback background #ffffff */ /* overflow-x: hidden; /* Prevent horizontal scroll if any overflow */ /* min-width: 320px; /* Minimum width for mobile devices */ transition: background-color 0.3s ease, color 0.3s ease; /* make the transition between different color theme smoothly */ } /* ========================================================================== HEADING AND TEXT FONT FAMILIES Apply defined font families to headings and body text classes. ========================================================================== */ .ff-body, p, .looks-p { font-family: var(--font-family-base); } a { color: var(--link-color); } a:hover, a:focus, a:active { color: var(--link-hover-color); } .ff-heading, h1, h2, h3, h4, h5, h6, [class*=looks-h] { font-family: var(--font-family-heading); color: var(--heading-color); word-break: break-word; /* Prevent overflow by breaking long words */ } h1::first-letter { text-transform: uppercase; /* Capitalize first letter of H1 */ } .blog-card__title::first-letter { text-transform: uppercase; } .blog-card__title a { font-size: .79em; } /* Captions and small text */ .caption, .wp-element-caption { font-style: italic; font-size: 0.8em; } /* ========================================================================== FLUID TYPOGRAPHY ASSIGNMENTS Assign fluid font sizes using clamped variables to headings and common text elements. ========================================================================== */ /* Headings */ h1, .looks-h1, .looptitle-category-keyword, .looptitle-tag-keyword { font-size: var(--font-size-h1); } h2, .looks-h2 { font-size: var(--font-size-h2); } h3, .looks-h3 { font-size: var(--font-size-h3); } h4, .looks-h4 { font-size: var(--font-size-h4); } h5, .looks-h5, .looptitle-category, .looptitle-tag { font-size: var(--font-size-h5); } h6, .looks-h6 { font-size: var(--font-size-h6); } .looks-h7 { font-size: clamp(1.10155rem, 1.00145rem + 0.40055vw, 1.3219rem); } /* Paragraphs, links, and list items */ a, p, .looks-p, li { font-size: var(--font-size-p); } table a { font-size: var(--font-size-base); } /* Spacing above secondary headings inside article content */ .article-content-container :is(h2, h3, h4, h5, h6):not([class*=article-group__]):not([class*=blog-card__]) { margin-top: 1.5em; } .looptitle-category, .looptitle-tag { font-weight: bold; } /* ========================================================================== RESPONSIVE TYPOGRAPHY ADJUSTMENTS Override font sizes with slightly adjusted clamp values on smaller screens. ========================================================================== */ @media (max-width: 768px) { /* CSS in here for mobile only * h1, .looks-h1 { font-size: clamp(3rem, 2.9086rem + 0.3655vw, 3.201rem); } h2, .looks-h2 { font-size: clamp(2.25rem, 2.1815rem + 0.2741vw, 2.4008rem); } h3, .looks-h3 { font-size: clamp(1.875rem, 1.8179rem + 0.2284vw, 2.0006rem); } h4, .looks-h4 { font-size: clamp(1.5rem, 1.4543rem + 0.1827vw, 1.6005rem); } h5, .looks-h5 { font-size: clamp(1.25rem, 1.2119rem + 0.1523vw, 1.3338rem); } h6, .looks-h6 { font-size: clamp(1.125rem, 1.0907rem + 0.137vw, 1.2004rem); } /* Paragraph and related text */ :is(a, p, .looks-p, li) { font-size: clamp(1.1458rem, 1.0417rem + 0.4167vw, 1.375rem); } } /* You may add tablet (769-1024px) and desktop (1025px+) overrides as needed */ @media (min-width: 769px) and (max-width: 1024px) { /* CSS in here for tablet only */ } @media (min-width: 1025px) { /* CSS in here for desktop only */ } /* ========================================================================== OTHER TYPOGRAPHY-RELATED STYLES (optional, if relevant) ========================================================================== */ /* Styling for dynamic terms */ .dynamic-terms a { font-size: calc(var(--font-size-base) * 0.92); font-weight: 600; } /* Table header spacing */ table { margin: 0 0 0.5em 0; } /*ul.article-group__link-list { margin-left: 1em; margin-bottom: 0px; } .article-group__link-list li { list-style: disclosure-closed; padding-bottom: 0.25rem; padding-left: 0.25rem; } .article-group__link-list li::marker { color: var(--brand-primary); }*/ /* --- LINKS --- */ @media screen { /* when clicking an internal link (#), add some margin on top of the destination */ h1, h2, h3, h4, h5, h6, li { scroll-margin-top: 85px; } } /* --- LISTS --- */ /* LIST ITEMS */ .wp-block-list-sublist { list-style-type: circle; } .related-articles { /* Links under article that are related */ margin-top: 24px; margin-bottom: .5em; } /* --- FOOTER --- */ .footer a { color: var(--footer-text, var(--neutral-0)); } .footer a:hover { text-decoration: none; } /* =========================================================== * 1.2 OTHER * ==========================================================*/ /* === FRAMEWORK VARIABLES === */ :root { /* Gap */ --gap-xs: 8px; --gap-s: 16px; --gap-m: 32px; --gap-l: 64px; --gap-xl: 96px; /* Color palette */ /* --color-primary: #007acc; --color-secondary: #f8f9fa; --color-accent: #e94e77; --color-background: #ffffff; --color-text-primary: #222222; --color-text-secondary: #555555; --color-border: #cccccc; /* Width */ --max-text-width: 55ch; /* for readability text lines won´t be wider than */ /* Spacing */ /* Padding */ --padding-xs: 8px; --padding-s: 16px; --padding-m: 32px; --padding-l: 64px; --padding-xl: 96px; /* do not change custom padding values below */ --takeaways-padding: 16px; /* Margin */ --margin-xs: 8px; --margin-s: 16px; --margin-m: 32px; --margin-l: 64px; --margin-xl: 96px; /* do not change custom margin values below */ --sidebar-margin: 1em; --blog-card-title-margin: 0.7em; /* --spacing-small: 8px; --spacing-medium: 16px; --spacing-large: 32px; /* Border radius */ --border-radius-s: 3px; --border-radius-m: 7px; --border-radius-d: 14px; /*--border-radius-l: 14px; /*--border-radius-xl: 14px; /* Shadows */ /* --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.15); /* Breakpoints */ /* --breakpoint-mobile: 480px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px;*/ } html { scroll-behavior: smooth !important; } /*@media (max-width: 767px) { body { font-size: 17px; /* Larger font on tablets and up */ /* } } @media (min-width: 768px) { body { font-size: 18px; /* Larger font on tablets and up */ /* } }*/ /*@media (min-width: 1024px) { body { font-size: 20px; /* Larger font on desktops and up */ /*max-width: 1200px; /* Optional max width for readability */ /* margin: 0 auto; /* Center content horizontally */ /* } }*/ /*Improve accessibility with visible focus states for keyboard users:*/ :focus { outline: 3px solid var(--brand-primary); /* a visible purple outline */ outline-offset: 2px; } /* -- IMAGE ADJUSTMENTS -- */ [class*=wp-image-] { border-radius: 7px; } /* -- LOGO SETTINGS -- */ .logo { fill: var(--logo-color-on-bg); } @media (max-width: 768px) { /* CSS in here for mobile only */ .logo { --logo-width: 230px; fill: var(--logo-color-on-menu); /* --logo-text-size: 13.5px; --logo-text-line-height: 15.85px; --padding-block-start: 48px; --padding-block-end: 22.5px;*/ } .logo-footer { --logo-width: 230px; } } @media (min-width: 769px) and (max-width: 1024px) { /* CSS in here for tablet only */ .logo { --logo-width: 360px; /* --logo-text-size: 13.5px; --logo-text-line-height: 15.85px; --padding-block-start: 48px; --padding-block-end: 22.5px;*/ } .logo-footer { --logo-width: 300px; } } @media (min-width: 1025px) { /* CSS in here for desktop only */ .logo { --logo-width: 370px; /* --logo-text-size: 13.5px; --logo-text-line-height: 15.85px; --padding-block-start: 48px; --padding-block-end: 22.5px;*/ } .logo-footer { --logo-width: 300px; } } /* -- ACCORDION -- */ /*[class*=gb-accordion__item-] { border: 1px solid var(--neutral-100) !important; border-radius: 7px; background-color: var(--neutral-0); opacity: .6; } [class*=gb-accordion__item-]:is(:hover, :focus, :active), .gb-accordion__item-open { opacity: 1; } */ /* =========================================================== * 4. CONTENT * ==========================================================*/ :root { --figure-max-width-all: 500px; } img { filter: var(--image-filter); /*filter: brightness(1.1) contrast(1.05); */ } .gb-loop-item-ae9de4a9::after { background-image: linear-gradient( to right, rgba(125, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0) 20%, rgba(255, 0, 0, 0) 80%, rgba(125, 0, 0, 0.2) 100% ) !important; } @media screen and (max-width: 600px) { .edac-highlight-panel { width: 50px; /* fix to big width of the edac button that overlays website content */ } }