/*! * IceTransfer Sections — front-end styles * * Everything is scoped under .itx so nothing leaks into (or is overridden by) * the theme or Elementor. Hand-written: no framework, no utility classes, no * icon font. */ /* ---------------------------------------------------------------- tokens */ /* * Taxi System MS 1.12+ draws its full-screen booking view and calendar on * , outside every .itx element. Handing it the site font and palette * here keeps them looking like part of this page. */ body.itx-page { --tsms-xp-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tsms-xp-accent: #e9c384; --tsms-xp-bar: #0b1524; } .itx { --itx-navy-900: #070d18; --itx-navy-800: #0b1524; --itx-navy-700: #111e33; --itx-navy-600: #1b2a41; --itx-gold: #e9c384; --itx-gold-bright: #f2d3a0; --itx-gold-deep: #c9a063; --itx-ink: #16202e; --itx-ink-soft: #4a5768; --itx-muted: #7b8798; --itx-hairline: rgba(22, 32, 46, 0.12); --itx-hairline-light: rgba(242, 211, 160, 0.22); --itx-land-top: #1b2a41; --itx-land-bottom: #0e1a2c; --itx-shell: 1360px; --itx-radius: 14px; --itx-radius-lg: 22px; --itx-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Vertical rhythm for every section. */ --itx-pad-y: clamp(60px, 7vw, 118px); box-sizing: border-box; font-family: var(--itx-font); -webkit-font-smoothing: antialiased; } .itx *, .itx *::before, .itx *::after { box-sizing: border-box; } .itx img { max-width: 100%; height: auto; display: block; } /* * Elementor's global kit styles bare `a`, `h1`-`h6` and `button` through * `.elementor-kit-NNN a { … }` — specificity 0-1-1, which quietly out-ranks any * single-class rule of ours. That is why links rendered in Elementor blue, * headings took the kit's size, and the burger inherited the theme's red button. * * Two defences, and both matter: * 1. This block, which forces the family and strips the kit's margins. * 2. Every component rule that targets `a`, `h1`-`h6` or `button` is written * as `.itx .itx-thing` (0-2-x) so it outranks the kit on its own. * * If you add a rule that styles one of those three element types, prefix it * with `.itx ` or Elementor will silently win. */ .itx h1, .itx h2, .itx h3, .itx h4, .itx h5, .itx h6, .itx p, .itx li, .itx blockquote, .itx figcaption, .itx a, .itx button { font-family: var(--itx-font) !important; margin: 0; } .itx.itx a { text-decoration: none; } .itx.itx button { font-family: var(--itx-font); } .itx-shell { width: 100%; max-width: var(--itx-shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); } .itx .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .itx-icon { width: 1em; height: 1em; flex: none; } /* Placeholder tile shown until a real photo is chosen in the dashboard. */ .itx-media--empty { display: block; width: 100%; height: 100%; min-height: 160px; background: radial-gradient(120% 100% at 20% 0%, rgba(233, 195, 132, 0.22), transparent 60%), linear-gradient(160deg, var(--itx-navy-600), var(--itx-navy-800)); } /* ---------------------------------------------------------------- buttons */ .itx .itx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.95em 1.9em; border: 1px solid transparent; border-radius: 999px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; } .itx .itx-btn:hover { transform: translateY(-2px); } .itx .itx-btn--gold { background: var(--itx-gold); color: var(--itx-navy-900); border-color: var(--itx-gold); } .itx .itx-btn--gold:hover { background: var(--itx-gold-bright); border-color: var(--itx-gold-bright); color: var(--itx-navy-900); } .itx .itx-btn--ghost { border-color: var(--itx-hairline); color: var(--itx-ink); } .itx .itx-btn--ghost:hover { border-color: var(--itx-gold-deep); color: var(--itx-gold-deep); } .itx .itx-btn--ghost-light { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .itx .itx-btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; } /* ---------------------------------------------------------------- header */ .itx-skip.itx-skip { position: absolute; left: -9999px; z-index: 200; padding: 12px 20px; background: var(--itx-gold); color: #0b1524; border-radius: 0 0 8px 0; font-family: var(--itx-font); } .itx-skip:focus { left: 0; top: 0; } .itx-header { --itx-header-h: 78px; position: relative; z-index: 60; color: #fff; } .itx-header--overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; transition: background-color 0.3s, backdrop-filter 0.3s, box-shadow 0.3s; } /* Added by front.js once the page is scrolled past the hero's top. */ .itx-header--overlay.is-stuck { position: fixed; background: rgba(9, 17, 30, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(242, 211, 160, 0.16); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); animation: itx-drop 0.35s ease; } .itx-header--solid { position: sticky; top: 0; background: rgba(9, 17, 30, 0.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(242, 211, 160, 0.16); } @keyframes itx-drop { from { transform: translateY(-100%); } } /* The WP admin bar is fixed too, so a fixed header has to sit below it. */ .admin-bar .itx-header--overlay.is-stuck, .admin-bar .itx-header--solid { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .itx-header--overlay.is-stuck, .admin-bar .itx-header--solid { top: 46px; } } .itx-header__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: var(--itx-header-h); } .itx .itx-logo { display: inline-flex; align-items: center; gap: 0.45em; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: 0.14em; text-decoration: none; white-space: nowrap; flex: none; } .itx-logo__a { color: var(--itx-gold); font-weight: 600; } .itx-logo__b { color: #fff; font-weight: 300; } /* Logo size comes from the header's "Logo size" setting. A square badge logo was unreadable at the old fixed 42px (1.10.2). The theme's `img` rules are beaten explicitly so the height actually applies. */ .itx-header { --itx-logo-h: 72px; } .itx-header--logo-small { --itx-logo-h: 42px; } .itx-header--logo-medium { --itx-logo-h: 56px; } .itx-header--logo-large { --itx-logo-h: 72px; } .itx-header--logo-xl { --itx-logo-h: 92px; } .itx .itx-logo__img { display: block; height: var(--itx-logo-h, 42px) !important; max-height: none !important; width: auto !important; max-width: none !important; transition: height 0.3s ease; } .itx-header .itx-logo { padding-block: 8px; } /* Once scrolled, the floating bar gets a smaller logo so it doesn't cover the page. */ .itx-header--overlay.is-stuck { --itx-logo-h: 52px; } .itx-header--overlay.is-stuck.itx-header--logo-small { --itx-logo-h: 42px; } @media (max-width: 1023px) { .itx-header { --itx-logo-h: 56px; } .itx-header--logo-medium, .itx-header--overlay.is-stuck { --itx-logo-h: 48px; } .itx-header--logo-large { --itx-logo-h: 56px; } .itx-header--logo-xl { --itx-logo-h: 64px; } .itx-header--overlay.is-stuck.itx-header--logo-small, .itx-header--logo-small { --itx-logo-h: 40px; } } /* Navigation */ .itx-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; } .itx-nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); list-style: none; margin: 0; padding: 0; } .itx-nav__list li { position: relative; } .itx .itx-nav__list a { display: block; padding: 8px 0; color: rgba(255, 255, 255, 0.86); font-size: 0.98rem; font-weight: 300; text-decoration: none; transition: color 0.2s; } .itx .itx-nav__list a:hover, .itx .itx-nav__list .current-menu-item > a { color: var(--itx-gold); } /* Dropdowns, for WordPress menus with children. */ .itx-nav__list .sub-menu { position: absolute; top: 100%; left: -16px; min-width: 230px; padding: 8px; margin: 0; list-style: none; background: rgba(11, 21, 36, 0.97); backdrop-filter: blur(12px); border: 1px solid rgba(242, 211, 160, 0.18); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } .itx-nav__list li:hover > .sub-menu, .itx-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .itx .itx-nav__list .sub-menu a { padding: 9px 12px; border-radius: 8px; font-size: 0.93rem; } .itx .itx-nav__list .sub-menu a:hover { background: rgba(233, 195, 132, 0.12); } .itx .itx-nav__phone { display: none; align-items: center; gap: 0.5em; color: rgba(255, 255, 255, 0.8); font-size: 0.93rem; text-decoration: none; } .itx .itx-nav__phone:hover { color: var(--itx-gold); } @media (min-width: 1180px) { .itx .itx-nav__phone { display: inline-flex; } } .itx-header__actions { display: flex; align-items: center; gap: 10px; flex: none; } .itx-header__cta { padding: 0.72em 1.5em; font-size: 0.82rem; } /* Language switcher */ .itx-lang { position: relative; } .itx .itx-lang__button { display: inline-flex; align-items: center; gap: 0.25em; padding: 8px 10px; background: none; border: 0; border-radius: 8px; color: rgba(255, 255, 255, 0.86); font-family: var(--itx-font); font-size: 0.92rem; letter-spacing: 0.06em; cursor: pointer; transition: color 0.2s, background-color 0.2s; } .itx .itx-lang__button:hover, .itx .itx-lang.is-open .itx-lang__button { color: var(--itx-gold); background: rgba(255, 255, 255, 0.06); } .itx-lang__caret { transition: transform 0.25s; } .itx-lang.is-open .itx-lang__caret { transform: rotate(180deg); } .itx-lang__list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; padding: 6px; margin: 0; list-style: none; background: rgba(11, 21, 36, 0.97); backdrop-filter: blur(12px); border: 1px solid rgba(242, 211, 160, 0.18); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } .itx-lang.is-open .itx-lang__list { opacity: 1; visibility: visible; transform: none; } .itx .itx-lang__list a { display: flex; align-items: baseline; gap: 0.6em; padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, 0.86); font-size: 0.92rem; text-decoration: none; } .itx .itx-lang__list a:hover { background: rgba(233, 195, 132, 0.12); color: #fff; } .itx-lang__list strong { font-weight: 500; letter-spacing: 0.08em; } .itx-lang__list span { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; } /* Burger */ .itx .itx-burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid rgba(242, 211, 160, 0.28); border-radius: 10px; color: #fff; cursor: pointer; place-items: center; } .itx-burger__bars, .itx-burger__bars::before, .itx-burger__bars::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s, opacity 0.2s; } .itx-burger__bars { position: relative; } .itx-burger__bars::before, .itx-burger__bars::after { content: ""; position: absolute; left: 0; } .itx-burger__bars::before { top: -6px; } .itx-burger__bars::after { top: 6px; } .itx-burger[aria-expanded="true"] .itx-burger__bars { background: transparent; } .itx-burger[aria-expanded="true"] .itx-burger__bars::before { transform: translateY(6px) rotate(45deg); } .itx-burger[aria-expanded="true"] .itx-burger__bars::after { transform: translateY(-6px) rotate(-45deg); } /* ------------------------------------------------------------ section shell */ .itx-sec { padding-block: var(--itx-pad-y); position: relative; } .itx-sec--light { background: #fff; color: var(--itx-ink); } .itx-sec--dark { background: radial-gradient(120% 90% at 50% -10%, rgba(233, 195, 132, 0.09), transparent 60%), linear-gradient(180deg, var(--itx-navy-800), var(--itx-navy-900)); color: #fff; } .itx-head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 58px); } .itx-head--center { margin-inline: auto; text-align: center; } .itx-head__eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--itx-gold-deep); margin-bottom: 0.9em !important; } .itx-sec--dark .itx-head__eyebrow { color: var(--itx-gold); } .itx .itx-head__title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: inherit !important; } .itx-head__intro { margin-top: 1em !important; font-size: 1.06rem; line-height: 1.65; color: var(--itx-ink-soft); } .itx-sec--dark .itx-head__intro { color: rgba(255, 255, 255, 0.72); } /* ------------------------------------------------------------------- hero */ .itx-hero { position: relative; overflow: hidden; min-height: min(100svh, 940px); display: flex; align-items: stretch; background: radial-gradient(90% 70% at 50% 0%, #12203a 0%, transparent 55%), linear-gradient(180deg, var(--itx-navy-800) 0%, var(--itx-navy-900) 100%); color: #fff; isolation: isolate; } .itx-hero__map { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: clamp(40px, 6vw, 90px); z-index: 0; pointer-events: none; } .itx-hero__map .itx-map { width: min(1440px, 105%); height: auto; } /* Darkens the map behind the copy so text stays readable at every width. */ .itx-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(58% 44% at 50% 52%, rgba(7, 13, 24, 0.82) 0%, rgba(7, 13, 24, 0.45) 45%, transparent 72%), linear-gradient(180deg, rgba(7, 13, 24, 0.5) 0%, transparent 22%, transparent 55%, rgba(7, 13, 24, 0.92) 92%); } .itx-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; /* Bottom-weighted: keeps the copy clear of the map's northern labels and leaves the coastline readable above the headline. */ justify-content: flex-end; text-align: center; gap: clamp(16px, 2vw, 26px); padding-block: clamp(110px, 13vw, 180px) clamp(40px, 5vw, 76px); } .itx /* The site skin capitalises every h1 ("Anywhere In Iceland"), which fights the headline as it is typed in the dashboard (fixed 1.13.1). */ .itx .itx-hero__title, .itx .itx-hero__title-line { text-transform: none; } .itx-hero__title { font-size: clamp(2.3rem, 5.6vw, 4.6rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.015em; color: #fff !important; text-wrap: balance; } .itx-hero__title-line { display: block; } .itx-hero__lead { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 300; color: rgba(255, 255, 255, 0.76); max-width: 44ch; } /* Service tabs */ .itx-hero__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(10px, 2vw, 22px); width: min(100%, 1060px); } .itx .itx-tab { flex: 1 1 220px; display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; padding: 1.05em 1.6em; border: 1px solid rgba(242, 211, 160, 0.28); border-radius: 10px; background: rgba(11, 21, 36, 0.55); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.9); font-size: 1rem; text-decoration: none; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s; } .itx .itx-tab:hover { border-color: var(--itx-gold); background: rgba(233, 195, 132, 0.12); color: #fff; transform: translateY(-2px); } .itx .itx-tab.is-highlight { background: linear-gradient(180deg, var(--itx-gold-bright), var(--itx-gold)); border-color: var(--itx-gold-bright); color: var(--itx-navy-900); font-weight: 500; } .itx .itx-tab.is-highlight:hover { background: var(--itx-gold-bright); color: var(--itx-navy-900); } .itx-tab__icon { width: 1.25em; height: 1.25em; } /* Trust line */ .itx-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 1.6em; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.66); } .itx-hero__trust li { position: relative; } .itx-hero__trust li + li::before { content: ""; position: absolute; left: -0.85em; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--itx-gold); transform: translateY(-50%); opacity: 0.75; } /* --------------------------------------------------------------- the map */ .itx-map__land { stroke: rgba(233, 195, 132, 0.42); stroke-width: 1; stroke-linejoin: round; } .itx-map__roads path { fill: none; stroke: rgba(226, 166, 84, 0.3); stroke-width: 1.3; stroke-linecap: round; } .itx-map__ring { fill: none; stroke: rgba(233, 169, 78, 0.5); stroke-width: 1.7; stroke-linecap: round; } .itx-map__routes path { fill: none; stroke: var(--itx-gold-bright); stroke-width: 2.4; stroke-linecap: round; } .itx-map__dot { fill: var(--itx-gold-bright); } .itx-map__halo { fill: none; stroke: rgba(242, 211, 160, 0.35); stroke-width: 1.4; } .itx-map__pin-bg { fill: var(--itx-gold-bright); } .itx-map__pin-icon { fill: var(--itx-navy-900); } /* Set by front.js when a label would sit under the headline, tabs or bar. */ .itx-map__label.is-blocked { visibility: hidden; } .itx-map__label { fill: #fff; font-family: var(--itx-font); font-size: 21px; font-weight: 300; letter-spacing: 0.01em; } /* Real terrain (Copernicus DEM hillshade). The image already carries the land colour, so the flat gradient steps aside and only a faint gold coast stays. */ .itx-map--terrain .itx-map__land { fill: var(--itx-land-bottom); stroke: none; } .itx-map__terrain { opacity: var(--itx-terrain-opacity, 0.95); } .itx-map__coastline { fill: none; stroke: rgba(233, 195, 132, 0.38); stroke-width: 0.9; stroke-linejoin: round; } .itx-map__network { fill: none; stroke: rgba(233, 195, 132, var(--itx-network-alpha, 0.2)); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; } .itx-hero--terrain-soft { --itx-terrain-opacity: 0.6; --itx-network-alpha: 0.14; } .itx-hero--terrain-strong { --itx-terrain-opacity: 1; --itx-network-alpha: 0.26; } .itx-hero--terrain-strong .itx-map__terrain { filter: brightness(1.3) contrast(1.08); } /* Map size: "large" lets Iceland fill the hero instead of floating in it. */ .itx-hero--map-large .itx-hero__map { align-items: center; padding-top: 0; } /* As wide as the hero's height allows (the map is ~1.46:1), so the whole island shows without running into the header. */ .itx-hero--map-large .itx-hero__map .itx-map { width: min(128%, calc(min(100svh, 940px) * 1.5)); transform: translateY(-5.5%); } /* Veil strength. "light" keeps the map visible and relies on a soft shadow behind the words; the bottom fade into the next section always stays. */ .itx .itx-hero--veil-light .itx-hero__title, .itx .itx-hero--veil-light .itx-hero__lead, .itx .itx-hero--veil-medium .itx-hero__title, .itx .itx-hero--veil-medium .itx-hero__lead { text-shadow: 0 2px 18px rgba(7, 13, 24, 0.85), 0 1px 3px rgba(7, 13, 24, 0.6); } .itx-hero--veil-light .itx-hero__veil { background: radial-gradient(46% 30% at 50% 60%, rgba(7, 13, 24, 0.55) 0%, rgba(7, 13, 24, 0.22) 50%, transparent 78%), linear-gradient(180deg, rgba(7, 13, 24, 0.35) 0%, transparent 16%, transparent 64%, rgba(7, 13, 24, 0.9) 96%); } .itx-hero--veil-medium .itx-hero__veil { background: radial-gradient(52% 38% at 50% 56%, rgba(7, 13, 24, 0.7) 0%, rgba(7, 13, 24, 0.34) 48%, transparent 75%), linear-gradient(180deg, rgba(7, 13, 24, 0.42) 0%, transparent 20%, transparent 58%, rgba(7, 13, 24, 0.92) 94%); } /* Routes draw themselves in on load. */ .itx-map--animate .itx-map__routes path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: itx-draw 2.4s cubic-bezier(0.33, 0.1, 0.2, 1) forwards; animation-delay: calc(0.25s + var(--itx-route-i, 0) * 0.22s); } .itx-map--animate .itx-map__points { opacity: 0; animation: itx-fade 0.9s ease forwards 1.5s; } @keyframes itx-draw { to { stroke-dashoffset: 0; } } @keyframes itx-fade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .itx-map--animate .itx-map__routes path, .itx-map--animate .itx-map__points { animation: none; stroke-dashoffset: 0; opacity: 1; } } /* ------------------------------------------------------- booking widget */ .itx-hero__booking { width: min(100%, 1180px); margin-top: clamp(14px, 2vw, 26px); } /* Card mode — the widget keeps its own look inside a dark panel. */ .itx-book--card { background: rgba(255, 255, 255, 0.97); border-radius: var(--itx-radius-lg); padding: clamp(16px, 2vw, 26px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); color: var(--itx-ink); text-align: left; } /* * Bar mode — restyles the booking plugin's own markup into the slim * FROM / TO / DATE / PASSENGERS row from the design. * * These selectors target the MagePeople/TSMS widget (class names beginning * `mptbm_`, `.mpForm`, `.formControl`). If a plugin update ever changes that * markup, switch the section's "Booking widget style" to Card — the booking * keeps working either way. */ .itx-book--bar { background: rgba(9, 17, 30, 0.72); border: 1px solid rgba(242, 211, 160, 0.26); border-radius: var(--itx-radius); padding: 10px; backdrop-filter: blur(10px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); text-align: left; } /* * Slim-bar skin for the Taxi System MS / MPTBM booking widget. * * Written defensively on purpose. The widget's stylesheet loads AFTER ours and * paints its boxes with two-class selectors like `.mptbm_search_area .inputList`, * which beat a single class of ours. Rather than chase every wrapper it might * add in a future version, this does two passes: * * 1. Strip the background, border and shadow off EVERY box inside the bar. * 2. Paint back only the four things we actually want: the field boxes, the * Search button, the icons and the popups. * * That way an unrecognised wrapper renders as nothing rather than as a white * slab with white text on it — which is exactly what went wrong in 1.5.0. * * Real markup (taxi-system-ms/templates/registration/get_details.php): * * .mptbm_form_details_area.fdColumn * ._dLayout.mptbm_search_area.inputInline * .mpForm <- main fields * .inputList <- a DIV, not an

* label.fdColumn * span <- field label * input.formControl <- the value * span|i.mptbm_left_icon <- icon, absolutely positioned * .inputList.mp_input_select <- Pickup Time: the input is nested * label.fdColumn > .tsms_tp one level deeper, inside .tsms_tp * .inputList.justifyBetween <- button#mptbm_get_vehicle * .mpForm <- SECOND group, holds Transfer Type */ /* --- 1. Flatten both field groups into a single flex row ---------------- */ /* * `display: contents` is doing the heavy lifting: the fields live in two * separate `.mpForm` groups (the second holds Transfer Type), so without this * the second group always drops onto its own line. */ .itx-book--bar .mptbm_form_details_area, .itx-book--bar .mpForm { display: contents !important; } .itx-book--bar ._dLayout, .itx-book--bar .mptbm_search_area { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; max-width: none !important; } /* --- 2. Strip every box the widget paints ------------------------------- */ .itx-book--bar :is(div, form, section, ul, li, label, span, input, select, button) { background: transparent !important; box-shadow: none !important; } .itx-book--bar :is(div, form, section, label, ul, li) { border: 0 !important; } /* --- 3. Paint the field boxes back -------------------------------------- */ /* * Every layout property here carries !important because the widget sets the * same ones at equal specificity from a stylesheet that loads after ours — * anything left unmarked silently loses the tie. */ .itx-book--bar .inputList { position: relative; /* * Basis 0 + grow: the fields share whatever width the row has, so the bar * never depends on an exact pixel sum. (1.6.x used a 155px basis; on the * live 1128px container six fields + the button summed to 1129px and the * button wrapped onto its own row.) min-width is what makes the row wrap * gracefully on tablets instead of crushing the fields. */ flex: 1 1 0 !important; min-width: 128px !important; margin: 0 !important; /* Right padding leaves room for the absolutely-placed icon. */ padding: 12px 34px 12px 14px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; } /* The template emits empty .inputList divs as spacers — they would show up as phantom boxes in a single-row bar. */ .itx-book--bar .inputList:empty { display: none !important; } .itx-book--bar .inputList label.fdColumn { display: flex !important; flex-direction: column !important; gap: 2px !important; position: static !important; margin: 0 !important; padding: 0 !important; width: auto !important; } /* The Pickup Time input sits one level deeper, inside .tsms_tp. */ .itx-book--bar .tsms_tp { position: static !important; width: auto !important; } /* * The field label — every span in the label that carries no class of its own. * Tracking is tighter than the design placeholder's because these labels are * long ("Maximum Passenger") and would otherwise wrap and deepen the bar. */ .itx-book--bar label.fdColumn > span:not([class]) { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .itx-book--bar :is(.formControl, input[type="text"], input[type="number"], select) { width: 100% !important; border: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; color: #fff !important; font-family: var(--itx-font) !important; font-size: 1rem !important; line-height: 1.5 !important; appearance: none; cursor: pointer; } .itx-book--bar ::placeholder { color: rgba(255, 255, 255, 0.35) !important; opacity: 1; } .itx-book--bar select option { background: var(--itx-navy-800) !important; color: #fff !important; } /* * Icons are absolutely positioned by the widget (one even carries an inline * `left: 87%`), and on the time field the icon is nested inside .tsms_tp — so * they are re-anchored to the field box itself rather than to the label. */ .itx .itx-book--bar .mptbm_left_icon { position: absolute !important; display: block !important; left: auto !important; right: 14px !important; top: auto !important; bottom: 17px !important; /* The widget forces a 45x46 box with a 25px glyph centred in it, which floats the icon up beside the label. A fixed 18px box keeps every glyph inside the field's 34px right padding, so text can never run under it. */ width: 18px !important; text-align: center !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 1rem !important; color: rgba(255, 255, 255, 0.4) !important; } /* --- 4. The Search button ----------------------------------------------- */ /* * Scoped to the search button by id/class, NOT to every `button`: the time * picker ships its own 24h/12h buttons and chevrons that must not turn gold. * `order` keeps it at the end of the bar, because the widget emits it before * the second .mpForm group. */ .itx .itx-book--bar .inputList.justifyBetween { /* The widget ships `.mpStyle .justifyBetween { display: block !important }`, and the wrapper also carries `_fdColumn` — as a COLUMN flex container, stretch sizes children by width, so the button kept its 58px and sat short of the fields. Forcing a row makes stretch apply to the height. */ display: flex !important; flex-direction: row !important; align-items: stretch !important; flex: 0 0 auto !important; order: 99 !important; min-width: 0 !important; width: auto !important; max-width: max-content !important; padding: 0 !important; background: none !important; border: 0 !important; } .itx-book--bar .inputList > span { display: none !important; } .itx .itx-book--bar #mptbm_get_vehicle, .itx .itx-book--bar ._themeButton_fullWidth { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5em !important; width: auto !important; height: auto !important; /* Fills the row via the flex wrapper; the floor keeps it a real button even if it ever ends up on a line of its own. */ min-height: 58px !important; padding: 0 2em !important; background: var(--itx-gold) !important; border: 0 !important; border-radius: 10px !important; color: var(--itx-navy-900) !important; font-family: var(--itx-font) !important; font-size: 0.9rem !important; font-weight: 500 !important; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.25s; } .itx .itx-book--bar #mptbm_get_vehicle:hover, .itx .itx-book--bar ._themeButton_fullWidth:hover { background: var(--itx-gold-bright) !important; } .itx-book--bar #mptbm_get_vehicle .fas { font-size: 0.9em; opacity: 0.75; } /* --- 5. Popups ---------------------------------------------------------- */ /* The time-picker popover and the older time list both need re-darkening, since pass 2 stripped their white backgrounds. */ .itx-book--bar .tsms_tp_pop, .itx-book--bar .mp_input_select_list { background: #0e1a2c !important; border: 1px solid rgba(242, 211, 160, 0.25) !important; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; color: #fff; z-index: 20; } .itx-book--bar .mp_input_select_list { top: calc(100% + 6px); left: 0; right: 0; } .itx-book--bar .mp_input_select_list li { padding: 8px 12px; border-radius: 6px; cursor: pointer; } .itx-book--bar .mp_input_select_list li:hover, .itx-book--bar .tsms_tp_scroll .is-active { background: rgba(233, 195, 132, 0.14) !important; } /* The picker's own small controls, left readable rather than gold. */ .itx-book--bar .tsms_tp_mode, .itx-book--bar .tsms_tp_chev { color: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 6px !important; padding: 4px 10px !important; cursor: pointer; } .itx-book--bar .tsms_tp_mode:hover, .itx-book--bar .tsms_tp_chev:hover { border-color: var(--itx-gold) !important; color: var(--itx-gold) !important; } .itx-book--bar .tsms_tp_title, .itx-book--bar .tsms_tp_scroll { color: #fff !important; } /* * Design placeholder — shown when no booking widget is available. Built from * spans, so it is inert by design: nothing to focus, type in or submit. */ .itx-book--demo { background: rgba(9, 17, 30, 0.72); border: 1px solid rgba(242, 211, 160, 0.26); border-radius: var(--itx-radius); padding: 10px; backdrop-filter: blur(10px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); } .itx .itx-mockbar { display: flex; flex-wrap: wrap !important; align-items: stretch !important; gap: 8px !important; text-align: left; text-decoration: none; color: inherit; } .itx-mockbar__field { flex: 1 1 190px; min-width: 0; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .itx-mockbar__label { display: block; margin-bottom: 4px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .itx-mockbar__value { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; font-size: 1rem; line-height: 1.5; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .itx-mockbar__value.is-muted { color: rgba(255, 255, 255, 0.35); } .itx-mockbar__icon { flex: none; font-size: 1.05em; color: rgba(255, 255, 255, 0.4); } .itx-mockbar__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 62px; padding: 0 2em; border-radius: 10px; background: var(--itx-gold); color: var(--itx-navy-900); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: background-color 0.25s; } /* Only when the placeholder has been given a link to go to. */ .itx-mockbar--link { cursor: pointer; } .itx-mockbar--link:hover .itx-mockbar__btn { background: var(--itx-gold-bright); } .itx-mockbar--link:hover .itx-mockbar__field { border-color: rgba(242, 211, 160, 0.3); } /* Administrator-only note under the placeholder. */ .itx-book__hint { margin-top: 10px !important; padding: 8px 12px; border: 1px dashed rgba(242, 211, 160, 0.4); border-radius: 8px; font-size: 0.8rem; line-height: 1.5; color: rgba(242, 211, 160, 0.85); text-align: left; } /* The widget caps its own width, which would keep the bar narrow. Applies to Card mode too, where the widget keeps its native layout. */ .itx-book .mptbm_search_area, .itx-book .mptbm_form_details_area, .itx-book ._dLayout { max-width: none !important; width: 100% !important; } /* * Google Places autocomplete and the jQuery-UI datepicker are appended to * , outside our scope — so they need dark styling with literal colours. */ body:has(.itx-book--bar) .pac-container { background: #0e1a2c; border: 1px solid rgba(242, 211, 160, 0.25); border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } body:has(.itx-book--bar) .pac-item { border-top-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); padding: 8px 12px; } body:has(.itx-book--bar) .pac-item:hover, body:has(.itx-book--bar) .pac-item-selected { background: rgba(233, 195, 132, 0.14); } body:has(.itx-book--bar) .pac-item-query, body:has(.itx-book--bar) .pac-matched { color: #fff; } /* ----------------------------------------------------------- feature strip */ .itx-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; } .itx-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px; background: rgba(233, 195, 132, 0.14); color: var(--itx-gold-deep); font-size: 26px; } .itx-sec--dark .itx-feature__icon { color: var(--itx-gold); } .itx .itx-feature__title { font-size: 1.12rem; font-weight: 500; line-height: 1.35; color: inherit !important; } .itx-feature__text { margin-top: 0.5em !important; font-size: 0.97rem; line-height: 1.6; color: var(--itx-ink-soft); } .itx-sec--dark .itx-feature__text { color: rgba(255, 255, 255, 0.66); } /* ---------------------------------------------------------------- routes */ .itx-routes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 2.2vw, 30px); } .itx .itx-route { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--itx-hairline); border-radius: var(--itx-radius-lg); background: #fff; color: inherit; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .itx-sec--dark .itx-route { background: rgba(255, 255, 255, 0.04); border-color: var(--itx-hairline-light); } .itx a.itx-route:hover { transform: translateY(-5px); border-color: var(--itx-gold); box-shadow: 0 24px 50px rgba(16, 30, 51, 0.16); } /* Photos are pinned to cover their frame. A plain width/height 100% lost to a theme `img { height: auto }` rule on the live site and left a dark band under every photo (fixed 1.10.1). */ .itx-route__media, .itx-car__media, .itx-split__media { position: relative; } .itx .itx-route__media > img, .itx .itx-route__media > .itx-media--empty, .itx .itx-car__media > img, .itx .itx-car__media > .itx-media--empty, .itx .itx-split__media > img, .itx .itx-split__media > .itx-media--empty { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; min-height: 0; margin: 0; object-fit: cover; object-position: center; } .itx-route__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--itx-navy-700); } .itx-route__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; } .itx a.itx-route:hover .itx-route__img { transform: scale(1.05); } .itx-route__body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 0.7em; flex: 1; } .itx-route__path { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; font-size: 1.12rem; font-weight: 400; line-height: 1.3; } .itx-route__arrow { display: inline-flex; color: var(--itx-gold-deep); font-size: 1.1em; } .itx-route__meta { display: flex; flex-wrap: wrap; gap: 0.4em 1.3em; font-size: 0.9rem; color: var(--itx-muted); } .itx-route__meta span { display: inline-flex; align-items: center; gap: 0.45em; } .itx-sec--dark .itx-route__meta { color: rgba(255, 255, 255, 0.6); } .itx-route__price { margin-top: auto !important; padding-top: 0.8em; border-top: 1px solid var(--itx-hairline); display: flex; align-items: baseline; gap: 0.45em; font-size: 0.85rem; color: var(--itx-muted); } .itx-sec--dark .itx-route__price { border-top-color: var(--itx-hairline-light); } .itx-route__price-value { font-size: 1.6rem; font-weight: 400; color: var(--itx-ink); } .itx-sec--dark .itx-route__price-value { color: var(--itx-gold); } .itx-routes__cta, .itx-tours__cta { margin-top: clamp(28px, 3vw, 46px) !important; text-align: center; } /* ----------------------------------------------------------------- tours */ .itx-tours__wrap { margin-top: 4px; } .itx-tours__wrap--scroll .itx-tours__track { --itx-track-inset: max(calc((100vw - var(--itx-shell)) / 2 + 44px), clamp(18px, 4vw, 44px)); display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--itx-track-inset); /* Snap positions ignore padding, so the inset has to be declared twice or the first card snaps flush against the viewport edge. */ scroll-padding-inline: var(--itx-track-inset); padding-block: 6px 26px; scrollbar-width: thin; scrollbar-color: rgba(233, 195, 132, 0.5) transparent; } .itx-tours__wrap--scroll .itx-tour { flex: 0 0 clamp(250px, 26vw, 340px); scroll-snap-align: start; } .itx-tours__wrap--grid .itx-tours__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px, 2vw, 26px); max-width: var(--itx-shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); } .itx .itx-tour { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--itx-radius-lg); color: #fff; text-decoration: none; isolation: isolate; background: var(--itx-navy-700); } .itx-tour__img, .itx-tour .itx-media--empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); } .itx a.itx-tour:hover .itx-tour__img { transform: scale(1.06); } .itx-tour__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 13, 24, 0.15) 0%, rgba(7, 13, 24, 0) 38%, rgba(7, 13, 24, 0.86) 100%); } .itx-tour__badges { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; } .itx-badge { display: inline-block; padding: 0.4em 0.85em; border-radius: 999px; background: rgba(7, 13, 24, 0.6); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.76rem; letter-spacing: 0.04em; color: #fff; } .itx-badge--gold { background: var(--itx-gold); border-color: var(--itx-gold); color: var(--itx-navy-900); font-weight: 500; } .itx-tour__body { position: relative; z-index: 2; padding: clamp(18px, 2vw, 26px); } .itx .itx-tour__title { font-size: 1.35rem; font-weight: 400; line-height: 1.2; color: #fff !important; } .itx-tour__sub { margin-top: 0.4em !important; font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); } /* ----------------------------------------------------------------- fleet */ .itx-fleet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 28px); } .itx .itx-car { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--itx-hairline); border-radius: var(--itx-radius-lg); background: #fff; color: inherit; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .itx-sec--dark .itx-car { background: rgba(255, 255, 255, 0.04); border-color: var(--itx-hairline-light); } .itx a.itx-car:hover { transform: translateY(-5px); border-color: var(--itx-gold); box-shadow: 0 24px 50px rgba(16, 30, 51, 0.16); } .itx-car__media { aspect-ratio: 16 / 11; background: linear-gradient(160deg, #f3f5f8, #e7ebf1); overflow: hidden; } .itx-sec--dark .itx-car__media { background: var(--itx-navy-700); } .itx-car__img { width: 100%; height: 100%; object-fit: cover; } .itx-car__body { padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 0.5em; flex: 1; } .itx .itx-car__title { font-size: 1.25rem; font-weight: 400; color: inherit !important; } .itx-car__model { font-size: 0.88rem; color: var(--itx-muted); } .itx-car__specs { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; list-style: none; margin: 0.3em 0 0 !important; padding: 0; font-size: 0.9rem; color: var(--itx-ink-soft); } .itx-sec--dark .itx-car__specs, .itx-sec--dark .itx-car__model { color: rgba(255, 255, 255, 0.65); } .itx-car__specs li { display: inline-flex; align-items: center; gap: 0.45em; } .itx-car__specs .itx-icon { color: var(--itx-gold-deep); font-size: 1.05em; } .itx-car__price { margin-top: auto !important; padding-top: 0.7em; border-top: 1px solid var(--itx-hairline); display: flex; align-items: baseline; gap: 0.4em; font-size: 0.85rem; color: var(--itx-muted); } .itx-sec--dark .itx-car__price { border-top-color: var(--itx-hairline-light); } .itx-car__price strong { font-size: 1.45rem; font-weight: 400; color: var(--itx-ink); } .itx-sec--dark .itx-car__price strong { color: var(--itx-gold); } /* ------------------------------------------------------------ how it works */ .itx-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(22px, 3vw, 40px); list-style: none; margin: 0; padding: 0; counter-reset: itx-step; position: relative; /* A hairline on the last step of a wrapped row would poke past the page. */ overflow-x: clip; } /* Three or four steps always sit on one row on wide screens (no 3 + 1 wrap). */ @media (min-width: 1001px) { .itx-steps__list:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .itx-steps__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .itx-step { position: relative; text-align: center; } /* The connecting hairline between steps, on wide screens only. */ @media (min-width: 900px) { .itx-step:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: calc(50% + 44px); right: calc(-50% + 44px); height: 1px; background: linear-gradient(90deg, var(--itx-gold-deep), rgba(201, 160, 99, 0.15)); } .itx-sec--dark .itx-step:not(:last-child)::after { background: linear-gradient(90deg, rgba(233, 195, 132, 0.55), rgba(233, 195, 132, 0.1)); } } .itx-step__mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; border: 1px solid var(--itx-hairline); background: #fff; color: var(--itx-gold-deep); font-size: 26px; } .itx-sec--dark .itx-step__mark { background: var(--itx-navy-700); border-color: var(--itx-hairline-light); color: var(--itx-gold); } .itx-step__num { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--itx-gold); color: var(--itx-navy-900); font-size: 0.75rem; font-style: normal; font-weight: 600; } .itx .itx-step__title { font-size: 1.1rem; font-weight: 500; color: inherit !important; } .itx-step__text { margin-top: 0.5em !important; font-size: 0.95rem; line-height: 1.6; color: var(--itx-ink-soft); } .itx-sec--dark .itx-step__text { color: rgba(255, 255, 255, 0.66); } /* ----------------------------------------------------------- testimonials */ .itx-reviews__score { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.3em 0.7em; margin-bottom: clamp(28px, 3vw, 44px) !important; font-size: 0.98rem; color: var(--itx-ink-soft); } .itx-reviews__stars { display: inline-flex; gap: 2px; color: var(--itx-gold-deep); font-size: 1.15rem; } .itx-reviews__score strong { font-size: 1.35rem; font-weight: 500; color: var(--itx-ink); } .itx-sec--dark .itx-reviews__score { color: rgba(255, 255, 255, 0.7); } .itx-sec--dark .itx-reviews__score strong { color: #fff; } .itx-sec--dark .itx-reviews__stars { color: var(--itx-gold); } .itx-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 28px); } .itx-review { position: relative; display: flex; flex-direction: column; gap: 0.85em; margin: 0; padding: clamp(24px, 2.4vw, 34px); border: 1px solid var(--itx-hairline); border-radius: var(--itx-radius-lg); background: #fff; } .itx-sec--dark .itx-review { background: rgba(255, 255, 255, 0.04); border-color: var(--itx-hairline-light); } .itx-review__mark { position: absolute; top: 18px; right: 20px; font-size: 34px; color: var(--itx-gold); opacity: 0.22; } .itx-review__stars { display: flex; gap: 2px; color: var(--itx-gold-deep); font-size: 1rem; } .itx-sec--dark .itx-review__stars { color: var(--itx-gold); } .itx .itx-review__quote { margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.7; color: var(--itx-ink-soft); quotes: none; } .itx-sec--dark .itx-review__quote { color: rgba(255, 255, 255, 0.78); } .itx-review__by { display: flex; align-items: center; gap: 0.8em; margin-top: auto; padding-top: 0.6em; font-size: 0.92rem; } .itx-review__avatar { width: 42px; height: 42px; min-height: 0; border-radius: 50%; object-fit: cover; flex: none; } .itx-review__by strong { display: block; font-weight: 500; color: inherit; } .itx-review__by em { font-style: normal; font-size: 0.85rem; color: var(--itx-muted); } /* Google reviews */ .itx-reviews__g { display: inline-flex; } .itx-reviews__stars--rated { position: relative; display: inline-block; line-height: 0; } .itx-reviews__stars-base, .itx-reviews__stars-fill { display: inline-flex; gap: 2px; white-space: nowrap; } .itx-reviews__stars-base { opacity: 0.25; } .itx-reviews__stars-fill { position: absolute; top: 0; left: 0; width: var(--itx-rating, 100%); overflow: hidden; } .itx .itx-review__quote--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } .itx .itx-review__quote--clamp.is-open { display: block; -webkit-line-clamp: unset; } .itx .itx-review__more { align-self: flex-start; margin: -0.3em 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 500; color: var(--itx-gold-deep); cursor: pointer; } .itx-sec--dark .itx-review__more { color: var(--itx-gold); } .itx .itx-review__more:hover { text-decoration: underline; background: none; } /* Balanced columns: reviews have very different lengths, so a grid leaves holes (and five cards break 4 + 1). Newest runs down the first column. */ .itx-reviews--google .itx-reviews__grid { display: block; columns: 3 300px; column-gap: clamp(16px, 2vw, 28px); } .itx-reviews--google .itx-review { break-inside: avoid; margin-bottom: clamp(16px, 2vw, 28px); } .itx-review--google .itx-review__by > span:not(.itx-review__g):not(.itx-review__avatar) { flex: 1; min-width: 0; } .itx .itx-review__by strong, .itx .itx-review__by a { font-style: normal; } .itx .itx-review__by a { color: inherit; text-decoration: none; } .itx .itx-review__by a:hover { text-decoration: underline; } .itx .itx-review__avatar--initial { font-style: normal; display: grid; place-items: center; background: var(--itx-gold); color: var(--itx-navy-900); font-weight: 600; } .itx-review__g { display: inline-flex; flex: none; opacity: 0.9; } .itx-reviews__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8em 1.6em; margin-top: clamp(22px, 2.4vw, 34px) !important; font-size: 0.95rem; } .itx .itx-reviews__link { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 500; color: var(--itx-ink); text-decoration: none; } .itx .itx-reviews__link .itx-icon { width: 1em; height: 1em; color: var(--itx-gold-deep); transition: transform 0.2s; } .itx .itx-reviews__link:hover .itx-icon { transform: translateX(3px); } .itx .itx-reviews__link--write { padding: 0.55em 1.2em; border: 1px solid var(--itx-hairline); border-radius: 999px; } .itx-sec--dark .itx-reviews__link { color: #fff; } .itx-sec--dark .itx-reviews__link--write { border-color: var(--itx-hairline-light); } .itx-reviews__admin-note { max-width: 760px; margin: 0 auto 24px !important; padding: 10px 14px; border: 1px dashed #d92d20; border-radius: 10px; background: #fef3f2; font-size: 0.9rem; color: #b42318; text-align: center; } .itx-reviews__source { margin-top: clamp(22px, 2.4vw, 34px) !important; text-align: center; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--itx-muted); } /* ------------------------------------------------------------ text + photo */ .itx-split__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; gap: clamp(26px, 4vw, 64px); } .itx-split--right .itx-split__media { order: 2; } .itx-split__media { border-radius: var(--itx-radius-lg); overflow: hidden; aspect-ratio: 4 / 3; } .itx-split__img { width: 100%; height: 100%; object-fit: cover; } .itx .itx-split__title { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.2; color: inherit !important; margin-bottom: 0.6em !important; } .itx-split__text { font-size: 1.03rem; line-height: 1.75; color: var(--itx-ink-soft); } .itx-split__text p + p { margin-top: 1em; } .itx-sec--dark .itx-split__text { color: rgba(255, 255, 255, 0.72); } .itx-split__cta { margin-top: 1.6em !important; } /* ---------------------------------------------------------------- embeds */ .itx-embed__body { max-width: var(--itx-shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); } .itx-embed--wide .itx-embed__body { max-width: 1600px; } .itx-embed--full .itx-embed__body { max-width: none; padding-inline: 0; } /* ------------------------------------------------------------------- CTA */ .itx-cta { position: relative; padding-block: clamp(70px, 8vw, 130px); color: #fff; text-align: center; background: radial-gradient(100% 100% at 50% 0%, rgba(233, 195, 132, 0.12), transparent 55%), linear-gradient(180deg, var(--itx-navy-800), var(--itx-navy-900)); isolation: isolate; } .itx-cta--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--itx-cta-bg); background-size: cover; background-position: center; } .itx-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 13, 24, 0.72), rgba(7, 13, 24, 0.88)); } .itx-cta--photo { background: none; } .itx-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 1em; } .itx .itx-cta__title { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 300; line-height: 1.12; color: #fff !important; } .itx-cta__text { max-width: 56ch; font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, 0.75); } .itx-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 0.7em !important; } .itx-cta__note { margin-top: 0.6em !important; font-size: 0.85rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); } /* ---------------------------------------------------------------- footer */ .itx-footer { padding-block: clamp(50px, 6vw, 84px) 0; background: linear-gradient(180deg, var(--itx-navy-900), #050a12); color: rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(242, 211, 160, 0.14); } .itx-footer__top { display: grid; /* min(…, 100%) so the columns can never demand more than a phone is wide (240 + 150 + gap overflowed a 390px screen and made the page scroll sideways). */ grid-template-columns: minmax(min(240px, 100%), 1.5fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: clamp(28px, 3.5vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); } .itx-footer__about { margin-top: 1.1em !important; max-width: 38ch; font-size: 0.95rem; line-height: 1.7; color: rgba(255, 255, 255, 0.58); } .itx-footer__socials { display: flex; gap: 10px; list-style: none; margin: 1.4em 0 0 !important; padding: 0; } .itx .itx-footer__socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(242, 211, 160, 0.22); border-radius: 50%; color: rgba(255, 255, 255, 0.75); font-size: 18px; text-decoration: none; transition: border-color 0.25s, color 0.25s, background-color 0.25s, transform 0.25s; } .itx .itx-footer__socials a:hover { border-color: var(--itx-gold); background: rgba(233, 195, 132, 0.12); color: var(--itx-gold); transform: translateY(-2px); } .itx .itx-footer__title { margin-bottom: 1.1em !important; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--itx-gold); } .itx-footer__col ul { display: flex; flex-direction: column; gap: 0.7em; list-style: none; margin: 0; padding: 0; font-size: 0.94rem; } .itx .itx-footer__col a { color: rgba(255, 255, 255, 0.68); text-decoration: none; transition: color 0.2s; } .itx .itx-footer__col a:hover { color: var(--itx-gold); } .itx-footer__contact li { display: flex; align-items: flex-start; gap: 0.6em; line-height: 1.55; } .itx-footer__contact .itx-icon { flex: none; margin-top: 0.2em; color: var(--itx-gold-deep); font-size: 1.05em; } .itx-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 22px 26px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); } .itx-footer__note { display: block; margin-top: 0.3em; color: rgba(255, 255, 255, 0.32); } .itx-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; list-style: none; margin: 0; padding: 0; } .itx .itx-footer__legal a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.2s; } .itx .itx-footer__legal a:hover { color: var(--itx-gold); } /* Footer logo — bigger than the header's, it has the room (1.11.0). */ .itx-footer { --itx-logo-h: 84px; } /* Licence badge (1.11.0). */ .itx .itx-footer__badge { display: block; width: min(150px, 100%); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.25s; } .itx a.itx-footer__badge:hover { transform: translateY(-2px); } .itx .itx-footer__badge img { display: block; width: 100% !important; height: auto !important; max-width: none !important; } /* ------------------------------------------------ partners (scrolling logos) */ .itx-partners { padding-block: clamp(48px, 5vw, 80px); overflow: hidden; } .itx-partners .itx-head { margin-bottom: clamp(24px, 3vw, 40px); } .itx-partners__viewport { overflow: hidden; /* Logos fade in and out at the edges instead of being cut off hard. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .itx-partners__track { display: flex; width: max-content; animation: itx-partners-scroll var(--itx-partners-dur, 30s) linear infinite; } .itx-partners__viewport:hover .itx-partners__track, .itx-partners__viewport:focus-within .itx-partners__track { animation-play-state: paused; } @keyframes itx-partners-scroll { to { transform: translateX(-50%); } } .itx .itx-partners__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 !important; padding: 0 !important; } .itx .itx-partners__item { flex: none; display: flex; align-items: center; justify-content: center; margin: 0; padding-inline: clamp(28px, 4vw, 60px); } .itx .itx-partners__item a { display: block; line-height: 0; } .itx .itx-partners__logo { display: block; height: clamp(38px, 4.4vw, 60px) !important; width: auto !important; max-width: clamp(130px, 16vw, 210px) !important; object-fit: contain; opacity: 0.72; transition: opacity 0.25s; } .itx-partners__item:hover .itx-partners__logo { opacity: 1; } .itx-partners--white .itx-partners__logo { filter: brightness(0) invert(1); } .itx-partners--dark .itx-partners__logo { filter: brightness(0); } /* No motion wanted: show one centred, wrapping set instead. */ @media (prefers-reduced-motion: reduce) { .itx-partners__viewport { -webkit-mask-image: none; mask-image: none; } .itx-partners__track { animation: none; width: auto; justify-content: center; } .itx .itx-partners__list { flex-wrap: wrap; justify-content: center; row-gap: 24px; } .itx-partners__list[aria-hidden="true"], .itx-partners__item[aria-hidden="true"] { display: none !important; } } /* --------------------------------------------------------- reveal on scroll */ /* * Only applies once front.js has added `itx-js` to . If the script is * ever dropped by the cache, content stays visible instead of invisible. */ .itx-js .itx-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); transition-delay: var(--itx-delay, 0ms); } .itx-js .itx-reveal.itx-in { opacity: 1; transform: none; } .itx-tours__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } @media (prefers-reduced-motion: reduce) { .itx-js .itx-reveal { opacity: 1; transform: none; transition: none; } .itx .itx-btn:hover, .itx a.itx-route:hover, .itx a.itx-car:hover, .itx .itx-tab:hover { transform: none; } } /* ------------------------------------------------------------- responsive */ /* * Below the full-width breakpoint, auto-fit would leave a four-item row as * 3 + 1. Two even columns read far better. */ @media (max-width: 1000px) { .itx-features__grid, .itx-fleet__grid, .itx-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------- mobile navigation drawer */ @media (max-width: 1023px) { .itx .itx-burger { display: grid; } /* Booking is the point of the site — keep the button reachable on phones, just tighter. */ .itx-header__cta { padding: 0.7em 1.1em; font-size: 0.74rem; letter-spacing: 0.04em; } /* The drawer covers the viewport, so the logo needs lifting above it or it disappears while the menu is open. */ .itx .itx-logo { position: relative; z-index: 95; } /* The nav is `position: fixed` at this width, so it no longer pushes the actions over — without this the button and burger sit beside the logo with the whole right half of the header empty. */ .itx .itx-header__actions { margin-left: auto; } .itx-nav { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0; padding: calc(var(--itx-header-h) + 24px) clamp(20px, 6vw, 40px) 40px; background: linear-gradient(180deg, var(--itx-navy-800), var(--itx-navy-900)); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; } .itx-nav.is-open { opacity: 1; visibility: visible; transform: none; } .itx-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .itx-nav__list > li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); } .itx .itx-nav__list a { padding: 16px 0; font-size: 1.15rem; } /* Dropdowns become a plain indented list — no hover on touch. */ .itx-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 10px 16px; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; } .itx .itx-nav__list .sub-menu a { padding: 10px 0; font-size: 1rem; color: rgba(255, 255, 255, 0.6); } .itx .itx-nav__phone { display: inline-flex; margin-top: 24px; font-size: 1.05rem; } /* The burger has to stay clickable above the open drawer. */ .itx-header__actions { position: relative; z-index: 95; } /* Stop the page scrolling behind the drawer. */ body.itx-nav-open { overflow: hidden; } } @media (max-width: 860px) { .itx-hero { min-height: auto; } .itx-hero__map { align-items: center; padding-top: 0; opacity: 0.7; } .itx-hero__map .itx-map { width: 165%; } /* The map is zoomed past the viewport here, so labels would be sliced in half at the edges. Keep the routes as texture, drop the words. */ .itx-map__label { display: none; } .itx-hero__veil { background: radial-gradient(75% 50% at 50% 45%, rgba(7, 13, 24, 0.88) 0%, rgba(7, 13, 24, 0.5) 55%, transparent 80%), linear-gradient(180deg, rgba(7, 13, 24, 0.6) 0%, transparent 25%, rgba(7, 13, 24, 0.92) 90%); } /* Terrain carries detail rather than labels, so it can stay brighter here. */ .itx-hero__map:has(.itx-map--terrain) { opacity: 0.92; } .itx-hero--map-large .itx-hero__map { align-items: flex-start; padding-top: 24px; } .itx-hero--map-large .itx-hero__map .itx-map { width: 190%; transform: none; } .itx-hero--veil-light .itx-hero__veil { background: radial-gradient(80% 42% at 50% 52%, rgba(7, 13, 24, 0.62) 0%, rgba(7, 13, 24, 0.3) 55%, transparent 82%), linear-gradient(180deg, rgba(7, 13, 24, 0.35) 0%, transparent 18%, transparent 55%, rgba(7, 13, 24, 0.9) 92%); } .itx-hero--veil-medium .itx-hero__veil { background: radial-gradient(78% 46% at 50% 48%, rgba(7, 13, 24, 0.76) 0%, rgba(7, 13, 24, 0.4) 55%, transparent 80%), linear-gradient(180deg, rgba(7, 13, 24, 0.5) 0%, transparent 22%, rgba(7, 13, 24, 0.92) 90%); } .itx .itx-tab { flex-basis: 100%; justify-content: flex-start; } .itx-split--right .itx-split__media { order: 0; } } @media (max-width: 420px) { /* Logo, button and burger stop fitting on one line around here. */ .itx-header__cta { display: none; } } @media (max-width: 640px) { /* Brand across the top, link columns two-up beneath it. */ .itx-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .itx-footer__brand, .itx-footer__contact { grid-column: 1 / -1; } } @media (max-width: 560px) { .itx-features__grid, .itx-fleet__grid, .itx-steps__list { grid-template-columns: minmax(0, 1fr); } .itx-mockbar__field { flex-basis: 100%; } .itx-mockbar__btn { width: 100%; } /* Every field on its own line… */ .itx .itx-book--bar .inputList { flex: 1 1 100% !important; } /* …except Transfer Type, which shares the last line with Search — an even split, so neither is crushed to its minimum. */ .itx .itx-book--bar .inputList:has(#mptbm_taxi_return) { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; } /* Search takes the other half, or the whole line when Transfer Type is off. */ .itx .itx-book--bar .inputList.justifyBetween { flex: 1 1 calc(50% - 4px) !important; max-width: none !important; } /* Must match the desktop rule's selector: `#mptbm_get_vehicle` carries an ID, so a plain class selector here would lose to it. */ .itx .itx-book--bar #mptbm_get_vehicle, .itx .itx-book--bar ._themeButton_fullWidth { width: 100% !important; } } /* ------------------------------------------------------ questions & answers */ .itx-faq__list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--itx-hairline); } .itx-sec--dark .itx-faq__list { border-top-color: rgba(255, 255, 255, 0.12); } .itx-faq__item { border-bottom: 1px solid var(--itx-hairline); } .itx-sec--dark .itx-faq__item { border-bottom-color: rgba(255, 255, 255, 0.12); } .itx .itx-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 400; line-height: 1.4; cursor: pointer; list-style: none; } .itx .itx-faq__q::-webkit-details-marker { display: none; } .itx .itx-faq__q:hover { color: var(--itx-gold-deep); } .itx-sec--dark .itx-faq__q:hover { color: var(--itx-gold); } /* A plus that becomes a minus — drawn, so no icon font is needed. */ .itx-faq__sign { position: relative; flex: none; width: 20px; height: 20px; } .itx-faq__sign::before, .itx-faq__sign::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--itx-gold-deep); transition: transform 0.25s; } .itx-sec--dark .itx-faq__sign::before, .itx-sec--dark .itx-faq__sign::after { background: var(--itx-gold); } .itx-faq__sign::after { transform: rotate(90deg); } .itx-faq__item[open] .itx-faq__sign::after { transform: rotate(0deg); } .itx-faq__a { padding: 0 40px 22px 4px; max-width: 68ch; line-height: 1.7; color: var(--itx-ink-soft); } .itx-sec--dark .itx-faq__a { color: rgba(255, 255, 255, 0.72); } .itx-faq__a p { margin: 0 0 0.8em !important; } .itx-faq__a p:last-child { margin-bottom: 0 !important; } /* --------------------------------------------- sticky book bar (landing pages) */ .itx-bookbar { display: none; } @media (max-width: 1023px) { .itx-bookbar { position: fixed; z-index: 90; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px; padding: 10px clamp(12px, 4vw, 20px) calc(10px + env(safe-area-inset-bottom)); background: rgba(9, 17, 30, 0.96); backdrop-filter: blur(12px); border-top: 1px solid rgba(242, 211, 160, 0.22); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35); color: #fff; } .itx-bookbar__price { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; } .itx-bookbar__price strong { font-size: 1.05rem; font-weight: 500; color: var(--itx-gold); } .itx-bookbar__price span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); } .itx .itx-bookbar__call { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.72em 0.95em; border: 1px solid rgba(242, 211, 160, 0.4); border-radius: 999px; color: #fff; font-size: 0.82rem; text-decoration: none; white-space: nowrap; } .itx .itx-bookbar__cta { padding: 0.8em 1.15em; font-size: 0.8rem; white-space: nowrap; } /* Nothing must hide behind the bar. */ body:has(.itx-bookbar) .itx-footer { padding-bottom: 78px; } } /* Landing header: no menu, so the button sits next to the logo. */ .itx-header--minimal .itx-nav { gap: 0; } .itx-header--minimal .itx-nav__list { display: none; } /* Slim footer: one column, centred, no link columns. */ .itx-footer--slim .itx-footer__top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; } .itx-footer--slim .itx-footer__about { max-width: 52ch; } .itx-footer--slim .itx-footer__license { display: flex; flex-direction: column; align-items: center; } /* --------------------------------------------------- ask us a question form */ .itx-contact__grid { display: grid; grid-template-columns: minmax(min(320px, 100%), 0.85fr) minmax(min(340px, 100%), 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; } .itx-contact .itx-head { margin-bottom: 1.6em; } .itx-contact__ways { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 !important; padding: 0; } .itx .itx-contact__ways a { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.05em; border: 1px solid var(--itx-hairline); border-radius: 999px; color: inherit; font-size: 0.92rem; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, transform 0.2s; } .itx .itx-contact__ways a:hover { border-color: var(--itx-gold-deep); background: rgba(233, 195, 132, 0.1); transform: translateY(-1px); } .itx-sec--dark .itx-contact__ways a { border-color: rgba(255, 255, 255, 0.18); } .itx-contact__ways .itx-icon { color: var(--itx-gold-deep); } .itx-contact__note { margin-top: 1.1em !important; font-size: 0.88rem; color: var(--itx-muted); } .itx-contact__card { padding: clamp(20px, 3vw, 34px); background: #fff; border: 1px solid var(--itx-hairline); border-radius: var(--itx-radius-lg); box-shadow: 0 24px 60px rgba(11, 21, 36, 0.08); } .itx-sec--dark .itx-contact__card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); } .itx-contact__form .itx-field { display: flex; flex-direction: column; gap: 0.4em; margin: 0 0 1em !important; } .itx-contact__form label { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--itx-ink-soft); } .itx-sec--dark .itx-contact__form label { color: rgba(255, 255, 255, 0.7); } .itx .itx-contact__form input, .itx .itx-contact__form textarea { width: 100%; padding: 0.8em 0.95em; font: inherit; font-size: 1rem; color: inherit; background: #fff; border: 1px solid var(--itx-hairline); border-radius: 12px; box-shadow: none; } .itx-sec--dark .itx-contact__form input, .itx-sec--dark .itx-contact__form textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .itx .itx-contact__form input:focus, .itx .itx-contact__form textarea:focus { outline: 2px solid var(--itx-gold-deep); outline-offset: 1px; border-color: transparent; } /* The honeypot must be reachable by bots but invisible to people. */ .itx-field--trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .itx .itx-contact__send { width: 100%; justify-content: center; margin-top: 0.4em; } .itx-contact__done, .itx-contact__error { display: flex; align-items: flex-start; gap: 0.6em; margin: 0 !important; line-height: 1.6; } .itx-contact__done { color: #1c7a4b; font-size: 1.02rem; } .itx-contact__done .itx-icon { flex: none; margin-top: 0.15em; color: #1c7a4b; } .itx-contact__error { margin-bottom: 1.1em !important; color: #b3261e; font-size: 0.92rem; } @media (max-width: 860px) { .itx-contact__grid { grid-template-columns: 1fr; } }