/* Theme Name: BCE Eenpitter Starter Template: kadence Author: Cloudwise Version: 1.0.0 Text Domain: bce-theme License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /** * ================================================================ * TYPOGRAFIE-"SCHAKELAARS" — de tussenlaag die het !important-probleem * oplost * ================================================================ * Elke h1-h6-regel verwijst naar een LOSSE variabele (--h1-size, enz.) * i.p.v. rechtstreeks naar variables.css — die kan daarna overal (een * sectie, een media query) herdefinieerd worden ZONDER ooit !important * nodig te hebben. CSS-variabelen "vechten" niet op specificiteit zoals * gewone eigenschappen — een dichterbij-gedefinieerde waarde wint * gewoon via normale overerving. * * ELK NIVEAU HEEFT NU VIER EIGEN SCHAKELAARS (size/line-height/ * letter-spacing/font-weight) — dit ontwerp gebruikt namelijk per * kop-niveau een andere combinatie, niet meer overal dezelfde * letter-spacing/font-weight zoals in een eerdere versie van dit * bestand. * * Voorbeeld: de hero-titel op de homepage moet Display 1 zijn i.p.v. * een gewone H1. Dat regel je zo, GEEN !important nodig: * * .hero-section { * --h1-size: var(--bce-font-size-display1); * --h1-line-height: var(--bce-line-height-display1); * --h1-letter-spacing: var(--bce-letter-spacing-display1); * --h1-weight: var(--bce-font-weight-display1); * } */ :root { --h1-size: var(--bce-font-size-h1); --h1-line-height: var(--bce-line-height-h1); --h1-letter-spacing: var(--bce-letter-spacing-h1); --h1-weight: var(--bce-font-weight-h1); --h2-size: var(--bce-font-size-h2); --h2-line-height: var(--bce-line-height-h2); --h2-letter-spacing: var(--bce-letter-spacing-h2); --h2-weight: var(--bce-font-weight-h2); --h3-size: var(--bce-font-size-h3); --h3-line-height: var(--bce-line-height-h3); --h3-letter-spacing: var(--bce-letter-spacing-h3); --h3-weight: var(--bce-font-weight-h3); --h4-size: var(--bce-font-size-h4); --h4-line-height: var(--bce-line-height-h4); --h4-letter-spacing: var(--bce-letter-spacing-h4); --h4-weight: var(--bce-font-weight-h4); --h5-size: var(--bce-font-size-h5); --h5-line-height: var(--bce-line-height-h5); --h5-letter-spacing: var(--bce-letter-spacing-h5); --h5-weight: var(--bce-font-weight-h5); --h6-size: var(--bce-font-size-h6); --h6-line-height: var(--bce-line-height-h6); --h6-letter-spacing: var(--bce-letter-spacing-h6); --h6-weight: var(--bce-font-weight-h6); --display1-size: var(--bce-font-size-display1); --display1-line-height: var(--bce-line-height-display1); --display1-letter-spacing: var(--bce-letter-spacing-display1); --display1-weight: var(--bce-font-weight-display1); --display2-size: var(--bce-font-size-display2); --display2-line-height: var(--bce-line-height-display2); --display2-letter-spacing: var(--bce-letter-spacing-display2); --display2-weight: var(--bce-font-weight-display2); } /** * ================================================================ * BASIS-TYPOGRAFIE — leunt volledig op variables.css * ================================================================ * BEWUST met !important, maar nu ALLEEN hier, op deze ene, fundamentele * plek — niet meer nodig bij elke latere uitzondering (zie de * schakelaar-toelichting hierboven). Kadence's eigen CSS gebruikt vaak * specifiekere selectors (bv. .entry-content h1) die anders zouden * winnen van een simpele h1{}-regel. */ /** * SCOPE, BEWUST: :where(body:not(.wp-admin), .editor-styles-wrapper) * i.p.v. kaal "h1" — anders lekken deze stijlen door naar de WordPress- * beheeromgeving zelf (werkbalken/panelen zitten ook gewoon in een * -tag). .editor-styles-wrapper is Gutenberg's eigen class rond * ALLEEN het content-bewerkgebied (waar we deze stijlen WEL willen), * wp-admin op de identificeert altijd een beheerpagina (waar we * ze NIET willen). :where() telt bewust niet mee in de specificiteit, * dus dit heeft geen invloed op de rest van onze !important-opzet. */ :where(body:not(.wp-admin) .editor-styles-wrapper) h1, :where(body:not(.wp-admin) .editor-styles-wrapper) h2, :where(body:not(.wp-admin) .editor-styles-wrapper) h3, :where(body:not(.wp-admin) .editor-styles-wrapper) h4, :where(body:not(.wp-admin) .editor-styles-wrapper) h5, :where(body:not(.wp-admin) .editor-styles-wrapper) h6 { font-family: var(--bce-font-heading) !important; color: var(--bce-color-text) !important; margin: 0 0 var(--bce-space-sm) !important; } :where(body:not(.wp-admin) .editor-styles-wrapper) h1 { font-size: var(--h1-size) !important; line-height: var(--h1-line-height) !important; letter-spacing: var(--h1-letter-spacing) !important; font-weight: var(--h1-weight) !important; } :where(body:not(.wp-admin) .editor-styles-wrapper) h2 { font-size: var(--h2-size) !important; line-height: var(--h2-line-height) !important; letter-spacing: var(--h2-letter-spacing) !important; font-weight: var(--h2-weight) !important; } :where(body:not(.wp-admin) .editor-styles-wrapper) h3 { font-size: var(--h3-size) !important; line-height: var(--h3-line-height) !important; letter-spacing: var(--h3-letter-spacing) !important; font-weight: var(--h3-weight) !important; } :where(body:not(.wp-admin) .editor-styles-wrapper) h4 { font-size: var(--h4-size) !important; line-height: var(--h4-line-height) !important; letter-spacing: var(--h4-letter-spacing) !important; font-weight: var(--h4-weight) !important; } :where(body:not(.wp-admin) .editor-styles-wrapper) h5 { font-size: var(--h5-size) !important; line-height: var(--h5-line-height) !important; letter-spacing: var(--h5-letter-spacing) !important; font-weight: var(--h5-weight) !important; } :where(body:not(.wp-admin) .editor-styles-wrapper) h6 { font-size: var(--h6-size) !important; line-height: var(--h6-line-height) !important; letter-spacing: var(--h6-letter-spacing) !important; font-weight: var(--h6-weight) !important; } /** * MOBIEL — bevestigde Figma-waarden (afgelezen op het TYPOGRAPHY-canvas * in Brand Guide, kolom "Mobile"/Figma's mobiele font-size-variabelen). * Line-height blijft procentueel gelijk aan desktop (Figma definieert * geen apart mobiel line-height); letter-spacing is herberekend met * dezelfde %-verhouding als desktop, tegen de kleinere mobiele * font-size (H4-H6 hebben sowieso altijd letter-spacing normal). */ @media (max-width: 782px) { :root { --h1-size: var(--bce-font-size-h1-mobile); --h1-line-height: var(--bce-line-height-h1); --h1-letter-spacing: var(--bce-letter-spacing-h1-mobile); --h2-size: var(--bce-font-size-h2-mobile); --h2-line-height: var(--bce-line-height-h2); --h2-letter-spacing: var(--bce-letter-spacing-h2-mobile); --h3-size: var(--bce-font-size-h3-mobile); --h3-line-height: var(--bce-line-height-h3); --h3-letter-spacing: var(--bce-letter-spacing-h3-mobile); --h4-size: var(--bce-font-size-h4-mobile); --h4-line-height: var(--bce-line-height-h4); --h5-size: var(--bce-font-size-h5-mobile); --h5-line-height: var(--bce-line-height-h5); --h6-size: var(--bce-font-size-h6-mobile); --h6-line-height: var(--bce-line-height-h6); --display1-size: var(--bce-font-size-display1-mobile); --display1-line-height: var(--bce-line-height-display1); --display1-letter-spacing: var(--bce-letter-spacing-display1-mobile); --display2-size: var(--bce-font-size-display2-mobile); --display2-line-height: var(--bce-line-height-display2); --display2-letter-spacing: var(--bce-letter-spacing-display2-mobile); } } .carmel-display-1 { font-family: var(--bce-font-heading) !important; font-size: var(--display1-size) !important; line-height: var(--display1-line-height) !important; letter-spacing: var(--display1-letter-spacing) !important; font-weight: var(--display1-weight) !important; } .carmel-display-2 { font-family: var(--bce-font-heading) !important; font-size: var(--display2-size) !important; line-height: var(--display2-line-height) !important; letter-spacing: var(--display2-letter-spacing) !important; font-weight: var(--display2-weight) !important; } /** * VOORBEELD — hoe je de hero-H1 op Display 1 zet i.p.v. gewone H1: * gewoon deze class op de hero-SECTIE (niet op de kop zelf). */ .carmel-hero-uses-display1 { --h1-size: var(--display1-size); --h1-line-height: var(--display1-line-height); --h1-letter-spacing: var(--display1-letter-spacing); --h1-weight: var(--display1-weight); } :where(body:not(.wp-admin), .editor-styles-wrapper), :where(body:not(.wp-admin), .editor-styles-wrapper) p { font-family: var(--bce-font-body) !important; font-weight: var(--bce-font-weight-regular) !important; font-size: var(--bce-font-size-body-large) !important; letter-spacing: var(--bce-letter-spacing-body-large) !important; line-height: var(--bce-line-height-body-large) !important; color: var(--bce-color-text) !important; } /* Kleinere tekst-varianten — ook hier weer eigen classes, want er bestaat geen apart HTML-element per formaat. */ .carmel-text-body-medium { font-size: var(--bce-font-size-body-medium) !important; } .carmel-text-caption { font-size: var(--bce-font-size-caption) !important; } .carmel-text-eyebrow { font-size: var(--bce-font-size-eyebrow) !important; } /** * ================================================================ * KNOPPEN — leunt volledig op variables.css * ================================================================ * Target Kadence's eigen, al-bekende knop-classes (bevestigd werkend * bij een eerder project) i.p.v. een generieke "button"-selector. */ .kb-button.wp-block-button__link, .wp-block-search__button { font-family: var(--bce-font-heading) !important; font-size: var(--bce-font-size-button-large) !important; font-weight: var(--bce-font-weight-medium) !important; border-radius: var(--bce-btn-radius) !important; padding: var(--bce-btn-padding) !important; } .kb-button.wp-block-button__link { background-color: var(--bce-color-btn-primary-bg) !important; color: var(--bce-color-btn-primary-text) !important; } .kb-button.wp-block-button__link.button-style-secondary { background-color: var(--bce-color-btn-secondary-bg) !important; color: var(--bce-color-btn-secondary-text) !important; border: 1px solid var(--bce-color-btn-secondary-border) !important; } #main-header .site-header-row-layout-contained{ margin-top:20px; } .site-main-header-wrap .site-header-row-container-inner{ border-radius:8px; } .bighero .wp-block-search .wp-block-search__button{ width:48px; height:48px; display:flex; align-items: center; justify-content: center; } .wp-block-kadence-rowlayout { margin-bottom: 7.5rem; } .wp-block-kadence-rowlayout .wp-block-kadence-rowlayout { margin-bottom: 0; } .wp-block-kadence-rowlayout.no-row-margin { margin-bottom: 0; } .site-top-header-inner-wrap nav.header-navigation ul .sub-menu{ background-color:var(--bce-color-white) !important; border-radius: 0 0 8px 8px; } .colorbackgroundrow > div{ padding: 0 !important } footer.site-footer{ padding:0px; .wp-block-kadence-rowlayout{ margin-bottom:34px; } .linklist{ a{ display:block; width:100%; position: relative; color: var(--bce-color-text-light); font-size:20px; &:after{ content:''; background-image:url('images/arrow.svg'); background-repeat: no-repeat; background-size:12px 12px; background-position: center; width:32px; height:32px; position: absolute; right: 12px; top:-3px; border-radius: 8px; border: 1px solid var(--bce-color-border-on-dark); transition: 0.3s; } &:hover{ text-decoration: none; &:after{ right:0; } } } p{ height: 32px; display: flex; align-items: center; justify-content: center; } } } @media(min-width:1024px){ footer.site-footer{ padding:16px; } } @media(max-width:1024px){ footer.site-footer p{ font-size:16px; } } @media(max-width:1024px){ .wp-block-kadence-rowlayout { margin-bottom: 80px; } .zoekboxheader .wp-block-search__inside-wrapper{ width: 75% !important } } @media(max-width:700px){ .zoekboxheader .wp-block-search__inside-wrapper{ width: 100% !important } } #mobile-header{ margin-top:16px; } @media(max-width:1024px){ .footer-widget-area-inner > .widget_block.widget_text:first-child p{ border-bottom:1px solid var(--bce-color-white); padding-bottom:16px; } } @media(min-width:1024px){ .herowrapper{ margin-top:-133px !important; } } @media(max-width:1200px){ .herowrapper p{ font-size:18px; line-height: 130%; letter-spacing: -0.18px; } } nav#site-navigation{ height:100%; ul:not(.sub-menu) > li{ height:100%; border-left:0.5px solid var(--bce-color-border-light); display: flex; align-items: center; padding-left:8px; padding-right:8px; &:last-child{ border-right:0.5px solid var(--bce-color-border-light); } } } .header-navigation ul ul.sub-menu, .header-navigation ul ul.submenu{ box-shadow: none !important; } .carmel-menu-hover-link{ margin-bottom:16px; font-size:20px; line-height: 24px; text-decoration: none; color:rgba(0, 0, 0, 1); &:last-child{ margin-bottom:0; } } .bighero{ margin-top: -104px; margin-bottom: 90px !important; } @media(max-width:1025px) { .carmel-menu-hover-link{ margin-bottom:16px; font-size:16px; } #mobile-secondary-site-navigation{ padding: 0 24px; } .mobile-navigation ul li .sub-menu{ border-bottom: 0px solid var(--bce-color-border-light); border-top: 0px solid var(--bce-color-border-light); padding:16px; a{ font-weight:400; font-size:16px; line-height:1.2; padding:0 .5em; } } .bighero{ margin-top: -90px; margin-bottom: 90px !important; } } @media(max-width:768px) { .bighero{ margin-top: -54px; margin-bottom: 90px !important; } .hide-on-mobile{ display:none; } } ul.sub-menu.show-drawer{ padding-left:0 !important; } .header-menu-container a{ text-decoration: none; } .mobile-drawer-content > div:first-child{ background-color:var(--bce-color-white); border-radius:0 0 16px 16px; padding:16px; } #mobile-drawer.popup-drawer .drawer-content{ padding:0 16px ; } div#mobile-drawer .drawer-header{ background-color:var(--bce-color-white); width:calc(100% - 32px); margin:0 auto; border-radius:16px 16px 0 0; } .drawer-inner{ padding-top:16px; } .wp-singular .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button{ border:0; } .wp-singular .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, .mobile-navigation ul li:not(.menu-item-has-children):last-child a{ border:0; } #mobile-secondary-site-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, #mobile-secondary-site-navigation ul li:not(.menu-item-has-children):last-child a{ border:none; } header.site-header:has(.menu-item--toggled-on){ z-index:4; } ul#mobile-menu > li{ border-bottom:1px solid var(--bce-color-border-light); } .mobile-navigation ul li a header.site-header:has(.menu-item--toggled-on) + main#inner-wrap:before{ content:''; width:100vw; height:100vh; background-color:rgba(0,0,0,0.6); top:0; left:0; position:absolute; z-index:3; position: fixed; } /* zoekresultaten */ .search-results .site-main{ padding:120px 0 100px; max-width:900px; margin:0 auto } .search-results .site-main h1{ text-align: center; margin-bottom:40px; } .search-results .site-main .entry-list-item article{ padding:40px; border-radius:24px; box-shadow:none } .search-results .site-main .entry-list-item article .entry-content-wrap{ padding:0; } .search-results .site-main .entry-list-item article h2{ margin-bottom:24px; } .search-results .site-main .entry-list-item article .wp-element-button{ padding:0; display: flex; border-radius:8px; background-color:var(--bce-color-btn-accent); color:var(--bce-color-white); padding:10px; } #main-header .main-navigation .primary-menu-container > ul > li.menu-item > a{ padding-left:16px; padding-right:16px; } /* infohub */ .carmel-infohub__content section{ padding:40px; background-color:var(--bce-color-white); border-radius:24px; } .carmel-infohub__nav{ padding:40px; background-color:var(--bce-color-white); border-radius:24px; } .carmel-infohub__nav ul{ padding-left:0 !important; } @media(max-width:1025px){ .iconmenu{ width: 32px; height: 32px; flex-shrink: 0; background-image: url('/wp-content/themes/ccg/images/loginicon.svg'); background-repeat: no-repeat; background-size: 20px 20px; background-position: center; display: flex; align-items: center; justify-content: center; padding:16px; } .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered, .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button, .mobile-toggle-open-container #mobile-toggle, .iconmenu{ padding:6px; border-radius: 8px; border: 0.5px solid rgba(0, 0, 0, 0.3); } .mobile-toggle-open-container #mobile-toggle{ padding:8px; } .search-toggle-open-container .search-toggle-open .search-toggle-icon{ font-size:20px !important; } } .knop-terug{ svg{ path{ fill:currentColor } } span{ font-weight:400; } } /* team */ .single-content .carmel-team-slider__name{ font-weight:500; font-size:32px; } /* kalender */ .simcal-calendar{ .simcal-calendar-head{ background-color:var(--bce-color-white); } .simcal-nav h3{ color: var(--bce-color-text); text-align: center; font-family: Roboto; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; } .simcal-nav-button i{ color: var(--bce-color-text); font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } .simcal-week-day { color: var(--bce-color-text); text-align: center; font-family: Roboto; font-size: 11px; font-style: normal; font-weight: 500; line-height: normal; padding: 10px 0; } .simcal-day-label{ color: var(--bce-color-text) !important; text-align: right; font-family: Roboto; font-size: 12px; font-style: normal; font-weight: 500; line-height: normal; background-color:var(--bce-color-white) !important } .simcal-event-title{ color: var(--bce-color-text); font-family: Roboto; font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; } } .entry-content .simcal-default-calendar-grid .simcal-day{ height: 118px; min-height: 118px; padding: 8px 8px 16px 8px !important; gap: 4px; flex: 1 0 0; background-color:var(--bce-color-white) !important; > div{ min-height:118px !important } } .entry-content .simcal-default-calendar-grid .simcal-event, .entry-content .simcal-default-calendar-grid.simcal-default-calendar-light .simcal-event{ border-bottom:0; } /* nieuws slider */ .carmel-news-slider__meta{ .carmel-news-slider__badge-dot{ background-color:var(--bce-color-secondary-groen); } } .cta-pattern, .cta-pattern-wide{ h2{ letter-spacing: -3.2px; font-weight: 700; line-height: 100%; font-size:64px; } h3{ letter-spacing: -3.2px; font-weight: 700; line-height: 100%; font-size:64px; } > div{ p{ letter-spacing: -0.24px; line-height: 130%; font-weight: 400; margin-bottom:24px !important; } } } @media(max-width:1024px){ .cta-pattern{ h3{ letter-spacing: -2px; font-size:40px; } h2{ letter-spacing: -2px; font-size:40px; } > div{ p{ letter-spacing: -0.18px; font-size:18px; } } } } /** * Split-knop: standaard Kadence-knop, met een losse, ronde * icoon-cirkel als CSS-pseudo-element erachteraan — geen apart block, * geen twee losse knoppen die uit elkaar kunnen raken. Werkt op ELKE * gewone Kadence Advanced Button, gewoon deze class toevoegen via * "Additional CSS Class(es)". * * LET OP: dit "split button met cirkel-icoon"-patroon komt uit het * vorige (Carmel) thema — in de BFF/Bonhoeffer Figma-file is dit * component niet teruggevonden (de knoppen daar zijn simpele "Pill"- * knoppen met een inline pijl, geen losse cirkel erachteraan). Er is * dus ook geen bevestigde lichtere tint van het merk-blauw; hieronder * wordt voorlopig gewoon de normale accentkleur gebruikt. Check of dit * component überhaupt nodig is voor deze site, en zo ja, met welke * kleur/maat. */ .carmel-btn-split-icon { position: relative; padding-right: 56px !important; /* ruimte voor de cirkel rechts, zodat de knoptekst niet er overheen valt */ } .carmel-btn-split-icon::after { content: ''; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background-color: var(--bce-color-btn-accent); /* TODO: geen bevestigde lichtere tint — zie toelichting hierboven */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 6.5H11.6429M6.5 0.5L11.7929 5.79289C12.1834 6.18342 12.1834 6.81658 11.7929 7.20711L6.5 12.5' stroke='%23F5F5F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }