/* ParkMotion home page — 2026 redesign. Recreates the design handoff with real classes. All values come from tokens.css. Note: this page is intentionally light-only for now; the dark-mode pass is a separate iteration, so the sections below ignore [data-bs-theme]. */ /* ---------------------------------------------------------------- shell -- */ /* The header is translucent and sits outside .pm-page, so the document ground has to carry the page colour itself — otherwise the Bootstrap theme's own body background shows through the bar. --pm-surface follows the theme. */ body.pm-home { background-color: var(--pm-surface); } /* The sticky header is a child of , so 's own box is its containing block — and theme.min.css pins that box to the viewport with `body,html {height:100%}` plus a stray `body{display:flex}` (the Bootstrap `.offcanvas-body` rule with its selector collapsed to the bare element). The header would therefore unstick after roughly one screen of scroll. Restoring normal flow and content height lets it stay put for the whole page. */ body.pm-home { display: block; height: auto; min-height: 100%; } .pm-page { font-family: var(--pm-font); color: var(--pm-ink); background: var(--pm-surface); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .pm-page a { text-decoration: none; } .pm-page ul, .pm-page ol { margin: 0; padding: 0; list-style: none; } .pm-page :focus-visible { outline: 2px solid var(--pm-primary); outline-offset: 3px; border-radius: 4px; } .pm-on-dark :focus-visible { outline-color: var(--pm-cyan); } .pm-container { max-width: var(--pm-max); margin: 0 auto; padding: 0 var(--pm-gutter); } .pm-section { padding: var(--pm-section) 0; } /* ------------------------------------------------------------ typography -- */ .pm-h1 { margin: 0 0 22px; font-size: var(--pm-h1); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--pm-ink); } .pm-h2 { margin: 0; font-size: var(--pm-h2); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; color: var(--pm-ink); } .pm-h3 { margin: 0 0 16px; font-size: var(--pm-h3); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; color: var(--pm-ink); } .pm-lead { margin: 0; font-size: var(--pm-lead); line-height: 1.6; color: var(--pm-body); max-width: 480px; } .pm-body { margin: 0; font-size: var(--pm-base); line-height: 1.6; color: var(--pm-body); max-width: 420px; } /* --------------------------------------------------------------- buttons -- */ .pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--pm-r-pill); font-size: var(--pm-xs); font-weight: 600; padding: 11px 20px; white-space: nowrap; cursor: pointer; transition: background var(--pm-hover) ease, border-color var(--pm-hover) ease, color var(--pm-hover) ease, transform var(--pm-hover) ease; } .pm-btn--lg { font-size: var(--pm-sm); padding: 14px 26px; } .pm-btn--xl { font-size: var(--pm-sm); padding: 15px 28px; } .pm-btn--primary, .pm-page .pm-btn--primary { background: var(--pm-primary); color: var(--pm-on-dark); } .pm-btn--primary:hover, .pm-btn--primary:focus-visible { background: var(--pm-primary-hover); color: var(--pm-on-dark); transform: translateY(-1px); } .pm-btn--ghost, .pm-page .pm-btn--ghost { background: var(--pm-surface); color: var(--pm-ink); border-color: var(--pm-line-btn); } .pm-btn--ghost:hover, .pm-btn--ghost:focus-visible { border-color: var(--pm-primary); color: var(--pm-primary); background: var(--pm-btn-ghost-hover); } .pm-btn--light, .pm-page .pm-btn--light { background: var(--pm-on-dark); color: var(--pm-on-dark-ink); } .pm-btn--light:hover, .pm-btn--light:focus-visible { background: var(--pm-sand); color: var(--pm-on-dark-ink); transform: translateY(-1px); } .pm-btn--outline-light, .pm-page .pm-btn--outline-light { background: transparent; color: var(--pm-on-dark); border-color: rgba(255, 255, 255, 0.28); } .pm-btn--outline-light:hover, .pm-btn--outline-light:focus-visible { border-color: var(--pm-cyan); color: var(--pm-on-dark); background: rgba(28, 202, 216, 0.1); } .pm-btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------------------------------------------------------------- header -- */ /* The site keeps its existing Bootstrap navbar (mobile collapse, language dropdown, theme switch); these rules give it the redesign's skin. */ .navbar.pm-nav { background: var(--pm-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--pm-line); padding: 12px 0; min-height: 72px; } .navbar.pm-nav > .container { max-width: var(--pm-max); padding-left: var(--pm-gutter); padding-right: var(--pm-gutter); gap: 4px 12px; } /* The wordmark is held at its natural width by flex-shrink-0 on its wrapper, but .navbar-brand itself still shrinks. Between the lg breakpoint and ~1190px the row runs out of room, the brand box collapses to a fraction of the logo, and the image overflows it — sliding under the first nav links. Pin the brand and buy the space back from the link padding instead. */ .pm-nav .navbar-brand { flex-shrink: 0; } .pm-nav .navbar-brand img { display: block; } @media (min-width: 992px) and (max-width: 1199.98px) { .pm-nav .navbar-nav { --ar-navbar-nav-link-padding-x: 0.35rem; } .navbar.pm-nav > .container { gap: 4px 6px; padding-left: 20px; padding-right: 20px; } .pm-nav .mode-switch { margin-right: 0.5rem !important; } .pm-nav .pm-nav__cta { padding-left: 0.9rem; padding-right: 0.9rem; } } .pm-nav .nav-link { font-family: var(--pm-font); font-size: var(--pm-xs); font-weight: 500; color: var(--pm-nav-link); white-space: nowrap; transition: color var(--pm-hover) ease; } .pm-nav .nav-link:hover, .pm-nav .nav-link:focus-visible, .pm-nav .nav-item.show > .nav-link { color: var(--pm-primary); } .pm-nav .dropdown-menu { font-family: var(--pm-font); font-size: var(--pm-xs); border-color: var(--pm-line); border-radius: 10px; } /* The language menu is the last control in the bar, so it has to open right-aligned or it runs off the screen on a phone. .dropdown-menu-end cannot do that here: it only sets a --bs-position hint that Popper reads, and the offsets it would apply live behind [data-bs-popper], an attribute Bootstrap's JS adds when it opens the menu. This page ships no Bootstrap JS (home-nav.js just toggles .show), so none of that ever runs and the menu would fall back to its static position. Hence the explicit offsets. On every other page Popper's inline styles win over these, and dropdown-menu-end does the same job there. 12rem is the theme's default min-width, which is far wider than three language codes need. */ .pm-nav .nav-item.dropdown .dropdown-menu { top: 100%; right: 0; left: auto; margin-top: 0.5rem; min-width: 7rem; } .pm-nav .dropdown-item.active, .pm-nav .dropdown-item:active { background: var(--pm-primary-tint); color: var(--pm-primary); } .pm-nav .pm-nav__cta { font-family: var(--pm-font); } /* ------------------------------------------------------------------ hero -- */ .pm-hero { position: relative; /* clips its own radial glows — must not be done on .pm-page, see above */ overflow: hidden; /* bottom padding gives the trust strip room before the ecosystem band */ padding: clamp(64px, 7vw, 104px) 0 clamp(56px, 6vw, 88px); } .pm-hero__glow { position: absolute; border-radius: 50%; pointer-events: none; } /* Centred on the top-right corner of the hero screenshot: the element is a child of .pm-hero__media, pinned to that corner, and translated by half its own size so the circle's middle lands exactly on it. Sizing off the media's width keeps the bloom in proportion to the image at every breakpoint — the clamp only stops it collapsing on narrow screens or ballooning on very wide ones. */ .pm-hero__glow--violet { top: 0; right: 0; width: clamp(260px, 85%, 620px); aspect-ratio: 1 / 1; transform: translate(50%, -50%); background: radial-gradient(circle, var(--pm-glow-violet), transparent 68%); } .pm-hero__glow--cyan { top: 180px; left: -220px; width: 520px; height: 520px; background: radial-gradient(circle, var(--pm-glow-cyan), transparent 68%); } .pm-hero__inner { position: relative; display: flex; flex-wrap: wrap; gap: var(--pm-col-gap); align-items: center; } .pm-hero__text { flex: 1 1 320px; min-width: 0; } .pm-hero__text .pm-lead { margin-bottom: 32px; } /* Eyebrow above the H1 — carries the head term in plain body copy. */ .pm-eyebrow { margin: 0 0 18px; font-weight: 600; font-size: var(--pm-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pm-faint); } .pm-hero__media { position: relative; flex: 1.25 1 340px; min-width: 0; } /* The frame is otherwise unpositioned, so it would paint under the absolutely positioned bloom. This lifts it back on top. */ .pm-hero__media .pm-frame { position: relative; z-index: 1; } /* ------------------------------------------------------- screenshot frame -- */ .pm-frame { border-radius: var(--pm-r-card); border: 1px solid var(--pm-line-card); background: var(--pm-surface); box-shadow: var(--pm-shadow-card); overflow: hidden; } .pm-frame--hero { box-shadow: var(--pm-shadow-hero); } .pm-frame__chrome { height: 34px; border-bottom: 1px solid var(--pm-line-soft); background: var(--pm-surface-3); display: flex; align-items: center; gap: 6px; padding: 0 14px; } .pm-frame__dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--pm-chrome-dot); } .pm-frame__shot { display: block; width: 100%; height: auto; } .pm-frame__ph { display: flex; align-items: center; justify-content: center; background-color: var(--pm-surface-2); background-image: repeating-linear-gradient(135deg, var(--pm-stripe-violet) 0 1px, transparent 1px 9px); } .pm-frame__ph--cyan { background-image: repeating-linear-gradient(135deg, var(--pm-stripe-cyan) 0 1px, transparent 1px 9px); } .pm-frame__ph--16x10 { aspect-ratio: 16 / 10; } .pm-frame__ph--16x11 { aspect-ratio: 16 / 11; } .pm-frame__label { font-weight: 600; font-size: var(--pm-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-faint); background: var(--pm-frame-label-bg); padding: 7px 12px; border: 1px solid var(--pm-line-soft-2); } /* ----------------------------------------------------------- trust strip -- */ .pm-trust { margin-top: clamp(64px, 7vw, 96px); } .pm-trust__inner { border-top: 1px solid var(--pm-line); padding-top: 28px; } .pm-trust__label { margin: 0 0 18px; font-weight: 600; font-size: var(--pm-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pm-faint); } .pm-trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; } /* Each cell links to the lot's ParkoLow listing. */ .pm-trust__cell { min-height: 132px; border: 1px solid var(--pm-line); border-radius: var(--pm-r-cell); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 16px; text-align: center; transition: border-color var(--pm-hover) ease, background var(--pm-hover) ease, transform var(--pm-hover) ease; } .pm-trust__cell:hover, .pm-trust__cell:focus-visible { border-color: var(--pm-line-card); background: var(--pm-surface-2); transform: translateY(-2px); } .pm-trust__cell img { height: 52px; max-width: 100%; width: auto; object-fit: contain; } .pm-trust__name { display: flex; align-items: center; min-height: 2.7em; font-weight: 600; font-size: var(--pm-xxs); line-height: 1.35; color: var(--pm-body); transition: color var(--pm-hover) ease; } .pm-trust__cell:hover .pm-trust__name, .pm-trust__cell:focus-visible .pm-trust__name { color: var(--pm-primary); } /* ------------------------------------------------------------- ecosystem -- */ /* Ecosystem statement — its own section ahead of the three pillars, over a photograph of an airport lot. A navy scrim carries the text; the gradient is lightest on the right so the terminal and the aircraft stay readable. */ .pm-eco-intro { position: relative; padding: clamp(88px, 10vw, 148px) 0; overflow: hidden; background-color: var(--pm-navy); background-image: url("../img/hero-DxvX1y3.webp"); background-size: cover; background-position: 60% center; } .pm-eco-intro::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 105deg, rgba(12, 49, 89, 0.96) 0%, rgba(16, 66, 117, 0.92) 48%, rgba(16, 66, 117, 0.84) 100% ); } .pm-eco-intro__inner { position: relative; z-index: 1; text-align: center; } .pm-eco-intro .pm-h2 { color: var(--pm-on-dark); } .pm-eco-intro .pm-body { max-width: 560px; margin: 20px auto 0; color: var(--pm-on-dark-body-2); } .pm-eco-intro .pm-note { max-width: 760px; margin: 0 auto; border-top-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.82); } .pm-eco-intro .pm-note a { color: var(--pm-cyan); text-decoration-color: rgba(28, 202, 216, 0.45); } .pm-eco-intro .pm-note a:hover, .pm-eco-intro .pm-note a:focus-visible { color: var(--pm-cyan); text-decoration-color: currentColor; } .pm-eco-intro__head { margin-bottom: clamp(32px, 4vw, 48px); } .pm-eco { /* padding: var(--pm-section-sm) 0 0; */ } .pm-note { margin: 0; padding-top: 24px; border-top: 1px solid var(--pm-line); font-size: var(--pm-base); line-height: 1.65; color: var(--pm-body); /* max-width: 720px; */ } /* ----------------------------------------------------------------pillars -- */ .pm-pillar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--pm-col-gap); align-items: center; } .pm-pillar--first { margin-top: clamp(48px, 6vw, 80px); } .pm-pillar__band { background: var(--pm-tint-band); margin-top: clamp(64px, 7vw, 96px); padding: var(--pm-section-sm) 0; } .pm-pillar__plain { padding-top: var(--pm-section-sm); } /* Image first in source order for the banded pillar so it reads left on wide screens and still stacks image-then-text on narrow ones. */ .pm-pillar__media--lead { order: -1; } .pm-pillar__body { margin: 0 0 26px; max-width: 440px; } .pm-pillar__body p { margin: 0 0 14px; font-size: var(--pm-base); line-height: 1.6; color: var(--pm-body); } .pm-pillar__body p:last-child { margin-bottom: 0; } /* Inline links in body copy — .pm-page strips underlines, so put one back or the link is invisible in a paragraph. */ .pm-pillar__body a, .pm-note a { color: var(--pm-primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(62, 31, 195, 0.35); text-underline-offset: 3px; transition: color var(--pm-hover) ease, text-decoration-color var(--pm-hover) ease; } .pm-pillar__body a:hover, .pm-pillar__body a:focus-visible, .pm-note a:hover, .pm-note a:focus-visible { color: var(--pm-primary-hover); text-decoration-color: currentColor; } .pm-page .pm-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px 24px; margin: 0 0 26px; } .pm-checklist li { display: flex; align-items: center; gap: 10px; font-size: var(--pm-sm); font-weight: 500; color: var(--pm-ink-2); } .pm-checklist li::before { content: ""; display: block; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--pm-primary); } .pm-checklist--cyan li::before { background: var(--pm-cyan); } .pm-chip { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: var(--pm-r-pill); background: var(--pm-primary-tint); font-size: var(--pm-xxs); font-weight: 600; color: var(--pm-primary-ink); } .pm-chip__arrow { color: var(--pm-chip-arrow); } .pm-chip--cyan { background: var(--pm-cyan-tint); color: var(--pm-cyan-deep); } .pm-chip--cyan .pm-chip__arrow { color: var(--pm-chip-arrow-cyan); } /* --------------------------------------------------------- integration hub -- */ .pm-hub { margin-top: var(--pm-section); background: var(--pm-navy); padding: clamp(80px, 9vw, 120px) 0; } .pm-hub__head { max-width: 660px; margin: 0 auto; text-align: center; } .pm-h2--on-dark { margin: 0 0 20px; color: var(--pm-on-dark); } .pm-lead--on-dark { margin: 0; font-size: var(--pm-base); line-height: 1.6; color: var(--pm-on-dark-body); max-width: none; } /* Three columns or one — never two. auto-fit used to produce a 2-column state where the integrations wrapped under the sources and the connectors sprayed diagonally across the whole diagram. */ .pm-hub__wrap { position: relative; margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } @media (min-width: 900px) { .pm-hub__wrap { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 76px); } } /* Stacked: hold the diagram to a readable column and keep a right gutter free so the connectors have somewhere to run. */ .pm-hub__wrap > .pm-hub__col, .pm-hub__wrap > .pm-hub__centre { width: 100%; max-width: 480px; margin-inline: auto; padding-right: 52px; } @media (min-width: 900px) { .pm-hub__wrap > .pm-hub__col, .pm-hub__wrap > .pm-hub__centre { max-width: none; margin-inline: 0; padding-right: 0; } } .pm-hub__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .pm-hub__rail { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; } .pm-hub__flow { fill: none; stroke: var(--pm-cyan); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 16; animation: pmflow var(--pm-flow-cycle) linear infinite; } .pm-hub__col { position: relative; z-index: 1; } .pm-hub__label { margin: 0 0 16px; font-weight: 600; font-size: var(--pm-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pm-on-dark-label); } .pm-hub__rows { display: grid; gap: 10px; } .pm-row { padding: 13px 18px; border-radius: var(--pm-r-row); border: 1px solid var(--pm-on-dark-border); background: var(--pm-on-dark-fill); display: flex; align-items: center; gap: 14px; transition: background var(--pm-hover) ease, border-color var(--pm-hover) ease; } .pm-row--src:hover { background: rgba(28, 202, 216, 0.14); border-color: rgba(28, 202, 216, 0.45); } .pm-row--int:hover { background: var(--pm-on-dark-fill-hover); border-color: rgba(255, 255, 255, 0.3); } .pm-tile { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--pm-r-tile); display: flex; align-items: center; justify-content: center; } .pm-tile--logo { background: var(--pm-on-dark); object-fit: contain; display: block; padding: 2px; } .pm-tile--outline { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); } .pm-tile--cyan { background: rgba(28, 202, 216, 0.14); border: 1px solid rgba(28, 202, 216, 0.4); } .pm-tile--sand { background: rgba(244, 208, 111, 0.16); border: 1px solid rgba(244, 208, 111, 0.42); } .pm-tile--ph { background: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(255, 255, 255, 0.4); font-weight: 600; font-size: 9px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45); } .pm-row__name { display: block; font-size: var(--pm-sm); font-weight: 500; color: var(--pm-on-dark); } .pm-row--int .pm-row__name { font-weight: 600; } .pm-row__kind { display: block; font-size: var(--pm-eyebrow); color: var(--pm-on-dark-label); } .pm-hub__centre { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; } .pm-hub__card { width: 100%; max-width: 250px; border-radius: var(--pm-r-hub); background: var(--pm-primary); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: var(--pm-shadow-hub); padding: 26px 22px; text-align: center; } .pm-hub__card img { width: auto; display: block; margin: 0 auto 14px; } .pm-hub__card p { margin: 0; font-size: var(--pm-xxs); line-height: 1.55; color: rgba(255, 255, 255, 0.76); } /* ------------------------------------------------------------- lifecycle -- */ .pm-flow__title { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 580px; text-align: center; } /* Timeline: the steps' top borders butt together (column-gap: 0) so they read as one continuous axis, with each numbered marker sitting on it. When the grid wraps, every row gets its own axis rather than a broken line. */ .pm-flow__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); row-gap: clamp(36px, 4vw, 52px); column-gap: 0; } .pm-step { position: relative; padding: 36px 28px 0 0; border-top: 1px solid var(--pm-line); } /* the last marker has no neighbour to clear, so give its copy the full track */ .pm-step:last-child { padding-right: 0; } .pm-step__n { position: absolute; top: -20px; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pm-primary-tint); color: var(--pm-primary); font-size: var(--pm-xxs); font-weight: 700; letter-spacing: 0.04em; transition: background var(--pm-hover) ease, color var(--pm-hover) ease; } .pm-step:hover .pm-step__n { background: var(--pm-primary); color: var(--pm-on-dark); } .pm-step__t { margin: 0 0 8px; font-size: var(--pm-sm); font-weight: 700; color: var(--pm-ink); transition: color var(--pm-hover) ease; } .pm-step:hover .pm-step__t { color: var(--pm-primary); } .pm-step__b { margin: 0; font-size: var(--pm-xxs); line-height: 1.6; color: var(--pm-muted); } /* ------------------------------------------------------------------ FAQ -- */ .pm-faq__intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 56px); } .pm-faq__list { border-top: 1px solid var(--pm-line); } .pm-faq__item { border-bottom: 1px solid var(--pm-line); } .pm-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 0; margin: 0; cursor: pointer; list-style: none; font-size: var(--pm-base); font-weight: 700; line-height: 1.45; color: var(--pm-ink); transition: color var(--pm-hover) ease; } .pm-faq__q::-webkit-details-marker { display: none; } .pm-faq__q:hover { color: var(--pm-primary); } .pm-faq__sign { position: relative; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--pm-primary-tint); } .pm-faq__sign::before, .pm-faq__sign::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: var(--pm-primary); transform: translate(-50%, -50%); transition: transform var(--pm-hover) ease, opacity var(--pm-hover) ease; } .pm-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); } .pm-faq__item[open] .pm-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .pm-faq__a { margin: 0; padding: 0 0 24px; font-size: var(--pm-sm); line-height: 1.65; color: var(--pm-muted-2); max-width: 720px; } /* ------------------------------------------------------------ proof band -- */ .pm-proof { background: var(--pm-primary); padding: clamp(72px, 8vw, 104px) 0; } .pm-proof__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 56px); } .pm-proof__head .pm-h2 { font-size: var(--pm-h2-proof); color: var(--pm-on-dark); } .pm-proof__head p { margin: 0; font-size: var(--pm-base); line-height: 1.6; color: var(--pm-on-dark-body-2); max-width: 400px; } .pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.2); } .pm-stat { background: var(--pm-primary); padding: 28px 24px; } .pm-stat__fig { margin: 0 0 8px; font-size: var(--pm-stat); line-height: 1; letter-spacing: -0.04em; font-weight: 800; color: var(--pm-on-dark); } .pm-stat__fig--sand { color: var(--pm-sand); } .pm-stat__fig--cyan { color: var(--pm-cyan); } .pm-stat__label { margin: 0; font-size: var(--pm-xs); font-weight: 500; color: rgba(255, 255, 255, 0.7); } /* ------------------------------------------------------------ closing CTA -- */ /* Same airport photograph as the ecosystem statement, so the page opens and closes on the same ground. Cropped from the other side of the frame so the two bands do not read as one image pasted twice. */ .pm-cta { position: relative; overflow: hidden; padding: clamp(88px, 10vw, 136px) 0; background-color: var(--pm-navy); background-image: url("../img/hero-DxvX1y3.webp"); background-size: cover; background-position: 25% center; } /* Navy scrim, same treatment as the ecosystem band: lightest on the right so the terminal and the aircraft stay readable. The form card is opaque, so it does not need the scrim to protect it. */ .pm-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 105deg, rgba(12, 49, 89, 0.96) 0%, rgba(16, 66, 117, 0.92) 48%, rgba(16, 66, 117, 0.86) 100% ); } /* Centred on the form card's top-right corner and sized off the card, so it tracks the form at every width. z-index:-1 drops it behind the card's own translucent background; .pm-cta__inner isolates so it cannot fall further back than that and disappear behind the navy band. */ .pm-cta__glow { position: absolute; top: 0; right: 0; z-index: -1; width: clamp(240px, 80%, 560px); aspect-ratio: 1 / 1; transform: translate(50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--pm-glow-violet), transparent 68%); pointer-events: none; } .pm-cta__inner { position: relative; } .pm-cta__text { max-width: 640px; } .pm-cta__text .pm-h2 { margin: 0 0 20px; font-size: var(--pm-h2-cta); line-height: 1.06; letter-spacing: -0.035em; color: var(--pm-on-dark); } .pm-cta__text p { margin: 0 0 34px; font-size: var(--pm-lead); line-height: 1.6; color: rgba(255, 255, 255, 0.68); } /* Pitch left, form right; one column as soon as the pair no longer fits. */ .pm-cta__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--pm-col-gap); align-items: start; isolation: isolate; } .pm-cta__text { max-width: none; } /* --------------------------------------------------------- contact details -- */ .pm-contact__list { display: grid; gap: 16px; margin: 0; } .pm-contact__label { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--pm-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pm-on-dark-label); } .pm-contact__value { font-size: var(--pm-lead); font-weight: 600; color: var(--pm-on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.28); text-underline-offset: 4px; transition: text-decoration-color var(--pm-hover) ease; } .pm-contact__value:hover, .pm-contact__value:focus-visible { color: var(--pm-on-dark); text-decoration-color: var(--pm-cyan); } /* ------------------------------------------------------------ contact form -- */ .pm-cta__form { position: relative; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--pm-on-dark-border); border-radius: var(--pm-r-hub); /* Solid, not translucent: the photograph behind this band would otherwise show through the card and compete with the fields. Deeper than the band itself so it reads as a panel sitting on it. */ background: var(--pm-navy-deep); } .pm-form__title { margin: 0 0 24px; /* Bigger than the lead size so the card announces itself, but still clearly under the section's h2 — this is a form caption, not a heading. */ font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.015em; color: var(--pm-on-dark); } .pm-form__row { margin-bottom: 18px; } /* Email and phone share a line while there is room for both. */ .pm-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 18px; } .pm-form__label { display: block; margin-bottom: 8px; font-size: var(--pm-lead); font-weight: 600; color: var(--pm-on-dark-body-2); } .pm-form__input { display: block; width: 100%; padding: 12px 14px; font-family: var(--pm-font); font-size: var(--pm-sm); color: var(--pm-on-dark); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--pm-on-dark-border); border-radius: 10px; transition: border-color var(--pm-hover) ease, background var(--pm-hover) ease; } .pm-form__input::placeholder { color: var(--pm-on-dark-meta); } .pm-form__input:hover { border-color: rgba(255, 255, 255, 0.28); } .pm-form__input:focus { outline: none; background: rgba(255, 255, 255, 0.1); border-color: var(--pm-cyan); } .pm-form__textarea { resize: vertical; min-height: 110px; } .pm-form__hint { margin: -8px 0 18px; font-size: var(--pm-xxs); color: var(--pm-on-dark-meta); } .pm-form__submit { width: 100%; margin-top: 4px; border: 0; cursor: pointer; } /* Symfony renders field errors as a