/* Theme Name: Vakantie.be Theme URI: https://www.vakantie.be Author: Vakantie.be Description: Thema voor vakantie.be: bestemmingen (land, regio, stad, skigebied), partners per bestemming met kliktracking, advertentieplekken, accommodatiegids, warmtetool, maandgidsen en wintersport. Alles commercieel beheer je in de backoffice onder "Commercieel". Version: 1.17.22 Requires at least: 6.2 Requires PHP: 7.4 Text Domain: vakantiebe License: GPL-2.0-or-later */ :root { --vkb-ink: #1B2A2F; --vkb-ink-2: #34454A; --vkb-muted: #56666A; --vkb-sand: #F6F1E9; --vkb-sand-2: #F3ECE1; --vkb-paper: #FFFDF9; --vkb-line: #E6DDCF; --vkb-line-2: #E2D8C8; --vkb-accent: #C2502E; --vkb-accent-dark: #A8401F; --vkb-teal: #1F5E5B; --vkb-teal-soft: #E8F0EE; --vkb-sky: #EEF4F8; --vkb-sky-line: #DCE6EE; --vkb-sky-ink: #3B6E8F; --vkb-radius: 16px; --vkb-serif: 'Fraunces', Georgia, serif; --vkb-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --vkb-wrap: 1280px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--vkb-sans); color: var(--vkb-ink); background: var(--vkb-sand); font-size: 16px; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { color: var(--vkb-accent-dark); text-decoration: none; } a:hover { color: #7E2E14; } h1, h2, h3, h4 { font-family: var(--vkb-serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; } p { margin: 0 0 1em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 1000; background: #fff; padding: 10px 14px; clip: auto; width: auto; height: auto; } :focus-visible { outline: 3px solid var(--vkb-accent); outline-offset: 2px; } .wrap { width: 100%; max-width: calc(var(--vkb-wrap) + 2 * 40px); margin: 0 auto; padding-left: 40px; padding-right: 40px; } .section { padding-top: 80px; } .section-sm { padding-top: 48px; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .section-head h2 { margin: 0; } .eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--vkb-teal); font-weight: 700; margin: 0 0 10px; font-family: var(--vkb-sans); } .h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -.02em; margin: 0; } .h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0; } .h3 { font-size: 22px; margin: 0; } .lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--vkb-ink-2); margin: 0; } .muted { color: var(--vkb-muted); } .small { font-size: 13px; line-height: 1.5; } /* Buttons & chips */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--vkb-accent); color: #fff; font-weight: 600; font-size: 15px; min-height: 44px; border: 0; cursor: pointer; font-family: inherit; line-height: 1.2; } .btn:hover { background: var(--vkb-accent-dark); color: #fff; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--vkb-ink); color: var(--vkb-ink); font-weight: 600; font-size: 15px; min-height: 44px; background: transparent; cursor: pointer; font-family: inherit; line-height: 1.2; } .btn-outline:hover { background: var(--vkb-ink); color: #fff; } .btn-light { border-color: #fff; color: #fff; } .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; } .btn-block { width: 100%; } .chips { display: flex; gap: 10px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid #D9CDBA; background: #FFFCF7; font-size: 14px; color: var(--vkb-ink); min-height: 40px; cursor: pointer; font-family: inherit; } .chip:hover { border-color: var(--vkb-ink); color: var(--vkb-ink); } .chip.is-active { background: var(--vkb-ink); color: #fff; border-color: var(--vkb-ink); } .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--vkb-teal-soft); color: var(--vkb-teal); line-height: 1.4; } .tag-ad { background: #F7E3D9; color: #8A3417; } .tag-award { background: #F3E6C4; color: #6B4E0E; border-radius: 999px; padding: 4px 9px; } .t-hot { background: #F7E3D9; color: #8A3417; } .t-warm { background: #FBEBD0; color: #7A4A0C; } .t-mild { background: var(--vkb-teal-soft); color: var(--vkb-teal); } .t-cool { background: #E6EAF0; color: #34495E; } /* Cards & media */ .card { background: var(--vkb-paper); border-radius: var(--vkb-radius); border: 1px solid var(--vkb-line); overflow: hidden; } .card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; } .media { position: relative; overflow: hidden; background: #B79F80; } .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media > .overlay, .media > .media-content { position: relative; z-index: 1; } .media .shade { position: absolute; inset: 0; background: rgba(15, 25, 28, .38); z-index: 1; } .media .media-content { z-index: 2; } .ratio-card { aspect-ratio: 16 / 10; } .ratio-wide { aspect-ratio: 16 / 9; } .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Header */ .topbar { background: var(--vkb-ink); color: #D9E2E0; font-size: 13px; } .topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 20px; } .topbar a { color: #D9E2E0; } .topbar .topbar-ad { color: #F3C9B7; } .topbar-links { display: flex; gap: 22px; } .site-header { background: var(--vkb-paper); border-bottom: 1px solid var(--vkb-line); position: sticky; top: 0; z-index: 50; } .site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 80px; } .site-logo { font-family: var(--vkb-serif); font-size: 30px; font-weight: 700; color: var(--vkb-ink); letter-spacing: -.02em; white-space: nowrap; } .site-logo span { color: var(--vkb-accent); } .site-logo img { max-height: 48px; width: auto; } .main-nav { flex-grow: 1; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; } .main-nav a { color: var(--vkb-ink); font-weight: 600; font-size: 15px; padding: 10px 4px; display: inline-block; white-space: nowrap; } .main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { color: var(--vkb-accent-dark); box-shadow: inset 0 -2px 0 var(--vkb-accent); } .main-nav .sub-menu { display: none; } .header-search { position: relative; } .icon-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--vkb-sand-2); color: var(--vkb-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .search-pop { position: absolute; right: 0; top: 54px; background: #fff; border: 1px solid var(--vkb-line); border-radius: 14px; padding: 10px; width: 320px; display: none; box-shadow: 0 12px 30px rgba(0,0,0,.08); } .search-pop.is-open { display: block; } .search-form { display: flex; gap: 8px; } .search-form input[type=search] { flex-grow: 1; height: 44px; border-radius: 999px; border: 1px solid var(--vkb-line); padding: 0 16px; font-size: 15px; font-family: inherit; } .menu-toggle { display: none; } /* Breadcrumbs */ .breadcrumbs { font-size: 13px; color: var(--vkb-muted); display: flex; gap: 8px; flex-wrap: wrap; padding-top: 24px; } .breadcrumbs a { color: var(--vkb-muted); } .breadcrumbs .current { color: var(--vkb-ink); font-weight: 600; } /* Hero */ .hero { border-radius: 28px; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; } .hero .media-content { padding: 56px 64px; display: flex; flex-direction: column; gap: 20px; } .hero h1, .hero .lead { color: #fff; } .hero .lead { color: #EEF3F1; max-width: 680px; } .hero .eyebrow { color: #D6ECE8; } .hero-search { display: flex; gap: 10px; max-width: 760px; } .hero-search label { flex-grow: 1; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 0 22px; min-height: 60px; color: var(--vkb-muted); } .hero-search input { border: 0; outline: none; font-size: 17px; width: 100%; color: var(--vkb-ink); font-family: inherit; background: transparent; } .hero-search .btn { min-height: 60px; padding: 0 30px; font-size: 16px; } .hero-sm { min-height: 440px; } .gallery-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; height: 540px; margin-top: 20px; } .gallery-hero .media { border-radius: 24px; } .gallery-hero .stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; } .single-hero { border-radius: 24px; height: 520px; margin-top: 20px; } /* Intro block on destination */ .dest-intro { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; padding-top: 40px; } .dest-intro.no-aside { grid-template-columns: minmax(0, 1fr); } .dest-intro-main { display: flex; flex-direction: column; gap: 20px; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding: 20px 24px; } .facts .fact-label { font-size: 13px; color: var(--vkb-muted); display: block; } .facts .fact-value { font-weight: 700; } .featured-partner { padding: 26px; display: flex; flex-direction: column; gap: 16px; } .featured-partner .row { display: flex; justify-content: space-between; align-items: center; } .notice { padding: 14px 18px; display: flex; gap: 14px; align-items: center; background: #FFF8EF; } /* Destination tiles */ .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 20px; } .bento .tile:first-child { grid-column: span 2; grid-row: span 2; } .tile { border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; min-height: 200px; } .tile .overlay { padding: 18px 20px; background: rgba(20, 30, 33, .5); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .tile .tile-title { font-family: var(--vkb-serif); font-size: 24px; font-weight: 600; line-height: 1.1; } .bento .tile:first-child .tile-title { font-size: 40px; } .tile .tile-sub { font-size: 13px; color: #E6ECEA; } .tile:hover { color: #fff; } .card-link { color: var(--vkb-ink); display: flex; flex-direction: column; } .card-link:hover { color: var(--vkb-ink); } .card-link:hover .card-title { color: var(--vkb-accent-dark); } .card-title { font-family: var(--vkb-serif); font-size: 21px; font-weight: 600; line-height: 1.2; } /* Partners */ .logo-tile { display: flex; align-items: center; gap: 10px; justify-content: center; background: #fff; border: 1px solid var(--vkb-line); border-radius: 12px; font-weight: 700; color: var(--vkb-ink); min-height: 72px; padding: 10px 14px; text-align: center; } .logo-tile img { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; } .logo-tile.soft { background: var(--vkb-sand); border: 0; } a.logo-link { display: block; text-decoration: none; color: inherit; } a.logo-link .logo-tile { transition: border-color .15s, box-shadow .15s; } a.logo-link:hover .logo-tile, a.logo-link:focus-visible .logo-tile { border-color: var(--vkb-ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .logo-mark { width: 28px; height: 28px; border-radius: 8px; display: inline-block; flex-shrink: 0; } .partner-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .partner-card.is-top { border-color: var(--vkb-accent); box-shadow: 0 0 0 1px var(--vkb-accent); } .partner-card .badges { display: flex; gap: 8px; flex-wrap: wrap; min-height: 24px; align-items: center; } .partner-card .tagline { font-weight: 700; } .partner-card .btn-outline { margin-top: auto; } .partner-card[hidden] { display: none; } .disclosure { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vkb-muted); margin: 18px 0 0; } .logo-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .logo-wall a { color: var(--vkb-ink); } .compare { width: 100%; border-collapse: collapse; } .compare th { text-align: left; font-size: 13px; background: #F0E8DB; color: var(--vkb-ink-2); padding: 14px 18px; } .compare td { padding: 16px 18px; border-bottom: 1px solid #EEE6D8; vertical-align: middle; } .compare tr.is-top td { background: #FFF8EF; } .compare .logo-tile { min-height: 56px; justify-content: flex-start; } /* Warm list & tool */ .warm-row { display: grid; grid-template-columns: 1fr 110px 110px 28px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--vkb-line-2); color: var(--vkb-ink); } .warm-row:hover { color: var(--vkb-accent-dark); } .warm-row .temp { color: var(--vkb-accent-dark); font-weight: 600; display: flex; gap: 6px; align-items: center; } .warm-row .fly { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--vkb-muted); } .warm-filter { padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; } .warm-filter .row { display: flex; gap: 20px; align-items: center; } .warm-filter .label { font-weight: 700; width: 120px; flex-shrink: 0; } .warm-card .temp-big { font-family: var(--vkb-serif); font-size: 34px; font-weight: 600; color: var(--vkb-accent-dark); line-height: 1; } .warm-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .warm-card .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--vkb-muted); } .warm-card .more { font-size: 13px; font-weight: 700; padding-top: 8px; border-top: 1px solid #EEE6D8; display: inline-flex; gap: 6px; align-items: center; } .warm-empty { padding: 32px; text-align: center; grid-column: 1 / -1; } .month-bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; } .month-bar div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .month-bar span.bar { width: 100%; height: 40px; border-radius: 8px; background: #DCD2C3; } .month-bar span.s2 { background: #9CC2B9; } .month-bar span.s3 { background: var(--vkb-teal); } /* Winter */ .snow-panel { background: var(--vkb-sky); border: 1px solid var(--vkb-sky-line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 20px; } .snow-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border-radius: 14px; border: 1px solid var(--vkb-sky-line); } .snow-stats div { padding: 18px 20px; border-right: 1px solid var(--vkb-sky-line); display: flex; flex-direction: column; gap: 6px; } .snow-stats div:last-child { border-right: 0; } .snow-stats .v { font-family: var(--vkb-serif); font-size: 26px; font-weight: 600; white-space: nowrap; } .snow-stats .l { font-size: 13px; color: #4A6072; } .snow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: stretch; } .snowalert { border-radius: 22px; background: var(--vkb-sky-ink); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; min-height: 380px; } .snowalert .media-content { padding: 28px; display: flex; flex-direction: column; gap: 12px; } .snowalert label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; } .snowalert input, .snowalert select { height: 44px; border-radius: 10px; border: 0; padding: 0 12px; font-size: 15px; font-family: inherit; } .webcam { border-radius: 16px; aspect-ratio: 4 / 3; } .webcam .live { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; gap: 6px; align-items: center; background: #C0392B; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; } .webcam .cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 13px; font-weight: 600; color: #fff; background: rgba(20, 30, 33, .6); padding: 4px 8px; border-radius: 6px; } /* Ads */ .ad-slot { border-radius: 12px; overflow: hidden; } .ad-slot .ad-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vkb-muted); display: block; margin-bottom: 6px; } .ad-banner img { width: 100%; height: auto; border-radius: 12px; position: static; } .ad-promo { padding: 20px 22px; display: flex; gap: 16px; align-items: center; } .ad-promo .txt { flex-grow: 1; font-weight: 600; } .sponsor-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .sponsor-item { padding: 16px 18px; display: flex; gap: 14px; align-items: center; color: var(--vkb-ink); } .sponsor-item img { width: 56px; height: 40px; object-fit: contain; position: static; } /* Accommodations */ .acc-card .card-body { flex-grow: 1; } .acc-card .btn-outline { margin-top: auto; } /* Content */ .entry { font-size: 17px; line-height: 1.7; color: var(--vkb-ink-2); } .entry > * { max-width: 760px; } .entry > .alignwide, .entry > .wp-block-columns, .entry > .vkb-wide { max-width: none; } .entry h2 { font-size: 32px; color: var(--vkb-ink); margin-top: 1.6em; scroll-margin-top: 110px; } .entry h3 { font-size: 24px; color: var(--vkb-ink); margin-top: 1.4em; } .entry img { border-radius: 16px; } .entry details { border-bottom: 1px solid var(--vkb-line-2); padding: 16px 0; } .entry summary { font-weight: 700; cursor: pointer; color: var(--vkb-ink); font-size: 18px; } .entry .wp-block-button__link { border-radius: 999px; background: var(--vkb-accent); } .entry-wide > * { max-width: none; } .vkb-card-block { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; } .vkb-card-block .wp-block-group__inner-container, .vkb-card-block > .wp-block-group { padding: 0; } .vkb-card-block figure { margin: 0; } .vkb-card-block img { border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .vkb-card-block h3, .vkb-card-block p { padding: 0 22px; } .vkb-card-block p:last-child { padding-bottom: 18px; } .article-layout { display: grid; grid-template-columns: 220px minmax(0, 720px) 1fr; gap: 56px; align-items: start; padding-top: 48px; } .toc { position: sticky; top: 110px; display: flex; flex-direction: column; } .toc a { color: var(--vkb-ink); padding: 8px 0; border-bottom: 1px solid var(--vkb-line-2); font-size: 15px; } .aside-stack { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 110px; } .book-box { background: var(--vkb-teal); color: #fff; border-radius: 20px; padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; margin-top: 32px; } .book-box .eyebrow { color: #BFE0DA; } .book-box a.more { color: #fff; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; } div.author { display: flex; gap: 14px; align-items: center; } div.author img { border-radius: 999px; } .months { display: flex; gap: 8px; flex-wrap: wrap; } /* Newsletter */ .newsletter { background: var(--vkb-teal); color: #fff; border-radius: 24px; padding: 56px 64px; display: flex; align-items: center; gap: 64px; } .newsletter h2 { color: #fff; } .newsletter .eyebrow { color: #BFE0DA; } .newsletter p { color: #D6ECE8; margin: 0; } .newsletter .nl-text { flex-grow: 1; } .newsletter form { display: flex; gap: 10px; width: 480px; flex-shrink: 0; } .newsletter input[type=email] { flex-grow: 1; height: 52px; border-radius: 999px; border: 0; padding: 0 22px; font-size: 16px; font-family: inherit; } .newsletter .nl-form { width: 480px; flex-shrink: 0; } /* Footer */ .site-footer { background: var(--vkb-ink); color: #D9E2E0; margin-top: 80px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 40px; } .site-footer h3 { font-family: var(--vkb-sans); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 12px; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer a { color: #D9E2E0; font-size: 14px; line-height: 2; } .site-footer a:hover { color: #fff; } .site-footer .site-logo { color: #fff; } .site-footer .site-logo span { color: #E58A67; } .footer-bottom { border-top: 1px solid #2F4247; padding-top: 20px; padding-bottom: 28px; display: flex; justify-content: space-between; gap: 40px; font-size: 13px; color: #B8C6C3; } /* Blog list & pagination */ .post-meta { font-size: 13px; color: var(--vkb-muted); } .pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; } .pagination .page-numbers { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vkb-line); color: var(--vkb-ink); } .pagination .current { background: var(--vkb-ink); color: #fff; } /* B2B */ .b2b-hero { background: var(--vkb-ink); color: #fff; padding: 72px 0; } .b2b-hero h1 { color: #fff; } .b2b-hero .lead { color: #D9E2E0; } .b2b-hero .card, .b2b-hero .card .h2 { color: var(--vkb-ink); } /* v1.10.12: counters were white on white */ .b2b-hero .card .muted { color: #5B6B68; } /* Responsive */ @media (max-width: 1100px) { .wrap { padding-left: 24px; padding-right: 24px; } .site-header .wrap { gap: 16px; } .menu-toggle { display: inline-flex; } .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--vkb-paper); border-bottom: 1px solid var(--vkb-line); display: none; padding: 12px 24px 20px; } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; gap: 0; } .site-header .wrap { justify-content: space-between; position: relative; } .dest-intro, .snow-grid { grid-template-columns: 1fr; gap: 32px; } .article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .toc { display: none; } .aside-stack { position: static; } .grid-5, .grid-6, .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4, .sponsor-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .newsletter { flex-direction: column; align-items: stretch; gap: 24px; padding: 40px 32px; } .newsletter form, .newsletter .nl-form { width: 100%; } .snow-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .snow-stats div { border-bottom: 1px solid var(--vkb-sky-line); } } @media (max-width: 760px) { .wrap { padding-left: 16px; padding-right: 16px; } .section { padding-top: 56px; } .topbar .topbar-text { display: none; } .hero { min-height: 480px; border-radius: 20px; } .hero .media-content { padding: 28px 22px; } .hero-search { flex-direction: column; } .gallery-hero { grid-template-columns: 1fr; height: auto; } .gallery-hero > .media { height: 280px; } .gallery-hero .stack { display: none; } .single-hero { height: 280px; } .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; } .bento .tile:first-child { grid-column: span 2; grid-row: span 1; } .bento .tile:first-child .tile-title { font-size: 30px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-5, .grid-6, .logo-wall, .sponsor-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; gap: 10px; } .warm-row { grid-template-columns: 1fr 80px 70px; } .warm-row > :last-child { display: none; } .warm-filter .row { flex-direction: column; align-items: flex-start; gap: 10px; } .compare thead { display: none; } .compare tr { display: block; border-bottom: 1px solid #EEE6D8; padding: 12px 0; } .compare td { display: block; border: 0; padding: 6px 16px; } .snow-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .month-bar span.bar { height: 28px; } } /* Editor pattern helpers */ .vkb-pad { padding: 22px 24px; } .vkb-card-block.vkb-pad h3, .vkb-card-block.vkb-pad p { padding: 0; } .vkb-dark { background: var(--vkb-ink) !important; color: #fff; } .vkb-dark h3, .vkb-dark p, .vkb-dark li { color: #fff; } .tag-line { margin: 16px 0 0; } .tag-line strong { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--vkb-teal-soft); color: var(--vkb-teal); padding: 4px 8px; border-radius: 6px; } .entry .wp-block-columns { gap: 22px; } .vkb-month-item { padding: 28px 0; border-bottom: 1px solid var(--vkb-line-2); } .vkb-month-item img { border-radius: 18px; aspect-ratio: 3 / 2; object-fit: cover; } .vkb-month-item h3 { margin-top: 0; } /* Simple forms */ .nl-form-simple label { display: block; } .nl-form-simple input[type=email] { width: 100%; height: 52px; border-radius: 999px; border: 0; padding: 0 22px; font-size: 16px; font-family: inherit; } .snowalert .nl-form-simple { flex-direction: column; } .snowalert .nl-form-simple input[type=email] { height: 44px; border-radius: 10px; } .snowalert .nl-form-simple select { width: 100%; margin-top: 6px; } .snowalert .nl-form-simple .btn { width: 100%; } .topbar-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; } .topbar-menu li:first-child a { color: #F3C9B7; } .site-footer .site-logo { font-size: 30px; line-height: 1.2; } .warm-row .temp, .warm-row .fly { white-space: nowrap; } @media (max-width: 760px) { .forecast { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .warm-row { grid-template-columns: 1fr 76px 62px; gap: 8px; } } /* v1.1 – editorial blocks */ .summary-box { padding: 20px 24px; background: #FFF8EF; border-color: #F0DCC4; font-size: 17px; line-height: 1.6; } .climate { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } .climate th, .climate td { padding: 10px 8px; text-align: center; border-bottom: 1px solid #EEE6D8; } .climate thead th { background: #F0E8DB; font-weight: 700; } .climate tbody th { text-align: left; white-space: nowrap; padding-left: 16px; } .sources-box { padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sources { margin: 0; padding-left: 18px; font-size: 14px; } .sources li { margin: 4px 0; } @media (max-width: 760px) { .sources-box { grid-template-columns: 1fr; } } /* ========================================================================= * v1.2 – destination layout & visual content components * ====================================================================== */ :root { --vkb-s3: #1F5E5B; --vkb-s2: #8FBDB5; --vkb-s1: #DCD3C4; --vkb-tip: #FBEFE8; --vkb-tip-ink: #5B3325; --vkb-header-h: 81px; } /* Facts */ .facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; } .facts-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facts-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts-grid .fact { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; box-shadow: inset -1px -1px 0 var(--vkb-line); } .facts-grid .vkb-li { flex: none; color: var(--vkb-teal); margin-top: 2px; } .facts-grid .fact-label { display: block; font-size: 12.5px; color: var(--vkb-muted); line-height: 1.3; } .facts-grid .fact-value { display: block; font-weight: 700; font-size: 15px; line-height: 1.35; } /* Sticky in-page nav */ .dest-subnav { position: sticky; top: var(--vkb-header-h); z-index: 40; background: rgba(246, 241, 233, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--vkb-line); margin-top: 40px; } .dest-subnav-inner { position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; } .dest-subnav-inner::-webkit-scrollbar { display: none; } .dest-subnav a { flex: none; color: var(--vkb-ink); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; } .dest-subnav a:hover { background: var(--vkb-sand-2); color: var(--vkb-ink); } .dest-subnav a.is-active { background: var(--vkb-ink); color: #fff; } /* Two columns: content + sidebar */ .dest-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; padding-top: 40px; } .dest-main { min-width: 0; } .dest-main .entry > * { max-width: 100%; } .dest-main .entry > p, .dest-main .entry > ul, .dest-main .entry > ol, .dest-main .entry > h2, .dest-main .entry > h3 { max-width: 760px; } .dest-main .entry > h2:first-child { margin-top: 0; } .dest-main .entry h2 { scroll-margin-top: calc(var(--vkb-header-h) + 72px); } .dest-climate { margin-top: 56px; scroll-margin-top: calc(var(--vkb-header-h) + 72px); } .dest-aside { position: sticky; top: calc(var(--vkb-header-h) + 76px); display: flex; flex-direction: column; gap: 16px; } .aside-box { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 20px; } .aside-title { font-family: var(--vkb-serif); font-size: 19px; font-weight: 600; line-height: 1.2; margin: 0 0 14px; color: var(--vkb-ink); } .aside-plist { display: flex; flex-direction: column; gap: 8px; } .aside-prow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--vkb-line); border-radius: 12px; padding: 8px 12px 8px 8px; color: var(--vkb-ink); } .aside-prow:hover { border-color: var(--vkb-ink); color: var(--vkb-ink); } .aside-prow.is-top { border-color: var(--vkb-accent); } .logo-mini { flex: none; width: 84px; height: 40px; border-radius: 8px; background: #fff; border: 1px solid var(--vkb-line); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; font-size: 11px; font-weight: 700; overflow: hidden; text-align: left; line-height: 1.1; } .logo-mini img { max-height: 30px; width: auto; max-width: 100%; object-fit: contain; position: static; border-radius: 0; } .logo-mini .logo-mark { width: 16px; height: 16px; border-radius: 4px; } .aside-pname { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--vkb-muted); } .aside-pname strong { display: block; font-size: 14px; color: var(--vkb-ink); } .aside-pname span { display: block; } .aside-pname .aside-top { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-accent-dark); } .aside-go { color: var(--vkb-accent-dark); flex: none; } .aside-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin-top: 12px; } .aside-disc { font-size: 11.5px; color: var(--vkb-muted); margin: 12px 0 0; line-height: 1.45; } .aside-wx { display: flex; align-items: center; gap: 14px; } .aside-t { font-family: var(--vkb-serif); font-size: 46px; font-weight: 600; line-height: 1; color: var(--vkb-accent-dark); } .aside-wx strong { display: block; } .aside-wx span span { display: block; font-size: 13px; color: var(--vkb-muted); } .aside-nl { background: var(--vkb-teal-soft); border-color: #C9DCD8; } .aside-nl .btn-outline { border-color: var(--vkb-teal); color: var(--vkb-teal); } .aside-nl .btn-outline:hover { background: var(--vkb-teal); color: #fff; } /* Shared card look for components */ .vkb-sight, .vkb-day, .vkb-hood, .vkb-trip, .vkb-icon-card, .vkb-callout { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; } .entry .vkb-sights, .entry .vkb-days, .entry .vkb-hoods, .entry .vkb-trips, .entry .vkb-icons, .entry .vkb-callouts { margin: 24px 0 8px; } .entry [class*="vkb-"] figure { margin: 0; } .entry [class*="vkb-"] img { border-radius: 0; } .entry .vkb-sight h3, .entry .vkb-day h3, .entry .vkb-hood h3, .entry .vkb-trip h3, .entry .vkb-icon-card h3 { margin: 0; } .entry .vkb-sight p, .entry .vkb-day p, .entry .vkb-hood p, .entry .vkb-trip p, .entry .vkb-icon-card p, .entry .vkb-callout p { margin: 0; } /* Chips, tip, badge, more-link */ .vkb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .vkb-chips span { font-size: 12.5px; font-weight: 600; line-height: 1.5; background: var(--vkb-sand); border: 1px solid var(--vkb-line); border-radius: 999px; padding: 2px 10px; color: var(--vkb-ink-2); } .vkb-chips span.is-free { background: var(--vkb-teal-soft); border-color: #C9DCD8; color: var(--vkb-teal); } .entry .vkb-tip { background: var(--vkb-tip); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; line-height: 1.5; color: var(--vkb-tip-ink); } .entry .vkb-tip strong:first-child { color: var(--vkb-accent-dark); margin-right: 4px; } .vkb-badge { display: inline-flex; align-self: flex-start; justify-self: start; width: fit-content; align-items: center; gap: 6px; font-size: 12.5px !important; font-weight: 700; color: var(--vkb-teal) !important; background: var(--vkb-teal-soft); border-radius: 999px; padding: 3px 10px; line-height: 1.5; } .vkb-more { font-size: 14px; font-weight: 700; margin-top: auto !important; } .vkb-more a { text-decoration: none; } /* Top 10 photo cards */ .vkb-sights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; counter-reset: vkbsight; } .vkb-sight { position: relative; display: flex; flex-direction: column; counter-increment: vkbsight; } .vkb-sight::before { content: counter(vkbsight); position: absolute; left: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--vkb-paper); color: var(--vkb-ink); font-family: var(--vkb-serif); font-size: 19px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); } .vkb-sights.no-numbers .vkb-sight::before { display: none; } .vkb-sight > figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--vkb-sand-2); } .vkb-sight > figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .vkb-sight > :not(figure) { margin-left: 20px !important; margin-right: 20px !important; } .vkb-sight > figure + * { margin-top: 18px !important; } .vkb-sight > * + :not(figure) { margin-top: 10px !important; } .vkb-sight > :last-child { margin-bottom: 20px !important; } .vkb-sight > p:not([class]) { font-size: 15.5px; line-height: 1.6; } .vkb-sight h3 { font-size: 22px; } .vkb-sight > .vkb-tip { margin-top: auto !important; } .vkb-sight > * + .vkb-tip { margin-top: 12px !important; } /* first card (and an orphan last card) span the full width, image beside the text */ .vkb-sights > .vkb-sight:first-child, .vkb-sights > .vkb-sight:last-child:nth-child(even) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; grid-auto-rows: min-content; align-content: start; } .vkb-sights > .vkb-sight:first-child > figure, .vkb-sights > .vkb-sight:last-child:nth-child(even) > figure { grid-column: 1; grid-row: 1 / span 20; aspect-ratio: auto; min-height: 320px; height: 100%; position: relative; } .vkb-sights > .vkb-sight:first-child > figure img, .vkb-sights > .vkb-sight:last-child:nth-child(even) > figure img { position: absolute; inset: 0; } .vkb-sights > .vkb-sight:first-child > :not(figure), .vkb-sights > .vkb-sight:last-child:nth-child(even) > :not(figure) { grid-column: 2; margin-left: 26px !important; margin-right: 26px !important; } .vkb-sights > .vkb-sight:first-child > figure + *, .vkb-sights > .vkb-sight:last-child:nth-child(even) > figure + * { margin-top: 26px !important; } .vkb-sights > .vkb-sight:first-child h3, .vkb-sights > .vkb-sight:last-child:nth-child(even) h3 { font-size: 28px; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child) { grid-template-columns: 1fr 1.2fr; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child) > figure { grid-column: 2; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child) > :not(figure) { grid-column: 1; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child)::before { left: auto; right: 14px; } /* Photo break */ .entry .vkb-photobreak { position: relative; border-radius: var(--vkb-radius); overflow: hidden; margin: 48px 0; max-width: none; } .entry .vkb-photobreak img { width: 100%; height: 340px; object-fit: cover; display: block; border-radius: 0; } .entry .vkb-photobreak figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 28px 22px; background: linear-gradient(transparent, rgba(20, 24, 26, .82)); color: #fff; font-family: var(--vkb-serif); font-size: clamp(19px, 2.2vw, 26px); line-height: 1.3; text-align: left; } /* Day planning */ .vkb-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: vkbday; } .vkb-day { padding: 20px; counter-increment: vkbday; display: flex; flex-direction: column; gap: 12px; } .vkb-day h3 { font-family: var(--vkb-sans); font-size: 16px !important; font-weight: 700; display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--vkb-line); } .vkb-day h3::before { content: counter(vkbday); font-family: var(--vkb-serif); font-size: 34px; line-height: 1; color: var(--vkb-accent); font-weight: 600; } .entry .vkb-day ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .entry .vkb-day li { display: grid; grid-template-columns: 78px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.5; } .entry .vkb-day li strong { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-muted); padding-top: 2px; } /* Partner CTA band */ .vkb-cta { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; background: var(--vkb-teal); color: #fff; border-radius: var(--vkb-radius); padding: 18px 22px; margin: 24px 0; } .vkb-cta-text { flex: 1 1 240px; line-height: 1.4; } .vkb-cta-text strong { display: block; font-size: 16px; } .vkb-cta-text span { font-size: 14px; color: #D6ECE8; } .vkb-cta-logos { display: flex; gap: 8px; flex-wrap: wrap; } .vkb-cta .vkb-cta-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: #fff; color: var(--vkb-teal); font-weight: 700; font-size: 15px; text-decoration: none; } .vkb-cta .vkb-cta-btn:hover { background: var(--vkb-sand); color: var(--vkb-teal); } /* Neighbourhoods */ .vkb-hoods { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .vkb-hood { display: flex; flex-direction: column; } .vkb-hood > figure { aspect-ratio: 1 / 1; overflow: hidden; background: var(--vkb-sand-2); } .vkb-hood > figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .vkb-hood > :not(figure) { margin-left: 14px !important; margin-right: 14px !important; } .vkb-hood > figure + * { margin-top: 14px !important; } .vkb-hood > * + :not(figure) { margin-top: 6px !important; } .vkb-hood > :last-child { margin-bottom: 14px !important; } .vkb-hood h3 { font-size: 19px; } .vkb-hood p { font-size: 14px; line-height: 1.5; } .entry .vkb-for { font-size: 12px; font-weight: 700; color: var(--vkb-teal); line-height: 1.35; } .vkb-hood .vkb-more { padding-top: 6px; font-size: 13.5px; } /* Climate block */ .vkb-climate { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 20px 22px 16px; margin: 24px 0; } .vkb-climate-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 15px; color: var(--vkb-ink); } .vkb-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--vkb-muted); } .vkb-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .vkb-legend i.s3 { background: var(--vkb-s3); } .vkb-legend i.s2 { background: var(--vkb-s2); } .vkb-legend i.s1 { background: var(--vkb-s1); } .vkb-legend i.dot { width: 10px; height: 10px; border: 2px solid var(--vkb-accent); border-radius: 50%; background: var(--vkb-paper); } .vkb-chart-wrap { overflow-x: auto; } .vkb-chart { width: 100%; min-width: 520px; height: auto; display: block; } .vkb-chart .grid { stroke: var(--vkb-line); stroke-width: 1; } .vkb-chart .axis { font-size: 11.5px; fill: var(--vkb-muted); font-family: var(--vkb-sans); } .vkb-chart .val { font-size: 11.5px; font-weight: 700; fill: var(--vkb-ink); font-family: var(--vkb-sans); } .vkb-chart rect.s3 { fill: var(--vkb-s3); } .vkb-chart rect.s2 { fill: var(--vkb-s2); } .vkb-chart rect.s1 { fill: var(--vkb-s1); } .vkb-chart .minline { fill: none; stroke: var(--vkb-accent); stroke-width: 2; } .vkb-chart .mindot { fill: var(--vkb-paper); stroke: var(--vkb-accent); stroke-width: 2; } .vkb-climate-table { margin-top: 12px; border-top: 1px solid var(--vkb-line); padding-top: 4px; } .entry .vkb-climate-table { border-bottom: 0; padding: 4px 0 0; } .vkb-climate-table summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 8px 0; color: var(--vkb-ink); } .vkb-tscroll { overflow-x: auto; } .vkb-climate-src { font-size: 12.5px; color: var(--vkb-muted); margin: 8px 0 0; } .vkb-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .vkb-callout { padding: 14px 16px; font-size: 15px; line-height: 1.55; } .vkb-callout h3 { font-family: var(--vkb-sans); font-size: 15px !important; font-weight: 700; margin: 0 0 2px !important; } /* Day trips */ .vkb-trips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .vkb-trip { display: grid; grid-template-columns: 160px 1fr; grid-auto-rows: min-content; } .vkb-trip > figure { grid-column: 1; grid-row: 1 / span 20; min-height: 180px; height: 100%; overflow: hidden; background: var(--vkb-sand-2); } .vkb-trip > figure { position: relative; } .vkb-trip > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .vkb-trip > :not(figure) { grid-column: 2; margin-left: 18px !important; margin-right: 18px !important; } .vkb-trip > figure + * { margin-top: 16px !important; } .vkb-trip > * + :not(figure) { margin-top: 8px !important; } .vkb-trip > :last-child { margin-bottom: 16px !important; } .vkb-trip h3 { font-size: 19px; } .vkb-trip p:not([class]) { font-size: 14.5px; line-height: 1.5; } /* Icon tip grid */ .vkb-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .vkb-icon-card { padding: 18px; } .vkb-icon-card::before { content: ''; display: block; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; background: var(--vkb-teal-soft) var(--vkb-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")) center / 21px no-repeat; } .vkb-icon-card h3 { font-family: var(--vkb-sans); font-size: 15.5px !important; font-weight: 700; margin-bottom: 4px !important; } .vkb-icon-card p { font-size: 14.5px; line-height: 1.5; } .vkb-ic-plane { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16l20-8-8 12-2-5-5-1z'/%3E%3C/svg%3E"); } .vkb-ic-money { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); } .vkb-ic-shirt { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3l4 3 4-3 4 4-3 3v11H7V10L4 7z'/%3E%3C/svg%3E"); } .vkb-ic-user { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E"); } .vkb-ic-shield { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); } .vkb-ic-plug { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0zM12 18v3'/%3E%3C/svg%3E"); } .vkb-ic-clock { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } .vkb-ic-calendar { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); } .vkb-ic-sun { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5'/%3E%3C/svg%3E"); } .vkb-ic-pin { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); } .vkb-ic-passport { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E"); } .vkb-ic-chat { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); } .vkb-ic-car { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2-5h14l2 5v4H3zM7 17v2M17 17v2'/%3E%3C/svg%3E"); } .vkb-ic-bed { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V7M3 14h18v4M21 14v-3a3 3 0 0 0-3-3h-7v6'/%3E%3Ccircle cx='7' cy='11' r='2'/%3E%3C/svg%3E"); } .vkb-ic-food { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M5 3v5a2 2 0 0 0 4 0V3M7 11v10M17 21V3c-2 1-3 4-3 7h3'/%3E%3C/svg%3E"); } .vkb-ic-camera { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7l2-3h4l2 3'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); } .vkb-ic-ticket { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 0 0 4v4h18v-4a2 2 0 0 1 0-4V4H3z'/%3E%3Cpath d='M14 4v12'/%3E%3C/svg%3E"); } .vkb-ic-phone { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); } .vkb-ic-water { --vkb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E"); } /* FAQ accordion (core Details block) */ .entry .wp-block-details { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 12px; padding: 0; margin: 8px 0; } .entry .wp-block-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; font-size: 16.5px; font-weight: 600; } .entry .wp-block-details summary::-webkit-details-marker { display: none; } .entry .wp-block-details summary::after { content: '+'; font-size: 24px; line-height: 1; font-weight: 400; color: var(--vkb-accent); flex: none; } .entry .wp-block-details[open] summary::after { content: '–'; } .entry .wp-block-details > :not(summary) { margin: 0; padding: 0 18px 16px; font-size: 15.5px; } /* Author */ .author-box { display: flex; gap: 14px; align-items: flex-start; } .vkb-avatar { flex: none; border-radius: 50%; object-fit: cover; } .vkb-avatar-ini { display: grid; place-items: center; background: var(--vkb-teal); color: #fff; font-family: var(--vkb-serif); font-size: 21px; font-weight: 600; } @media (min-width: 783px) { .admin-bar .site-header { top: 32px; } .admin-bar .dest-subnav { top: calc(var(--vkb-header-h) + 32px); } .admin-bar .dest-aside { top: calc(var(--vkb-header-h) + 108px); } } @media (max-width: 1100px) { .dest-cols { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } } @media (max-width: 960px) { .dest-cols { grid-template-columns: minmax(0, 1fr); } .dest-aside { position: static; order: -1; } .dest-aside .aside-weather, .dest-aside .aside-nl, .dest-aside .ad-slot { display: none; } .facts-grid, .facts-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts-grid .fact { grid-column: auto !important; } .vkb-days { grid-template-columns: 1fr; } } @media (max-width: 680px) { .vkb-sights, .vkb-trips { grid-template-columns: 1fr; } .vkb-sights > .vkb-sight:first-child, .vkb-sights > .vkb-sight:last-child:nth-child(even) { display: flex; } .vkb-sights > .vkb-sight:first-child > figure, .vkb-sights > .vkb-sight:last-child:nth-child(even) > figure { min-height: 0; aspect-ratio: 4 / 3; height: auto; } .vkb-sights > .vkb-sight:first-child > :not(figure), .vkb-sights > .vkb-sight:last-child:nth-child(even) > :not(figure) { margin-left: 20px !important; margin-right: 20px !important; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child)::before { left: 14px; right: auto; } .vkb-hoods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vkb-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vkb-trip { grid-template-columns: 110px 1fr; } .vkb-trip > figure { min-height: 150px; } .entry .vkb-photobreak img { height: 240px; } .dest-subnav { margin-top: 24px; } } @media (max-width: 420px) { .vkb-icons, .facts-grid, .facts-grid.cols-3 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .vkb-aff { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-muted); vertical-align: 1px; } /* v1.2.2 – gallery button + lightbox */ .gallery-hero, .single-hero { position: relative; } .gallery-hero .media, .single-hero { cursor: zoom-in; } .gallery-more { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: rgba(255, 253, 249, .95); color: var(--vkb-ink); font: 600 14px/1 var(--vkb-sans); padding: 11px 16px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } .gallery-more:hover { background: #fff; } .vkb-zoomable { cursor: zoom-in; } .vkb-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(12, 18, 20, .96); display: none; align-items: center; justify-content: center; gap: 12px; padding: 56px 16px 24px; } .vkb-lb.is-open { display: flex; } .vkb-lb-lock, .vkb-lb-lock body { overflow: hidden; } .vkb-lb-fig { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; } .vkb-lb-fig img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 8px; object-fit: contain; position: static; } .vkb-lb-fig figcaption { display: flex; gap: 16px; justify-content: space-between; width: 100%; color: #E9E3D8; font-size: 14px; } .vkb-lb-count { color: #A9B5B2; white-space: nowrap; font-variant-numeric: tabular-nums; } .vkb-lb button { border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; border-radius: 999px; font: 400 30px/1 var(--vkb-sans); width: 48px; height: 48px; flex: none; display: grid; place-items: center; } .vkb-lb button:hover, .vkb-lb button:focus-visible { background: rgba(255, 255, 255, .25); } .vkb-lb .vkb-lb-close { position: absolute; top: 12px; right: 12px; font-size: 28px; } @media (max-width: 760px) { .vkb-lb { padding: 56px 8px 16px; gap: 0; } .vkb-lb .vkb-lb-prev, .vkb-lb .vkb-lb-next { position: absolute; bottom: 20px; } .vkb-lb .vkb-lb-prev { left: 16px; } .vkb-lb .vkb-lb-next { right: 16px; } .vkb-lb-fig figcaption { padding: 0 72px; flex-direction: column; gap: 4px; text-align: center; } .gallery-more { right: 12px; bottom: 12px; } } /* v1.3 – automatic card buttons */ .vkb-sight > .vkb-more-auto { margin-top: 12px !important; } .vkb-hood > .vkb-more-auto { margin-top: auto !important; padding-top: 8px; } .vkb-more-auto a { white-space: nowrap; } /* v1.3.1 – photo always fills the full height of side-by-side cards */ .vkb-trip { position: relative; display: flex; flex-direction: column; padding-left: 160px; min-height: 180px; } .vkb-trip > figure { position: absolute !important; left: 0; top: 0; bottom: 0; width: 160px; height: auto; min-height: 0; margin: 0 !important; } .vkb-trip > :not(figure) { grid-column: auto; } .vkb-trip > figure + * { margin-top: 16px !important; } .vkb-trip > .vkb-more { margin-top: auto !important; padding-top: 8px; } .vkb-sights > .vkb-sight:first-child, .vkb-sights > .vkb-sight:last-child:nth-child(even) { display: flex; flex-direction: column; position: relative; padding-left: 55%; min-height: 340px; } .vkb-sights > .vkb-sight:first-child > figure, .vkb-sights > .vkb-sight:last-child:nth-child(even) > figure { position: absolute !important; left: 0; top: 0; bottom: 0; width: 55%; height: auto; min-height: 0; margin: 0 !important; aspect-ratio: auto; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child) { padding-left: 0; padding-right: 55%; } .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child) > figure { left: auto; right: 0; } @media (max-width: 680px) { .vkb-trip { padding-left: 110px; min-height: 150px; } .vkb-trip > figure { width: 110px; } .vkb-sights > .vkb-sight:first-child, .vkb-sights > .vkb-sight:last-child:nth-child(even), .vkb-sights > .vkb-sight:last-child:nth-child(even):not(:first-child) { padding: 0; min-height: 0; } .vkb-sights > .vkb-sight:first-child > figure, .vkb-sights > .vkb-sight:last-child:nth-child(even) > figure { position: relative !important; width: auto; aspect-ratio: 4 / 3; left: auto; right: auto; } } /* v1.4 – country hub components */ .dest-regions { margin-bottom: 56px; scroll-margin-top: calc(var(--vkb-header-h) + 72px); } .dest-regions .h2 { font-size: 32px; margin-bottom: 8px; } .dest-regions-intro { color: var(--vkb-ink-2); margin: 0 0 20px; max-width: 65ch; } .vkb-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; } .vkb-region { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; border-radius: var(--vkb-radius); overflow: hidden; color: #fff; background: var(--vkb-ink); } .vkb-region img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .vkb-region:hover img { transform: scale(1.04); } .vkb-region::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(15,22,25,0) 25%, rgba(15,22,25,.55) 55%, rgba(15,22,25,.92)); } .vkb-region:hover { color: #fff; } .vkb-region-bd { position: relative; z-index: 1; padding: 14px; display: flex; flex-direction: column; gap: 3px; } .vkb-region-title { font-family: var(--vkb-serif); font-size: 20px; font-weight: 600; line-height: 1.1; } .vkb-region-for { font-size: 12px; font-weight: 700; color: #CFE7E2; } .vkb-region-text { font-size: 13px; line-height: 1.4; color: #EDE7DD; } .vkb-region-go { font-size: 13px; font-weight: 700; margin-top: 6px; } .vkb-region-draft { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #F3D9CF; color: var(--vkb-accent-dark); padding: 2px 6px; border-radius: 4px; } .entry .vkb-compare { max-width: none; margin: 20px 0 8px; overflow-x: auto; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); } .entry .vkb-compare table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; } .entry .vkb-compare th, .entry .vkb-compare td { padding: 12px 14px; text-align: left; border: 0; border-bottom: 1px solid var(--vkb-line); vertical-align: middle; } .entry .vkb-compare thead th, .entry .vkb-compare thead td { background: var(--vkb-sand-2); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--vkb-ink-2); font-weight: 700; } .entry .vkb-compare tbody tr:last-child td { border-bottom: 0; } .entry .vkb-compare tbody td:first-child { font-family: var(--vkb-serif); font-size: 17px; font-weight: 600; color: var(--vkb-ink); white-space: nowrap; } .entry .vkb-compare figcaption { font-size: 12.5px; color: var(--vkb-muted); padding: 8px 14px; margin: 0; text-align: left; } .vkb-dots span { letter-spacing: 2px; color: var(--vkb-teal); white-space: nowrap; font-size: 13px; } .vkb-dots i, .vkb-price i { font-style: normal; color: var(--vkb-s1); } .vkb-price { font-weight: 700; white-space: nowrap; } .vkb-beaches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .vkb-beach { position: relative; display: flex; flex-direction: column; } .vkb-beach > figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--vkb-sand-2); } .vkb-beach > figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .vkb-beach > :not(figure) { margin-left: 18px !important; margin-right: 18px !important; } .vkb-beach > figure + * { margin-top: 16px !important; } .vkb-beach > * + :not(figure) { margin-top: 8px !important; } .vkb-beach > :last-child { margin-bottom: 18px !important; } .vkb-beach h3 { font-size: 20px; } .vkb-beach p:not([class]) { font-size: 14.5px; line-height: 1.55; } .vkb-beach > .vkb-more { margin-top: auto !important; padding-top: 6px; } .vkb-beaches > .vkb-beach:first-child { grid-column: span 2; padding-left: 52%; min-height: 300px; } .vkb-beaches > .vkb-beach:first-child > figure { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; aspect-ratio: auto; } .vkb-beaches > .vkb-beach:first-child > figure + * { margin-top: 24px !important; } .vkb-beaches > .vkb-beach:first-child h3 { font-size: 26px; } .vkb-beach { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; } .entry .vkb-beaches { margin: 24px 0 8px; } .entry .vkb-beach p, .entry .vkb-beach h3 { margin: 0; } .vkb-days.vkb-days-free { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vkb-days-free .vkb-day h3::before { display: none; } .vkb-days-free .vkb-day h3 strong { font-family: var(--vkb-serif); font-size: 32px; line-height: 1; color: var(--vkb-accent); font-weight: 600; } .entry .vkb-nights { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--vkb-teal); background: var(--vkb-teal-soft); border-radius: 999px; padding: 2px 10px; margin: 0; } .vkb-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 20px 0 8px; } .vkb-type { position: relative; aspect-ratio: 1 / 1; border-radius: var(--vkb-radius); overflow: hidden; display: flex; align-items: flex-end; color: #fff; background: var(--vkb-teal); } .vkb-type img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vkb-type::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(15,22,25,0) 40%, rgba(15,22,25,.85)); } .vkb-type:hover { color: #fff; } .vkb-type span { position: relative; z-index: 1; padding: 12px 14px; display: flex; flex-direction: column; } .vkb-type strong { font-family: var(--vkb-serif); font-size: 19px; font-weight: 600; line-height: 1.15; } .vkb-type small { font-size: 12px; font-weight: 600; color: #DDEBE8; margin-top: 3px; } .vkb-chart .sealine { fill: none; stroke: #2E7FB0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .vkb-chart .seaval { font-size: 10.5px; font-weight: 700; fill: #2E7FB0; font-family: var(--vkb-sans); } .vkb-legend i.sea { width: 14px; height: 0; border-radius: 0; border-top: 3px solid #2E7FB0; vertical-align: 3px; } @media (max-width: 680px) { .vkb-beaches { grid-template-columns: 1fr; } .vkb-beaches > .vkb-beach:first-child { grid-column: auto; padding-left: 0; min-height: 0; } .vkb-beaches > .vkb-beach:first-child > figure { position: relative; width: auto; aspect-ratio: 4 / 3; } .vkb-days.vkb-days-free { grid-template-columns: 1fr; } .vkb-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== v1.5 – Landendossier ========================================================================== */ .dossier-bar { position: sticky; top: var(--vkb-header-h); z-index: 45; background: var(--vkb-paper); border-bottom: 1px solid var(--vkb-line); } .dossier-bar .wrap { display: flex; align-items: center; gap: 18px; padding-top: 8px; padding-bottom: 8px; } .dbar-name { flex: none; font-family: var(--vkb-serif); font-weight: 600; font-size: 17px; color: var(--vkb-ink); line-height: 1.15; } .dbar-name small { display: block; font-family: var(--vkb-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vkb-teal); font-weight: 700; } .dbar-items { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; } .dbar-item { position: relative; } .dbar-top { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--vkb-ink); padding: 8px 12px; border-radius: 999px; cursor: pointer; list-style: none; min-height: 38px; } .dbar-top::-webkit-details-marker { display: none; } .dbar-dd > summary::after { content: '▾'; font-size: 10px; color: var(--vkb-muted); } .dbar-top:hover { background: var(--vkb-sand-2); color: var(--vkb-ink); } .dbar-item.is-on > .dbar-top, .dbar-item.is-on > .dbar-dd > .dbar-top { background: var(--vkb-teal-soft); color: var(--vkb-teal); } .dbar-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 70vh; overflow-y: auto; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(27, 42, 47, .14); padding: 6px; z-index: 60; display: flex; flex-direction: column; } .dbar-menu a { padding: 8px 10px; border-radius: 8px; color: var(--vkb-ink); font-size: 14px; } .dbar-menu a:hover, .dbar-menu a[aria-current] { background: var(--vkb-sand-2); } .dbar-draft { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--vkb-accent-dark); margin-left: 4px; } .dbar-sponsor { flex: none; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--vkb-muted); line-height: 1.2; border-left: 1px solid var(--vkb-line); padding-left: 14px; } .dbar-sponsor span:first-child { max-width: 96px; } body.has-dossier .dest-subnav { position: static; margin-top: 28px; } body.has-dossier .dest-aside { top: calc(var(--vkb-header-h) + 70px); } .admin-bar .dossier-bar { top: calc(var(--vkb-header-h) + 32px); } .dossier-sponsor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 12px 16px; margin-top: 16px; font-size: 14px; color: var(--vkb-ink-2); } .dossier-sponsor p { margin: 0; flex: 1; min-width: 200px; } .updated-line { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--vkb-muted); margin: 12px 0 4px; } .updated-line .upd { background: var(--vkb-teal-soft); color: var(--vkb-teal); font-weight: 700; border-radius: 999px; padding: 3px 10px; } .dossier-overview { margin-top: 56px; scroll-margin-top: calc(var(--vkb-header-h) + 72px); } .dossier-overview > h2 { margin-bottom: 18px; } .dov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .dov-col { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; } .dov-col h3 { font-size: 20px; margin: 0; } .dov-why { margin: 0; font-size: 13px; color: var(--vkb-muted); } .dov-col ul, .all-col ul { list-style: none; margin: 0; padding: 0; } .dov-col li, .all-col li { border-top: 1px solid var(--vkb-line); padding: 7px 0; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .dov-col li a, .all-col li a { color: var(--vkb-ink); } .dov-col li a:hover, .all-col li a:hover { color: var(--vkb-accent-dark); } .dov-col li.is-sub, .all-col li.is-sub { padding-left: 16px; font-size: 13.5px; } .dov-col li.is-sub::before, .all-col li.is-sub::before { content: '↳'; color: var(--vkb-muted); margin-right: 2px; } .dov-st { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: #F7E3D9; color: #8A3417; border-radius: 6px; padding: 1px 6px; } .dov-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; } .dov-months a, .dov-months span { text-align: center; font-size: 12px; font-weight: 700; padding: 7px 0; border-radius: 6px; color: var(--vkb-ink); background: var(--vkb-sand-2); } .dov-months .m3 { background: var(--vkb-s3); color: #fff; } .dov-months .m2 { background: var(--vkb-s2); } .dov-months .m1 { background: var(--vkb-s1); } .dov-months span.is-empty { opacity: .55; } .dov-months .is-cur { outline: 2.5px solid var(--vkb-ink); outline-offset: 1px; } .dov-all { margin: 14px 0 0; font-weight: 600; } .all-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 20px 0 24px; } .all-head .lead { margin-top: 12px; max-width: 62ch; } .all-tally { display: flex; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; } .all-tally div { padding: 12px 16px; border-right: 1px solid var(--vkb-line); text-align: center; min-width: 80px; } .all-tally div:last-child { border-right: 0; } .all-tally .is-total { background: var(--vkb-ink); color: #fff; } .all-tally b { display: block; font-family: var(--vkb-serif); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; } .all-tally small { font-size: 12px; color: var(--vkb-muted); } .all-tally .is-total small { color: #CFC8BC; } .all-tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-bottom: 60px; } .all-col { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 18px; min-width: 0; } .all-col h2 { font-size: 20px; margin: 0 0 10px; } .all-col code { display: block; width: 100%; font-size: 11.5px; color: var(--vkb-muted); word-break: break-all; } .region-filter { margin: 0 0 16px; } .vkb-region[hidden] { display: none !important; } .heat-block { margin-bottom: 56px; scroll-margin-top: calc(var(--vkb-header-h) + 72px); } .heat-sub { color: var(--vkb-ink-2); margin: 8px 0 16px; } .heat-wrap { overflow-x: auto; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); } table.heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 700px; font-size: 13px; font-variant-numeric: tabular-nums; padding: 8px; } .heat th { font-size: 12px; color: var(--vkb-muted); font-weight: 700; padding: 4px; text-align: center; } .heat th a { color: inherit; text-decoration: underline; text-decoration-color: var(--vkb-line-2); text-underline-offset: 3px; } .heat th.is-cur { color: var(--vkb-ink); } .heat tbody th { text-align: left; font-size: 14px; white-space: nowrap; padding-right: 10px; } .heat tbody th a { color: var(--vkb-ink); text-decoration: none; } .heat td { text-align: center; border-radius: 6px; padding: 8px 0; font-weight: 700; color: var(--vkb-ink); } .heat .hc1, .heat-legend .hc1 { background: #E7E0D3; } .heat .hc2, .heat-legend .hc2 { background: #EED3B8; } .heat .hc3, .heat-legend .hc3 { background: #E8B48E; } .heat .hc4, .heat-legend .hc4 { background: #D98A5F; } .heat .hc5, .heat-legend .hc5 { background: #C2502E; color: #fff; } .heat-legend { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vkb-muted); margin: 10px 0 0; } .heat-legend i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; } .month-head { margin-bottom: 40px; } .month-strip .dov-months { grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0 0 18px; } .month-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; } .month-stats div { padding: 16px 18px; border-right: 1px solid var(--vkb-line); } .month-stats div:last-child { border-right: 0; } .month-stats b { display: block; font-family: var(--vkb-serif); font-size: 38px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; } .month-stats small { font-size: 12.5px; color: var(--vkb-muted); } .month-stats .is-sea b { color: #2E7FB0; } .month-src { font-size: 12.5px; color: var(--vkb-muted); margin: 8px 0 0; } .month-cmp-title { margin: 36px 0 12px; } table.month-cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; font-variant-numeric: tabular-nums; } .month-cmp th, .month-cmp td { padding: 11px 14px; border-bottom: 1px solid var(--vkb-line); text-align: left; } .month-cmp thead th { background: var(--vkb-sand-2); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--vkb-ink-2); } .month-cmp tbody tr:last-child > * { border-bottom: 0; } .month-cmp tbody th a { color: var(--vkb-ink); font-weight: 700; } .month-cmp tr.is-best > * { background: var(--vkb-teal-soft); } .pill { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; } .pill-y { background: var(--vkb-teal); color: #fff; } .pill-m { background: var(--vkb-s2); color: var(--vkb-ink); } .pill-n { background: var(--vkb-sand-2); color: var(--vkb-ink-2); } .dossier-related .rel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .dossier-related .rel-chips a { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; color: var(--vkb-ink); } .dossier-related .rel-chips a:hover { border-color: var(--vkb-ink); } .prak-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 24px; } .prak-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 12px; padding: 12px 16px; color: var(--vkb-ink); } .prak-row span { font-size: 14px; color: var(--vkb-ink-2); } .prak-row i { font-style: normal; color: var(--vkb-accent-dark); font-weight: 700; } /* Blocks for dossier pages (patterns) */ .vkb-answer { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 18px 20px; font-size: 17.5px; line-height: 1.55; } .vkb-answer::before { content: 'Kort antwoord'; display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vkb-teal); font-weight: 700; margin-bottom: 6px; } .entry ol.vkb-steps { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; counter-reset: s; } .entry ol.vkb-steps li { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 16px; counter-increment: s; font-size: 15px; color: var(--vkb-ink-2); margin: 0; } .entry ol.vkb-steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vkb-ink); color: #fff; font-family: var(--vkb-serif); font-weight: 600; margin-bottom: 10px; } .entry ol.vkb-steps li strong { display: block; color: var(--vkb-ink); } .vkb-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 20px 0; } .vkb-option { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 18px; } .vkb-option h3 { font-size: 20px; margin: 0 0 6px; } .vkb-option p { margin: 0 0 8px; } @media (max-width: 960px) { .all-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); } .all-head { grid-template-columns: 1fr; } .dbar-sponsor span:first-child { display: none; } } @media (max-width: 760px) { .dossier-bar { position: static; } .dossier-bar .wrap { flex-wrap: wrap; gap: 6px 12px; padding-left: 16px; padding-right: 16px; position: relative; } .dbar-item { position: static; } .dbar-menu { left: 16px; right: 16px; min-width: 0; top: 100%; } .dbar-top { padding: 6px 10px; font-size: 13.5px; min-height: 36px; } .all-tree { grid-template-columns: 1fr; } .all-tally div { min-width: 0; flex: 1; padding: 10px 6px; } .all-tally b { font-size: 24px; } .month-strip .dov-months { grid-template-columns: repeat(6, minmax(0, 1fr)); } .prak-row { grid-template-columns: 1fr auto; } .prak-row span { grid-column: 1 / -1; grid-row: 2; } } /* ========================================================================== v1.5 – Reisorganisaties ========================================================================== */ .ops-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 20px 0 24px; } .ops-head .lead { margin-top: 12px; max-width: 62ch; } .ops-count { margin: 0; text-align: right; font-size: 14px; color: var(--vkb-muted); } .ops-count b { display: block; font-family: var(--vkb-serif); font-size: 44px; line-height: 1; color: var(--vkb-ink); } .ops-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 40px; } .ops-filters { padding: 18px; position: sticky; top: calc(var(--vkb-header-h) + 16px); overflow: visible; } .ops-filters p { margin: 0 0 14px; } .ops-filters label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-muted); margin-bottom: 6px; } .ops-filters select { width: 100%; font: inherit; font-size: 15px; padding: 10px; border: 1.5px solid var(--vkb-line); border-radius: 10px; background: #fff; color: var(--vkb-ink); } .ops-filters .of-check label { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--vkb-ink); font-weight: 600; display: flex; gap: 8px; align-items: center; } .ops-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .op-card { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; } .op-card.is-top { border-color: #E6C2B4; box-shadow: 0 0 0 3px #FBEFE8; } .op-card.is-basis { background: transparent; } .op-card h3 { font-size: 21px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .op-card h3 a { color: var(--vkb-ink); } .op-card p { margin: 4px 0 8px; font-size: 14.5px; color: var(--vkb-ink-2); } .op-logo { flex: none; width: 96px; height: 56px; border-radius: 10px; border: 1px solid var(--vkb-line); background: #fff; display: grid; place-items: center; overflow: hidden; padding: 6px; } .op-logo img { max-height: 42px; width: auto; max-width: 100%; object-fit: contain; } .op-logo.is-ini { font-family: var(--vkb-serif); font-size: 20px; font-weight: 600; color: var(--vkb-muted); background: var(--vkb-sand-2); } .op-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .op-score { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--vkb-muted); } .op-score b { background: var(--vkb-teal); color: #fff; border-radius: 8px; padding: 2px 8px; font-size: 15px; font-variant-numeric: tabular-nums; } .op-score.is-empty { font-style: italic; } .op-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; } .op-badges span { font-size: 12px; font-weight: 600; border: 1px solid var(--vkb-line); background: var(--vkb-sand); color: var(--vkb-ink-2); border-radius: 999px; padding: 3px 10px; } .op-badges .is-ok { background: var(--vkb-teal-soft); border-color: #C9DCD8; color: var(--vkb-teal); } .op-badges .is-award { background: #F3E6C4; border-color: #E7D3A0; color: #6B4E0E; } .op-dep { font-size: 13px; color: var(--vkb-muted); } .op-acts { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .op-prof { font-size: 14px; font-weight: 700; } .ops-empty { padding: 24px; text-align: center; color: var(--vkb-muted); border: 1px dashed var(--vkb-line-2); border-radius: var(--vkb-radius); } .ops-table-wrap { overflow-x: auto; } table.ops-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 700px; } .ops-table th, .ops-table td { padding: 11px 14px; border-bottom: 1px solid var(--vkb-line); text-align: left; vertical-align: middle; } .ops-table thead th { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--vkb-muted); font-weight: 700; } .ops-table tbody tr:last-child > * { border-bottom: 0; } .ops-table tr.is-top > * { background: #FDF6F2; } .ops-table tr[hidden] { display: none; } .op-name { display: flex; align-items: center; gap: 12px; font-weight: 700; } .op-name > span:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .op-name a { color: var(--vkb-ink); } .ops-table .op-logo { width: 68px; height: 40px; padding: 4px; } .ops-table .op-logo img { max-height: 30px; } .ops-table .op-logo.is-ini { font-size: 15px; } .op-go { font-weight: 700; font-size: 14px; white-space: nowrap; } .op-go.is-prof { color: var(--vkb-ink-2); } .ops-foot { margin-top: 12px; } /* 1.8.5: breathing room before the next block (e.g. "Voor reisorganisaties"). */ .ops-foot, .entry .ops-foot, .entry-content .ops-foot { margin-bottom: 36px !important; } .op-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding: 20px 0 8px; align-items: start; } .op-hero-top { margin-bottom: 14px; } .op-hero-top .op-logo { width: 130px; height: 76px; } .op-hero-top .op-logo img { max-height: 58px; } .op-hero .lead { margin: 12px 0 16px; } .op-cta { background: var(--vkb-ink); color: #F3EEE6; border-radius: var(--vkb-radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .op-cta h2 { color: #fff; } .op-cta p { margin: 0; font-size: 14px; color: #CFC8BC; } .op-cta small { font-size: 12px; color: #A9A195; } .op-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding: 32px 0 60px; } .op-body > section { margin-bottom: 48px; scroll-margin-top: calc(var(--vkb-header-h) + 20px); } .op-body h2 { margin-bottom: 16px; } .op-dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .op-dest { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; display: flex; flex-direction: column; } .op-dest .media { display: block; aspect-ratio: 16 / 10; border-radius: 0; } .op-dest .media img { width: 100%; height: 100%; object-fit: cover; } .op-dest-bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; } .op-dest h3 { font-size: 18px; margin: 0; } .op-dest h3 a { color: var(--vkb-ink); } .op-dest small { color: var(--vkb-muted); font-size: 12.5px; } .op-dest .op-go { font-size: 13px; margin-top: 4px; } .op-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .op-offer { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; color: var(--vkb-ink); display: flex; flex-direction: column; } .op-offer .media { aspect-ratio: 4 / 3; border-radius: 0; display: block; } .op-offer .media img { width: 100%; height: 100%; object-fit: cover; } .op-offer-bd { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .op-offer-bd small { color: var(--vkb-muted); font-size: 13px; } .op-offer-bd b { margin-top: 4px; } .op-parts { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-bottom: 16px; } .op-part { display: grid; grid-template-columns: 150px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 14px; } .op-part .bar { height: 10px; background: var(--vkb-sand-2); border-radius: 4px; overflow: hidden; } .op-part .bar i { display: block; height: 100%; background: var(--vkb-teal); } .op-part b { text-align: right; font-variant-numeric: tabular-nums; } .op-reviews { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .op-review { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 12px; padding: 14px 16px; } .op-review header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--vkb-muted); margin-bottom: 4px; } .op-review header b { color: var(--vkb-ink); } .op-review p { margin: 0; color: var(--vkb-ink-2); } .op-review .is-ok { color: var(--vkb-teal); font-weight: 700; } .op-reply { margin-top: 10px !important; background: var(--vkb-sand); border-radius: 8px; padding: 8px 10px; font-size: 14px; } .op-verif { margin: 24px 0 0; font-size: 12.5px; color: var(--vkb-muted); background: var(--vkb-sand-2); border-radius: 10px; padding: 10px 12px; } .review-form-wrap { margin-top: 16px; } .review-form-wrap > summary { list-style: none; display: inline-flex; } .review-form-wrap > summary::-webkit-details-marker { display: none; } .review-form { background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 18px; margin-top: 12px; } .review-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; } .review-form input, .review-form select, .review-form textarea { width: 100%; font: inherit; font-size: 15px; padding: 9px 10px; border: 1.5px solid var(--vkb-line); border-radius: 10px; background: #fff; } .rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; } .rf-parts { border: 1px solid var(--vkb-line); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; } .rf-parts legend { font-size: 13px; font-weight: 700; padding: 0 4px; } .rf-parts label { font-weight: 500; } .review-form .hp { position: absolute; left: -9999px; } .notice-ok, .notice-err { border-radius: 10px; padding: 10px 14px; font-weight: 600; } .notice-ok { background: var(--vkb-teal-soft); color: var(--vkb-teal); } .notice-err { background: #F8DAD3; color: #8E2A17; } .op-side { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: calc(var(--vkb-header-h) + 20px); } .op-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 14px; margin: 0; } .op-kv dt { color: var(--vkb-muted); } .op-kv dd { margin: 0; font-weight: 600; overflow-wrap: break-word; hyphens: auto; } .op-side .aside-prow .op-logo { width: 64px; height: 36px; padding: 3px; } .op-side .aside-prow .op-logo.is-ini { font-size: 14px; } @media (max-width: 960px) { .ops-layout, .op-hero, .op-cols { grid-template-columns: minmax(0, 1fr); } .ops-filters, .op-side, .ops-sidecol { position: static; } .ops-head { grid-template-columns: 1fr; } .ops-count { text-align: left; } } @media (max-width: 680px) { .op-card { grid-template-columns: auto minmax(0, 1fr); } .op-acts { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .op-logo { width: 68px; height: 42px; } .op-part { grid-template-columns: 110px minmax(0, 1fr) 36px; } } .heat-wrap, .ops-table-wrap { position: relative; } .month-ad { margin: 0 0 40px; } @media (max-width: 760px) { .dbar-items { order: 3; flex: 1 1 100%; gap: 2px 4px; margin: 0 -6px; } .dbar-sponsor { margin-left: auto; border-left: 0; padding-left: 0; } .op-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; } } /* ---- 1.5.1: "Ook partner worden?" ---- */ .ops-sidecol { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--vkb-header-h) + 16px); } .ops-sidecol .ops-filters { position: static; } .join-title { font-family: var(--vkb-serif); font-weight: 600; font-size: 19px; line-height: 1.2; margin: 0 0 6px; color: var(--vkb-ink); } .join-card { padding: 18px; background: var(--vkb-teal-soft); border-color: #CFE0DC; } .join-card.aside-box { background: var(--vkb-teal-soft); } .join-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 22px 26px; background: var(--vkb-teal-soft); border-color: #CFE0DC; margin-top: 18px; } .join-strip-txt { max-width: 720px; } .join-strip .btn { flex: none; } .join-after { margin-top: -20px; padding-bottom: 8px; } /* 1.8.6: directly after the tour-operator table, no negative pull (the link above needs room). */ .ops-section + .join-after { margin-top: 0; } .join-line { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; } .join-slot { position: relative; border: 1.5px dashed var(--vkb-line-2); border-radius: var(--vkb-radius); background: var(--vkb-paper); padding: 26px 22px 20px; } .join-slot .ad-label { position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-muted); } .join-slot-in { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; } .join-slot-sidebar .join-slot-in { flex-direction: column; align-items: flex-start; } .join-ghosts { display: grid; gap: 10px; } .join-ghosts span { display: block; height: 58px; border-radius: 12px; border: 1.5px dashed var(--vkb-line-2); background: repeating-linear-gradient(90deg, transparent 0 72px, var(--vkb-sand-2) 72px 240px, transparent 240px 100%); opacity: .8; } .join-empty .join-strip { margin-top: 16px; } .join-contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: 30px; align-items: start; } .join-contact > div:only-child { grid-column: 1 / -1; max-width: 760px; } .jf-form { margin-top: 0; background: #fff; } /* v1.10.13 */ .jf-form p { margin: 0 0 12px; } .jf-form .notice-ok, .jf-form .notice-err { margin-bottom: 12px; } .join-form .notice-ok { margin: 0; } @media (max-width: 760px) { .ops-sidecol { position: static; } .join-strip, .join-slot-in { flex-direction: column; align-items: flex-start; } .join-contact { grid-template-columns: minmax(0, 1fr); padding: 22px; } } /* ---- 1.5.1: 8 items in the main menu ---- */ @media (min-width: 1280px) { .site-header .wrap { gap: 22px; } .main-nav ul { gap: 12px; flex-wrap: nowrap; } .main-nav a { font-size: 14.5px; padding: 10px 2px; } } @media (min-width: 1101px) and (max-width: 1279px) { .menu-toggle { display: inline-flex; } .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--vkb-paper); border-bottom: 1px solid var(--vkb-line); display: none; padding: 12px 40px 20px; } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; gap: 0; } .site-header .wrap { justify-content: space-between; position: relative; } } .op-draft { display: inline-block; margin-left: 6px; font-family: var(--vkb-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6E4B00; background: #FCEBC4; border-radius: 6px; padding: 2px 7px; vertical-align: middle; } .op-logo img, .logo-tile img, .logo-mini img { object-fit: contain; } /* ---- 1.5.3: "Alle pagina's" for visitors ---- */ .all-col .all-desc { display: block; width: 100%; font-size: 13px; color: var(--vkb-muted); line-height: 1.4; } .all-tree.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .all-tree.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .all-tree.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .all-head.is-public { grid-template-columns: minmax(0, 1fr); } .all-col .dov-months { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } .all-editor-note { margin: -44px 0 40px; } @media (max-width: 760px) { .all-tree.cols-2, .all-tree.cols-3 { grid-template-columns: minmax(0, 1fr); } } /* 1.8.5: only the top margin, so card links keep the side padding of their card (not glued to the photo). */ .entry .vkb-more { margin-top: 10px !important; margin-bottom: 0; font-size: 14px; font-weight: 600; } .vkb-sight > .vkb-more { margin-top: 8px !important; } .entry h2[id] { scroll-margin-top: calc(var(--vkb-header-h) + 70px); } /* ---- 1.6: reizen met kinderen ---- */ .vkb-region-fam { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #FCEBC4; color: #6E4B00; border-radius: 6px; padding: 2px 7px; margin-bottom: 4px; } .ages-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; font-size: 14px; } .ages-lab { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--vkb-ink); margin-right: 2px; } .age-chip { background: #FCEBC4; color: #6E4B00; border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: 13px; } .aside-family { background: #FFF6E5; border-color: #F2DDB0; } .op-badges .is-fam { background: #FCEBC4; color: #6E4B00; } .sv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 20px 0 24px; } .sv-next { padding: 16px 20px; min-width: 240px; } .sv-next-name { font-family: var(--vkb-serif); font-size: 22px; font-weight: 600; margin: 4px 0 2px; } .sv-wrap { overflow-x: auto; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); margin: 18px 0 8px; position: relative; } .sv-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; } .sv-table th, .sv-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--vkb-line); vertical-align: top; } .sv-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--vkb-muted); background: var(--vkb-sand-2); } .sv-table tbody tr:last-child th, .sv-table tbody tr:last-child td { border-bottom: 0; } .sv-table tbody th { font-weight: 700; white-space: nowrap; } .sv-com { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; border-radius: 5px; padding: 1px 6px; vertical-align: middle; } .sv-vl { background: #FFF1B8; color: #5C4A00; } .sv-fr { background: #E1ECF7; color: #274B6D; } .sv-legend { margin: 0 0 24px; } .sv-legend .sv-com { margin-left: 0; } .sv-entry { max-width: 780px; padding-bottom: 40px; } .nl-legal { flex-basis: 100%; order: 4; margin: 0; font-size: 12.5px; opacity: .8; } .nl-legal a { color: inherit; text-decoration: underline; } .nl-msg { flex-basis: 100%; order: 5; margin: 0; font-size: 14px; font-weight: 600; } .nl-msg.ok { color: inherit; } .nl-kids { flex-basis: 100%; order: 3; font-size: 13.5px; display: flex; gap: 8px; align-items: center; opacity: .9; } @media (max-width: 760px) { .sv-head { grid-template-columns: minmax(0, 1fr); } } /* 1.6.1: school holiday suggestions */ .sv-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; } .sv-group:last-child { margin-bottom: 0; } .sv-glab { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .sv-sun { color: var(--vkb-accent-dark); } .sv-mild { color: var(--vkb-teal); } .sv-snow { color: var(--vkb-sky-ink); } .sv-dest { white-space: nowrap; } .sv-t { font-weight: 700; margin-left: 3px; } .sv-fly { font-size: 12px; color: var(--vkb-muted); margin-left: 5px; } .sv-fly::before { content: '✈ '; } .sv-table td:last-child { min-width: 300px; } /* 1.6.1 – duidelijke link naar een detailpagina onder een item */ .entry .vkb-detail-btn { margin: 14px 0 26px !important; } .entry .vkb-detail-btn .wp-block-button__link { font-size: 14.5px; font-weight: 700; padding: 10px 18px; } @media (max-width: 600px) { .entry .vkb-detail-btn .wp-block-button__link { width: 100%; text-align: center; } } /* 1.6.1 – schoolvakanties met suggesties: op gsm onder elkaar i.p.v. horizontaal scrollen */ @media (max-width: 700px) { .sv-sugg { min-width: 0; } .sv-sugg thead { display: none; } .sv-sugg tbody tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 14px; border-bottom: 1px solid var(--vkb-line); } .sv-sugg tbody tr:last-child { border-bottom: 0; } .sv-sugg tbody th, .sv-sugg tbody td { border: 0; padding: 0; } .sv-sugg tbody td:nth-of-type(1) { text-align: right; color: var(--vkb-muted); font-size: 13.5px; } .sv-sugg tbody td:last-child { grid-column: 1 / -1; min-width: 0; padding-top: 10px; } } /* ========================================================================== 1.7 – menu met submenu's, Vertrekken vanuit België, Druktekalender ========================================================================== */ .main-nav li { position: relative; } .main-nav .menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .55; } @media (min-width: 1280px) { .main-nav .sub-menu { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; position: absolute; top: 100%; left: -14px; z-index: 60; min-width: 250px; flex-direction: column; gap: 0; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(27, 42, 47, .14); padding: 8px; } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; } .main-nav .sub-menu a { display: block; font-size: 14.5px; font-weight: 600; padding: 9px 12px; border-radius: 8px; box-shadow: none !important; } .main-nav .sub-menu a:hover, .main-nav .sub-menu .current-menu-item > a { background: var(--vkb-sand-2); color: var(--vkb-accent-dark); } .main-nav .sub-menu .menu-item-description { display: block; } } @media (max-width: 1279px) { .main-nav .sub-menu { display: block; padding: 0 0 6px 14px; border-left: 2px solid var(--vkb-line); margin: 0 0 6px 4px; } .main-nav .sub-menu a { font-size: 14.5px; font-weight: 500; padding: 7px 4px; } .main-nav .menu-item-has-children > a::after { display: none; } } /* Vertrekken vanuit België */ .ap-code { display: inline-block; font-family: var(--vkb-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--vkb-muted); background: var(--vkb-sand-2); border-radius: 5px; padding: 1px 6px; vertical-align: middle; } .travel-table .to-reg { display: block; font-size: 13px; margin-top: 2px; } .travel-table .to-reg a { color: var(--vkb-teal, inherit); } .travel-table td.nowrap { white-space: nowrap; } .travel-table .tr-sep td { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vkb-muted); background: var(--vkb-sand-2); padding-top: 7px; padding-bottom: 7px; } .travel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 18px 0 8px; } .travel-card { padding: 18px 20px; } .travel-h { font-weight: 700; margin: 0 0 10px; } .travel-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14.5px; } .travel-card dt { color: var(--vkb-muted); } .travel-card dd { margin: 0; } .travel-card dd.full { grid-column: 1 / -1; } .travel-note { margin: 6px 0 24px; } .aside-travel .aside-ap { font-weight: 700; margin: 0 0 4px; } .ap-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 26px; } .ap-chips .chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--vkb-line); background: var(--vkb-paper); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--vkb-ink); text-decoration: none; } .ap-chips .chip span { font-size: 12px; color: var(--vkb-muted); font-weight: 700; } .ap-chips .chip:hover, .ap-chips .chip.is-active { border-color: var(--vkb-accent); color: var(--vkb-accent-dark); } .ap-chips .chip.is-abroad { background: transparent; } .ap-chips-sep { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vkb-muted); margin: 0 4px 0 10px; } .ap-section { margin: 0 0 34px; scroll-margin-top: 110px; } .ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .ap-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 16px; text-decoration: none; color: var(--vkb-ink); } .ap-card:hover { border-color: var(--vkb-accent); } .ap-dest { font-weight: 700; font-size: 16px; } .ap-time { font-weight: 700; color: var(--vkb-accent-dark); font-size: 14px; } .ap-time::before { content: '✈ '; font-weight: 400; } .ap-air, .ap-freq { grid-column: 1 / -1; font-size: 13.5px; color: var(--vkb-muted); } /* Druktekalender */ .crowd-section { margin: 0 0 30px; scroll-margin-top: 110px; } .crowd-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); padding: 14px; margin: 14px 0 8px; } .crowd-month { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .crowd-mname { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vkb-muted); text-align: center; line-height: 1.2; min-height: 30px; } .crowd-mname small { display: block; font-weight: 600; letter-spacing: 0; } .crowd-cells { display: grid; gap: 3px; } .crowd-cell { display: block; height: 22px; border-radius: 4px; position: relative; cursor: help; } .crowd-cell:focus { outline: 2px solid var(--vkb-ink); outline-offset: 1px; } .crowd-cell.lvl-1 { background: #D5EAD8; } .crowd-cell.lvl-2 { background: #F4E3A8; } .crowd-cell.lvl-3 { background: #F0B27F; } .crowd-cell.lvl-4 { background: #D8674A; } .crowd-cell.is-be::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--vkb-ink); } .crowd-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; } .crowd-legend span { display: inline-flex; align-items: center; gap: 7px; } .crowd-legend i { width: 18px; height: 14px; } .crowd-quiet { margin: 0 0 16px; } .crowd-badge { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .crowd-badge.lvl-1 { background: #D5EAD8; color: #1F4D2A; } .crowd-badge.lvl-2 { background: #F4E3A8; color: #5C4A00; } .crowd-badge.lvl-3 { background: #F0B27F; color: #6B2E0B; } .crowd-badge.lvl-4 { background: #D8674A; color: #fff; } .crowd-tip { color: var(--vkb-teal); font-weight: 600; } .crowd-table { min-width: 520px; } .crowd-how { margin: 10px 0 0; max-width: 780px; } @media (max-width: 700px) { .crowd-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; padding: 12px; } .crowd-cell { height: 18px; } .crowd-table { min-width: 0; } .crowd-table thead { display: none; } .crowd-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--vkb-line); } .crowd-table tbody th, .crowd-table tbody td { border: 0; padding: 0; } .crowd-table tbody td:last-child { grid-column: 1 / -1; } .travel-table { min-width: 0; } .travel-table thead { display: none; } .travel-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--vkb-line); } .travel-table tbody th, .travel-table tbody td { border: 0; padding: 0; } .travel-table tbody td:nth-of-type(2) { order: 1; font-weight: 700; } .travel-table tbody td:nth-of-type(1) { order: 2; grid-column: 1 / -1; font-size: 13.5px; } .travel-table tbody td:nth-of-type(3) { order: 3; grid-column: 1 / -1; font-size: 13.5px; color: var(--vkb-muted); } .travel-table .tr-sep { display: block !important; padding: 0 !important; } .travel-table .tr-sep td { display: block; padding: 6px 14px; } } /* Overzicht uit het menu (Thema's, Plan je reis) */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 0 0 36px; } .hub-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: var(--vkb-ink); transition: transform .15s, box-shadow .15s; } .hub-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(27, 42, 47, .12); } .hub-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vkb-sand-2); } .hub-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hub-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex-grow: 1; } .hub-title { font-family: var(--vkb-serif); font-size: 21px; font-weight: 600; line-height: 1.2; } .hub-desc { font-size: 14.5px; color: var(--vkb-muted); } .hub-go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--vkb-accent-dark); } .hub-card:not(.has-img) .hub-body { border-top: 4px solid var(--vkb-accent); } /* 1.7: grid children never wider than the column (fixes horizontal scroll on the homepage on phones) */ .grid > * { min-width: 0; } @media (max-width: 560px) { .ad-promo { flex-wrap: wrap; } .ad-promo > .btn { margin-left: 0 !important; } } /* 1.8 – vluchtpartners */ .fp-air { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fp-air::after { content: ' ↗'; font-size: .85em; text-decoration: none; display: inline-block; } .fp-box { padding: 18px 20px; margin: 14px 0 8px; } .fp-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 0 0 12px; } .fp-title { font-weight: 700; margin: 0; } .fp-from { font-size: 14px; color: var(--vkb-muted); display: inline-flex; gap: 8px; align-items: center; } .fp-from select { font: inherit; color: var(--vkb-ink); border: 1px solid var(--vkb-line); border-radius: 8px; padding: 5px 8px; background: var(--vkb-paper); } .fp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .fp-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--vkb-line); border-radius: 12px; text-decoration: none; color: var(--vkb-ink); background: var(--vkb-paper); } .fp-row:hover { border-color: var(--vkb-accent); } .fp-row.is-top { border-color: var(--vkb-accent); box-shadow: inset 3px 0 0 var(--vkb-accent); } .fp-logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--vkb-line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .fp-logo img { max-width: 36px; max-height: 36px; object-fit: contain; } .fp-logo-txt { font-weight: 700; font-size: 14px; color: var(--vkb-muted); } .fp-name { display: flex; flex-direction: column; min-width: 0; } .fp-name > span { font-size: 13px; color: var(--vkb-muted); } .fp-name .aside-top { align-self: flex-start; margin-top: 3px; } .fp-cta { white-space: nowrap; } .fp-strip { font-size: 14px; margin: -6px 0 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; } .fp-strip span { color: var(--vkb-muted); } .fp-strip a { font-weight: 600; } @media (max-width: 520px) { .fp-row { grid-template-columns: 40px 1fr; } .fp-cta { grid-column: 1 / -1; text-align: center; } } .fp-name .aside-top { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-accent-dark); } .dest-travel { margin: 40px 0 0; scroll-margin-top: 120px; } .dest-travel .h2 { margin: 4px 0 16px; } /* Auteurs / E-E-A-T (1.9.0) */ .byline-wrap { flex-wrap: wrap; justify-content: space-between; } .byline { display: flex; gap: 12px; align-items: center; } .byline > div { display: flex; flex-direction: column; line-height: 1.35; } .byline-name a, .updated-line a, .author-box strong a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vkb-line-2); } .byline-name a:hover, .updated-line a:hover, .author-box strong a:hover { text-decoration-color: currentColor; } .author-hero { display: grid; grid-template-columns: 180px 1fr; gap: 36px; align-items: center; padding: 24px 0 36px; max-width: 980px; } .author-photo-wrap img, .author-photo-wrap .vkb-avatar { width: 180px !important; height: 180px !important; border-radius: 50%; object-fit: cover; display: block; } .author-photo-wrap .vkb-avatar-ini { font-size: 56px; } .author-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; } .author-about { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 48px; align-items: start; padding-bottom: 24px; } @media (max-width: 760px) { .author-hero { grid-template-columns: 1fr; gap: 18px; text-align: left; } .author-photo-wrap img, .author-photo-wrap .vkb-avatar { width: 128px !important; height: 128px !important; } .author-about { grid-template-columns: 1fr; gap: 24px; } } /* Sponsoring (1.10) */ .sp-badge { display: inline-flex; align-items: center; gap: 8px; } .sp-badge small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-muted, #5E6B6D); } .sp-features { display: flex; flex-direction: column; gap: 18px; } .sp-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: 22px; overflow: hidden; } .sp-feature .sp-media { position: relative; min-height: 320px; border-radius: 0; display: block; } .sp-feature .sp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sp-flag { position: absolute; left: 16px; top: 16px; z-index: 1; background: var(--vkb-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; } .sp-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; } .sp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sp-body .h2 a { color: inherit; } .sp-pitch { margin: 0; color: var(--vkb-ink-2); } .sp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .sp-tile { position: absolute; top: 12px; right: 12px; z-index: 2; } .sp-tile .logo-mini { box-shadow: 0 2px 8px rgba(0,0,0,.18); } .sp-hero-badge { position: absolute; left: 16px; bottom: 16px; z-index: 3; background: rgba(255,255,255,.94); border-radius: 12px; padding: 6px 8px 6px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.15); } .hero .sp-hero-badge { left: auto; right: 16px; } .sp-cta { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 24px; margin: 28px 0; border-left: 4px solid var(--vkb-teal); } .sp-cta-logo .logo-tile { width: 150px; height: 80px; } @media (max-width: 820px) { .sp-feature { grid-template-columns: 1fr; } .sp-feature .sp-media { min-height: 220px; } .sp-body { padding: 20px; } .sp-cta { grid-template-columns: 1fr; } } /* 1.10.17 – soort vakantie: compacter op gsm, "toon alle"-knop */ .vkb-more-btn { display: none; margin-top: 14px; } @media (max-width: 760px) { .vkb-more-btn { display: inline-flex; } .vkb-more:not(.is-open)[data-more-mobile="6"] > :nth-child(n+7) { display: none; } .vkb-more:not(.is-open)[data-more-mobile="4"] tbody tr:nth-child(n+5) { display: none; } .rt-dests .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rt-dests .card-body { padding: 10px 12px; } .rt-dests .card-body > span:last-child { display: none; } .rt-dests .card-title { font-size: 15px; } .rt-partners .compare tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 0; } .rt-partners .compare td { width: auto !important; padding: 4px 14px; } .rt-partners .compare td:nth-child(2), .rt-partners .compare td:nth-child(3) { grid-column: 1 / -1; } .rt-partners .compare td:nth-child(4) { display: none; } .rt-partners .compare td:nth-child(5) { grid-row: 1; grid-column: 2; } .rt-partners .compare .logo-tile { min-height: 44px; padding: 6px 10px; } .rt-partners .compare .logo-tile img { max-height: 30px; } } /* 1.10.18 */ #reisorganisaties, #partners { scroll-margin-top: calc(var(--vkb-header-h, 72px) + 24px); } /* 1.11.0 – Basis alleen in de gids: regel "Ook naar …" */ .ops-note { margin: 6px 0 0; } .ops-also, .rt-also { margin: 20px 0 0; font-size: 15px; line-height: 1.7; color: var(--vkb-muted); } .ops-also strong, .rt-also strong { color: var(--vkb-ink); margin-right: 4px; } .rt-also { font-size: 15px; line-height: 1.7; color: var(--vkb-muted); } .ops-section .ops-also a, .rt-also a { color: var(--vkb-ink); font-weight: 400; text-decoration: underline; text-decoration-color: #D8CFC0; text-underline-offset: 3px; } .ops-section .ops-also a:hover, .rt-also a:hover { color: var(--vkb-accent-dark); text-decoration-color: currentColor; } /* 1.12.0 – profiel per niveau */ .op-cover { position: relative; margin: 16px 0 0; border-radius: var(--vkb-radius); overflow: hidden; aspect-ratio: 16 / 5; } .op-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-cover figcaption { position: absolute; right: 12px; top: 10px; font-size: 11px; color: #fff; background: rgba(27,42,47,.55); padding: 3px 8px; border-radius: 999px; } .op-cover figcaption a { color: #fff; } .op-hero.has-cover { position: relative; margin-top: -56px; padding: 0 24px 8px; } .op-hero.has-cover .op-hero-top .op-logo { background: #fff; box-shadow: 0 6px 20px rgba(27,42,47,.12); } .op-usps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } .op-usps li { position: relative; padding: 12px 14px 12px 44px; background: #fff; border: 1px solid var(--vkb-line); border-radius: 12px; font-size: 15px; line-height: 1.45; } .op-usps li::before { content: "✓"; position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--vkb-teal, #1F5E5B); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .op-dest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .op-dest-chips a { padding: 6px 12px; border: 1px solid var(--vkb-line); border-radius: 999px; background: #fff; color: var(--vkb-ink); font-size: 14px; } .op-dest-chips a:hover { border-color: var(--vkb-ink); } @media (max-width: 760px) { .op-usps { grid-template-columns: 1fr; } .op-cover { aspect-ratio: 16 / 8; } .op-hero.has-cover { margin-top: -36px; padding: 0 12px; } } /* 1.13.0 – Premium als uitgelichte kaart boven "Wie biedt X aan?" */ .tag-feat { background: #E3EFEC; color: #1F5E5B; } .ops-featured { display: grid; gap: 16px; margin: 0 0 16px; } .ops-featured.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #fff; border: 1.5px solid var(--vkb-accent); border-radius: var(--vkb-radius); overflow: hidden; box-shadow: 0 10px 28px rgba(27,42,47,.07); } .ops-featured.is-two .ops-feat { grid-template-columns: 1fr; } .ops-feat-media { position: relative; min-height: 220px; } .ops-feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ops-feat-cap { position: absolute; right: 8px; bottom: 8px; font-size: 10.5px; color: #fff; background: rgba(27,42,47,.55); padding: 2px 7px; border-radius: 999px; } .ops-feat-bd { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; } .ops-feat-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vkb-accent-dark, #A8401F); } .ops-feat-head { display: flex; gap: 14px; align-items: center; } .ops-feat-head h3 { margin: 0; font-size: 22px; } .ops-feat-head h3 a { color: var(--vkb-ink); } .ops-feat-head p { margin: 2px 0 0; color: var(--vkb-muted); font-size: 15px; } .ops-feat-usps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; } .ops-feat-usps li { position: relative; padding-left: 24px; } .ops-feat-usps li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #1F5E5B; font-weight: 700; } .ops-feat-meta { margin: 0; font-size: 13.5px; color: var(--vkb-muted); } .ops-feat-acts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 4px; } @media (max-width: 760px) { .ops-feat, .ops-featured.is-two { grid-template-columns: 1fr; } .ops-feat-media { min-height: 180px; } } .ops-featured.is-two .ops-feat-media { min-height: 0; aspect-ratio: 16 / 7; } .ops-featured.is-two .ops-feat { grid-template-rows: auto 1fr; } /* 1.14.0 – fotoverantwoording */ .vkb-credits { font-size: 14px; line-height: 1.8; color: var(--vkb-muted); } .vkb-credits a { color: var(--vkb-ink); } .ops-featured-dir { margin: 0 0 4px; } /* 1.14.6 – rechthoek 300×250 in de tekst */ .ad-inline { margin: 28px 0; display: flex; justify-content: center; } .ad-inline .ad-slot { width: 300px; max-width: 100%; } .ad-inline .ad-promo, .ad-inline .featured-partner { max-width: 360px; } /* 1.17.0 – lesvacances.be (Franse versie) */ .site-logo-fr em { font-family: 'Fraunces Les', var(--vkb-serif); font-style: italic; font-weight: 400; font-size: .66em; color: var(--vkb-accent); margin-right: .1em; letter-spacing: 0; } .site-footer .site-logo-fr em { color: #E58A67; } .lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; margin-left: 10px; } .lang-switch:hover { background: rgba(255,255,255,.12); } html[lang^="fr"] .vkb-answer::before { content: 'Réponse courte'; } /* 1.17.3 */ /* 1.17.13: ruimte tussen de titel en de kaarten van het blok Reisorganisaties onder een artikel. */ .article-partners > .h2 { margin: 0 0 28px; } @media (max-width: 640px) { .article-partners > .h2 { margin-bottom: 20px; } } /* 1.17.16: vervaging aan de rand van de subnavigatie als er nog knoppen verborgen zijn. */ .dest-subnav > .wrap { position: relative; } .dest-subnav > .wrap::before, .dest-subnav > .wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; } .dest-subnav > .wrap::before { left: 0; background: linear-gradient(to left, rgba(246, 241, 233, 0), rgba(246, 241, 233, .98)); } .dest-subnav > .wrap::after { right: 0; background: linear-gradient(to right, rgba(246, 241, 233, 0), rgba(246, 241, 233, .98)); } .dest-subnav.can-left > .wrap::before, .dest-subnav.can-right > .wrap::after { opacity: 1; } .dest-subnav a { padding: 8px 12px; } /* 1.17.16 */ /* 1.17.22 – Wintersport: land > skigebied > dorpen */ .ski-land-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .ski-land { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; border-radius: var(--vkb-radius); overflow: hidden; color: #fff; background: var(--vkb-ink); text-decoration: none; } .ski-land img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .ski-land:hover img { transform: scale(1.04); } .ski-land::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(15,22,25,0) 20%, rgba(15,22,25,.55) 55%, rgba(15,22,25,.92)); } .ski-land:hover { color: #fff; } .ski-land-bd { position: relative; z-index: 1; padding: 18px; display: flex; flex-direction: column; gap: 4px; } .ski-land-title { font-family: var(--vkb-serif); font-size: 28px; font-weight: 600; line-height: 1.05; } .ski-land-for { font-size: 14px; color: #EDE7DD; line-height: 1.4; } .ski-land-sub { font-size: 13px; font-weight: 700; color: #CFE7E2; } .ski-land-go { font-size: 13px; font-weight: 700; margin-top: 6px; } .ski-areas-intro { margin: -12px 0 18px; color: var(--vkb-muted); max-width: 720px; } .ski-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--vkb-line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .ski-tabs::-webkit-scrollbar { display: none; } .ski-tab { appearance: none; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 700; color: var(--vkb-muted); padding: 10px 14px 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; } .ski-tab:hover { color: var(--vkb-ink); } .ski-tab.is-active { color: var(--vkb-ink); border-bottom-color: var(--vkb-accent); } .ski-tab-n { display: inline-block; min-width: 22px; font-size: 12px; font-weight: 700; background: var(--vkb-sand-2); color: var(--vkb-ink-2); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; } .ski-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; } .ski-filter .chip { min-height: 36px; padding: 7px 14px; } .ski-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--vkb-muted); } .ski-sort select { font: inherit; font-size: 14px; color: var(--vkb-ink); border: 1px solid #D9CDBA; background: #FFFCF7; border-radius: 999px; padding: 7px 12px; } .ski-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ski-group + .ski-group { margin-top: 26px; } .ski-group-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vkb-muted); margin: 0 0 10px; } .ski-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .ski-card { display: flex; flex-direction: column; background: var(--vkb-paper); border: 1px solid var(--vkb-line); border-radius: var(--vkb-radius); overflow: hidden; color: var(--vkb-ink); text-decoration: none; transition: box-shadow .2s, transform .2s; } .ski-card:hover { color: var(--vkb-ink); box-shadow: 0 8px 24px rgba(27,42,47,.10); transform: translateY(-2px); } .ski-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--vkb-sand-2); overflow: hidden; } .ski-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ski-tags { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; } .ski-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; background: rgba(255,253,249,.94); color: var(--vkb-ink); border-radius: 6px; padding: 2px 7px; } .ski-tag-gezin { background: #FCEBC4; color: #6E4B00; } .ski-tag-sneeuwzeker { background: var(--vkb-sky); color: var(--vkb-sky-ink); } .ski-card-bd { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; } .ski-card-title { font-family: var(--vkb-serif); font-size: 20px; font-weight: 600; line-height: 1.15; } .ski-card-villages { font-size: 13.5px; color: var(--vkb-ink-2); line-height: 1.4; } .ski-card-for { font-size: 13px; color: var(--vkb-teal); font-weight: 600; } .ski-card-stats { font-size: 12.5px; color: var(--vkb-muted); margin-top: 4px; } .ski-card[hidden], .ski-group[hidden], .ski-panel[hidden] { display: none !important; } .ski-empty { color: var(--vkb-muted); padding: 12px 0; } .ski-panel-more { margin: 22px 0 0; } .ski-note { margin-top: 18px; } .ski-pfilter { margin-bottom: 16px; } .ski-pfilter .chip { min-height: 36px; padding: 7px 14px; } .ski-sorted[hidden], .ski-empty[hidden] { display: none !important; } .ski-pfilter ~ .vkb-more tbody tr[hidden] { display: none !important; } .dest-head-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; } .dest-ski-link { font-size: 14px; font-weight: 700; color: var(--vkb-sky-ink); text-decoration: none; } .dest-ski-link:hover { text-decoration: underline; } .dest-ski { border-top: 1px solid var(--vkb-line); margin-top: 20px; } @media (max-width: 760px) { .ski-land-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ski-land { min-height: 200px; } .ski-land-title { font-size: 22px; } .ski-land-for { display: none; } .ski-land-bd { padding: 12px; } .ski-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ski-card-bd { padding: 10px 12px 12px; } .ski-card-title { font-size: 17px; } .ski-card-for { display: none; } .ski-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .ski-filter .chip { white-space: nowrap; flex: 0 0 auto; } }