met drie keer
(een
icoontje, een kop en een tekst). Er hoefde dus niets aan de inhoud te
veranderen, alleen aan de opmaak.
Ze stonden in een raster van minimaal 300px per kolom, met een max van
1200px en alles gecentreerd. Op een breed scherm gaven drie blokjes dan
twee op de eerste rij en één eronder. Nu altijd drie naast elkaar, in een
lichtblauw vak, links uitgelijnd.
=========================================================================== */
.hsb-lp__intro .apple-intro { max-width: none; padding: 0; }
.hsb-lp__intro .lead-text {
max-width: 46em;
margin: 0 0 40px;
text-align: left;
font-size: 19px;
line-height: 1.7;
font-weight: 400;
color: #44525f;
}
.hsb-lp__intro .apple-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
max-width: none;
margin: 0;
padding: 0;
}
.hsb-lp__intro .apple-item {
background: #eef4f9;
border-radius: 24px 2px 24px 2px;
padding: 28px 26px 30px;
text-align: left;
}
/* Het icoontje uit het CMS in een wit rondje, zoals bij de stappen op de
bedankpagina en de kaarten op contact. */
.hsb-lp__intro .apple-item i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 50%;
background: #fff;
color: var(--lp-oranje);
font-size: 20px;
}
.hsb-lp__intro .apple-item h3 {
margin: 0 0 8px;
font-size: 19px;
line-height: 1.25;
color: var(--lp-blauw);
text-align: left;
}
.hsb-lp__intro .apple-item p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--lp-grijs);
text-align: left;
}
/* --- De rij gewone kaarten -------------------------------------------------- */
/* De kaarten brengen hun eigen bootstrap-kolommen mee; deze rij zorgt alleen
dat ze met dezelfde tussenruimte staan als hierboven. */
.hsb-lp__rij { margin-bottom: 8px; }
/* --- De doorlinks ----------------------------------------------------------- */
.hsb-lp__doorlink {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.hsb-lp__knop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 0 28px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: background-color .2s, border-color .2s, color .2s;
}
.hsb-lp__knop--vol {
background: var(--lp-blauw);
color: #fff;
border: 1px solid var(--lp-blauw);
}
.hsb-lp__knop--vol:hover { background: var(--lp-blauw-diep); border-color: var(--lp-blauw-diep); color: #fff; }
.hsb-lp__knop--lijn {
background: #fff;
color: var(--lp-blauw);
border: 1px solid var(--lp-lijn);
}
.hsb-lp__knop--lijn:hover { background: var(--lp-vlak); border-color: #c6d0da; color: var(--lp-blauw); }
.hsb-lp__knop svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.hsb-lp__knop--vol:hover svg { transform: translateX(4px); }
/* --- Veelgestelde vragen ----------------------------------------------------- */
.hsb-lp__faq { padding: 72px 0 0; }
/* --- De afsluiter ------------------------------------------------------------- */
.hsb-lp__cta { padding: 72px 0 80px; }
.hsb-lp__ctablok {
background: var(--lp-vlak);
border-radius: 40px 2px 40px 2px;
padding: 48px 44px;
text-align: center;
}
.hsb-lp__ctablok h2 {
margin: 0 0 10px;
font-size: 30px;
line-height: 1.2;
color: var(--lp-blauw);
}
.hsb-lp__ctablok p {
margin: 0 auto 28px;
max-width: 44em;
font-size: 16.5px;
line-height: 1.7;
color: var(--lp-grijs);
}
.hsb-lp__ctaknoppen {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
/* --- Smallere schermen -------------------------------------------------------- */
@media (max-width: 1199px) {
.hsb-lp__kop { font-size: 32px; }
}
@media (max-width: 991px) {
.hsb-lp__intro .apple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hsb-lp__experts, .hsb-lp__faq { padding-top: 48px; }
.hsb-lp__cta { padding: 48px 0 56px; }
.hsb-lp__ctablok { padding: 36px 28px; }
}
@media (max-width: 575px) {
.hsb-lp__intro { padding-top: 36px; }
.hsb-lp__kop { font-size: 26px; }
.hsb-lp__tekst { font-size: 16.5px; }
.hsb-lp__intro .apple-grid { grid-template-columns: minmax(0, 1fr); }
.hsb-lp__intro .apple-item { border-radius: 20px 2px 20px 2px; padding: 22px 20px 24px; }
.hsb-lp__intro .lead-text { font-size: 17px; }
.hsb-lp__ctablok { border-radius: 28px 2px 28px 2px; padding: 28px 20px; }
.hsb-lp__ctablok h2 { font-size: 23px; }
.hsb-lp__knop { width: 100%; }
}
/* ---------------------------------------------------------------------------
DE ICOONTJES UIT HET CMS
assets/css/bootstrap-icons.min.css staat op de server, maar verwijst naar
fonts/bootstrap-icons.woff2 RELATIEF aan zichzelf -- dus naar
/assets/css/fonts/..., en daar staat niets. De fonts staan in
/assets/fonts/. Daardoor laadde het lettertype nooit en bleven de icoontjes
leeg. Dat is ook de reden dat er elders een CDN voor wordt gebruikt.
Deze regel staat NA dat bestand en wijst naar de goede plek, dus hiermee
werkt het lokale bestand alsnog. Eén verzoek minder naar een CDN.
--------------------------------------------------------------------------- */
@font-face {
font-display: block;
font-family: "bootstrap-icons";
src: url("/assets/fonts/bootstrap-icons.woff2") format("woff2"),
url("/assets/fonts/bootstrap-icons.woff") format("woff");
}
/* De drie blokjes even hoog, ook als de ene tekst langer is dan de andere. */
.hsb-lp__intro .apple-grid { align-items: stretch; }
.hsb-lp__intro .apple-item { display: flex; flex-direction: column; }