/* UrbanVue frontend-laag: merk-footer, scroll-reveal, hover-micro-interacties,
leesbaarheid. Palet = design system (bron #0F766E). */
:root {
--uv-teal: #0F766E;
--uv-teal-2: #14B8A6;
--uv-mint: #2DD4BF;
--uv-ink: #111827;
--uv-gray: #6B7280;
--uv-gray-4: #9CA3AF;
--uv-border: #E5E7EB;
--uv-wa: #25D366;
--uv-amber: #FCB900; /* accent voor attentie/status (CROW-niveau B), donkere tekst erop */
--uv-amber-tint: #FFF8E1; /* lichte amber-achtergrond voor callouts */
}
html { scroll-behavior: smooth; }
/* ----------------------------------------------------------------------------
Scroll-reveal (no-flash via .uv-anim op , failsafe via .uv-loaded)
---------------------------------------------------------------------------- */
.uv-anim .elementor-top-section,
.uv-anim .uv-footer {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
transform .7s cubic-bezier(.2, .7, .2, 1);
will-change: opacity, transform;
}
.elementor-top-section.uv-in,
.uv-footer.uv-in,
.uv-loaded .elementor-top-section,
.uv-loaded .uv-footer {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.uv-anim .elementor-top-section,
.uv-anim .uv-footer { opacity: 1; transform: none; transition: none; }
}
/* ----------------------------------------------------------------------------
Hover-micro-interacties
---------------------------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-icon-box {
transition: transform .25s ease;
}
.elementor-widget-icon-box:hover { transform: translateY(-4px); }
/* UrbanVue feature-icon badge: zachte teal-tint, afgerond, 56px.
Achtergrond (tint) + icoonkleur komen uit Elementors stacked-weergave; hier
alleen vaste maat, afronding en hover-accent. Alle iconboxes zijn stacked. */
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.elementor-widget-icon-box.elementor-view-stacked:hover .elementor-icon {
box-shadow: 0 6px 16px rgba(15, 118, 110, .14);
}
.elementor-button,
.wp-block-button__link {
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
}
.elementor-button:hover,
.wp-block-button__link:hover {
transform: translateY(-2px);
filter: brightness(1.06);
}
/* Toepassing-kaarten (bordered columns) krijgen een subtiele lift + teal-rand */
.elementor-column[class*="elementor-element"]:hover > .elementor-widget-wrap > .elementor-widget-text-editor a {
text-decoration: none;
}
.elementor-element .elementor-column .elementor-widget-wrap {
transition: border-color .25s ease, transform .25s ease;
}
/* Links in de body krijgen een nette teal-hover */
.elementor-widget-text-editor a { transition: color .2s ease, opacity .2s ease; }
.elementor-widget-text-editor a:hover { opacity: .8; }
/* ----------------------------------------------------------------------------
Signature animaties: gradient, AI-scan hero, KPI count-up, CROW-balk
---------------------------------------------------------------------------- */
/* Animerende gradient op CTA-/accent-banden */
.elementor-section.uv-grad { background-size: 220% 220% !important; animation: uvGrad 14s ease infinite; }
@keyframes uvGrad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* KPI count-up band */
.uv-kpi { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 56px; text-align: center; }
.uv-kpi-item { min-width: 140px; }
.uv-kpi-num { display: block; font-size: 46px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.01em; }
.uv-kpi-suffix { color: #FBBF24; } /* amber "+" achter het getal */
.uv-kpi-label { display: block; margin-top: 8px; font-size: 15px; color: #eafaf6; font-weight: 500; }
/* "Vertrouwd door" — logo-strip: alle logo's op UNIFORME HOOGTE en gecentreerd,
grijswaarden met kleur bij hover. Hoogte-constraint i.p.v. vaste cellen, zodat
sterk verschillende verhoudingen toch strak op één lijn staan. */
.uv-trust-logos {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 20px 38px; margin: 6px 0 0;
}
.uv-trust-logos img {
height: 30px !important; width: auto !important; max-width: 200px; object-fit: contain;
filter: grayscale(1); opacity: .6;
transition: filter .2s ease, opacity .2s ease;
}
.uv-trust-logos img:hover { filter: grayscale(0); opacity: 1; }
.uv-trust-logos .uv-trust-text {
display: inline-flex; align-items: center;
font-size: 15px; font-weight: 600; color: #6B7280; line-height: 1.2;
transition: color .2s ease;
}
.uv-trust-logos .uv-trust-text:hover { color: var(--uv-ink); }
@media (max-width: 600px) {
.uv-trust-logos { gap: 16px 26px; }
.uv-trust-logos img { height: 26px !important; max-width: 150px; }
.uv-trust-logos .uv-trust-text { font-size: 14px; }
}
/* AI-scan hero */
.uv-scan {
position: relative; width: 100%; max-width: 480px; margin: 0 auto;
aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden;
border: 1px solid rgba(15, 118, 110, .25);
}
/* !important: Elementors globale img{height:auto} won, waardoor niet-vierkante
renders het kader niet vulden. */
.uv-scan-img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.uv-scan-grid {
position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(45, 212, 191, .13) 1px, transparent 1px),
linear-gradient(90deg, rgba(45, 212, 191, .13) 1px, transparent 1px);
background-size: 34px 34px; mix-blend-mode: overlay;
}
/* Verticale scanbalk die van links naar rechts veegt, in amber. */
.uv-scan-line {
position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
background: linear-gradient(180deg, transparent, #FBBF24, transparent);
box-shadow: 0 0 14px 3px rgba(251, 191, 36, .6);
animation: uvScan 3.4s cubic-bezier(.6, 0, .4, 1) infinite;
}
.uv-scan-line::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -64px; width: 64px;
background: linear-gradient(to right, transparent, rgba(245, 158, 11, .18));
}
@keyframes uvScan { 0% { left: -2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 102%; opacity: 0; } }
.uv-scan-box {
position: absolute; border: 2px solid #2DD4BF; border-radius: 5px;
box-shadow: 0 0 12px rgba(45, 212, 191, .5); opacity: 0; transform: scale(.92);
animation: uvBox .6s ease forwards, uvPulse 2.8s ease-in-out infinite;
animation-delay: var(--d), calc(var(--d) + .6s);
}
.uv-scan-box i {
position: absolute; top: -22px; left: -2px; background: #0F766E; color: #fff;
font-size: 11px; font-style: normal; font-weight: 700; padding: 1px 8px;
border-radius: 4px; white-space: nowrap;
}
@keyframes uvBox { to { opacity: 1; transform: scale(1); } }
@keyframes uvPulse { 0%, 100% { box-shadow: 0 0 12px rgba(45, 212, 191, .5); } 50% { box-shadow: 0 0 20px rgba(45, 212, 191, .85); } }
.uv-scan-badge {
position: absolute; left: 14px; bottom: 14px; background: rgba(15, 118, 110, .92);
color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 8px;
}
/* CROW A-D segmenten tekenen in bij reveal */
.uv-crow .elementor-column {
transform: scaleY(.02); transform-origin: bottom; opacity: 0;
transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.uv-crow.uv-seg-in .elementor-column { transform: scaleY(1); opacity: 1; }
.uv-crow.uv-seg-in .elementor-column:nth-child(2) { transition-delay: .1s; }
.uv-crow.uv-seg-in .elementor-column:nth-child(3) { transition-delay: .2s; }
.uv-crow.uv-seg-in .elementor-column:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
.elementor-section.uv-grad { animation: none; }
.uv-scan-line { animation: none; opacity: 0; }
.uv-scan-box { animation: none; opacity: 1; transform: none; }
.uv-crow .elementor-column { transform: none; opacity: 1; transition: none; }
}
/* ----------------------------------------------------------------------------
Leesbaarheid: formulier-inputs (WCAG non-text contrast)
---------------------------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
border: 1px solid #8B8E94 !important;
border-radius: 8px !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
border-color: var(--uv-teal) !important;
box-shadow: 0 0 0 3px rgba(15, 118, 110, .15) !important;
outline: none;
}
.wpcf7 ::placeholder { color: #6B7280; opacity: 1; }
/* Verzenden-knop in merkkleur */
.wpcf7 input[type="submit"] {
background: var(--uv-teal); border: 0; border-radius: 8px;
padding: 12px 28px; transition: transform .2s ease, filter .2s ease;
}
.wpcf7 input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* ----------------------------------------------------------------------------
Verticale Short (9:16, geen zwarte balken)
---------------------------------------------------------------------------- */
.uv-short-wrap { max-width: 300px; margin: 0 auto; }
.uv-short-cap { text-align: center; font-weight: 600; color: var(--uv-ink); margin: 0 0 10px; }
.uv-short {
position: relative; width: 100%; aspect-ratio: 9 / 16;
border-radius: 16px; overflow: hidden; background: #000;
border: 1px solid var(--uv-border);
}
.uv-short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ----------------------------------------------------------------------------
Toepassingen thumbnail-grid (shortcode [uv_toepassingen])
---------------------------------------------------------------------------- */
.uv-tp-group-title { font-size: 22px; font-weight: 800; color: var(--uv-ink); margin: 30px 0 14px; }
.uv-tp-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px; margin-bottom: 8px;
}
.uv-tp-card {
display: flex; flex-direction: column; background: #fff;
border: 1px solid var(--uv-border); border-radius: 14px; overflow: hidden;
text-decoration: none; transition: transform .25s ease, border-color .25s ease;
/* Altijd links uitgelijnd, ook als de omliggende sectie centreert
(consistentie/herkenbaarheid van de kaarten op elke pagina). */
text-align: left;
}
.uv-tp-card:hover { transform: translateY(-5px); border-color: var(--uv-teal); }
.uv-tp-card-img { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: #EEF2F4; }
.uv-tp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.uv-tp-card:hover .uv-tp-card-img img { transform: scale(1.05); }
.uv-tp-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.uv-tp-card-cat { font-size: 12px; font-weight: 700; color: var(--uv-teal); text-transform: uppercase; letter-spacing: .04em; }
.uv-tp-card-title { font-size: 16px; font-weight: 600; color: var(--uv-ink); line-height: 1.35; }
/* Showcase-beelden op productpagina's (curated detectiefoto's) */
.uv-showcase-card {
display: block; text-decoration: none; background: #fff;
border: 1px solid var(--uv-border); border-radius: 14px; overflow: hidden;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.uv-showcase-card:hover {
transform: translateY(-5px); border-color: var(--uv-teal);
box-shadow: 0 10px 24px rgba(15, 118, 110, .12);
}
.uv-showcase-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.uv-showcase-cap {
display: block; padding: 13px 16px 15px; font-size: 15px; font-weight: 600;
color: var(--uv-ink); line-height: 1.35;
}
/* Homepage product-kaarten (beeld + titel + omschrijving + link) */
.uv-prod-card {
/* Altijd links uitgelijnd, ook in centrerende secties (zie .uv-tp-card). */
text-align: left;
display: flex; flex-direction: column; height: 100%; background: #fff;
border: 1px solid var(--uv-border); border-radius: 16px; overflow: hidden;
text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.uv-prod-card:hover {
transform: translateY(-6px); border-color: var(--uv-teal);
box-shadow: 0 12px 28px rgba(15, 118, 110, .12);
}
.uv-prod-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF2F4; }
.uv-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.uv-prod-card:hover .uv-prod-img img { transform: scale(1.05); }
.uv-prod-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 22px; }
.uv-prod-title { font-size: 20px; font-weight: 700; color: var(--uv-ink); }
.uv-prod-desc { font-size: 14.5px; line-height: 1.55; color: var(--uv-gray); flex: 1; }
.uv-prod-cta { font-size: 15px; font-weight: 600; color: var(--uv-teal); margin-top: 4px; }
/* Google Maps embed */
.uv-map { display: block; min-height: 380px; }
/* ----------------------------------------------------------------------------
Merk-footer
---------------------------------------------------------------------------- */
/* Astra-default-footer verbergen */
footer.site-footer,
.ast-small-footer,
.site-below-footer-wrap,
.site-primary-footer-wrap { display: none !important; }
.uv-footer {
background: var(--uv-ink);
color: var(--uv-gray-4);
font-size: 15px;
line-height: 1.7;
}
.uv-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 56px 24px 32px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 40px;
}
.uv-footer h4 {
color: #fff; font-size: 15px; font-weight: 700;
margin: 0 0 16px; letter-spacing: .02em;
}
.uv-footer ul { list-style: none; margin: 0; padding: 0; }
.uv-footer li { margin-bottom: 9px; }
.uv-footer a { color: var(--uv-gray-4); text-decoration: none; transition: color .2s ease; }
.uv-footer a:hover { color: var(--uv-mint); }
.uv-footer-logo {
font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 12px;
background: linear-gradient(135deg, var(--uv-mint), #fff);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.uv-footer-brand p { margin: 0 0 10px; max-width: 30ch; }
.uv-footer-tagline { color: var(--uv-mint) !important; font-weight: 600; }
.uv-footer-social { display: flex; gap: 10px; margin-top: 16px; }
.uv-footer-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 9px;
background: rgba(255, 255, 255, .07); color: #fff; font-size: 13px; font-weight: 700;
transition: background .2s ease, transform .2s ease;
}
.uv-footer-social a:hover { background: var(--uv-teal); color: #fff; transform: translateY(-2px); }
.uv-footer-social a.uv-wa:hover { background: var(--uv-wa); }
.uv-footer-social a.uv-yt:hover { background: #FF0000; }
.uv-footer-social a.uv-li:hover { background: #0A66C2; }
.uv-footer-social svg { width: 22px; height: 22px; }
.uv-footer-bar {
max-width: 1200px; margin: 0 auto;
padding: 18px 24px; border-top: 1px solid rgba(255, 255, 255, .08);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--uv-gray-4);
}
.uv-footer-bar a { color: var(--uv-gray-4); text-decoration: none; margin-left: 18px; }
.uv-footer-bar a:hover { color: var(--uv-mint); }
/* ----------------------------------------------------------------------------
Toepassing-detailpagina (portfolio single): witte leeskaart + beeld-slider
---------------------------------------------------------------------------- */
.single-portfolio .post-thumb-img-content,
.single-portfolio .ast-single-post-featured-section,
.single-portfolio .ast-article-single > .post-thumb { display: none; } /* geen dubbele featured */
/* Witte leeskaart op grijze achtergrond (verving de grijze full-width layout) */
.single-portfolio .site-content { background: #F9FAFB; padding-bottom: 56px; }
.single-portfolio .site-content .ast-container { max-width: 880px; }
.single-portfolio .ast-article-single,
.single-portfolio #primary article {
background: #fff;
border: 1px solid var(--uv-border);
border-radius: 16px;
padding: 44px 52px;
margin-top: 36px;
}
.single-portfolio .entry-title { font-size: 34px; line-height: 1.2; color: var(--uv-ink); }
.single-portfolio .entry-content { font-size: 18px; line-height: 1.8; color: #1F2937; max-width: 720px; }
.single-portfolio .entry-content > * { max-width: 720px; }
.single-portfolio .entry-content a { color: var(--uv-teal); }
/* Intro-crosslink naar het productgebied (afval/wegen/groen) */
.single-portfolio .entry-content .uv-tp-intro {
font-size: 18px; line-height: 1.6; color: var(--uv-ink);
border-left: 3px solid var(--uv-teal); padding: 2px 0 2px 16px; margin: 0 0 22px;
}
.single-portfolio .entry-content .uv-tp-intro a { color: var(--uv-teal); font-weight: 600; }
@media (max-width: 600px) {
.single-portfolio .ast-article-single,
.single-portfolio #primary article { padding: 28px 20px; }
}
/* Beeld-slider (scroll-snap + prev/next + stippen) */
.single-portfolio .entry-content .uv-tp-slider { max-width: none; }
.uv-tp-slider { position: relative; margin: 0 0 30px; }
.uv-tp-track {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
border-radius: 14px; background: #EEF2F4;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.uv-tp-track::-webkit-scrollbar { display: none; }
.uv-tp-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.uv-tp-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.uv-tp-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
padding: 0; box-sizing: border-box; /* Astra's button-padding (15px 30px) maakte er een ovaal van en kneep de svg naar 0px */
border: 0; border-radius: 50%;
background: #ffffff; /* vol wit, geen blur-ovaal */
color: var(--uv-teal); /* set-pijl in teal */
box-shadow: 0 3px 14px rgba(17, 24, 39, .22);
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.uv-tp-nav:hover {
background: var(--uv-teal); /* hover: teal vlak, witte pijl */
color: #ffffff;
transform: translateY(-50%) scale(1.06);
}
.uv-tp-nav svg { flex: 0 0 auto; width: 24px; height: 24px; }
.uv-tp-nav[disabled] { opacity: 0; pointer-events: none; }
.uv-tp-prev { left: 12px; }
.uv-tp-next { right: 12px; }
.uv-tp-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.uv-tp-dot {
width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, .55); transition: background .2s ease, transform .2s ease;
}
.uv-tp-dot.is-active { background: #fff; transform: scale(1.25); }
.uv-tp-single .uv-tp-nav, .uv-tp-single .uv-tp-dots { display: none; }
/* ----------------------------------------------------------------------------
Blog-artikel (single post): leesbare breedte + witte leeskaart
---------------------------------------------------------------------------- */
.single-post .site-content { background: #F9FAFB; padding-bottom: 56px; }
.single-post .site-content .ast-container { max-width: 880px; }
.single-post .ast-article-single,
.single-post #primary article {
background: #fff;
border: 1px solid var(--uv-border);
border-radius: 16px;
padding: 44px 52px;
margin-top: 36px;
}
.single-post .entry-title { font-size: 34px; line-height: 1.2; color: var(--uv-ink); }
.single-post .entry-content {
font-size: 18px; line-height: 1.8; color: #1F2937; max-width: 720px;
}
.single-post .entry-content > * { max-width: 720px; }
.single-post .entry-content h2 { font-size: 25px; line-height: 1.25; margin: 1.7em 0 .5em; color: var(--uv-ink); }
.single-post .entry-content h3 { font-size: 20px; line-height: 1.3; margin: 1.4em 0 .4em; color: var(--uv-ink); }
.single-post .entry-content a { color: var(--uv-teal); }
.single-post .entry-content img,
.single-post .entry-content iframe,
.single-post .entry-content .wp-block-embed,
.single-post .entry-content figure { border-radius: 12px; max-width: 100%; }
.single-post .entry-content blockquote {
border-left: 4px solid var(--uv-teal); background: #F0FDFA;
margin: 1.6em 0; padding: 12px 20px; border-radius: 0 8px 8px 0;
}
@media (max-width: 600px) {
.single-post .ast-article-single,
.single-post #primary article { padding: 28px 20px; }
}
/* Featured image als hero bovenaan het geopende bericht (geïnjecteerd) */
.single-post .uv-post-hero { margin: 0 0 28px; }
.single-post .uv-post-hero img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
display: block;
}
/* Auteur-meta ("By admin") verbergen, alleen datum tonen */
.posted-by,
.ast-author-meta,
.entry-meta .posted-by { display: none !important; }
/* ----------------------------------------------------------------------------
Plain pagina's (privacy-/cookieverklaring e.d., geen Elementor): leeskaart
---------------------------------------------------------------------------- */
.page:not(.elementor-page) .site-content { background: #F9FAFB; padding-bottom: 56px; }
.page:not(.elementor-page) .site-content .ast-container { max-width: 940px; }
.page:not(.elementor-page) .ast-article-single,
.page:not(.elementor-page) #primary > article {
background: #fff;
border: 1px solid var(--uv-border);
border-radius: 16px;
padding: 44px 52px;
margin-top: 32px;
}
.page:not(.elementor-page) .entry-title { font-size: 32px; line-height: 1.2; color: var(--uv-ink); }
.page:not(.elementor-page) .entry-content { font-size: 17px; line-height: 1.75; color: #1F2937; }
.page:not(.elementor-page) .entry-content h2 { font-size: 23px; margin: 1.6em 0 .5em; color: var(--uv-ink); }
.page:not(.elementor-page) .entry-content h3 { font-size: 19px; margin: 1.3em 0 .4em; color: var(--uv-ink); }
.page:not(.elementor-page) .entry-content a { color: var(--uv-teal); }
.page:not(.elementor-page) .entry-content table { width: 100%; border-collapse: collapse; }
.page:not(.elementor-page) .entry-content table td,
.page:not(.elementor-page) .entry-content table th { border: 1px solid var(--uv-border); padding: 8px 12px; }
@media (max-width: 600px) {
.page:not(.elementor-page) .ast-article-single,
.page:not(.elementor-page) #primary > article { padding: 28px 20px; }
}
/* ----------------------------------------------------------------------------
Berichten-/category-archief: witte kaarten, geen grijs, geclipte images
---------------------------------------------------------------------------- */
.blog .site-content,
.archive .site-content,
.search .site-content { background: #fff; padding-bottom: 48px; }
/* (Berichten-index heeft geen eigen titelkop meer — gebruikersfeedback
2026-06-12: de blog toont de berichten direct, zonder band of titel.) */
/* Grijze Astra-archief-banner weg, schone titel */
.ast-archive-description {
background: transparent !important;
padding: 12px 0 4px !important;
margin-bottom: 8px;
}
.ast-archive-description .ast-archive-title { color: var(--uv-ink); font-weight: 800; }
/* Kaart = .ast-article-inner (padding 0 → featured image vult de hoeken) */
.blog .ast-article-inner,
.archive .ast-article-inner,
.search .ast-article-inner {
background: #fff;
border: 1px solid var(--uv-border);
border-radius: 14px;
overflow: hidden;
padding: 0;
height: 100%;
transition: transform .25s ease, border-color .25s ease;
}
.blog .ast-article-inner:hover,
.archive .ast-article-inner:hover,
.search .ast-article-inner:hover {
transform: translateY(-5px);
border-color: var(--uv-teal);
}
/* Featured image flush en geclipt door de afgeronde kaart */
.blog .ast-blog-featured-section,
.archive .ast-blog-featured-section,
.search .ast-blog-featured-section { margin: 0 !important; background: #EEF2F4; }
.blog .ast-blog-featured-section img,
.archive .ast-blog-featured-section img,
.search .ast-blog-featured-section img {
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
/* Tekst-elementen krijgen padding (image niet) */
.blog .ast-blog-single-element:not(.post-thumb),
.archive .ast-blog-single-element:not(.post-thumb),
.search .ast-blog-single-element:not(.post-thumb) { padding: 3px 22px; }
.blog .post-thumb + .ast-blog-single-element,
.archive .post-thumb + .ast-blog-single-element,
.search .post-thumb + .ast-blog-single-element { padding-top: 18px; }
.blog .ast-article-inner > .ast-blog-single-element:last-child,
.archive .ast-article-inner > .ast-blog-single-element:last-child,
.search .ast-article-inner > .ast-blog-single-element:last-child { padding-bottom: 22px; }
/* Kleuren */
.blog .entry-title a, .archive .entry-title a { color: var(--uv-ink); transition: color .2s ease; }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--uv-teal); }
.blog .ast-blog-category a, .archive .ast-blog-category a,
.blog .read-more a, .archive .read-more a { color: var(--uv-teal); font-weight: 600; }
@media (max-width: 880px) {
.uv-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
.uv-footer-inner { grid-template-columns: 1fr; }
.uv-footer-bar { flex-direction: column; align-items: flex-start; }
.uv-footer-bar a { margin: 0 18px 0 0; }
}
/* ===========================================================================
Mobiele off-canvas navigatie
Astra zette de mobiele menu-achtergrond op een grijstint; we maken er een
schone, witte lijst van met merk-accent (teal) op actief/hover en duidelijke
scheidingslijnen. Subitems (Producten) springen subtiel in.
=========================================================================== */
.ast-builder-menu-mobile .main-header-menu,
.ast-builder-menu-mobile .main-header-menu .sub-menu {
background-color: #ffffff !important;
}
.ast-builder-menu-mobile .main-header-menu .menu-link {
background-color: #ffffff !important;
color: var(--uv-ink) !important;
font-weight: 500;
border-bottom: 1px solid #EEF2F6;
}
.ast-builder-menu-mobile .main-header-menu > .menu-item:last-child > .menu-link {
border-bottom: none;
}
.ast-builder-menu-mobile .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-header-menu .menu-link:hover,
.ast-builder-menu-mobile .main-header-menu .menu-link:focus {
background-color: #F0FDFA !important;
color: var(--uv-teal) !important;
}
/* Producten-subitems subtiel inspringen en iets lichter */
.ast-builder-menu-mobile .main-header-menu .sub-menu .menu-link {
background-color: #FAFBFC !important;
padding-left: 34px;
font-weight: 400;
}
/* Laatste item ("Demo aanvragen") als duidelijk teal call-to-action */
.ast-builder-menu-mobile .main-header-menu > .menu-item:last-child > .menu-link {
color: var(--uv-teal) !important;
font-weight: 700;
}
/* Zachte fade/slide bij het openen van de off-canvas */
.main-header-bar-navigation.toggle-on .ast-builder-menu-mobile .menu-item > .menu-link {
animation: uvMenuItemIn .26s ease both;
}
@keyframes uvMenuItemIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
/* Off-canvas: Inloggen + Plan een demo + Zoeken op één rij i.p.v. drie
full-width balken. De menu-lijst mag wrappen; gewone nav-items blijven 100%
(gestapeld), de drie actie-items delen de onderste rij: twee knoppen die de
ruimte vullen + een compacte vierkante zoek-icoonknop. */
.ast-builder-menu-mobile .main-header-menu.stack-on-mobile {
flex-flow: row wrap !important;
align-items: stretch;
}
.ast-builder-menu-mobile .main-header-menu > .menu-item { flex: 0 0 100%; }
/* Inloggen + Plan een demo + zoek-icoon op ÉÉN rij. Zoeken is icoon-only
(geen label). De twee knoppen delen de ruimte (kunnen krimpen), de zoekknop
heeft een vaste breedte zodat hij niet wrapt. */
.ast-builder-menu-mobile .main-header-menu > .menu-login,
.ast-builder-menu-mobile .main-header-menu > .menu-demo,
.ast-builder-menu-mobile .main-header-menu > .uv-search-item {
display: flex; align-items: center; padding: 12px 4px 8px; box-sizing: border-box;
}
.ast-builder-menu-mobile .main-header-menu > .menu-login { flex: 1 1 0; min-width: 0; padding-left: 14px; }
.ast-builder-menu-mobile .main-header-menu > .menu-demo { flex: 1 1 0; min-width: 0; }
.ast-builder-menu-mobile .main-header-menu > .uv-search-item { flex: 0 0 60px; padding-right: 14px; }
.ast-builder-menu-mobile .menu-login > .menu-link,
.ast-builder-menu-mobile .menu-demo > .menu-link {
display: block !important; width: 100%; text-align: center;
padding: 11px 6px !important; border-bottom: none !important; white-space: nowrap;
}
.ast-builder-menu-mobile .uv-search-item > .menu-link {
border-bottom: none !important; padding: 0 !important; background: transparent !important; width: 100%;
}
.ast-builder-menu-mobile .uv-search-item .uv-search-toggle {
width: 100%; height: 44px; justify-content: center; gap: 0;
border: 1px solid var(--uv-border); border-radius: 8px; background: #F0FDFA;
}
.ast-builder-menu-mobile .uv-search-item .uv-search-label { display: none !important; }
@media (max-width: 360px) {
.ast-builder-menu-mobile .menu-login > .menu-link,
.ast-builder-menu-mobile .menu-demo > .menu-link { font-size: 14px; padding: 11px 3px !important; }
.ast-builder-menu-mobile .main-header-menu > .uv-search-item { flex-basis: 52px; padding-right: 10px; }
}
/* ===========================================================================
Craft-laag — toegankelijke focus, knop-polish, datatabellen, blog-leesritme
=========================================================================== */
/* --- Zichtbare focus-ring voor toetsenbordnavigatie (WCAG 2.4.7) ----------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--uv-teal);
outline-offset: 2px;
border-radius: 3px;
}
/* --- Knoppen: consistente, subtiele hover/active op de hele site ----------- */
.elementor-button,
.wp-block-button__link,
.ast-button,
.ast-custom-button,
.uv-cta {
transition: transform .15s ease, box-shadow .15s ease,
background-color .15s ease, filter .15s ease;
}
.elementor-button:hover,
.wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover,
.uv-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 118, 110, .22);
}
.elementor-button:active,
.wp-block-button__link:active,
.ast-button:active { transform: translateY(0); box-shadow: none; }
/* --- Datatabellen in content (blog & pagina's): op-merk i.p.v. default ------ */
.entry-content table,
.ast-article-single .entry-content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 28px 0;
font-size: 15.5px;
line-height: 1.5;
border: 1px solid #E5E9EE;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.entry-content table th {
background: #F0FDFA;
color: var(--uv-ink);
font-weight: 700;
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid #D7E3E1;
}
.entry-content table td {
padding: 11px 16px;
border-bottom: 1px solid #EEF2F6;
}
.entry-content table tbody tr:last-child td { border-bottom: none; }
.entry-content table tbody tr:nth-child(even) td { background: #FAFBFC; }
/* --- Blog single: titel, leesritme, hero, redactionele meta-rij ------------ */
body.single-post .ast-single-post .entry-title,
body.single-post h1.entry-title {
font-size: 42px !important;
line-height: 1.18 !important;
letter-spacing: -0.01em;
margin-bottom: 14px;
}
@media (max-width: 600px) {
body.single-post .ast-single-post .entry-title,
body.single-post h1.entry-title { font-size: 31px !important; }
}
/* --- Video: gebrande, altijd-zichtbare play-knop op de poster -------------- */
.elementor-custom-embed-play {
filter: none;
}
.elementor-custom-embed-play i,
.elementor-custom-embed-play svg {
width: 74px; height: 74px;
background: rgba(15, 118, 110, .92); /* teal cirkel */
color: #fff; fill: #fff;
border-radius: 50%;
padding: 20px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
transition: transform .18s ease, background-color .18s ease;
opacity: 1;
}
.elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play i,
.elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play svg {
transform: scale(1.08);
background: var(--uv-teal);
}
.elementor-custom-embed-image-overlay::after { /* lichte donkere wash voor leesbaarheid */
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18));
pointer-events: none;
}
/* --- "Zie UrbanVue in actie": geen donker kader rond de video ------------- */
/* De sectie had een donkere achtergrond (#111827) met de video boxed erin,
waardoor er donkere randen om de video ontstonden. We maken de sectie licht,
zetten de koptekst donker en geven de video een nette, afgeronde kaartlook. */
.elementor-element-uv00045 {
background-color: #F9FAFB !important;
background-image: none !important;
}
.elementor-element-uv00045 .elementor-heading-title { color: var(--uv-ink) !important; }
.elementor-element-uv00045 .elementor-widget-text-editor,
.elementor-element-uv00045 .elementor-widget-text-editor p { color: var(--uv-gray) !important; }
.elementor-element-uv00043 .elementor-wrapper,
.elementor-element-uv00043 .elementor-custom-embed-image-overlay {
border-radius: 14px;
overflow: hidden;
}
.elementor-element-uv00043 .elementor-wrapper {
box-shadow: 0 14px 40px rgba(17, 24, 39, .14);
}
/* De video-poster wordt door uv-frontend.js gezet op de échte YouTube-thumbnail
van de gekoppelde video (auto-passend bij elke videowijziging). Alleen vulling: */
.elementor-widget-video .elementor-custom-embed-image-overlay {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* ===========================================================================
Zoek-icoon in de header + zoek-overlay
=========================================================================== */
.uv-search-item .uv-search-toggle {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.uv-search-ico { width: 20px; height: 20px; flex: none; }
.uv-search-item .uv-search-toggle:hover .uv-search-ico,
.uv-search-item .uv-search-toggle:focus-visible .uv-search-ico { color: var(--uv-teal); }
.uv-search-label { display: none; } /* desktop: alleen icoon */
.ast-builder-menu-mobile .uv-search-label { display: inline; } /* off-canvas: met label */
.uv-search-overlay {
position: fixed; inset: 0; z-index: 100000;
display: flex; align-items: flex-start; justify-content: center;
padding: 13vh 20px 20px;
background: rgba(17, 24, 39, .55);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s ease, visibility .25s ease;
}
.uv-search-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.uv-search-form {
position: relative;
display: flex; align-items: center; gap: 6px;
width: 100%; max-width: 640px;
background: #fff; border-radius: 14px; padding: 8px 10px 8px 14px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
transform: translateY(-14px); transition: transform .25s ease;
}
.uv-search-overlay.is-open .uv-search-form { transform: none; }
.uv-search-form-ico { width: 22px; height: 22px; flex: none; color: var(--uv-gray); }
.uv-search-input {
flex: 1; border: 0; outline: 0; background: transparent;
font-size: 18px; color: var(--uv-ink); padding: 12px 6px;
}
.uv-search-submit {
flex: none; border: 0; cursor: pointer;
background: var(--uv-teal); color: #fff; font-weight: 600; font-size: 15px;
border-radius: 10px; padding: 12px 22px;
transition: background-color .15s ease, transform .15s ease;
}
.uv-search-submit:hover { background: #0D5F59; transform: translateY(-1px); }
.uv-search-close {
position: absolute; top: 22px; right: 28px;
background: 0; border: 0; cursor: pointer; color: #fff;
font-size: 36px; line-height: 1; opacity: .85;
}
.uv-search-close:hover { opacity: 1; }
body.uv-search-active { overflow: hidden; }
@media (max-width: 600px) {
.uv-search-overlay { padding: 10vh 16px 16px; }
.uv-search-submit { padding: 12px 16px; }
}
/* --- Grijze content-box weg ------------------------------------------------
Astra heeft de content-kaart (.ast-article-inner) op global-color-4 (#6B7280
grijs) staan i.p.v. wit. Op Elementor-pagina's dekken de secties dit af, maar
op zoek-/archief-/404-pagina's én in de Elementor-editor schijnt het grijs door.
We zetten de content-box overal op wit (op de #F9FAFB-paginaachtergrond). */
.ast-separate-container .ast-article-inner,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-archive-description,
.ast-separate-container .comments-area,
.ast-separate-container .comment-respond,
.ast-padded-layout.ast-plain-container .site-content,
.ast-separate-container.ast-two-container #secondary .widget,
.editor-styles-wrapper {
background-color: #ffffff !important;
}
/* --- CROW-sectie: de A/B/C/D-band deelt de lichtgrijze achtergrond (#F9FAFB)
van de "Beoordeeld op CROW"-kop, zodat kop + kleurblokken als één sectie lezen.
(Elementor-bg #F9FAFB op beide secties; geen witte override meer.) */
/* --- Categorie-pill: leesbaar op hover (was teal-tekst op teal-bg) --------- */
.uv-post-cat:hover,
.uv-post-cat:focus {
background-color: var(--uv-teal) !important;
color: #ffffff !important;
}
/* Categorie-/taxonomie-links (berichten-grid, archief, blog-card): leesbare hover.
Probleem was: hover-kleur = tekstkleur -> onleesbaar. We forceren teal -> dieper
teal + underline, zodat de hover altijd contrast houdt. Dekt vergelijkbare links af. */
.cat-links a,
.ast-taxonomy-container a,
.ast-blog-category a {
color: var(--uv-teal) !important;
transition: color .15s ease;
}
.cat-links a:hover,
.cat-links a:focus,
.ast-taxonomy-container a:hover,
.ast-taxonomy-container a:focus,
.ast-blog-category a:hover,
.ast-blog-category a:focus,
.read-more a:hover,
.blog .entry-title a:hover,
.archive .entry-title a:hover {
color: #0D5F59 !important; /* dieper teal — blijft leesbaar */
text-decoration: underline;
}
/* --- "Demo aanvragen"-knop: compacter, in lijn met de andere menu-items ---- */
/* De knop had line-height:80px waardoor de groene blok bijna de hele balk vulde. */
.main-header-menu .menu-demo > .menu-link,
.ast-builder-menu-mobile .menu-demo > .menu-link {
line-height: 1.2 !important;
height: auto !important;
align-self: center;
padding: 7px 18px !important;
border-radius: 8px !important;
font-weight: 600;
background-color: var(--uv-amber, #FCB900) !important;
color: #111827 !important;
}
.main-header-menu .menu-demo > .menu-link:hover,
.ast-builder-menu-mobile .menu-demo > .menu-link:hover {
background-color: #E6A800 !important;
color: #111827 !important;
}
/* "Inloggen"-knop -> app.urbanvue.nl, in merk-groen (teal) */
.main-header-menu .menu-login > .menu-link,
.ast-builder-menu-mobile .menu-login > .menu-link {
line-height: 1.2 !important;
height: auto !important;
align-self: center;
padding: 7px 18px !important;
border-radius: 8px !important;
font-weight: 600;
background-color: var(--uv-teal, #0F766E) !important;
color: #fff !important;
}
.main-header-menu .menu-login > .menu-link:hover,
.ast-builder-menu-mobile .menu-login > .menu-link:hover {
background-color: #0D5F59 !important;
color: #fff !important;
}
/* Header op één regel houden met de extra Inloggen-knop: nav-items compacter
(knoppen uitgezonderd) en de zoek-knop icoon-only op desktop. */
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login) > .menu-link {
padding-left: 10px !important;
padding-right: 10px !important;
}
.main-header-menu .uv-search-label { display: none; }
/* Astra's kale standaard-datum verbergen; wij tonen een rijkere eigen rij.
NB: 'ast-single-post' is een body-class, dus géén descendant-combinator met
.single-post gebruiken — direct .ast-single-post .entry-meta targeten. */
.ast-single-post .entry-meta { display: none !important; }
.uv-post-meta {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 0; margin: 0 0 24px;
font-size: 14px; color: var(--uv-gray);
}
.uv-post-cat {
background: #F0FDFA; color: var(--uv-teal);
font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
padding: 4px 12px; border-radius: 999px; text-decoration: none;
margin-right: 14px; transition: background-color .15s ease, color .15s ease;
}
.uv-post-cat:hover { background: var(--uv-teal); color: #fff; }
.uv-post-metabit + .uv-post-metabit::before {
content: "·"; margin: 0 10px; color: #CBD5E1;
}
.single-post .entry-content { font-size: 18px; line-height: 1.75; }
.single-post .entry-content p { margin-bottom: 1.25em; }
.single-post .entry-content > h2 { margin-top: 1.7em; }
/* Featured hero schoner: rondere hoeken, lichtere schaduw (i.p.v. Astra's zware) */
.uv-post-hero { margin: 0 0 28px; }
.uv-post-hero-img,
.ast-article-single .uv-post-hero img {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(17, 24, 39, .10) !important;
}
/* ===========================================================================
Amber accent (#FCB900) — attentie/status, altijd met donkere tekst (#111827)
Gebruik in Elementor via een HTML-widget, bv:
Pilot
Let op: tekst hier.
=========================================================================== */
.uv-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.3;
padding: 4px 12px; border-radius: 999px; text-transform: uppercase; text-decoration: none;
white-space: nowrap;
}
.uv-badge-amber { background: var(--uv-amber); color: var(--uv-ink); }
.uv-badge-teal { background: #F0FDFA; color: var(--uv-teal); }
.uv-badge-ink { background: var(--uv-ink); color: #fff; }
.uv-note {
display: flex; gap: 12px; align-items: flex-start;
margin: 20px 0; padding: 16px 18px; border-radius: 12px;
background: var(--uv-amber-tint); border-left: 4px solid var(--uv-amber);
color: var(--uv-ink); font-size: 15.5px; line-height: 1.6;
}
.uv-note::before {
content: "!"; flex: none; width: 22px; height: 22px; margin-top: 1px;
border-radius: 50%; background: var(--uv-amber); color: var(--uv-ink);
font-weight: 800; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.uv-note strong { color: var(--uv-ink); }
/* === Before/after: straatbeeld -> AI-detectie ([uv_compare]) ============== */
/* Volle sectiebreedte (lijnt uit met de productkaarten) + witte kaderrand
per paneel, in dezelfde kaartstijl als de rest van de site. */
.uv-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:0 auto;}
.uv-compare-pane{position:relative;margin:0;padding:10px;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--uv-border);box-shadow:0 12px 30px rgba(15,23,42,.12);aspect-ratio:var(--uv-ar,4 / 3);box-sizing:border-box;}
.uv-compare-pane img{display:block;width:100%;height:100%;object-fit:cover;border-radius:9px;}
.uv-compare-cap{left:22px;bottom:22px;}
.uv-compare-cap{position:absolute;left:12px;bottom:12px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(17,24,39,.74);padding:5px 11px;border-radius:999px;line-height:1;}
.uv-compare-cap.is-after{background:var(--uv-teal,#0F766E);}
.uv-compare-arrow{display:flex;align-items:center;justify-content:center;color:var(--uv-teal,#0F766E);}
.uv-compare-arrow svg{width:30px;height:30px;}
@media (max-width:760px){.uv-compare{grid-template-columns:1fr;gap:12px;}.uv-compare-arrow{transform:rotate(90deg);}}
/* === Roterende merkband ([uv_brandband] / .uv-brandband) ================== */
.uv-brandband{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;
border-radius:16px;overflow:hidden;background:#0F2418 center/cover no-repeat;background-image:var(--uv-bb,none);}
.uv-brandband::before{content:"";position:absolute;inset:0;
/* Lichte teal-zweem i.p.v. zwaar zwart (gebruikersfeedback 2026-06-12);
tekstschaduw hieronder borgt de leesbaarheid. */
background:linear-gradient(100deg,rgba(13,60,53,.45),rgba(13,60,53,.16));}
.uv-brandband-inner{position:relative;z-index:1;max-width:720px;padding:48px 28px;text-align:center;color:#fff;}
.uv-brandband-eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#5EEAD4;}
.uv-brandband-title{margin:0 0 14px;font-size:42px;line-height:1.1;font-weight:800;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.45);}
.uv-brandband-sub{margin:0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.95);text-shadow:0 1px 10px rgba(0,0,0,.45);}
@media(max-width:600px){.uv-brandband{min-height:300px;}.uv-brandband-title{font-size:30px;}.uv-brandband-inner{padding:36px 20px;}}
/* === Inter site-breed (ook blog/posts/toepassingen, niet alleen Elementor) === */
body, button, input, select, textarea {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.main-header-menu .menu-link, .ast-builder-menu-mobile .menu-link,
.uv-footer, .uv-footer * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
/* === Uitlijning: gelijke kaart-hoogte zodat titels op één lijn staan ======= */
.uv-tp-grid { align-items: stretch; }
.uv-tp-card { display: flex; flex-direction: column; height: 100%; }
.uv-tp-card-body { flex: 1 1 auto; }
.uv-tp-card-title { min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* === Links onder de toepassingen-grid (Bekijk alle / YouTube) ============= */
.uv-tp-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px; margin: 30px 0 0; }
.uv-tp-more a { color: var(--uv-teal); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.uv-tp-more a:hover { color: #0D5F59; text-decoration: underline; }
/* === Body-achtergrond wit (was #6B7280 donkergrijs) ======================
Dat donkergrijs piepte als haarlijntje tussen naadloos sluitende secties
(sub-pixel-rand) -> o.a. het "lijntje boven A/B/C/D". Wit = onzichtbaar. */
body { background-color: #ffffff !important; }
/* === Menu: kortere & even-brede knoppen + | tussen álle top-items ========= */
.main-header-menu .menu-demo > .menu-link,
.main-header-menu .menu-login > .menu-link,
.ast-builder-menu-mobile .menu-demo > .menu-link,
.ast-builder-menu-mobile .menu-login > .menu-link {
min-width: 72px; text-align: center; justify-content: center; padding: 7px 14px !important;
}
/* Tekst-items vet zodat ze beter opvallen (separators blijven licht/400). */
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item) > .menu-link {
font-weight: 600;
}
@media (min-width: 922px) {
/* Symmetrie: 8px item-padding + 16px separator-marge geeft links en rechts
van elke | dezelfde 16px tot de tekst -> items gecentreerd tussen | |. */
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item) > .menu-link {
padding-left: 8px !important; padding-right: 8px !important;
}
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item):not(:first-child) > .menu-link::before {
content: "|"; color: #D1D5DB; font-weight: 400; margin-right: 16px;
}
/* Pipes óók vóór Inloggen, Plan een demo en het zoek-icoon, zodat álle
header-items uniform tussen | | staan. Symmetrische marge = natuurlijk. */
/* Astra zet .menu-item op kolom-flex (voor submenu's); deze drie hebben
geen submenu, dus terug naar rij zodat de | naast de knop staat. */
.main-header-menu > .menu-login,
.main-header-menu > .menu-demo,
.main-header-menu > .uv-search-item {
display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap;
}
.main-header-menu > .menu-login::before,
.main-header-menu > .menu-demo::before,
.main-header-menu > .uv-search-item::before {
content: "|"; color: #D1D5DB; font-weight: 400; flex: 0 0 auto;
margin: 0 14px;
}
/* Smalle desktop (1025-1200px): compacter zodat alles op één regel past
(mobiel menu neemt het t/m 1024px over via de Astra-breakpoint). */
}
@media (min-width: 922px) and (max-width: 1200px) {
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item) > .menu-link {
padding-left: 5px !important; padding-right: 5px !important; font-size: 15px;
}
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item):not(:first-child) > .menu-link::before {
margin-right: 10px;
}
.main-header-menu .menu-demo > .menu-link,
.main-header-menu .menu-login > .menu-link {
min-width: 0; padding: 7px 10px !important; font-size: 15px;
}
.main-header-menu > .menu-login::before,
.main-header-menu > .menu-demo::before,
.main-header-menu > .uv-search-item::before { margin: 0 9px; }
/* In deze smalle band wrapt alleen het zoek-icoon nog naar regel 2;
verbergen t/m 1023px (zoeken blijft beschikbaar >=1024 en in het
mobiele menu onder 922px). */
}
@media (min-width: 922px) and (max-width: 1023px) {
.main-header-menu > .uv-search-item { display: none; }
}
/* Smalste desktop-band (zeldzaam: alleen handmatig verkleinde vensters). */
@media (min-width: 922px) and (max-width: 975px) {
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item) > .menu-link {
padding-left: 3px !important; padding-right: 3px !important; font-size: 14px;
}
.main-header-menu > .menu-item:not(.menu-demo):not(.menu-login):not(.uv-search-item):not(:first-child) > .menu-link::before {
margin-right: 7px;
}
.main-header-menu .menu-demo > .menu-link,
.main-header-menu .menu-login > .menu-link { padding: 6px 8px !important; font-size: 14px; }
.main-header-menu > .menu-login::before,
.main-header-menu > .menu-demo::before { margin: 0 3px 0 2px; }
}
/* --- Sticky header (desktop + mobiel) ------------------------------------ */
#masthead.site-header { position: sticky; top: 0; z-index: 999; background: #fff; }
.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead.site-header { top: 46px; } }
#masthead.site-header.uv-scrolled { box-shadow: 0 2px 14px rgba(15, 23, 42, .10); }
/* --- Product- en sectie-iconen (home) ------------------------------------- */
.uv-prod-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 16px;
background: #F0FDFA; margin-bottom: 2px;
}
/* --- Demo-CTA: exclusief amber met donkere tekst --------------------------- */
.uv-cta-demo .elementor-button,
a.uv-cta-demo {
background-color: var(--uv-amber) !important;
border-color: var(--uv-amber) !important;
color: var(--uv-ink) !important;
}
.uv-cta-demo .elementor-button:hover,
.uv-cta-demo .elementor-button:focus,
a.uv-cta-demo:hover {
background-color: #E5A800 !important;
border-color: #E5A800 !important;
color: var(--uv-ink) !important;
}
/* --- Leesbaarheid: grotere bodytekst, ruimere regelhoogte ------------------ */
/* Basis 16px geldt ook mobiel (stond op ±14.6px via Astra); desktop 17px. */
body { font-size: 16px; line-height: 1.65; }
@media (min-width: 922px) {
body { font-size: 17px; }
}
.uv-prod-desc { font-size: 15.5px; }
.uv-tp-card-title { font-size: 17px; }
.uv-kpi-label { font-size: 16px; }
.uv-sec-icon--platform::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M288%200c-69.59%200-126%2056.41-126%20126%200%2056.26%2082.35%20158.8%20113.9%20196.02%206.39%207.54%2017.82%207.54%2024.2%200C331.65%20284.8%20414%20182.26%20414%20126%20414%2056.41%20357.59%200%20288%200zm0%20168c-23.2%200-42-18.8-42-42s18.8-42%2042-42%2042%2018.8%2042%2042-18.8%2042-42%2042zM20.12%20215.95A32.006%2032.006%200%200%200%200%20245.66v250.32c0%2011.32%2011.43%2019.06%2021.94%2014.86L160%20448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12%20215.95zM288%20359.67c-14.07%200-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192%2064V266c-18.92%2027.09-39.82%2053.52-59.49%2076.72-9.13%2010.77-22.44%2016.95-36.51%2016.95zm266.06-198.51L416%20224v288l139.88-55.95A31.996%2031.996%200%200%200%20576%20426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20576%20512'%3E%3Cpath%20d='M288%200c-69.59%200-126%2056.41-126%20126%200%2056.26%2082.35%20158.8%20113.9%20196.02%206.39%207.54%2017.82%207.54%2024.2%200C331.65%20284.8%20414%20182.26%20414%20126%20414%2056.41%20357.59%200%20288%200zm0%20168c-23.2%200-42-18.8-42-42s18.8-42%2042-42%2042%2018.8%2042%2042-18.8%2042-42%2042zM20.12%20215.95A32.006%2032.006%200%200%200%200%20245.66v250.32c0%2011.32%2011.43%2019.06%2021.94%2014.86L160%20448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12%20215.95zM288%20359.67c-14.07%200-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192%2064V266c-18.92%2027.09-39.82%2053.52-59.49%2076.72-9.13%2010.77-22.44%2016.95-36.51%2016.95zm266.06-198.51L416%20224v288l139.88-55.95A31.996%2031.996%200%200%200%20576%20426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
.uv-sec-icon--camera::after {
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M512%20144v288c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V144c0-26.5%2021.5-48%2048-48h88l12.3-32.9c7-18.7%2024.9-31.1%2044.9-31.1h125.5c20%200%2037.9%2012.4%2044.9%2031.1L376%2096h88c26.5%200%2048%2021.5%2048%2048zM376%20288c0-66.2-53.8-120-120-120s-120%2053.8-120%20120%2053.8%20120%20120%20120%20120-53.8%20120-120zm-32%200c0%2048.5-39.5%2088-88%2088s-88-39.5-88-88%2039.5-88%2088-88%2088%2039.5%2088%2088z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M512%20144v288c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V144c0-26.5%2021.5-48%2048-48h88l12.3-32.9c7-18.7%2024.9-31.1%2044.9-31.1h125.5c20%200%2037.9%2012.4%2044.9%2031.1L376%2096h88c26.5%200%2048%2021.5%2048%2048zM376%20288c0-66.2-53.8-120-120-120s-120%2053.8-120%20120%2053.8%20120%20120%20120%20120-53.8%20120-120zm-32%200c0%2048.5-39.5%2088-88%2088s-88-39.5-88-88%2039.5-88%2088-88%2088%2039.5%2088%2088z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
/* ----------------------------------------------------------------------------
Iconen: eigen UrbanVue-iconenset (uv-assets/icons/, bron: tools/assets/
icons/ <- ~/projects/urbanvue-icons). Meerkleurig (teal+amber), dus als
![]()
in de badges; masks zouden de amber-accenten platslaan.
Badge-maat 56px conform de Elementor icon-boxes; sectiekoppen krijgen
bewust géén icoon (gebruikersbesluit 2026-06-12).
---------------------------------------------------------------------------- */
.uv-prod-icon img { width: 38px; height: 38px; display: block; }
/* Icon-box-glyphs (eigen set, lijnstijl): groter dan de oude FA-solid zodat
ze even krachtig ogen in de 56px-badge. Accordion-plus/minus blijft klein. */
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon svg {
width: 40px !important; height: 40px !important;
}
.elementor-accordion .elementor-accordion-icon svg { width: 20px; height: 20px; }
/* Lijn-iconen: iets dikkere stroke op badge-formaat zodat ze net zo stevig
ogen als de gevulde glyphs (raakt alleen svg-elementen mét stroke). */
.elementor-icon svg[stroke] { stroke-width: 3.4; }
.elementor-icon svg [stroke] { stroke-width: 3.4; }
/* ----------------------------------------------------------------------------
UV-formulieren (CF7): gedeelde veld-styling via .uv-form.
350 = demo (/aan-de-slag/, amber submit) · 732 = bericht (/contact/, teal).
---------------------------------------------------------------------------- */
.uv-form label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--uv-ink); }
.uv-form .uv-form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 720px) { .uv-form .uv-form-rij { grid-template-columns: 1fr; } }
.uv-form .uv-form-veld { margin: 0 0 16px; }
.uv-form input[type='text'], .uv-form input[type='email'],
.uv-form input[type='tel'], .uv-form select, .uv-form textarea { width: 100%; }
.uv-form textarea { min-height: 130px; }
.uv-form fieldset.uv-form-interesse { border: 0; padding: 0; margin: 0 0 16px; }
.uv-form .uv-form-interesse legend { font-weight: 600; margin-bottom: 8px; color: var(--uv-ink); }
.uv-form .wpcf7-checkbox .wpcf7-list-item { display: block; margin: 0 0 8px; }
.uv-form .wpcf7-checkbox input { margin-right: 8px; }
.uv-form .uv-form-privacy { font-size: 14px; color: var(--uv-gray); }
.uv-form input[type='submit'] { font-weight: 700; border-radius: 8px; padding: 12px 26px; }
/* Select in lijn met de tekstvelden (WCAG non-text contrast). */
.uv-form select { border: 1px solid #8B8E94; border-radius: 8px; padding: 10px 12px; background: #fff; }
.uv-demo-form input[type='submit'] {
/* !important: wint van de Astra/CF7-knopstijl; dit ís de demo-CTA (amber). */
background: var(--uv-amber) !important; border-color: var(--uv-amber) !important;
color: var(--uv-ink) !important;
}
.uv-demo-form input[type='submit']:hover { background: #E5A800 !important; border-color: #E5A800 !important; }
/* --- Aan-de-slag: ondersteunende sectiebeelden (Platform/Signalen) -------- */
.uv-ads-beeld { margin: 0 0 18px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .10); }
.uv-ads-beeld img { display: block; width: 100%; height: auto; }
/* --- Losse single-pagina's: native rechter-zijbalk (eigen kolom) ----------- */
.single-post #content .ast-container,
.single-portfolio #content .ast-container { max-width: 1160px; }
/* Astra geeft de content-keten (#primary > .site-main > article) en de zijbalk-
keten (#secondary > .sidebar-main > widget) VERSCHILLENDE bovenmarges, waardoor
de kaart-bovenkanten niet gelijk liggen. We normaliseren alle bovenmarges en
geven beide kolommen exact dezelfde bovenmarge (4rem) zodat de kaarten op één
lijn beginnen, mét ruimte onder het menu. Zijbalk iets breder (30% -> 34%). */
@media (min-width: 922px) {
body.single-post.ast-right-sidebar #primary,
body.single-portfolio.ast-right-sidebar #primary,
body.single-post.ast-right-sidebar #secondary,
body.single-portfolio.ast-right-sidebar #secondary {
margin-top: 4rem !important; padding-top: 0 !important;
}
.single-post #primary > .site-main, .single-portfolio #primary > .site-main,
.single-post #secondary > .sidebar-main, .single-portfolio #secondary > .sidebar-main { margin-top: 0; padding-top: 0; }
/* Article-kaart: alleen de bovenMARGE weg; de binnen-padding (titel-ademruimte)
behouden, anders plakt de titel tegen de bovenrand. */
.single-post #primary .ast-article-single, .single-portfolio #primary .ast-article-single { margin-top: 0; }
.single-post #primary, .single-portfolio #primary { width: 66%; }
.single-post #secondary, .single-portfolio #secondary { width: 34%; }
}
/* Zijbalk-blok als witte kaart met teal kop-accent; zelfde font én normale
schrijfwijze als de rest van de site (géén hoofdletters). */
.single-post #secondary .widget,
.single-portfolio #secondary .widget {
font-family: inherit;
background: #fff; border: 1px solid var(--uv-border); border-radius: 14px;
padding: 24px; margin: 0 0 24px; box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
.single-post #secondary .widget:last-child,
.single-portfolio #secondary .widget:last-child { margin-bottom: 0; }
.single-post #secondary .widget-title,
.single-portfolio #secondary .widget-title {
font-family: inherit;
font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none;
color: var(--uv-ink); margin: 0 0 16px; padding-bottom: 12px; position: relative;
}
.single-post #secondary .widget-title::after,
.single-portfolio #secondary .widget-title::after {
content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px;
background: var(--uv-teal); border-radius: 2px;
}
/* Lijst-items: thumbnail + titel + datum; zelfde font als de site. */
.uv-recent { list-style: none; margin: 0; padding: 0; }
.uv-recent li + li { border-top: 1px solid #f0f3f5; }
.uv-recent a { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; text-decoration: none; }
.uv-recent li:first-child a { padding-top: 0; }
.uv-recent li:last-child a { padding-bottom: 0; }
.uv-recent-thumb img, .uv-recent-noimg {
width: 72px; height: 54px; border-radius: 8px; object-fit: cover; display: block; flex: none;
}
.uv-recent-noimg { background: linear-gradient(135deg, #d8f0ec, #cfe7e2); }
.uv-recent-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uv-recent-ttl { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--uv-ink); line-height: 1.35; }
.uv-recent a:hover .uv-recent-ttl { color: var(--uv-teal); }
.uv-recent-date { font-size: 12px; color: var(--uv-gray); }
@media (max-width: 921px) {
.single-post #content .ast-container,
.single-portfolio #content .ast-container { max-width: none; }
}
/* --- Hero-chips: detectie-/belofte-labels met set-iconen ------------------- */
.uv-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.uv-chip {
display: inline-flex; align-items: center; gap: 7px;
background: #fff; border: 1px solid rgba(15, 118, 110, .22); border-radius: 999px;
padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--uv-ink);
cursor: default;
}
.uv-chip img { width: 16px; height: 16px; display: block; }
/* --- Video-trigger (play-overlay) + nocookie-lightbox ---------------------- */
.uv-video-trigger { position: relative; cursor: pointer; }
.uv-video-trigger::after {
content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 72px; height: 72px; border-radius: 50%;
background: rgba(15, 118, 110, .92) url('data:image/svg+xml;utf8,') 56% center / 30px no-repeat;
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
transition: transform .2s ease, background-color .2s ease;
pointer-events: none;
}
.uv-video-trigger:hover::after { transform: translate(-50%, -50%) scale(1.08); background-color: #0F766E; }
.uv-video-modal {
position: fixed; inset: 0; z-index: 100000;
display: flex; align-items: center; justify-content: center;
padding: 4vh 16px; background: rgba(0, 0, 0, .82);
opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.uv-video-modal.is-open { opacity: 1; visibility: visible; }
.uv-video-frame {
position: relative; height: 88vh; aspect-ratio: 9 / 16; max-width: 95vw;
background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.uv-video-slot, .uv-video-slot iframe { width: 100%; height: 100%; border: 0; display: block; }
.uv-video-close {
position: absolute; top: -42px; right: -2px; width: 40px; height: 40px;
border: 0; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
}
/* Gutenberg-knoppen: structureel leesbaar — altijd merk-teal met witte tekst.
Voorkomt onleesbare (tekstloze) download-knoppen in blogberichten. */
.wp-block-button__link {
background-color: #0F766E !important;
color: #ffffff !important;
border-radius: 8px;
}
.wp-block-button__link:hover { background-color: #115E59 !important; }
/* App-store badges (blog + pagina): nette uitlijning, niet uitrekken */
.uv-store-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.uv-store-badges img { height: 48px; width: auto; }
/* Mobiel: single-post begint op dezelfde afstand tot de menubalk als de
blog-index. Astra zet een extra margin-top (~36px) op het post-blok waardoor
de witruimte boven de titel groter is dan op de index; die halen we weg. */
@media (max-width: 921px) {
.ast-article-single { margin-top: 0 !important; }
}
/* === 404-pagina: on-brand, mint-tint (geen grijs) ========================= */
.uv-404 {
flex: 1 1 100%; width: 100%;
background: #F0FDFA;
padding: 88px 20px;
text-align: center;
}
.uv-404-inner { max-width: 640px; margin: 0 auto; }
.uv-404-badge {
display: inline-block;
font-size: 80px; font-weight: 800; line-height: 1;
color: #0F766E; letter-spacing: 2px;
background: linear-gradient(135deg, #14B8A6, #115E59);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.uv-404-title {
margin: 18px 0 10px; color: #111827;
font-size: 30px; font-weight: 700; line-height: 1.2;
}
.uv-404-text { margin: 0 auto 28px; color: #6B7280; font-size: 17px; line-height: 1.6; max-width: 520px; }
.uv-404-search {
display: flex; max-width: 460px; margin: 0 auto 28px;
background: #fff; border: 1px solid #CCEAE5; border-radius: 12px;
overflow: hidden; box-shadow: 0 6px 20px rgba(15, 118, 110, .08);
}
.uv-404-search-input {
flex: 1 1 auto; min-width: 0; border: 0; outline: 0;
padding: 14px 18px; font-size: 16px; color: #111827; background: transparent;
}
.uv-404-search-btn {
flex: 0 0 auto; border: 0; cursor: pointer;
padding: 0 20px; background: #0F766E; color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background-color .2s ease;
}
.uv-404-search-btn:hover { background: #115E59; }
.uv-404-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.uv-404-links a {
display: inline-block; padding: 9px 18px; border-radius: 999px;
background: #fff; border: 1px solid #CCEAE5; color: #0F766E;
font-weight: 600; font-size: 15px; text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.uv-404-links a:hover { background: #0F766E; color: #fff; }
.uv-404-links a.uv-404-cta { background: #FCB900; border-color: #FCB900; color: #111827; }
.uv-404-links a.uv-404-cta:hover { background: #FBBF24; border-color: #FBBF24; color: #111827; }
@media (max-width: 600px) {
.uv-404 { padding: 56px 16px; }
.uv-404-badge { font-size: 64px; }
.uv-404-title { font-size: 24px; }
}
/* Toepassingen-filter (/in-de-praktijk/): tabs naar het beeldmeetlatten-patroon. */
.uv-tp-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; border-bottom: 2px solid #e5e7eb; max-width: 860px; margin: 0 auto 32px; }
.uv-tp-tab { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; background: none !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: -2px; color: #6B7280 !important; font-weight: 600; font-size: 17px; padding: 13px 24px; transition: color .15s, border-color .15s; }
.uv-tp-tab img { width: 22px; height: 22px; display: block; opacity: .5; transition: opacity .15s; }
.uv-tp-tab:hover { color: #0F766E !important; }
.uv-tp-tab:hover img { opacity: 1; }
.uv-tp-tab.is-active { color: #0F766E !important; border-bottom-color: #0F766E !important; }
.uv-tp-tab.is-active img { opacity: 1; }
.uv-tp-group { margin-top: 8px; }
/* Groep-titel in het filter gelijk aan de beeldmeetlatten-kop: gecentreerd, groot, ruime padding. */
.uv-tp-filter .uv-tp-group-title { text-align: center; font-size: 30px; font-weight: 700; color: var(--uv-ink); margin: 44px 0 28px; }
/* Anchor-doel (#toepassingen): scroll-offset zodat de 'Toepassingen'-kop onder de
sticky header in beeld blijft (niet er net voorbij springen). */
.uv-tp-filter { scroll-margin-top: 170px; }
/* Intro-sectie boven het filter. */
.uv-tp-intro { text-align: center; max-width: 680px; margin: 8px auto 32px; }
.uv-tp-intro-title { font-size: 30px; font-weight: 700; color: var(--uv-ink); margin: 0 0 10px; }
.uv-tp-intro-sub { font-size: 17px; color: #6B7280; line-height: 1.5; margin: 0; }
@media (max-width: 600px) {
.uv-tp-tab { padding: 11px 16px; font-size: 15px; }
.uv-tp-filter { scroll-margin-top: 120px; }
.uv-tp-filter .uv-tp-group-title { font-size: 24px; margin: 32px 0 20px; }
.uv-tp-intro-title { font-size: 24px; }
}