i.p.v. ; mail padt beide in dezelfde image-cel (renderItemHalf). */
.wv-item--l > .wv-item__image,
.wv-item--l > .wv-item__image-link,
.wv-item--left > .wv-item__image,
.wv-item--left > .wv-item__image-link,
.wv-item--lv > .wv-item__image,
.wv-item--lv > .wv-item__image-link {
padding: var(--wv-lr-image-padding, 0);
}
.wv-item--r > .wv-item__image,
.wv-item--r > .wv-item__image-link,
.wv-item--right > .wv-item__image,
.wv-item--right > .wv-item__image-link,
.wv-item--rv > .wv-item__image,
.wv-item--rv > .wv-item__image-link {
padding: var(--wv-lr-image-padding-r, 0);
}
/* L/R-item kop margin + lead padding + category padding — direct uit items.{side}.padding.{kop,body,category} */
.wv-item--l .wv-item__title,
.wv-item--left .wv-item__title,
.wv-item--lv .wv-item__title {
margin: 0 0 12px 0;
}
.wv-item--r .wv-item__title,
.wv-item--right .wv-item__title,
.wv-item--rv .wv-item__title {
margin: 0 0 12px 0;
}
.wv-item--l .wv-item__lead,
.wv-item--left .wv-item__lead,
.wv-item--lv .wv-item__lead {
padding: 12px 0 12px 0;
}
.wv-item--r .wv-item__lead,
.wv-item--right .wv-item__lead,
.wv-item--rv .wv-item__lead {
padding: 4px 0 12px 0;
}
.wv-item--l .wv-item__date,
.wv-item--left .wv-item__date,
.wv-item--lv .wv-item__date {
padding: 0;
}
.wv-item--r .wv-item__date,
.wv-item--right .wv-item__date,
.wv-item--rv .wv-item__date {
padding: 0;
}
.wv-item--l .wv-item__category,
.wv-item--left .wv-item__category,
.wv-item--lv .wv-item__category {
padding: 0 0 12px 0;
}
.wv-item--r .wv-item__category,
.wv-item--right .wv-item__category,
.wv-item--rv .wv-item__category {
padding: 0 10px 12px 0;
}
.wv-item--f .wv-item__category,
.wv-item--full .wv-item__category,
.wv-item--b .wv-item__category,
.wv-item--big .wv-item__category {
padding: 0 0 12px 0;
}
/* Grid items: per-kolom padding (odd=links, even=rechts), parallel aan items.grid.{left,right}.padding.* */
.wv-grid .wv-item:nth-child(odd) {
padding: 0 16px;
}
.wv-grid .wv-item:nth-child(even) {
padding: 0 16px;
}
.wv-grid .wv-item:nth-child(odd) .wv-item__image {
padding: 0;
}
.wv-grid .wv-item:nth-child(even) .wv-item__image {
padding: 0;
}
.wv-grid .wv-item:nth-child(odd) .wv-item__title {
margin: 16px 0 8px 0;
}
.wv-grid .wv-item:nth-child(even) .wv-item__title {
margin: 16px 0 8px 0;
}
.wv-grid .wv-item:nth-child(odd) .wv-item__lead {
padding: 0 0 12px 0;
}
.wv-grid .wv-item:nth-child(even) .wv-item__lead {
padding: 0 0 12px 0;
}
/* Grid-button-cell: per-kolom outer wrapper + inner button-padding */
.wv-grid__button-cell:nth-child(odd) {
padding: 0 16px;
}
.wv-grid__button-cell:nth-child(even) {
padding: 0 16px;
}
.wv-grid__button-cell:nth-child(odd) > .wv-button {
margin: 0 0 20px 0;
}
.wv-grid__button-cell:nth-child(even) > .wv-button {
margin: 0 0 20px 0;
}
/* Subkop (categorie-label boven kop) — items.subkop.* + per-kolom padding via grid.{left,right}.padding.subkop */
.wv-item__sub-kop {
color: var(--wv-subkop-color);
font-size: var(--wv-subkop-font-size);
font-weight: var(--wv-subkop-font-weight);
text-transform: var(--wv-subkop-text-transform);
margin: 0;
line-height: 1.2;
}
.wv-grid .wv-item:nth-child(odd) .wv-item__sub-kop {
padding: ;
}
.wv-grid .wv-item:nth-child(even) .wv-item__sub-kop {
padding: ;
}
.wv-item--l .wv-item__sub-kop,
.wv-item--left .wv-item__sub-kop,
.wv-item--lv .wv-item__sub-kop {
padding: 0;
}
.wv-item--r .wv-item__sub-kop,
.wv-item--right .wv-item__sub-kop,
.wv-item--rv .wv-item__sub-kop {
padding: 0;
}
.wv-item--f .wv-item__sub-kop,
.wv-item--full .wv-item__sub-kop,
.wv-item--b .wv-item__sub-kop,
.wv-item--big .wv-item__sub-kop {
padding: 0;
}
.wv-grid .wv-item:nth-child(odd) .wv-item__category {
padding: 0;
}
.wv-grid .wv-item:nth-child(even) .wv-item__category {
padding: 0;
}
/* Big items: per-cel padding uit items.big.padding.* */
.wv-item--f,
.wv-item--full,
.wv-item--b,
.wv-item--big {
padding: 0;
}
.wv-item--f > .wv-item__content,
.wv-item--full > .wv-item__content,
.wv-item--b > .wv-item__content,
.wv-item--big > .wv-item__content {
padding: 20px 30px 20px 30px;
}
.wv-item--f .wv-item__title,
.wv-item--full .wv-item__title,
.wv-item--big .wv-item__title {
margin: 0 0 12px 0;
}
.wv-item--f .wv-item__lead,
.wv-item--full .wv-item__lead,
.wv-item--big .wv-item__lead {
padding: 0 0 16px 0;
}
.wv-item--f .wv-button,
.wv-item--full .wv-button,
.wv-item--b .wv-button,
.wv-item--big .wv-button {
margin: 12px 0 12px 0;
}
.wv-item--f .wv-item__image, .wv-item--full .wv-item__image, .wv-item--b .wv-item__image, .wv-item--big .wv-item__image,
.wv-item--f .wv-item__image-link, .wv-item--full .wv-item__image-link, .wv-item--b .wv-item__image-link, .wv-item--big .wv-item__image-link {
padding: 0 0 16px 0;
}
/* Text-only big items (geen image): cat-icon top-padding 0 om dubbele lege
ruimte boven (wrapper-top + cat-top) te vermijden. wv-item--no-image
wordt door webversie.php gezet als item.image_url leeg is. */
.wv-item--f.wv-item--no-image .wv-item__category,
.wv-item--full.wv-item--no-image .wv-item__category,
.wv-item--b.wv-item--no-image .wv-item__category,
.wv-item--big.wv-item--no-image .wv-item__category {
padding-top: 0;
}
/* L/R items: per-cel padding uit items.{side}.padding.* */
.wv-item--l > .wv-item__image,
.wv-item--left > .wv-item__image,
.wv-item--lv > .wv-item__image {
padding: 24px 15px 16px 15px;
}
.wv-item--r > .wv-item__image,
.wv-item--right > .wv-item__image,
.wv-item--rv > .wv-item__image {
padding: 24px 15px 16px 15px;
}
.wv-item--l > .wv-item__body,
.wv-item--left > .wv-item__body,
.wv-item--lv > .wv-item__body {
padding: 16px 15px 16px 15px;
}
.wv-item--r > .wv-item__body,
.wv-item--right > .wv-item__body,
.wv-item--rv > .wv-item__body {
padding: 16px 15px 16px 15px;
}
.wv-item--l .wv-button,
.wv-item--left .wv-button,
.wv-item--lv .wv-button {
margin: 12px 0 12px 0;
}
.wv-item--r .wv-button,
.wv-item--right .wv-button,
.wv-item--rv .wv-button {
margin: 12px 0 12px 0;
}
/* Edition title (h1) — alle styling uit email_config.edition_title (geen hardcoded fallback) */
.wv-edition-title {
margin: 0;
text-align: center;
background-color: #ffffff;
color: #2E5170;
font-family: 'BreeSerif', Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: 400;
line-height: 120%;
padding: 20px 15px;
}
/* Contact footer (two_column_contact layout) */
.wv-row.wv-contact-footer {
background-color: var(--wv-footer-bg);
padding: var(--wv-footer-padding);
font-family: var(--wv-font-body);
font-size: var(--wv-footer-font-size);
color: var(--wv-footer-color);
}
/* p margins komen van wv-cfs-* classes (uit config HTML) */
.wv-contact-footer__col span {
color: var(--wv-primary);
}
.wv-contact-footer__col a {
color: var(--wv-footer-color);
text-decoration: underline;
}
.wv-contact-footer__col img {
display: block;
border: 0;
height: auto;
margin: 6px 0;
}
.wv-contact-footer__bottom {
font-size: calc(var(--wv-footer-font-size) - 1px);
color: var(--wv-footer-link-color);
margin-top: 10px;
}
.wv-contact-footer__bottom a {
color: var(--wv-footer-link-color);
text-decoration: underline;
}
.wv-contact-footer__links {
margin-top: 10px;
font-size: calc(var(--wv-footer-font-size) - 1px);
}
.wv-contact-footer__links a {
color: var(--wv-footer-link-color);
text-decoration: underline;
margin-right: 12px;
}
.wv-contact-footer__icon {
padding: 20px 0 0 0;
}
.wv-contact-footer__icon img {
display: block;
height: auto;
width: px;
max-width: 100%;
}
.wv-contact-footer__logo {
padding: 20px 0 16px 0;
}
.wv-contact-footer__logo--right {
text-align: right;
}
.wv-contact-footer__logo--center {
text-align: center;
}
.wv-contact-footer__logo img {
display: inline-block;
height: auto;
}
.wv-divider {
background: var(--wv-divider-bg);
padding: var(--wv-divider-padding);
}
.wv-divider__img {
display: block;
width: 100%;
height: auto;
}
/* Page layout — body.webversie selector (specificity 0,1,1) wint van body.public-page */
body.webversie {
background: var(--wv-page-bg);
min-height: 100vh;
}
.artikel {
background: #ffffff;
min-height: 100vh;
}
.webversie-content {
max-width: var(--wv-max-width);
margin: 0 auto;
padding: 0 1rem;
}
.artikel-content {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
background: #fffffe;
}
/* Typography */
.webversie,
.artikel {
font-family: var(--wv-font-body);
font-size: var(--wv-size-body);
line-height: var(--wv-line-height-body);
color: var(--wv-color-body);
}
.webversie h1, .webversie h2, .webversie h3,
.artikel h1, .artikel h2, .artikel h3,
.webversie-title h1,
.artikel-header h1 {
font-family: var(--wv-font-kop);
color: var(--wv-color-kop);
line-height: var(--wv-line-height-kop);
}
.webversie a:not(.wv-button),
.artikel a:not(.wv-button) {
color: var(--wv-color-link);
}
/* Header/Title section */
.webversie-title {
background: var(--wv-item-bg);
padding: 1.5rem;
}
.artikel-header {
padding: 1.5rem 1.5rem 0;
}
.webversie-title h1,
.artikel-header h1 {
font-size: calc(var(--wv-size-kop) * 1.2);
margin: 0 0 0.5rem 0;
}
/* Voorwoord */
.webversie-voorwoord {
background: var(--wv-item-bg);
padding: 0 1.5rem 1.5rem;
}
/* Items */
.webversie-items {
margin-top: 1rem;
}
.item {
background: var(--wv-item-bg);
margin-bottom: 1rem;
overflow: hidden;
}
.item:nth-child(even) {
background: #fffffe;
}
/* Grid row container: 2 items side-by-side on desktop */
.item-grid-row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.item-grid-row .item {
margin-bottom: 0;
}
.item__body {
padding: 0 0 12px 0 1.5rem 0 0 16px 0;
}
.item__title {
font-family: var(--wv-font-kop);
font-size: var(--wv-size-kop);
color: var(--wv-color-kop);
margin: 0 0 0.75rem;
line-height: var(--wv-line-height-kop);
}
.item__lead {
font-weight: 500;
margin: 0 0 0.75rem;
}
.item__text {
line-height: var(--wv-line-height-body);
}
.item__text p {
margin: 0 0 0.75rem;
}
.item__text p:last-child {
margin-bottom: 0;
}
/* Category dividers */
.category-divider {
background: var(--wv-cat-bg);
color: var(--wv-cat-color);
font-size: px;
font-weight: 600;
text-transform: ;
letter-spacing: 0.05em;
padding: 0.75rem 1.5rem;
margin: 1rem 0 0;
}
/* Inter-item divider (items.divider.*) — height + bg from CSS vars */
.wv-row.wv-item-divider {
height: var(--wv-item-divider-height, 0);
background: var(--wv-item-divider-bg, transparent) !important;
}
/* Webversie button — underline op hover (mirror mail NewsletterRenderer:387 universele rule) */
.wv-button:hover { text-decoration: underline; }
/* Conditioneel: line-height + hover-bg/color alleen wanneer config aanwezig */
.wv-button { line-height: 32px; }
/* Buttons */
.item__button,
.artikel-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 5px 20px;
font-size: 15px;
font-weight: 400;
font-family: var(--wv-btn-font-family, inherit);
line-height: var(--wv-btn-line-height, normal);
text-decoration: none !important;
border-radius: var(--wv-btn-radius);
transition: background 0.2s, transform 0.1s;
background: #ffffff;
color: var(--wv-btn-color) !important;
border: 1px solid #2E5170;
}
.item__button:hover,
.artikel-button:hover {
background: var(--wv-btn-hover-bg, #2E5170);
color: var(--wv-btn-hover-color, #ffffff) !important;
text-decoration: none !important;
transform: translateY(-1px);
}
.item__button--external {
background: transparent;
color: #2E5170 !important;
border: 1px solid #2E5170;
}
.item__button--external:hover {
background: #2E5170;
color: #ffffff !important;
text-decoration: none !important;
}
/* Artikel page */
.artikel-body {
padding: 0 1.5rem 1.5rem;
}
.artikel-lead {
font-size: calc(var(--wv-size-body) * 1.1);
font-weight: 500;
color: var(--wv-color-body);
line-height: 1.5;
margin: 0;
}
.artikel-category {
display: inline-block;
background: var(--wv-cat-bg);
color: var(--wv-cat-color);
font-size: 0.75rem;
font-weight: 600;
text-transform: ;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 3px;
margin-bottom: 0.75rem;
}
.paragraph {
padding-top: 0;
}
.paragraph + .paragraph {
margin-top: 0;
}
.paragraph h2 {
font-size: calc(var(--wv-size-kop) * 0.9);
margin: 0.5rem 0;
}
.paragraph-text {
line-height: var(--wv-line-height-body);
}
.artikel-external-link {
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.artikel-external-link.no-border {
border-top: none;
margin-top: 0;
padding-top: 0;
}
/* Back link */
.artikel-back {
background: #ffffff;
padding: 1.5rem 1rem;
}
.artikel-back-inner {
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem;
}
.artikel-back a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #666;
text-decoration: none;
}
.artikel-back a:hover {
color: var(--wv-color-link);
}
/* Images */
.item__image img,
.artikel-figure img {
width: 100%;
height: auto;
display: block;
}
.artikel-figure {
margin: 0 0 1rem;
}
.artikel-figure img {
border-radius: 4px;
}
.artikel-figure figcaption {
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
}
/* Carousel */
.artikel-carousel {
margin: 0 0 0.25rem;
border-radius: 4px;
overflow: hidden;
}
.artikel-carousel.carousel-fade .carousel-item {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.artikel-carousel.carousel-fade .carousel-item.active {
position: relative;
}
.artikel-carousel.carousel-fade .active.carousel-item-start,
.artikel-carousel.carousel-fade .active.carousel-item-end {
transition: opacity 0s 0.6s;
}
.artikel-carousel img {
width: 100%;
height: auto;
}
.carousel-caption-text {
font-size: 0.875rem;
color: #666;
margin: 0.25rem 0 0;
}
.carousel-caption-text .badge {
background: #666;
font-weight: normal;
}
/* Layout: big (full-width stacked) */
.item--big,
.item--b {
background: #ffffff;
}
.item--big:nth-child(even),
.item--b:nth-child(even) {
background: #fffffe;
}
/* Layout: left (image left, text right) */
.item--left,
.item--l {
background: #ffffff;
}
.item--left:nth-child(even),
.item--l:nth-child(even) {
background: #fffffe;
}
/* Layout: right (image right, text left) */
.item--right,
.item--r {
background: #ffffff;
}
.item--right:nth-child(even),
.item--r:nth-child(even) {
background: #fffffe;
}
/* Layout: grid (compact side-by-side) */
.item--grid {
background: #ffffff;
}
/* Desktop layout variations */
@media (min-width: 480px) {
/* Grid row: 2 columns on desktop */
.item-grid-row {
grid-template-columns: 1fr 1fr;
}
/* Left layout: image 270px / text 270px */
.item--left,
.item--l {
display: grid;
grid-template-columns: 0.5fr 0.5fr;
gap: 0;
}
.item--left .item__image,
.item--l .item__image {
padding: 0;
}
.item--left .item__body,
.item--l .item__body {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Right layout: text 270px / image 270px */
.item--right,
.item--r {
display: grid;
grid-template-columns: 0.5fr 0.5fr;
gap: 0;
}
.item--right .item__image,
.item--r .item__image {
order: 2;
padding: 0;
}
.item--right .item__body,
.item--r .item__body {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Grid layout: stacked (image on top, text below) - same as email */
/* Grid items do NOT have side-by-side image/text - they are vertical cards */
.item--grid .item__body {
padding: 1rem 1rem 1.25rem;
}
/* Artikel figure layouts — 50% width for side images (artikel is wider than email) */
.artikel-figure--left {
float: left;
width: 50%;
margin: 0 1.5rem 1rem 0;
}
.artikel-figure--right {
float: right;
width: 50%;
margin: 0 0 1rem 1.5rem;
}
.artikel-carousel--left {
float: left;
width: 50%;
margin: 0 1.5rem 1rem 0;
}
.artikel-carousel--right {
float: right;
width: 50%;
margin: 0 0 1rem 1.5rem;
}
.paragraph--side::after {
content: '';
display: table;
clear: both;
}
}
/* Full-width mode */
.public-main.full-width {
padding: 0;
}
/* Navbar styling */
.webversie-nav {
padding: 0.5rem 0;
}
.webversie-nav .navbar-brand img {
transition: opacity 0.2s;
}
.webversie-nav .navbar-brand:hover img {
opacity: 0.8;
}
/* Link styling */
.artikel-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: var(--wv-color-link) !important;
text-decoration: none;
font-weight: 500;
}
.artikel-link:hover {
text-decoration: underline;
color: var(--wv-color-link) !important;
}
/* Focused item highlight */
.item--focused {
box-shadow: 0 0 0 3px var(--wv-color-link);
}
/* Default item-bg (mirror items.big.background_color) */
.wv-row:not(.wv-item-divider):not(.wv-row--has-bg):not(.wv-footer):not(.wv-footer-social-row) {
background-color: var(--wv-item-bg);
}
/* Event-band: outer teal, inner item wit (mail-mirror) */
.wv-row--event .wv-item {
background-color: var(--wv-item-bg);
}
/* Event-row gap: divider.height teal-padding alleen onder inner-item */
.wv-row.wv-row--event {
padding: 0 0 0px 0;
}
.wv-item__image--video,
.wv-item__image-link.wv-item__image--video {
position: relative;
display: block;
}
.wv-item__image--video::after {
content: "";
background-image: url('/gfx/email/play-button-65.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65px;
aspect-ratio: 1 / 1;
pointer-events: none;
}
:root {
--wv-alt-color-1: #ffffff;
--wv-alt-color-count: 1;
}
/* Background color classes for item overrides */
.wv-row.wv-bg-17 { background-color: #ffffff; }
.wv-row.wv-bg-18 {
background-color: #63778c;
--wv-color-kop: #ffffff;
--wv-body-color: #ffffff;
}
.wv-row.wv-bg-18 a:not(.wv-button) { color: #ffffff; }
@media (min-width: 621px) {
.wv-row.wv-bg-18 { position: relative; }
.wv-row.wv-bg-18::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 30px; height: 120px; background: url('/tenants/enschede/gfx/templates/8/left_bg_2.png') bottom left / 100% auto no-repeat; pointer-events: none; }
}
.wv-row.wv-bg-19 {
background-color: #d8222a;
--wv-color-kop: #ffffff;
--wv-body-color: #ffffff;
}
.wv-row.wv-bg-19 a:not(.wv-button) { color: #ffffff; }
@media (min-width: 621px) {
.wv-row.wv-bg-19 { position: relative; }
.wv-row.wv-bg-19::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 30px; height: 120px; background: url('/tenants/enschede/gfx/templates/8/left_bg_3.png') bottom left / 100% auto no-repeat; pointer-events: none; }
}
/* Contact footer inline style classes */
.wv-cfs-16a25e { margin:0 0 4px 0;font-size:15px;line-height:120%;color:#2E5170;font-family:BreeSerif, Arial, Helvetica, sans-serif }
.wv-cfs-84c628 { margin:4px 0 0 0;font-size:13px;line-height:120%;color:#1A1919 }
.wv-cfs-838c4a { color:#62758D;text-decoration:underline }