/*
Theme Name: Stadsthema – Alles over (GeneratePress Child)
Theme URI: https://www.allesoverwenen.nl/
Description: Generiek GeneratePress child theme voor alle "Alles over [stad]"-sites, gebaseerd op Alles over Wenen v1.5.4. Zelfde classes en opmaak; stad, merkkleur, zoek-snelknoppen, tijdelijke menubalk en footer in te stellen via Weergave → Stadsthema.
Author: Vincent / Alles over Oostenrijk | Tiefrot.design
Template: generatepress
Version: 2.1.0
Requires PHP: 7.4
Text Domain: generatepress-child
*/
/* ==================================================
0) Design tokens / variabelen
================================================== */
:root {
/* Typografie (v1.4.0) — één plek om de schaal te regelen */
--fs-body: 17px; /* lopende tekst mobiel */
--fs-card: 16px; /* tekst in kaarten/blokken */
--fs-small: 15px; /* kleine tekst: tabellen, TOC, meta */
--fs-h2: 25px;
--fs-h3: 21px;
--fs-h4: 18px;
--lh-body: 1.7;
/* Brand */
--brand: #b21010;
--brand-hover: #8e0d0d;
--brand-rgb: 178, 16, 16; /* zelfde kleur als --brand, voor rgba() */
--brand-contrast: #ffffff;
--brand-soft: #fff3f5;
--brand-soft-border: #ffd6dc;
--brand-light: #d85b5b; /* lichte variant voor verlopen */
--brand-text: #a32d2d; /* merkkleur voor tekst op een licht vlak */
--menubalk: #e91d36; /* hoofdmenubalk (ook mobiel en sticky) */
/* Neutrals */
--text: #222222;
--text-muted: #6b7280;
--border: #e5e7eb;
--surface: #ffffff;
--surface-muted: #f5f5f5;
--surface-soft: #fafafa;
--ring: rgba(0, 0, 0, 0.08);
/* Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.04);
/* Callouts */
--callout-blue-bg: #f0f7ff;
--callout-blue-border: #cfe2ff;
--callout-green-bg: #f2fbf6;
--callout-green-border: #cfead9;
--callout-beige-bg: #fbf8f2;
--callout-beige-border: #e7dbc2;
--callout-warn-bg: #fff6f6;
--callout-warn-border: #f3c3c3;
--callout-brand-bg: var(--brand-soft);
--callout-brand-border: var(--brand-soft-border);
/* Compare */
--aow-compare-border: #e6e6e6;
--aow-compare-bg: #ffffff;
--aow-compare-ok: #2e7d32;
--aow-compare-no: #c62828;
/* Pros / cons */
--vs-pros-bg: hsl(140 60% 96%);
--vs-pros-accent: hsl(142 45% 32%);
--vs-cons-bg: hsl(0 85% 97%);
--vs-cons-accent: hsl(0 70% 40%);
--vs-text: hsl(220 15% 20%);
/* Tables */
--tbl-border: 1px solid #e5e7eb;
--tbl-bg: #ffffff;
--tbl-bg-alt: #fafafa;
--tbl-head-bg: #f5f5f5;
--tbl-text: #111827;
--tbl-muted: #6b7280;
--tbl-accent: #b30000;
--tbl-radius: 10px;
--tbl-pad-y: 12px;
--tbl-pad-x: 16px;
--tbl-font-size: var(--fs-small);
--tbl-line-height: 1.5;
/* Vienna transport */
--u1: #e31e24;
--u2: #7c4d9e;
--u3: #f08a00;
--u4: #009640;
--u6: #8a5a2b;
--vienna-tip-bg: #f7f3ea;
--vienna-tip-border: #c8a96b;
}
@media (min-width: 768px) {
:root {
--fs-body: 18px;
--fs-card: 17px;
--fs-small: 16px;
--fs-h2: 30px;
--fs-h3: 23px;
--fs-h4: 19px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--tbl-border: 1px solid #2f3237;
--tbl-bg: #17191d;
--tbl-bg-alt: #1d2024;
--tbl-head-bg: #202329;
--tbl-text: #e5e7eb;
--tbl-muted: #9ca3af;
--tbl-accent: #ff4d4d;
}
}
/* ==================================================
1) Basis / reset
================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ==================================================
2) Rank Math TOC
================================================== */
.rank-math-toc-container {
background-color: #f5f5f5;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.rmtoc-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.rmtoc-list {
list-style: none;
padding: 0;
margin: 0;
}
.rmtoc-list-item {
margin-bottom: 5px;
}
.rmtoc-link {
color: #333333;
text-decoration: none;
transition: color 0.3s ease;
}
.rmtoc-link:hover {
color: #e74c3c;
}
.rmtoc-current-section {
font-weight: 700;
}
/* TOC mobiel — kleinere tekst */
@media (max-width: 640px) {
.rank-math-toc-container {
font-size: var(--fs-small);
}
.rmtoc-list a {
word-break: normal;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
}
/* TOC mobiel — inklapbaar via JS */
@media (max-width: 768px) {
.wp-block-rank-math-toc-block {
font-size: var(--fs-small);
}
.wp-block-rank-math-toc-block h2 {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.wp-block-rank-math-toc-block h2::after {
content: "▼";
font-size: 11px;
color: var(--brand);
transition: transform .2s ease;
margin-left: .5rem;
}
.wp-block-rank-math-toc-block.toc-collapsed nav {
display: none;
}
.wp-block-rank-math-toc-block.toc-collapsed h2::after {
transform: rotate(-90deg);
}
}
/* ==================================================
3) Mega menu (desktop)
================================================== */
@media (min-width: 1099px) {
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
padding: 20px 0 20px 5px;
}
nav .main-nav .mega-menu > ul > li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: 400;
font-size: 16px;
}
nav .main-nav .mega-menu.mega-menu-col-2 > ul > li { width: 50%; }
nav .main-nav .mega-menu.mega-menu-col-3 > ul > li { width: 33.3333%; }
nav .main-nav .mega-menu.mega-menu-col-5 > ul > li { width: 20%; }
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: none;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
/* ==================================================
4) Layout: sidebar & content
================================================== */
@media (min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
/* Sticky sidebar — plakt bij scrollen */
.inside-right-sidebar aside:last-child {
position: sticky;
top: 70px;
}
}
/* ==================================================
5) Rank Math FAQ
================================================== */
#rank-math-faq {
background: #f3f4f5;
border-radius: 5px;
padding: 25px 15px;
}
.rank-math-list-item {
overflow: hidden;
background: #ffffff;
border-radius: 5px;
margin-bottom: 15px;
padding: 15px 15px 20px;
box-shadow: 0 0 10px #d9d9d9, 0 0 40px #ffffff;
}
.rank-math-question {
border-bottom: 1px solid #f0f4f8;
padding-bottom: 0.825rem;
margin-bottom: 0.825rem;
position: relative;
padding-right: 40px;
}
/* ==================================================
6) Banner animatie
================================================== */
.banner {
position: fixed;
right: 0;
bottom: 0;
transform: translateY(100vh);
animation: banner-fade-in 1s 1s ease-in forwards;
}
@keyframes banner-fade-in {
0% { transform: translateY(100vh); }
100% { transform: translateY(0); }
}
.close-btn {
position: absolute;
top: 12px;
right: 12px;
}
.hide-me {
display: none;
}
/* ==================================================
7) Reactieformulier
================================================== */
#respond {
background: #fbfbfb;
padding: 0 10px;
}
#respond input[type="text"],
#respond textarea {
transition: all 0.3s ease-in-out;
outline: none;
padding: 3px 0 3px 3px;
margin: 5px 1px 3px 0;
border: 1px solid #dddddd;
}
#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond input[type="url"]:focus,
#respond textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 2px solid rgba(81, 203, 238, 1);
}
/* ==================================================
8) Legacy infoblok
================================================== */
.infoblok {
width: 100%;
margin-bottom: 15px;
padding: 15px;
border: 2px dashed #c50606 !important;
border-radius: 15px;
background-color: #f7f4ef !important;
}
/* ==================================================
9) Buttons & CTA's
================================================== */
/* GenerateBlocks knop */
.gb-button {
display: inline-block !important;
padding: 12px 24px !important;
border: 2px solid transparent !important;
border-radius: var(--radius-sm) !important;
background-color: var(--brand) !important;
color: var(--brand-contrast) !important;
font-weight: 700 !important;
line-height: 1.2;
text-decoration: none !important;
cursor: pointer !important;
transition: background-color 0.25s ease, transform 0.2s ease, color 0.2s ease;
}
.gb-button:hover {
background-color: var(--brand-hover) !important;
color: var(--brand-contrast) !important;
transform: translateY(-2px);
}
/* Primaire CTA — meerdere contexten */
a.aoo-cta,
.gb-button.aoo-cta,
.wp-block-button .aoo-cta,
.wp-element-button.aoo-cta,
.wp-block-button__link.aoo-cta {
display: inline-block;
padding: 0.75em 1.5em;
border: 2px solid transparent;
border-radius: var(--radius-sm);
background-color: var(--brand) !important;
color: var(--brand-contrast) !important;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none !important;
cursor: pointer;
transition: background-color 0.25s ease, transform 0.2s ease, color 0.2s ease;
}
a.aoo-cta:hover,
.gb-button.aoo-cta:hover,
.wp-block-button .aoo-cta:hover,
.wp-element-button.aoo-cta:hover,
.wp-block-button__link.aoo-cta:hover {
background-color: var(--brand-hover) !important;
color: var(--brand-contrast) !important;
transform: translateY(-2px);
}
a.aoo-cta:visited,
.gb-button.aoo-cta:visited,
.wp-block-button__link.aoo-cta:visited {
color: var(--brand-contrast) !important;
}
/* CTA als wrapper-element */
.aoo-cta a,
.aoo-cta .gb-button,
.aoo-cta .wp-block-button__link {
display: inline-block;
padding: 0.75em 1.5em;
border: 2px solid transparent;
border-radius: var(--radius-sm);
background-color: var(--brand) !important;
color: var(--brand-contrast) !important;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none !important;
transition: background-color 0.25s ease, transform 0.2s ease, color 0.2s ease;
}
.aoo-cta a:hover,
.aoo-cta .gb-button:hover,
.aoo-cta .wp-block-button__link:hover {
background-color: var(--brand-hover) !important;
color: var(--brand-contrast) !important;
transform: translateY(-2px);
}
/* Outline-variant */
a.aoo-cta--outline,
.gb-button.aoo-cta--outline,
.wp-block-button .aoo-cta--outline,
.wp-block-button__link.aoo-cta--outline {
background: transparent !important;
color: var(--brand) !important;
border-color: var(--brand) !important;
}
a.aoo-cta--outline:hover,
.gb-button.aoo-cta--outline:hover,
.wp-block-button .aoo-cta--outline:hover,
.wp-block-button__link.aoo-cta--outline:hover {
background: var(--brand) !important;
color: var(--brand-contrast) !important;
}
/* Booking.com CTA — blauw */
a.aoo-cta-booking,
.aoo-cta-booking a {
display: inline-block;
padding: 0.75em 1.5em;
border: 2px solid transparent;
border-radius: var(--radius-sm);
background-color: #003b95 !important;
color: #ffffff !important;
font-size: 1rem;
font-weight: 700;
text-decoration: none !important;
transition: background-color 0.3s ease, transform 0.2s ease, color 0.2s ease;
}
a.aoo-cta-booking:hover,
.aoo-cta-booking a:hover {
background-color: #00224f !important;
color: #ffffff !important;
transform: translateY(-2px);
}
a.aoo-cta-booking:visited,
.aoo-cta-booking a:visited {
color: #ffffff !important;
}
/* Focus ring voor toegankelijkheid */
a:focus-visible,
button:focus-visible,
.gb-button:focus-visible,
.wp-block-button__link:focus-visible {
outline: 2px solid var(--brand-soft-border);
outline-offset: 3px;
}
/* ==================================================
10) Callouts
================================================== */
.aoo-callout {
position: relative;
margin: 2rem 0;
padding: 1.25rem 1.5rem;
border: 1px solid var(--ring);
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-md);
font-size: var(--fs-body);
line-height: 1.75;
}
.aoo-callout p {
margin-bottom: 1rem;
}
.aoo-callout .wp-block-buttons,
.aoo-callout .aoo-cta {
margin-top: 0.75rem;
}
.aoo-callout h2,
.aoo-callout h3 {
margin: 0 0 0.5rem;
font-weight: 700;
}
/* Kleurvarianten */
.aoo-callout--brand { background: var(--callout-brand-bg); border-color: var(--callout-brand-border); }
.aoo-callout--blue { background: var(--callout-blue-bg); border-color: var(--callout-blue-border); }
.aoo-callout--green { background: var(--callout-green-bg); border-color: var(--callout-green-border); }
.aoo-callout--beige { background: var(--callout-beige-bg); border-color: var(--callout-beige-border); }
.aoo-callout--warn { background: var(--callout-warn-bg); border-color: var(--callout-warn-border); }
/* ==================================================
10b) Gedeelde panels / cards
================================================== */
.aow-panel {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface-soft);
}
.aow-panel--shadow { box-shadow: var(--shadow-md); }
.aow-card {
padding: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
/* ==================================================
10c) Note / tip / info boxes
================================================== */
.aoo-note-box,
.aoo-tip-box,
.aoo-info-box {
margin: 1.5rem 0;
padding: 1rem 1.1rem;
border: 1px solid;
border-radius: var(--radius-lg);
font-size: var(--fs-body);
line-height: 1.75;
}
.aoo-note-box strong,
.aoo-tip-box strong,
.aoo-info-box strong {
color: var(--text);
}
/* Geel = tip, rood-zacht = info */
.aoo-tip-box { background: #fff8e8; border-color: #f2d48a; }
.aoo-info-box { background: var(--brand-soft); border-color: var(--brand-soft-border); }
/* ==================================================
11) Compare block
================================================== */
.aow-compare {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
overflow: hidden;
border: 1px solid var(--aow-compare-border);
border-radius: var(--radius-lg);
background: var(--aow-compare-bg);
}
/* Accentrand via pseudo-element zodat border-radius klopt */
.aow-compare--accent { border-color: transparent; }
.aow-compare--accent::before {
content: "";
position: absolute;
inset: 0;
border: 1.5px solid var(--brand);
border-radius: var(--radius-lg);
box-sizing: border-box;
pointer-events: none;
}
.aow-compare__header {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px clamp(16px, 3vw, 28px);
border-bottom: 1px solid var(--aow-compare-border);
}
.aow-compare__header:first-child { border-right: 1px solid var(--aow-compare-border); }
.aow-compare__title {
margin: 0;
font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}
.aow-compare__image {
max-width: 140px;
height: auto;
border-radius: 8px;
}
.aow-compare__row { display: contents; }
.aow-compare__label,
.aow-compare__cell {
padding: 14px clamp(14px, 2.5vw, 24px);
border-top: 1px solid var(--aow-compare-border);
}
.aow-compare__label {
grid-column: 1 / -1;
font-weight: 700;
color: #222222;
background: #f6f6f6;
}
/* Desktop: drie kolommen — label links, twee opties rechts */
@media (min-width: 820px) {
.aow-compare { grid-template-columns: 260px 1fr 1fr; }
.aow-compare__header:first-child { grid-column: 2; border-right: none; }
.aow-compare__header:nth-of-type(2) { grid-column: 3; }
.aow-compare__label { grid-column: 1; background: #fafafa; }
.aow-compare__cell:nth-of-type(2) { border-left: 1px solid var(--aow-compare-border); }
}
@media (max-width: 819px) {
.aow-compare__label,
.aow-compare__cell { padding: 12px 16px; }
}
/* Iconen in compare — ok groen, no rood */
.aow-icon {
width: 1.2em;
height: 1.2em;
margin-right: 0.5rem;
vertical-align: -2px;
color: currentColor;
flex-shrink: 0;
}
.aow-icon.ok { color: var(--aow-compare-ok); }
.aow-icon.no { color: var(--aow-compare-no); }
/* CTA-rij onderaan compare */
.aow-compare__row--cta .aow-compare__label { background: transparent; }
.aow-compare__row--cta .aow-compare__cell { padding-block: 20px; text-align: center; }
.aow-compare__row--cta .aoo-cta { width: 100%; max-width: 420px; }
/* ==================================================
12) Pros / cons blokken
================================================== */
.vs-wrap {
display: grid;
gap: 1rem;
}
@media (min-width: 860px) {
.vs-wrap { grid-template-columns: 1fr 1fr; }
}
.vs-block {
padding: 1.1rem 1.2rem;
border-radius: var(--radius-xl);
}
.vs-block h3 {
margin: 0 0 0.6rem;
font-size: clamp(1.05rem, 1.1vw + 0.9rem, 1.25rem);
font-weight: 700;
color: var(--vs-text);
}
.vs-list {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.vs-item {
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
gap: 0.6rem;
line-height: 1.45;
color: var(--vs-text);
}
/* Icoon via inline SVG als data-URI */
.vs-item::before {
content: "";
width: 28px;
height: 28px;
background-size: cover;
border-radius: 50%;
flex-shrink: 0;
}
.vs-block.pros { background: var(--vs-pros-bg); }
.vs-block.pros .vs-item::before {
background-image: url("data:image/svg+xml;utf8,");
}
.vs-block.cons { background: var(--vs-cons-bg); }
.vs-block.cons .vs-item::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* ==================================================
13) Tabellen
================================================== */
/* Wrapper zorgt voor horizontaal scrollen op mobiel */
.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: var(--tbl-border);
border-radius: var(--tbl-radius);
background: var(--tbl-bg);
}
.museum-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--tbl-bg);
color: var(--tbl-text);
font-size: var(--tbl-font-size);
line-height: var(--tbl-line-height);
}
.museum-table thead th {
padding: var(--tbl-pad-y) var(--tbl-pad-x);
border-bottom: var(--tbl-border);
background: var(--tbl-head-bg);
text-align: left;
font-weight: 600;
white-space: nowrap;
}
.museum-table th,
.museum-table td {
padding: var(--tbl-pad-y) var(--tbl-pad-x);
border-bottom: var(--tbl-border);
vertical-align: middle;
}
/* Varianten */
.museum-table--striped tbody tr:nth-child(even) td { background: var(--tbl-bg-alt); }
.museum-table--compact th,
.museum-table--compact td { padding: 8px 12px; font-size: 0.95em; }
.museum-table .is-num { text-align: right; white-space: nowrap; }
/* Klikbare links in tabel */
.museum-table .action-link {
color: var(--tbl-accent);
font-weight: 600;
text-decoration: none;
}
.museum-table .action-link:hover,
.museum-table .action-link:focus { text-decoration: underline; }
.museum-table caption {
caption-side: top;
padding: 8px 0 12px;
text-align: left;
font-weight: 600;
}
.table-note {
margin-top: 8px;
font-size: 0.925em;
color: var(--tbl-muted);
}
@media (max-width: 640px) {
.museum-table th,
.museum-table td { padding: 10px 12px; }
}
/* Ticket tabel — aanbevolen rij gemarkeerd */
.aow-ticket-table .is-recommended td { background: #fff7e8; }
.aow-ticket-table .is-recommended td:first-child { position: relative; }
.aow-ticket-table .is-recommended td:first-child::before {
content: "Aanrader";
display: inline-block;
margin-right: 0.6rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
background: var(--brand);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
vertical-align: middle;
}
/* Ticket tabel — mobiel: kaartjes-layout */
@media (max-width: 760px) {
.aow-ticket-table thead { display: none; }
.aow-ticket-table,
.aow-ticket-table tbody,
.aow-ticket-table tr,
.aow-ticket-table td { display: block; width: 100%; }
.aow-ticket-table tr {
margin-bottom: 1rem;
border-bottom: 0;
border-radius: 12px;
overflow: hidden;
background: var(--tbl-bg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.aow-ticket-table td {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0.75rem;
padding: 0.85rem 1rem;
text-align: left !important;
border-bottom: 1px solid #ececec;
}
.aow-ticket-table td:last-child { border-bottom: 0; }
.aow-ticket-table td::before { content: attr(data-label); font-weight: 700; color: #444; }
.aow-ticket-table .is-recommended td:first-child::before {
content: attr(data-label);
margin-right: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: #444;
font-size: inherit;
font-weight: 700;
}
.aow-ticket-table .is-recommended td:first-child strong::before {
content: "Aanrader";
display: inline-block;
margin-right: 0.5rem;
padding: 0.18rem 0.45rem;
border-radius: 999px;
background: var(--brand);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
vertical-align: middle;
}
}
/* ==================================================
14) Weens openbaar vervoer — metro badges & tips
================================================== */
.vienna-metro-stations { padding-left: 1.2rem; }
.vienna-metro-stations li { margin-bottom: 0.65rem; }
/* Metro-lijn badges (U1 t/m U6) */
.u1-badge, .u2-badge, .u3-badge, .u4-badge, .u6-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.35rem;
height: 2rem;
padding: 0 0.55rem;
border-radius: var(--radius-pill);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
position: relative;
top: -1px;
box-shadow: var(--shadow-sm);
}
/* Officiële Weense metrokleuren */
.u1-badge { background: var(--u1); }
.u2-badge { background: var(--u2); }
.u3-badge { background: var(--u3); }
.u4-badge { background: var(--u4); }
.u6-badge { background: var(--u6); }
/* Gouden tip-box */
.vienna-tip-box {
margin: 1.5rem 0;
padding: 1.25rem 1.25rem 1rem;
border-left: 4px solid var(--vienna-tip-border);
border-radius: var(--radius-md);
background: var(--vienna-tip-bg);
}
.vienna-tip-box h2,
.vienna-tip-box h3 { margin-top: 0; margin-bottom: 0.75rem; }
/* Metro-toegangsblok (bijv. Prater-pagina) */
.metro-access {
margin: 1.5rem 0 2rem;
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface-soft);
box-shadow: var(--shadow-md);
}
.metro-access__intro { margin: 0 0 1rem; color: var(--text); font-weight: 700; }
.metro-stop {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
}
.metro-stop:first-of-type { padding-top: 0; border-top: 0; }
.metro-stop:last-of-type { padding-bottom: 0; }
.metro-stop__lines { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 96px; }
.metro-stop__content { flex: 1; min-width: 0; }
.metro-stop__name { display: block; margin: 0 0 0.2rem; color: var(--text); font-size: 1rem; line-height: 1.4; }
.metro-stop__text { margin: 0; color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 767px) {
.metro-access { padding: 1rem; border-radius: var(--radius-lg); }
.metro-stop { flex-direction: column; gap: 0.7rem; }
.metro-stop__lines { min-width: 0; }
.metro-stop__text { font-size: 0.96rem; line-height: 1.55; }
}
/* ==================================================
15) Misc — copyright, keuzewijzer
================================================== */
.copyright-blok {
padding: 10px;
border: 1px solid #cccccc;
background-color: #f5f5f5;
color: #333333;
font-size: 0.75em;
}
.aow-choice-guide {
margin: 2rem 0;
padding: 1.25rem 1.25rem 1rem;
border: 1px solid #e5e7eb;
border-radius: 16px;
background: #fafafa;
}
.aow-choice-guide h2 { margin-bottom: 0.5rem; }
.aow-choice-guide p { margin-bottom: 0.9rem; }
.aow-choice-guide__list { margin: 0; padding-left: 1.2rem; }
.aow-choice-guide__list li { margin-bottom: 0.55rem; }
/* ==================================================
16) Bezienswaardigheid info card
================================================== */
.aoo-sight-card {
margin: 1.25rem 0 1.75rem;
padding: 1rem 1.25rem;
border: 1px solid var(--callout-beige-border);
border-radius: var(--radius-lg);
background: var(--callout-beige-bg);
font-size: var(--fs-body);
line-height: 1.75;
}
.aoo-sight-card__row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0.2rem 0.75rem;
margin-bottom: 0.2rem;
color: var(--text);
}
.aoo-sight-card__label {
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.aoo-sight-card__link {
display: inline-block;
margin-top: 0.75rem;
color: var(--brand);
font-weight: 700;
text-decoration: none;
}
.aoo-sight-card__link:hover { color: var(--brand-hover); text-decoration: underline; }
@media (max-width: 480px) {
.aoo-sight-card__row { grid-template-columns: 1fr; gap: 0; }
.aoo-sight-card__label { font-size: 0.85rem; }
}
/* ==================================================
17) Homepage feature cards
================================================== */
.aow-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin: 1.5rem 0;
}
.aow-feature-card {
background: var(--surface, #fff);
border: 0.5px solid var(--border, #e5e7eb);
border-radius: var(--radius-lg, 14px);
overflow: hidden;
display: flex;
flex-direction: column;
}
.aow-feature-card a.aow-feature-card__img-link {
display: block;
overflow: hidden;
flex-shrink: 0;
}
.aow-feature-card__img-link img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.aow-feature-card__img-link:hover img { transform: scale(1.04); }
.aow-feature-card__body {
padding: 1rem;
display: flex;
flex-direction: column;
flex: 1;
}
/* Categorie-label — pill bovenaan de kaart */
.aow-feature-card__label {
display: inline-block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: .6rem;
align-self: flex-start;
}
/* Handmatige kleurklassen (voor statische content) */
.aow-feature-card__label--rood { background: #fff3f5; color: #a32d2d; }
.aow-feature-card__label--paars { background: #eeedfe; color: #3c3489; }
.aow-feature-card__label--groen { background: #eaf3de; color: #3b6d11; }
.aow-feature-card__label--blauw { background: #e6f1fb; color: #0c447c; }
.aow-feature-card__label--amber { background: #faeeda; color: #633806; }
.aow-feature-card__label--teal { background: #e1f5ee; color: #085041; }
/* Dynamische kleurklassen op basis van WordPress-categorie-slug */
.aow-feature-card__label--cat-hotels { background: #e6f1fb; color: #0c447c; }
.aow-feature-card__label--cat-budget { background: #eaf3de; color: #3b6d11; }
.aow-feature-card__label--cat-blog { background: #eeedfe; color: #3c3489; }
.aow-feature-card__label--cat-vervoer { background: #e1f5ee; color: #085041; }
.aow-feature-card__label--cat-bezienswaardigheden { background: #faeeda; color: #633806; }
.aow-feature-card__label--cat-eten { background: #fff3f5; color: #a32d2d; }
.aow-feature-card__title {
font-size: 18px;
font-weight: 500;
color: var(--text, #222);
margin-bottom: .5rem;
line-height: 1.35;
}
.aow-feature-card__desc {
font-size: var(--fs-card);
color: var(--text-muted, #6b7280);
line-height: 1.65;
margin-bottom: .85rem;
flex: 1;
}
/* CTA-knop onderaan de kaart */
.aow-feature-card__btn {
display: inline-block;
padding: 9px 18px;
border-radius: var(--radius-sm, 6px);
background: var(--brand, #b21010);
color: #fff !important;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
transition: background .2s ease, transform .15s ease;
align-self: flex-start;
margin-top: auto;
}
.aow-feature-card__btn:hover {
background: var(--brand-hover, #8e0d0d);
transform: translateY(-1px);
color: #fff !important;
}
/* Kleurvarianten voor de knop */
.aow-feature-card__btn--paars { background: #534AB7; }
.aow-feature-card__btn--paars:hover { background: #3c3489; }
.aow-feature-card__btn--groen { background: #3B6D11; }
.aow-feature-card__btn--groen:hover { background: #27500A; }
.aow-feature-card__btn--blauw { background: #185FA5; }
.aow-feature-card__btn--blauw:hover { background: #0c447c; }
.aow-feature-card__btn--amber { background: #854F0B; }
.aow-feature-card__btn--amber:hover { background: #633806; }
.aow-feature-card__btn--teal { background: #0F6E56; }
.aow-feature-card__btn--teal:hover { background: #085041; }
@media (max-width: 768px) {
.aow-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.aow-feature-grid { grid-template-columns: 1fr; }
}
/* ==================================================
18) Homepage intro grid (tekst + meest gelezen)
================================================== */
.aow-intro-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.25rem;
margin: 1.5rem 0;
align-items: stretch;
}
/* Linkerkolom — intro tekst met rode accentlijn */
.aow-intro-text {
background: #fbf8f2;
border: 1px solid #e7dbc2;
border-radius: var(--radius-lg, 14px);
border-left: 4px solid var(--brand, #b21010);
padding: 1.5rem 1.75rem;
font-size: var(--fs-body);
line-height: 1.8;
color: var(--text, #222);
align-self: stretch;
}
.aow-intro-text__header {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--brand, #b21010);
margin-bottom: .75rem;
}
.aow-intro-text p { margin-bottom: 1rem; }
.aow-intro-text p:last-child { margin-bottom: 0; }
/* Rechterkolom — meest gelezen lijst */
.aow-most-read {
background: var(--brand-soft);
border: 1px solid var(--brand-soft-border);
border-radius: var(--radius-lg, 14px);
border-top: 4px solid var(--brand, #b21010);
padding: 1.25rem;
align-self: stretch;
}
.aow-most-read__title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--brand, #b21010);
margin-bottom: .85rem;
padding-bottom: .6rem;
border-bottom: 1px solid var(--brand-soft-border);
}
.aow-most-read__list { list-style: none; margin: 0; padding: 0; }
.aow-most-read__list li { border-bottom: 1px solid var(--brand-soft-border); }
.aow-most-read__list li:last-child { border-bottom: none; }
.aow-most-read__list a {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 0;
font-size: var(--fs-body);
font-weight: 500;
color: #222;
text-decoration: none;
line-height: 1.55;
transition: color .15s ease;
}
/* Pijltje vóór elk item */
.aow-most-read__list a::before {
content: "→";
color: var(--brand, #b21010);
font-weight: 700;
flex-shrink: 0;
font-size: 14px;
transition: transform .15s ease;
}
.aow-most-read__list a:hover { color: var(--brand, #b21010); }
.aow-most-read__list a:hover::before { transform: translateX(3px); }
@media (max-width: 768px) {
.aow-intro-grid { grid-template-columns: 1fr; }
}
/* ==================================================
19) Homepage welkom-blok (foto + tekst)
================================================== */
.aow-welkom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: center;
background: #fbf8f2;
border: 1px solid #e7dbc2;
border-left: 4px solid var(--brand, #b21010);
border-radius: var(--radius-lg, 14px);
padding: 1.5rem 1.75rem;
margin-bottom: 1.5rem;
font-size: var(--fs-body);
line-height: 1.8;
color: var(--text, #222);
}
.aow-welkom__foto img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: var(--radius-md, 10px);
}
@media (max-width: 640px) {
.aow-welkom { grid-template-columns: 1fr; }
}
/* ==================================================
20) Globale typografie — schaal via --fs-* tokens (v1.4.0)
================================================== */
body {
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.entry-content,
.entry-summary,
.page-content {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text);
}
.entry-content p,
.entry-summary p,
.page-content p {
font-size: var(--fs-body);
line-height: var(--lh-body);
margin-bottom: 1.2em;
}
/* Paginatitel */
h1.entry-title,
.entry-header h1 {
font-size: clamp(28px, 2.2vw + 18px, 40px);
line-height: 1.2;
font-weight: 700;
}
.entry-content h2,
.entry-summary h2,
.page-content h2 {
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.25;
margin-top: 2.2rem;
margin-bottom: .8rem;
color: var(--text);
}
.entry-content h3,
.entry-summary h3,
.page-content h3 {
font-size: var(--fs-h3);
font-weight: 600;
line-height: 1.3;
margin-top: 1.75rem;
margin-bottom: .6rem;
color: var(--text);
}
.entry-content h4,
.entry-summary h4,
.page-content h4 {
font-size: var(--fs-h4);
font-weight: 600;
line-height: 1.35;
margin-top: 1.4rem;
margin-bottom: .5rem;
color: var(--text);
}
.entry-content ul,
.entry-content ol,
.entry-summary ul,
.entry-summary ol {
font-size: var(--fs-body);
line-height: var(--lh-body);
margin-bottom: 1.2em;
padding-left: 1.4rem;
}
.entry-content li,
.entry-summary li {
margin-bottom: .45em;
}
.entry-content blockquote {
font-size: calc(var(--fs-body) + 1px);
font-style: italic;
border-left: 3px solid var(--brand);
padding-left: 1rem;
margin: 1.5rem 0;
color: var(--text-muted);
line-height: var(--lh-body);
}
/* ==================================================
21) Seizoensblokken — weerpagina
================================================== */
.aow-seizoen-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 1rem 0 2rem;
}
.aow-seizoen-card {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-md);
}
.aow-seizoen-card__header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
}
.aow-seizoen-card__icon { font-size: 22px; flex-shrink: 0; }
.aow-seizoen-card__naam { font-size: 15px; font-weight: 600; color: #fff; margin: 0; }
.aow-seizoen-card__mnd { font-size: 12px; color: rgba(255,255,255,0.75); }
.aow-seizoen-card__temp {
margin-left: auto;
text-align: right;
font-size: 20px;
font-weight: 700;
color: #fff;
white-space: nowrap;
}
.aow-seizoen-card__gem { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 2px; }
.aow-seizoen-card__body {
padding: 14px 18px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: var(--fs-small);
line-height: 1.6;
}
.aow-seizoen-card__body p { margin: 0 0 10px; }
.aow-seizoen-card__stats {
display: flex;
gap: 12px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 500;
}
/* Seizoenskleuren */
.aow-seizoen--winter .aow-seizoen-card__header { background: #1a6fa8; }
.aow-seizoen--winter .aow-seizoen-card__body { background: #f0f7fd; color: #1a3a52; }
.aow-seizoen--winter .aow-seizoen-card__stats { color: #1a6fa8; }
.aow-seizoen--winter { border-color: #d0e4f5; }
.aow-seizoen--lente .aow-seizoen-card__header { background: #4a8c2a; }
.aow-seizoen--lente .aow-seizoen-card__body { background: #f3f9ee; color: #1e3a10; }
.aow-seizoen--lente .aow-seizoen-card__stats { color: #4a8c2a; }
.aow-seizoen--lente { border-color: #c2dba4; }
.aow-seizoen--zomer .aow-seizoen-card__header { background: #b8670a; }
.aow-seizoen--zomer .aow-seizoen-card__body { background: #fef9ee; color: #4a2e00; }
.aow-seizoen--zomer .aow-seizoen-card__stats { color: #b8670a; }
.aow-seizoen--zomer { border-color: #e8b86a; }
.aow-seizoen--herfst .aow-seizoen-card__header { background: #b05a1a; }
.aow-seizoen--herfst .aow-seizoen-card__body { background: #fdf5ee; color: #3a1a00; }
.aow-seizoen--herfst .aow-seizoen-card__stats { color: #b05a1a; }
.aow-seizoen--herfst { border-color: #e8c4a0; }
@media (max-width: 600px) {
.aow-seizoen-grid { grid-template-columns: 1fr; }
}
/* ==================================================
22) Maand stats rij (vervangt bulletlijst)
================================================== */
.aow-maand-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 0.5rem 0 1.25rem;
padding: 12px 16px;
background: var(--surface-muted);
border-radius: var(--radius-md);
border: 1px solid var(--border);
font-size: var(--fs-small);
font-weight: 500;
color: var(--text-muted);
list-style: none;
}
.aow-maand-stats li {
margin: 0;
display: flex;
align-items: center;
gap: 5px;
}
/* ==================================================
23) Hotel cards
================================================== */
.aow-hotel-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
}
.aow-hotel-card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: var(--surface-muted);
border-bottom: 1px solid var(--border);
}
.aow-hotel-card__name {
font-size: 17px;
font-weight: 600;
color: var(--text);
margin: 0;
}
/* Sterren in goud */
.aow-hotel-card__stars {
color: #f5a623;
font-size: 14px;
letter-spacing: 2px;
flex-shrink: 0;
}
.aow-hotel-card__body {
padding: 16px 18px;
font-size: var(--fs-card);
line-height: 1.7;
color: var(--text);
}
.aow-hotel-card__body p { margin: 0 0 10px; }
.aow-hotel-card__body p:last-child { margin-bottom: 0; }
.aow-hotel-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 10px 18px;
background: var(--surface-soft);
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--text-muted);
}
.aow-hotel-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--border);
}
.aow-hotel-card__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Tag-pills in de footer */
.aow-hotel-card__tag {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-pill);
}
.aow-hotel-card__tag--budget { background: #eaf3de; color: #3b6d11; }
.aow-hotel-card__tag--midden { background: #e6f1fb; color: #0c447c; }
.aow-hotel-card__tag--luxe { background: #fff3f5; color: #a32d2d; }
.aow-hotel-card__tag--gezin { background: #faeeda; color: #633806; }
.aow-hotel-card__tag--centraal { background: #e1f5ee; color: #085041; }
.aow-hotel-card__tag--apart { background: #eeedfe; color: #3c3489; }
@media (max-width: 600px) {
.aow-hotel-card__footer { flex-direction: column; align-items: flex-start; }
}
/* Uitgelichte foto bovenaan hotel card */
.aow-hotel-card__img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.aow-hotel-card__img-wrap {
overflow: hidden;
flex-shrink: 0;
}
.aow-hotel-card__img-wrap:hover .aow-hotel-card__img {
transform: scale(1.04);
}
/* ==================================================
24) Decision block & related links
================================================== */
/* Decision block — hulpblok voor keuzebegeleiding */
.aoo-decision-block {
margin: 2rem 0;
padding: 1.4rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: var(--radius-xl, 18px);
background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f7 100%);
box-shadow: var(--shadow-md, 0 2px 6px rgba(0, 0, 0, 0.05));
}
.aoo-decision-block > h2 { margin: 0 0 1rem; }
.aoo-decision-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
/* Individuele keuzekaart met rode accentbalk bovenaan */
.aoo-decision-card {
position: relative;
padding: 1.1rem 1.05rem 1rem;
border: 1px solid rgba(var(--brand-rgb), 0.08);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.aoo-decision-card::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--brand, #b21010) 0%, var(--brand-light) 100%);
}
.aoo-decision-card strong {
display: block;
margin: 0 0 0.45rem;
color: var(--text, #222222);
font-size: 1.02rem;
font-weight: 700;
line-height: 1.35;
}
.aoo-decision-card p {
margin: 0;
color: var(--text-muted, #6b7280);
font-size: var(--fs-card);
line-height: 1.65;
}
/* Uitgelichte variant — iets meer accentuering */
.aoo-decision-card--featured {
border-color: rgba(var(--brand-rgb), 0.18);
background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}
.aoo-decision-card--featured::before { height: 5px; }
@media (max-width: 768px) {
.aoo-decision-block { padding: 1rem; border-radius: var(--radius-lg, 14px); }
.aoo-decision-grid { grid-template-columns: 1fr; }
.aoo-decision-card { padding: 1rem 0.95rem 0.9rem; border-radius: 14px; }
.aoo-decision-card strong { font-size: 1rem; }
}
/* Related links blok — pijltjeslijst */
.aoo-related-links {
margin: 3rem 0 2rem;
padding: 1.35rem 1.4rem;
border: 1px solid var(--border, #e5e7eb);
border-radius: var(--radius-xl, 18px);
background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f7 100%);
box-shadow: var(--shadow-md, 0 2px 6px rgba(0, 0, 0, 0.05));
}
.aoo-related-links h2 { margin: 0 0 1rem; }
.aoo-related-links ul { list-style: none; margin: 0; padding: 0; }
.aoo-related-links li + li { margin-top: 0.7rem; }
.aoo-related-links a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--brand, #b21010);
font-weight: 600;
text-decoration: none;
line-height: 1.5;
}
.aoo-related-links a::before {
content: "→";
color: var(--brand, #b21010);
font-weight: 700;
transition: transform 0.2s ease;
}
.aoo-related-links a:hover,
.aoo-related-links a:focus { color: var(--brand-hover, #8e0d0d); text-decoration: underline; }
.aoo-related-links a:hover::before,
.aoo-related-links a:focus::before { transform: translateX(2px); }
@media (max-width: 768px) {
.aoo-related-links { margin: 2.2rem 0 1.5rem; padding: 1rem; border-radius: var(--radius-lg, 14px); }
}
/* ==================================================
25) Festivals en evenementen — event guide layout
================================================== */
.aoo-event-guide { margin: 0; }
.aoo-event-guide section { margin: 0 0 2.5rem; }
.aoo-event-guide h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.25; }
.aoo-event-guide h3 { margin: 1.6rem 0 0.75rem; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.35; }
.aoo-event-guide p { margin: 0 0 1rem; }
.aoo-event-guide ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.aoo-event-guide ul li { margin: 0 0 0.65rem; line-height: 1.6; }
.aoo-event-guide .aoo-page-intro { margin: 0 0 2rem; }
.aoo-event-guide .aoo-page-intro p:last-child { margin-bottom: 0; }
/* Decision en related blocks binnen event guide */
.aoo-event-guide .aoo-decision-block,
.aoo-event-guide .aoo-related-links {
padding: 1.4rem;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f7 100%);
box-shadow: var(--shadow-md);
}
.aoo-event-guide .aoo-decision-block { margin: 2rem 0; }
.aoo-event-guide .aoo-related-links { margin-top: 3rem; }
.aoo-event-guide .aoo-decision-block h2,
.aoo-event-guide .aoo-related-links h2 { margin-top: 0; }
.aoo-event-guide .aoo-decision-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.aoo-event-guide .aoo-decision-card {
position: relative;
padding: 1.1rem 1.05rem 1rem;
border: 1px solid rgba(var(--brand-rgb), 0.08);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.aoo-event-guide .aoo-decision-card::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; height: 4px;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
}
.aoo-event-guide .aoo-decision-card strong {
display: block;
margin: 0 0 0.45rem;
color: var(--text);
font-size: 1.02rem;
font-weight: 700;
line-height: 1.35;
}
.aoo-event-guide .aoo-decision-card p {
margin: 0;
color: var(--text-muted);
font-size: var(--fs-card);
line-height: 1.65;
}
@media (max-width: 768px) {
.aoo-event-guide section { margin: 0 0 2rem; }
.aoo-event-guide .aoo-decision-grid { grid-template-columns: 1fr; }
.aoo-event-guide .aoo-decision-block,
.aoo-event-guide .aoo-related-links,
.aoo-event-guide .aoo-conclusion { padding: 1rem; border-radius: var(--radius-lg); }
.aoo-event-guide .aoo-decision-card { padding: 0.9rem; }
}
/* ==================================================
26) Homepage blog-sectie
================================================== */
/* Sectie-wrapper */
.aow-blog-sectie {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 2rem 0;
}
/* Sectie header — subtiele variant */
.aow-blog-sectie__header {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
border-bottom: 2px solid var(--brand);
border-radius: 0;
padding: 0 0 10px 0;
margin-bottom: 0;
}
.aow-blog-sectie__titel {
font-size: 18px;
font-weight: 600;
margin: 0;
color: var(--text);
}
/* Kleine rode accentlijn links van de titel */
.aow-blog-sectie__titel::before {
content: "";
display: inline-block;
width: 4px;
height: 1.1em;
background: var(--brand);
border-radius: 2px;
margin-right: 10px;
vertical-align: middle;
position: relative;
top: -1px;
}
.aow-blog-sectie__alle {
font-size: 13px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
transition: color .15s ease;
}
.aow-blog-sectie__alle:hover { color: var(--brand-hover); }
/* Uitgelicht bericht — breed over volledige breedte */
.aow-blog-featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.aow-blog-featured__img-wrap { overflow: hidden; }
.aow-blog-featured__img-wrap img {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.aow-blog-featured__img-wrap:hover img { transform: scale(1.04); }
.aow-blog-featured__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}
.aow-blog-featured__titel {
font-size: 20px;
font-weight: 500;
line-height: 1.35;
margin: 0;
}
.aow-blog-featured__titel a { color: var(--text); text-decoration: none; }
.aow-blog-featured__titel a:hover { color: var(--brand); }
.aow-blog-featured__excerpt {
font-size: var(--fs-card);
color: var(--text-muted);
line-height: 1.65;
margin: 0;
flex: 1;
}
/* Desktop: 3 kleine kaartjes naast elkaar */
@media (min-width: 640px) {
.aow-blog-sectie { grid-template-columns: repeat(3, 1fr); }
.aow-blog-sectie__header,
.aow-blog-featured { grid-column: 1 / -1; }
}
/* Mobiel: featured als enkele kolom */
@media (max-width: 639px) {
.aow-blog-featured { grid-template-columns: 1fr; }
.aow-blog-featured__img-wrap img { min-height: 180px; height: 180px; }
}
/* ==================================================
27) Blog overzichtspagina (/category/blog/)
================================================== */
/* Paginatitel en intro-tekst */
.aow-blog-archive__header {
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.aow-blog-archive__titel {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
margin: 0 0 .5rem;
color: var(--text);
}
.aow-blog-archive__intro {
font-size: var(--fs-body);
color: var(--text-muted);
margin: 0;
line-height: 1.7;
}
/* Categorie-filter knoppen */
.aow-blog-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 1.75rem;
}
.aow-blog-filter__btn {
display: inline-block;
padding: 6px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all .15s ease;
}
.aow-blog-filter__btn:hover {
border-color: var(--brand);
color: var(--brand);
}
/* Actieve categorie krijgt brand-achtergrond */
.aow-blog-filter__btn.is-active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
/* Berichten grid — 3 kolommen */
.aow-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
/* Eerste bericht (featured) over volledige breedte */
.aow-blog-featured--wide {
grid-column: 1 / -1;
}
/* Datum onder excerpt */
.aow-blog-featured__meta,
.aow-blog-card__meta {
font-size: 12px;
color: var(--text-muted);
margin-top: auto;
padding-top: 4px;
}
/* Paginering */
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
margin: 0 3px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 14px;
color: var(--text);
text-decoration: none;
transition: all .15s ease;
}
/* Hover en huidige pagina in brand-kleur */
.page-numbers:hover,
.page-numbers.current {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
/* Responsive */
@media (max-width: 768px) {
.aow-blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.aow-blog-grid { grid-template-columns: 1fr; }
.aow-blog-featured--wide { grid-template-columns: 1fr; }
.aow-blog-featured--wide .aow-blog-featured__img-wrap img { height: 200px; }
}
/* Partner callout / commerciële tip */
.aoo-partner-callout {
margin: 2rem 0;
padding: 1.4rem;
border: 1px solid #dbeafe;
border-radius: 18px;
background: #f8fbff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.aoo-partner-callout__content > *:first-child {
margin-top: 0;
}
.aoo-partner-callout__content > *:last-child {
margin-bottom: 0;
}
.aoo-partner-callout__label {
display: inline-block;
margin: 0 0 0.45rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: #e0efff;
color: #003b95;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.aoo-partner-callout h2 {
margin: 0 0 0.65rem;
font-size: 1.35rem;
line-height: 1.25;
}
.aoo-partner-callout p {
margin: 0 0 1rem;
line-height: 1.65;
}
.aoo-partner-callout__button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.25rem;
padding: 0.75rem 1.05rem;
border-radius: 999px;
background: #003b95;
color: #ffffff !important;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 6px 14px rgba(0, 59, 149, 0.22);
}
.aoo-partner-callout__button:hover,
.aoo-partner-callout__button:focus {
background: #00224f;
color: #ffffff !important;
text-decoration: none !important;
}
/*
* AllesOverWenen — nieuwe CSS classes voor de bezienswaardigheden pillar pagina
* Plak dit in je child theme style.css of via Customizer > Extra CSS
* ─────────────────────────────────────────────────────────────────────────────
*/
/* ── Attractienummer badge (rode pill voor de H2) ── */
.beziens-nr {
display: inline-block;
background: var(--brand, #b21010);
color: #fff;
font-size: .85rem;
font-weight: 700;
border-radius: 999px;
padding: 2px 10px;
margin-right: 8px;
vertical-align: middle;
position: relative;
top: -2px;
}
/* ── Gratis / betaald badges (in de overzichtstabel) ── */
.badge-gratis {
display: inline-block;
background: #f2fbf6;
color: #1a6b33;
border: 1px solid #cfead9;
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
padding: 2px 8px;
}
.badge-betaald {
display: inline-block;
background: var(--brand-soft);
color: var(--brand-text);
border: 1px solid var(--brand-soft-border);
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
padding: 2px 8px;
}
/* ── FAQ blok ── */
.aoo-faq {
margin: 2.5rem 0;
}
.aoo-faq__item {
background: #fff;
border: 1px solid var(--border, #e5e7eb);
border-radius: 14px;
margin-bottom: 1rem;
padding: 1.1rem 1.25rem;
box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.aoo-faq__q {
font-size: 17px;
font-weight: 700;
color: var(--text, #222);
margin: 0 0 .6rem;
}
.aoo-faq__a {
margin: 0;
color: var(--text, #222);
font-size: var(--fs-body);
line-height: 1.75;
}
/* ── Sectie-scheidingslijn ── */
.sect-divider {
border: none;
border-top: 1px solid var(--border, #e5e7eb);
margin: 2.5rem 0 1.5rem;
}
/* ==================================================
28) Hotel review info card [hotel_info]
Plak dit na sectie 27 in je child theme style.css
================================================== */
.aow-hotel-info {
margin: 1.5rem 0 2rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-md);
overflow: hidden;
font-size: var(--fs-card);
}
/* ── Header: naam + sterren ── */
.aow-hotel-info__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 14px 18px;
background: var(--surface-muted);
border-bottom: 1px solid var(--border);
}
.aow-hotel-info__name {
font-size: 17px;
font-weight: 600;
color: var(--text);
margin: 0;
line-height: 1.3;
}
.aow-hotel-info__stars {
color: #f5a623;
font-size: 15px;
letter-spacing: 1px;
flex-shrink: 0;
white-space: nowrap;
}
/* ── Tweekolomsgrid: score + prijs ── */
.aow-hotel-info__body {
display: grid;
grid-template-columns: 1fr 1fr;
}
.aow-hotel-info__stat {
display: flex;
flex-direction: column;
gap: 5px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.aow-hotel-info__stat:nth-child(odd) {
border-right: 1px solid var(--border);
}
.aow-hotel-info__stat-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted);
}
.aow-hotel-info__stat-value {
font-size: 16px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
/* Score-badge (gekleurd blokje met cijfer) */
.aow-hotel-info__score {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border-radius: var(--radius-sm);
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1;
}
.aow-hotel-info__score--high { background: #2e7d32; } /* >= 8.5 */
.aow-hotel-info__score--mid { background: #b8670a; } /* 7 – 8.4 */
.aow-hotel-info__score--low { background: var(--brand); } /* < 7 */
/* ── Informatierijen (adres, wijk, metro) ── */
.aow-hotel-info__row {
display: grid;
grid-template-columns: 110px 1fr;
align-items: baseline;
gap: .25rem .75rem;
padding: 9px 18px;
border-bottom: 1px solid var(--border);
font-size: var(--fs-small);
color: var(--text);
line-height: 1.5;
}
.aow-hotel-info__row-label {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
/* ── Footer: noot + boekingsknop ── */
.aow-hotel-info__footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 14px 18px;
}
.aow-hotel-info__note {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
/* ── Responsive ── */
@media (max-width: 480px) {
.aow-hotel-info__body { grid-template-columns: 1fr; }
.aow-hotel-info__stat:nth-child(odd) { border-right: none; }
.aow-hotel-info__row { grid-template-columns: 95px 1fr; }
.aow-hotel-info__footer { flex-direction: column; align-items: stretch; }
.aow-hotel-info__footer .aoo-cta-booking { text-align: center; }
}
/* ===================================================
Alles over Wenen – kerstmarkten pillar
Alleen aanvullende styles; bestaande cards,
local-tip, infoblock en aoo-cta worden hergebruikt
=================================================== */
.christmas-market-facts {
padding: 1rem 1.25rem;
margin: 1.25rem 0 2rem;
background: #f7f7f7;
border-left: 4px solid var(--gb-knop-1);
border-radius: 6px;
}
.christmas-market-facts p {
margin: 0;
line-height: 1.75;
}
/* Overzichtstabel */
.christmas-market-table {
overflow-x: auto;
margin: 1.5rem 0 2rem;
}
.christmas-market-table table {
width: 100%;
border-collapse: collapse;
}
.christmas-market-table th,
.christmas-market-table td {
padding: .8rem 1rem;
text-align: left;
border-bottom: 1px solid #ddd;
}
.christmas-market-table th {
font-weight: 700;
}
.christmas-market-table tbody tr:last-child td {
border-bottom: 0;
}
/* Nieuw-label */
.christmas-market-new {
display: inline-block;
margin: 0 0 .8rem;
padding: .35rem .65rem;
border-radius: 4px;
background: var(--gb-knop-1);
color: #fff;
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
}
/* Wandelroute */
.christmas-route {
max-width: 650px;
margin: 1.5rem 0 2rem;
}
.christmas-route-step {
padding: .9rem 1.1rem;
border: 1px solid #ddd;
border-radius: 6px;
}
.christmas-route-step strong,
.christmas-route-step span {
display: block;
}
.christmas-route-step span {
margin-top: .15rem;
font-size: .9rem;
opacity: .75;
}
.christmas-route-arrow {
padding: .25rem 0;
text-align: center;
font-size: 1.25rem;
}
/* Kleine optimalisatie voor keuze-cards */
.christmas-market-picker .card h3 {
margin-bottom: .5rem;
}
.christmas-market-picker .card p:last-child {
margin-bottom: 0;
}
@media (max-width: 600px) {
.christmas-market-table th,
.christmas-market-table td {
padding: .65rem .7rem;
}
}
/* ===================================================
AOW – Seasonal CTA / Christmas
=================================================== */
.aow-season-cta {
display: grid;
grid-template-columns: minmax(220px, 0.8fr) 1.4fr;
align-items: center;
gap: 2.75rem;
margin: 2rem 0 3rem;
padding: 2.25rem 2.75rem;
background:
radial-gradient(circle at 5% 10%, rgba(255,255,255,.7), transparent 30%),
linear-gradient(135deg, #f8f3e8 0%, #f4ead8 100%);
border: 1px solid #e7dbc2;
border-radius: 10px;
}
/* Polaroid */
.aow-season-cta__photo {
display: flex;
justify-content: center;
padding: .5rem;
}
.aow-season-cta__polaroid {
width: 100%;
max-width: 330px;
padding: 10px 10px 34px;
background: #fff;
border: 1px solid #e3ded4;
border-radius: 3px;
box-shadow:
0 8px 22px rgba(49, 35, 20, .13),
2px 3px 5px rgba(49, 35, 20, .08);
transform: rotate(-2.2deg);
transition: transform .25s ease;
}
.aow-season-cta:hover .aow-season-cta__polaroid {
transform: rotate(-1deg) translateY(-3px);
}
.aow-season-cta__polaroid img {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
}
.aow-season-cta__polaroid span {
display: block;
margin-top: 10px;
text-align: center;
font-size: 13px;
font-style: italic;
color: #854F0B;
}
/* Content */
.aow-season-cta__eyebrow {
margin-bottom: .4rem;
color: #9b2c2c;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.aow-season-cta h2 {
margin: 0 0 .75rem;
font-size: clamp(1.65rem, 3vw, 2.25rem);
line-height: 1.15;
color: #222;
}
.aow-season-cta p {
max-width: 650px;
margin: 0 0 1.25rem;
font-size: var(--fs-body);
line-height: 1.7;
color: #4a443c;
}
/* CTA button */
.aow-season-cta__button {
display: inline-flex;
align-items: center;
padding: .72rem 1.15rem;
background: #9b2c2c;
color: #fff !important;
border-radius: 5px;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition:
background .2s ease,
transform .2s ease;
}
.aow-season-cta__button:hover {
background: #7e2222;
transform: translateY(-1px);
}
/* Mobile */
@media (max-width: 700px) {
.aow-season-cta {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1.5rem;
margin: 1.5rem 0 2.5rem;
}
.aow-season-cta__photo {
padding: 0 1rem;
}
.aow-season-cta__polaroid {
max-width: 360px;
transform: rotate(-1.5deg);
}
.aow-season-cta__polaroid img {
height: 200px;
}
.aow-season-cta h2 {
font-size: 1.65rem;
}
}
/* Kerstmarkten — seizoenshighlight in Meest gelezen */
.aow-most-read__seasonal a {
color: var(--brand-text);
font-weight: 700;
}
/* Normale rode pijl vervangen door gouden ster */
.aow-most-read__seasonal a::before {
content: "✦";
color: #b68a3a;
font-size: 13px;
transform: none;
}
/* Ster blijft stilstaan bij hover */
.aow-most-read__seasonal a:hover::before {
transform: none;
}
/* Pijl achter de tekst */
.aow-most-read__seasonal .aow-most-read__arrow {
display: inline-block;
margin-left: 5px;
color: var(--brand, #b21010);
transition: transform .2s ease;
}
/* Alleen deze pijl beweegt */
.aow-most-read__seasonal a:hover .aow-most-read__arrow {
transform: translateX(4px);
}
/* ==================================================
AOW Polaroid
================================================== */
.aow-polaroid {
background: #fff;
padding: 9px 9px 34px;
border: 1px solid #e7dbc2;
border-radius: 3px;
box-shadow:
0 7px 18px rgba(0,0,0,.10),
2px 3px 5px rgba(0,0,0,.06);
transition: transform .25s ease, box-shadow .25s ease;
}
.aow-polaroid--right {
transform: rotate(1.5deg);
}
.aow-polaroid img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 1px;
}
.aow-polaroid__caption {
display: block;
margin-top: 9px;
text-align: center;
color: #854F0B;
font-size: 13px;
font-style: italic;
line-height: 1.2;
}
.aow-polaroid:hover {
transform: rotate(.5deg) translateY(-3px);
box-shadow:
0 10px 24px rgba(0,0,0,.13),
2px 3px 6px rgba(0,0,0,.07);
}
#aow-toc-widget {
background: #f9f9f9;
border-left: 3px solid var(--accent);
padding: 12px 16px;
margin-bottom: 24px;
font-size: 0.88em;
}
.aow-toc-title {
margin: 0 0 8px;
font-weight: 700;
font-size: 0.72em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #888;
}
.aow-toc-list {
margin: 0;
padding: 0;
list-style: none;
}
.aow-toc-list li {
padding: 5px 0;
border-bottom: 1px solid #eee;
line-height: 1.3;
}
.aow-toc-list li:last-child { border-bottom: none; }
.aow-toc-list a {
color: #444;
text-decoration: none;
}
.aow-toc-list a:hover { color: var(--accent); }
/* Blogblok: volledige breedte gebruiken */
.aow-blog-sectie[data-aow-blogblok] {
display: block;
}
[data-aow-blogblok] .aow-blog-grid {
display: grid;
grid-column: 1 / -1;
width: 100%;
min-width: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
[data-aow-blogblok] .aow-card {
min-width: 0;
}
@media (max-width: 768px) {
[data-aow-blogblok] .aow-blog-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) {
[data-aow-blogblok] .aow-blog-grid {
align-items: stretch;
}
[data-aow-blogblok] .aow-card {
display: flex;
flex-direction: column;
}
[data-aow-blogblok] .aow-card > a {
flex-shrink: 0;
}
[data-aow-blogblok] .aow-card > div {
display: flex;
flex-direction: column;
flex: 1;
}
[data-aow-blogblok] .aow-feature-card__btn {
margin-top: auto;
align-self: flex-start;
}
}
/* AOW hoofdmenu — warme kleuren zoals de kerstmenubalk.
Plaats onderaan Extra CSS of de child-theme stylesheet. */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav > ul,
.main-navigation .menu-bar-items,
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items {
background-color: #fbf8f2 !important;
color: #443c32 !important;
}
.main-navigation {
border-top: 1px solid #e7dbc2;
border-bottom: 1px solid #e7dbc2;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items a,
.main-navigation .menu-bar-item > a {
color: #443c32 !important;
font-weight: 600;
}
.main-navigation .main-nav ul li a {
background-color: transparent !important;
text-decoration: none;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .menu-bar-item > a:hover {
background-color: #f3eade !important;
color: var(--brand-hover) !important;
}
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
background-color: var(--brand) !important;
color: #ffffff !important;
}
.main-navigation .main-nav > ul > li.current-menu-ancestor:not(.current-menu-item) > a {
background-color: #f3eade !important;
color: var(--brand-hover) !important;
}
/* Alle dropdownlagen: beige in plaats van blauw. */
.main-navigation .main-nav ul ul {
background-color: #fbf8f2 !important;
border: 1px solid #e7dbc2;
border-radius: 0 0 6px 6px;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.main-navigation .main-nav ul ul li a {
color: #443c32 !important;
background-color: transparent !important;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.sfHover > a,
.main-navigation .main-nav ul ul li > a:focus {
background-color: #f3eade !important;
color: var(--brand-hover) !important;
}
.main-navigation .main-nav ul ul li.current-menu-item > a,
.main-navigation .main-nav ul ul li.current_page_item > a {
background-color: var(--brand) !important;
color: #ffffff !important;
}
.main-navigation .main-nav a:focus-visible,
.main-navigation .menu-toggle:focus-visible,
.main-navigation .menu-bar-item > a:focus-visible {
outline: 2px solid var(--brand);
outline-offset: -3px;
}
/* Volgt de mobiele toestand van GeneratePress, ongeacht de ingestelde breakpoint. */
.main-navigation.toggled .main-nav > ul,
.main-navigation.toggled .main-nav ul ul {
background-color: #fbf8f2 !important;
}
.main-navigation.toggled .main-nav ul ul {
border-radius: 0;
box-shadow: none;
}
/* Rode hoofdbalk behouden; beige uitsluitend voor dropdowns. */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav > ul,
.main-navigation .menu-bar-items,
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items {
background-color: var(--menubalk) !important;
color: #fff !important;
}
.main-navigation { border-top-color:var(--menubalk); border-bottom-color:var(--menubalk); }
.main-navigation .main-nav > ul > li > a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items a,
.main-navigation .menu-bar-item > a {
color:#fff !important;
}
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.sfHover > a,
.main-navigation .main-nav > ul > li > a:focus,
.main-navigation .main-nav > ul > li.current-menu-ancestor:not(.current-menu-item) > a,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .menu-bar-item > a:hover {
background-color:var(--brand) !important;
color:#fff !important;
}
.main-navigation.toggled .main-nav > ul { background-color:var(--menubalk) !important; }
.main-navigation .main-nav > ul > li > a:focus-visible,
.main-navigation .menu-toggle:focus-visible,
.main-navigation .menu-bar-item > a:focus-visible { outline-color:#fff; }
/* ==================================================
29) Layout-fixes v1.4.0
- hero op artikelen weg / compacter op pagina's
- sticky menubalk op één regel
- één knopkleur
- oude GenerateBlocks-containers op de homepage in huisstijl
================================================== */
/* 29a) Hero: op berichten weg (de uitgelichte afbeelding staat al in het artikel),
op gewone pagina's (niet home) compacter */
.single-post .page-hero { display: none; }
.page:not(.home) .page-hero {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 200px;
background-position: center;
}
.page:not(.home) .page-hero .inside-page-hero br { display: none; }
@media (max-width: 768px) {
.page:not(.home) .page-hero { min-height: 150px; }
}
/* 29b) Sticky menubalk: logo + menu op één regel (was ~154px, nu ~60px) */
@media (min-width: 1025px) {
#sticky-navigation .inside-navigation { flex-wrap: nowrap; align-items: center; }
#sticky-navigation .main-nav { flex: 1 1 auto; width: auto; min-width: 0; }
#sticky-navigation .navigation-branding img,
#sticky-navigation .sticky-navigation-logo img { height: 40px; width: auto; }
#sticky-navigation .main-nav > ul > li > a { line-height: 60px; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
#sticky-navigation .main-nav > ul > li > a { padding-left: 12px; padding-right: 12px; }
#sticky-navigation .main-nav > ul > li.menu-item-has-children > a { padding-right: 6px; }
}
/* Koppen landen onder de sticky balk bij springen via een link */
html { scroll-behavior: smooth; }
.entry-content h2[id], .entry-content h3[id] { scroll-margin-top: 90px; }
.admin-bar .entry-content h2[id], .admin-bar .entry-content h3[id] { scroll-margin-top: 122px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 29c) Eén knopkleur: alle kaartknoppen in merkrood.
Het kleurverschil blijft in de categorie-labels zitten. */
.aow-feature-card__btn--paars,
.aow-feature-card__btn--groen,
.aow-feature-card__btn--blauw,
.aow-feature-card__btn--amber,
.aow-feature-card__btn--teal,
.aow-season-cta__button { background: var(--brand); }
.aow-feature-card__btn--paars:hover,
.aow-feature-card__btn--groen:hover,
.aow-feature-card__btn--blauw:hover,
.aow-feature-card__btn--amber:hover,
.aow-feature-card__btn--teal:hover,
.aow-season-cta__button:hover { background: var(--brand-hover); }
.aow-feature-card__btn { font-size: 15px; }
/* 29d) Oude GenerateBlocks-tekstblokken onderaan de homepage
(groene/blauwe/rode rand) in dezelfde warme kaartstijl als bovenaan */
.home .entry-content > .gb-container {
border: 1px solid #e7dbc2 !important;
border-left: 4px solid var(--brand) !important;
border-radius: 14px !important;
background: #fbf8f2 !important;
padding: 1.75rem 2rem !important;
margin-bottom: 1.5rem !important;
box-shadow: none !important;
}
.home .entry-content > .gb-container h2 { margin-top: 0; }
.home .entry-content > .gb-container img { border-radius: 10px; }
@media (max-width: 640px) {
.home .entry-content > .gb-container { padding: 1.25rem 1.1rem !important; }
}
/* ==================================================
30) Site-footer (v1.4.1) — Element "Site Footer", blok: aow-footer.html
================================================== */
.aow-footer {
--f-bg: #fbf8f2;
--f-border: #e7dbc2;
--f-text: #443c32;
--f-muted: #8a7f6c;
background: var(--f-bg);
border-top: 4px solid var(--brand);
color: var(--f-text);
font-size: var(--fs-card, 16px);
line-height: 1.6;
}
.aow-footer a { color: var(--f-text); text-decoration: none; }
.aow-footer a:hover,
.aow-footer a:focus-visible { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.aow-footer__inner {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 20px 2.5rem;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.5rem;
}
.aow-footer__brand-name {
margin: 0 0 .6rem;
font-size: 22px; font-weight: 700; line-height: 1.2;
color: var(--text, #222);
}
.aow-footer__brand-name span { color: var(--brand); }
.aow-footer__about { margin: 0 0 1rem; max-width: 34ch; }
.aow-footer__sister { margin: 0; font-size: 15px; color: var(--f-muted); }
.aow-footer__sister a { color: var(--f-muted); text-decoration: underline; text-underline-offset: 3px; }
.aow-footer__title {
margin: 0 0 .8rem;
font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--brand);
}
.aow-footer ul { list-style: none; margin: 0; padding: 0; }
.aow-footer li { margin: 0 0 .45rem; }
.aow-footer li a::before {
content: "→"; display: inline-block; margin-right: .5rem;
color: var(--brand); transition: transform .15s ease;
}
.aow-footer li a:hover::before { transform: translateX(2px); }
.aow-footer__bar { background: var(--brand); color: #fff; font-size: 14px; }
.aow-footer__bar-inner {
max-width: 1200px; margin: 0 auto; padding: .9rem 20px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
}
.aow-footer__bar a { color: #fff; opacity: .9; }
.aow-footer__bar a:hover, .aow-footer__bar a:focus-visible { color: #fff; opacity: 1; }
.aow-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.aow-footer__legal li { margin: 0; }
.aow-footer__legal li a::before { content: none; }
.aow-footer__copy { margin: 0; opacity: .9; }
@media (max-width: 900px) {
.aow-footer__inner { grid-template-columns: 1fr 1fr; }
.aow-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.aow-footer__inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.25rem 20px 2rem; }
.aow-footer li { margin-bottom: .2rem; }
.aow-footer li a { display: inline-block; padding: .3rem 0; } /* ruimer tikvlak */
.aow-footer__bar-inner { flex-direction: column; align-items: flex-start; }
}
/* Element zit binnen GP's footer-wrapper: geen extra ruimte daaromheen */
.site-footer .aow-footer { margin: 0; }
/* ==================================================
31) Uitgelichte afbeelding & paginatitel (v1.4.2)
Vangnet: hoe de afbeelding ook staat ingesteld, nooit meer
een foto van 650px hoog boven de titel.
================================================== */
/* Boven het contentgebied (pagina's én berichten) */
.featured-image.page-header-image,
.featured-image.page-header-image-single {
margin-top: 20px;
margin-bottom: 0;
line-height: 0;
}
.featured-image.page-header-image img,
.featured-image.page-header-image-single img {
display: block;
width: 100%;
height: clamp(180px, 26vw, 340px);
object-fit: cover;
object-position: center 40%;
}
/* Binnen het artikel (boven of onder de titel) */
.inside-article .featured-image,
.inside-article .post-image {
margin: 0 0 1.75rem;
line-height: 0;
}
.inside-article .featured-image img,
.inside-article .post-image img {
width: 100%;
max-height: 440px;
object-fit: cover;
border-radius: 12px;
}
/* Paginatitel: zwart, niet grijs */
h1.entry-title,
.entry-header h1 { color: var(--text); }
@media (max-width: 768px) {
.featured-image.page-header-image,
.featured-image.page-header-image-single { margin-top: 0; }
.inside-article .featured-image img,
.inside-article .post-image img { max-height: 260px; border-radius: 10px; }
}
/* ==================================================
32) Uitgelichte afbeelding onder de titel (v1.4.3) — zie aow-featured.php
================================================== */
.aow-featured {
margin: 0 0 2rem;
}
.aow-featured__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}
.aow-featured__caption {
margin-top: .5rem;
font-size: 14px;
font-style: italic;
color: var(--text-muted);
}
.entry-header + .aow-featured,
.entry-header ~ .aow-featured { margin-top: 1.25rem; }
@media (max-width: 768px) {
.aow-featured { margin: 0 -20px 1.5rem; } /* rand-tot-rand op mobiel */
.aow-featured__img { border-radius: 0; aspect-ratio: 3 / 2; }
.aow-featured__caption { padding: 0 20px; }
}
/* ==================================================
33) Homepage v1.4.4 — H1 in welkomblok, stappenplan, gids-blok
================================================== */
.home .aow-welkom__titel {
margin: 0 0 .75rem;
font-size: clamp(28px, 2vw + 18px, 38px);
font-weight: 700;
line-height: 1.15;
color: var(--text);
}
.aow-welkom__tekst p { margin-bottom: .9rem; }
.aow-welkom__sig {
margin: 1.1rem 0 0 !important;
padding-top: .9rem;
border-top: 1px solid #e7dbc2;
font-style: italic;
color: #854F0B;
}
.aow-welkom__sig strong { font-style: normal; color: var(--text); }
/* Stappenplan in de intro-kolom */
.entry-content ol.aow-stappen {
list-style: none; counter-reset: stap; margin: 0; padding: 0;
}
.entry-content ol.aow-stappen li {
counter-increment: stap;
position: relative;
padding: 0 0 1rem 3rem;
margin: 0 0 1rem;
border-bottom: 1px dashed #e7dbc2;
line-height: 1.6;
}
.entry-content ol.aow-stappen li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.entry-content ol.aow-stappen li::before {
content: counter(stap);
position: absolute; left: 0; top: 0;
width: 2.1rem; height: 2.1rem; border-radius: 50%;
display: grid; place-items: center;
background: var(--brand); color: #fff;
font-weight: 700; font-size: 16px; line-height: 1;
}
.aow-stappen li > a:first-child { display: block; margin-bottom: .15rem; color: var(--text); text-decoration: none; }
.aow-stappen li > a:first-child:hover { color: var(--brand); }
.aow-stappen li > a:first-child strong::after { content: " →"; color: var(--brand); }
.aow-stappen li span { display: block; color: #4b4339; font-size: var(--fs-card); }
/* Sectiekop "Ontdek Wenen" boven de kaarten: zelfde stijl als blogsectie */
.home .aow-blog-sectie__header { margin-top: 2.5rem; margin-bottom: 1.25rem; }
/* Gids-blok onderaan de homepage (vervangt de oude groene blokken) */
.entry-content .aow-home-gids {
margin: 2.5rem 0 0;
padding: 2rem 2.25rem;
background: #fbf8f2;
border: 1px solid #e7dbc2;
border-left: 4px solid var(--brand);
border-radius: 14px;
}
.entry-content .aow-home-gids > h2:first-child { margin-top: 0; }
.entry-content .aow-home-gids h2 { margin-top: 2.25rem; }
.aow-home-gids__foto { margin: 0 0 1.25rem; }
.aow-home-gids__foto img { width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 10px; }
.aow-home-gids .wp-block-rank-math-faq-block { margin-top: .5rem; }
.aow-home-gids .rank-math-faq-item {
background: #fff; border: 1px solid #e7dbc2; border-radius: 10px;
padding: 1rem 1.25rem; margin-bottom: .75rem;
}
.aow-home-gids .rank-math-question { margin: 0 0 .35rem !important; font-size: var(--fs-h4) !important; }
.aow-home-gids .rank-math-question strong { font-weight: inherit; }
@media (max-width: 640px) {
.aow-welkom__foto { max-width: 300px; margin: 0 auto; }
.aow-welkom__foto img { height: 200px; }
.entry-content .aow-home-gids { padding: 1.25rem 1.1rem; }
}
/* ==================================================
34) Header-foto (page hero) met afgeronde hoeken (v1.4.5)
================================================== */
.page-hero {
border-radius: 14px;
overflow: hidden;
margin-top: 20px;
}
/* Kerstbalk eronder: niet meer vastgeplakt aan de foto */
.page-hero + nav { margin-top: 12px; border-radius: 12px; }
@media (max-width: 768px) {
.page-hero { border-radius: 10px; margin: 12px 12px 0; }
.page-hero + nav { margin: 10px 12px 0; }
}
/* ==================================================
Museum in het kort
================================================== */
.aow-museum-quick {
margin: 1.5rem 0 2rem;
overflow: hidden;
border: 1px solid var(--callout-beige-border);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-md);
}
.aow-museum-quick__header {
padding: 1rem 1.25rem;
background: var(--callout-beige-bg);
border-bottom: 1px solid var(--callout-beige-border);
}
.aow-museum-quick__title {
display: block;
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--text);
}
.aow-museum-quick__subtitle {
display: block;
margin-top: 0.15rem;
font-size: var(--fs-small);
color: var(--text-muted);
}
.aow-museum-quick__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.aow-museum-quick__item {
padding: 0.9rem 1.25rem;
border-bottom: 1px solid var(--border);
}
.aow-museum-quick__item:nth-child(odd) {
border-right: 1px solid var(--border);
}
.aow-museum-quick__label {
display: block;
margin-bottom: 0.15rem;
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-muted);
}
.aow-museum-quick__value {
display: block;
font-size: var(--fs-card);
font-weight: 700;
color: var(--text);
}
.aow-museum-quick__expect {
padding: 1.1rem 1.25rem 1.2rem;
background: var(--surface-soft);
}
.aow-museum-quick__expect strong {
display: block;
margin-bottom: 0.3rem;
color: var(--text);
}
.aow-museum-quick__expect p {
margin: 0;
line-height: 1.65;
}
@media (max-width: 600px) {
.aow-museum-quick__grid {
grid-template-columns: 1fr;
}
.aow-museum-quick__item {
border-right: 0 !important;
}
}