/* ==========================================================================
Andreaskerk — vormtaal in WordPress
Hoort bij de plugin "Andreaskerk huisstijl" (plugins custom-made).
DIT BESTAND IS BEWUST KLEIN.
Alles wat Elementor zelf kan, wordt in Elementor ingesteld: kleuren en
typografie in de globale kit, en per element de achtergrond, radius,
schaduw, marges en breekpunten. Hier staan alleen de dingen waar Elementor
géén instelling voor heeft. Groeit dit bestand voorbij een paar honderd
regels, dan is er iets in Elementor over het hoofd gezien.
Elke regel hangt aan een klasse die je in Elementor invult bij
Geavanceerd → CSS-klassen. Zo blijft zichtbaar waar het vandaan komt.
Bron: website/assets/css/huisstijl-wp.css. De plugin verscheept een kopie.
========================================================================== */
:root{
--ak-paars: #4E1668;
--ak-paars-diep: #33093F;
--ak-paars-licht: #7B36A3;
--ak-rood: #E63329;
--ak-oranje: #F5821F;
--ak-geel: #FBD433;
--ak-rood-tekst: #C4241B;
--ak-lijn: #EFE4D8;
--ak-kop: #2B1B4B;
}
/* --------------------------------------------------------------------------
1. Oranje streepje onder een sectiekop klasse: ak-kop
Elementor heeft geen ::after op de Heading-widget. Kan ook met een losse
Divider-widget per kop, maar dat is vijftien extra widgets voor één regel.
-------------------------------------------------------------------------- */
.ak-kop .elementor-heading-title{position:relative;padding-bottom:16px}
.ak-kop .elementor-heading-title::after{
content:"";position:absolute;left:0;bottom:0;
width:62px;height:4px;border-radius:3px;background:var(--ak-oranje);
}
.ak-kop--midden .elementor-heading-title::after{left:50%;transform:translateX(-50%)}
.ak-kop--geel .elementor-heading-title::after{background:var(--ak-geel)}
/* --------------------------------------------------------------------------
2. Paars verloop met drie kleurstops klasse: ak-paars
Elementor kent maar twee stops. Zet in Elementor het verloop met twee
stops (dan klopt het beeld in de editor) en laat deze regel de derde
toevoegen. !important is nodig omdat Elementor per element schrijft met
hogere specificiteit; dat is hier bewust en staat alleen op deze regel.
-------------------------------------------------------------------------- */
.ak-paars:not(.elementor-motion-effects-element-type-background){
background-image:linear-gradient(130deg,var(--ak-paars-diep),var(--ak-paars) 55%,var(--ak-paars-licht)) !important;
}
.ak-paars--zacht:not(.elementor-motion-effects-element-type-background){
background-image:linear-gradient(120deg,var(--ak-paars-diep),var(--ak-paars) 45%,var(--ak-paars-licht)) !important;
}
/* --------------------------------------------------------------------------
3. Vlamtekst in de hero klasse: ak-vlamtekst
Zet in de Heading-widget het woord tussen
Andreaskerk.
-------------------------------------------------------------------------- */
.ak-vlamtekst{
background:linear-gradient(96deg,var(--ak-rood) 4%,var(--ak-oranje) 52%,var(--ak-geel) 96%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
/* Terugval: browsers zonder background-clip krijgen gewoon oranje tekst. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.ak-vlamtekst{color:var(--ak-oranje);-webkit-text-fill-color:var(--ak-oranje)}
}
/* --------------------------------------------------------------------------
4. Formulieren: fout- en succesbeeld klasse: ak-form
De Xpro WPForms-widget stelt velden, labels, focus en de verzendknop
allemaal native in. Alleen de foutmeldingen en het sterretje bij verplichte
velden hebben geen instelling.
-------------------------------------------------------------------------- */
.ak-form .wpforms-required-label{color:var(--ak-rood-tekst);font-weight:700}
.ak-form .wpforms-error{
color:var(--ak-rood-tekst);font-weight:600;font-size:.875rem;
margin-top:6px;display:flex;flex-direction:row;align-items:flex-start;gap:7px;
}
.ak-form input.wpforms-error,
.ak-form textarea.wpforms-error,
.ak-form select.wpforms-error{border-color:var(--ak-rood-tekst) !important}
.ak-form .wpforms-confirmation-container-full{
background:#EAF5DF;border:1px solid #B9DE96;border-radius:10px;
padding:24px 26px;color:#2F5410;
}
.ak-form .wpforms-confirmation-container-full p{margin:0}
/* Op een paars vlak wordt het sterretje geel; rood op paars is onleesbaar. */
.ak-paars .ak-form .wpforms-required-label,
.ak-form--op-paars .wpforms-required-label{color:var(--ak-geel)}
/* --------------------------------------------------------------------------
5. Kleine telefoons
Elementor heeft geen breekpunt onder 'mobile'. Onder 400px is er te weinig
ruimte voor logo + menuknop naast elkaar, en onder 380px past het aantal
naast een tabtitel niet meer.
-------------------------------------------------------------------------- */
@media (max-width:400px){
.xtb-header .e-con-inner,
.xtb-header .e-con > .e-con-inner{gap:12px !important}
.xpro-menu-toggle{padding:13px 14px !important}
}
/* --------------------------------------------------------------------------
6. Toegankelijkheid
Astra en Elementor zetten geen zichtbare focusring die past bij de
vormtaal. Deze regel geldt sitebreed en hoeft nergens aangehangen te worden.
-------------------------------------------------------------------------- */
:focus-visible{outline:3px solid var(--ak-oranje);outline-offset:3px;border-radius:4px}
/* Lange woorden mogen afbreken in plaats van uit hun kader te lopen. */
h1,h2,h3,h4,h5,h6,p,li{overflow-wrap:break-word}
/* --------------------------------------------------------------------------
7. Sluier over de herofoto klasse: ak-hero
Elementor kent maar twee kleurstops voor een achtergrondbedekking. De hero
heeft er vier nodig: crème links waar de tekst staat, doorzichtig rechts
waar het gebouw te zien is. Zet in Elementor de bedekking met twee stops
(dan klopt het beeld in de editor); deze regel maakt er vier van.
!important omdat Elementor per element schrijft met hogere specificiteit.
-------------------------------------------------------------------------- */
.ak-hero::before{
background-image:linear-gradient(90deg,
rgba(254,249,243,.90) 0%,
rgba(254,249,243,.78) 32%,
rgba(254,249,243,.34) 55%,
rgba(254,249,243,0) 74%) !important;
}
@media (max-width:1024px){
.ak-hero::before{
background-image:linear-gradient(90deg,
rgba(254,249,243,.94) 0%,
rgba(254,249,243,.86) 40%,
rgba(254,249,243,.5) 70%,
rgba(254,249,243,.2) 100%) !important;
}
}
/* --------------------------------------------------------------------------
8. Foto die de hoogte van zijn kolom vult klasse: ak-vulhoogte
De Afbeelding-widget kent alleen een hoogte in vaste eenheden, geen 100%.
In een rij naast een tekstkolom moet de foto meegroeien met de buurman.
object-fit staat al in Elementor zelf ingesteld.
-------------------------------------------------------------------------- */
.ak-vulhoogte,
.ak-vulhoogte .elementor-widget-container,
.ak-vulhoogte img{height:100%}
@media (max-width:767px){
.ak-vulhoogte,
.ak-vulhoogte .elementor-widget-container,
.ak-vulhoogte img{height:auto}
.ak-vulhoogte img{aspect-ratio:8/5;object-fit:cover}
}
/* --------------------------------------------------------------------------
9. Vinklijst met groene bolletjes klasse: ak-vinklijst
De Icoonlijst-widget kan een icoonkleur en -grootte instellen, maar geen
gevulde cirkel eromheen. Zet de klasse op de widget; de kleur van het
vinkje zelf stel je in Elementor in (wit).
-------------------------------------------------------------------------- */
.ak-vinklijst .elementor-icon-list-item{align-items:flex-start}
.ak-vinklijst .elementor-icon-list-icon{
flex:0 0 24px;width:24px;height:24px;border-radius:50%;margin-top:3px;
background:#7DC242;display:flex;align-items:center;justify-content:center;
}
.ak-vinklijst .elementor-icon-list-icon svg,
.ak-vinklijst .elementor-icon-list-icon i{width:12px;height:12px}
/* Op een paars vlak wordt het bolletje geel, net als in het ontwerp. */
.ak-paars .ak-vinklijst .elementor-icon-list-icon{background:var(--ak-geel)}
/* --------------------------------------------------------------------------
10. Knop 'naar boven' van Astra
Deze knop hoort niet bij het ontwerp maar zet het thema er zelf neer.
Hem uitzetten kan in Astra; zolang hij er staat volgt hij de vormtaal.
-------------------------------------------------------------------------- */
#ast-scroll-top{
background:var(--ak-paars);color:#fff;
border-radius:10px;width:44px;height:44px;line-height:44px;
box-shadow:0 8px 20px rgba(78,22,104,.24);
transition:background-color .18s ease,transform .18s ease;
}
#ast-scroll-top:hover{background:var(--ak-paars-licht);transform:translateY(-2px)}
/* --------------------------------------------------------------------------
11. Meelopende header
Xpro's eigen sticky-optie staat aan, maar zijn CSS hangt aan een opbouw die
deze site niet heeft: de balk bleef gewoon staan. Het ontwerp vraagt om
position:sticky met een doorschijnende crème achtergrond. Dat is twee regels.
De paarse tijdenbalk zit in WordPress binnen dezelfde header en loopt dus
mee; in het statische ontwerp staat die erbuiten en scrolt hij weg.
-------------------------------------------------------------------------- */
.xpro-theme-builder-header{position:sticky;top:0;z-index:100}
.xpro-theme-builder-header .e-con:first-child{
backdrop-filter:saturate(150%) blur(10px);
-webkit-backdrop-filter:saturate(150%) blur(10px);
}
/* --------------------------------------------------------------------------
12. Nakomertjes bij eerdere secties
Deze regels horen inhoudelijk bij 8, 9 en 4, maar staan hier bij elkaar
zodat zichtbaar blijft wat er later bij is gekomen en waarom.
-------------------------------------------------------------------------- */
/* Bij 8: zonder een hoogte in Elementor schrijft die ook geen object-fit meer,
waardoor de foto werd uitgerekt in plaats van bijgesneden. */
.ak-vulhoogte img{object-fit:cover;object-position:center}
/* Bij 9: het vinkje stond te klein en niet gecentreerd in het bolletje. */
.ak-vinklijst .elementor-icon-list-icon svg,
.ak-vinklijst .elementor-icon-list-icon i{width:13px;height:13px;display:block;flex:0 0 13px}
/* Elementor zet de tekstinspringing als rechterpadding op het icoon zelf; daardoor
stond het vinkje links uit het midden. De ruimte naar de tekst komt nu van gap. */
.ak-vinklijst .elementor-icon-list-icon{padding:0 !important;line-height:0}
.ak-vinklijst .elementor-icon-list-icon svg,
.ak-vinklijst .elementor-icon-list-icon i{margin:0}
.ak-vinklijst .elementor-icon-list-item{gap:13px}
/* Bij 4: het ontwerp zet veld en verzendknop naast elkaar, WPForms zet ze onder
elkaar. Xpro heeft daar geen instelling voor. */
@media (min-width:761px){
.ak-form--inline .wpforms-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
.ak-form--inline .wpforms-form .wpforms-field-container{flex:1 1 220px;min-width:0}
.ak-form--inline .wpforms-form .wpforms-submit-container{flex:0 0 auto;padding:0}
}
/* WPForms zet 15px boven en onder elk veld via een id-selector; die wint van een
gewone klasse, vandaar !important. Zonder dit staat de knop 15px te laag. */
.ak-form--inline .wpforms-form .wpforms-field{padding:0 !important;margin:0 !important}
.ak-form--inline .wpforms-form .wpforms-submit-container{margin:0 !important;padding:0 !important}
/* Xpro stelt de verzendknop wel in, maar kent geen hoverkleur. */
.ak-form .wpforms-form button[type=submit]:hover{background-color:var(--ak-geel);color:#3A1C00}
/* Tekstlinks krijgen bij hover een onderstreping, zoals .tekstlink in het ontwerp. */
.elementor-widget-button .elementor-button:hover .elementor-button-text{text-decoration:underline}
/* --------------------------------------------------------------------------
13. Het uitschuifmenu boven de tijdenbalk
De blur op de bovenste headerbalk maakt daar een eigen stapelcontext van.
Het uitschuifpaneel van Xpro zit in die balk en kan er dus niet meer
bovenuit komen, terwijl de paarse tijdenbalk als latere buur wel bovenop
kwam: die sneed dwars door het menu en verstopte de sluitknop.
Door de bovenste balk zelf hoger te leggen komt zijn hele inhoud,
inclusief het paneel, weer boven de tijdenbalk.
-------------------------------------------------------------------------- */
.xpro-theme-builder-header-nav .elementor > .e-con:first-child{position:relative;z-index:3}
.xpro-theme-builder-header-nav .elementor > .e-con:nth-child(2){position:relative;z-index:1}
/* --------------------------------------------------------------------------
14. Kruimelpad
Astra geeft losse links een eigen hoverkleur (magenta). Het ontwerp zet
kruimels in de gewone tekstkleur en laat ze bij hover paars worden.
Een hoverkleur kan niet als inline stijl mee, vandaar deze klasse.
-------------------------------------------------------------------------- */
/* Astra onderstreept en kleurt links binnen .entry-content met een selector
van twee klassen; vandaar dat hier .elementor en :any-link meedoen. */
.elementor .ak-kruimels a:any-link{color:#5A5570;text-decoration:none}
.elementor .ak-kruimels a:any-link:hover,
.elementor .ak-kruimels a:any-link:focus-visible{color:var(--ak-paars)}
.ak-kruimels .ak-kruis{color:var(--ak-oranje)}
/* --------------------------------------------------------------------------
15. Containers die zelf een link zijn
Elementor kan een container als uitvoeren, zodat een hele tegel
klikbaar is zoals in het ontwerp. Astra onderstreept dan de hele inhoud
en kleurt hem als link; deze regel laat de eigen opmaak weer gelden.
-------------------------------------------------------------------------- */
.elementor a.e-con:any-link,
.elementor a.e-con:any-link:hover,
.elementor a.e-con:any-link:focus{text-decoration:none;color:inherit}
/* --------------------------------------------------------------------------
16. Laatste alinea in een tekstblok
Astra geeft elke alinea een ondermarge. Bij het laatste kind van een
tekstwidget telt die marge op bij de tussenruimte die de container zelf
al regelt, waardoor kop en inhoud verder uit elkaar komen te staan dan in
het ontwerp. Het ontwerp doet hetzelfde met '.paneel > :last-child'.
.elementor staat ervoor omdat Astra's regel '.entry-content p' anders wint.
-------------------------------------------------------------------------- */
.elementor .elementor-widget-text-editor > :last-child,
.elementor .elementor-widget-text-editor > .elementor-widget-container > :last-child{margin-bottom:0}
/* --------------------------------------------------------------------------
17. Accordeon als losse kaarten, met cirkel-icoon rechts klasse: ak-accordion-kaarten
Het accordion-widget van Elementor heeft geen instelling voor achtergrond/
radius/schaduw op het hele item (alleen op de kop of alleen op de inhoud
los), en geen achtergrond-cirkel achter het plus/min-icoon. Titel en term
op een eigen regel kan wél native: de titel wordt onge-escaped uitgevoerd,
dus een in het titelveld werkt gewoon als HTML.
-------------------------------------------------------------------------- */
.ak-accordion-kaarten .elementor-accordion{display:flex;flex-direction:column;gap:14px}
.ak-accordion-kaarten .elementor-accordion-item{
background:#FFFFFF;border-radius:7px;box-shadow:0 10px 30px rgba(43,27,75,.07);
overflow:hidden;border:0!important;
}
.ak-accordion-kaarten .elementor-accordion-item+.elementor-accordion-item{border-block-start:0!important}
.ak-accordion-kaarten .elementor-tab-content{border-block-start:0!important}
.ak-accordion-kaarten .elementor-accordion-icon{width:32px}
.ak-accordion-kaarten .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon .elementor-accordion-icon-closed,
.ak-accordion-kaarten .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{
display:flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;background:#F9F1E8;
}
.ak-accordion-kaarten .elementor-tab-title.elementor-active .elementor-accordion-icon-opened{background:#F5821F}
.ak-accordion-kaarten .elementor-accordion-icon-closed svg,
.ak-accordion-kaarten .elementor-accordion-icon-opened svg{width:15px;height:15px}
.ak-accordion-kaarten .term{display:block;font-size:.875rem;font-weight:400;margin-top:4px;color:#5A5570}