/* ========================================================================== Windows DMC — site-wide style (editorial) Loaded on every page (see functions.php). Homepage-only layout lives in home-enhance.css. Principle: photos lead, one type family pair, one brand color, flat surfaces, hover = a quiet color change (no zoom, no movement). ========================================================================== */ :root { --wd-font-head: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --wd-font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --wd-blue: #0358AD; /* brand — buttons, links, active states only */ --wd-blue-dark: #023F7D; --wd-ink: #14171A; /* headings, dark bands */ --wd-body: #3A3F45; /* body copy */ --wd-muted: #6B7178; --wd-line: #E4E1DA; --wd-paper: #F6F4EF; /* warm neutral surface */ --wd-hover-bg: #EEECE7; /* hover surface */ --wd-radius: 8px; --wd-ease: cubic-bezier(.25, .1, .25, 1); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ html body, html body h3, html body h4, html body h5, html body h6, html body .alt-font, html body .nav > li > a, html body .nav-dropdown li a, html body .mobile-sidebar-levels-2 .nav > li > ul > li > a, html body .off-canvas-center .nav-sidebar.nav-vertical > li > a, html body .button, html body button, html body input, html body textarea, html body select { font-family: var(--wd-font); } html body h1, html body h2, html body .heading-font, html body .entry-title { font-family: var(--wd-font-head); } body { color: var(--wd-body); -webkit-font-smoothing: antialiased; } p { line-height: 1.7; } h1, h2, h3 { text-transform: none !important; } /* .uppercase adds wide tracking meant for capitals — headings are no longer uppercased */ h1.uppercase { letter-spacing: -.025em !important; } h2.uppercase { letter-spacing: -.015em !important; } h3.uppercase { letter-spacing: -.005em !important; } h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; } h2 { font-weight: 700; letter-spacing: -.015em; line-height: 1.2; } h2 strong, h1 strong { font-weight: inherit; } h3, h4 { font-weight: 700; letter-spacing: -.005em; line-height: 1.3; } /* Section headings: ink on light surfaces, white on dark ones */ .section h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); margin-bottom: .4em; } .section h2 span { font-size: inherit !important; } /* Sections whose backdrop was a decorative gradient image → paper */ .wd-paper-bg .section-bg { background: var(--wd-paper) !important; } .wd-paper-bg .section-bg img { display: none; } /* Page titles (H1 in the page hero) — one scale on every page. Article titles on single posts use a smaller tier (see Blog). */ html body .section h1, html body .page-hero-title { font-family: var(--wd-font-head); font-size: clamp(2.4rem, 5vw, 4rem) !important; font-weight: 800 !important; line-height: 1.08; letter-spacing: -.025em; margin-bottom: .3em; } /* Small labels */ h4.uppercase, h5.uppercase, h6.uppercase, .is-xsmall.uppercase, .entry-category { font-family: var(--wd-font); font-size: .8125rem !important; font-weight: 700; letter-spacing: .1em; } a { color: var(--wd-blue); } /* -------------------------------------------------------------------------- Buttons — one shape, one weight -------------------------------------------------------------------------- */ .button, input[type="submit"], button[type="submit"] { font-weight: 600; letter-spacing: .01em; text-transform: none !important; border-radius: 99px !important; box-shadow: none !important; transition: background-color .2s var(--wd-ease), color .2s, border-color .2s; } .button.primary, input[type="submit"].button, .wpcf7-submit { background-color: var(--wd-blue); border-color: var(--wd-blue); } .button.primary:hover, input[type="submit"].button:hover, .wpcf7-submit:hover { background-color: var(--wd-blue-dark); border-color: var(--wd-blue-dark); } .button.secondary, .cta-button { background: #fff !important; color: var(--wd-blue) !important; border: 1px solid var(--wd-blue) !important; } .button.secondary:hover, .cta-button:hover { background: var(--wd-blue) !important; color: #fff !important; } .button i { margin-left: 4px; } #main .section .button:not(.icon):not(.circle) { min-height: 44px; padding: 0 26px; line-height: 44px; font-size: .9375rem; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ /* Menu at body size (16px), comfortable spacing */ html body .header-nav-main.nav > li > a { font-weight: 600; font-size: 1rem; letter-spacing: -.005em; } /* Menu centered in the space between logo and buttons, even gaps */ @media (min-width: 850px) { .header-main .flex-col.flex-left { flex: 1 1 auto; padding-right: 30px; } /* mirrors the logo's 30px right margin */ .header-nav-main.nav-left { justify-content: center; gap: 0 clamp(20px, 2.6vw, 40px); } .header-nav-main.nav-left > li { margin: 0; } } .header-nav-main .icon-angle-down { font-size: .8em; opacity: .6; margin-left: 4px; } .header:not(.transparent) .header-nav-main.nav > li > a:hover, .header-wrapper.stuck .header-nav-main.nav > li > a:hover { color: var(--wd-blue); } .header-wrapper.stuck, .header:not(.transparent) .header-main { box-shadow: 0 1px 0 var(--wd-line); } .header-shadow .header-wrapper { box-shadow: none; } /* Header button = same size as buttons in the page (44px) */ html body .header-button .button:not(.icon) { min-height: 44px; line-height: 44px; padding: 0 24px; font-size: .9375rem; } /* Search: 44px circle to match the button */ html body .header-search .button.icon { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; line-height: 42px; border-radius: 50% !important; border: 1px solid var(--wd-line) !important; } html body .header-search .button.icon i { font-size: 17px !important; } .header:not(.transparent) .header-search .button.icon, .header-wrapper.stuck .header-search .button.icon { color: var(--wd-ink); } .header-search .button.icon:hover { border-color: var(--wd-blue) !important; color: var(--wd-blue) !important; background: none !important; } .header-main .nav-right > li { margin-left: 10px; } /* Mega menus (Destinations, Travel Services): identical photo cards, bold titles */ .nav-dropdown > .section { padding: 22px 22px 2px !important; } .nav-dropdown > .section .gap-element { display: none !important; } .nav-dropdown > .section .row { margin-left: -10px !important; margin-right: -10px !important; max-width: none; } .nav-dropdown > .section .row > .col { padding: 0 10px 20px !important; } .nav-dropdown .box-overlay .box-image { border-radius: 10px !important; } .nav-dropdown .box-overlay .overlay { background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .05) 100%) !important; } .nav-dropdown .box-overlay:hover .overlay { background-color: rgba(0, 0, 0, .22) !important; } .nav-dropdown .box-overlay .box-text { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; transform: none !important; padding: 16px 18px !important; text-align: left !important; } .nav-dropdown .box-overlay .box-text p, .nav-dropdown .box-overlay .box-text a { margin: 0; font-family: var(--wd-font-head); font-size: 1.15rem !important; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-transform: none !important; color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .nav-dropdown .box-overlay .box-text a:hover { background: none; } .nav-dropdown { border: 1px solid var(--wd-line); border-radius: var(--wd-radius); box-shadow: 0 12px 24px rgba(20, 23, 26, .08) !important; } .nav-dropdown li a { font-size: 1rem; color: var(--wd-body); } .nav-dropdown li a:hover { color: var(--wd-blue); background: var(--wd-hover-bg); } /* -------------------------------------------------------------------------- Cards — no zoom; hover is a quiet color change -------------------------------------------------------------------------- */ .box-image { border-radius: var(--wd-radius); overflow: hidden; } .image-zoom img, .has-hover:hover .image-zoom img, .image-zoom:hover img { transform: none !important; transition: none !important; } /* ---- Hover rules, one per block type ------------------------------------- 1. Photo + text card → whole tile gets --wd-hover-bg, title turns blue 2. Light text card → background becomes --wd-hover-bg 3. Photo with overlay → overlay deepens slightly 4. On dark surfaces → a faint light wash; titles keep their color Cards in one row always share the same height, so every hover tile matches. -------------------------------------------------------------------------- */ /* Equal heights for rows of cards */ .row:has(> .col > .col-inner > .box:not(.box-overlay):not(.box-shade)), .row:has(> .col > .col-inner[style*="background-color"]) { align-items: stretch !important; } .flickity-slider > .row:has(> .col > .col-inner > .box:not(.box-overlay):not(.box-shade)) { display: flex !important; } /* Before a slider/carousel initialises (Flatsome does it lazily, when it scrolls into view) show only its first slide, so sections already have their final height and the page doesn't shrink while the visitor scrolls. */ html body .slider:not(.flickity-enabled) > :not(:first-child), html body .carousel:not(.flickity-enabled) > :not(:first-child) { display: none !important; } html body .slider:not(.flickity-enabled) > .row:first-child { display: flex !important; margin-inline: auto; width: 100%; max-width: 1170px !important; white-space: normal; } .row:has(> .col > .col-inner > .box:not(.box-overlay):not(.box-shade)) > .col, .row:has(> .col > .col-inner[style*="background-color"]) > .col { display: flex; } .row:has(> .col > .col-inner > .box:not(.box-overlay):not(.box-shade)) > .col > .col-inner, .row:has(> .col > .col-inner[style*="background-color"]) > .col > .col-inner { flex: 1 1 auto; display: flex; flex-direction: column; } .col-inner > .box:not(.box-overlay):not(.box-shade) { flex: 1 1 auto; } /* 1. Photo + text tiles */ #main .box.has-hover:not(.box-overlay):not(.box-shade) { margin: -12px; padding: 12px; border-radius: 12px; transition: background-color .2s var(--wd-ease); } #main .slider .box.has-hover:not(.box-overlay):not(.box-shade) { margin: 0; } /* sliders clip outside edges */ #main .box.has-hover:not(.box-overlay):not(.box-shade):hover { background-color: var(--wd-hover-bg); } .box .box-text h3, .box .box-text h4, .box .box-text h5, .box .box-text a { transition: color .2s var(--wd-ease); } #main .box:not(.box-overlay):not(.box-shade):hover .box-text :is(h3, h4, h5) { color: var(--wd-blue) !important; } /* 2. Light text cards (paper / white backgrounds) */ #main .col-inner:is([style*="#F6F4EF"], [style*="rgb(255, 255, 255)"], [style*="rgb(255,255,255)"], [style*="rgb(246, 244, 239)"]) { transition: background-color .2s var(--wd-ease); } #main .col-inner:is([style*="#F6F4EF"], [style*="rgb(255, 255, 255)"], [style*="rgb(255,255,255)"], [style*="rgb(246, 244, 239)"]):hover { background-color: var(--wd-hover-bg) !important; } /* 3. Photos with overlay */ .box-overlay .overlay, .box-shade .overlay { transition: background-color .2s var(--wd-ease); } .box-overlay:hover .overlay { background-color: rgba(0, 0, 0, .5) !important; } /* News grid on destination pages ([custom_news]) */ .news-item .news-image { position: relative; } .news-item .news-image::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .2s var(--wd-ease); pointer-events: none; border-radius: 10px; } .news-item:hover .news-image::after { opacity: 1; } .news-item .news-content { pointer-events: none; } .news-item .news-content a { pointer-events: auto; } .news-item .news-title a { font-family: var(--wd-font-head); } .featured-post-item .featured-post-overlay { transition: background-color .2s var(--wd-ease); } .featured-post-item:hover .featured-post-overlay { background-color: rgba(0, 0, 0, .55) !important; } /* 4. Dark surfaces */ /* (boxes sitting directly on the dark surface — not inside a light card) */ #main .wd-dark-bg .col-inner:not([style*="background-color"]) > .box.has-hover:not(.box-overlay):not(.box-shade):hover { background-color: rgba(255, 255, 255, .06); } #main .wd-dark-bg .col-inner:not([style*="background-color"]) > .box:not(.box-overlay):not(.box-shade):hover .box-text :is(h3, h4, h5) { color: inherit !important; } #main .wd-dark-bg .col-inner[style*="background-color"] > .box.has-hover:hover { background-color: transparent; } /* Custom tour cards ([tours] shortcode) */ .tour-item { box-shadow: none !important; border: 1px solid var(--wd-line); border-radius: 12px !important; transition: background-color .2s var(--wd-ease); } .tour-item:hover { background-color: var(--wd-hover-bg); } .tour-item h3 a { color: var(--wd-ink); transition: color .2s; } .tour-item:hover h3 a { color: var(--wd-blue); } .tour-length-overlay { background: var(--wd-ink) !important; border-radius: 99px; } /* Flatten decorative shadows */ .box-shadow-1, .box-shadow-1-hover:hover, .row-box-shadow-1 .col-inner, .row-box-shadow-1-hover .col-inner:hover { box-shadow: none !important; border-color: var(--wd-line) !important; } /* Slider controls */ .flickity-page-dots .dot { border-color: var(--wd-ink) !important; background-color: transparent; opacity: .35; } .flickity-page-dots .dot.is-selected { background-color: var(--wd-ink) !important; opacity: 1; } .flickity-prev-next-button { color: var(--wd-ink) !important; } /* Tabs → underlined text labels */ .tabbed-content > .nav-outline > li > a, .tabbed-content > .nav-line > li > a, .tabbed-content > .nav-pills > li > a { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; background: none !important; color: var(--wd-muted); letter-spacing: .04em; transition: color .2s, border-color .2s; } .tabbed-content > .nav > li > a:hover { color: var(--wd-ink); } .tabbed-content > .nav > li.active > a { color: var(--wd-ink) !important; border-bottom-color: var(--wd-blue) !important; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select, .form-flat input:not([type="submit"]), .form-flat textarea, .form-flat select { background-color: #fff !important; border: 1px solid var(--wd-line) !important; border-radius: var(--wd-radius) !important; box-shadow: none !important; color: var(--wd-ink); font-size: .9375rem; transition: border-color .2s; } input:focus, textarea:focus, select:focus, .form-flat input:focus, .form-flat textarea:focus { border-color: var(--wd-blue) !important; box-shadow: 0 0 0 3px rgba(3, 88, 173, .12) !important; } input:not([type="submit"]), select { min-height: 46px; } label { font-weight: 600; color: var(--wd-ink); font-size: .875rem; } /* -------------------------------------------------------------------------- Blog + single post -------------------------------------------------------------------------- */ .single-post .entry-title { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; color: var(--wd-ink); } .single-post .entry-divider { display: none; } .single-post .entry-content { font-size: 1.0625rem; color: var(--wd-body); } .single-post .entry-content p { line-height: 1.8; } .single-post .entry-content h2 { font-size: 1.6rem; margin: 1.6em 0 .6em; color: var(--wd-ink); } .single-post .entry-content h3 { font-size: 1.25rem; margin: 1.4em 0 .5em; color: var(--wd-ink); } .single-post .entry-content img, .single-post .entry-image img { border-radius: var(--wd-radius); } .single-post .entry-content strong { color: var(--wd-ink); } .comment-respond { background: var(--wd-paper) !important; border-radius: 12px; padding: 32px !important; } .featured-post-title, .featured-post-title a { font-family: var(--wd-font-head); font-weight: 700; } .post-item .post-title, .post-title { font-family: var(--wd-font); font-weight: 700; color: var(--wd-ink); } .post-item:hover .post-title { color: var(--wd-blue); } /* -------------------------------------------------------------------------- Tour detail page -------------------------------------------------------------------------- */ .single-tour .text > h2 { color: var(--wd-ink) !important; } .single-tour .request-form .col-inner { background: var(--wd-paper) !important; border: 1px solid var(--wd-line); border-radius: 12px !important; } .single-tour .request-form h4 { font-family: var(--wd-font-head); font-size: 1.35rem; color: var(--wd-ink); } .single-tour .request-form h5 { font-weight: 500; color: var(--wd-body); line-height: 1.5; } #expand-all, #hide-all { min-height: 40px; padding: 0 20px !important; border-radius: 99px !important; background-color: var(--wd-ink) !important; font-family: var(--wd-font); font-weight: 600; font-size: .875rem; text-transform: none; } #expand-all:hover, #hide-all:hover { background-color: var(--wd-blue) !important; } .single-tour .ux-accordion { border-radius: var(--wd-radius); } /* -------------------------------------------------------------------------- Destination: in-page menu → floating bar under the sticky header (built by assets/js/destination-subnav.js) -------------------------------------------------------------------------- */ .wd-subnav { position: fixed; left: 0; right: 0; top: 0; z-index: 29; /* just below Flatsome's sticky header (30) */ background: #fff; border-bottom: 1px solid var(--wd-line); box-shadow: 0 6px 16px rgba(20, 23, 26, .05); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .25s var(--wd-ease), opacity .2s, visibility 0s .25s; } .wd-subnav.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform .25s var(--wd-ease), opacity .2s, visibility 0s; } .wd-subnav__inner { display: flex; justify-content: center; gap: clamp(20px, 3vw, 40px); max-width: 1270px; margin: 0 auto; padding: 0 16px; overflow-x: auto; scrollbar-width: none; } .wd-subnav__inner::-webkit-scrollbar { display: none; } .wd-subnav a { flex: 0 0 auto; padding: 15px 0 13px; border-bottom: 2px solid transparent; font-family: var(--wd-font); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wd-muted); transition: color .2s, border-color .2s; } .wd-subnav a:hover { color: var(--wd-ink); } .wd-subnav a.is-active { color: var(--wd-ink); border-bottom-color: var(--wd-blue); } @media (max-width: 849px) { .wd-subnav__inner { justify-content: flex-start; } } /* Destination closing CTA (functions.php → wd_destination_cta) */ .wd-dest-cta { margin-top: clamp(32px, 5vw, 64px); } .wd-dest-cta .text-box { text-align: center; } .wd-dest-cta h2 { font-weight: 700 !important; color: #fff !important; font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important; margin-bottom: .35em; } .wd-dest-cta .wd-dest-cta__lead { color: rgba(255, 255, 255, .9); font-size: 1.15rem; line-height: 1.6; max-width: 36em; margin: 0 auto 1.6em; } #main .section.wd-dest-cta .button:not(.icon):not(.circle) { box-sizing: border-box; height: 50px; min-height: 0; line-height: 46px; padding: 0 32px; font-size: 1rem; font-weight: 600; margin: 6px 6px 0; border-width: 2px; } #main .wd-dest-cta .button.is-outline:hover { background: #fff; color: var(--wd-ink); border-color: #fff; } /* -------------------------------------------------------------------------- Reusable content pieces (service pages and beyond) -------------------------------------------------------------------------- */ .wd-eyebrow { margin-bottom: .7em !important; font-family: var(--wd-font); font-size: .8125rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wd-blue); } .dark .wd-eyebrow { color: rgba(255, 255, 255, .85); } .wd-lead { font-size: 1.2rem; line-height: 1.6; color: var(--wd-body); } .dark .wd-lead { color: rgba(255, 255, 255, .92); } .wd-step-num { margin-bottom: .4em !important; font-family: var(--wd-font-head); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--wd-blue); } .wd-contact-line { margin-bottom: 1em; } .wd-contact-line strong { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wd-ink); } .wd-contact-line a { font-size: 1.15rem; font-weight: 600; } /* Service page layout */ .wd-service-hero .text-box { text-align: center; } .wd-service-hero .wd-lead { max-width: 34em; margin-inline: auto; } .wd-service-intro, .wd-service-list, .wd-service-form, .wd-service-included { padding-block: clamp(48px, 6vw, 84px) calc(clamp(48px, 6vw, 84px) - 30px) !important; } .wd-service-intro h2 { margin-bottom: 0; } .wd-service-list .box-text { padding-top: 16px !important; text-align: left; } .wd-service-list .box-text h3 { font-size: 1.25rem; margin-bottom: .4em; } .wd-service-list .box-text p { font-size: 1rem; color: var(--wd-body); } .wd-service-included .col-inner[style*="background-color"] { border-radius: var(--wd-radius) !important; } .wd-service-included h3 { font-size: 1.15rem; margin-bottom: .4em; } .wd-service-included p { font-size: 1rem; color: var(--wd-body); } /* "Our travel services": current page shown but not clickable */ .wd-service-all .wd-current .box { cursor: default; } .wd-service-all .wd-current .box-image { outline: 2px solid var(--wd-blue); outline-offset: 3px; } .wd-service-all .wd-current .box:hover { background: none !important; } .wd-service-all .wd-current .box:hover .box-text h3 { color: var(--wd-ink) !important; } .wd-service-all .wd-current-label { margin: 0; font-size: .75rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-blue) !important; } .wd-service-steps { padding-block: clamp(48px, 6vw, 84px) calc(clamp(48px, 6vw, 84px) - 30px) !important; border-radius: 26px; overflow: hidden; } .wd-service-steps h3 { font-size: 1.2rem; } .wd-service-steps .col-inner[style*="background-color"] { border: 1px solid var(--wd-line); border-radius: var(--wd-radius) !important; } .wd-service-why { padding-block: clamp(48px, 6vw, 84px) calc(clamp(48px, 6vw, 84px) - 30px) !important; } .wd-service-why h3 { font-size: 1.1rem; color: #fff; margin: 1em 0 .4em; } .wd-service-why p { color: rgba(255, 255, 255, .8); font-size: .9375rem; } .wd-service-form .col-inner[style*="background-color"] { border-radius: 12px !important; } .wd-service-form .col-inner[style*="background-color"]:hover { background-color: var(--wd-paper) !important; } /* form card: no hover tint */ /* -------------------------------------------------------------------------- Travel Themes pages (Leisure Tours, MICE, Education Tours) -------------------------------------------------------------------------- */ .wd-theme-journeys, .wd-theme-offer, .wd-why2 { padding-top: clamp(48px, 6vw, 84px) !important; padding-bottom: calc(clamp(48px, 6vw, 84px) - 30px) !important; } .wd-section-intro { max-width: 40em; margin: -.2em auto 0; color: var(--wd-muted); font-size: 1.0625rem; } /* Key facts under the intro */ .wd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--wd-line); } .wd-fact__value { margin: 0 0 4px !important; font-family: var(--wd-font-head); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; line-height: 1.1; color: var(--wd-blue); } .wd-fact__label { margin: 0 !important; color: var(--wd-muted); font-size: .9375rem; line-height: 1.5; } @media (max-width: 549px) { .wd-facts { grid-template-columns: 1fr; gap: 16px; } } /* Journey cards: portrait photo, title; description slides up on hover */ .wd-journey { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--wd-ink); color: #fff; } .wd-journey__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wd-journey::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .05) 100%); transition: background-color .25s var(--wd-ease); } .wd-journey:hover::after { background-color: rgba(0, 0, 0, .25); } .wd-journey__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 22px 20px; } .wd-journey__meta { margin: 0 0 6px !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .wd-journey__title { margin: 0 !important; font-family: var(--wd-font-head); font-size: 1.3rem !important; font-weight: 700; line-height: 1.2; color: #fff !important; } .wd-journey__desc { margin: 0 !important; max-height: 0; opacity: 0; overflow: hidden; font-size: .9375rem; line-height: 1.55; color: rgba(255, 255, 255, .9); transition: max-height .35s var(--wd-ease), opacity .25s var(--wd-ease), margin .35s var(--wd-ease); } .wd-journey:hover .wd-journey__desc, .wd-journey:focus-visible .wd-journey__desc { max-height: 9em; opacity: 1; margin-top: 10px !important; } @media (hover: none) { .wd-journey__desc { max-height: none; opacity: 1; margin-top: 6px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } @media (max-width: 549px) { .wd-journey__body { padding: 14px 14px 13px; } .wd-journey__title { font-size: 1.02rem !important; } .wd-journey__meta { font-size: .72rem; letter-spacing: .06em; margin-bottom: 4px !important; } .wd-journey__desc { font-size: .8125rem; line-height: 1.4; } } /* What We Offer — Leisure: travel style tiles + "every journey includes" */ .wd-offer-leisure-tours .box-overlay .box-image { border-radius: 12px !important; } .wd-offer-leisure-tours .box-overlay .overlay { background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .15) 60%) !important; } .wd-offer-leisure-tours .box-overlay .box-text { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; transform: none !important; padding: 20px 22px !important; text-align: left !important; } .wd-offer-leisure-tours .box-text h3 { margin: 0 0 4px; font-family: var(--wd-font-head); font-size: 1.3rem !important; color: #fff !important; } .wd-offer-leisure-tours .box-text p { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .88) !important; } .wd-includes { background: var(--wd-paper); border-radius: 12px; padding: 28px 32px 16px; } .wd-includes__title { margin-bottom: 14px !important; font-family: var(--wd-font-head); font-size: 1.2rem; font-weight: 700; color: var(--wd-ink); } .wd-includes ul, .wd-ticks { list-style: none; margin: 0; padding: 0; } .wd-includes ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 24px; } .wd-includes li, .wd-ticks li { position: relative; margin: 0 0 12px; padding-left: 26px; color: var(--wd-body); line-height: 1.5; } .wd-includes li::before, .wd-ticks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2px solid var(--wd-blue); border-bottom: 2px solid var(--wd-blue); transform: rotate(-45deg); } @media (max-width: 849px) { .wd-includes ul { grid-template-columns: 1fr; } } /* What We Offer — MICE: M · I · C · E columns + strip */ .wd-letter { margin: 0 0 6px !important; font-family: var(--wd-font-head); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--wd-blue); } .wd-offer-mice h3 { font-size: 1.25rem; margin-bottom: .4em; } .wd-offer-mice .col-inner[style*="background-color"] { border-radius: 12px !important; } .wd-ticks { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wd-line); } .wd-ticks li { font-size: .9375rem; margin-bottom: 8px; } .wd-strip { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--wd-line); border-radius: 12px; } .wd-strip > div { padding: 24px 28px; } .wd-strip > div + div { border-left: 1px solid var(--wd-line); } .wd-strip p { margin: 0; color: var(--wd-body); } .wd-strip__title { margin-bottom: 4px !important; font-family: var(--wd-font-head); font-size: 1.15rem; font-weight: 700; color: var(--wd-ink) !important; } @media (max-width: 849px) { .wd-strip { grid-template-columns: 1fr; } .wd-strip > div + div { border-left: 0; border-top: 1px solid var(--wd-line); } } /* What We Offer — Education: photo + numbered programme list */ .wd-offer-education-tours .img-inner, .wd-offer-education-tours .img img { border-radius: 12px; } .wd-numbered { counter-reset: wd; list-style: none; margin: 0; padding: 0; } .wd-numbered li { counter-increment: wd; position: relative; margin: 0; padding: 16px 0 12px 64px; border-bottom: 1px solid var(--wd-line); } .wd-numbered li:last-child { border-bottom: 0; } .wd-numbered li::before { content: counter(wd, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--wd-font-head); font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--wd-blue); } .wd-numbered h3 { margin: 0 0 4px; font-size: 1.15rem; } .wd-numbered p { margin: 0; color: var(--wd-body); } /* Why Windows DMC — story + figures | detailed cards */ .wd-why2 h2 { color: #fff !important; } .wd-why2 .wd-lead { color: rgba(255, 255, 255, .85) !important; font-size: 1.1rem; } .wd-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15); } .wd-figure__value { margin: 0 0 2px !important; font-family: var(--wd-font-head); font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: #fff; } .wd-figure__label { margin: 0 !important; font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .7); } .wd-why2 .row-inner > .col > .col-inner, .wd-why2 .col-inner.wd-why2-card { height: 100%; } .wd-why2 .row .row > .col > .col-inner { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; transition: background-color .2s var(--wd-ease); } .wd-why2 .row .row > .col > .col-inner:hover { background: rgba(255, 255, 255, .1); } .wd-why2 .row .row > .col { display: flex; } .wd-why2 .row .row > .col > .col-inner { flex: 1 1 auto; } .wd-why2 h3 { margin: 14px 0 6px; font-size: 1.1rem; color: #fff; } .wd-why2 .featured-box p { font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .78); } .wd-why2 .icon-box { text-align: left !important; } .wd-why2 .icon-box-img { margin: 0 !important; } /* -------------------------------------------------------------------------- Destination pages — same building blocks as the service pages (sections tagged in functions.php by their UX Builder label) -------------------------------------------------------------------------- */ .wd-eyebrow--center { text-align: center; } /* Page hero — one standard for every inner page (destinations, about, contact, tours; service pages use the same size via their banner): 480px / 460px mobile, dark overlay, centered eyebrow + title + description. */ .wd-page-hero { min-height: 480px !important; display: flex !important; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; } .wd-page-hero > .section-content { width: 100%; } .wd-page-hero .gap-element { display: none !important; } .wd-page-hero .section-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } .wd-page-hero .text, .wd-page-hero .text-inner { text-align: center !important; } .wd-page-hero .wd-eyebrow { color: rgba(255, 255, 255, .85) !important; } .wd-page-hero h1 { color: #fff !important; } .wd-page-hero .wd-lead, .wd-page-hero .text p:not(.wd-eyebrow) { max-width: 36em; margin: 0 auto; font-size: 1.2rem !important; line-height: 1.6; color: rgba(255, 255, 255, .92) !important; } .wd-page-hero .row > .col { padding-bottom: 0 !important; } /* in-hero anchor menus become the floating bar (destination-subnav.js) */ .wd-page-hero .row:has(a[href^="#"]):not(:has(h1)) { display: none !important; } @media (max-width: 549px) { .wd-page-hero { min-height: 460px !important; } } /* Tour pages: the template's banner sets the height */ .wd-tour-hero > .section-content > .row { max-width: none; } .wd-tour-hero .banner { padding-top: 480px !important; } @media (max-width: 549px) { .wd-tour-hero .banner { padding-top: 460px !important; } #text-box-88531752 { width: 92% !important; } } /* Service pages: banner already 480/460 — drop the column's extra 30px */ .wd-service-hero .row > .col { padding-bottom: 0 !important; } /* Contact page: map + form styled like the service-page form block */ .wd-contact-content .col .is-border { display: none; } /* old blue outlines */ .wd-contact-content .col:has(iframe) > .col-inner { padding: 0 !important; margin-bottom: 24px; } .wd-contact-content iframe { display: block; border-radius: 12px; } .wd-contact-content .col:has(form) > .col-inner { background: var(--wd-paper); border-radius: 12px; padding: 36px 36px 20px !important; } .wd-contact-info .icon-box-text h3, .wd-contact-info .icon-box-text h4 { color: #fff; } /* Pages with the floating in-page bar don't need Flatsome's scroll-to dots */ body:has(.wd-page-hero .row a[href^="#"]) .scroll-to-bullets { display: none !important; } /* About page — icons are multi-colour PNGs: recolour them to the palette (brand blue on light surfaces, white on dark ones) */ :root { --wd-icon-blue: brightness(0) saturate(100%) invert(73%) sepia(40%) saturate(5183%) hue-rotate(184deg) brightness(61%) contrast(168%); } .wd-about-our-values .box-image img, .wd-about-industry-recognition .icon-box-img img { filter: var(--wd-icon-blue); } .wd-about-our-values .box-image, .wd-about-why-choose-us .box-image { margin-bottom: 8px; } /* About — Our Values: breathing room between card title and list */ .wd-about-our-values h3 { margin: 6px 0 .8em !important; line-height: 1.3; } .wd-about-our-values ul { margin-top: 0; } .wd-about-our-values li { margin-bottom: .5em; } /* About — Why Choose Us: light surface, white cards, brand-blue icons */ .wd-about-why-choose-us { background-color: var(--wd-paper) !important; } .wd-about-why-choose-us .section-bg { background: var(--wd-paper) !important; } .wd-about-why-choose-us h2 { color: var(--wd-ink) !important; } .wd-about-why-choose-us .box-image img { filter: var(--wd-icon-blue); } .wd-about-why-choose-us .col-inner:has(> .box) { height: 100%; padding: 32px 26px 20px !important; background: #fff; border: 1px solid var(--wd-line); border-radius: 12px; transition: background-color .2s var(--wd-ease); } .wd-about-why-choose-us .col-inner:has(> .box):hover { background: var(--wd-hover-bg); } .wd-about-why-choose-us .col:has(> .col-inner > .box) { display: flex; } .wd-about-why-choose-us .col:has(> .col-inner > .box) > .col-inner { flex: 1 1 auto; } .wd-about-why-choose-us .box:hover { background: none !important; } .wd-about-why-choose-us h3, .wd-about-why-choose-us h3 span { margin-bottom: .5em; font-size: 1.2rem; color: var(--wd-ink) !important; } .wd-about-why-choose-us .text, .wd-about-why-choose-us .text p { color: var(--wd-body) !important; } /* About — Our Expertise: title rests at the bottom; on hover the text slides up and the list is revealed (same behaviour as the journey cards) */ .wd-about-our-expertise .banner { padding-top: 440px !important; border-radius: 12px; overflow: hidden; } .wd-about-our-expertise .banner-bg img { border-radius: 12px; } .wd-about-our-expertise .banner-bg::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .05) 100%); transition: background-color .25s var(--wd-ease); } .wd-about-our-expertise .banner:hover .banner-bg::after { background-color: rgba(0, 0, 0, .35); } .wd-about-our-expertise .text-box { top: auto !important; bottom: 22px !important; left: 0 !important; right: 0 !important; width: auto !important; margin: 0 22px; transform: none !important; } .wd-about-our-expertise .text-box .text { font-size: 1rem !important; } .wd-about-our-expertise h3 { margin: 0 !important; font-family: var(--wd-font-head); font-size: 1.35rem !important; line-height: 1.2; color: #fff !important; } .wd-about-our-expertise ul { margin: 0; padding-left: 1.1em; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--wd-ease), opacity .3s var(--wd-ease), margin .4s var(--wd-ease); } .wd-about-our-expertise .banner:hover ul { max-height: 16em; opacity: 1; margin-top: 12px; } .wd-about-our-expertise li { margin-bottom: .45em; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .92); } .wd-about-our-expertise .col-inner { background: none !important; } @media (hover: none) { .wd-about-our-expertise ul { max-height: none; opacity: 1; margin-top: 10px; } } /* Generic section rhythm for tagged page sections */ .wd-sec { padding-top: clamp(48px, 6vw, 84px) !important; padding-bottom: calc(clamp(48px, 6vw, 84px) - 30px) !important; } .wd-sec.wd-dest-cta { padding: 0 !important; } /* Section rhythm */ .wd-dest-overview, .wd-dest-attractions, .wd-dest-cities, .wd-dest-journeys, .wd-dest-news { padding-top: clamp(48px, 6vw, 84px) !important; padding-bottom: calc(clamp(48px, 6vw, 84px) - 30px) !important; } .wd-dest-overview .gap-element { display: none !important; } /* Overview: tagline now lives in the hero; intro reads as a lead */ .wd-dest-overview .overview-heading-text { line-height: 1.2 !important; } .wd-dest-overview .overview-heading-text + .text:has(> p > em) { display: none; } .wd-dest-overview .overview-heading-text ~ .text p { font-size: 1.125rem; line-height: 1.7; max-width: 52em; margin-inline: auto; } /* Main cities: 8 cities, 4 per row — photo cards styled like the mega menu cards */ .wd-city-grid > .row { margin-bottom: 0; } .wd-city-grid > .row > .col:nth-of-type(n+5) { display: none; } /* max 4 per row → 8 cities */ .wd-city-grid .box-overlay .box-image { border-radius: 10px !important; } .wd-city-grid .box-overlay .overlay { background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, .05) 100%) !important; } .wd-city-grid .box-overlay:hover .overlay { background-color: rgba(0, 0, 0, .22) !important; } .wd-city-grid .box-overlay .box-text { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0; right: 0; transform: none !important; padding: 18px 20px !important; text-align: left !important; } .wd-city-grid .box-text p { margin: 0; color: #fff !important; } .wd-city-grid .box-text p.lead { font-family: var(--wd-font-head); font-size: 1.25rem !important; font-weight: 700; letter-spacing: -.01em; text-transform: none !important; line-height: 1.2; margin-bottom: 4px; } .wd-city-grid .box-text p em { font-style: normal; font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .85); } /* Key facts table → card */ .wd-dest-overview table.table1 { width: 100%; margin-bottom: 24px; border-collapse: separate; border-spacing: 0; background: var(--wd-paper); border-radius: 12px; padding: 8px 22px; } .wd-dest-overview table.table1 td { padding: 13px 0; border-bottom: 1px solid var(--wd-line); vertical-align: top; color: var(--wd-ink); font-weight: 600; font-size: .9375rem; } .wd-dest-overview table.table1 tr:last-child td { border-bottom: 0; } .wd-dest-overview table.table1 td:first-child { padding-right: 16px; } .wd-dest-overview table.table1 td:first-child, .wd-dest-overview table.table1 td:first-child * { font-size: .75rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-muted) !important; } /* -------------------------------------------------------------------------- Blog — card grid, sidebar contact card, post meta, related articles -------------------------------------------------------------------------- */ .wd-post-grid { display: grid; gap: 32px 28px; } .wd-post-grid--2 { grid-template-columns: repeat(2, 1fr); } .wd-post-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 849px) { .wd-post-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 549px) { .wd-post-grid--2, .wd-post-grid--3 { grid-template-columns: 1fr; } } .wd-post-card { position: relative; margin: -12px; padding: 12px; border-radius: 14px; transition: background-color .2s var(--wd-ease); } .wd-post-card:hover { background: var(--wd-hover-bg); } .wd-post-card__media { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--wd-paper); } .wd-post-card__img { display: block; width: 100%; height: 100%; object-fit: cover; } .wd-post-card__body { padding: 16px 4px 4px; } .wd-post-card__cat { margin: 0 0 6px !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-blue); } .wd-post-card__title { margin: 0 0 8px; font-family: var(--wd-font-head); font-size: 1.2rem !important; font-weight: 700; line-height: 1.3; } .wd-post-card__title a { color: var(--wd-ink); transition: color .2s var(--wd-ease); } .wd-post-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */ .wd-post-card:hover .wd-post-card__title a { color: var(--wd-blue); } .wd-post-card__excerpt { margin: 0 0 10px !important; font-size: .9375rem; line-height: 1.6; color: var(--wd-body); } .wd-post-card__meta { margin: 0 !important; font-size: .8125rem; color: var(--wd-muted); } .blog-archive #post-list, .archive #post-list { padding-top: 8px; } /* Blog archive: horizontal cards */ .wd-post-list { display: flex; flex-direction: column; gap: 56px; } /* ≈32px between cards (cards bleed 12px each side) */ .wd-post-card--row { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 28px; align-items: center; } .wd-post-card--row .wd-post-card__body { padding: 4px 8px 4px 0; } .wd-post-card--row .wd-post-card__title { font-size: 1.4rem !important; margin-bottom: 10px; } .wd-post-card--row .wd-post-card__excerpt { margin-bottom: 12px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wd-post-card__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; } .wd-post-card__meta .sep { color: var(--wd-line); } .wd-post-list .wd-post-card + .wd-post-card::before { content: ""; position: absolute; left: 12px; right: 12px; top: -16px; border-top: 1px solid var(--wd-line); /* centred in the gap */ } .wd-post-list .wd-post-card:hover::before, .wd-post-list .wd-post-card:hover + .wd-post-card::before { opacity: 0; } @media (max-width: 549px) { .wd-post-list { gap: 48px; } .wd-post-card--row { grid-template-columns: 1fr; gap: 0; } .wd-post-card--row .wd-post-card__body { padding: 16px 4px 4px; } .wd-post-card--row .wd-post-card__title { font-size: 1.2rem !important; } } /* Sidebar: contact card */ .post-sidebar .widget { margin-bottom: 28px; } .wd-sidebar-contact { padding: 28px 26px 26px; background: var(--wd-paper); border-radius: 14px; } .wd-sidebar-contact h3 { margin: 0 0 .5em; font-family: var(--wd-font-head); font-size: 1.35rem; color: var(--wd-ink); } .wd-sidebar-contact > p { font-size: .9375rem; color: var(--wd-body); } .wd-sidebar-contact__list { list-style: none; margin: 18px 0 22px; padding: 0; } .wd-sidebar-contact__list li { margin: 0; padding: 12px 0; border-top: 1px solid var(--wd-line); font-size: .9375rem; line-height: 1.5; color: var(--wd-ink); } .wd-sidebar-contact__list span { display: block; margin-bottom: 2px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-muted); } .wd-sidebar-contact__list a { font-weight: 600; } .wd-sidebar-contact__btn { width: 100%; margin: 0 !important; min-height: 46px; line-height: 46px; } /* Sidebar sized for a 300×250 banner: 300px content + 30px column padding each side */ @media (min-width: 850px) { .row:has(> .post-sidebar) > .large-9 { flex: 1 1 auto; max-width: calc(100% - 360px); } .row:has(> .post-sidebar) > .post-sidebar { flex: 0 0 360px; max-width: 360px; } } .post-sidebar .widget img { max-width: 100%; height: auto; } /* Breadcrumb */ .wd-breadcrumb { margin: 0 0 22px; font-size: .875rem; color: var(--wd-muted); } .wd-breadcrumb a { color: var(--wd-muted); } .wd-breadcrumb a:hover { color: var(--wd-blue); text-decoration: underline; text-underline-offset: 3px; } .wd-breadcrumb .breadcrumb_last, .wd-breadcrumb span:last-child { color: var(--wd-ink); } .wd-breadcrumb .sep, .wd-breadcrumb > span > span:not(:last-child) { color: var(--wd-line); } .wd-breadcrumb-col { padding-bottom: 18px !important; padding-top: 28px !important; } .wd-breadcrumb-col .wd-breadcrumb { margin-bottom: 0; } /* Previous / next article */ .wd-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; } .wd-post-nav__item { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--wd-line); border-radius: 12px; transition: background-color .2s var(--wd-ease); } .wd-post-nav__item:hover { background: var(--wd-hover-bg); } .wd-post-nav__item.is-next { flex-direction: row-reverse; text-align: right; } .wd-post-nav__item--empty { border: 0; } .wd-post-nav__img { flex: 0 0 72px; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; } .wd-post-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .wd-post-nav__label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wd-muted); } .wd-post-nav__title { font-family: var(--wd-font-head); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--wd-ink); transition: color .2s; } .wd-post-nav__item:hover .wd-post-nav__title { color: var(--wd-blue); } @media (max-width: 549px) { .wd-post-nav { grid-template-columns: 1fr; } .wd-post-nav__item--empty { display: none; } } /* Single post */ .single-post .entry-header-text { padding-bottom: 8px; } .single-post .entry-meta { text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; } .wd-post-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; color: var(--wd-muted); } .wd-post-meta a { color: var(--wd-ink); font-weight: 600; } .wd-post-meta .sep { color: var(--wd-line); } .single-post .entry-header .entry-meta, .single-post .entry-header .entry-divider { margin-top: 10px; } .single-post .entry-image { margin-top: 18px; } .single-post .entry-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; } .single-post .article-inner { max-width: none; } .single-post .entry-content { max-width: 760px; } .wd-related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--wd-line); } .wd-related__title { margin-bottom: 24px; font-size: 1.6rem !important; color: var(--wd-ink); } .wd-related .wd-post-card__title { font-size: 1.05rem !important; } /* -------------------------------------------------------------------------- Search results, pagination, 404 -------------------------------------------------------------------------- */ .wd-search-head { padding-top: 32px !important; padding-bottom: 12px !important; } .wd-search-title { margin: 0 0 18px; font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; font-weight: 800; color: var(--wd-ink); } .wd-search-form { display: flex; gap: 10px; max-width: 640px; margin: 0; } .wd-search-form input[type="search"] { flex: 1 1 auto; margin: 0; min-height: 50px; padding: 0 18px; border-radius: 99px !important; font-size: 1rem; } .wd-search-form .button { margin: 0; min-height: 50px; line-height: 50px; padding: 0 28px; } .wd-search-count { margin: 0 0 18px !important; font-size: .9375rem; color: var(--wd-muted); } .wd-result__type { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-blue); } .wd-result__type .sep { color: var(--wd-line); } .wd-result .wd-post-card__title { font-size: 1.3rem !important; } .wd-post-card__img--empty { display: block; width: 100%; height: 100%; background: var(--wd-paper); } /* Filter sidebar */ .wd-filter { padding: 22px 22px 14px; border: 1px solid var(--wd-line); border-radius: 14px; } .wd-filter__title { margin: 0 0 10px !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-muted); } .wd-filter ul { list-style: none; margin: 0; padding: 0; } .wd-filter li { margin: 0; padding: 0 !important; border: 0 !important; list-style: none; } .wd-filter a { display: flex !important; width: auto; justify-content: space-between; align-items: center; margin: 0 -10px; padding: 9px 10px; border-radius: 8px; color: var(--wd-ink); font-weight: 600; transition: background-color .2s; } .wd-filter a { padding: 9px 10px !important; } .wd-filter a:hover { background: var(--wd-hover-bg); } /* Mobile: filter moves above the results as a swipeable row of pills */ @media (max-width: 849px) { .wd-search-page .row-large > .post-sidebar { order: -1; } .wd-search-page .post-sidebar .widget:not(.wd-filter) { display: none; } .wd-filter { padding: 0; border: 0; margin-bottom: 8px; } .wd-filter__title { display: none; } .wd-filter ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .wd-filter ul::-webkit-scrollbar { display: none; } .wd-filter a { margin: 0; gap: 8px; white-space: nowrap; border: 1px solid var(--wd-line); border-radius: 99px; } } .wd-filter a.is-active { background: var(--wd-blue); color: #fff; } .wd-filter a.is-empty:not(.is-active) { color: var(--wd-muted); font-weight: 500; } .wd-filter__count { min-width: 28px; padding: 1px 8px; border-radius: 99px; background: var(--wd-paper); font-size: .8125rem; text-align: center; color: var(--wd-body); } .wd-filter a.is-active .wd-filter__count { background: rgba(255, 255, 255, .2); color: #fff; } /* Pagination (search + blog) */ .wd-pagination, .nav-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 36px 0 10px; padding: 0; list-style: none; } .wd-pagination .page-numbers, .nav-pagination .page-number { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--wd-line); border-radius: 99px; font-weight: 600; color: var(--wd-ink); background: #fff; transition: background-color .2s, border-color .2s; } .wd-pagination a.page-numbers:hover, .nav-pagination a.page-number:hover { background: var(--wd-hover-bg); } .wd-pagination .page-numbers.current, .nav-pagination .page-number.current { background: var(--wd-blue); border-color: var(--wd-blue); color: #fff; } .wd-pagination .dots, .nav-pagination .dots { border: 0; } .nav-pagination { border: 0 !important; } .nav-pagination .page-number i { font-size: 1rem; line-height: 1; } .nav-pagination li { margin: 0; } /* Empty state + link chips */ .wd-search-empty { padding: 28px 30px; background: var(--wd-paper); border-radius: 14px; } .wd-search-empty h2 { font-size: 1.5rem !important; margin-bottom: .3em; } .wd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .wd-chips li { margin: 0; } .wd-chips a { display: inline-block; padding: 7px 16px; border: 1px solid var(--wd-line); border-radius: 99px; background: #fff; font-size: .9375rem; font-weight: 600; color: var(--wd-ink); transition: background-color .2s, border-color .2s, color .2s; } .wd-chips a:hover { border-color: var(--wd-blue); color: var(--wd-blue); } /* 404 */ .wd-404 { padding: clamp(48px, 8vw, 110px) 0 clamp(56px, 8vw, 110px); } .wd-404__code { margin: 0 !important; font-family: var(--wd-font-head); font-size: clamp(6rem, 16vw, 11rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--wd-paper); -webkit-text-stroke: 2px var(--wd-line); } .wd-404 .row { justify-content: center; } .wd-404 .col.wd-404__inner { flex: 0 1 780px; max-width: 780px !important; margin-left: auto !important; margin-right: auto !important; } .wd-404 .wd-eyebrow { margin-top: 18px !important; } .wd-404__actions .button.is-outline { color: var(--wd-ink) !important; border: 1px solid var(--wd-line) !important; background: #fff; } .wd-404__actions .button.is-outline:hover { border-color: var(--wd-ink) !important; background: #fff !important; } .wd-404__title { margin: 0 0 12px; font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important; font-weight: 800; color: var(--wd-ink); } .wd-404__text { max-width: 34em; margin: 0 auto 26px !important; font-size: 1.1rem; color: var(--wd-body); } .wd-404 .wd-search-form { margin: 0 auto; } .wd-404__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; } .wd-404__actions .button { margin: 0; min-height: 46px; line-height: 46px; padding: 0 26px; } .wd-404__links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--wd-line); text-align: left; } .wd-404__links-title { margin: 0 !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-muted); } @media (max-width: 549px) { .wd-404__links { grid-template-columns: 1fr; } .wd-search-form { flex-direction: column; } } /* -------------------------------------------------------------------------- Tour detail (template/tour/single-tour.php) -------------------------------------------------------------------------- */ .wd-tour-hero2 .wd-lead { margin-bottom: 22px !important; } .wd-tour-hero2__cta { min-height: 48px; line-height: 48px; padding: 0 28px; margin: 0; } .wd-tour-facts { border-bottom: 1px solid var(--wd-line); background: #fff; } .wd-tour-facts ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; } .wd-tour-facts li { margin: 0; padding: 22px 20px; border-left: 1px solid var(--wd-line); font-weight: 600; color: var(--wd-ink); line-height: 1.4; } .wd-tour-facts li:first-child { border-left: 0; padding-left: 0; } .wd-tour-facts li span { display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-muted); } @media (max-width: 849px) { .wd-tour-facts ul { grid-template-columns: 1fr 1fr; } .wd-tour-facts li { padding: 16px 0 16px 16px; } .wd-tour-facts li:nth-child(odd) { border-left: 0; padding-left: 0; } .wd-tour-facts li:nth-child(n+3) { border-top: 1px solid var(--wd-line); } } .wd-tour-body { padding-top: clamp(36px, 5vw, 64px); } .wd-tour-block { margin-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: 110px; } .wd-tour-block h2 { margin-bottom: .7em; font-size: clamp(1.6rem, 2.4vw, 2rem) !important; color: var(--wd-ink); } /* content from the editor carries inline font sizes (75–90%) — normalise */ .wd-tour-overview__text *, .wd-tour-highlights__list *, .wd-day__body * { font-size: inherit !important; } .wd-tour-overview__text, .wd-tour-overview__text h3, .wd-tour-overview__text p { font-family: var(--wd-font); font-size: 1.15rem !important; font-weight: 400 !important; line-height: 1.75; color: var(--wd-body) !important; letter-spacing: 0; } .wd-tour-highlights__list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; } .wd-tour-highlights__list li { position: relative; margin: 0; padding: 16px 18px 16px 46px; background: var(--wd-paper); border-radius: 12px; font-size: 1rem; line-height: 1.55; color: var(--wd-body); } .wd-tour-highlights__list li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 13px; height: 7px; border-left: 2px solid var(--wd-blue); border-bottom: 2px solid var(--wd-blue); transform: rotate(-45deg); } .wd-tour-highlights__list strong { color: var(--wd-ink); } @media (max-width: 549px) { .wd-tour-highlights__list ul { grid-template-columns: 1fr; } } .wd-tour-itinerary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .wd-itin-toggle { flex: 0 0 auto; width: auto !important; min-height: 0 !important; line-height: 1.4 !important; white-space: nowrap; margin: 0; padding: 0; border: 0; background: none; font-size: .9375rem; font-weight: 700; color: var(--wd-blue); cursor: pointer; text-transform: none; } .wd-itin-toggle:hover { text-decoration: underline; text-underline-offset: 3px; } .wd-tour-map { margin-bottom: 28px; padding: 16px; background: var(--wd-paper); border-radius: 14px; text-align: center; } .wd-tour-map img { width: 100%; max-height: 560px; object-fit: contain; } .wd-days { list-style: none; margin: 0; padding: 0; counter-reset: none; } .wd-day { position: relative; margin: 0; padding: 0 0 0 28px; } .wd-day::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--wd-line); } .wd-day:first-child::before { top: 26px; } .wd-day:last-child::before { bottom: calc(100% - 26px); } .wd-day::after { content: ""; position: absolute; left: 1px; top: 21px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--wd-blue); } .wd-day details { border-bottom: 1px solid var(--wd-line); } .wd-day summary { display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; list-style: none; } .wd-day summary::-webkit-details-marker { display: none; } .wd-day__num { flex: 0 0 auto; padding: 3px 10px; border-radius: 99px; background: var(--wd-paper); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wd-blue); } .wd-day__title { flex: 1 1 auto; font-weight: 700; color: var(--wd-ink); line-height: 1.35; } .wd-day__icon { position: relative; flex: 0 0 14px; height: 14px; } .wd-day__icon::before, .wd-day__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--wd-ink); transition: transform .2s var(--wd-ease); } .wd-day__icon::after { transform: rotate(90deg); } .wd-day details[open] .wd-day__icon::after { transform: rotate(0deg); } .wd-day details[open] { } .wd-day details[open] .wd-day__num { background: var(--wd-blue); color: #fff; } .wd-day__body { padding: 0 0 18px; font-size: 1rem; line-height: 1.75; color: var(--wd-body); } .wd-day summary:hover .wd-day__title { color: var(--wd-blue); } .wd-tour-gallery .gallery-col img, .wd-tour-gallery img { border-radius: 10px; } .wd-tour-aside .is-sticky-column__inner { padding-bottom: 30px; } .wd-enquiry { padding: 28px 26px 12px; background: var(--wd-paper); border-radius: 14px; scroll-margin-top: 100px; } .wd-enquiry h3 { margin: 0 0 6px; font-family: var(--wd-font-head); font-size: 1.3rem; line-height: 1.25; color: var(--wd-ink); } .wd-enquiry__meta { margin-bottom: 10px !important; font-size: .875rem; font-weight: 600; color: var(--wd-blue); } .wd-enquiry__note { font-size: .9375rem; color: var(--wd-body); } #enquire { scroll-margin-top: 100px; } .wd-tour-more { padding: clamp(40px, 5vw, 72px) 0 calc(clamp(40px, 5vw, 72px) - 30px); background: var(--wd-paper); } .wd-tour-more h2 { margin-bottom: 18px; font-size: clamp(1.6rem, 2.4vw, 2rem) !important; color: var(--wd-ink); } .wd-tour-mobilebar { display: none !important; } @media (max-width: 849px) { .wd-tour-mobilebar { display: block !important; position: fixed !important; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: calc(100% - 32px) !important; max-width: none; margin: 0 !important; min-height: 50px !important; line-height: 50px !important; text-align: center; box-shadow: 0 10px 30px rgba(20, 23, 26, .25) !important; transition: transform .25s var(--wd-ease), opacity .2s; } .wd-tour-mobilebar.is-hidden { transform: translateY(160%); opacity: 0; } .single-tour .back-to-top { bottom: 84px !important; } } /* -------------------------------------------------------------------------- Footer Trust bar (1st section) keeps its original brand blue; link columns and copyright bar share the paper surface -------------------------------------------------------------------------- */ .footer-wrapper > .section:nth-of-type(2) { background-color: var(--wd-paper) !important; } .footer-wrapper h4, .footer-wrapper h4 strong { font-family: var(--wd-font); font-size: .8125rem !important; font-weight: 700 !important; letter-spacing: .1em; color: var(--wd-ink); margin-bottom: 1em; } .footer-wrapper .ux-menu-link__link, .footer-wrapper .menu a { color: var(--wd-body); font-size: .9375rem; transition: color .2s; } .footer-wrapper .ux-menu-link__link:hover, .footer-wrapper .menu a:hover { color: var(--wd-blue); text-decoration: underline; text-underline-offset: 3px; } .footer-wrapper .ux-menu-link { padding-block: 3px; } .footer-wrapper p { color: var(--wd-body); } .footer-wrapper .social-icons { margin-top: 22px; } .footer-wrapper .footer-about { margin: 18px 0 0; font-size: .9375rem; line-height: 1.7; color: var(--wd-body); max-width: 34em; } .footer-wrapper .footer-subscribe-label { margin: 28px 0 12px; font-size: .875rem; font-weight: 700; color: var(--wd-ink); } .footer-wrapper .social-icons .button.circle { background-color: var(--wd-ink) !important; border-color: var(--wd-ink) !important; } .footer-wrapper .social-icons .button.circle:hover { background-color: var(--wd-blue) !important; border-color: var(--wd-blue) !important; } /* Copyright bar — same paper surface as the link columns, divided by a hairline */ .absolute-footer { background-color: var(--wd-paper) !important; border-top: 1px solid var(--wd-line); padding-block: 28px !important; } .absolute-footer, .absolute-footer .copyright-footer { color: var(--wd-muted); font-size: .875rem; line-height: 1.5; } .absolute-footer .footer-primary, .absolute-footer .copyright-footer { padding: 0; margin: 0; } .absolute-footer strong { color: var(--wd-ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } } /* -------------------------------------------------------------------------- Mobile menu — left drawer on paper, editorial list, no uppercase -------------------------------------------------------------------------- */ .off-canvas .mfp-content { background: var(--wd-paper) !important; width: min(360px, 88vw) !important; box-shadow: none; } .off-canvas.mfp-bg.mfp-ready, .mfp-bg.off-canvas-left.mfp-ready, .mfp-bg.mfp-ready { background: rgba(20, 23, 26, .55); opacity: 1; } .off-canvas .mfp-close { color: var(--wd-ink); opacity: 1; top: 10px !important; right: 8px !important; } .off-canvas:not(.off-canvas-center) .nav-vertical li li > a { padding-left: 0; } html body .mobile-sidebar .sidebar-menu { padding: 64px 0 32px; } html body .mobile-sidebar .nav-sidebar { padding: 0 24px; } html body .mobile-sidebar .nav-sidebar.nav-uppercase > li > a { text-transform: none; letter-spacing: 0; } html body .mobile-sidebar .nav-sidebar > li { border-top: 0 !important; border-bottom: 1px solid var(--wd-line) !important; } html body .mobile-sidebar .nav-sidebar > li.header-search-form { border-bottom: 0 !important; padding: 0 0 12px; } html body .mobile-sidebar .nav-sidebar > li > a { font-family: var(--wd-font-head); font-size: 20px; font-weight: 700; color: var(--wd-ink); padding: 16px 0; line-height: 1.3; letter-spacing: -.01em; } html body .mobile-sidebar .nav-sidebar > li > a:hover, html body .mobile-sidebar .nav-sidebar > li.active > a, html body .mobile-sidebar .nav-sidebar li.current-menu-item > a { color: var(--wd-blue); } html body .mobile-sidebar .nav-sidebar .toggle { color: var(--wd-ink); opacity: 1; margin-right: -6px; } html body .mobile-sidebar .nav-sidebar .children { padding: 0 0 12px; } html body .mobile-sidebar .nav-sidebar .children > li > a { font-size: 16px; font-weight: 500; color: var(--wd-body); padding: 8px 12px; margin-left: -12px; text-transform: none; border-radius: var(--wd-radius); } html body .mobile-sidebar .nav-sidebar .children > li > a:hover { background: var(--wd-hover-bg); color: var(--wd-ink); } html body .mobile-sidebar .searchform .search-field { height: 48px; background: #fff; border: 1px solid var(--wd-line); border-radius: 99px 0 0 99px; padding-left: 18px; box-shadow: none; } html body .mobile-sidebar .searchform .button { height: 48px; width: 52px; border-radius: 0 99px 99px 0; background: var(--wd-blue); } html body .mobile-sidebar .header-button-1 { border-bottom: 0 !important; padding-top: 24px; } html body .mobile-sidebar .header-button-1 .button { width: 100%; margin: 0; min-height: 50px; line-height: 50px; font-size: 16px; } html body .mobile-sidebar .nav-sidebar > li > a { padding-left: 0 !important; padding-right: 40px; } html body .mobile-sidebar .nav-sidebar > li.active, html body .mobile-sidebar .nav-sidebar > li.active > a { background: transparent !important; } html body .mobile-sidebar .nav-sidebar > li.active > a { color: var(--wd-ink); } html body .mobile-sidebar .nav-sidebar .children > li > a { margin-left: -12px; padding-left: 12px !important; } html body .mobile-sidebar .nav-sidebar > li.header-search-form, html body .mobile-sidebar .nav-sidebar > li.header-button-1 { padding-left: 0; padding-right: 0; } html body .mobile-sidebar .header-search-form-wrapper { width: 100%; max-width: none; } html body .mobile-sidebar .header-button-1 .header-button { width: 100%; } .off-canvas .mfp-close, .mfp-wrap.off-canvas > .mfp-close { color: #fff !important; } html body .mobile-sidebar .searchform-wrapper, html body .mobile-sidebar .searchform { width: 100%; max-width: none; } html body .mobile-sidebar .nav-sidebar > li.header-button-1 { border-bottom: 0 !important; } .wd-enquiry textarea, .wd-enquiry input { font-weight: 400; } /* Destination overview — stack map and key facts on tablet/mobile */ @media (max-width: 849px) { .wd-dest-overview .row.align-middle > .col.medium-7, .wd-dest-overview .row.align-middle > .col.medium-5 { flex-basis: 100%; max-width: 100%; } .wd-dest-overview .row.align-middle > .col.medium-7 .img { max-width: 480px; margin-inline: auto; } .wd-dest-overview .row.align-middle > .col.medium-5 > .col-inner { max-width: 560px; margin-inline: auto; } /* city grid: 2 per row */ .wd-city-grid > .row > .col { flex-basis: 50% !important; max-width: 50% !important; } } @media (max-width: 849px) { .wd-dest-overview .row.align-middle > .col.medium-7 img { max-width: 360px !important; display: block; margin-inline: auto; } .wd-city-grid .box-overlay .box-image .image-cover { padding-top: 75% !important; } } /* Destination — Journeys Collection (Travel Themes cards, 3 per row) */ .wd-dest-journeys { background: #fff; } .wd-dest-journeys h2 { color: var(--wd-ink) !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; } .wd-journey-grid > .col { padding-bottom: 24px; } .wd-journey-grid .wd-journey { aspect-ratio: 4 / 5; } .wd-journey-grid .wd-journey__title { font-size: 1.45rem !important; } .wd-journeys-all { margin: 8px 0 0 !important; } @media (max-width: 849px) and (min-width: 550px) { .wd-journey-grid > .col { flex-basis: 50%; max-width: 50%; } } @media (max-width: 549px) { .wd-journey-grid .wd-journey { aspect-ratio: 4 / 3.4; } .wd-journey-grid .wd-journey__title { font-size: 1.2rem !important; } } /* Tour gallery — main photo + 2 rows of thumbnails, "+N" opens the lightbox */ .wd-gallery { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 !important; max-width: none !important; } .wd-gallery > a { position: relative; display: block; overflow: hidden; border-radius: var(--wd-radius); background: var(--wd-paper); aspect-ratio: 4 / 3; } .wd-gallery > a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s var(--wd-ease); } .wd-gallery > a:hover img { opacity: .85; } .wd-gallery .wd-gallery__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .wd-gallery .wd-gallery__hidden { display: none; } .wd-gallery__more { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(20, 23, 26, .6); color: #fff; font-family: var(--wd-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.1; transition: background-color .2s var(--wd-ease); } .wd-gallery__more small { font-family: var(--wd-font); font-size: .8125rem; font-weight: 500; opacity: .9; } .wd-gallery > a:hover .wd-gallery__more { background: rgba(20, 23, 26, .72); } @media (max-width: 549px) { .wd-gallery { gap: 6px; } .wd-gallery__more { font-size: 1.15rem; } .wd-gallery__more small { font-size: .7rem; } } html body .wd-journeys-all.button.is-outline { color: var(--wd-blue) !important; border-color: var(--wd-blue) !important; background: transparent; } html body .wd-journeys-all.button.is-outline:hover { color: #fff !important; background: var(--wd-blue) !important; } .wd-dest-journeys .wd-section-intro { max-width: 46em; } /* Destination — News: blog cards, 4 across, no excerpt */ .wd-post-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; } @media (max-width: 1049px) { .wd-post-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 549px) { .wd-post-grid--4 { grid-template-columns: 1fr; } } .wd-news-grid .wd-post-card__title { font-size: 1.1rem !important; } .wd-news-more { text-align: center; margin: 36px 0 0; } html body .wd-dest-news .wd-eyebrow { color: var(--wd-blue) !important; } @media (max-width: 549px) { .wd-news-grid { gap: 20px; } .wd-news-grid .wd-post-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; } .wd-news-grid .wd-post-card__media { aspect-ratio: 1 / 1 !important; margin: 0 !important; } .wd-news-grid .wd-post-card__body { padding: 0 !important; } .wd-news-grid .wd-post-card__cat { margin-bottom: 4px !important; } .wd-news-grid .wd-post-card__title { font-size: 1rem !important; line-height: 1.3; } .wd-news-grid .wd-post-card__meta { margin-top: 4px !important; } } /* ========================================================================== Mobile gutters — nothing touches the screen edge ========================================================================== */ @media (max-width: 1119px) { /* collapsed rows (no column padding): contact info, footer trust bar … */ html body .section-content > .row.row-collapse:not(.row-full-width) { padding-left: 15px; padding-right: 15px; } } @media (max-width: 549px) { html body .col, html body .row-large > .col { padding-left: 20px; padding-right: 20px; } html body .row .row:not(.row-collapse):not(.row-small):not(.row-xsmall) { margin-left: -20px; margin-right: -20px; } html body .container, html body .header-inner, html body .absolute-footer .container { padding-left: 20px; padding-right: 20px; } html body .section-content > .row.row-collapse:not(.row-full-width) { padding-left: 20px; padding-right: 20px; } html body .row-collapse > .col { padding-bottom: 18px !important; } html body .row-collapse > .col:last-child { padding-bottom: 0 !important; } } /* ========================================================================== Mobile card layouts — horizontal cards instead of tall stacked boxes ========================================================================== */ @media (max-width: 549px) { /* How it works: number on the left */ .wd-service-steps .row.align-equal > .col { padding-bottom: 12px; } .wd-service-steps .col-inner[style*="background"] { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px 20px !important; } .wd-service-steps .col-inner[style*="background"] > * { grid-column: 2; } .wd-service-steps .col-inner[style*="background"] > .wd-step-num { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; font-size: 1.6rem; line-height: 1.1; } .wd-service-steps .col-inner[style*="background"] > h3 { margin: 0 0 .3em !important; font-size: 1.1rem; } .wd-service-steps .col-inner[style*="background"] > p:last-child { margin-bottom: 0 !important; } /* MICE — What We Offer: letter on the left */ .wd-offer-mice .row.align-equal > .col { padding-bottom: 12px; } .wd-offer-mice .col-inner[style*="background"] { display: grid !important; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 20px !important; } .wd-offer-mice .col-inner[style*="background"] > * { grid-column: 2; } .wd-offer-mice .col-inner[style*="background"] > .wd-letter { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; font-size: 2.4rem; } .wd-offer-mice .col-inner[style*="background"] > h3 { margin: 0 0 .3em !important; font-size: 1.1rem; } .wd-offer-mice .col-inner[style*="background"] > p { margin-bottom: .6em !important; } .wd-offer-mice .wd-ticks { margin: 0 !important; padding-top: 10px !important; } /* Why Windows DMC: icon beside the text */ .wd-why2 .wd-why2-card .icon-box { display: flex !important; align-items: flex-start; gap: 14px; } .wd-why2 .wd-why2-card .icon-box-img { flex: 0 0 30px; width: 30px !important; margin: 2px 0 0 !important; } .wd-why2 .wd-why2-card .icon-box-text { flex: 1 1 auto; } .wd-why2 .wd-why2-card .icon-box-text h3, .wd-why2 .wd-why2-card .icon-box-text h4 { margin-top: 0 !important; } .wd-why2 .row .row > .col { padding-bottom: 12px; } .wd-why2 .wd-why2-card > .col-inner, .wd-why2 .col-inner.wd-why2-card { padding: 20px !important; } /* About — Our Values / Why Choose Us: icon on the left, text on the right */ .wd-about-our-values .row.align-equal > .col, .wd-about-why-choose-us .row.align-equal > .col { padding-bottom: 12px; } .wd-about-our-values .col-inner:has(> .box), .wd-about-why-choose-us .col-inner:has(> .box) { padding: 20px !important; } .wd-about-our-values .box, .wd-about-why-choose-us .box { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; } .wd-about-our-values .box-image, .wd-about-why-choose-us .box-image { width: 52px !important; margin: 0 !important; } .wd-about-our-values .box-text, .wd-about-why-choose-us .box-text { padding: 0 !important; text-align: left !important; } .wd-about-our-values .box-text h3, .wd-about-why-choose-us .box-text h3 { margin: 0 0 .4em !important; text-align: left !important; } .wd-about-our-values .box-text ul { margin-bottom: 0; } .wd-about-our-values .box-text li:last-child, .wd-about-why-choose-us .box-text p:last-child { margin-bottom: 0 !important; } /* Our travel themes: thumbnail on the left */ .wd-service-list .row.align-equal > .col { padding-bottom: 14px; } .wd-service-list .box { display: grid !important; grid-template-columns: 124px 1fr; column-gap: 16px; align-items: center; } .wd-service-list .box-image { width: 124px !important; } .wd-service-list .box-image .image-cover { padding-top: 80% !important; } .wd-service-list .box-text { padding: 0 !important; } .wd-service-list .box-text h3 { font-size: 1.1rem; } .wd-service-list .box-text p { font-size: .9375rem; margin-bottom: 0; } /* Leisure — travel style tiles: tall enough for their text */ .wd-offer-leisure-tours .wd-style-tile .image-cover { padding-top: 130% !important; } .wd-offer-leisure-tours .row.align-equal > .col { padding-left: 6px !important; padding-right: 6px !important; padding-bottom: 12px; } .wd-offer-leisure-tours .section-content > .row.align-equal { padding-left: 14px; padding-right: 14px; } .wd-offer-leisure-tours .box-text h3 { font-size: 1.1rem !important; } .wd-offer-leisure-tours .box-text p { font-size: .8125rem; line-height: 1.4; } } @media (max-width: 549px) { .wd-about-our-values .box-text *, .wd-about-why-choose-us .box-text * { text-align: left !important; } } /* Blog archive hero on tablet/mobile: one photo behind the "Blog" title (three narrow columns don't fit) */ @media (max-width: 849px) { .featured-posts-container { height: 300px; } .featured-posts-container .featured-post-item { aspect-ratio: auto !important; flex: 1 1 100% !important; } .featured-posts-container .featured-post-item ~ .featured-post-item { display: none !important; } .featured-posts-container .featured-post-overlay { background: rgba(20, 23, 26, .45) !important; } .featured-posts-container .featured-post-overlay > * { display: none !important; } .featured-posts-container .blog-archive-title { top: 50% !important; } .featured-posts-container .blog-archive-title a, .featured-posts-container .featured-post-item a { pointer-events: none; } } @media (max-width: 549px) { .featured-posts-container { height: 240px; } } /* Tablet: 4-up card rows become 2 × 2 */ @media (min-width: 550px) and (max-width: 1049px) { .wd-service-steps .row > .col.medium-3, .wd-offer-mice .row > .col.medium-3, .wd-about-our-values .row > .col.medium-3, .wd-about-why-choose-us .row > .col.medium-3 { flex-basis: 50%; max-width: 50%; } .wd-about-why-choose-us .box-image, .wd-about-our-values .box-image { width: 72px !important; } } /* Tablet: Why Windows DMC — intro above, cards 2 × 2 across the full width */ @media (min-width: 550px) and (max-width: 849px) { .wd-why2 .section-content > .row > .col.medium-5, .wd-why2 .section-content > .row > .col.medium-7 { flex-basis: 100%; max-width: 100%; } } /* ========================================================================== Mobile round 2 — shorter sections ========================================================================== */ @media (max-width: 549px) { /* Travel Themes — Journeys Collection: 2 × 2, title only */ .wd-theme-journeys .wd-journey__desc { display: none !important; } .wd-theme-journeys .row.align-equal > .col { padding-left: 6px; padding-right: 6px; padding-bottom: 12px; } .wd-theme-journeys .section-content > .row.align-equal { padding-left: 14px; padding-right: 14px; } /* Our travel themes: one row per theme, no description */ .wd-service-list .box-text p:not(.wd-current-label) { display: none; } .wd-service-list .box { grid-template-columns: 112px 1fr; } .wd-service-list .box-image { width: 112px !important; } .wd-service-list .box-text h3 { margin: 0 !important; font-size: 1.15rem; } .wd-service-list .row.align-equal > .col { padding-bottom: 12px; } /* Leisure — travel style tiles: title only */ .wd-offer-leisure-tours .wd-style-tile .box-text p { display: none; } .wd-offer-leisure-tours .wd-style-tile .image-cover { padding-top: 90% !important; } /* Destination — Must-see attractions: photo + name, no description */ .wd-dest-attractions .box-text p:not(:first-child), .wd-dest-attractions .box-text .text p + p { display: none; } .wd-dest-attractions .box-image .image-cover, .wd-dest-attractions .box-image > div[style*="padding-top"] { padding-top: 62% !important; } /* Homepage — Why Choose / Sustainable Tourism: swipe sideways instead of stacking */ .wd-home .wd-why .row.align-equal, .wd-home .wd-sustain .row.align-middle { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .wd-home .wd-why .row.align-equal::-webkit-scrollbar, .wd-home .wd-sustain .row.align-middle::-webkit-scrollbar { display: none; } .wd-home .wd-why .row.align-equal > .col, .wd-home .wd-sustain .row.align-middle > .col { flex: 0 0 84% !important; max-width: 84% !important; scroll-snap-align: start; padding-right: 0 !important; padding-bottom: 8px; } .wd-home .wd-why .row.align-equal > .col:last-child, .wd-home .wd-sustain .row.align-middle > .col:last-child { padding-right: 20px !important; flex-basis: calc(84% + 20px) !important; max-width: calc(84% + 20px) !important; } .wd-home .wd-why .row.align-equal > .col > .col-inner { height: 100%; } .wd-home .wd-sustain .row.align-middle { align-items: stretch; } .wd-home .wd-sustain .row.align-middle > .col > .col-inner, .wd-home .wd-sustain .row.align-middle .box { height: 100%; } /* Homepage — Client Stories: compact cards (photo beside the name, quote clamped) */ .wd-stories .testimonial-box { display: grid !important; grid-template-columns: 56px 1fr; column-gap: 14px; text-align: left !important; } .wd-stories .testimonial-box .testimonial-image { width: 56px !important; margin: 0 !important; grid-row: 1 / span 2; } .wd-stories .testimonial-box .icon-box-text { text-align: left !important; padding: 0 !important; } .wd-stories .testimonial-box .star-rating { margin: 2px 0 6px !important; } .wd-stories .testimonial-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-align: left !important; } .wd-stories .testimonial-meta { text-align: left !important; padding-top: 6px !important; } .wd-stories .slider .row > .col { padding-bottom: 12px; } .wd-stories .slider .row > .col > .col-inner { padding: 18px !important; } /* Footer — link columns 2 × 2 */ .footer-wrapper > .section:nth-of-type(2) .row > .col.medium-2 { flex-basis: 50%; max-width: 50%; padding-bottom: 24px; } .footer-wrapper > .section:nth-of-type(2) .row > .col.medium-4 { padding-bottom: 28px; } .footer-wrapper h4 { margin-bottom: 10px !important; } .footer-wrapper .ux-menu-link { padding-block: 5px; } .footer-wrapper .ux-menu-link__link { font-size: .9375rem; line-height: 1.35; } .footer-wrapper > .section:first-of-type .icon-box { align-items: center; } .footer-wrapper > .section:first-of-type .icon-box-img { width: 40px !important; } .absolute-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 549px) { .footer-wrapper .ux-menu-link { padding-block: 4px !important; min-height: 0 !important; } .footer-wrapper .ux-menu-link__link { padding: 0 !important; min-height: 0 !important; } .wd-dest-attractions .slider .row > .col { padding-bottom: 20px !important; } .wd-dest-attractions .box-text { padding-bottom: 0 !important; } } @media (max-width: 849px) { .footer-wrapper > .section:first-of-type .gap-element { display: none !important; } .footer-wrapper > .section:first-of-type .icon-box-text p { margin: 0 !important; } } @media (max-width: 549px) { .footer-wrapper > .section:first-of-type .row-collapse > .col { padding-bottom: 16px !important; } .footer-wrapper > .section:first-of-type .row-collapse > .col:last-child { padding-bottom: 0 !important; } } /* CF7 honeypot — off-screen for people, still in the form for bots */ .wd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== Contact page — intro + details (left), form card (right) ========================================================================== */ .wd-contact-content { padding-block: clamp(48px, 6vw, 88px) calc(clamp(48px, 6vw, 88px) - 30px) !important; } .wd-contact-aside h2 { margin: 0 0 .45em; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; color: var(--wd-ink); } .wd-contact-aside .wd-lead { margin-bottom: 28px; } .wd-contact-list { list-style: none; margin: 0 0 32px !important; padding: 0; border-top: 1px solid var(--wd-line); } .wd-contact-list li { display: flex; gap: 16px; align-items: flex-start; margin: 0 !important; padding: 18px 0; border-bottom: 1px solid var(--wd-line); color: var(--wd-ink); font-size: 1.0625rem; line-height: 1.5; } .wd-contact-list__icon { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--wd-paper); color: var(--wd-blue); } .wd-contact-list__label { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-muted); } .wd-contact-list a { color: var(--wd-ink); font-weight: 600; word-break: break-word; transition: color .2s; } .wd-contact-list a:hover { color: var(--wd-blue); } .wd-contact-next { margin-bottom: 28px; } .wd-contact-next__title { margin: 0 0 12px !important; font-family: var(--wd-font-head); font-size: 1.15rem; font-weight: 700; color: var(--wd-ink); } .wd-contact-next ol { list-style: none; counter-reset: step; margin: 0; padding: 0; } .wd-contact-next li { counter-increment: step; position: relative; margin: 0 0 12px !important; padding-left: 40px; color: var(--wd-body); line-height: 1.55; } .wd-contact-next li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--wd-blue); color: #fff; font-size: .8125rem; font-weight: 700; } .wd-contact-next li strong { color: var(--wd-ink); } .wd-contact-themes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; } .wd-contact-themes span { margin-right: 4px; color: var(--wd-muted); font-size: .9375rem; } .wd-contact-themes a { padding: 6px 14px; border: 1px solid var(--wd-line); border-radius: 99px; color: var(--wd-ink); font-size: .875rem; font-weight: 600; transition: background-color .2s, border-color .2s; } .wd-contact-themes a:hover { background: var(--wd-hover-bg); border-color: var(--wd-hover-bg); } .wd-contact-content .wd-contact-formcol > .col-inner { background: none !important; padding: 0 !important; } .wd-contact-card { background: var(--wd-paper); border-radius: 12px; padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.4vw, 40px) clamp(8px, 1.6vw, 20px); scroll-margin-top: 110px; } .wd-contact-card h3 { margin: 0 0 6px; font-family: var(--wd-font-head); font-size: 1.5rem !important; color: var(--wd-ink); } .wd-contact-card__note { margin-bottom: 22px !important; color: var(--wd-muted); font-size: .9375rem; } @media (min-width: 850px) { .wd-contact-aside > .col-inner { padding-right: clamp(0px, 3vw, 40px); } .wd-contact-formcol { position: sticky; top: 110px; align-self: flex-start; } } @media (max-width: 849px) { .wd-contact-formcol { order: -1; margin-bottom: 8px; } /* form first on small screens */ } html body .wd-contact-content .col.wd-contact-formcol > .col-inner { padding: 0 !important; background: none !important; } @media (min-width: 850px) { html body .col.wd-contact-formcol { position: sticky !important; top: 110px; } } @media (max-width: 849px) { html body .col.wd-contact-formcol { top: auto; } }