elements, and their default 1em margins were * added on top of the column gap. Links in Company have no margins. * Goes back to: .site-footer__col in the footer styles. */ .site-footer__col p { margin: 0; } .site-footer__col p:not(.site-footer__col-title) { font-size: inherit; line-height: inherit; } .site-footer__col p.site-footer__col-title { margin: 0 0 var(--space-1); } /* Tagline and address break where the text has a newline: "Premium car rental in Prague." / "A curated fleet of …" and "Třebohostická 3069/14," / "Prague 10 – Strašnice" / "100 00 Prague". The newlines live in the locale strings (tagline, addressLine1). */ .site-footer__tagline, .site-footer__col p:not(.site-footer__col-title) { white-space: pre-line; } .site-footer__tagline { max-width: none; } /* * Home "Handover without a counter": no full-width black band. * The section now sits on the page background and the card itself is dark, * exactly like the "Routes, cars and the craft" magazine block. * Goes back to: .handover / .handover__frame / .handover__media / .handover__body. */ .handover { background: transparent; color: inherit; padding: 24px 0; } .handover__frame { background: var(--ink); color: #fff; border-radius: 30px; min-height: 620px; } .handover__media:after { background: linear-gradient(90deg, #0000 58%, #11151585); } .handover__body { padding: clamp(34px, 5vw, 70px); } @media (width <= 820px) { .handover__frame { border-radius: 26px; min-height: 0; } .handover__media:after { background: linear-gradient(#0000 52%, #11151585); height: auto; inset: 0; } .handover__body { padding: 30px 24px 34px; } } /* * Magazine article tables. * They reuse .price-table, which is built for short price grids: every cell * nowrap and right-aligned. Article tables carry sentences ("What it means * on the route"), so the last column ran off the card with its header out * of sight, and car names were squeezed into three lines. * Now: text wraps, everything left-aligned, the car column keeps a sane * width, long-text columns get room. On phones each row becomes a card with * the column names as labels (labels are set by design.js; in the repo the * markdown table renderer should emit data-label on each cell). * Goes back to: .article-table styles (leave .price-table itself alone). */ .article-table { margin-block: 28px 36px; border-radius: 20px; -webkit-overflow-scrolling: touch; } .article-table .price-table { white-space: normal; font-size: .92rem; line-height: 1.45; min-width: 100%; } .article-table .price-table th, .article-table .price-table td { text-align: left; vertical-align: top; padding: 13px 14px; } .article-table .price-table thead th { white-space: normal; padding-top: 16px; padding-bottom: 12px; background: color-mix(in srgb, var(--paper) 70%, var(--ink) 4%); } /* Car / first column: bold, never narrower than a model name. */ .article-table .price-table tbody th { font-weight: 650; min-width: 10em; width: 20%; } /* Value columns: wide enough for "250 km/h" on one line, wrap only if the table would otherwise overflow (long words in de / ru / uk). */ .article-table .price-table td { min-width: 6em; hyphens: auto; overflow-wrap: break-word; } .article-table .price-table thead th { hyphens: auto; } /* ...the last column is the commentary one: it wraps and takes the rest. */ .article-table .price-table td:last-child { white-space: normal; min-width: 11em; color: var(--muted); } .article-table .price-table tbody tr:hover > * { background: color-mix(in srgb, var(--paper) 80%, var(--gold) 6%); } /* Narrow reading column: rows turn into stacked cards, no sideways scrolling. Measured against the column itself (container query), not the window, so it also kicks in on laptops next to the "Other stories" island. Wide tables (5+ columns) switch earlier than 3–4 column ones. */ .article-prose { container-type: inline-size; container-name: prose; } @container prose (width < 820px) { .article-table:has(thead th:nth-child(5)) { border: 0; background: none; border-radius: 0; overflow: visible; } .article-table:has(thead th:nth-child(5)) .price-table, .article-table:has(thead th:nth-child(5)) .price-table tbody, .article-table:has(thead th:nth-child(5)) .price-table tr, .article-table:has(thead th:nth-child(5)) .price-table th, .article-table:has(thead th:nth-child(5)) .price-table td { display: block; width: auto; min-width: 0; } .article-table:has(thead th:nth-child(5)) .price-table thead { display: none; } .article-table:has(thead th:nth-child(5)) .price-table tr { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--md-sys-color-surface-container-lowest, #fff); } .article-table:has(thead th:nth-child(5)) .price-table tbody th { padding: 0 0 8px; border: 0; font-size: 1rem; } .article-table:has(thead th:nth-child(5)) .price-table td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; border-top: 1px solid var(--line); white-space: normal; color: inherit; } .article-table:has(thead th:nth-child(5)) .price-table td::before { content: attr(data-label); color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; } .article-table:has(thead th:nth-child(5)) .price-table tbody tr:hover > * { background: none; } } @container prose (width < 560px) { .article-table { border: 0; background: none; border-radius: 0; overflow: visible; } .article-table .price-table, .article-table .price-table tbody, .article-table .price-table tr, .article-table .price-table th, .article-table .price-table td { display: block; width: auto; min-width: 0; } .article-table .price-table thead { display: none; } .article-table .price-table tr { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--md-sys-color-surface-container-lowest, #fff); } .article-table .price-table tbody th { padding: 0 0 8px; border: 0; font-size: 1rem; } .article-table .price-table td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; border-top: 1px solid var(--line); white-space: normal; color: inherit; } .article-table .price-table td::before { content: attr(data-label); color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; } .article-table .price-table tbody tr:hover > * { background: none; } } /* Short laptop screens: drop the "Review · 7 min" line so all ten links still fit on screen without a scrollbar inside the island. */ @media (width > 1080px) and (height < 820px) { .story-island__meta { display: none; } .story-island li a { padding: 8px 0; } } /* * Links inside articles — car names now link to their fleet page, in the * text and in tables. Links had no styling at all (global `a` resets * colour and underline), so they were invisible. * Goes back to: .article-prose styles. */ .article-prose a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .22em; transition: color .15s, text-decoration-color .15s; } .article-prose a:hover { color: var(--gold-deep, var(--gold)); text-decoration-color: currentColor; } .article-table .price-table a { font-weight: 600; } .article-table .price-table tbody th a { font-weight: inherit; } /* * Vouchers page, rebuilt. * Before: a grey hero ("Vouchers / Gift the drive / …") that repeated the * section right below it, then the amount picker further down with a small * dark box as the "voucher". * Now the page opens with "Value toward any rental" and the amount picker in * one block, with a vertical MASONS voucher on the right that follows the * chosen amount (it is the same live .voucher-preview, restyled as a ticket). * Scoped with :has(.voucher-picker), so no other page is touched. * * Mechanics:

becomes a two-column grid; the picker section and its * wrappers use display: contents so the voucher can sit in the right column * next to both the intro text and the picker, and stay sticky while you pick. * In the repo this should simply be one section with two columns, and the * h1 should move to "Value toward any rental" (the old hero goes away). */ main:has(.voucher-picker) { --v-shell: min(1240px, 100% - 64px); --v-card: 360px; --v-gap: clamp(40px, 6vw, 96px); display: grid; grid-template-columns: [full-start] minmax(0, 1fr) [text-start] minmax(0, calc(var(--v-shell) - var(--v-card) - var(--v-gap))) [text-end] var(--v-gap) [card-start] var(--v-card) [card-end] minmax(0, 1fr) [full-end]; align-content: start; } main:has(.voucher-picker) > * { grid-column: full; } main:has(.voucher-picker) > section:nth-of-type(3) { grid-row: 5; } main:has(.voucher-picker) > section:nth-of-type(4) { grid-row: 6; } main:has(.voucher-picker) > section:nth-of-type(n+5) { grid-row: auto; } /* The old hero: kept for the h1 (SEO, screen readers), not shown. */ main:has(.voucher-picker) > .page-hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; } /* 1 — intro: "What the voucher covers / Value toward any rental". */ main:has(.voucher-picker) > .section:nth-of-type(1) { grid-column: text; grid-row: 2; padding: calc(var(--app-bar-height) + 56px) 0 8px; } main:has(.voucher-picker) > .section:nth-of-type(1) .shell { width: auto; margin: 0; } main:has(.voucher-picker) > .section:nth-of-type(1) h2 { font-size: clamp(2.8rem, 5.4vw, 5.2rem); line-height: .98; margin-bottom: 0; } main:has(.voucher-picker) > .section:nth-of-type(1) .page-prose { max-width: 62ch; } /* 2 — picker: flattened into the same two columns. */ main:has(.voucher-picker) > .section--soft, main:has(.voucher-picker) > .section--soft > .shell, main:has(.voucher-picker) .voucher-picker { display: contents; } main:has(.voucher-picker) > .section--soft .section-heading { grid-column: text; grid-row: 3; margin: 28px 0 18px; padding-top: 28px; border-top: 1px solid var(--line); } main:has(.voucher-picker) > .section--soft .section-heading h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; margin: 6px 0 0; } main:has(.voucher-picker) .voucher-picker > div { grid-column: text; grid-row: 4; padding-bottom: clamp(56px, 7vw, 96px); } /* The voucher: vertical ticket, sticky next to the text. */ main:has(.voucher-picker) .voucher-preview { --stub: 150px; grid-column: card; grid-row: 2 / 5; align-self: start; position: sticky; top: calc(var(--app-bar-height) + 32px); margin-top: calc(var(--app-bar-height) + 56px); min-height: 560px; box-sizing: border-box; padding: 34px 32px calc(var(--stub) + 26px); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-align: left; color: #f4efe4; border-radius: 26px; background: /* barcode */ repeating-linear-gradient(90deg, #f4efe4 0 2px, transparent 2px 4px, #f4efe4 4px 5px, transparent 5px 8px, #f4efe4 8px 11px, transparent 11px 12px, #f4efe4 12px 13px, transparent 13px 16px) 32px calc(100% - 58px) / calc(100% - 64px) 44px no-repeat, /* logo */ url(/masons/logo-primary.svg) 32px 34px / 128px auto no-repeat, /* brand art */ url(/masons/voucher-dark.svg) 72% 40% / auto 118% no-repeat, #100e0a; /* perforation notches on both edges */ -webkit-mask: radial-gradient(circle 14px at 0 calc(100% - var(--stub)), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% calc(100% - var(--stub)), #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 calc(100% - var(--stub)), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% calc(100% - var(--stub)), #0000 98%, #000) right / 51% 100% no-repeat; filter: drop-shadow(0 24px 40px rgba(17, 21, 21, .22)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); } main:has(.voucher-picker) .voucher-preview:hover { transform: translateY(-4px) rotate(-.6deg); } /* dashed tear line + code on the stub */ main:has(.voucher-picker) .voucher-preview::after { content: "MSN — •••• ••••"; position: absolute; left: 32px; right: 32px; bottom: 24px; height: calc(var(--stub) - 24px); border-top: 2px dashed rgba(244, 239, 228, .28); display: flex; align-items: flex-end; font: 600 .78rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .16em; color: rgba(244, 239, 228, .7); } main:has(.voucher-picker) .voucher-preview .section-label { color: var(--gold); margin: 0 0 4px; } main:has(.voucher-picker) .voucher-preview__amount { font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.03em; color: #fff; } main:has(.voucher-picker) .voucher-preview__tagline { margin-top: 8px; font-size: .95rem; opacity: .78; } /* Tablet and phone: one column, voucher right after the intro text. */ @media (width <= 900px) { main:has(.voucher-picker) { --v-shell: calc(100% - 40px); grid-template-columns: [full-start] 20px [text-start card-start] minmax(0, 1fr) [text-end card-end] 20px [full-end]; } main:has(.voucher-picker) > .section:nth-of-type(1) { padding-top: calc(var(--app-bar-height) + 32px); } main:has(.voucher-picker) .voucher-preview { grid-row: 3; position: relative; top: auto; margin: 32px auto 8px; width: min(100%, 340px); min-height: 500px; } main:has(.voucher-picker) > .section--soft .section-heading { grid-row: 4; } main:has(.voucher-picker) .voucher-picker > div { grid-row: 5; } main:has(.voucher-picker) > section:nth-of-type(3) { grid-row: 6; } main:has(.voucher-picker) > section:nth-of-type(4) { grid-row: 7; } } main:has(.voucher-picker) > .section--soft .section-heading { display: block; } main:has(.voucher-picker) > .section--soft .section-heading__support { max-width: 56ch; margin: 10px 0 0; color: var(--muted); } main:has(.voucher-picker) .voucher-picker .section__more { text-align: left; justify-content: flex-start; margin: 26px 0 0; } main:has(.voucher-picker) .voucher-picker .section__note { margin-top: 14px; max-width: 56ch; } /* Interactive MASONS voucher */ .voucher-builder { display: grid; gap: 48px; align-items: start; color: var(--ink); } .voucher-builder *, .voucher-builder *::before, .voucher-builder *::after { box-sizing: border-box; } .voucher-builder__stage { min-width: 0; text-align: center; } .voucher-builder__caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 24px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; } .voucher-builder__caption > span { width: 6px; height: 6px; background: var(--gold-deep); border-radius: 50%; } .gift-card { position: relative; width: min(100%, 390px); min-height: 580px; margin: 0 auto; padding: clamp(22px, 4vw, 32px); border: 1px solid #d4cbb7; border-top: 4px solid var(--gold-deep); border-radius: 4px; background: linear-gradient(135deg, #fffdf6, #f2ecdf); box-shadow: 0 22px 42px -22px rgb(60 47 20 / 35%); text-align: left; transition: transform 250ms ease, box-shadow 250ms ease; } .gift-card::after { content: ""; pointer-events: none; position: absolute; inset: 9px; border: 1px solid rgb(157 129 36 / 18%); } .gift-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .gift-card__brand { font-family: "Montserrat Variable", sans-serif; letter-spacing: 0.23em; font-size: 20px; font-weight: 500; } .gift-card__brand > span { display: block; margin-top: 4px; text-align: center; font-size: 8px; letter-spacing: 0.6em; color: #806926; } .gift-card__edition { font-size: 8px; line-height: 1.8; letter-spacing: 0.08em; text-align: right; color: #655e4f; } .gift-card__title { margin: 38px 0 28px; font-size: clamp(36px, 7vw, 54px); font-weight: 650; line-height: 0.98; letter-spacing: -0.045em; } .gift-card__title > span { color: #806926; font-weight: 350; } .gift-card__label { color: #655e4f; font-size: 9px; letter-spacing: 0.18em; } .gift-card__recipient { font-size: 22px; line-height: 1.2; font-weight: 550; margin: 6px 0 10px; overflow-wrap: anywhere; } .gift-card__wish { font-size: 14px; line-height: 1.5; margin: 0; min-height: 42px; white-space: pre-wrap; overflow-wrap: anywhere; } .gift-card__wish--empty { color: #706a5f; } .gift-card__value { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; } .gift-card__amount { font-size: clamp(32px, 6.5vw, 54px); line-height: 1.05; font-weight: 600; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; } .gift-card__currency { font-size: 14px; font-weight: 500; } .gift-card__purpose { margin: 10px 0 25px; font-size: 11px; letter-spacing: 0.04em; } .gift-card__stub { border-top: 1px dashed #c4b996; padding-top: 22px; } .gift-card__barcode { width: 100%; height: 33px; opacity: 0.85; background: repeating-linear-gradient( 90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 19px, var(--ink) 19px 22px, transparent 22px 24px, var(--ink) 24px 25px, transparent 25px 29px ); } .gift-card__serial { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 8px; letter-spacing: 0.035em; } .gift-card__stub > p { margin: 14px 0 0; font-size: 10px; color: #655e4f; } .voucher-builder__preview-note { max-width: 350px; margin: 22px auto 0; font-size: 12px; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); } .voucher-builder__controls { min-width: 0; } .voucher-fieldset { min-width: 0; padding: 0 0 28px; margin: 0 0 26px; border: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); } .voucher-fieldset legend { display: flex; gap: 12px; align-items: baseline; padding: 0; margin-bottom: 16px; font-weight: 600; font-size: 20px; letter-spacing: -0.025em; } .voucher-fieldset legend > span { font-size: 11px; letter-spacing: 0.08em; color: #806926; } .voucher-builder__hint { font-size: 13px; line-height: 1.6; margin: 0 0 18px; color: var(--md-sys-color-on-surface-variant); } .voucher-options { display: grid; gap: 8px; } .voucher-options--amount { grid-template-columns: repeat(3, minmax(0, 1fr)); } .voucher-option { position: relative; cursor: pointer; min-width: 0; } .voucher-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .voucher-option > span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; font-size: 14px; transition: background 160ms ease, border-color 160ms ease; } .voucher-option input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); } .voucher-option input:focus-visible + span, .voucher-field input:focus-visible, .voucher-field textarea:focus-visible, .voucher-builder__request:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; } .voucher-option:active > span { transform: translateY(1px); } .voucher-field { margin-top: 18px; } .voucher-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 550; } .voucher-field label > span { font-weight: 400; color: var(--md-sys-color-on-surface-variant); } .voucher-field input, .voucher-field textarea { display: block; width: 100%; min-height: 48px; padding: 13px 14px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px; background: var(--md-sys-color-surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; } .voucher-field textarea { resize: vertical; } .voucher-field input::placeholder, .voucher-field textarea::placeholder { color: #787469; } .voucher-field input[aria-invalid="true"] { border-color: var(--md-sys-color-error); } .voucher-field .voucher-builder__hint, .voucher-builder__error { margin: 8px 0 0; font-size: 12px; } .voucher-builder__error { color: var(--md-sys-color-error); } .voucher-builder__count { display: block; text-align: right; margin-top: 6px; font-size: 11px; color: var(--md-sys-color-on-surface-variant); } .voucher-options--delivery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voucher-options--delivery .voucher-option > span { height: 100%; min-height: 84px; padding: 14px; align-items: flex-start; flex-direction: column; gap: 6px; } .voucher-option strong { font-size: 14px; font-weight: 550; } .voucher-option small { font-size: 11px; line-height: 1.4; } .voucher-builder__summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 18px; font-size: 14px; } .voucher-builder__summary strong { font-size: 24px; font-weight: 550; letter-spacing: -0.03em; } .voucher-builder__request { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; min-height: 56px; border-radius: 32px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 16px; margin-bottom: 14px; transition: background 160ms ease; } .voucher-builder__request[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .voucher-builder__request:active { transform: translateY(1px); } @media (hover: hover) { .gift-card:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 0 28px 48px -22px rgb(60 47 20 / 40%); } .voucher-option:hover > span { border-color: var(--gold-deep); } .voucher-builder__request:hover { background: #39372d; } } @media (min-width: 900px) { .voucher-builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); max-width: 1100px; margin-inline: auto; } .voucher-builder__stage { position: sticky; top: 104px; } .voucher-options--amount { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 360px) { .gift-card__edition { display: none; } .gift-card { min-height: 540px; } .voucher-options--delivery { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .gift-card:hover, .voucher-option:active > span, .voucher-builder__request:active { transform: none; } .voucher-builder *, .voucher-builder *::before, .voucher-builder *::after { transition: none; transform: none; } } /* * Vouchers hero, rebuilt. H1 is now "Value toward any rental" (was just * "Vouchers"), with "Gift vouchers" as the eyebrow so the keyword stays at * the top. The lead is the one paragraph that explains what a voucher is; * the old "Gift the drive." line and the separate "What the voucher covers" * section repeated each other and are gone. */ main:has(.voucher-builder) > .page-hero { background: transparent; border-bottom: 0; padding-block: clamp(56px, 8vw, 112px) clamp(32px, 4vw, 56px); } main:has(.voucher-builder) > .page-hero h1 { max-width: 14ch; margin-top: 14px; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .94; letter-spacing: -.055em; text-wrap: balance; } main:has(.voucher-builder) > .page-hero .page-hero__lead { max-width: 60ch; margin-top: clamp(22px, 2.6vw, 34px); font-size: clamp(1.05rem, 1.4vw, 1.25rem); } /* * Vouchers page composition. * Hero: eyebrow + H1 on the left, the lead paragraph on the right, both on * one baseline — no empty right half. Then the builder follows at once: * "Pick the voucher value" becomes a compact row (small H2 + hint) instead * of a second display-size headline, so the voucher and the form are on * screen right away. Section paddings tightened to match. */ main:has(.voucher-builder) > .page-hero { padding-block: clamp(96px, 7vw, 104px) clamp(40px, 5vw, 72px); } main:has(.voucher-builder) > .page-hero > .shell { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; } main:has(.voucher-builder) > .page-hero .section-label { grid-column: 1; } main:has(.voucher-builder) > .page-hero h1 { grid-column: 1; max-width: 12ch; margin-top: 12px; font-size: clamp(3rem, 6.4vw, 6rem); } main:has(.voucher-builder) > .page-hero .page-hero__lead { grid-column: 2; grid-row: 1 / 3; align-self: end; max-width: 44ch; margin: 0 0 .35em; padding-left: clamp(0px, 2vw, 28px); border-left: 1px solid var(--line); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; } /* Builder section: compact heading row, then the two-column builder. */ main:has(.voucher-builder) > .section--soft { padding-top: clamp(40px, 5vw, 64px); } main:has(.voucher-builder) > .section--soft .section-heading { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 28px; margin-bottom: clamp(28px, 4vw, 48px); padding-bottom: 22px; border-bottom: 1px solid var(--line); max-width: 1100px; margin-inline: auto; } main:has(.voucher-builder) > .section--soft .section-heading .section-label { display: none; } main:has(.voucher-builder) > .section--soft .section-heading h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -.02em; line-height: 1.1; } main:has(.voucher-builder) > .section--soft .section-heading__support { font-size: .95rem; color: var(--muted); } .voucher-builder__stage { top: calc(var(--app-bar-height) + 28px); } @media (width <= 900px) { main:has(.voucher-builder) > .page-hero > .shell { grid-template-columns: 1fr; } main:has(.voucher-builder) > .page-hero .page-hero__lead { grid-column: 1; grid-row: auto; margin-top: 22px; padding-left: 0; border-left: 0; } main:has(.voucher-builder) > .section--soft .section-heading { grid-template-columns: 1fr; row-gap: 8px; } } /* Gift card motion (see mountGiftCard in design.js). */ .gc-stage { perspective: 1400px; } .gift-card[data-spin] { transform-style: preserve-3d; will-change: transform; cursor: grab; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .gift-card[data-spin].is-dragging { cursor: grabbing; } .gift-card[data-spin]:focus-visible { box-shadow: 0 0 0 3px var(--gold); } .gift-card[data-spin] > :not(.gc-back):not(.gc-glare) { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .gc-back { position: absolute; inset: -4px -1px -1px -1px; box-sizing: border-box; border: 1px solid #d4cbb7; border-top: 4px solid var(--gold-deep); border-radius: 4px; background: linear-gradient(135deg, #fffdf6, #f2ecdf); transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; text-align: center; color: var(--ink); } .gc-back__logo { position: absolute; left: 50%; top: 84px; width: 200px; height: 50px; transform: translateX(-50%); background: url(/masons/logo-primary-deep.svg) center / contain no-repeat; } .gc-back__amount { position: absolute; left: 0; right: 0; top: 180px; margin: 0; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; } .gc-back__text { position: absolute; left: 40px; right: 40px; top: 250px; margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); } .gc-back__for { position: absolute; left: 32px; right: 32px; bottom: 96px; margin: 0; display: flex; align-items: baseline; gap: 10px; text-align: left; padding-top: 14px; border-top: 1px dashed #b9ad92; font-size: 1.05rem; } .gc-back__for span { color: var(--gold-deep); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .gc-back__for strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gc-back__contact { position: absolute; left: 32px; right: 32px; bottom: 40px; margin: 0; text-align: left; font: 600 .74rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .08em; color: var(--muted); } .gc-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .55), transparent 45%); opacity: 0; transition: opacity .3s; } .gift-card[data-spin].is-dragging .gc-glare { opacity: 1; } .gc-hint { margin: 14px 0 0; text-align: center; font-size: .78rem; color: var(--muted); letter-spacing: .02em; } .gc-hint + .voucher-builder__preview-note { margin-top: 8px; } /* Composition pass 3: everything on one left edge. Lead sits under the H1 (no far-right column); "Pick the voucher value" and its hint stack left-aligned on the same edge; the builder spans the shell instead of a narrower centred box, so the card lines up with the text. */ main:has(.voucher-builder) > .page-hero > .shell { display: block; } main:has(.voucher-builder) > .page-hero h1 { max-width: 12ch; } main:has(.voucher-builder) > .page-hero .page-hero__lead { max-width: 58ch; margin: clamp(22px, 2.6vw, 32px) 0 0; padding-left: 0; border-left: 0; } main:has(.voucher-builder) > .section--soft .section-heading { display: block; max-width: none; margin-inline: 0; padding-bottom: 26px; } main:has(.voucher-builder) > .section--soft .section-heading h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); max-width: 20ch; } main:has(.voucher-builder) > .section--soft .section-heading__support { max-width: 58ch; margin-top: 12px; } main:has(.voucher-builder) .voucher-builder { max-width: none; margin-inline: 0; grid-template-columns: 390px minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); } main:has(.voucher-builder) .voucher-builder__stage { text-align: left; } main:has(.voucher-builder) .voucher-builder__caption { justify-content: flex-start; } main:has(.voucher-builder) .gift-card { margin: 0; } main:has(.voucher-builder) .gc-hint, main:has(.voucher-builder) .voucher-builder__preview-note { text-align: left; max-width: 390px; } @media (width <= 900px) { main:has(.voucher-builder) .voucher-builder { grid-template-columns: 1fr; } } /* Request button: a normal pill, not a full-width bar. Summary ("Voucher value · 10 000 CZK") sits on the same row, button on the right. */ main:has(.voucher-builder) .voucher-builder__summary { margin-bottom: 0; align-items: center; gap: 4px 12px; } main:has(.voucher-builder) .voucher-builder__summary strong { font-size: 26px; } main:has(.voucher-builder) .voucher-builder__request { display: inline-flex; justify-content: center; gap: 10px; width: auto; min-height: 0; padding: 0 24px; height: 52px; border-radius: 999px; font-size: 15px; font-weight: 600; margin: 0; flex: none; } main:has(.voucher-builder) .voucher-builder__request span { font-size: 14px; } /* summary + button share one row */ main:has(.voucher-builder) .voucher-builder__controls:has(.voucher-builder__request) .voucher-builder__summary { float: left; max-width: 55%; margin-right: 24px; padding-top: 2px; } main:has(.voucher-builder) .voucher-builder__request { float: right; } main:has(.voucher-builder) .voucher-builder__request + p, main:has(.voucher-builder) .voucher-builder__note { clear: both; padding-top: 18px; font-size: 13px; color: var(--muted); } @media (width <= 560px) { main:has(.voucher-builder) .voucher-builder__summary { float: none; max-width: none; margin: 0 0 14px; } main:has(.voucher-builder) .voucher-builder__request { float: none; width: 100%; } } /* =========================================================================== * MASONS voucher card (from masons-vouchers.html), replaces the builder's * .gift-card visually. The React card stays in the DOM, hidden, and keeps * receiving the amount / recipient / message; design.js mirrors them here. * Everything is scoped under .mzv so nothing leaks into the rest of the site. * Motion: floats gently; turns only when pressed (drag) or clicked. * ======================================================================== */ .voucher-builder__stage:has(.mzv) .gift-card { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } .mzv { --paper: var(--md-sys-color-surface-container-low, #f5f3ee); --accent: #806b46; --serif: Georgia, "Times New Roman", serif; --ease: cubic-bezier(.22, 1, .36, 1); --card-w: 342px; --card-h: 480px; position: relative; margin: 8px 0 0; color: #242824; } .mzv-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; display: block; } .mzv .voucher-scene { position: relative; perspective: 1500px; width: var(--card-w); height: var(--card-h); z-index: 2; animation: mzv-arrive 1.5s var(--ease) both; } .mzv .voucher-scene:before { content: ""; position: absolute; bottom: -14px; left: 12%; right: 12%; height: 25px; background: #393a2340; filter: blur(19px); border-radius: 50%; animation: mzv-shadow 7s ease-in-out infinite; z-index: -1; } .mzv .voucher-float { width: 100%; height: 100%; animation: mzv-levitate 7s ease-in-out infinite; transform-style: preserve-3d; } .mzv .voucher-tilt { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; cursor: grab; border-radius: 9px; outline-offset: 9px; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .mzv .voucher-tilt.is-dragging { cursor: grabbing; } .mzv .voucher-tilt:focus-visible { outline: 2px solid var(--accent); } .mzv .voucher-flipper { height: 100%; width: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.15s var(--ease); will-change: transform; } .mzv .voucher-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 8px; border: 1px solid #a58e5866; isolation: isolate; box-shadow: 0 18px 44px #27292330, 0 2px 5px #25262326; background: radial-gradient(ellipse at 86% 3%, #3a4031 0%, #242922 48%, #1b201c 100%); color: #eee9dc; --foil: #c7b17e; --card-dim: #c6c9b6; --card-rule: #ada77d40; transition: background .6s, color .5s; text-align: left; } .mzv .voucher-back { transform: rotateY(180deg); } .mzv .voucher-face:after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(116deg, transparent 12%, #f4e4b408 32%, #fff8d41c 40%, transparent 49%, #f9dfa003 76%), radial-gradient(ellipse at 50% 30%, #e8ddba1b, transparent 60%); background-size: 230% 100%, 100% 100%; background-position: 70% 0, 0 0; mix-blend-mode: screen; opacity: .72; animation: mzv-foil 9s ease-in-out infinite; } .mzv .voucher-face:before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .10; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.65' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; } .mzv .voucher-content { position: relative; z-index: 3; padding: 29px 29px 0; height: 100%; box-sizing: border-box; } .mzv .voucher-top { display: flex; align-items: center; justify-content: space-between; } .mzv .voucher-logo { font-size: 17px; font-weight: 600; letter-spacing: .29em; color: var(--foil); line-height: 1; } .mzv .voucher-star { width: 17px; height: 17px; color: var(--foil); } .mzv .voucher-type { font-size: 7px; letter-spacing: .3em; margin: 13px 0 0; color: var(--card-dim); } .mzv .voucher-title { font-family: var(--serif); font-weight: 400; font-size: 45px; line-height: 1.08; letter-spacing: -.035em; margin: 38px 0 0; position: relative; z-index: 2; color: inherit; } .mzv .voucher-title em { font-weight: 400; color: var(--foil); } .mzv .voucher-subtitle { font-size: 8px; color: var(--card-dim); margin: 12px 0 0; letter-spacing: .035em; max-width: 190px; } .mzv .voucher-art { position: absolute; width: 314px; height: 282px; right: -72px; top: 146px; opacity: .7; z-index: 1; color: var(--foil); pointer-events: none; transform: rotate(-6deg); } .mzv .voucher-art path { fill: none; stroke: currentColor; stroke-width: .6; } .mzv .voucher-art .road-line { stroke-width: .55; opacity: .18; } .mzv .voucher-art .outline { opacity: .8; } .mzv .voucher-art .dash { stroke-dasharray: 2 5; opacity: .35; } .mzv .voucher-art circle { fill: none; stroke: currentColor; stroke-width: .6; opacity: .4; } .mzv .voucher-value { position: absolute; left: 29px; right: 29px; bottom: 105px; z-index: 3; } .mzv .voucher-value-label { font-size: 7px; letter-spacing: .2em; color: var(--card-dim); text-transform: uppercase; } .mzv .value-line { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; min-height: 48px; } .mzv .card-amount { font-size: 37px; line-height: 1.35; font-weight: 400; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .mzv .card-currency { font-size: 10px; color: var(--foil); letter-spacing: .12em; } .mzv .voucher-tear { position: absolute; left: 0; right: 0; bottom: 89px; border-top: 1px dashed var(--card-rule); z-index: 3; } .mzv .voucher-tear:before, .mzv .voucher-tear:after { content: ""; position: absolute; background: var(--paper); width: 10px; height: 10px; border-radius: 50%; top: -5px; left: -6px; } .mzv .voucher-tear:after { left: auto; right: -6px; } .mzv .voucher-bottom { position: absolute; bottom: 18px; left: 29px; right: 29px; display: flex; flex-direction: column; gap: 12px; z-index: 3; } .mzv .recipient-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .mzv .recipient-line > div { min-width: 0; flex: 1; } .mzv .recipient-label { font-size: 6px; letter-spacing: .19em; color: var(--card-dim); display: block; } .mzv .card-recipient { font-family: var(--serif); font-size: 15px; margin: 3px 0 0; line-height: 1.2; max-width: 213px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mzv .barcode { height: 21px; width: 37px; background: repeating-linear-gradient(90deg, var(--foil) 0px, var(--foil) 1px, transparent 1px, transparent 3px, var(--foil) 3px, var(--foil) 5px, transparent 5px, transparent 7px); opacity: .55; flex-shrink: 0; } .mzv .voucher-micro { font-size: 5px; letter-spacing: .15em; color: var(--card-dim); display: flex; align-items: center; justify-content: space-between; } .mzv .voucher-edge { position: absolute; inset: 7px; border: 1px solid var(--card-rule); border-radius: 4px; z-index: 4; pointer-events: none; } .mzv .voucher-back .voucher-content { display: flex; flex-direction: column; padding-bottom: 24px; } .mzv .back-heading { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; margin: 28px 0 0; color: var(--foil); flex-shrink: 0; } .mzv .back-heading em { font-style: italic; } .mzv .back-rule { height: 1px; background: var(--card-rule); margin: 16px 0; flex-shrink: 0; } .mzv .back-to { font-size: 8px; letter-spacing: .08em; color: var(--card-dim); overflow-wrap: anywhere; margin: 0; flex-shrink: 0; } .mzv .back-message { font-family: var(--serif); font-size: 21px; line-height: 1.45; margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; } .mzv .back-signature { font-size: 9px; line-height: 1.8; margin: 12px 0 0; color: var(--card-dim); overflow-wrap: anywhere; flex-shrink: 0; } .mzv .back-bottom { margin-top: 18px; border-top: 1px solid var(--card-rule); padding-top: 14px; font-size: 7px; line-height: 1.8; letter-spacing: .06em; color: var(--card-dim); display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; } .mzv .back-bottom p { margin: 0; } .mzv .back-bottom svg { height: 30px; width: 30px; color: var(--foil); } .mzv[data-finish="ivory"] .voucher-face { background: radial-gradient(ellipse at 100% 0%, #fffdf4, #e7e3d6); color: #333b2e; --foil: #88714b; --card-dim: #73745f; --card-rule: #8b815c40; border-color: #a9997566; box-shadow: 0 18px 44px #39352120, 0 2px 5px #25262312; } .mzv[data-finish="champagne"] .voucher-face { background: radial-gradient(ellipse at 85% 1%, #d9c29b, #b69b71 60%, #a68b61); color: #302a20; --foil: #58452a; --card-dim: #564832; --card-rule: #6a512b50; border-color: #a78b5c; } .mzv .card-hint { display: flex; align-items: center; gap: 7px; margin: 22px 0 0; color: var(--muted, #6d7065); font-size: 12px; letter-spacing: .02em; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12px; } .mzv .card-hint svg { width: 14px; height: 14px; } .mzv .finish-picker { display: flex; align-items: center; gap: 18px; margin-top: 14px; } .mzv .finish-choice { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; padding: 4px 0; color: var(--muted, #6d7065); background: none; border: 0; cursor: pointer; transition: color .2s; } .mzv .finish-choice[aria-pressed="true"] { color: var(--ink, #242824); } .mzv .swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid #2223; position: relative; box-shadow: 0 0 0 2px var(--paper); } .mzv .finish-choice[aria-pressed="true"] .swatch:after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--accent); border-radius: 50%; } .mzv .swatch.obsidian { background: #272c25; } .mzv .swatch.ivory { background: #eeeadc; } .mzv .swatch.champagne { background: #b59b72; } .voucher-builder__stage:has(.mzv) .voucher-builder__preview-note { max-width: 342px; } @keyframes mzv-foil { 0%, 18% { background-position: 100% 0, 0 0; } 55%, 100% { background-position: -100% 0, 0 0; } } @keyframes mzv-levitate { 0%, 100% { transform: translateY(0) rotateZ(-2deg); } 50% { transform: translateY(-8px) rotateZ(-1deg); } } @keyframes mzv-shadow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(.92); opacity: .45; } } @keyframes mzv-arrive { from { opacity: 0; transform: translateY(32px) rotate(-5deg) scale(.96); } to { opacity: 1; transform: none; } } @media (max-width: 700px) { .mzv { --card-w: 312px; --card-h: 438px; margin-inline: auto; width: var(--card-w); } .mzv .voucher-content { padding: 26px 26px 0; } .mzv .voucher-logo { font-size: 16px; } .mzv .voucher-type { font-size: 6px; margin-top: 12px; } .mzv .voucher-title { font-size: 41px; margin-top: 32px; } .mzv .voucher-subtitle { font-size: 7px; max-width: 170px; } .mzv .voucher-art { width: 285px; top: 130px; right: -70px; } .mzv .voucher-value { left: 26px; right: 26px; bottom: 96px; } .mzv .card-amount { font-size: 34px; } .mzv .value-line { min-height: 43px; } .mzv .voucher-tear { bottom: 81px; } .mzv .voucher-bottom { left: 26px; right: 26px; bottom: 16px; gap: 11px; } .mzv .card-recipient { font-size: 14px; max-width: 190px; } .mzv .back-heading { font-size: 29px; margin-top: 25px; } .mzv .back-rule { margin: 14px 0; } .mzv .back-message { font-size: 19px; } .mzv .back-signature { font-size: 8px; margin-top: 10px; } .mzv .back-bottom { font-size: 6px; margin-top: 14px; padding-top: 12px; } .mzv .card-hint, .mzv .finish-picker { justify-content: center; } } @media (max-width: 360px) { .mzv { --card-w: 285px; --card-h: 400px; } .mzv .voucher-title { font-size: 37px; margin-top: 29px; } .mzv .card-amount { font-size: 31px; } .mzv .voucher-value { bottom: 87px; } .mzv .voucher-tear { bottom: 74px; } .mzv .back-heading { font-size: 26px; } .mzv .back-message { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .mzv .voucher-scene, .mzv .voucher-float, .mzv .voucher-face:after, .mzv .voucher-scene:before { animation: none; } } .voucher-builder__stage:has(.mzv) .voucher-builder__preview-note { margin: 16px 0 0; padding: 0; text-align: left; } @media (max-width: 700px) { .voucher-builder__stage:has(.mzv) .voucher-builder__preview-note { text-align: center; margin-inline: auto; } } /* Home "A curated selection": 6 cars (3 × 2), then a clear button to the whole fleet, centred under the grid. */ #fleet .section__more { margin-top: clamp(36px, 4vw, 56px); text-align: center; } #fleet .section__more md-outlined-button { --md-outlined-button-container-height: 56px; --md-outlined-button-container-shape: 999px; --md-outlined-button-leading-space: 30px; --md-outlined-button-trailing-space: 30px; --md-outlined-button-label-text-size: 1rem; --md-outlined-button-label-text-weight: 600; --md-outlined-button-outline-color: var(--ink); --md-outlined-button-label-text-color: var(--ink); --md-outlined-button-icon-color: var(--ink); } /* Prices in the same yellow as the "Refundable deposit" band. Yellow text on the white cards would be unreadable, so the price gets that yellow as a marker behind dark text — the same pairing the deposit band uses. */ .fleet-card__price strong, .booking-card__price strong, .vehicle-stage__price strong, .mobile-booking-bar strong { color: var(--md-sys-color-on-primary-container, #231d00); background: var(--md-sys-color-primary-container, #ead475); padding: .04em .28em .02em; border-radius: .22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .fleet-card__price strong { display: inline-block; margin-top: 2px; } /* "Similar cars": horizontal carousel (9 cars), scroll / swipe / drag, arrows in the heading row, snap to cards. */ .related-section .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .related-section .fleet-grid { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 18px; margin: -4px -2px 0; cursor: grab; } .related-section .fleet-grid::-webkit-scrollbar { display: none; } .related-section .fleet-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .related-section .fleet-grid.is-dragging * { pointer-events: none; } .related-section .fleet-grid > .fleet-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; min-width: 0; } .rc-nav { display: flex; gap: 10px; flex: none; } .rc-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line, #d6d1c4); background: var(--md-sys-color-surface-container-lowest, #fff); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .rc-nav button:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); } .rc-nav button:disabled { opacity: .35; cursor: default; } .rc-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .rc-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line, #d6d1c4); transition: width .25s, background .25s; } .rc-dots span.is-on { width: 22px; border-radius: 3px; background: var(--ink); } @media (width <= 1080px) { .related-section .fleet-grid > .fleet-card { flex-basis: calc((100% - 24px) / 2); } } @media (width <= 640px) { .related-section .fleet-grid > .fleet-card { flex-basis: 84%; } .rc-nav { display: none; } } /* Fleet page header: the subtitle sits right under "The fleet", on the same left edge, instead of floating at the far right bottom of an empty block. */ #fleet:has(h1) { padding-top: calc(var(--app-bar-height) + clamp(36px, 4vw, 64px)); } #fleet .section-heading:has(h1) { display: block; margin-bottom: clamp(28px, 3.5vw, 44px); } #fleet .section-heading:has(h1) h1 { margin: 0; } #fleet .section-heading:has(h1) .section-heading__support { max-width: 52ch; margin-top: 14px; color: var(--muted); } /* "Keep reading": same carousel as "Similar cars" — 9 stories, 3 in view. */ .more-stories .shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; } .more-stories .shell > h2 { grid-column: 1; margin-bottom: 34px; } .more-stories .shell > .rc-nav { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 38px; } .more-stories .shell > .more-grid, .more-stories .shell > .rc-dots { grid-column: 1 / -1; } .more-stories .more-grid { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 14px; cursor: grab; } .more-stories .more-grid::-webkit-scrollbar { display: none; } .more-stories .more-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .more-stories .more-grid.is-dragging * { pointer-events: none; } .more-stories .more-grid > .more-story { flex: 0 0 calc((100% - 56px) / 3); scroll-snap-align: start; min-width: 0; } .more-stories .more-story img { -webkit-user-drag: none; user-select: none; } .more-stories .more-story h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); } .more-stories .more-story p:not(.eyebrow) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .more-stories .more-story .eyebrow:empty { display: none; } @media (width <= 1080px) { .more-stories .more-grid > .more-story { flex-basis: calc((100% - 28px) / 2); } } @media (width <= 640px) { .more-stories .more-grid > .more-story { flex-basis: 84%; } .more-stories .shell > .rc-nav { display: none; } } /* Articles: "Our fleet" carousel replaces "Keep reading" (design.js). */ main:has(.mz-fleet) .more-stories { display: none; } .mz-fleet { border-top: 1px solid var(--line); padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 96px); } .mz-fleet .section-heading { margin-bottom: 30px; } .mz-fleet .section__more { margin-top: 26px; text-align: center; } .mz-fleet__all { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 28px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; transition: background .15s, color .15s; } .mz-fleet__all:hover { background: var(--ink); color: #fff; } /* Vouchers hero lead: wider, 2–3 lines instead of 4–5. */ main:has(.voucher-builder) > .page-hero .page-hero__lead { max-width: min(100%, 1000px); } /* Home hero H1: "Premium Car Rental / in Prague" — always two lines, first line never wraps on desktop (localized: v Praze, in Prag, w Pradze…). */ .hero__title { max-width: none; } .hero__title .hero__line { display: block; } @media (width > 760px) { .hero__title .hero__line:first-child { white-space: nowrap; } } @media (width <= 760px) { .hero__title { font-size: clamp(1.7rem, 7.4vw, 3rem); } .hero__title .hero__line:first-child { white-space: nowrap; } } /* ===== About page (rebuilt) ===== */ .about-hero { background: transparent; border-bottom: 0; padding-block: calc(var(--app-bar-height) + clamp(24px, 4vw, 56px)) clamp(40px, 5vw, 72px); } .about-hero h1 { max-width: 16ch; margin-top: 14px; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; } .about-hero .page-hero__lead { max-width: 62ch; margin: clamp(20px, 2.4vw, 30px) 0 0; font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.6; color: var(--muted); } .about-facts { margin: 0; display: grid; } .about-facts > div { border-top: 1px solid var(--line); padding: 14px 0; } .about-facts dt { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .about-facts dd { margin: 4px 0 0; font-weight: 650; } .about-facts--hero { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; margin-top: clamp(36px, 4vw, 56px); } .about-facts--hero dd { font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: -.02em; } .about-facts--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .about-section .section-heading { margin-bottom: 0; } .about-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .about-split .section-heading { display: block; } .about-split .section-heading h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; } .about-section .page-prose p { margin: 0 0 1.1em; font-size: 1.05rem; line-height: 1.7; } .about-section .page-prose a, .about-author__list a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } .about-section .page-prose a:hover, .about-author__list a:hover { color: var(--gold-deep); } .about-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; } .about-counts h3 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .about-counts .about-facts > div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; } .about-counts .about-facts dt { font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; } .about-counts .about-facts dd { margin: 0; } .about-more { margin: 28px 0 0; } .about-button { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; transition: background .15s, color .15s; } .about-button:hover { background: var(--ink); color: #fff; } .about-intro { max-width: 60ch; margin: 18px 0 32px; font-size: 1.1rem; line-height: 1.65; color: var(--muted); } .about-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .about-card { padding: 26px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--md-sys-color-surface-container-lowest, #fff); } .about-card__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--md-sys-color-primary-container, #ead475); font-size: .8rem; font-weight: 700; } .about-card h3 { margin: 18px 0 8px; font-size: 1.15rem; letter-spacing: -.02em; } .about-card p { margin: 0; color: var(--muted); line-height: 1.55; } .about-author { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .about-author__card { padding: 32px; border-radius: 26px; background: var(--ink); color: #f4efe4; } .about-author__card .section-label { color: var(--gold); margin: 26px 0 6px; } .about-author__card h2 { margin: 0; font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.04em; line-height: 1; color: #fff; } .about-author__role { margin: 10px 0 0; color: rgba(244, 239, 228, .7); } .about-author__mono { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(215, 184, 79, .6); color: var(--gold); font: 600 1.6rem/1 Georgia, serif; letter-spacing: .06em; } .about-author__list-title { margin: 22px 0 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .about-author__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; } .about-author__list li { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--line); font-weight: 600; } .cta-band .inverse-outline { --md-outlined-button-label-text-color: #fff; --md-outlined-button-outline-color: rgba(255,255,255,.5); } @media (width <= 1080px) { .about-facts--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width <= 820px) { .about-split, .about-author { grid-template-columns: 1fr; } .about-facts--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-facts--list, .about-counts { grid-template-columns: 1fr; } .about-author__list { columns: 1; } } @media (width <= 560px) { .about-cards { grid-template-columns: 1fr; } } .article-rail .rail-author a { color: inherit; text-decoration: none; } .article-rail .rail-author a:hover { text-decoration: underline; } .about-hero h1 { max-width: 22ch; font-size: clamp(2.6rem, 5.2vw, 5rem); } #team .section-heading h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; } /* ===== One H1 for every page header (reference: Masons Magazine) ===== Same typeface, size, weight, tracking and leading, and the same start point: the eyebrow sits on one line from the top, the H1 right under it, both on the shell's left edge. Applies to page heroes (vouchers, about, FAQ, contact, partners, airport, legal…) and the fleet header. */ .page-hero h1, #fleet .section-heading:has(h1) h1, .about-hero h1, main:has(.voucher-builder) > .page-hero h1 { font-family: Montserrat Variable, Montserrat, sans-serif; font-size: var(--type-display-l); font-weight: var(--weight-heading); letter-spacing: var(--track-display); line-height: var(--leading-display); margin: 0; max-width: 16ch; text-wrap: balance; } .page-hero .section-label, .about-hero .section-label { margin: 0 0 var(--h1-gap, 10px); } /* Same start point as the magazine masthead: eyebrow at app bar + 52px (app bar + 32px on phones), 12px to the H1. Pages without an eyebrow (fleet, legal) start the H1 where the magazine H1 starts. */ :root { --hero-top: calc(var(--app-bar-height) + 52px); } @media (width <= 760px) { :root { --hero-top: calc(var(--app-bar-height) + 32px); } } .page-hero, .about-hero, main:has(.voucher-builder) > .page-hero { padding-top: var(--hero-top) !important; } .page-hero .section-label, .about-hero .section-label { margin: 0 0 12px !important; line-height: 1.4; } .page-hero h1, .about-hero h1 { margin-top: 0 !important; } /* no eyebrow: shift down by the eyebrow's height + gap so the H1 lines up */ .page-hero .shell > h1:first-child { margin-top: calc(1.4em * .72 * 0 + 29px) !important; } #fleet:has(h1) { padding-top: calc(var(--hero-top) + 29px) !important; } /* CTA band: headline on one line, buttons on the same row to the right. */ @media (width > 900px) { .cta-band .shell { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .cta-band .shell > h2 { margin: 0; max-width: none; white-space: nowrap; font-size: clamp(1.8rem, 2.9vw, 3rem); line-height: 1.05; } .cta-band .cta-band__actions { margin: 0; flex: none; flex-wrap: nowrap; } } /* About · fleet: photo tiles + compact brand/class pills instead of two lists */ .about-fleet .about-split { margin-bottom: clamp(32px, 4vw, 48px); } .about-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .about-car { display: block; color: inherit; text-decoration: none; border-radius: 22px; overflow: hidden; background: var(--md-sys-color-surface-container-lowest, #fff); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; } .about-car:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(17, 21, 21, .35); } .about-car__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e6e2d8; } .about-car__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .about-car:hover .about-car__img img { transform: scale(1.03); } .about-car__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px 16px; } .about-car__meta strong { font-weight: 650; letter-spacing: -.01em; } .about-car__meta span { font-size: .8rem; color: var(--muted); white-space: nowrap; } .about-pills-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .about-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .about-pills__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; } .about-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: var(--md-sys-color-surface-container-lowest, #fff); } .about-pill b { font-weight: 700; } .about-button--dark { margin-left: auto; background: var(--ink); color: #fff; } .about-button--dark:hover { background: #2a2e2e; } @media (width <= 1080px) { .about-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-button--dark { margin-left: 0; } } @media (width <= 560px) { .about-cars { grid-template-columns: 1fr; } } /* About · author: horizontal profile row + three story tiles with photos */ .about-author2__head { display: grid; grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); } .about-author2__mono { display: grid; place-items: center; width: clamp(84px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--gold); font: 600 clamp(1.6rem, 2.4vw, 2.2rem)/1 Georgia, serif; letter-spacing: .06em; box-shadow: inset 0 0 0 1px rgba(215, 184, 79, .55), inset 0 0 0 6px var(--ink), inset 0 0 0 7px rgba(215, 184, 79, .25); } .about-author2__who .section-label { margin: 0 0 6px; } .about-author2__who h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; } .about-author2__role { margin: 8px 0 0; color: var(--muted); } .about-author2__bio p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--muted); } .about-author2__list-head { display: flex; align-items: baseline; justify-content: space-between; margin: clamp(28px, 3vw, 40px) 0 18px; } .about-author2__list-head h3 { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .about-author2__all { font-weight: 650; color: var(--ink); text-decoration: none; } .about-author2__all:hover { color: var(--gold-deep); } .about-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .about-story { display: block; color: inherit; text-decoration: none; } .about-story__img { display: block; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #e6e2d8; } .about-story__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .about-story:hover .about-story__img img { transform: scale(1.04); } .about-story__meta { display: block; margin: 14px 0 6px; color: var(--gold-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .about-story__title { display: block; font-size: 1.12rem; line-height: 1.3; letter-spacing: -.01em; } .about-story:hover .about-story__title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; } @media (width <= 900px) { .about-author2__head { grid-template-columns: auto minmax(0, 1fr); } .about-author2__bio { grid-column: 1 / -1; } .about-stories { grid-template-columns: 1fr 1fr; } } @media (width <= 560px) { .about-stories { grid-template-columns: 1fr; } } /* About · company: the VertexRent note sits under "Masons s.r.o." */ .about-co__note { max-width: 42ch; margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--muted); } .about-facts--hero > div { border-top: 0; padding-top: 0; } .about-hero h1 { max-width: 22ch; } /* About: headings sit vertically centred against the content on the right; no rules in the company details list. */ #rental .about-split, #company .about-split { align-items: center; } .about-facts--list > div { border-top: 0; padding: 12px 0; } /* About · author stories: carousel (same controls as the other carousels) */ #jan-lunacek .about-stories { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 8px; cursor: grab; } #jan-lunacek .about-stories::-webkit-scrollbar { display: none; } #jan-lunacek .about-stories.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } #jan-lunacek .about-stories.is-dragging * { pointer-events: none; } #jan-lunacek .about-story { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; min-width: 0; } #jan-lunacek .about-story img { -webkit-user-drag: none; user-select: none; } #jan-lunacek .about-author2__list-head { align-items: center; gap: 20px; } #jan-lunacek .about-author2__list-head h3 { margin-right: auto; } #jan-lunacek .about-author2__list-head .rc-nav { order: 3; } #jan-lunacek .rc-dots { margin-top: 18px; } @media (width <= 1080px) { #jan-lunacek .about-story { flex-basis: calc((100% - 24px) / 2); } } @media (width <= 640px) { #jan-lunacek .about-story { flex-basis: 84%; } } /* About H1: "About Masons" and the rental phrase on separate lines, no dash */ .about-hero__line { display: block; } .about-hero h1 { max-width: 20ch; } /* About · fleet: no brand/class filters, just the button under the tiles */ .about-pills-row { border-top: 0; padding-top: 0; margin-top: 32px; justify-content: center; } .about-pills-row .about-button--dark { margin-left: 0; } /* About split sections: centre the right-hand text on the H2 itself — the eyebrow ("The rental", "The fleet", "Company") hangs above the heading and is left out of the centring. */ #rental .about-split, #fleet-overview .about-split, #company .about-split { align-items: center; } #rental .section-heading > div, #fleet-overview .section-heading > div, #company .about-co__head { position: relative; } #rental .section-heading .section-label, #fleet-overview .section-heading .section-label, #company .section-heading .section-label { position: absolute; left: 0; bottom: 100%; margin: 0 0 12px !important; white-space: nowrap; } #company .about-co__head .section-heading > div { position: static; } @media (width <= 820px) { #rental .section-heading .section-label, #fleet-overview .section-heading .section-label, #company .section-heading .section-label { position: static; margin: 0 0 8px !important; } } .about-section .page-prose p:last-child { margin-bottom: 0; } /* About · author profile: portrait + bio + numbers + topics */ .about-author3 { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); } .about-author3__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--ink); } .about-author3__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-author3__photo.is-empty { display: grid; place-items: center; background: radial-gradient(ellipse at 70% 20%, #2c2a22, var(--ink) 70%); } .about-author3__mono { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; color: var(--gold); font: 600 clamp(2.4rem, 4vw, 3.6rem)/1 Georgia, serif; letter-spacing: .06em; box-shadow: inset 0 0 0 1px rgba(215, 184, 79, .55), inset 0 0 0 8px transparent, inset 0 0 0 9px rgba(215, 184, 79, .22); } .about-author3__body .section-label { margin: 0 0 8px; } .about-author3__body h2 { margin: 0; font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: .98; letter-spacing: -.045em; } .about-author3__role { margin: 10px 0 0; color: var(--gold-deep); font-weight: 600; } .about-author3__bio { margin-top: 22px; max-width: 62ch; } .about-author3__bio p { margin: 0 0 12px; font-size: 1.06rem; line-height: 1.65; color: var(--muted); } .about-author3__bio p:first-child { color: var(--ink); font-size: 1.15rem; } .about-author3__stats { display: flex; gap: clamp(24px, 4vw, 56px); margin: 24px 0 0; } .about-author3__stats div { display: flex; flex-direction: column-reverse; } .about-author3__stats dt { font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; } .about-author3__stats dd { margin: 6px 0 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .about-author3__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; } .about-author3__tags li { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; background: var(--md-sys-color-surface-container-lowest, #fff); } @media (width <= 820px) { .about-author3 { grid-template-columns: 1fr; } .about-author3__photo { max-width: 320px; } } .cta-band .inverse-outline { --md-outlined-button-label-text-color: #fff; --md-outlined-button-outline-color: rgba(255,255,255,.5); } /* About · author profile, roomier: bigger portrait, text uses the full column, more air between name / bio / numbers / topics. */ .about-author3 { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); align-items: stretch; padding-bottom: clamp(48px, 5vw, 72px); } .about-author3__photo { aspect-ratio: auto; min-height: 520px; height: 100%; } .about-author3__body { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(8px, 2vw, 24px); } .about-author3__body .section-label { margin-bottom: 14px; } .about-author3__role { margin-top: 14px; } .about-author3__bio { max-width: none; margin-top: clamp(28px, 3vw, 40px); } .about-author3__bio p { margin-bottom: 18px; max-width: 64ch; } .about-author3__bio p:first-child { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.5; letter-spacing: -.01em; } .about-author3__stats { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(24px, 2.5vw, 32px); border-top: 1px solid var(--line); gap: 0; } .about-author3__stats div { flex: 1; padding-right: 24px; } .about-author3__stats div + div { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--line); } .about-author3__stats dt { font-size: clamp(2.4rem, 3.4vw, 3.4rem); } .about-author3__stats dd { margin-top: 10px; } .about-author3__tags { margin-top: clamp(28px, 3vw, 40px); gap: 10px; } .about-author3__tags li { height: 38px; padding: 0 18px; font-size: .9rem; } @media (width <= 820px) { .about-author3__photo { min-height: 0; aspect-ratio: 4 / 5; height: auto; } } @media (width <= 820px) { .about-author3__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-author3__stats div { padding-right: 8px; min-width: 0; } .about-author3__stats div + div { padding-left: 14px; } .about-author3__stats dd { font-size: .66rem; letter-spacing: .05em; overflow-wrap: anywhere; } } @media (width <= 820px) { .about-author3 { grid-template-columns: 1fr; gap: 28px; } .about-author3__photo { max-width: 360px; width: 100%; } } /* Site-wide yellow contact card replaces the dark CTA bands (the vouchers page keeps its own "Buy a voucher" band). The home page's own #contact card is hidden because the global one sits in the same place. */ body:not(:has(.voucher-builder)) main .cta-band { display: none; } body:has(.cta-contact) main #contact { display: none; } .cta-contact { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); } .cta-contact h2 { max-width: 13ch; } .cta-contact__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .cta-contact__actions md-filled-button { flex: 1 1 auto; } .cta-contact__actions md-outlined-button { --md-outlined-button-outline-color: var(--ink); --md-outlined-button-label-text-color: var(--ink); --md-outlined-button-container-height: 56px; --md-outlined-button-container-shape: 999px; --md-outlined-button-label-text-size: 1rem; } .cta-contact .contact-surface h2 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: .96; } /* Car pages: H1 in the same style as every other page header */ .vehicle-intro__headline h1 { font-family: Montserrat Variable, Montserrat, sans-serif; font-size: var(--type-display-l); font-weight: var(--weight-heading); letter-spacing: var(--track-display); line-height: var(--leading-display); margin: 0; } /* same start point as other headers: breadcrumbs on the eyebrow line, H1 under */ .vehicle-intro { padding-top: calc(var(--hero-top) - 72px - 18px + 18px) ; } .vehicle-intro { padding-top: 52px !important; } .vehicle-intro__headline h1 { margin-top: -3px; } @media (width <= 760px) { .vehicle-intro { padding-top: 32px !important; } .vehicle-intro__headline h1 { margin-top: -2px; } } @media (width <= 760px) { .vehicle-intro__headline h1 { margin-top: 1px; } } /* contact card: headline centred against the details on the right */ .cta-contact .contact-surface { align-items: center; } .cta-contact .contact-surface > div:first-child { display: flex; align-items: center; } .cta-contact .contact-surface h2 { margin: 0; } /* author profile: no rules at all */ .about-author3 { border-bottom: 0; } .about-author3__stats { border-top: 0; padding-top: 0; gap: clamp(32px, 5vw, 72px); } .about-author3__stats div { flex: 0 0 auto; padding: 0 !important; border-left: 0 !important; } @media (width <= 820px) { .about-author3__stats { gap: 16px; } } /* "How it works": no rules between or above the steps */ .process__steps { border-top: 0 !important; gap: clamp(24px, 4vw, 56px); } .process__steps li, .process__steps li + li { border-left: 0 !important; border-bottom: 0 !important; padding-left: 0; } /* no rule between the contact card and the footer */ .site-footer { border-top: 0 !important; } .cta-contact { border-bottom: 0 !important; } /* vouchers: drop the dark "Three steps to gift a drive" band too */ main .cta-band { display: none !important; } /* vouchers hero lead: full content width */ main:has(.voucher-builder) > .page-hero .page-hero__lead { max-width: none !important; } /* Home · "How it works": steps as cards like "More than a daily rental", no "Choose your car" button in the header. */ .process__header { grid-template-columns: 1fr; } .process__header md-filled-tonal-button { display: none; } .process__steps { gap: 24px !important; } .process__steps li, .process__steps li + li { background: #fff; border-radius: 16px; padding: 32px !important; box-shadow: rgba(28, 27, 22, .12) 0 1px 2px 0; } @media (width <= 760px) { .process__steps { gap: 12px !important; } .process__steps li, .process__steps li + li { padding: 22px !important; } } /* Home · "More than a daily rental.": subtitle directly under the heading */ .masons-world__head { grid-template-columns: 1fr !important; gap: 16px !important; } .masons-world__head p { max-width: 60ch; font-size: 1.1rem; } .masons-world__head p { max-width: 80ch; } .process__header h2 { max-width: none; } /* ===== Contact page (rebuilt) ===== */ .contact2-hero { background: transparent; border-bottom: 0; } .contact2-hero h1 { max-width: 20ch; } .contact2-hero .page-hero__lead { max-width: 64ch; margin-top: clamp(20px, 2.4vw, 30px); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.6; color: var(--muted); } .contact2 { padding-top: clamp(16px, 2vw, 32px); } .contact2__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .contact2__channels .section-label { margin: 0 0 14px; } .contact2__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; color: inherit; text-decoration: none; } .contact2__row .material-symbols-rounded { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .contact2__row small { display: block; color: var(--muted); font-size: .8rem; margin-bottom: 2px; } .contact2__row strong { font-size: 1.12rem; font-weight: 650; letter-spacing: -.01em; } a.contact2__row:hover strong { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; } .contact2__form { background: #fff; border-radius: 24px; padding: clamp(28px, 3.5vw, 44px); box-shadow: rgba(28, 27, 22, .12) 0 1px 2px 0; } .contact2__form .section-label { margin: 0 0 8px; } .contact2__form h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.045em; } .contact2__form-intro { margin: 12px 0 24px; color: var(--muted); line-height: 1.6; } .contact2__form .contact-form { max-width: none; } .contact2__form .contact-form__fallback { margin-top: 18px; color: var(--muted); font-size: .9rem; } .contact2__ho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; } .contact2__card { background: #fff; border-radius: 16px; padding: 32px; box-shadow: rgba(28, 27, 22, .12) 0 1px 2px 0; display: flex; flex-direction: column; } .contact2__card .material-symbols-rounded { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .contact2__card h3 { margin: 24px 0 8px; font-size: 1.3rem; } .contact2__card p { margin: 0; color: var(--muted); line-height: 1.55; } .contact2__card a { margin-top: 16px; color: var(--gold-deep); font-weight: 700; text-decoration: none; } .contact2__req { margin-top: clamp(32px, 4vw, 48px); } .contact2__req h3 { margin: 0 0 14px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .contact2__req ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .contact2__req li { height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: rgba(28, 27, 22, .1) 0 1px 2px 0; font-size: .92rem; } @media (width <= 900px) { .contact2__grid { grid-template-columns: 1fr; } .contact2__ho { grid-template-columns: 1fr; } } .contact2-hero h1 { max-width: 24ch; } /* Magazine: filter chips above the list; the old "What we cover" band is gone */ .topic-band { display: none !important; } .mag-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(20px, 2.4vw, 32px); } .mag-filter__chip { height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line, #d6d1c4); background: transparent; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s; } .mag-filter__chip span { color: var(--muted); font-weight: 500; } .mag-filter__chip:hover { border-color: var(--ink); } .mag-filter__chip[aria-pressed="true"] { background: var(--md-sys-color-primary-container, #ead475); border-color: transparent; } .mag-filter__chip[aria-pressed="true"] span { color: inherit; } .story-row[hidden] { display: none !important; } /* Home · handover: "Call Masons" + "Contact us" side by side */ .handover__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .handover__actions .inverse-outline { --md-outlined-button-label-text-color: #fff; --md-outlined-button-icon-color: #fff; --md-outlined-button-outline-color: rgba(255,255,255,.45); } /* Article end: Choose your car + Call + Contact us */ .article-end__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .article-end__actions md-outlined-button { --md-outlined-button-outline-color: var(--ink); --md-outlined-button-label-text-color: var(--ink); --md-outlined-button-icon-color: var(--ink); } /* Car pages: "about this car" block before the FAQ */ .car-about { padding-block: clamp(48px, 6vw, 88px); } .car-about__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .car-about__text h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -.045em; } .car-about__lead { margin: 18px 0 8px; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--ink); } .car-about__part h3 { margin: 26px 0 8px; font-size: 1.15rem; letter-spacing: -.01em; } .car-about__part p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 1.02rem; } .car-about__review { margin: 26px 0 0; } .car-about__review a, .car-about__sim a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } .car-about__side { background: #fff; border-radius: 20px; padding: 28px; box-shadow: rgba(28, 27, 22, .12) 0 1px 2px 0; position: sticky; top: calc(var(--app-bar-height) + 24px); } .car-about__side h3 { margin: 0 0 12px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .car-about__side h3:not(:first-child) { margin-top: 24px; } .car-about__table { width: 100%; border-collapse: collapse; font-size: .95rem; } .car-about__table th { text-align: left; font-weight: 500; color: var(--muted); padding: 9px 12px 9px 0; vertical-align: top; width: 44%; } .car-about__table td { padding: 9px 0; font-weight: 600; } .car-about__table tr + tr th, .car-about__table tr + tr td { border-top: 1px solid var(--line); } .car-about__note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); } .car-about__sim { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } @media (width <= 900px) { .car-about__grid { grid-template-columns: 1fr; } .car-about__side { position: static; } } /* specs now live in the tiles above: the block is text + a row of related links */ .car-about__grid { grid-template-columns: 1fr !important; max-width: 860px; } .car-about__side { position: static !important; background: transparent; box-shadow: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; } .car-about__side h3 { margin: 0 !important; } .car-about__sim { display: flex !important; flex-wrap: wrap; gap: 10px; } .car-about__sim a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: rgba(28, 27, 22, .12) 0 1px 2px 0; text-decoration: none; font-weight: 600; } .car-about__sim a:hover { background: var(--md-sys-color-primary-container); } .car-about__grid { max-width: none !important; } .car-about__text, .car-about__side { max-width: 860px; } .car-about__side { margin-top: -20px; } /* Car pages: rental terms as a compact strip under the specs (the old "Rental terms" section is gone; details live in the FAQ). */ .vehicle-content-grid > .terms-strip { grid-column: 1; } .vehicle-content-grid > .booking-card { grid-row: 1 / span 4 !important; } .terms-strip { margin-top: -6px; } .terms-strip dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .terms-strip__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; background: #fff; border-radius: 16px; box-shadow: rgba(28, 27, 22, .12) 0 1px 2px 0; } .terms-strip__item .material-symbols-rounded { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-size: 21px; } .terms-strip__item dt { margin: 0 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .terms-strip__item dd { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.45; } .terms-strip__item dd.terms-strip__sub { margin-top: 4px; font-size: .85rem; font-weight: 400; color: var(--muted); } .terms-strip__all { display: inline-block; margin-top: 14px; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .22em; } @media (width <= 1080px) { .vehicle-content-grid > .terms-strip { grid-row: 3; } .vehicle-content-grid > .booking-card { grid-row: 4 !important; } .vehicle-content-grid > .detail-layout { grid-row: 5; } } @media (width <= 640px) { .terms-strip dl { grid-template-columns: 1fr; } } /* terms strip v2: one bordered panel like the specs above, 4 equal cells */ .terms-strip dl { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; background: var(--md-sys-color-surface-container-lowest, #fff); border: 1px solid var(--md-sys-color-outline-variant); border-radius: 22px; overflow: hidden; } .terms-strip__item { display: flex !important; flex-direction: column; gap: 0 !important; padding: 22px 24px !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-left: 1px solid var(--md-sys-color-outline-variant); } .terms-strip__item:first-child { border-left: 0; } .terms-strip__item .material-symbols-rounded { width: 36px !important; height: 36px !important; border-radius: 11px !important; font-size: 20px !important; margin-bottom: 14px; } .terms-strip__item dt { margin: 0 0 6px !important; } .terms-strip__item dd { font-size: 1.05rem !important; font-weight: 650 !important; letter-spacing: -.01em; line-height: 1.3 !important; } .terms-strip__item dd.terms-strip__sub { margin-top: 6px !important; font-size: .85rem !important; font-weight: 400 !important; line-height: 1.4 !important; } .terms-strip { margin-top: 0 !important; } @media (width <= 1080px) { .terms-strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .terms-strip__item:nth-child(3) { border-left: 0; } .terms-strip__item:nth-child(n+3) { border-top: 1px solid var(--md-sys-color-outline-variant); } } @media (width <= 560px) { .terms-strip dl { grid-template-columns: 1fr !important; } .terms-strip__item { border-left: 0 !important; } .terms-strip__item + .terms-strip__item { border-top: 1px solid var(--md-sys-color-outline-variant); } } /* Car pages: deposit lives only in the booking card under the price (the yellow "Refundable deposit" band). The terms strip keeps three cells: mileage, insurance, driver. The strip is also rendered by the vehicle-detail JS, so it is hidden here rather than cut from the HTML; in the repo, drop the deposit item from the component instead. */ .terms-strip__item:nth-child(4) { display: none !important; } .terms-strip dl { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (width <= 1080px) { .terms-strip dl { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .terms-strip__item:nth-child(3) { border-left: 1px solid var(--md-sys-color-outline-variant) !important; } .terms-strip__item:nth-child(n+3) { border-top: 0; } } @media (width <= 560px) { .terms-strip dl { grid-template-columns: 1fr !important; } .terms-strip__item:nth-child(3) { border-left: 0 !important; border-top: 1px solid var(--md-sys-color-outline-variant); } }