/*
* Public site styles — the Waavo promo design system.
*
* Tokens live in tokens.css, which must be loaded first. No rule below may
* contain a raw colour (brief §10).
*
* ── TWO DELIBERATE DEPARTURES FROM THE IMPORTED CANVAS ──────────────────────
*
* 1. Classes, not inline styles. The canvas is React with a `style` object per
* element. Reproducing that here would have added ~400 inline style
* attributes to the public templates and pinned `style-src-attr
* 'unsafe-inline'` in the CSP forever. Every visual value from the canvas is
* preserved; only where it lives has changed.
*
* 2. Semantic tokens where the canvas reached for a ramp. Several design-system
* components hardcode a ramp value for a role — `background: var(--bone-0)`
* for a card, `color: var(--ink-900)` for a heading. Those are correct in
* light and wrong in dark, so they are authored here against the semantic
* alias the ramp was standing in for (`--surface-card`, `--text-heading`).
* The light-mode result is identical because that is what the aliases
* resolve to.
*
* One further note: the canvas defines `--text-body` twice — as a colour in
* colors.css and as a 15px size in typography.css, with the size winning. The
* size is `--text-body-size` here so the colour alias survives.
* ────────────────────────────────────────────────────────────────────────────
*/
/* --- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--surface-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--text-body-size);
line-height: var(--leading-body);
font-weight: var(--weight-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* The design's wide hero grids must never make the document scroll sideways. */
overflow-x: hidden;
}
h1, h2, h3, h4 {
margin: 0;
color: var(--text-heading);
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-heading);
line-height: var(--leading-tight);
text-wrap: balance;
/* A single word wider than a phone — Finnish "verkkomatkatoimisto" is
~340px at 36px — otherwise sets the min-content width of every flex and
grid column it sits in, and the band runs off the screen. Breaks only a
word that cannot fit, so no English heading changes. `anywhere`, not
`break-word`: only `anywhere` lowers the min-content width, and it is the
min-content width a `min-width: auto` column grows to. Mirrored in
critical.css: a line break that differs between the two is a shift. */
overflow-wrap: anywhere;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Keyboard focus must stay visible everywhere, including on the dark bands. */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.wv-band--inverse :focus-visible,
.wv-band--brand :focus-visible,
.wv-footer :focus-visible { outline-color: var(--bone-0); }
img { max-width: 100%; height: auto; display: block; }
code, kbd, samp { font-family: var(--font-data); font-size: 0.92em; }
.wv-i { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.skip-link {
position: absolute;
left: -9999px;
z-index: 100;
background: var(--surface-card);
color: var(--text-heading);
border: var(--hairline);
border-radius: var(--radius-field);
padding: var(--space-3) var(--space-4);
font-weight: var(--weight-medium);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); text-decoration: none; }
/* --- layout --------------------------------------------------------------
*
* Every section in the design is a full-bleed band with a 1200px column inside
* it. `.wv-band` paints the ground, `.wv-container` holds the measure.
*/
.wv-container {
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--gutter);
}
.wv-container--narrow { max-width: var(--container-narrow); }
.wv-band { background: var(--surface-page); }
.wv-band--sunken {
background: var(--surface-sunken);
border-block: var(--hairline);
}
.wv-band--inverse { background: var(--surface-inverse); }
.wv-band--brand { background: var(--surface-brand); }
.wv-band--ruled { border-bottom: var(--hairline); }
.wv-section { padding-block: var(--section-y); }
.wv-section--tight { padding-block: var(--section-y-tight); }
.wv-section--head { padding-block: var(--section-y-tight) var(--space-8); }
.wv-section--flush-top { padding-block: 0 var(--section-y); }
/* A stack with one gap, used wherever the design lists elements vertically. */
.wv-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.wv-stack--lg { gap: clamp(16px, 2vw, 24px); }
.wv-stack--sm { gap: var(--space-3); }
.wv-stack--fill { align-items: stretch; }
.wv-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* A row of buttons closing a section, set off from the grid above it. */
.wv-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: clamp(24px, 3vw, 40px); }
/* The two-column split: content beside a figure, reflowing with no breakpoint. */
.wv-split {
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.wv-split__text { flex: 1 1 320px; min-width: 0; }
.wv-split__media { flex: 1 1 300px; min-width: 0; }
.wv-split__text--wide { flex: 1.3 1 400px; }
.wv-split__media--wide { flex: 1 1 440px; }
/* The travel-content section puts the figure first in the source and second on
screen, so the heading is what a screen reader reaches first. */
.wv-split__media--last { order: 2; }
/* --- type ---------------------------------------------------------------- */
.wv-display {
margin: 0;
font-size: clamp(32px, 4.6vw, 62px);
line-height: 1.04;
letter-spacing: -0.035em;
font-weight: var(--weight-semibold);
color: var(--text-display);
text-wrap: balance;
}
.wv-display--page { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06; }
.wv-display--article { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.wv-display--measure { max-width: 22ch; }
.wv-h2 {
margin: 0;
font-size: clamp(26px, 3.6vw, 46px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: var(--weight-semibold);
color: var(--text-display);
text-wrap: balance;
}
.wv-h3 {
margin: 0;
font-size: clamp(22px, 2.4vw, 31px);
line-height: 1.14;
letter-spacing: -0.025em;
font-weight: var(--weight-semibold);
color: var(--text-heading);
}
.wv-lead {
margin: 0;
font-size: clamp(16px, 1.6vw, 19px);
line-height: var(--leading-body);
color: var(--text-body);
max-width: var(--measure-lead);
text-wrap: pretty;
}
.wv-mono { font-family: var(--font-data); }
.wv-muted { color: var(--text-muted); }
/* Eyebrow — the small tracked caps label above a heading. */
.wv-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--brand);
font-family: var(--font-ui);
font-size: var(--text-micro);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
line-height: 1;
}
.wv-eyebrow--muted { color: var(--text-muted); }
.wv-eyebrow--inverse { color: var(--bone-200); }
.wv-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.wv-eyebrow--bare::before { display: none; }
/* --- section heading ----------------------------------------------------- */
.wv-heading {
display: flex;
gap: var(--space-6);
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
}
.wv-heading__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
max-width: 780px;
}
.wv-heading--center .wv-heading__body {
align-items: center;
text-align: center;
margin-inline: auto;
max-width: 720px;
}
.wv-heading__title {
margin: 0;
font-size: var(--text-display-2);
letter-spacing: var(--tracking-display);
line-height: var(--leading-tight);
color: var(--text-display);
}
.wv-heading__lead {
font-size: var(--text-lead);
line-height: var(--leading-body);
color: var(--text-body);
max-width: var(--measure-lead);
}
.wv-heading--inverse .wv-heading__title { color: var(--bone-0); }
.wv-heading--inverse .wv-heading__lead { color: var(--bone-200); }
.wv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: var(--space-4);
margin-top: clamp(24px, 3vw, 44px);
}
.wv-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); }
.wv-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.wv-grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 4vw, 56px); }
.wv-grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(24px, 4vw, 48px); }
/* --- button -------------------------------------------------------------- */
.wv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-ui);
font-weight: var(--weight-medium);
letter-spacing: 0.005em;
border-radius: var(--radius-control);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: var(--transition-control);
/* md by default, matching the canvas. */
font-size: var(--text-body-size);
padding: 10px 22px;
min-height: 42px;
}
.wv-btn:hover { text-decoration: none; }
.wv-btn:active { transform: translateY(1px); }
.wv-btn[disabled], .wv-btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }
.wv-btn--sm { font-size: var(--text-sm); padding: 7px 16px; min-height: 34px; }
.wv-btn--lg { font-size: var(--text-body-lg); padding: 14px 30px; min-height: 52px; }
.wv-btn--block { width: 100%; }
.wv-btn--primary {
background: var(--brand);
color: var(--text-on-brand);
box-shadow: var(--shadow-1);
}
.wv-btn--primary:hover { background: var(--brand-hover); color: var(--text-on-brand); box-shadow: var(--shadow-brand); }
.wv-btn--secondary {
background: var(--surface-card);
color: var(--text-heading);
border-color: var(--border-strong);
}
.wv-btn--secondary:hover { background: var(--surface-hover); color: var(--text-heading); border-color: var(--text-faint); }
.wv-btn--ghost { background: transparent; color: var(--text-strong); }
.wv-btn--ghost:hover { background: var(--surface-hover); color: var(--text-strong); }
/* Phones. A label is a translation, and several run wider than a 320px card —
Polish "Porozmawiaj z działem sprzedaży" overflowed by 61px. Below 600px a
button may wrap onto a second line rather than leave its container. Mirrored
in critical.css, because a wrapped button is a taller one. */
@media (max-width: 600px) {
.wv-btn { max-width: 100%; white-space: normal; text-align: center; }
}
/* Sits on a brand or ink ground, so its colours are fixed rather than themed. */
.wv-btn--inverse { background: var(--bone-0); color: var(--blue-700); }
.wv-btn--inverse:hover { background: var(--bone-100); color: var(--blue-700); }
.wv-btn--outline-inverse {
background: transparent;
color: var(--bone-0);
border-color: var(--on-dark-16);
}
.wv-btn--outline-inverse:hover { background: var(--on-dark-10); color: var(--bone-0); border-color: var(--on-dark-40); }
/* Icon-only, used by the header's menu toggle. */
.wv-iconbtn {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
border-radius: var(--radius-pill);
border: 1px solid var(--border-strong);
background: var(--surface-card);
color: var(--text-heading);
cursor: pointer;
transition: var(--transition-control);
}
.wv-iconbtn:hover { background: var(--surface-hover); border-color: var(--text-faint); }
/* --- badge and tag ------------------------------------------------------- */
.wv-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brand-subtle);
color: var(--text-label);
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.02em;
padding: 4px 10px;
border-radius: var(--radius-pill);
line-height: 1.4;
}
.wv-badge:hover { text-decoration: none; }
.wv-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.wv-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
font-family: var(--font-ui);
border: 1px solid var(--border-hairline);
background: var(--surface-card);
color: var(--text-body);
transition: var(--transition-control);
}
a.wv-tag:hover { background: var(--surface-hover); color: var(--text-body); text-decoration: none; }
.wv-tag[aria-current], .wv-tag--selected {
background: var(--brand);
border-color: var(--brand);
color: var(--text-on-brand);
}
a.wv-tag[aria-current]:hover { background: var(--brand-hover); color: var(--text-on-brand); }
/* --- header --------------------------------------------------------------
*
* 72px tall at every width. At 1040px and below the links move into a disclosure
* panel rather than wrapping, so the sticky header never eats a phone screen.
*
* One boundary for the whole bar. The nav used to collapse at 1039px while the
* scheme switch grew at 1040px, so a 1040px viewport got a phone-sized control in
* a desktop header — the switch's own comment says it grows where the other
* controls do. theme.spec.js asserts both sides of the boundary.
*/
.wv-header {
position: sticky;
top: 0;
z-index: 40;
background: var(--surface-veil);
backdrop-filter: var(--blur-veil);
-webkit-backdrop-filter: var(--blur-veil);
border-bottom: var(--hairline);
}
.wv-header__bar {
height: var(--header-h);
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--gutter);
display: flex;
align-items: center;
gap: var(--space-6);
}
/* The wordmark is artwork, not type.
Drawn as a background image rather than an ![]()
so the browser fetches only
the variant whose rule applies — two ![]()
elements would download both, and
a display:none image is still fetched. The element keeps its text for screen
readers and search engines; .wv-logo__name hides it visually only.
Two files because the supplied logo's wordmark is navy (#143C80), which is
barely legible on a dark ground. logo-inverse.svg re-points that one colour
and nothing else — the plane reads on both grounds unchanged. Same idea as
the canvas's waavo-logo / waavo-logo-white pair, in one file fewer. */
.wv-logo {
flex: 0 0 auto;
display: inline-block;
width: 115px;
height: 19px;
background-image: var(--logo-src);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
.wv-logo:hover { text-decoration: none; }
/* Scaled by width; the height follows the artwork's own 115:19 ratio. */
.wv-logo--lg { width: 150px; height: 25px; }
/* The footer band is dark in both schemes, so it always takes the light
wordmark — the one case where the scheme does not decide. */
.wv-logo--inverse { background-image: url("../images/logo-inverse-29r9lLc.svg"); }
.wv-logo__name {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.wv-nav {
display: flex;
gap: var(--space-6);
margin-left: var(--space-2);
flex: 0 0 auto;
align-items: center;
}
.wv-nav__link {
font-size: var(--text-body-size);
font-weight: var(--weight-regular);
color: var(--text-body);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
white-space: nowrap;
transition: var(--transition-control);
}
.wv-nav__link:hover { color: var(--text-link-hover); text-decoration: none; }
.wv-nav__link[aria-current], .wv-nav__link--active {
font-weight: var(--weight-medium);
color: var(--text-label);
border-bottom-color: var(--brand);
}
.wv-header__end {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
}
.wv-phone {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
color: var(--text-muted);
font-family: var(--font-data);
white-space: nowrap;
}
.wv-phone:hover { color: var(--text-body); text-decoration: none; }
/* The Products dropdown.
*
* CSS only. The trigger is a real link to /products, and the panel reveals on
* hover or focus-within — so a pointer gets the shortcut, a keyboard reaches
* every entry by tabbing, and the parent page stays reachable either way. The
* canvas uses React state and leaves the parent unclickable. */
.wv-menu { position: relative; display: flex; }
.wv-menu__summary { display: inline-flex; align-items: center; gap: 5px; }
.wv-menu__summary .wv-i { transition: transform var(--dur-fast) var(--ease-standard); }
.wv-menu:hover .wv-menu__summary .wv-i,
.wv-menu:focus-within .wv-menu__summary .wv-i { transform: rotate(180deg); }
.wv-menu__panel {
display: none;
position: absolute;
top: calc(100% + 14px);
left: -14px;
min-width: 236px;
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
padding: var(--space-2);
flex-direction: column;
z-index: 50;
}
/* A padded strip bridging the 14px gap, so the panel does not close when the
pointer crosses it on the way down. */
.wv-menu__panel::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.wv-menu:hover > .wv-menu__panel,
.wv-menu:focus-within > .wv-menu__panel { display: flex; }
.wv-menu__item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--text-strong);
transition: var(--transition-control);
}
.wv-menu__item:hover { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.wv-menu__item[aria-current] { background: var(--surface-tint); color: var(--text-label); }
.wv-menu__item strong { font-size: var(--text-body-size); font-weight: var(--weight-medium); }
.wv-menu__item span { font-size: var(--text-sm); color: var(--text-muted); }
/* The language switcher. A rather than the hover panel the Products
menu uses: choosing a language is a deliberate act, and a menu that opens
when the pointer crosses it on the way to the call to action is a nuisance
for something you use once. Renders nothing on a single-language site. */
.wv-langs { flex: 0 0 auto; }
.wv-langs .wv-menu__summary {
cursor: pointer;
list-style: none;
font-family: var(--font-data);
font-size: var(--text-sm);
gap: 5px;
}
.wv-langs .wv-menu__summary::-webkit-details-marker { display: none; }
.wv-langs[open] .wv-menu__summary .wv-i:last-child { transform: rotate(180deg); }
.wv-langs__panel { left: auto; right: -14px; min-width: 180px; }
.wv-langs[open] > .wv-langs__panel { display: flex; }
.wv-langs__panel::before { display: none; }
/* The compact disclosure. A so it opens with no JavaScript at all —
* a scripted panel would leave a visitor with JavaScript off unable to reach
* the navigation. */
.wv-header__menu { display: none; }
.wv-header__toggle { list-style: none; }
.wv-header__toggle::-webkit-details-marker { display: none; }
.wv-header__panel {
position: absolute;
left: 0;
right: 0;
top: var(--header-h);
background: var(--surface-card);
border-bottom: var(--hairline);
box-shadow: var(--shadow-2);
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
}
@media (max-width: 1040px) {
.wv-header__bar > .wv-nav { display: none; }
.wv-header__end > .wv-phone { display: none; }
.wv-header__menu { display: block; }
.wv-header__panel .wv-nav {
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
margin: 0;
padding: var(--space-5) var(--gutter);
}
/* Inside the panel the submenu is always open: a disclosure inside a
disclosure is one tap too many on a phone. */
.wv-header__panel .wv-menu { display: block; }
.wv-header__panel .wv-menu__panel {
display: flex;
position: static;
min-width: 0;
border: 0;
border-left: var(--hairline);
border-radius: 0;
box-shadow: none;
margin: var(--space-3) 0 0 var(--space-3);
padding: 0 0 0 var(--space-3);
gap: var(--space-2);
}
.wv-header__panel .wv-menu__panel::before { display: none; }
.wv-header__panel .wv-menu__summary .wv-i { display: none; }
.wv-header__panel .wv-phone {
padding-top: var(--space-4);
border-top: var(--hairline);
}
}
/* The panel's call to action is for phones; above 600px the bar carries it. */
.wv-header__cta { display: none; }
@media (max-width: 1040px) {
/* The same 42px touch target as the scheme switch beside it. */
.wv-header__toggle { width: 42px; height: 42px; }
}
/* Phones. The bar's widest item is the call to action, and its width is the
translation's — 138px in English, 191px for Lithuanian's "Užsisakyti
demonstraciją" — so beside the language switcher, the scheme switch and the
menu toggle it needed ~530px and overflowed every phone, pushing the toggle
off-screen. It moves into the panel as a full-width button, and the gaps
tighten so the rest fits a 320px screen. mobile.spec.js walks every market. */
@media (max-width: 600px) {
.wv-header__bar { gap: var(--space-3); }
.wv-header__end { gap: var(--space-2); }
.wv-header__end > .wv-btn { display: none; }
.wv-header__panel .wv-header__cta {
display: flex;
min-height: 44px;
font-size: var(--text-body-size);
}
}
@media (min-width: 1041px) and (max-width: 1159px) {
/* Not enough room for the number beside the call to action. 1041px rather
than 1040px so this cannot overlap the compact block above. */
.wv-header__end .wv-phone { display: none; }
}
/* --- hero ---------------------------------------------------------------- */
.wv-hero { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 72px); }
.wv-hero__title {
margin: 0;
font-size: clamp(32px, 4.6vw, 62px);
line-height: 1.04;
letter-spacing: -0.035em;
font-weight: var(--weight-semibold);
color: var(--text-display);
text-wrap: balance;
}
.wv-hero__lead { max-width: 52ch; }
/* The product pages' brand-ground hero. */
.wv-hero--brand { padding-block: clamp(28px, 4vw, 56px) clamp(44px, 6vw, 88px); }
.wv-hero--brand .wv-hero__title { color: var(--bone-0); max-width: 20ch; }
.wv-hero--brand .wv-lead { color: var(--blue-100); }
/* --- image block --------------------------------------------------------- */
.wv-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wv-figure__frame {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--radius-media);
overflow: hidden;
background: var(--surface-sunken);
border: var(--hairline);
display: grid;
place-items: center;
}
.wv-figure__frame--wide { aspect-ratio: 21 / 9; }
.wv-figure__frame--tall { aspect-ratio: 4 / 3; }
.wv-figure__frame--card { background: var(--surface-card); }
.wv-figure__frame > picture, .wv-figure__frame > img { width: 100%; height: 100%; }
.wv-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.wv-figure__frame--filled { border-color: transparent; }
.wv-figure__placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-faint);
padding: var(--space-4);
text-align: center;
font-size: var(--text-micro);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: var(--weight-bold);
}
.wv-figure figcaption { font-size: var(--text-xs); color: var(--text-muted); }
/* --- article card -------------------------------------------------------- */
.wv-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-card);
transition: box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-standard);
}
a.wv-card:hover {
box-shadow: var(--shadow-3);
border-color: var(--border-strong);
transform: translateY(-2px);
text-decoration: none;
}
.wv-card__media {
aspect-ratio: 16 / 10;
background: var(--surface-sunken);
display: grid;
place-items: center;
border-bottom: var(--hairline);
overflow: hidden;
}
/* The frame is a centring grid (for the placeholder), so an unsized
shrinks to its content and the photograph sits letterboxed in a grey box.
height: 100% does not help: the grid's row track is sized by its content, so
the percentage resolves against the picture itself. Pinned to the frame, it
fills it and is cropped, as the canvas's cards are (shared/article-images.js
does the same with inset: 0). */
.wv-card__media { position: relative; }
.wv-card__media > picture { position: absolute; inset: 0; }
.wv-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wv-card__body {
padding: var(--pad-card);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.wv-card__title {
margin: 0;
font-size: var(--text-h4);
line-height: var(--leading-snug);
color: var(--text-heading);
transition: color var(--dur-fast) var(--ease-standard);
}
a.wv-card:hover .wv-card__title { color: var(--text-link-hover); }
.wv-card__meta {
margin-top: auto;
padding-top: var(--space-3);
display: flex;
gap: var(--space-3);
align-items: center;
font-size: var(--text-xs);
color: var(--text-muted);
font-family: var(--font-data);
}
.wv-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
/* --- stat ---------------------------------------------------------------- */
/* Markup is labelvalue, which is the order a screen reader
should hear; the figure is drawn above its label, as on the canvas. */
.wv-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); margin: 0; }
.wv-stat__value {
margin: 0;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 52px);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-display);
line-height: 1;
color: var(--text-heading);
}
/* As tall as a numeral's box (the value's font-size at line-height 1), with the
text on its bottom edge, so a pending figure beside a real one keeps its
label level with its neighbours'. */
.wv-stat__value--pending { font-family: var(--font-mono); font-size: clamp(16px, 1.6vw, 20px); letter-spacing: 0; color: var(--text-muted); min-height: clamp(34px, 4vw, 52px); display: flex; align-items: flex-end; }
.wv-stat__label { font-size: var(--text-sm); color: var(--text-muted); }
/* --- breadcrumb and pagination ------------------------------------------- */
.wv-crumbs {
display: flex;
align-items: center;
gap: 4px 10px;
flex-wrap: wrap;
/* shared/theme.css: a readable size, the current page in brand blue. */
font-size: 15px;
color: var(--text-muted);
list-style: none;
margin: 0;
padding: 0;
}
.wv-crumbs a { color: var(--text-muted); transition: var(--transition-control); }
.wv-crumbs a:hover { color: var(--brand); text-decoration: none; }
.wv-crumbs li { display: flex; align-items: center; gap: 10px; }
.wv-crumbs [aria-current] { color: var(--brand); font-weight: var(--weight-medium); }
/* The last crumb is the page itself, and on an article that is the full title
— which wrapped onto a line of its own above the h1 that repeats it. It stays
on the trail's line and ellipsises; the text is untouched, so it still equals
the BreadcrumbList name. A zero basis is what lets it share the line: at its
natural width the wrapping row would push it down before it could shrink. */
.wv-crumbs li:last-child { flex: 1 1 0; min-width: 8ch; }
/* width: 0 as well as min-width: 0: the header column aligns its children to
the start, so the trail is sized by its min-content, and a nowrap span with
an automatic width reports the whole title there — which pushed a 390px page
out to 548px. A zero width that grows reports nothing. */
/* And the trail itself takes its column's width, or a start-aligned column
(.wv-stack, .wv-ph__txt, …) sizes it to that min-content and the last crumb
truncates after a word — "Skrydžiai…" on every product page. Not scoped to one
parent: in a block or grid parent the property is inert. */
nav:has(> .wv-crumbs) { align-self: stretch; }
.wv-crumbs li:last-child [aria-current] { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-crumbs .wv-i { color: var(--border-strong); }
.wv-crumbs--inverse, .wv-crumbs--inverse a { color: var(--blue-100); }
.wv-crumbs--inverse a:hover { color: var(--bone-0); }
.wv-crumbs--inverse [aria-current] { color: var(--bone-0); }
.wv-crumbs--inverse .wv-i { color: var(--on-dark-40); }
.wv-pagination { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: center; }
.wv-pagination a, .wv-pagination span {
min-width: 36px;
height: 36px;
padding-inline: var(--space-2);
border-radius: var(--radius-pill);
display: grid;
place-items: center;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
font-family: var(--font-data);
border: 1px solid transparent;
color: var(--text-body);
transition: var(--transition-control);
}
.wv-pagination a:hover { background: var(--surface-hover); text-decoration: none; }
.wv-pagination [aria-current] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
.wv-pagination [aria-disabled] { color: var(--border-strong); }
/* --- FAQ -----------------------------------------------------------------
*
* A native rather than the canvas's scripted accordion: keyboard
* operable and findable by in-page search with no JavaScript at all.
*/
.wv-faq { border-top: var(--hairline); }
.wv-faq__item { border-bottom: var(--hairline); }
.wv-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
font-family: var(--font-ui);
font-size: var(--text-body-lg);
font-weight: var(--weight-medium);
color: var(--text-heading);
transition: color var(--dur-fast) var(--ease-standard);
}
.wv-faq__q::-webkit-details-marker { display: none; }
.wv-faq__q:hover { color: var(--text-link-hover); }
.wv-faq__item[open] .wv-faq__q { color: var(--text-label); }
.wv-faq__q .wv-i { color: var(--text-muted); transition: transform var(--dur-base) var(--ease-standard); }
.wv-faq__item[open] .wv-faq__q .wv-i { transform: rotate(45deg); }
.wv-faq__a { padding: 0 0 var(--space-6); max-width: var(--measure-prose); color: var(--text-body); }
/* --- forms --------------------------------------------------------------- */
.wv-form {
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-card);
box-shadow: var(--shadow-2);
padding: clamp(20px, 3vw, 40px);
}
.wv-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: clamp(14px, 2vw, 20px);
}
.wv-field { display: flex; flex-direction: column; gap: var(--space-2); }
.wv-field--full { grid-column: 1 / -1; }
.wv-field label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-strong);
}
.wv-field .required::after { content: " *"; color: var(--brand); }
.wv-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.wv-input, .wv-textarea, .wv-select {
width: 100%;
padding: 11px 14px;
font-family: var(--font-ui);
font-size: var(--text-body-size);
color: var(--text-heading);
background: var(--surface-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-input);
outline: none;
transition: var(--transition-control);
}
.wv-textarea { line-height: var(--leading-body); resize: vertical; }
.wv-input:focus, .wv-textarea:focus, .wv-select:focus {
border-color: var(--border-focus);
box-shadow: var(--ring-focus);
}
.wv-input[aria-invalid="true"], .wv-textarea[aria-invalid="true"] { border-color: var(--state-danger); }
.wv-field ul, .wv-form-errors {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-xs);
color: var(--state-danger);
}
.wv-notice {
padding: var(--space-3) var(--space-4);
border: var(--hairline);
border-left: 3px solid var(--state-danger);
border-radius: var(--radius-field);
background: var(--state-danger-subtle);
color: var(--text-strong);
font-size: var(--text-body-size);
margin-bottom: var(--space-5);
}
/* Hidden from people and from assistive technology; left reachable for a bot.
Off-screen rather than display:none, because some bots skip a hidden field. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The contact page aligns its two columns at the top, not the middle: the form
is much taller than the details beside it. */
.wv-split--top { align-items: flex-start; }
/* The submit row. A class of its own rather than `.wv-field .wv-row`, because
.wv-field's column direction wins on a shared element and stacks the two. */
.wv-submit {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
}
/* The consent checkbox. The native control is hidden and redrawn so it can
carry the design's 18px square, but it stays a real focusable input. */
.wv-consent__box { display: inline-flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: var(--text-sm); color: var(--text-body); font-weight: var(--weight-regular); }
.wv-consent input[type="checkbox"] {
/* Native, tinted — the canvas's choice, and one that keeps the platform's
own checked, focus and high-contrast rendering. */
width: 18px;
height: 18px;
flex: 0 0 auto;
margin: 1px 0 0;
accent-color: var(--brand);
cursor: pointer;
}
.wv-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.wv-contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-body-size); color: var(--text-strong); }
.wv-contact-list .wv-i { color: var(--brand); margin-top: 2px; }
.wv-contact-list a { color: var(--text-strong); }
.wv-rule-top { padding-top: clamp(12px, 2vw, 20px); border-top: var(--hairline); width: 100%; }
.wv-sent { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.wv-sent__seal { color: var(--state-success); }
/* Legacy demo pages (plan 0005), after the canvas's demo/Demo.dc.html: a
product chip, the country's flag beside the heading, the "demonstration only"
notice, the engine in a browser frame, and the other demos the same overview
lists. */
/* Box-size rules are also inlined in templates/site/demo/page.html.twig (CLS); change both. */
.wv-demo { padding-block: clamp(28px, 4vw, 56px) clamp(44px, 6vw, 96px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.wv-demo--page { padding-block: clamp(24px, 4vw, 48px) clamp(44px, 6vw, 88px); gap: clamp(20px, 3vw, 32px); }
.wv-demo__head { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wv-demo__chip {
display: inline-flex;
gap: 8px;
align-items: center;
align-self: flex-start;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--surface-card);
border: var(--hairline);
font-size: 13.5px;
font-weight: var(--weight-semibold);
color: var(--text-link);
}
.wv-demo__title { margin: 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--text-heading); }
/* The flag stays beside the heading, centred on it, and never wraps onto a
line of its own — ours is the legacy page's heading, which wraps on a phone. */
.wv-demo--page .wv-demo__title { display: flex; gap: 16px; align-items: center; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.wv-demo__flag { object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--border-hairline); }
.wv-demo__title .wv-demo__flag { flex: none; width: 48px; height: 36px; border-radius: 5px; }
.wv-demo__intro { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.wv-demo__notice {
margin: 0;
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 20px;
border-radius: var(--radius-lg);
background: var(--state-warning-subtle);
border: 1px solid color-mix(in oklab, var(--state-warning) 45%, transparent);
color: var(--state-warning-text);
}
.wv-demo__notice > .wv-i { flex: 0 0 auto; color: var(--state-warning); }
.wv-demo__notice > div { display: flex; flex-direction: column; gap: 2px; }
.wv-demo__notice strong { font-size: 16.5px; font-weight: var(--weight-semibold); }
.wv-demo__notice span { font-size: 14.5px; line-height: 1.5; }
.wv-demo__frame { border: var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-3); }
.wv-demo__engine { min-height: 480px; }
/* The Pack Your Tour booking widget (/packyourtour/). It styles itself inside a
Shadow DOM; this is only the box it mounts into. Also inlined on the page. */
.wv-pyt { padding-block: clamp(16px, 3vw, 40px) clamp(44px, 6vw, 88px); }
.wv-pyt__widget { min-height: 640px; }
.wv-demo__others-title { margin: 0 0 14px; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.02em; color: var(--text-heading); }
.wv-demo__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.wv-demo__other {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-md);
color: var(--text-heading);
font-size: 15px;
font-weight: var(--weight-semibold);
transition: var(--transition-control);
}
.wv-demo__other:hover { border-color: var(--text-link); color: var(--text-heading); text-decoration: none; }
.wv-demo__other.is-current { border-color: var(--text-link); box-shadow: inset 0 0 0 1px var(--text-link); }
.wv-demo__other .wv-demo__flag { flex: 0 0 auto; width: 30px; height: 22px; }
.wv-demo__other small { margin-left: auto; font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); }
/* The overview page shares .wv-demo with the pages. Its box-changing rules are
also inlined in demo/overview.html.twig (title, sub, lead); change both. */
.wv-demo__sub { margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.3; color: var(--text-heading); font-weight: var(--weight-medium); }
.wv-demo__lead { margin: 0; max-width: 72ch; color: var(--text-body); }
.wv-demo__list-title { margin: clamp(10px, 2vw, 24px) 0 0; color: var(--text-heading); }
.wv-demo__note { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.wv-demo__region { margin-top: clamp(8px, 1.5vw, 16px); }
.wv-demo__region-name { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 20px; color: var(--text-heading); }
.wv-dm--op .wv-op__logo { grid-row: 1 / 3; width: 96px; margin-left: 0; }
/* --- article listing ----------------------------------------------------- */
.wv-grid--flush { margin-top: 0; }
.wv-featured {
padding-bottom: clamp(32px, 4vw, 64px);
margin-bottom: clamp(32px, 4vw, 64px);
border-bottom: var(--hairline);
}
.wv-featured .wv-h3 a { color: var(--text-heading); }
.wv-featured .wv-h3 a:hover { color: var(--text-link-hover); text-decoration: none; }
.wv-empty {
padding: var(--space-11) var(--space-6);
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-card);
text-align: center;
color: var(--text-muted);
}
.wv-strip { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.wv-actions--center { justify-content: center; }
/* --- article body -------------------------------------------------------- */
.wv-prose { max-width: var(--measure-prose); font-size: 16px; line-height: 1.65; color: var(--text-body); }
.wv-prose > * + * { margin-top: clamp(18px, 2.4vw, 26px); }
.wv-prose h2 {
font-size: clamp(21px, 2.2vw, 26px);
line-height: 1.2;
letter-spacing: -0.02em;
margin-top: clamp(26px, 3vw, 36px);
}
.wv-prose h3 { font-size: var(--text-h4); line-height: 1.3; margin-top: clamp(22px, 2.6vw, 30px); }
.wv-prose ul, .wv-prose ol { padding-left: var(--space-6); }
.wv-prose li + li { margin-top: var(--space-2); }
.wv-prose a { text-decoration: underline; text-underline-offset: 2px; }
.wv-prose blockquote {
margin: 0;
padding-left: var(--space-6);
border-left: 2px solid var(--brand);
font-size: var(--text-h3);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-heading);
font-weight: var(--weight-medium);
color: var(--text-display);
}
.wv-prose figure { margin: 0; }
.wv-prose figcaption { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.wv-prose__lead { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--text-strong); max-width: none; }
/* blog-article/BlogArticle.dc.html's header: title and meta beside a 4:3 lead
image, 1080px wide, stacking under 760px. */
.wv-article-head {
max-width: 1080px;
padding-block: clamp(28px, 4vw, 56px) 0;
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: clamp(20px, 4vw, 48px);
align-items: center;
}
.wv-article-head--solo { grid-template-columns: minmax(0, 1fr); }
.wv-article-head__text { min-width: 0; }
.wv-article-head__media {
position: relative;
aspect-ratio: 4 / 3;
width: 100%;
max-width: 420px;
justify-self: end;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--surface-sunken);
}
/* Pinned rather than height: 100%, for the reason the card's picture is. */
.wv-article-head__media > picture { position: absolute; inset: 0; }
.wv-article-head__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
.wv-article-head { grid-template-columns: minmax(0, 1fr); }
.wv-article-head__media { justify-self: start; }
}
/* The prose column: lead, body, tags and the closing promo, spaced by one gap
as the canvas's flex column is. */
.wv-article__body {
padding-block: clamp(28px, 4vw, 56px) clamp(44px, 6vw, 88px);
display: flex;
flex-direction: column;
gap: clamp(18px, 2.4vw, 26px);
}
/* The inline call to action closing the article. The rule was lost in the
plan-0003 stylesheet rewrite while the markup stayed, so the panel rendered
as bare text run on from the last paragraph. */
.wv-promo {
background: var(--surface-sunken);
border-radius: var(--radius-card);
padding: clamp(20px, 3vw, 40px);
display: flex;
gap: clamp(16px, 3vw, 32px);
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 8px;
}
/* The text side gives way before the button does, so the button stays beside
the title and the title wraps — the canvas's arrangement — until the panel is
too narrow for both. */
.wv-promo > :first-child { flex: 1 1 16rem; min-width: 0; }
.wv-promo__title {
font-size: var(--text-h4);
font-weight: var(--weight-semibold);
color: var(--text-heading);
letter-spacing: var(--tracking-heading);
}
.wv-article__meta {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
font-family: var(--font-data);
font-size: var(--text-xs);
color: var(--text-muted);
}
/* --- product page (canvas v3: shared/product-hero.css + product-*.dc.html) --
*
* The canvas styles these with `var(--blue-50)` and `var(--blue-600)` straight
* off the ramp. Here they are `--brand-subtle` and `--text-link`, which resolve
* to the same values in light and follow the scheme in dark.
*/
/* A 7% wash of the brand over the page — the hero's and the funnel's ground. */
.wv-ph, .wv-fn { background: color-mix(in oklch, var(--brand) 7%, var(--surface-page)); }
.wv-ph { overflow: hidden; border-bottom: var(--hairline); }
.wv-ph__in {
max-width: var(--container-max);
margin: 0 auto;
padding: clamp(20px, 2.6vw, 36px) var(--gutter) clamp(36px, 5vw, 64px);
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.wv-ph__txt { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); align-items: flex-start; }
.wv-ph__chip {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 4px;
padding: 7px 16px 7px 8px;
font-size: 15px;
font-weight: var(--weight-semibold);
letter-spacing: -0.005em;
color: var(--text-heading);
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-pill);
}
.wv-ph__chip-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-on); }
.wv-ph__title {
margin: 0;
font-size: clamp(32px, 4.2vw, 56px);
line-height: 1.04;
letter-spacing: -0.035em;
font-weight: var(--weight-semibold);
color: var(--text-heading);
max-width: 20ch;
text-wrap: balance;
overflow-wrap: anywhere;
}
.wv-ph__lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--text-body); max-width: 52ch; text-wrap: pretty; }
.wv-ph__actions { padding-top: 6px; }
.wv-ph__art {
flex: 1 1 380px;
min-width: 0;
max-width: 560px;
position: relative;
aspect-ratio: 5 / 4;
border-radius: 14px;
box-shadow: var(--shadow-2);
background: var(--surface-sunken);
}
.wv-ph__photo, .wv-ph__photo img { display: block; width: 100%; height: 100%; }
.wv-ph__photo img { object-fit: cover; border-radius: 14px; }
.wv-ph__badge {
position: absolute;
left: -14px;
bottom: 28px;
width: 64px;
height: 64px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--surface-card);
color: var(--brand);
box-shadow: var(--shadow-2);
pointer-events: none;
}
@media (max-width: 900px) {
.wv-ph__art { flex-basis: 100%; max-width: 640px; aspect-ratio: 16 / 10; }
.wv-ph__badge { left: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 12px; }
.wv-ph__badge .wv-i { width: 26px; height: 26px; }
}
/* The switcher: a row of links that scrolls sideways rather than wrapping. */
.wv-sw { border-top: var(--hairline); }
.wv-sw__row {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--gutter);
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.wv-sw__row::-webkit-scrollbar { display: none; }
.wv-sw__item {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 0 16px;
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--text-muted);
border-bottom: 3px solid transparent;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.wv-sw__item:hover { color: var(--text-link); text-decoration: none; }
.wv-sw__item[aria-current] { color: var(--text-link); border-bottom-color: var(--text-link); font-weight: var(--weight-semibold); }
/* The icon square every card on these pages leads with. */
.wv-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; background: var(--brand-subtle); color: var(--text-link); }
/* A checked list: one tick per line, the tick on the text's first line. */
.wv-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wv-ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.wv-ticks .wv-i { color: var(--text-link); margin-top: 4px; flex: 0 0 auto; }
.wv-ticks--answer { margin: 12px 0 0; gap: 7px; }
.wv-ticks b { font-weight: var(--weight-semibold); color: var(--text-heading); }
.wv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wv-chips li {
display: inline-flex;
gap: 6px;
align-items: center;
font-size: 13.5px;
color: var(--text-strong);
background: var(--surface-sunken);
border: var(--hairline);
border-radius: var(--radius-pill);
padding: 4px 11px;
}
.wv-chips .wv-i { color: var(--text-link); }
.wv-chips--answer { margin-top: 12px; }
/* Features. */
.wv-mf { max-width: var(--container-max); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.wv-mf__intro { display: flex; flex-wrap: wrap; gap: 24px clamp(28px, 4vw, 56px); align-items: flex-end; }
.wv-mf__intro > .wv-heading { flex: 2 1 520px; min-width: 0; }
.wv-mf__stat { flex: 1 1 240px; max-width: 340px; background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.wv-mf__num { font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: var(--weight-semibold); letter-spacing: -0.03em; color: var(--text-link); }
.wv-mf__stat p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.wv-mf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.wv-mf__card { background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.wv-mf__card--wide { grid-column: span 2; }
.wv-mf__card--full { grid-column: 1 / -1; }
.wv-mf__card--hl { border-color: color-mix(in oklch, var(--text-link) 40%, var(--border-hairline)); background: color-mix(in oklch, var(--brand) 5%, var(--surface-card)); }
@media (max-width: 1100px) { .wv-mf__card--wide, .wv-mf__card--hl { grid-column: 1 / -1; } }
.wv-mf__title { margin: 4px 0 0; font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.015em; color: var(--text-heading); }
.wv-mf__split { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-start; }
.wv-mf__split > div { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wv-mf__split > ul { flex: 1 1 240px; }
.wv-mf__split p { margin: 0; font-size: 15px; color: var(--text-body); }
.wv-mf__more { margin-top: auto; padding-top: 6px; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: var(--weight-medium); color: var(--text-link); }
.wv-mf__more:hover { color: var(--text-link-hover); text-decoration: none; }
/* The inquiry funnel: four cards joined by chevrons. */
.wv-fn { border-top: var(--hairline); }
.wv-fn__steps { list-style: none; margin: clamp(24px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wv-fn__step { position: relative; background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 10px; }
.wv-fn__step:not(:last-child)::after {
content: "";
position: absolute;
right: -12px;
top: 44px;
width: 10px;
height: 10px;
border-top: 2px solid var(--text-link);
border-right: 2px solid var(--text-link);
transform: rotate(45deg);
z-index: 1;
}
.wv-fn__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wv-fn__n { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.wv-fn__title { margin: 0; font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.015em; color: var(--text-heading); }
.wv-fn__body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.wv-fn__chips { margin-top: auto; padding-top: 6px; }
@media (max-width: 1040px) {
.wv-fn__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wv-fn__step::after { display: none; }
}
@media (max-width: 560px) { .wv-fn__steps { grid-template-columns: minmax(0, 1fr); } }
/* Suppliers, operators and cruise lines. Names are set in type: the canvas's
logo slots are empty and no licensed marks were supplied. */
.wv-band--ruled-both { border-block: var(--hairline); }
.wv-sup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.wv-sup { background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px; transition: border-color var(--dur-fast), box-shadow var(--dur-base); }
.wv-sup:hover { border-color: color-mix(in oklch, var(--text-link) 45%, var(--border-hairline)); box-shadow: var(--shadow-2); }
.wv-sup__name, .wv-op__name, .wv-cr__name { margin: 0; font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -0.015em; color: var(--text-heading); }
.wv-sup__body, .wv-cr__body { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.wv-sup__h2 { margin: clamp(48px, 6vw, 80px) 0 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.03em; font-weight: var(--weight-semibold); color: var(--text-heading); }
.wv-op__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.wv-op { background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-height: 150px; }
.wv-op > .wv-op__name { margin-top: auto; }
/* The canvas's 140x48 logo slot. The plate is white in both schemes: an
operator's mark is drawn for a light ground (Join Up's navy wordmark vanishes
on the dark card), and recolouring someone else's logo is not ours to do. In
light it is the card's own colour, so it reads as no plate at all. */
.wv-op__logo, .wv-sup__logo { display: flex; align-items: center; width: 140px; height: 48px; padding: 4px 8px; margin-left: -8px; border-radius: var(--radius-sm); background: var(--bone-0); }
.wv-op__logo img, .wv-sup__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.wv-sup__logo--none { background: none; }
.wv-op--add { border-style: dashed; color: var(--text-body); transition: border-color var(--dur-fast); }
.wv-op--add:hover { border-color: var(--text-link); color: var(--text-body); text-decoration: none; }
.wv-op--add .wv-op__name { margin-top: auto; margin-bottom: -8px; font-size: 17px; }
.wv-op__note { font-size: 13.5px; color: var(--text-muted); }
.wv-cr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.wv-cr__main { background: var(--surface-card); border: var(--hairline); border-radius: var(--radius-card); padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.wv-cr__name { font-size: 22px; }
.wv-cr__body { font-size: 15px; }
.wv-cr__live { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: var(--weight-semibold); color: var(--state-success-text); }
@media (max-width: 760px) { .wv-cr { grid-template-columns: minmax(0, 1fr); } }
/* Demos: a flag per country. A pending one is not a link and reads as such.
`.wv-dm--off` is asserted by PromoPagesTest; the name is load-bearing. */
.wv-dm__grid { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.wv-dm {
height: 100%;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
row-gap: 2px;
align-items: center;
padding: 16px 18px;
background: var(--surface-card);
border: var(--hairline);
border-radius: var(--radius-card);
color: var(--text-heading);
transition: border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-base);
}
.wv-dm__flag { grid-row: 1 / 3; width: 36px; height: 27px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--border-hairline); }
.wv-dm__name { font-size: 16px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.wv-dm__state { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--text-link); display: inline-flex; gap: 5px; align-items: center; }
.wv-dm__state .wv-i { transition: transform var(--dur-fast); }
a.wv-dm:hover { border-color: var(--text-link); box-shadow: var(--shadow-3); transform: translateY(-2px); color: var(--text-heading); text-decoration: none; }
a.wv-dm:hover .wv-dm__state .wv-i { transform: translate(2px, -2px); }
.wv-dm--off .wv-dm__name { color: var(--text-muted); }
.wv-dm--off .wv-dm__state { color: var(--text-muted); }
.wv-dm--off .wv-dm__flag { filter: grayscale(0.6); opacity: 0.7; }
/* The FAQ: topics on the left, grouped disclosures on the right. The topic
list becomes a row of pills on a phone. */
.wv-fq { max-width: var(--container-max); margin: 0 auto; padding: var(--section-y) var(--gutter); display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 44px); }
.wv-fq__head { max-width: 760px; }
.wv-fq__body { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; }
.wv-fq__nav { flex: 1 1 240px; min-width: 0; max-width: 300px; position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 2px; border-left: var(--hairline); }
.wv-fq__nav a { display: flex; gap: 10px; align-items: center; padding: 9px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; color: var(--text-body); transition: color var(--dur-fast), border-color var(--dur-fast); }
.wv-fq__nav .wv-i { color: var(--text-muted); flex: 0 0 auto; }
.wv-fq__nav a:hover { color: var(--text-link); border-left-color: var(--text-link); text-decoration: none; }
.wv-fq__nav a:hover .wv-i { color: var(--text-link); }
.wv-fq__groups { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.wv-fq__group { scroll-margin-top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 6px; }
.wv-fq__topic { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-link); }
.wv-fq .wv-faq__a p { margin: 0; }
.wv-fq .wv-faq__a p + p { margin-top: 12px; }
@media (max-width: 760px) {
.wv-fq__nav { position: static; max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0; }
.wv-fq__nav a { margin: 0; border: var(--hairline); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 14px; }
.wv-fq__nav a:hover { border-color: var(--text-link); }
}
/* The inquiry band: a raised card on the brand ground. */
.wv-inq {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
padding: clamp(28px, 4.4vw, 64px);
background: var(--surface-card);
border-radius: 12px;
box-shadow: var(--shadow-3);
}
.wv-inq__copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); align-items: flex-start; }
.wv-inq__title { margin: 0; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: var(--weight-semibold); color: var(--text-heading); text-wrap: balance; max-width: 20ch; overflow-wrap: anywhere; }
.wv-inq__lead { margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--text-body); max-width: 52ch; text-wrap: pretty; }
.wv-inq__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--text-muted); }
.wv-inq__meta li { display: flex; gap: 8px; align-items: center; }
.wv-inq__meta .wv-i { color: var(--brand); }
.wv-inq__topics { background: var(--surface-sunken); border-radius: var(--radius-card); padding: clamp(20px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.wv-inq__label { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.wv-inq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: inquiry; }
.wv-inq__list li { position: relative; padding-left: 46px; display: flex; flex-direction: column; gap: 3px; counter-increment: inquiry; }
.wv-inq__list li::before {
content: counter(inquiry, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
width: 32px;
height: 24px;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 13px;
color: var(--brand);
border: var(--hairline);
border-radius: 6px;
background: var(--surface-card);
}
.wv-inq__list b { font-size: 16px; font-weight: var(--weight-semibold); color: var(--text-heading); }
.wv-inq__list span { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 900px) { .wv-inq { grid-template-columns: minmax(0, 1fr); } }
/* --- solution finder (canvas: solution-finder/, shared/solution-wizard.js) --
*
* Without JavaScript `.wv-sf` is a long form: every step shown, nothing that
* only makes sense in the wizard. The `finder` controller adds `--wizard`, and
* from then on one step is visible at a time.
*/
.wv-sf-page { padding-block: clamp(16px, 2vw, 28px) clamp(44px, 6vw, 96px); display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.wv-sf-page__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.wv-sf-page__title { margin: 0; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.035em; font-weight: var(--weight-semibold); color: var(--text-heading); text-wrap: balance; overflow-wrap: anywhere; }
.wv-sf-page__lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.wv-sf-page__head .wv-inq__meta { padding-top: 4px; }
.wv-sf {
margin-top: clamp(8px, 1.4vw, 16px);
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
background: var(--surface-card);
border: var(--hairline);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-2);
}
.wv-sf:not(.wv-sf--wizard), .wv-sf--full, .wv-sf--done { grid-template-columns: minmax(0, 1fr); }
.wv-sf:not(.wv-sf--wizard) [data-wizard-only], .wv-sf--full .wv-sf__kit { display: none; }
.wv-sf--wizard .wv-sf__step:not(.is-current) { display: none; }
.wv-sf__main { padding: clamp(20px, 3.4vw, 48px); display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); min-width: 0; }
.wv-sf--wizard .wv-sf__main { min-height: 560px; }
.wv-sf:not(.wv-sf--wizard) .wv-sf__step + .wv-sf__step { padding-top: clamp(20px, 2.4vw, 28px); border-top: var(--hairline); }
.wv-sf__route { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.wv-sf__track { position: relative; flex: 1; height: 22px; }
.wv-sf__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--border-hairline); }
.wv-sf__fill { position: absolute; left: 0; top: 50%; width: 0; height: 2px; margin-top: -1px; background: var(--brand); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wv-sf__plane { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%) rotate(45deg); color: var(--brand); line-height: 0; transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wv-sf__dot { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--border-hairline); transition: background var(--dur-base), border-color var(--dur-base); }
.wv-sf__dot.is-on { border-color: var(--brand); background: var(--brand); }
.wv-sf__step { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
.wv-sf--wizard .wv-sf__step.is-current { animation: wv-sf-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wv-sf--wizard .wv-sf__step.is-back { animation-name: wv-sf-back; }
@keyframes wv-sf-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wv-sf-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.wv-sf__legend { padding: 0; margin-bottom: 10px; display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
/* A rendered