/* ==========================================================================
DIT IS HET BESTAND DAT DE SITE GEBRUIKT (sinds 19-10-2026)
==========================================================================
Onderliggend sjabloon j51_jasmine_pct. Deze map wordt niet overschreven als
het sjabloon j51_jasmine ooit opnieuw geinstalleerd wordt.
Het gelijknamige bestand bij j51_jasmine doet niets meer.
========================================================================== */
/* ==========================================================================
P-Coaching & Therapie · custom.css
--------------------------------------------------------------------------
Hoort op de server in:
media/templates/site/j51_jasmine/css/custom.css
Wordt geladen als in de templatestijl "Load custom.css" op Ja staat
(tabblad Custom CSS). Er is geen enkel template-bestand gewijzigd, dus
een template-update overschrijft dit werk niet.
INHOUD
1 Variabelen
2 Leesbaarheid
3 Resten van de tekstverwerker
4 Knoppen en belbare nummers
5 Toegankelijkheid
6 Kleine correcties
7 Hero
8 Ruimte onder de hero
9 Vertrouwensbalk
10 Secties en klachtingangen
11 Stappenrail "Zo gaat het"
12 Ademwerk-hub
13 Veelgestelde vragen
14 Woordwolk met tekstlinks
15 Iconen zonder Font Awesome
16 Uitklappijltjes in het menu
========================================================================== */
/* ==========================================================================
1. VARIABELEN
========================================================================== */
:root{
--pct-paars: #996699; /* huisstijl-accent -- ONGEWIJZIGD */
--pct-paars-tekst: #6E3D6B; /* zelfde familie, een tint donkerder */
--pct-plum: #4D1A47;
--pct-plum-diep: #37102F;
--pct-creme: #FFFAF7;
--pct-creme-2: #FAF1EC;
--pct-blush: #F4EAF2;
--pct-lijn: #E7D9E3;
--pct-grijs: #59525F;
--pct-grijs-licht: #867E8D;
/* Tweede accent, sinds 12-09-2026. Alles in de agenda was paars op paars:
datumblok, categoriechip en Details-knop. Groen is de tegenhanger van
paars, dus daarmee is er echt onderscheid tussen "wanneer" (datum),
"wat" (categorie) en "doen" (Details). Alleen in de agenda gebruikt. */
--pct-salie: #4A6F5D; /* knop */
--pct-salie-licht: #E9F0EB; /* vlak van het datumblok */
--pct-salie-tekst: #3C5B4B; /* tekst op dat vlak */
}
/* ==========================================================================
2. LEESBAARHEID
--------------------------------------------------------------------------
#996699 op de creme achtergrond haalt 4,35 : 1. De norm voor lopende
tekst is 4,5 : 1. Koppen blijven ongewijzigd -- voor grote tekst is de
norm 3 : 1 en daar zit het accentpaars ruim boven. Alleen de menubalk en
paarse lopende tekst gaan een tint donkerder (~8 : 1).
========================================================================== */
.hornav ul.mod-menu > li > a{
color:var(--pct-paars-tekst);
}
.item-page p span[style*="#996699"],
.item-page li span[style*="#996699"],
.module_content div span[style*="#996699"]{
color:var(--pct-paars-tekst) !important;
}
/* ==========================================================================
3. RESTEN VAN DE TEKSTVERWERKER
--------------------------------------------------------------------------
Vangnet voor gekleurde spans die uit de editor zijn blijven staan.
========================================================================== */
.item-page span[style*="#ff0000"],
.item-page span[style*="#cc99ff"],
.item-page span[style*="#ff9900"]{
background-color:transparent !important;
color:inherit !important;
}
.pct-melding{
display:block;
background:var(--pct-blush);
border-left:4px solid var(--pct-paars);
border-radius:0 8px 8px 0;
padding:12px 18px;
margin:18px 0;
color:var(--pct-paars-tekst);
}
/* ==========================================================================
4. KNOPPEN EN BELBARE NUMMERS
--------------------------------------------------------------------------
Gebruik: Tekst
========================================================================== */
.pct-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-family:Nunito, Arial, sans-serif;
font-weight:700;
font-size:16px;
line-height:1.2;
padding:14px 22px;
border-radius:10px;
border:2px solid transparent;
text-decoration:none;
transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.pct-btn:hover{ transform:translateY(-1px); text-decoration:none; }
/* De kleuren met !important: binnen een artikel wint de linkkleur van het
sjabloon anders van die van de knop, en dan staat er donkere tekst op een
donkere knop. */
.pct-btn--primary{ background:var(--pct-plum); color:#fff !important; }
.pct-btn--primary:hover{ background:#37102F; color:#fff !important; }
.pct-btn--ghost{ background:transparent; color:var(--pct-plum) !important; border-color:var(--pct-lijn); }
.pct-btn--ghost:hover{ background:var(--pct-blush); border-color:var(--pct-paars); color:var(--pct-plum) !important; }
.pct-btn--light{ background:#fff; color:var(--pct-plum) !important; }
.pct-btn--light:hover{ background:var(--pct-blush); color:var(--pct-plum) !important; }
.pct-btn-groep{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
a.pct-tel{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:var(--pct-paars-tekst);
text-decoration:none;
white-space:nowrap;
}
a.pct-tel:hover{ text-decoration:underline; text-underline-offset:3px; }
@media only screen and (max-width:767px){
.pct-btn{ width:100%; }
.pct-btn-groep{ flex-direction:column; }
}
/* ==========================================================================
5. TOEGANKELIJKHEID
========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
outline:3px solid var(--pct-paars);
outline-offset:2px;
border-radius:3px;
}
/* ==========================================================================
6. KLEINE CORRECTIES
========================================================================== */
.item-page p,
.module_content p{ line-height:1.7; }
/* ==========================================================================
7. HERO
--------------------------------------------------------------------------
Module "Hero" in positie showcase-1. Mobiel-eerst opgebouwd.
========================================================================== */
.pct-hero{
position:relative;
background:#B9C6CD;
overflow:hidden;
}
.pct-hero__img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 40%;
display:block;
margin:0;
border:0;
max-width:none; /* het template zet img{max-width:100%} */
}
/* Verloop van links naar rechts, zodat de vuurtoren rechts in zijn
eigen licht blijft staan. Op mobiel wel een gewone waas, want daar
staat de tekst over de volle breedte. */
.pct-hero__scrim{
position:absolute;
inset:0;
background:
linear-gradient(90deg,
rgba(41,12,37,.78) 0%,
rgba(41,12,37,.55) 42%,
rgba(41,12,37,.10) 72%,
rgba(41,12,37,0) 100%),
linear-gradient(180deg,
rgba(41,12,37,.28) 0%,
rgba(41,12,37,0) 40%);
}
.pct-hero__in{
position:relative;
max-width:1180px; /* zelfde breedte als .wrapper960 van het template */
margin:0 auto;
padding:56px 20px 52px; /* mobiel */
min-height:400px;
display:flex;
flex-direction:column;
justify-content:center;
}
.pct-hero__eyebrow{
font-family:Nunito, Arial, sans-serif;
font-size:11.5px;
letter-spacing:.2em;
text-transform:uppercase;
font-weight:600;
color:#DDBFD9;
margin:0 0 14px;
}
.pct-hero .pct-hero__titel{
color:#fff !important;
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:clamp(30px, 7vw, 50px);
line-height:1.18;
letter-spacing:-.01em;
max-width:17ch;
margin:0;
text-wrap:balance;
text-shadow:0 2px 20px rgba(30,8,26,.4);
}
.pct-hero__lead{
color:#F1E4EE;
font-size:clamp(17px, 2.2vw, 20px);
line-height:1.6;
margin:18px 0 0;
max-width:46ch;
text-shadow:0 1px 14px rgba(30,8,26,.45);
}
.pct-hero .pct-btn-groep{ margin:28px 0 0; max-width:340px; }
.pct-hero__meta{
margin:22px 0 0;
font-size:14.5px;
color:#E6D5E3;
display:flex;
align-items:center;
gap:9px;
}
.pct-hero__stip{
width:9px; height:9px; border-radius:50%;
background:#7FD09A; flex:none;
box-shadow:0 0 0 4px rgba(127,208,154,.25);
}
/* De knoppen in de hero staan op een donkere foto en zijn dus omgekeerd:
de hoofdknop is wit met pruimtekst, de tweede is doorzichtig met witte
tekst. Deze regels MOETEN !important hebben, want de basisregels van
.pct-btn--primary en --ghost hebben dat ook (nodig tegen de linkkleur van
het sjabloon in artikelen). Zonder !important hier wint de basisregel en
wordt de hoofdknop wit op wit, dus onleesbaar. */
.pct-hero .pct-btn--primary{ background:#fff !important; color:var(--pct-plum) !important; }
.pct-hero .pct-btn--primary:hover{ background:var(--pct-blush) !important; color:var(--pct-plum) !important; }
.pct-hero .pct-btn--ghost{
background:rgba(255,255,255,.10) !important;
color:#fff !important;
border-color:rgba(255,255,255,.55);
}
.pct-hero .pct-btn--ghost:hover{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
@media only screen and (min-width:768px){
.pct-hero__in{ padding:96px 30px 90px; min-height:520px; } /* 30px = padding van .maincontent */
.pct-hero .pct-btn-groep{ max-width:none; }
}
@media only screen and (max-width:767px){
.pct-hero__scrim{
background:linear-gradient(180deg,
rgba(41,12,37,.66) 0%,
rgba(41,12,37,.52) 60%,
rgba(41,12,37,.68) 100%);
}
}
/* ==========================================================================
8. RUIMTE ONDER DE HERO
--------------------------------------------------------------------------
Het template zet 80 px boven de content. Onder een hero is dat te veel.
Alleen op de homepage (itemid-464).
========================================================================== */
body.itemid-464 .maincontent{ padding-top:18px; padding-bottom:0; }
/* --------------------------------------------------------------------------
De body is wit, de blokken zijn crème. In de ruimte tussen twee blokken
(bijvoorbeeld onder de paarse band) zag je daardoor een witte streep.
-------------------------------------------------------------------------- */
body{ background:var(--pct-creme); }
body.itemid-464 .pct-trust{ padding-top:0; margin-bottom:0; }
/* ==========================================================================
9. VERTROUWENSBALK
========================================================================== */
.pct-trust{
display:flex;
flex-wrap:wrap;
gap:10px 26px;
justify-content:center;
align-items:center;
text-align:center;
font-size:14.5px;
color:var(--pct-grijs);
padding:4px 0 20px;
margin:0 0 26px;
border-bottom:1px solid var(--pct-lijn);
}
.pct-trust span{ white-space:nowrap; }
.pct-trust b{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:var(--pct-plum);
}
.pct-trust .pct-trust__breed{ white-space:normal; }
@media only screen and (max-width:767px){
.pct-trust{ gap:8px 18px; font-size:13.5px; }
}
/* ==========================================================================
10. SECTIES EN KLACHTINGANGEN
--------------------------------------------------------------------------
Bewust een lijst met haarlijnen en geen kaartenraster: lichter, en op een
telefoon prettiger om doorheen te scrollen.
========================================================================== */
/* De blokken wisselen van achtergrond en de banden raken elkaar. De ruimte
zit daarom IN het blok, niet ertussen. */
.pct-sectie{ margin:0; padding:40px 0; }
.pct-sectie__kop{ max-width:60ch; margin:0 0 26px; }
.pct-sectie__kop .pct-sectie__eyebrow{
font-family:Nunito, Arial, sans-serif;
font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
font-weight:600; color:var(--pct-paars-tekst); margin:0 0 12px;
}
.pct-sectie__kop h2{
font-family:Nunito, Arial, sans-serif; font-weight:800;
color:var(--pct-plum) !important; /* module style overrides zetten hem soms wit of lichtpaars */
line-height:1.2; margin:0;
font-size:clamp(24px, 4.5vw, 32px);
text-wrap:balance; /* verdeelt de regels gelijkmatig ipv een los woord */
}
.pct-sectie__kop p{ margin:12px 0 0; color:var(--pct-grijs); font-size:17px; line-height:1.6; }
.pct-klachten{ border-top:1px solid var(--pct-lijn); }
a.pct-kl{
display:grid;
grid-template-columns:1fr auto;
gap:4px 18px;
align-items:center;
padding:18px 0;
border-bottom:1px solid var(--pct-lijn);
text-decoration:none;
color:inherit;
}
a.pct-kl:hover{ text-decoration:none; }
a.pct-kl:hover .pct-kl__t{ color:var(--pct-paars-tekst); }
a.pct-kl:hover .pct-kl__pijl{
background:var(--pct-plum); color:#fff; border-color:var(--pct-plum);
}
.pct-kl__t{
font-family:Nunito, Arial, sans-serif; font-weight:800;
font-size:18.5px; color:var(--pct-plum); line-height:1.3;
}
.pct-kl__d{
grid-column:1; font-size:15.5px; color:var(--pct-grijs); line-height:1.55;
}
.pct-kl__pijl{
grid-row:1 / 3; grid-column:2;
width:38px; height:38px; border-radius:50%;
border:1.5px solid var(--pct-lijn);
display:grid; place-items:center;
color:var(--pct-paars-tekst); font-size:17px; flex:none;
transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
@media only screen and (min-width:768px){
.pct-sectie{ padding:56px 0; }
a.pct-kl{
grid-template-columns:260px 1fr auto;
align-items:start;
padding:22px 0;
}
.pct-kl__t{ grid-column:1; grid-row:1; }
.pct-kl__d{ grid-column:2; grid-row:1; }
.pct-kl__pijl{ grid-column:3; grid-row:1; align-self:center; }
}
/* ==========================================================================
11. STAPPENRAIL "ZO GAAT HET"
========================================================================== */
.pct-rail{ display:flex; flex-direction:column; }
.pct-rl{ display:grid; grid-template-columns:auto 1fr; gap:0 18px; }
.pct-rl__mark{ display:flex; flex-direction:column; align-items:center; }
.pct-rl__num{
width:34px; height:34px; border-radius:50%;
background:var(--pct-plum); color:#fff;
display:grid; place-items:center;
font-family:Nunito, Arial, sans-serif; font-weight:800; font-size:15px;
flex:none;
}
.pct-rl__lijn{ width:2px; flex:1; background:var(--pct-lijn); margin:6px 0; }
.pct-rl:last-child .pct-rl__lijn{ display:none; }
.pct-rl__body{ padding-bottom:26px; }
.pct-rl:last-child .pct-rl__body{ padding-bottom:0; }
.pct-rl__body h3{
font-family:Nunito, Arial, sans-serif; font-weight:800;
font-size:19px; color:var(--pct-plum); margin:4px 0 6px; line-height:1.3;
}
.pct-rl__body p{ color:var(--pct-grijs); font-size:16px; line-height:1.65; margin:0; }
/* ==========================================================================
12. ADEMWERK-HUB
========================================================================== */
.pct-vormen{ display:flex; flex-direction:column; gap:16px; }
.pct-vorm{
background:#fff;
border:1px solid var(--pct-lijn);
border-radius:12px;
padding:22px 24px;
display:flex;
flex-direction:column;
gap:8px;
}
.pct-vorm h3{
font-family:Nunito, Arial, sans-serif; font-weight:800;
font-size:18px; color:var(--pct-plum); margin:0; line-height:1.3;
}
.pct-vorm h3 a{ color:var(--pct-plum); text-decoration:none; }
.pct-vorm h3 a:hover{ color:var(--pct-paars-tekst); text-decoration:underline; text-underline-offset:3px; }
.pct-vorm p{ font-size:15.5px; color:var(--pct-grijs); line-height:1.6; margin:0; }
.pct-specs{
display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
margin-top:auto; padding-top:12px;
font-family:Nunito, Arial, sans-serif; font-weight:700; font-size:14px;
color:var(--pct-paars-tekst);
}
.pct-open{
border:1.5px dashed #C6A6C4;
border-radius:6px; padding:2px 9px;
font-family:Nunito, Arial, sans-serif; font-weight:700; font-size:12.5px;
color:var(--pct-paars-tekst);
}
@media only screen and (min-width:768px){
.pct-vormen{ flex-direction:row; flex-wrap:wrap; }
.pct-vorm{ flex:1 1 calc(50% - 8px); }
}
/* ==========================================================================
13. VEELGESTELDE VRAGEN
--------------------------------------------------------------------------
/: openklappen zonder een regel JavaScript.
========================================================================== */
.pct-faq{ border-top:1px solid var(--pct-lijn); }
.pct-faq details{ border-bottom:1px solid var(--pct-lijn); }
.pct-faq summary{
cursor:pointer;
list-style:none;
padding:18px 44px 18px 0;
position:relative;
font-family:Nunito, Arial, sans-serif;
font-weight:700;
font-size:17.5px;
color:var(--pct-plum);
line-height:1.4;
}
.pct-faq summary::-webkit-details-marker{ display:none; }
.pct-faq summary::marker{ content:""; }
.pct-faq summary::after{
content:"+";
position:absolute; right:8px; top:14px;
font-size:26px; font-weight:400; line-height:1;
color:var(--pct-paars);
}
.pct-faq details[open] summary::after{ content:"\2013"; }
.pct-faq summary:hover{ color:var(--pct-paars-tekst); }
.pct-faq .pct-faq__a{
padding:0 0 20px;
color:var(--pct-grijs);
font-size:16.5px;
line-height:1.7;
max-width:66ch;
margin:0;
}
/* ==========================================================================
14. WOORDWOLK MET TEKSTLINKS
--------------------------------------------------------------------------
De woordwolk blijft. Maar een zoekmachine leest geen afbeelding, dus
eronder dezelfde woorden als echte links.
========================================================================== */
.pct-wolk img{
display:block;
width:100%;
height:auto;
border-radius:10px;
border:1px solid var(--pct-lijn);
margin:0;
}
.pct-wolk__bij{
font-size:13px;
color:var(--pct-grijs-licht);
line-height:1.5;
margin:10px 0 0;
}
.pct-taglinks{
display:flex;
flex-wrap:wrap;
gap:8px;
list-style:none;
padding:0;
margin:16px 0 0;
}
.pct-taglinks li{ margin:0; padding:0; }
.pct-taglinks li::before{ content:none; }
.pct-taglinks a{
display:inline-block;
font-size:14px;
line-height:1.3;
text-decoration:none;
background:#fff;
border:1px solid var(--pct-lijn);
color:var(--pct-paars-tekst);
padding:6px 12px;
border-radius:8px;
}
.pct-taglinks a:hover{
border-color:var(--pct-paars);
background:var(--pct-blush);
text-decoration:none;
}
/* ==========================================================================
15. ICONEN ZONDER FONT AWESOME
--------------------------------------------------------------------------
De site gebruikt vier iconen. Font Awesome laadde daarvoor negen
bestanden van samen ~311 kB. Hieronder dezelfde iconen als SVG-masker.
De HTML hoeft niet te veranderen: blijft werken.
Zet in de templateinstellingen "Load Font Awesome" op Nee.
========================================================================== */
.fa{
display:inline-block;
width:1em;
height:1em;
vertical-align:-.125em;
background-color:transparent;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
}
.fa::before{ content:none; }
.fa-bars, .fa-mobile, .fa-facebook, .fa-instagram, .fa-linkedin{
background-color:currentColor;
}
.fa-bars{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='10.9' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='15.8' width='18' height='2.2' rx='1.1'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='10.9' width='18' height='2.2' rx='1.1'/%3E%3Crect x='3' y='15.8' width='18' height='2.2' rx='1.1'/%3E%3C/svg%3E");
}
.fa-mobile{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v14h8V4H8zm4 15.9a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v14h8V4H8zm4 15.9a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}
.fa-facebook{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.63c-.29-.04-1.27-.12-2.41-.12-2.39 0-4.02 1.46-4.02 4.13v2.28H7.55V14h2.72v8z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5h1.65V4.63c-.29-.04-1.27-.12-2.41-.12-2.39 0-4.02 1.46-4.02 4.13v2.28H7.55V14h2.72v8z'/%3E%3C/svg%3E");
}
.fa-instagram{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.fa-linkedin{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 3.2a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM2.4 9.2h4.4V21H2.4V9.2zm7 0h4.2v1.6h.06c.6-1.1 2.05-2.26 4.22-2.26 4.5 0 5.34 2.86 5.34 6.58V21h-4.4v-5.2c0-1.24-.02-2.84-1.76-2.84-1.77 0-2.04 1.35-2.04 2.75V21H9.4V9.2z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 3.2a2.3 2.3 0 1 1 0 4.6 2.3 2.3 0 0 1 0-4.6zM2.4 9.2h4.4V21H2.4V9.2zm7 0h4.2v1.6h.06c.6-1.1 2.05-2.26 4.22-2.26 4.5 0 5.34 2.86 5.34 6.58V21h-4.4v-5.2c0-1.24-.02-2.84-1.76-2.84-1.77 0-2.04 1.35-2.04 2.75V21H9.4V9.2z'/%3E%3C/svg%3E");
}
/* ==========================================================================
16. UITKLAPPIJLTJES IN HET MENU
--------------------------------------------------------------------------
Het template zette hier een Font Awesome-teken. Op desktop weggelaten:
de labels zijn breed en het pijltje viel op een tweede regel. In het
mobiele schuifmenu blijft het staan -- daar moet je erop tikken.
========================================================================== */
.hornav .parent-indicator{ display:none; }
.slideout-menu .menu .parent-indicator{
font-family:inherit !important;
display:inline-block;
width:auto;
line-height:1;
}
.slideout-menu .menu .parent-indicator::before{
content:"" !important;
display:inline-block;
width:.42em;
height:.42em;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-.12em);
vertical-align:middle;
}
/* ==========================================================================
17. PAULA & PETER IN DE PAARSE BAND
--------------------------------------------------------------------------
Modules 736 (Paula) en 796 (Peter), positie bottom-1.
Was een kale opsomming; nu een kaart met rol, korte omschrijving,
vakgebieden als labels, praktijkdagen en een belknop.
========================================================================== */
.pct-persoon{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
border-radius:14px;
padding:26px;
height:100%;
}
.pct-persoon h3{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:22px;
color:#fff !important;
margin:0;
line-height:1.25;
}
.pct-persoon__rol{
font-size:12px;
letter-spacing:.15em;
text-transform:uppercase;
color:#EBD4E8;
font-weight:600;
margin:6px 0 14px;
}
.pct-persoon__d{
font-size:16.5px;
line-height:1.65;
color:#F7EDF6;
margin:0;
}
.pct-labels{
display:flex;
flex-wrap:wrap;
gap:8px;
list-style:none;
padding:0;
margin:16px 0 0;
}
.pct-labels li{
margin:0;
padding:5px 11px;
font-size:13.5px;
line-height:1.3;
background:rgba(255,255,255,.16);
border-radius:999px;
color:#fff;
}
.pct-labels li::before{ content:none; }
.pct-persoon__dagen{
margin:18px 0 0;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.22);
font-size:15px;
color:#F0DEED;
}
.pct-persoon .pct-btn-groep{ margin:16px 0 0; }
/* Zelfde verhaal als in de hero: deze knoppen staan op de paarse band. */
.pct-persoon .pct-btn--primary{ background:#fff !important; color:var(--pct-plum) !important; }
.pct-persoon .pct-btn--primary:hover{ background:var(--pct-blush) !important; color:var(--pct-plum) !important; }
.pct-persoon .pct-btn--ghost{
background:rgba(255,255,255,.10) !important;
color:#fff !important;
border-color:rgba(255,255,255,.5);
}
.pct-persoon .pct-btn--ghost:hover{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
.pct-persoon__reg{
margin:8px 0 0;
font-size:13.5px;
line-height:1.5;
color:#DCC6D9;
}
/* --------------------------------------------------------------------------
Module Style Override bottom-3a zet koppen op wit (was voor de fotoband).
De foto is weg, dus de kop moet weer leesbaar zijn.
-------------------------------------------------------------------------- */
.bottom-3a .pct-sectie__kop h2{ color:var(--pct-plum) !important; }
.bottom-3a .pct-sectie__kop .pct-sectie__eyebrow{ color:var(--pct-paars-tekst) !important; }
/* ==========================================================================
18. TARIEVEN EN ROUTE
--------------------------------------------------------------------------
Modules 580 (tarieven) en 794 (route), positie base-1.
Vervangen de registratieblokken; die staan nu bij de personen zelf.
========================================================================== */
.pct-fact{
background:#fff;
border:1px solid var(--pct-lijn);
border-radius:12px;
padding:26px;
height:100%;
}
.pct-fact h3{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:20px;
color:var(--pct-plum);
margin:0 0 16px;
line-height:1.3;
}
.pct-rij{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:14px;
padding:7px 0;
border-bottom:1px dashed #F0E6EC;
font-size:16px;
line-height:1.4; /* het template zet 1.7 op alle p */
color:var(--pct-grijs);
margin:0 !important; /* het template zet marge onder elke p */
}
.pct-rij:last-of-type{ border-bottom:0; }
.pct-rij b{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:var(--pct-plum);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.pct-fijn{
font-size:14px;
color:var(--pct-grijs-licht);
line-height:1.6;
margin:16px 0 0;
}
.pct-adres{
font-size:16.5px;
line-height:1.8;
color:var(--pct-grijs);
margin:0;
}
.pct-adres b{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:var(--pct-ink, #26212A);
}
/* --------------------------------------------------------------------------
Logostrook met de beroepsverenigingen
-------------------------------------------------------------------------- */
.pct-logos{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:18px 28px;
margin:0;
padding:26px 0 6px;
}
.pct-logos img{
display:block;
height:44px;
width:auto;
margin:0;
border:0;
opacity:.85;
transition:opacity .15s ease;
/* De logo's van RBCZ, SCAG en Balanskliniek hebben een witte achtergrond
in het bestand zelf. Vermenigvuldigen laat dat wit wegvallen tegen het
crème van de pagina, zonder de bestanden aan te passen. */
mix-blend-mode:multiply;
}
.pct-logos img:hover{ opacity:1; }
/* --------------------------------------------------------------------------
Even groot maken.
Dezelfde hoogte geven werkt niet: elk bestand heeft een andere hoeveelheid
wit eromheen en een andere vorm. Gemeten hoeveel beeld er in elk bestand
zit (NBVH 100%, RBCZ 85%, SCAG 85% maar slechts 37% breed, Balanskliniek
62%) en daar de hoogte per logo op afgestemd, zodat ze optisch even zwaar
wegen. De negatieve marges halen het overtollige wit links en rechts weg,
anders lijkt de afstand tussen de logo's ongelijk.
-------------------------------------------------------------------------- */
.pct-logos img[src*="NBVH"]{ height:44px; }
.pct-logos img[src*="RBCZ"]{ height:49px; }
.pct-logos img[src*="SCAG"]{ height:61px; margin:0 -24px; }
.pct-logos img[src*="Balanskliniek"]{ height:47px; margin:0 -12px; }
@media only screen and (max-width:767px){
.pct-logos{ gap:14px 24px; }
.pct-logos img[src*="NBVH"]{ height:36px; }
.pct-logos img[src*="RBCZ"]{ height:40px; }
.pct-logos img[src*="SCAG"]{ height:50px; margin:0 -20px; }
.pct-logos img[src*="Balanskliniek"]{ height:38px; margin:0 -10px; }
}
/* ==========================================================================
20. TWEEKOLOMS BLOKKEN BINNEN EEN MODULE
--------------------------------------------------------------------------
Voor blokken die als een module worden geplaatst maar wel een sectiekop
en twee kolommen nodig hebben, zoals de woordwolk en tarieven/route.
========================================================================== */
.pct-duo{
display:flex;
flex-direction:column;
gap:26px;
}
.pct-duo > *{ min-width:0; }
@media only screen and (min-width:768px){
.pct-duo{ flex-direction:row; gap:40px; }
.pct-duo > *{ flex:1; }
.pct-duo--top{ align-items:flex-start; }
.pct-duo--midden{ align-items:center; }
}
/* --------------------------------------------------------------------------
De Module Style Override van bottom-3a zet 25 px marge links. Daardoor
staat dat blok uit de lijn met alle andere secties (677 px i.p.v. 652 px).
-------------------------------------------------------------------------- */
.bottom-3a .module_surround{
margin-left:0 !important;
margin-right:0 !important;
}
/* ==========================================================================
21. RUIMTE TUSSEN DE MODULEBLOKKEN
--------------------------------------------------------------------------
Het sjabloon zet 80 px binnenruimte boven en onder elke .module_surround.
Samen met de 44 px van .pct-sectie werd het gat tussen twee blokken 214 px.
De secties regelen hun eigen ruimte, dus die 80 px kan eruit.
========================================================================== */
.bottom-2a .module_surround,
.bottom-3a .module_surround,
.base-1a .module_surround{
padding-top:0 !important;
padding-bottom:0 !important;
}
/* --------------------------------------------------------------------------
De paarse band van Paula en Peter.
Dit blok staat nu in het artikel (via loadmoduleid) in plaats van in
positie bottom-1, dus de volle breedte komt niet meer van het sjabloon.
De box-shadow strekt de kleur tot voorbij de schermrand, de clip-path
snijdt hem boven en onder weer af. Dat werkt zonder 100vw, dus zonder
gedoe met de schuifbalk.
-------------------------------------------------------------------------- */
.pct-wie{
background:var(--pct-paars);
box-shadow:0 0 0 100vmax var(--pct-paars);
clip-path:inset(0 -100vmax);
padding:40px 0;
margin:0 !important;
}
@media only screen and (min-width:768px){
.pct-wie{ padding:56px 0; margin:0 !important; }
}
/* Kop in de paarse band: wit in plaats van pruim. */
.pct-wie .pct-sectie__kop h2{ color:#fff !important; }
.pct-wie .pct-sectie__kop .pct-sectie__eyebrow{ color:#EBD4E8 !important; }
.pct-wie .pct-sectie__kop p{ color:#F0DEED; }
/* ==========================================================================
22. WELKOM - DE EIGEN WOORDEN VAN PAULA
--------------------------------------------------------------------------
Zit in het homepage-artikel, direct onder de vertrouwensbalk.
Stond eerder in twee losse modules (768 en 760) halverwege de pagina, zonder
kop en met de foto op 'hidden-phone'. Nu een sectie met kop, vooraan, en de
foto is ook op mobiel zichtbaar.
========================================================================== */
.pct-welkom__foto img{
display:block;
width:100%;
height:auto;
max-width:440px;
border-radius:16px;
border:1px solid var(--pct-lijn);
box-shadow:0 12px 30px rgba(77,26,71,.12);
}
.pct-welkom__tekst > *:first-child{ margin-top:0; }
.pct-welkom__tekst > *:last-child{ margin-bottom:0; }
.pct-welkom__tekst p{
font-size:17px;
line-height:1.7;
color:var(--pct-grijs);
margin:0 0 16px;
max-width:58ch;
}
.pct-welkom__tekst .pct-lead{
font-size:19px;
line-height:1.6;
color:var(--pct-plum);
font-weight:600;
}
.pct-welkom__tekst .pct-vraag{
font-size:18px;
font-weight:700;
color:var(--pct-paars-tekst);
}
.pct-welkom__tekst .pct-slot{
margin:22px 0 0;
padding:16px 18px;
background:var(--pct-blush);
border-left:3px solid var(--pct-paars);
border-radius:0 12px 12px 0;
color:var(--pct-plum);
font-weight:600;
font-size:16.5px;
}
@media only screen and (min-width:768px){
.pct-welkom .pct-duo > .pct-welkom__foto{ flex:0 0 40%; }
.pct-welkom .pct-duo > .pct-welkom__tekst{ flex:1 1 auto; }
}
/* ==========================================================================
23. AFSLUITENDE OPROEP
--------------------------------------------------------------------------
Onderaan module 580, na de logostrook. Volle breedte met dezelfde
box-shadow-truc als de paarse band, zodat hij niet aan een sjabloonpositie
vastzit. De twee bijknoppen staan in wit omlijnd wit, niet in pruim:
pruim op pruim was in het ontwerp nauwelijks te lezen.
========================================================================== */
.pct-cta{
background:var(--pct-plum);
box-shadow:0 0 0 100vmax var(--pct-plum);
clip-path:inset(0 -100vmax);
padding:48px 0 52px;
margin:0; /* de sectie ervoor levert de tussenruimte al */
text-align:center;
}
.pct-cta h2{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:clamp(24px, 4.2vw, 34px);
line-height:1.25;
color:#fff !important;
margin:0 auto;
max-width:22ch;
text-wrap:balance;
}
.pct-cta p{
font-size:17px;
line-height:1.6;
color:#EBD4E8 !important;
margin:14px auto 0;
max-width:54ch;
}
.pct-cta .pct-btn-groep{
justify-content:center;
margin:26px 0 0;
}
.pct-cta .pct-btn--light{ background:#fff !important; color:var(--pct-plum) !important; }
.pct-cta .pct-btn--light:hover{ background:var(--pct-blush) !important; color:var(--pct-plum) !important; }
.pct-cta .pct-btn--ghost{
background:rgba(255,255,255,.08) !important;
color:#fff !important;
border-color:rgba(255,255,255,.55);
}
.pct-cta .pct-btn--ghost:hover{
background:rgba(255,255,255,.20);
border-color:#fff;
color:#fff !important;
}
@media only screen and (min-width:768px){
.pct-cta{ padding:64px 0 68px; margin:0; }
}
/* Er is geen algemene contactpagina, alleen 'mail naar Paula' en 'mail naar
Peter'. Vier knoppen wordt rommelig, dus mailen staat als tekstregel onder
de belknoppen. */
.pct-cta__mail{
margin:18px auto 0;
font-size:15px;
color:#DCC6D9 !important;
max-width:54ch;
}
.pct-cta__mail a{
color:#fff !important;
text-decoration:underline;
text-underline-offset:3px;
}
/* ==========================================================================
24. RECENSIES
--------------------------------------------------------------------------
Drie citaten uit de openbare Google-recensies van de praktijk, ingekort maar
woordelijk. Eigen module, via loadmoduleid in het artikel geladen.
========================================================================== */
.pct-quotes{
display:grid;
grid-template-columns:1fr;
gap:20px;
}
@media only screen and (min-width:768px){
.pct-quotes{ grid-template-columns:repeat(3, 1fr); gap:24px; }
}
.pct-quote{
background:var(--pct-blush);
border:1px solid var(--pct-lijn);
border-radius:12px;
padding:24px;
margin:0;
display:flex;
flex-direction:column;
}
.pct-quote blockquote{
margin:0;
padding:0;
border:0;
flex:1;
font-size:16.5px;
line-height:1.7;
color:var(--pct-grijs);
}
.pct-quote blockquote::before{
content:"\201C";
display:block;
font-family:Georgia, "Times New Roman", serif;
font-size:46px;
line-height:.55;
color:var(--pct-paars);
margin:0 0 12px;
}
.pct-quote figcaption{
margin:18px 0 0;
padding-top:14px;
border-top:1px solid var(--pct-lijn);
font-size:14.5px;
line-height:1.5;
color:var(--pct-grijs-licht);
}
.pct-quote figcaption b{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:var(--pct-plum);
}
.pct-quotes__bron{
margin:20px 0 0;
font-size:14px;
line-height:1.6;
color:var(--pct-grijs-licht);
text-align:center;
}
/* ==========================================================================
25. AGENDA
--------------------------------------------------------------------------
Module 866, iCagenda Evenementenlijst, via loadmoduleid in het artikel.
Haalt de vier eerstvolgende activiteiten rechtstreeks uit de agenda, dus
niets is vastgetikt en verlopen data verdwijnen vanzelf.
iCagenda zet de datum, de titel, de plaats en de omschrijving als vier
losse elementen naast elkaar met floats. Daarom een raster van twee
kolommen: de datum links over drie rijen, de rest rechts onder elkaar.
========================================================================== */
.pct-agenda .ic-section,
.pct-agenda .ic-group{ display:block; width:auto; }
.pct-agenda .default_eventlist{
width:100% !important;
float:none !important;
margin:0 0 14px !important;
padding:0 !important;
}
.pct-agenda hr{ display:none; }
.pct-agenda .ic-event-div{
display:grid !important;
grid-template-columns:66px 1fr;
column-gap:20px;
row-gap:6px;
align-items:start;
background:#fff;
border:1px solid var(--pct-lijn);
border-radius:12px;
padding:20px 22px;
}
.pct-agenda .ic-event-div > *{
float:none !important;
width:auto !important;
margin:0 !important;
}
.pct-agenda .ic-event-div > *:nth-child(1){ grid-column:1; grid-row:1 / span 3; }
.pct-agenda .ic-event-div > *:nth-child(2){ grid-column:2; grid-row:1; }
.pct-agenda .ic-event-div > *:nth-child(3){ grid-column:2; grid-row:2; }
.pct-agenda .ic-event-div > *:nth-child(4){ grid-column:2; grid-row:3; }
/* Het datumblokje.
LET OP: de achtergrondkleur komt NIET uit deze CSS. iCagenda zet hem als
inline stijl op het element, en die wint altijd. De kleur staat per
activiteit in iCagenda (en als terugval per categorie: Workshop, Training,
Opleiding). Wil je die kleur veranderen, doe dat dus in de agenda zelf.
De tekstkleuren hieronder zijn daarom donker gehouden: ze moeten leesbaar
blijven op welke kleur Paula ook kiest, en die is nu licht (#97bdcf). */
.pct-agenda .ic-date-div{
width:66px;
text-align:center;
border-radius:10px;
padding:10px 0;
}
.pct-agenda .ic-day{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:25px;
line-height:1.1;
color:var(--pct-plum);
}
.pct-agenda .ic-month{
font-size:12px;
text-transform:uppercase;
letter-spacing:.1em;
font-weight:700;
color:var(--pct-paars-tekst);
}
.pct-agenda .iceventlist-title a{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:18.5px;
line-height:1.3;
color:var(--pct-plum) !important;
text-decoration:none;
}
.pct-agenda .iceventlist-title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pct-agenda .iceventlist-venue,
.pct-agenda .ic-datetime-div{
font-size:14.5px;
line-height:1.5;
color:var(--pct-grijs-licht);
}
.pct-agenda .iceventlist-venue{ margin-right:14px !important; }
.pct-agenda .iceventlist-desc{
display:block;
font-size:16px;
line-height:1.6;
color:var(--pct-grijs);
}
@media only screen and (max-width:767px){
.pct-agenda .ic-event-div{ padding:18px; column-gap:14px; grid-template-columns:56px 1fr; }
.pct-agenda .ic-date-div{ width:56px; }
.pct-agenda .ic-day{ font-size:22px; }
}
/* ==========================================================================
26. FOOTER
--------------------------------------------------------------------------
Eén module in base-2a, vier kolommen in eigen beheer. Verving vier losse
modules (824 Algemene Info, 766 Formulieren, 772 Praktijk Info,
850 Bezoekadres) die elk een sjabloonkolom vulden.
De band eromheen is paars, dus alle tekst is licht.
========================================================================== */
.pct-footer{
display:grid;
grid-template-columns:1fr;
gap:30px;
padding:6px 0 0;
}
@media only screen and (min-width:768px){
.pct-footer{ grid-template-columns:1.35fr 1fr 1fr 1.15fr; gap:40px; }
}
.pct-footer h3{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
font-size:17px;
line-height:1.3;
color:#fff !important;
margin:0 0 14px;
}
.pct-footer ul{
list-style:none;
margin:0;
padding:0;
}
.pct-footer li{
margin:0 0 9px;
padding:0;
font-size:15.5px;
line-height:1.5;
}
.pct-footer li::before{ content:none; }
.pct-footer a{
color:#F0DEED !important;
text-decoration:none;
}
.pct-footer a:hover{
color:#fff !important;
text-decoration:underline;
text-underline-offset:3px;
}
.pct-footer p{
font-size:15.5px;
line-height:1.8;
color:#F0DEED;
margin:0;
}
.pct-footer p b{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:#fff;
}
.pct-footer__fijn{
font-size:14px !important;
line-height:1.7 !important;
color:#DCC6D9 !important;
margin:12px 0 0 !important;
}
.pct-footer__slot{
margin:34px 0 0;
padding:18px 0 0;
border-top:1px solid rgba(255,255,255,.25);
font-size:14px;
line-height:1.7;
color:#DCC6D9;
}
/* --------------------------------------------------------------------------
De onderbalk met de voorwaarden en het copyright stond op crème, onder de
paarse footer. Dat leest als een brede witte rand onderaan de pagina.
Nu de donkere pruimkleur, uitgelijnd met de rest, met het copyright boven
de voorwaarden.
Pruim in plaats van paars is ook een leesbaarheidskeuze: wit op #996699
haalt maar 4,45 : 1 en dat is het hoogst haalbare op die kleur. Op #4D1A47
is het 13,5 : 1.
-------------------------------------------------------------------------- */
#container_base2_modules{ background:var(--pct-plum-diep) !important; }
#container_footer{
background:var(--pct-plum-diep) !important;
padding:22px 30px 26px !important;
display:flex;
flex-direction:column;
}
#container_footer .copyright{
order:1;
width:100%;
max-width:1120px;
margin:0 auto 4px;
padding:0 !important;
text-align:left;
}
#container_footer .footermenu{
order:2;
width:100%;
max-width:1120px;
margin:0 auto;
padding:0 !important;
}
#container_footer .copyright,
#container_footer .copyright *{
color:#fff !important;
opacity:.82;
font-size:13.5px;
line-height:1.7;
letter-spacing:0;
text-transform:none;
}
/* Het sjabloon zet de voorwaardenlijst als kolom. Hier hoort hij op een rij. */
#container_footer .footermenu ul{
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
justify-content:flex-start !important;
text-align:left !important;
margin:0;
padding:0;
list-style:none;
}
#container_footer .footermenu li{
display:inline-flex !important;
flex:0 0 auto !important;
width:auto !important;
align-items:center;
margin:0;
padding:0;
}
#container_footer .footermenu a{
color:#fff !important;
opacity:.82;
font-size:13.5px;
line-height:1.7;
}
#container_footer .footermenu a:hover{
opacity:1;
text-decoration:underline;
text-underline-offset:3px;
}
@media only screen and (max-width:767px){
#container_footer{ padding:20px 20px 24px !important; }
}
/* ==========================================================================
27. AFWISSELENDE ACHTERGRONDEN
--------------------------------------------------------------------------
In het ontwerp wisselen de blokken tussen crème en wit, met de paarse band
en de donkere afsluiting ertussen. Dat geeft de pagina ritme.
De banden lopen van rand tot rand met dezelfde box-shadow-truc als de
paarse band: 100vmax naar links en rechts, verticaal weer afgesneden.
Geen 100vw, dus geen horizontale schuifbalk.
========================================================================== */
.pct-sectie--wit{
background:#fff;
box-shadow:0 0 0 100vmax #fff;
clip-path:inset(0 -100vmax);
}
.pct-sectie--creme2{
background:var(--pct-creme-2);
box-shadow:0 0 0 100vmax var(--pct-creme-2);
clip-path:inset(0 -100vmax);
}
/* De kaarten in een wit blok hebben een crème vulling nodig, anders vallen ze
weg tegen de achtergrond. */
/* De recensiekaarten hebben hun eigen blush-vulling, die valt overal op.
De tarieven- en agendakaarten zijn wit en zouden in een wit blok wegvallen;
die krijgen daar crème. */
.pct-sectie--wit .pct-fact,
.pct-sectie--wit .pct-agenda .ic-event-div{
background:var(--pct-creme);
}
/* ==========================================================================
28. MENUBALK
--------------------------------------------------------------------------
Het laatste menu-item ("Plan een kennismaking", class pct-menuknop) is een
knop in plaats van een link. Dat item staat in het hoofdmenu, dus het werkt
op elke pagina en Edgar kan de tekst en de bestemming zelf beheren.
Het meeplakken van de kop regelt het sjabloon zelf (parameter sticky_sw).
Daar geen CSS voor schrijven: die vecht met het sticky-wrapper-script.
========================================================================== */
/* --------------------------------------------------------------------------
Geen menu-item over twee regels: dat maakt de balk hoger en de items
ongelijk van hoogte. Alles op één regel.
-------------------------------------------------------------------------- */
.hornav > ul > li > a{ white-space:nowrap; }
/* --------------------------------------------------------------------------
Het laatste menu-item als knop.
-------------------------------------------------------------------------- */
.hornav a.pct-menuknop{
display:inline-flex;
align-items:center;
justify-content:center;
font-family:Nunito, Arial, sans-serif;
font-weight:700;
font-size:14.5px;
line-height:1.2;
letter-spacing:0 !important;
text-transform:none !important; /* het menu staat op hoofdletters, de knop niet */
white-space:nowrap;
padding:9px 16px !important;
border-radius:9px;
background:var(--pct-plum);
color:#fff !important;
text-decoration:none;
transition:background-color .15s ease, transform .15s ease;
}
.hornav a.pct-menuknop:hover{
background:#37102F;
color:#fff !important;
transform:translateY(-1px);
text-decoration:none;
}
.hornav a.pct-menuknop::after{ content:none; }
/* In het uitschuifmenu op mobiel geen knopopmaak, daar is het gewoon een regel. */
.slideout a.pct-menuknop{
background:transparent;
color:inherit !important;
padding:inherit !important;
border-radius:0;
}
/* --------------------------------------------------------------------------
De bovenste regel van de kop is leeg sinds de taalkeuze, de login en de
sociale iconen eruit zijn. Facebook, Instagram en LinkedIn staan nu in de
footer bij Contact. Die lege regel kostte 35 px kophoogte.
Komt er ooit weer iets in die regel, haal deze regel dan weg.
-------------------------------------------------------------------------- */
#container_header .header_top{ display:none; }
/* ==========================================================================
29. AFBEELDINGEN IN ARTIKELEN
--------------------------------------------------------------------------
De foto's op de pagina's van Paula en Peter hebben een harde grijze rand
van 3 px met rechte hoeken, als inline stijl in het artikel zelf. Daardoor
wint die van elke stylesheet en is !important nodig.
Nu dezelfde afronding als de foto op de homepage.
========================================================================== */
/* LET OP: uitdrukkelijk NIET op de homepage (itemid-464). Daar staat de balk
met de keurmerklogo's in exact dezelfde wrapper. De regel hieronder is
specifieker dan `.pct-logos img`, dus sloopte hij de vaste hoogte van die
logo's (ze klapten in) en zette er een kader omheen. Om dezelfde reden
staan `height` en `max-width` hier niet meer in: die horen bij de
afbeelding zelf, niet bij dit kadertje. */
body:not(.itemid-464) .com-content-article__body img{
border-radius:14px;
border:1px solid var(--pct-lijn);
box-shadow:0 10px 26px rgba(77,26,71,.10);
}
/* --------------------------------------------------------------------------
Het logo naast de kop op de pagina's van Paula (module 814, P-Coaching &
Therapie) en Peter (module 815, P-Coaching & Loopbaan). Het staat in de H2
zelf, en was hoger dan de regel waardoor het over de tekst viel.
-------------------------------------------------------------------------- */
#mod-custom814 h2 img,
#mod-custom815 h2 img{
height:34px;
width:auto;
margin:0 0 0 12px !important;
vertical-align:-6px;
}
/* ==========================================================================
30. KOPPEN OP DE GEWONE TEKSTPAGINA'S
==========================================================================
Paginatitel = H1. Daaronder stonden overal alleen H3's, dus werd het
H2-niveau overgeslagen: een gat in de structuur voor zoekmachines en
schermlezers. De sectiekoppen zijn nu H2.
Twee grendels om de homepage niet te raken:
- `body:not(.itemid-464)` sluit de homepage uit;
- `>` betekent alleen koppen die rechtstreeks in de artikeltekst staan,
dus nooit de koppen binnen een `.pct-sectie`-blok.
Zonder die grendels wint deze regel van `.pct-sectie__kop h2` en worden de
homepage-koppen kleiner. Dat is een keer gebeurd.
========================================================================== */
body:not(.itemid-464) .com-content-article__body > h2{
font-family:Nunito, Arial, sans-serif;
font-size:25px;
font-weight:700;
line-height:1.25;
color:var(--pct-paars-tekst);
margin:38px 0 14px;
text-transform:none;
letter-spacing:0;
}
body:not(.itemid-464) .com-content-article__body > h2:first-of-type{
margin-top:30px;
}
/* De regel onder de naam op de pagina's van Paula en Peter ("Therapeut en
coach - P-Coaching & Therapie") is geen kop maar een ondertitel; die stond
als H3 in de tekst en opende dus een sectie die er niet is. Nu een gewone
alinea, een maat kleiner dan de H2 zodat de rangorde klopt. */
body:not(.itemid-464) .pct-ondertitel{
font-family:Nunito, Arial, sans-serif;
font-size:19px;
font-weight:600;
line-height:1.3;
color:var(--pct-paars-tekst);
margin:0 0 22px;
}
/* ==========================================================================
31. OPLEIDINGSPAGINA'S: ÉÉN OPBOUW
==========================================================================
Deze pagina's zijn los van elkaar gegroeid. Drie hulpmiddelen om ze weer
gelijk te trekken. Alle drie hangen aan een eigen class, niet aan een
plek in de pagina, zodat ze nooit per ongeluk iets anders raken.
========================================================================== */
/* --- 31a. De foto bovenaan een pagina ------------------------------------
Overal even groot en op dezelfde plek: rechts naast de tekst op een
breed scherm, over de volle breedte op een telefoon. Zet op de
afbeelding class="pct-paginafoto" en haal de inline breedte weg. */
.pct-paginafoto{
display:block;
width:100%;
max-width:360px;
height:auto;
margin:0 0 22px;
border-radius:14px;
border:1px solid var(--pct-lijn);
box-shadow:0 10px 26px rgba(77,26,71,.10);
}
@media only screen and (min-width:768px){
.pct-paginafoto{
float:right;
width:360px;
margin:4px 0 22px 30px;
}
}
/* Een afbeelding waarvan het bronbestand kleiner is dan 360 px wordt anders
opgeblazen en oogt wazig. Die krijgt deze extra klasse erbij en blijft dan
op ware grootte staan -- verder precies dezelfde behandeling als de rest. */
.pct-paginafoto--klein{ max-width:223px; }
@media only screen and (min-width:768px){
.pct-paginafoto--klein{ width:223px; }
}
/* --- 31b. Uitklapblok ("Lees verder voor gedetailleerde informatie") -----
Gewoon en van HTML zelf. Geen plug-in, geen extra
JavaScript, geen tabbladen-component. Werkt in elke browser, ook als
JavaScript uitstaat, en Google leest de inhoud gewoon mee.
Lees verder voor gedetailleerde informatie
...
*/
.pct-uitklap{
margin:28px 0;
padding:0 22px;
border:1px solid var(--pct-lijn);
border-radius:14px;
background:var(--pct-creme-2);
}
.pct-uitklap > summary{
display:flex;
align-items:center;
gap:12px;
padding:16px 0;
cursor:pointer;
list-style:none;
font-family:Nunito, Arial, sans-serif;
font-weight:700;
font-size:18px;
color:var(--pct-paars-tekst);
}
.pct-uitklap > summary::-webkit-details-marker{ display:none; }
.pct-uitklap > summary::marker{ content:''; }
.pct-uitklap > summary::before{
content:'';
flex:0 0 auto;
width:9px; height:9px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(-45deg);
transition:transform .18s ease;
}
.pct-uitklap[open] > summary::before{ transform:rotate(45deg); }
.pct-uitklap > summary:hover{ color:var(--pct-plum); }
.pct-uitklap > summary:focus-visible{ outline:2px solid var(--pct-paars); outline-offset:3px; }
.pct-uitklap__in{ padding:2px 0 20px; }
.pct-uitklap__in > *:first-child{ margin-top:0; }
/* --- 31c. Datablokken ----------------------------------------------------
De opleidingsdata stonden in tabbladen van het sjabloon. Nu drie gewone
kaartjes naast elkaar, zonder component en zonder klikken. */
.pct-data{
display:grid;
grid-template-columns:1fr;
gap:16px;
margin:24px 0;
}
@media only screen and (min-width:768px){
.pct-data{ grid-template-columns:repeat(3, 1fr); }
}
.pct-data__kaart{
border:1px solid var(--pct-lijn);
border-radius:14px;
background:#fff;
padding:18px 20px 20px;
}
.pct-data__kaart h3{
margin:0 0 12px !important;
font-family:Nunito, Arial, sans-serif;
font-size:17px !important;
font-weight:700 !important;
color:var(--pct-paars-tekst) !important;
}
.pct-data__kaart ul{
margin:0;
padding:0;
list-style:none;
}
.pct-data__kaart li{
padding:5px 0;
border-bottom:1px solid var(--pct-lijn);
font-size:15px;
}
.pct-data__kaart li:last-child{ border-bottom:0; }
.pct-data__kaart li em{
display:block;
font-style:normal;
font-size:13px;
color:var(--pct-grijs-licht);
}
/* --- 31d. Tweede foto verderop in de tekst -------------------------------
Staat een pagina twee foto's, dan zweeft de eerste rechts (31a) en deze
links, zodat de tekst er niet aan één kant tegenaan blijft plakken. */
.pct-paginafoto--links{ }
@media only screen and (min-width:768px){
.pct-paginafoto--links{
float:left;
margin:4px 30px 22px 0;
}
}
/* --- 31e. De keurmerklogo's onder "Erkenning" ----------------------------
Stonden tegen elkaar aan, met een wit vierkant om het CAT-logo. Zelfde
aanpak als de logobalk op de homepage: multiply haalt het wit weg, en de
hoogtes zijn per logo gemeten zodat ze optisch even groot ogen. */
.pct-keurmerken{
display:flex;
align-items:center;
gap:38px;
flex-wrap:wrap;
margin:16px 0 0;
}
.pct-keurmerken img{
width:auto;
mix-blend-mode:multiply;
}
/* Bewust ongelijke hoogtes: het CAT-logo is een vierkante badge met veel lucht
eromheen, NBVH een strak woordmerk. Op precies gelijke hoogte oogt NBVH
forser. Zo ogen ze even groot. Even geprobeerd op 64 px voor allebei
(14-09-2026) en weer teruggedraaid.
De selectors zoeken hoofdletterongevoelig (de i achter de waarde). Het
CAT-logo heette eerst CAT_Register_GRO-erkend.png en staat sinds 14-09-2026
als cat-register-gro-erkend.png in images/logo; met [src*="CAT"] viel de
hoogte daardoor weg en werd het logo op ware grootte getoond. */
.pct-keurmerken img[src*="cat-register" i]{ height:72px; }
.pct-keurmerken img[src*="nbvh" i]{ height:48px; }
/* Staan de keurmerken vlak boven een knoppenrij, dan horen ze visueel bij
de regel Erkenning erboven, niet bij de knoppen. Iets meer lucht eronder
dan erboven maakt dat verschil. */
.pct-keurmerken + .pct-btn-groep{ margin-top:38px; }
/* ==========================================================================
32. TERUG NAAR BOVEN
==========================================================================
Eén link in de footermodule (867), die op elke pagina staat. Omdat hij
`position:fixed` is, maakt het niet uit waar hij in de pagina zit.
Geen JavaScript en geen plug-in. `href="#top"` is een afspraak in HTML
zelf: als er geen element met dat id bestaat, springt de browser naar de
bovenkant van de pagina. Werkt dus ook als JavaScript uitstaat.
Hij staat altijd zichtbaar. Alleen-tonen-na-scrollen kan niet zonder
JavaScript (of met een truc die Safari en Firefox nog niet kennen), en
een knop die soms wel en soms niet verschijnt is verwarrender dan een
knop die er gewoon altijd is.
========================================================================== */
.pct-omhoog{
position:fixed;
right:20px;
bottom:20px;
z-index:900;
width:46px;
height:46px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:var(--pct-plum);
color:#fff !important;
border:1px solid rgba(255,255,255,.25);
box-shadow:0 6px 18px rgba(55,16,47,.30);
text-decoration:none !important;
opacity:.82;
transition:opacity .18s ease, background .18s ease, transform .18s ease;
}
.pct-omhoog::before{
content:'';
width:11px; height:11px;
border-left:2.5px solid currentColor;
border-top:2.5px solid currentColor;
transform:rotate(45deg);
margin-top:4px; /* pijlpunt optisch in het midden */
}
.pct-omhoog:hover,
.pct-omhoog:focus-visible{
opacity:1;
background:var(--pct-plum-diep);
transform:translateY(-2px);
color:#fff !important;
}
.pct-omhoog:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media only screen and (min-width:768px){
.pct-omhoog{ right:28px; bottom:28px; width:50px; height:50px; }
}
/* Wie liever geen bewegende dingen ziet, krijgt ze niet. */
@media (prefers-reduced-motion:reduce){
.pct-omhoog{ transition:none; }
.pct-omhoog:hover{ transform:none; }
}
/* --- 31f. Het "Hart-elijk welkom"-bannertje ------------------------------
Dit is een tekstbanner, geen foto. Vandaar geen kader en geen afronding;
die kreeg hij wel van de algemene fotoregel. */
.pct-banner{ margin:6px 0 22px; }
/* 14 september: tóch een dun randje, op verzoek van Edgar. De banner heeft zelf
een witte achtergrond en zweefde daardoor als een hard wit vierkant op de
crèmekleurige paginagrond. Een lijntje maakt daar een bewust kadertje van.
Wel zonder schaduw: die blijft voorbehouden aan echte foto's. */
.pct-banner img{
border:1px solid var(--pct-lijn) !important;
border-radius:10px !important;
box-shadow:none !important;
height:auto;
max-width:100%;
}
/* ==========================================================================
33. HET GEDICHT OP DE JUST BREATHE-PAGINA (staat sinds 12-09-2026
in artikel 186 zelf, tussen de inhoud en het praktische blok;
module 851 is daarom gedepubliceerd)
==========================================================================
Het hele blok komt als geheel tevoorschijn en schuift omhoog zodra je er
tijdens het scrollen bij komt.
Dat regelt het sjabloon zelf; niets zelf verzinnen dus:
.animate -> visibility:hidden (nexus.min.css)
Waypoints -> zet .animated erbij op 85% van het scherm
(js/scripts.js)
.animated -> visibility:visible, 1,5 s (animate.min.css)
.fadeInUp -> welke beweging (animate.min.css)
In de module staat dus gewoon:
`zoomInUp` = het blok komt van onderen omhoog en schaalt tegelijk open,
als een popup. Andere namen die het sjabloon kent, mocht je willen
wisselen: fadeInUp (rustig omhoog schuiven), bounceInUp (met een stuiter),
zoomIn (alleen open schalen), fadeInLeft / fadeInRight (van opzij),
flipInX, rollIn. Er zijn er 67; ze staan in animate.min.css.
Hieronder staat alleen nog de vormgeving van het blok.
========================================================================== */
.pct-gedicht{
margin:34px 0 38px;
padding:26px 20px 30px;
border-radius:16px;
background:var(--pct-blush);
box-shadow:0 14px 40px rgba(77,26,71,.13); /* laat hem als kaartje opkomen */
text-align:center;
}
/* Een gedicht in dezelfde schreefloze letter als de rest van de site leest
als een opsomming. Daarom hier een schreefletter, cursief: dat leest
rustiger en zet het gedicht apart van de zakelijke tekst eromheen.
Bewust GEEN extra webfont -- dit zijn letters die op vrijwel elk apparaat
al staan, dus het kost geen enkele extra download. */
.pct-gedicht__in{
max-width:600px;
margin:0 auto;
font-family:Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
font-style:italic;
font-size:17px;
line-height:1.75;
color:var(--pct-paars-tekst);
}
/* De kop blijft in de huisletter: die hoort bij de site, niet bij het vers. */
.pct-gedicht__titel{
font-family:Nunito, Arial, sans-serif;
font-style:normal;
font-weight:700;
font-size:15px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--pct-paars);
margin-bottom:2px;
}
.pct-gedicht__label{
font-family:Nunito, Arial, sans-serif;
font-style:normal;
font-size:12.5px;
letter-spacing:.06em;
color:var(--pct-grijs-licht);
margin-bottom:24px;
}
.pct-gedicht__slot{
margin-top:22px;
font-style:normal;
font-family:Nunito, Arial, sans-serif;
font-size:15px;
color:var(--pct-paars);
}
/* GEEN vangnet-animatie hier, en dat is met opzet.
Ik had er eerst een staan (`.pct-gedicht.animate{ animation: ... }`) om het
gedicht na zes seconden alsnog te tonen als het script niet zou draaien.
Die regel is specifieker dan `.zoomInUp{ animation-name:zoomInUp }` uit
animate.css en overschreef dus de animatie: er gebeurde niets meer.
Wie hier iets aan `animation` zet, zet het effect uit. Doe dat niet. */
/* Wie geen bewegende beelden wil, krijgt het gedicht meteen. */
@media (prefers-reduced-motion:reduce){
.pct-gedicht.animate{ visibility:visible !important; animation:none !important; }
}
@media only screen and (min-width:768px){
.pct-gedicht{ padding:34px 30px 38px; }
.pct-gedicht__in{ font-size:18px; }
}
/* --- 31g. Klein keurmerk in de tekst -------------------------------------
Bijvoorbeeld het TTC-facilitatorlogo. Geen paginafoto: op ware grootte,
zonder kader, en het wit eruit met multiply. */
.pct-keurmerk{
height:78px;
width:auto;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
mix-blend-mode:multiply;
}
/* ==========================================================================
34. DE CONTACTFORMULIEREN (Convert Forms)
==========================================================================
De formulieren van "Mail naar Paula" en "Mail naar Peter" stonden nog in
de standaardopmaak van de plug-in: een lichtpaarse knop van 3 px rond in
Raleway, en velden met een grijs randje. Dat wijkt af van alle andere
knoppen op de site.
Hieronder krijgt `.cf-btn` exact dezelfde vorm als `.pct-btn--primary` en
sluiten de velden aan bij de rest: 10 px rond, de huislijnkleur, en een
duidelijke paarse focusring voor wie met het toetsenbord invult.
De plug-in zelf is niet aangeraakt; dit is alleen opmaak.
========================================================================== */
.cf-form .cf-btn,
.cf-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:16px !important;
line-height:1.2 !important;
padding:14px 22px !important;
border-radius:10px !important;
border:2px solid transparent !important;
background:var(--pct-plum) !important;
color:#fff !important;
text-decoration:none !important;
transition:background-color .15s ease, transform .15s ease;
}
.cf-btn:hover,
.cf-btn:focus-visible{
background:var(--pct-plum-diep) !important;
transform:translateY(-1px);
}
.cf-btn:focus-visible{ outline:2px solid var(--pct-paars); outline-offset:3px; }
.cf-input,
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="tel"],
.cf-form textarea,
.cf-form select{
border-radius:10px !important;
border:1px solid var(--pct-lijn) !important;
background:#fff !important;
font-family:Raleway, Arial, sans-serif;
font-size:16px;
padding:12px 14px !important;
transition:border-color .15s ease, box-shadow .15s ease;
}
.cf-input:focus,
.cf-form input:focus,
.cf-form textarea:focus,
.cf-form select:focus{
border-color:var(--pct-paars) !important;
box-shadow:0 0 0 3px rgba(153,102,153,.18) !important;
outline:none;
}
.cf-label{
font-family:Nunito, Arial, sans-serif;
font-weight:600;
color:var(--pct-paars-tekst);
}
/* ==========================================================================
35. DE AGENDAPAGINA (iCagenda, menu-item 683)
==========================================================================
De agendapagina zag er heel anders uit dan het agendablok op de homepage:
grijze kaartjes met 4 px ronding, het datumblok 204 px breed op grijs
#ddd, het jaartal en de tijd in WIT op dat grijs (dus onleesbaar), en de
titel in Raleway 16 px grijs in plaats van Nunito paars.
Hoe deze regels op de pagina komen: het menu-item heeft als paginaklasse
` pct-agenda` gekregen. Joomla zet die op de component-wrapper
(`.ic-list-view`), zodat dezelfde naam werkt als bij het blok op de
homepage. Er is dus niets aan de plug-in of aan overrides veranderd.
LET OP: de kleur van het datumblok komt uit iCagenda zelf (inline stijl
per activiteit). Vandaar `!important` op de achtergrond hier, anders
blijft het grijs.
========================================================================== */
/* --- de kop van de lijst ------------------------------------------------- */
.pct-agenda .ic-header-title{
font-family:Nunito, Arial, sans-serif;
font-weight:800;
color:var(--pct-plum);
}
.pct-agenda .ic-header-subtitle{
color:var(--pct-grijs-licht);
font-size:14px;
}
/* --- de kaartjes --------------------------------------------------------- */
.pct-agenda .ic-list-event{
background:#fff !important;
border:1px solid var(--pct-lijn);
border-radius:14px !important;
padding:20px 22px !important;
margin-bottom:14px;
transition:border-color .15s ease, box-shadow .15s ease;
}
.pct-agenda .ic-list-event:hover{
border-color:var(--pct-paars);
box-shadow:0 8px 22px rgba(77,26,71,.08);
}
/* --- het datumblok ------------------------------------------------------- */
.pct-agenda .ic-box-date{
width:88px !important;
min-width:88px;
margin:0 22px 10px 0 !important;
padding:12px 6px !important;
border-radius:12px !important;
background:var(--pct-blush) !important;
text-align:center;
}
.pct-agenda .ic-box-date .ic-day{
font-family:Nunito, Arial, sans-serif !important;
font-weight:800 !important;
font-size:26px !important;
line-height:1.1 !important;
color:var(--pct-salie-tekst) !important;
}
.pct-agenda .ic-box-date .ic-month{
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:12px !important;
text-transform:uppercase;
letter-spacing:.09em;
color:var(--pct-salie-tekst) !important;
}
/* Jaartal en tijd stonden in WIT op een lichte achtergrond: onzichtbaar. */
.pct-agenda .ic-box-date .ic-year{
font-family:Nunito, Arial, sans-serif !important;
font-size:12px !important;
font-weight:600 !important;
color:var(--pct-paars-tekst) !important;
}
.pct-agenda .ic-box-date .ic-time{
font-size:12.5px !important;
color:var(--pct-grijs) !important;
}
/* --- titel en tekst ------------------------------------------------------ */
.pct-agenda .ic-event-title,
.pct-agenda .ic-title-header,
.pct-agenda .ic-event-title a,
.pct-agenda .ic-title-header a{
font-family:Nunito, Arial, sans-serif !important;
font-weight:800 !important;
font-size:19px !important;
line-height:1.3 !important;
color:var(--pct-plum) !important;
}
.pct-agenda .ic-place,
.pct-agenda .ic-next-date{
font-size:14px;
color:var(--pct-grijs-licht);
}
.pct-agenda .ic-descshort{
font-size:15px;
color:var(--pct-grijs);
line-height:1.6;
}
/* --- knoppen en paginering ----------------------------------------------
De paginering stond in een blauw (#49AFCD) dat nergens anders op de site
voorkomt. */
.pct-agenda .ic-btn{
border-radius:8px !important;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
}
.pct-agenda .ic-btn-info,
.pct-agenda .ic-btn.ic-active{
background:var(--pct-plum) !important;
border-color:var(--pct-plum) !important;
color:#fff !important;
}
.pct-agenda .ic-btn-small{
background:#fff !important;
border:1px solid var(--pct-lijn) !important;
color:var(--pct-plum) !important;
}
/* De categorieknoppen BOVENAAN de lijst (waarmee je filtert) krijgen sinds
12-09-2026 elk hun eigen kleur uit de categorie zelf: Workshop #8F5C8F,
Training #6E3D6B, Opleiding #4D1A47. iCagenda zet die kleur als inline
stijl op de knop, dus hier GEEN achtergrond opgeven -- anders wint deze
regel weer en zijn ze alle drie hetzelfde. */
.pct-agenda .ic-header-categories .ic-title-cat-btn{
border-color:transparent !important;
color:#fff !important;
border-radius:8px !important;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
}
/* Het categorielabel BIJ ELKE ACTIVITEIT is iets heel anders: een klein
chipje naast de titel. Dat mag niet gevuld pruim zijn -- dan staat er
donkere tekst op een donkere achtergrond en lees je er niets van.
iCagenda zet daar zelf een achtergrondkleur op als inline stijl (de
categoriekleur), vandaar !important. */
.pct-agenda .ic-title-cat a.ic-title-cat-btn,
.pct-agenda .ic-title-cat .ic-title-cat-btn{
color:#fff !important;
border:1px solid transparent !important;
border-radius:999px !important;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:12px !important;
letter-spacing:.04em;
padding:4px 12px !important;
}
/* De "Details"-knop stond in de sjabloonstijl: wit op #996699, 0 px rond. */
.pct-agenda .ic-actionbar a.btn,
.pct-agenda .ic-actionbar .btn,
.pct-agenda .ic-actionbar-readmore a{
background:var(--pct-salie) !important;
background-color:var(--pct-salie) !important;
color:#fff !important;
border:2px solid transparent !important;
border-radius:10px !important;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:14px !important;
padding:9px 18px !important;
text-decoration:none !important;
}
.pct-agenda .ic-actionbar a.btn:hover,
.pct-agenda .ic-actionbar .btn:hover{
background:#3C5B4B !important;
background-color:#3C5B4B !important;
}
/* --- de detailpagina van een activiteit ---------------------------------
Daar was de rangorde omgedraaid: de naam van de activiteit stond op
26 px in Raleway, en de categorie eronder op 35 px. */
body.view-event.itemid-683 .maincontent h1{
font-family:Nunito, Arial, sans-serif !important;
font-weight:800 !important;
font-size:36px !important;
line-height:1.2 !important;
color:var(--pct-plum) !important;
margin-bottom:6px;
}
body.view-event.itemid-683 .maincontent h2{
font-family:Nunito, Arial, sans-serif !important;
font-weight:600 !important;
font-size:17px !important;
color:var(--pct-paars-tekst) !important;
}
body.view-event.itemid-683 .maincontent h3{
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:15px !important;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--pct-paars) !important;
}
body.view-event.itemid-683 .maincontent img{
border-radius:14px;
border:1px solid var(--pct-lijn);
}
/* --- 35b. Het label "Volgeboekt" ----------------------------------------
Komt uit iCagenda zelf (tabblad Registraties: "Evenement geannuleerd?"
aan, met een eigen labeltekst). Stond eerst in de titel van de activiteit;
nu is het een echt veld, en dat is beter: de titel blijft de titel, en
iCagenda weet nu ook dat de activiteit vol is.
De plug-in geeft het de bootstrap-class `btn-danger`, wat hier uitpakte
als wit op #996699 met scherpe hoeken. Hieronder een rustig chipje dat
opvalt zonder alarmerend te zijn. */
.pct-agenda span.ic-event-cancelled{
display:inline-block;
background:#FBEAEA !important;
background-color:#FBEAEA !important;
color:#8C2F3B !important;
border:1px solid #F0CFCF !important;
border-radius:999px !important;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:12px !important;
letter-spacing:.04em;
padding:4px 12px !important;
text-transform:none;
vertical-align:middle;
}
/* ==========================================================================
36. HET AGENDABLOK OP DE HOMEPAGE GELIJK AAN DE AGENDAPAGINA
==========================================================================
Het blok op de homepage (module 866, mod_ic_event_list) en de agendapagina
(de component) gebruiken andere klassenamen voor hetzelfde ding:
homepage agendapagina
.ic-date-div .ic-box-date
.ic-day .ic-box-date .ic-day
Daardoor liepen ze uit elkaar: op de homepage bleef het datumblokje 36 px
op het blauw dat iCagenda er als inline stijl op zet, met bijna zwarte
cijfers. Hieronder krijgen beide dezelfde maat, kleur en letter.
Waarom !important: die achtergrondkleur staat per activiteit als inline
stijl in de HTML. Alleen !important wint daarvan.
========================================================================== */
.pct-agenda .ic-date-div{
width:88px !important;
min-width:88px;
padding:12px 6px !important;
border-radius:12px !important;
background:var(--pct-blush) !important;
text-align:center;
}
.pct-agenda .ic-date-div .ic-day{
font-family:Nunito, Arial, sans-serif !important;
font-weight:800 !important;
font-size:26px !important;
line-height:1.1 !important;
color:var(--pct-plum) !important;
}
.pct-agenda .ic-date-div .ic-month{
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:12px !important;
text-transform:uppercase;
letter-spacing:.09em;
color:var(--pct-paars-tekst) !important;
}
.pct-agenda .ic-date-img-box{ width:auto !important; }
@media only screen and (min-width:768px){
.pct-agenda .ic-event-div{ grid-template-columns:88px 1fr; }
}
/* Het label "Volgeboekt" heeft in de module andere klassen dan op de
agendapagina (`label label-important` in plaats van `btn btn-danger`).
Vandaar dat de regel hieronder alleen op `.ic-event-cancelled` hangt:
die naam gebruiken ze allebei. */
.pct-agenda span.ic-event-cancelled{
display:inline-block;
background:#FBEAEA !important;
background-color:#FBEAEA !important;
color:#8C2F3B !important;
border:1px solid #F0CFCF !important;
border-radius:999px !important;
font-family:Nunito, Arial, sans-serif !important;
font-weight:700 !important;
font-size:12px !important;
letter-spacing:.04em;
padding:4px 12px !important;
margin:0 0 4px !important;
vertical-align:middle;
}
/* ==========================================================================
37. DE TARIEVENTABELLEN (module 818 Paula, 819 Peter)
==========================================================================
Stonden als kale tabel in Raleway zonder lijnen, koprij of uitlijning; de
bedragen liepen niet onder elkaar. Hieronder een rustige prijslijst:
bedragen rechts uitgelijnd, een dunne lijn per regel, de koprij in de
huisletter. De lege derde kolom van de oorspronkelijke tabel valt weg.
========================================================================== */
.pct-tarieven{
width:100%;
border-collapse:collapse;
margin:14px 0 4px;
font-family:Raleway, Arial, sans-serif;
font-size:15.5px;
}
.pct-tarieven td{
/* 7px in plaats van 10px: die paar pixels zijn nodig zodat "TTC (Talking to
the Chakra's)" in de eerste kolom op een regel past. */
padding:9px 7px;
border-bottom:1px solid var(--pct-lijn);
vertical-align:top;
}
/* De eerste rij is de kop: "Tarieven per 1-1-2026 ... BTW-vrij" */
.pct-tarieven tr:first-child td{
font-family:Nunito, Arial, sans-serif;
font-weight:700;
font-size:13px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--pct-paars-tekst);
border-bottom:2px solid var(--pct-lijn);
padding-top:0;
}
.pct-tarieven tr:last-child td{ border-bottom:0; }
/* Bedragen rechts, zodat ze onder elkaar staan en je ze kunt vergelijken. */
.pct-tarieven td:nth-child(2){
text-align:right;
white-space:nowrap;
/* De rechterruimte is de goot waarin "(ex BTW)" hangt. Die is voor ELKE rij
even breed, ook voor rijen zonder ex BTW -- daardoor eindigen alle bedragen
op precies dezelfde lijn. Verander je deze waarde, verander dan ook
`right` bij .pct-btw hieronder. */
position:relative;
padding-right:56px;
font-family:Nunito, Arial, sans-serif;
font-weight:700;
color:var(--pct-plum);
}
/* De derde kolom is in beide tabellen leeg; die neemt alleen ruimte in. */
.pct-tarieven td:nth-child(3){ display:none; }
.pct-tarieven td:nth-child(4){
color:var(--pct-grijs-licht);
font-size:14px;
white-space:nowrap;
}
/* "(ex BTW)" hoort bij het bedrag, niet bij de eenheid. Het staat daarom in
dezelfde cel als het bedrag, maar kleiner en lichter zodat het bedrag zelf
het eerst opvalt. Stond het eerder in de laatste kolom, dan brak het daar
af op twee regels. */
.pct-tarieven .pct-btw{
position:absolute;
right:4px;
/* Uitlijnen op de EERSTE regel van de cel, niet op het midden: bij een rij
die twee regels hoog is (TTC) zakte "(ex BTW)" anders onder het bedrag. */
top:9px;
line-height:23px;
font-family:Raleway, Arial, sans-serif;
font-weight:400;
font-size:11.5px;
color:var(--pct-grijs-licht);
white-space:nowrap;
}
/* "BTW-vrij" staat in de kop boven de BEDRAGEN, want daar gaat het over: alle
bedragen zijn BTW-vrij, behalve de regels met "(ex BTW)" erachter. Stond het
eerder boven de kolom "Per uur / Per 1,5 uur", en dat las nergens naar. */
.pct-tarieven tr:first-child td:nth-child(2){
color:var(--pct-paars-tekst);
font-family:Nunito, Arial, sans-serif;
font-weight:700;
font-size:13px;
}
.pct-tarieven tr:first-child td:nth-child(4){ color:var(--pct-paars-tekst); }
@media only screen and (max-width:600px){
.pct-tarieven{ font-size:14.5px; }
.pct-tarieven td{ padding:8px 6px; }
.pct-tarieven td:nth-child(4){ font-size:13px; }
/* Op een smal scherm mag "(ex BTW)" wel afbreken; anders loopt de tabel
buiten het scherm. */
.pct-tarieven td:nth-child(4){ white-space:normal; }
/* Op een smal scherm is 72px goot te veel; het bedrag zou dan tegen de
naam aan komen te staan. */
.pct-tarieven td:nth-child(2){ padding-right:52px; }
.pct-tarieven .pct-btw{ font-size:11px; right:2px; }
}
/* LET OP: iCagenda zet de class `ic-event-cancelled` NIET alleen op het
labeltje, maar ook op de hele kaart van de activiteit. De regels hierboven
gelden daarom uitsluitend voor `span.ic-event-cancelled`. Ging dat een keer
mis, dan werd de hele kaart een grote roze pil -- dat is precies gebeurd.
Hieronder wordt de kaart voor de zekerheid teruggezet. */
.pct-agenda .ic-list-event.ic-event-cancelled,
.pct-agenda .ic-event-div.ic-event-cancelled{
background:#fff !important;
border-radius:14px !important;
border:1px solid var(--pct-lijn) !important;
color:inherit !important;
padding:20px 22px !important;
font-size:inherit !important;
letter-spacing:normal !important;
display:block;
}
/* ------------------------------------------------------------------
38. UITKLAPMENU -- kleur bij aanwijzen
Het sjabloon (nexus.min.css) zet hier rgba(0,0,0,.075): een grijze
balk die niet bij de site past. Zelfde selector, maar dan in de
lila van de huisstijl, met de tekst in het paars.
------------------------------------------------------------------ */
.hornav > ul > li > ul > li:hover > a,
.hornav > ul > li ul > li > ul > li:hover > a{
background-color:#F1E6EE;
color:var(--pct-paars-tekst);
}
/* ------------------------------------------------------------------
39. MOBIEL MENU
Het sjabloon heeft wel degelijk een uitschuifmenu (slideout.min.js,
`
` met het complete menu erin), en de knop staat er
ook: ``.
Alleen was hij op de telefoon onzichtbaar, om twee redenen tegelijk:
1. De knop is WIT en de kop van de site is ook wit.
2. Font Awesome wordt op deze site niet ingeladen (de geladen fonts zijn
IcoMoon, iCicons, Raleway en Nunito). Het icoontje `fa fa-bars` heeft
dus geen letterteken -- de knop was letterlijk leeg.
Daarom tekenen we de streepjes en het kruisje zelf met CSS. Werkt zonder
iconenfont en blijft scherp op elk scherm.
1140 px is de grens die het sjabloon zelf al gebruikt om `.hornav` te
verbergen en `.slideout-toggle-open` op display:block te zetten. Die
grens houden we aan; verzin hier geen eigen breekpunt.
------------------------------------------------------------------ */
@media only screen and (max-width:1140px){
/* --- de hamburgerknop -------------------------------------------- */
.slideout-toggle-open{
/* .header_main staat al op position:relative, dus hier hangt hij aan */
position:absolute;
top:50%;
margin-top:-23px; /* halve hoogte: netjes naast het logo */
right:12px;
width:46px; /* 46 px = comfortabel aantikbaar */
height:46px;
color:var(--pct-plum);
z-index:120;
}
.slideout-toggle-open i{ display:none !important; }
/* LET OP: geen `width` op de pseudo-elementen -- die wordt door het
sjabloon overschreven en dan krijg je drie streepjes van 6 px die
eruitzien als een verticaal beletselteken. Gebruik left + right. */
.slideout-toggle-open::before,
.slideout-toggle-open::after{
content:"";
position:absolute;
left:9px; right:9px;
height:2px;
background:currentColor;
border-radius:2px;
}
/* Bovenste streepje plus, via de schaduw, het middelste erbij. */
.slideout-toggle-open::before{ top:15px; box-shadow:0 8px 0 currentColor; }
.slideout-toggle-open::after{ top:31px; }
/* Staat het menu open, dan verdwijnt de hamburger. Hij zou anders een
dode knop zijn: het sjabloon koppelt hem aan open(), niet aan toggle().
Sluiten gaat met het kruisje in het paneel. */
html.slideout-open .slideout-toggle-open{ opacity:0; pointer-events:none; }
/* --- het paneel schuift OVER de pagina, vanaf links --------------- */
/* Standaard duwt slideout.js de hele pagina opzij met een inline
`transform: translateX(-256px)` op .slideout-panel, en staat het menu
op `right:0` (ondanks de klassenaam `slideout-menu-left`).
Wij zetten dat allebei stop: de pagina blijft staan en het menu komt
eroverheen. Een inline stijl overrule je alleen met !important. */
html.slideout-open .slideout-panel{ transform:none !important; }
/* Verduistering over de pagina. Vangt ook de tikjes op, zodat je niet
per ongeluk een link achter het menu aantikt. */
html.slideout-open .slideout-panel::after{
content:"";
position:fixed; inset:0;
background:rgba(0,0,0,.38);
z-index:900;
}
/* Het menu staat altijd klaar (display:block), maar buiten beeld en op
visibility:hidden. Daardoor kan het echt schuiven; met display:none
zou er geen beginframe zijn en dus geen animatie. */
#slideout.slideout-menu{
display:block !important;
left:0; right:auto;
width:280px;
z-index:1000;
transform:translateX(-100%);
visibility:hidden;
transition:transform .3s ease, visibility .3s;
box-shadow:0 0 24px rgba(0,0,0,.35);
}
html.slideout-open #slideout.slideout-menu{
transform:translateX(0);
visibility:visible;
}
/* --- kopbalk van het paneel: "Menu" + kruisje -------------------- */
#slideout .slideout-toggle-close{
display:block; position:relative; height:56px; font-size:0;
border-bottom:1px solid rgba(255,255,255,.16);
}
#slideout .slideout-toggle-close i{ display:none !important; }
#slideout .slideout-toggle-close::before{
content:"Menu";
position:absolute; left:20px; top:50%; transform:translateY(-50%);
font-family:Nunito, Arial, sans-serif; font-size:17px; font-weight:700;
letter-spacing:.06em; color:#fff;
}
#slideout .slideout-toggle-close::after{
content:"\00d7"; /* × */
position:absolute; right:18px; top:50%; transform:translateY(-50%);
font-family:Arial, sans-serif; font-size:30px; line-height:1; color:#fff;
}
/* --- de menuregels: groter en ruimer ----------------------------- */
/* Stond op 14 px; dat leest niet lekker op een telefoon. */
#slideout ul.menu > li > a{
display:block;
font-size:17px; line-height:1.3;
padding:15px 20px;
letter-spacing:.03em;
color:#fff;
}
#slideout ul.menu > li{ border-bottom:1px solid rgba(255,255,255,.12); }
#slideout ul.mod-menu__sub > li > a{
display:block;
font-size:15px; line-height:1.3;
padding:11px 20px 11px 34px; /* ingesprongen onder het hoofditem */
color:rgba(255,255,255,.82);
}
#slideout ul.mod-menu__sub > li{ border-top:1px solid rgba(255,255,255,.08); }
}
/* ------------------------------------------------------------------
40. MEDITATIESPELERS (artikel 144, /methodieken/meditaties)
De twee `