/* ========================================================================== Monarch Rentals - custom stylesheet. Every new or reworked style ships from this one file so an update can be handed over as a single download. Loaded after site.css and ui.css, so it wins on equal specificity. Tokens come from site.css :root. Contents 1. Shared page components (.ab-) - banner, drawn rules, ledger rows 2. About page 3. Contact page 4. Partners page ========================================================================== */ /* ========================================================================== 1. Shared page components -------------------------------------------------------------------------- The .ab- prefix is the shared namespace: the fullscreen banner, the drawn rule and the ledger row are used by more than one page. Anything below that only one page needs is kept in that page's own section. Motion contract: custom.js puts .ab-anim on only when GSAP is present and the visitor allows motion. Every start-state below is scoped to that class, so with no JS, a failed script or reduced motion the page renders fully visible and static. Never move a start-state out of .ab-anim. Signature: rules are drawn, never faded. The gold hairline under the hero headline and every divider in the ledger arrive by scaling from the left, which is the one motion idea the page repeats. ========================================================================== */ /* Shared by every page built on the .ab- components below. */ :root { --ab-edge: rgba(236, 235, 230, 0.1); --ab-gold-wash: rgba(201, 179, 126, 0.07); } /* site.css sets overflow-x: hidden on body, which makes body a scroll container and stops position: sticky working anywhere inside it - the journey timeline depends on sticky. clip holds back horizontal overflow the same way without creating a scroll container. Browsers too old for clip ignore this and keep the old hidden behaviour, so nothing breaks, sticky just does not engage. */ body { overflow-x: clip; } /* ---------- Shared pieces ---------- */ /* Line-mask wrapper: the inner span is what moves. */ .ab-line { display: block; overflow: hidden; } .ab-line > span { display: block; } html.ab-anim .ab-line > span { transform: translateY(110%); } /* Held until custom.js has split it, which waits for the display font so the masks match the real line breaks. The script sets visibility back inline. */ html.ab-anim [data-ab-split] { visibility: hidden; } /* The drawn rule. */ .ab-rule { display: block; height: 1px; width: 100%; background: var(--accent); transform-origin: left center; } html.ab-anim .ab-rule { transform: scaleX(0); } .ab-eyebrow { display: inline-flex; align-items: center; gap: 0.85rem; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } .ab-eyebrow::before { content: ''; width: 2.5rem; height: 1px; background: currentColor; opacity: 0.55; } html.ab-anim .ab-fade { opacity: 0; transform: translateY(24px); } /* ---------- Hero ---------- */ .ab-hero { position: relative; /* Just under three quarters of the screen, so the section beneath shows at the fold. min- rather than a fixed height so a short viewport grows the banner instead of clipping the headline against overflow: hidden. */ min-height: min(74svh, 44rem); display: flex; align-items: flex-end; /* Top padding only clears the fixed nav; bottom clears the scroll cue. */ padding: calc(var(--nav-h) + 1.5rem) 0 clamp(5.5rem, 8.5vw, 7rem); overflow: hidden; isolation: isolate; } /* The car is atmosphere on this page, not the subject: it sits far back, cropped to the right edge and dimmed under a scrim so the type carries. */ .ab-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } /* Overflow is symmetric top and bottom so the parallax drift never uncovers an edge. Headroom must stay larger than the drift set in data-ab-parallax. */ .ab-hero__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 72% 45%; opacity: 0.72; filter: grayscale(0.18) contrast(1.05); will-change: transform; } /* Weighted to the lower left, where the headline sits. The right side stays almost clear so the car reads. */ .ab-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(11, 11, 13, 0.92) 6%, rgba(11, 11, 13, 0.55) 40%, rgba(11, 11, 13, 0.08) 76%), linear-gradient(to top, rgba(11, 11, 13, 0.92) 0%, transparent 42%); } .ab-hero__inner { position: relative; max-width: 62rem; } .ab-hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 0.98; letter-spacing: -0.02em; margin: 1.2rem 0 0; color: var(--white); } /* One gold italic word carries the whole thesis of the page. */ .ab-hero__title em { font-style: italic; font-weight: 400; color: var(--accent); } .ab-hero__rule { margin: clamp(1.25rem, 2.4vw, 1.85rem) 0 clamp(1.1rem, 2.2vw, 1.6rem); max-width: 30rem; } /* Sized down alongside the headline, and given a wider measure so it settles into fewer lines - the lede was the biggest single contributor to the height. */ .ab-hero__lede { font-family: var(--serif); font-size: clamp(1.1rem, 1.75vw, 1.45rem); line-height: 1.5; color: var(--text-2); max-width: 40rem; margin: 0; } .ab-hero__cue { position: absolute; left: var(--gutter); bottom: clamp(1.25rem, 2.5vw, 1.75rem); display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); transition: color 0.35s var(--ease); } .ab-hero__cue:hover { color: var(--platinum); } .ab-hero__cue i { display: block; width: 1px; height: 2rem; background: linear-gradient(to bottom, var(--accent), transparent); animation: ab-cue 2.4s var(--ease) infinite; transform-origin: top; } @keyframes ab-cue { 0% { transform: scaleY(0.35); opacity: 0.3; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* The crumbs sit above the headline, quiet. */ .ab-crumbs { display: flex; gap: 0.6rem; align-items: center; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); } .ab-crumbs a { transition: color 0.3s; } .ab-crumbs a:hover { color: var(--platinum); } .ab-crumbs li + li::before { content: '/'; margin-right: 0.6rem; opacity: 0.5; } .ab-crumbs li { display: inline-flex; align-items: center; } .ab-crumbs [aria-current] { color: var(--text-2); } /* ========================================================================== 2. About page ========================================================================== */ /* ---------- Statement ---------- */ .ab-statement { position: relative; padding: clamp(5.5rem, 12vw, 10rem) 0; overflow: hidden; isolation: isolate; } /* Background: a gold bloom sitting behind the photo, plus the site's grain texture over it so the flat black picks up some depth. */ .ab-statement__glow { position: absolute; z-index: -2; left: -14%; top: 6%; width: min(72vw, 58rem); aspect-ratio: 1; background: radial-gradient(circle, rgba(201, 179, 126, 0.17) 0%, rgba(201, 179, 126, 0.06) 36%, transparent 68%); pointer-events: none; will-change: transform; } .ab-statement::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: url('../images/site/grain.png'); background-size: 240px; opacity: 0.045; pointer-events: none; } /* Heading holds the left column, the company's own words the right. */ .ab-statement__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } .ab-statement__title { font-size: clamp(2rem, 3.9vw, 3.3rem); line-height: 1.14; margin: 0; color: var(--white); max-width: 18ch; } .ab-statement__rule { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 9rem; } .ab-statement__body p { font-size: 1rem; line-height: 1.85; color: var(--text-2); margin: 0 0 1.5rem; max-width: 54ch; } .ab-statement__body p:last-child { margin-bottom: 0; } /* ---------- Numbers strip ---------- Every figure here is read from the fleet and the published reviews, so it cannot drift out of date. Label sits above the value. */ .ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(2.25rem, 4.5vw, 3.25rem); border-top: 1px solid var(--ab-edge); } .ab-stat { display: grid; gap: 0.9rem; align-content: start; padding: 0 clamp(0.75rem, 2.2vw, 2rem); border-left: 1px solid var(--ab-edge); } .ab-stat:first-child { border-left: 0; padding-left: 0; } .ab-stat__label { font: 600 0.66rem/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0; } .ab-stat__value { display: flex; align-items: baseline; gap: 0.1rem; margin: 0; /* it is a
*/ font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1; color: var(--white); } .ab-stat__value small { font-size: 0.42em; color: var(--accent); } /* ---------- Journey timeline ---------- Full-bleed alternating rows. The photo leads on the first step, then the two columns trade sides on every step after it. On desktop with motion allowed the section becomes scroll-driven: a sticky full-height viewport where each step's columns slide in from their own side. Everywhere else (no JS, reduced motion, narrow screens) the same markup is a plain stacked list, which is why none of the sticky rules live outside the media query below. */ .tl { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(4rem, 8vw, 6.5rem) 0 0; } .tl__head { margin-bottom: clamp(3rem, 6vw, 5rem); } .tl__heading { margin: 1.25rem 0 0; color: var(--white); max-width: 20ch; } .tl__stage { display: grid; } .tl__step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .tl__copy { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem); } .tl__copy { order: 2; } .tl__shot { order: 1; } .tl__step:nth-child(even) .tl__copy { order: 1; } .tl__step:nth-child(even) .tl__shot { order: 2; } /* Step number rides with its label. The copy column carries the detail list and a link now, so a display-size numeral would crowd them out. */ .tl__label { display: flex; align-items: baseline; gap: 0.85rem; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.25rem; } .tl__num { font-family: var(--serif); font-size: 1.7rem; line-height: 1; letter-spacing: 0; color: var(--accent); } .tl__title { font-size: clamp(1.8rem, 3.1vw, 2.7rem); line-height: 1.12; margin: 0 0 1.25rem; color: var(--white); max-width: 14ch; } .tl__text { margin: 0; color: var(--text-2); line-height: 1.8; max-width: 42ch; } /* Detail list: hairline rows with a gold tick, the same drawn-line language as the ledger further down the page. */ .tl__points { margin: 1.75rem 0 0; max-width: 40ch; } .tl__points li { display: flex; gap: 0.85rem; padding: 0.7rem 0; border-top: 1px solid var(--ab-edge); font-size: 0.92rem; line-height: 1.6; color: var(--text-2); } .tl__points li::before { content: ''; flex: none; width: 0.9rem; height: 1px; margin-top: 0.82em; background: var(--accent); } .tl__link { margin: 1.75rem 0 0; } .tl__shot { position: relative; margin: 0; overflow: hidden; } .tl__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-3); } /* Caption sits on the photo: the photo runs to the screen edge, so a caption under it would collide with that edge. */ .tl__shot figcaption { position: absolute; left: clamp(1.25rem, 2.5vw, 2rem); bottom: clamp(1.1rem, 2.2vw, 1.75rem); font: 500 0.72rem/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 14px rgba(11, 11, 13, 0.95); } /* --- Scroll-driven mode --- */ @media (min-width: 1024px) { /* Scroll budget per step. The sticky child is one viewport tall, so the pinned travel is this total minus 100vh. */ html.ab-anim .tl__inner { height: calc(var(--tl-steps, 5) * 72vh); } html.ab-anim .tl__viewport { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; } html.ab-anim .tl__stage { height: 100%; } /* Every step shares one cell, so switching never reflows the layout. Columns stretch to the full height and the copy centres itself inside its half. */ html.ab-anim .tl__step { grid-area: 1 / 1; height: 100%; align-items: stretch; opacity: 0; visibility: hidden; } html.ab-anim .tl__step.is-active { opacity: 1; visibility: visible; } html.ab-anim .tl__copy { display: flex; flex-direction: column; justify-content: center; } /* The photo fills its half of the viewport, top to bottom. */ html.ab-anim .tl__shot img { height: 100%; aspect-ratio: auto; } } @media (max-width: 767px) { .tl__step { grid-template-columns: 1fr; } /* Stacked, the photo always leads and the copy follows. */ .tl__copy, .tl__step:nth-child(even) .tl__copy { order: 2; padding: 1.75rem var(--gutter) 0; } .tl__shot, .tl__step:nth-child(even) .tl__shot { order: 1; } .tl__step { padding-bottom: 3rem; } .tl__title { max-width: 20ch; } } /* ---------- Founder panel ---------- Three columns that assemble: statement, portrait, promises. Each column arrives from a different direction (see custom.js), which is why the section clips its overflow. The animation uses gsap.from, so the resting state is what the CSS describes and a failed script leaves everything in place. */ .fd { position: relative; border-top: 1px solid var(--line); overflow: hidden; } .fd__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1fr); align-items: stretch; min-height: min(88svh, 52rem); } /* Column 1: the statement */ .fd__lead { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem) var(--gutter); background: var(--bg); } .fd__title { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.06; margin: 1.5rem 0 0; color: var(--white); max-width: 12ch; } .fd__title em { font-style: italic; font-weight: 400; color: var(--accent); } .fd__sign { margin: clamp(2rem, 4vw, 3rem) 0 0; font: 500 0.75rem/1.7 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .fd__sign b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: none; color: var(--text); margin-bottom: 0.35rem; } /* Drawn rule above the signature, same language as the rest of the page. */ .fd__sign::before { content: ''; display: block; width: 3.5rem; height: 1px; background: var(--accent); margin-bottom: 1.25rem; } /* Column 2: the portrait */ .fd__portrait { position: relative; margin: 0; overflow: hidden; background: var(--bg-3); } /* Direct child only: this is the portrait treatment, and it must not reach the brand mark inside the .fd__plate fallback below, which is its own shape and already the right colour. */ .fd__portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; /* Pulled toward the site's palette: the stock colour would fight the gold. */ filter: grayscale(1) contrast(1.08) brightness(0.82); } .fd__portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 13, 0.55), transparent 45%); pointer-events: none; } /* Stands in for the portrait until a real one is supplied: the brand mark on the house ground, lit from behind by the same gold the rest of the page uses. z-index lifts it over the scrim above, which is a pseudo-element and would otherwise paint on top of it. It has to sit well in both shapes this column takes - the tall strip on desktop and the 4:3 box on phones - so everything is simply centred. */ .fd__plate { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); /* One step darker than the commitments panel beside it, so the three columns still read as three surfaces: bg on the left, this in the middle, bg-3 on the right. */ background: radial-gradient(120% 68% at 50% 42%, rgba(201, 179, 126, 0.13) 0%, rgba(201, 179, 126, 0.035) 42%, transparent 68%), var(--bg-2); } /* Grain at the weight the statement band uses, on its own layer so it never lifts the whole panel. */ .fd__plate::before { content: ''; position: absolute; inset: 0; background-image: url('../images/site/grain.png'); background-size: 240px; opacity: 0.045; pointer-events: none; } .fd__plate-mark { position: relative; width: min(62%, 13rem); height: auto; display: block; opacity: 0.92; } .fd__plate-rule { position: relative; width: 3.5rem; height: 1px; background: var(--accent); margin-top: clamp(1.5rem, 3vw, 2.25rem); } /* Column 3: the promises */ .fd__panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); background: var(--bg-3); } .fd__label { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.25rem; } .fd__text { margin: 0 0 2rem; color: var(--text-2); line-height: 1.75; font-size: 0.97rem; max-width: 38ch; } .fd__list { display: grid; } .fd__list li { padding: 1rem 0; border-top: 1px solid var(--ab-edge); } .fd__list li:last-child { border-bottom: 1px solid var(--ab-edge); } .fd__list-title { display: block; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 0.45rem; } .fd__list-note { display: block; font-size: 0.88rem; line-height: 1.6; color: var(--muted); } /* Rotated rule down the outer edge, as in the reference. Decorative. */ .fd__vertical { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); opacity: 0.7; pointer-events: none; } @media (max-width: 1023px) { .fd__grid { grid-template-columns: 1fr; min-height: 0; } .fd__portrait { aspect-ratio: 4 / 3; } .fd__lead { padding: clamp(2.5rem, 7vw, 4rem) var(--gutter); } .fd__title { max-width: 18ch; } .fd__panel { padding: clamp(2.5rem, 7vw, 4rem) var(--gutter); } .fd__vertical { display: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1023px) { .ab-statement__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.75rem); } .ab-statement__title { max-width: 24ch; } .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 2.75rem) 0; } /* On two columns the third stat starts a new row, so it loses its divider. */ .ab-stat:nth-child(odd) { border-left: 0; padding-left: 0; } } @media (max-width: 767px) { .ab-hero { padding-top: calc(var(--nav-h) + 1rem); padding-bottom: clamp(2.5rem, 7vw, 3.5rem); } .ab-hero__media img { object-position: 62% 45%; opacity: 0.6; } .ab-hero__cue { display: none; } .ab-hero__title { font-size: clamp(2.4rem, 11vw, 3.6rem); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .ab-hero__cue i { animation: none; opacity: 0.8; transform: none; } } /* ========================================================================== 3. Contact page -------------------------------------------------------------------------- The banner is the shared .ab-hero. Below it the page puts the three ways to reach a human first and the form second, because most people arriving here already know what they want to ask. ========================================================================== */ /* ---------- Ways to reach us ---------- */ .ct-channels { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(1rem, 2vw, 2rem); } .ct-channels__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); } .ct-channel { display: grid; gap: 0.85rem; align-content: start; } .ct-channel__label { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin: 0; } /* The phone number and address are the page's real content, so they are set at heading scale rather than buried in a definition list. */ .ct-channel__value { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; color: var(--white); transition: color 0.35s var(--ease); } a.ct-channel__value:hover { color: var(--accent); } .ct-channel__value--mail { font-size: clamp(1.05rem, 1.6vw, 1.4rem); word-break: break-word; } .ct-channel__value--address { font-size: clamp(1.2rem, 1.9vw, 1.6rem); } .ct-channel__note { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); } /* ---------- Enquiry ---------- */ .ct-enquiry { padding: clamp(4rem, 9vw, 7rem) 0; } .ct-enquiry__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; } .ct-enquiry__aside { position: sticky; top: calc(var(--nav-h) + 2rem); } .ct-enquiry__title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin: 0 0 1.25rem; color: var(--white); text-wrap: balance; } .ct-enquiry__text { color: var(--text-2); line-height: 1.8; margin: 0 0 clamp(2rem, 4vw, 2.75rem); max-width: 42ch; } .ct-hours { display: grid; gap: 1.5rem; margin: 0; } .ct-hours > div { display: grid; gap: 0.4rem; padding-top: 1.25rem; border-top: 1px solid var(--ab-edge); } .ct-hours dt { font: 600 0.66rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .ct-hours dd { margin: 0; color: var(--text-2); line-height: 1.65; } /* The form keeps .form-panel's base look and adds a gold top edge so it reads as the page's primary action. */ .ct-form { border-top: 2px solid var(--accent); } /* ---------- FAQ hand-off ---------- */ .ct-faq { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); background: var(--bg-2); } .ct-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; } .ct-faq__title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 0; color: var(--white); text-wrap: balance; } .ct-faq__text { color: var(--text-2); line-height: 1.75; margin: 0 0 2rem; max-width: 40ch; } /* ---------- Responsive ---------- */ @media (max-width: 1023px) { .ct-channels__list { grid-template-columns: 1fr; gap: 2.25rem; } .ct-channel { padding-top: 1.5rem; border-top: 1px solid var(--ab-edge); } .ct-channels__list > .ct-channel:first-child { border-top: 0; padding-top: 0; } .ct-enquiry__grid { grid-template-columns: 1fr; } .ct-enquiry__aside { position: static; } .ct-faq__grid { grid-template-columns: 1fr; align-items: start; } } /* ========================================================================== 4. Partners page -------------------------------------------------------------------------- Sells a partnership to someone who owns (or is about to buy) a car worth putting on the platform. Order answers their questions in the order they ask them: what is this, who does what, how does it run, what is already here, how am I protected, let's talk. ========================================================================== */ /* ---------- The offer ---------- */ .pt-offer { position: relative; padding: clamp(5rem, 10vw, 8.5rem) 0; overflow: hidden; isolation: isolate; } .pt-offer__glow { position: absolute; z-index: -1; right: -16%; top: 0; width: min(64vw, 52rem); aspect-ratio: 1; background: radial-gradient(circle, rgba(201, 179, 126, 0.15) 0%, rgba(201, 179, 126, 0.05) 38%, transparent 68%); pointer-events: none; will-change: transform; } /* The copy card overlaps the photograph rather than sitting beside it, so this section does not read as a repeat of the about page's two-column statement. Twelve columns: photo spans 4-12, card spans 1-6, they overlap across 4-6. */ .pt-offer__stage { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; margin-top: clamp(2rem, 4vw, 3.25rem); } .pt-offer__media { grid-area: 1 / 4 / 2 / 13; position: relative; margin: 0; overflow: hidden; background: var(--bg-3); } /* Shown as shot: no scrim and no filter. The photograph already carries its own empty plate on the left, which is what the copy card sits over. */ .pt-offer__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 55%; } .pt-offer__card { grid-area: 1 / 1 / 2 / 7; z-index: 2; background: var(--bg-2); border-top: 2px solid var(--accent); padding: clamp(1.75rem, 3.2vw, 3rem); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); } .pt-offer__title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.14; margin: 0; color: var(--white); max-width: 15ch; } .pt-offer__rule { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0; max-width: 7rem; } .pt-offer__body p { font-size: 0.98rem; line-height: 1.8; color: var(--text-2); margin: 0 0 1.2rem; max-width: 44ch; } .pt-offer__body p:last-child { margin-bottom: 0; } /* ---------- What we handle ---------- Photo panel on the left, duties on the right. Hovering a duty swaps the photo beneath the scrim. The photos are atmosphere only, so the panel is aria-hidden and the list reads perfectly well without any of it - which is also what happens with no JS, since the first photo is marked active in the markup rather than by script. */ .pt-duo { padding: clamp(4.5rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--line); } .pt-duo__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .pt-shots { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); } .pt-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 0.7s var(--ease), transform 1.3s var(--ease); } .pt-shot.is-active { opacity: 1; transform: none; } /* The shots are the fleet's studio renders, which are 16:9, and this panel is portrait. Each render is shown whole over a blurred, scaled copy of itself rather than cropped, so no car loses its ends. */ .pt-shot__bg, .pt-shot__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pt-shot__bg { object-fit: cover; transform: scale(1.2); filter: blur(30px) saturate(115%); opacity: 0.5; } .pt-shot__img { object-fit: contain; } /* The overlay: keeps the swapping photos on one tonal footing so the panel does not flash light and dark as the reader moves down the list. */ .pt-shots__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11, 11, 13, 0.85) 0%, rgba(11, 11, 13, 0.25) 45%, rgba(11, 11, 13, 0.45) 100%), linear-gradient(to right, rgba(201, 179, 126, 0.07), transparent 60%); } .pt-duo__title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; margin: 1.25rem 0 1.25rem; color: var(--white); max-width: 18ch; } .pt-duo__note { margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); color: var(--text-2); line-height: 1.75; max-width: 44ch; } .pt-duties { display: grid; } .pt-duties li { display: flex; gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--ab-edge); color: var(--text-2); font-size: 1rem; line-height: 1.6; cursor: default; transition: color 0.35s var(--ease), transform 0.35s var(--ease); } .pt-duties li:last-child { border-bottom: 1px solid var(--ab-edge); } .pt-duties li::before { content: ''; flex: none; width: 0.9rem; height: 1px; background: var(--accent); transform: translateY(-0.35em); transition: width 0.4s var(--ease); } .pt-duties li.is-active { color: var(--white); transform: translateX(5px); } .pt-duties li.is-active::before { width: 2.1rem; } @media (max-width: 1023px) { .pt-duo__grid { grid-template-columns: 1fr; } .pt-shots { aspect-ratio: 3 / 2; } .pt-duties li.is-active { transform: none; } } /* ---------- How it runs ---------- */ .pt-steps { padding: clamp(5rem, 10vw, 8rem) 0; border-top: 1px solid var(--line); } .pt-steps__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .pt-steps__title { margin: 1.25rem 0 0; color: var(--white); max-width: 18ch; } .pt-steps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .pt-step { padding-top: 1.5rem; border-top: 1px solid var(--ab-edge); } /* This really is a sequence, so the numbering carries information. */ .pt-step__num { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--accent); margin: 0 0 1rem; } .pt-step__title { font: 600 0.74rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin: 0 0 0.7rem; } .pt-step__text { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.65; } /* ---------- Fleet proof ---------- */ .pt-fleet { padding: clamp(4.5rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--line); background: var(--bg-2); } .pt-fleet__head { display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: baseline; justify-content: space-between; margin-bottom: clamp(2rem, 4vw, 3rem); } .pt-fleet__title { margin: 1.25rem 0 0; color: var(--white); } .pt-fleet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } /* Each card is a link to the vehicle page that JS upgrades into a lightbox. */ .pt-car { display: block; position: relative; overflow: hidden; } /* 16:9 is the studio renders' own shape, so each card shows its car exactly as the fleet page frames it. */ .pt-car img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-3); transition: transform 0.8s var(--ease); } .pt-car:hover img { transform: scale(1.04); } .pt-car::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 13, 0.8), transparent 45%); pointer-events: none; } .pt-car__name { position: absolute; left: 1.1rem; bottom: 0.95rem; right: 1.1rem; z-index: 1; font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); } /* Tells the reader there is more behind the card before they click. */ .pt-car__count { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 1; padding: 0.4rem 0.7rem; background: rgba(11, 11, 13, 0.72); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateY(-4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .pt-car:hover .pt-car__count, .pt-car:focus-visible .pt-car__count { opacity: 1; transform: none; } /* ---------- Lightbox ---------- */ body.lb-open { overflow: hidden; } .lb { position: fixed; inset: 0; z-index: 80; display: flex; } .lb[hidden] { display: none; } .lb__backdrop { position: absolute; inset: 0; background: rgba(6, 6, 8, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lb__dialog { position: relative; margin: auto; width: min(100%, 1280px); padding: clamp(1rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: clamp(0.75rem, 2vw, 1.25rem); } .lb__bar { display: flex; align-items: center; gap: 1.25rem; } .lb__name { margin: 0; flex: 1 1 auto; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--white); } .lb__count { margin: 0; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.2em; color: var(--accent); } .lb__close { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-content: center; border: 1px solid var(--line-strong); color: var(--text); transition: background 0.3s var(--ease), color 0.3s var(--ease); } .lb__close:hover { background: var(--platinum); color: var(--bg); } .lb__stage { position: relative; display: flex; align-items: center; justify-content: center; } .lb__img { width: 100%; max-height: min(76svh, 46rem); object-fit: contain; background: var(--bg-2); } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: grid; place-content: center; background: rgba(11, 11, 13, 0.72); border: 1px solid var(--line-strong); color: var(--text); transition: background 0.3s var(--ease), color 0.3s var(--ease); } .lb__nav:hover { background: var(--platinum); color: var(--bg); } .lb__nav--prev { left: clamp(0.5rem, 1.5vw, 1rem); } .lb__nav--next { right: clamp(0.5rem, 1.5vw, 1rem); } .lb__nav[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .pt-car img, .pt-car__count { transition: none; } } /* ---------- Owner FAQ ---------- Reuses the .faq accordion from site.css (native details/summary, so it opens without JS and is keyboard-operable for free). Only the surround is new. */ .pt-faq { padding: clamp(4.5rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--line); } .pt-faq__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .pt-faq__aside { position: sticky; top: calc(var(--nav-h) + 2rem); } .pt-faq__title { margin: 1.25rem 0 1.25rem; color: var(--white); max-width: 12ch; } .pt-faq__note { margin: 0 0 1.75rem; color: var(--text-2); line-height: 1.75; max-width: 34ch; } /* site.css caps .faq at 820px for the standalone page; here it fills its column and the questions sit a little smaller beside the section heading. */ .pt-faq__list { max-width: none; } .pt-faq__list summary { font-size: clamp(1.1rem, 1.6vw, 1.3rem); padding: 1.35rem 0; gap: 1.25rem; } .pt-faq__list summary .icon { width: 18px; height: 18px; color: var(--accent); } .pt-faq__list details { border-top-color: var(--ab-edge); } .pt-faq__list details:last-child { border-bottom-color: var(--ab-edge); } .pt-faq__list .faq__body { padding-bottom: 1.5rem; line-height: 1.75; } /* ---------- Enquiry ---------- */ .pt-form-sec { padding: clamp(4rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); background: var(--bg-2); } .pt-form-sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; } .pt-form-sec__aside { position: sticky; top: calc(var(--nav-h) + 2rem); } .pt-form-sec__title { margin: 1.25rem 0 1.25rem; color: var(--white); max-width: 14ch; } .pt-form-sec__text { color: var(--text-2); line-height: 1.8; margin: 0; max-width: 40ch; } .pt-form { border-top: 2px solid var(--accent); } @media (max-width: 1023px) { /* Stacked: photo first, card below it, no overlap. */ .pt-offer__stage { grid-template-columns: 1fr; } .pt-offer__media { grid-area: auto; } .pt-offer__card { grid-area: auto; margin-top: -3rem; margin-left: clamp(1rem, 4vw, 3rem); } .pt-offer__title { max-width: 20ch; } .pt-duties { grid-template-columns: 1fr; } /* One column: only the true last row closes the list off. */ .pt-duties li:nth-last-child(-n+2) { border-bottom: 0; } .pt-duties li:last-child { border-bottom: 1px solid var(--ab-edge); } .pt-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .pt-fleet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-faq__grid { grid-template-columns: 1fr; } .pt-faq__aside { position: static; } .pt-faq__title { max-width: 20ch; } .pt-form-sec__grid { grid-template-columns: 1fr; } .pt-form-sec__aside { position: static; } } @media (max-width: 640px) { .pt-steps__grid, .pt-fleet__grid { grid-template-columns: 1fr; } }