itself dragged its full-bleed background down with it: mid-reveal a band sat up to 18px below the one above it and the page's white paper showed through as a stray full-width strip (measured 14.8px between the client wall and the sand band below it on the home page; the same gap opens white-on-ink above the CTA band), and the last band on every page overlapped the footer by the same 18px. With the section anchored, backgrounds, borders and the `rx-px` parallax frames all stay put and the bands stay flush at every scroll position — the rise is unchanged. The exclusions are the bands' own backdrop layers, which must NOT move independently of the box that clips them: `img`/`video` (the filled `` media and the hero loop) and the `.absolute` scrim/gradient overlays. Matching `img`/`video` by TAG is what makes that robust — the media used to be positioned by `next/image fill`'s inline styles with no class to match on, and is now positioned by `absolute inset-0 h-full w-full` utilities, so the `.absolute` clause would catch it too; the tag selectors mean this rule never depended on which of the two it was. `script` (JSON-LD) has no box to move. Everything else in a band is in-flow content. */ .rentx-com main > section:nth-child(n + 2) > :not(img, video, script, .absolute) { animation: rx-in 1s linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; } /* …except inside the full-bleed media bands, which clip with `overflow: hidden` and are therefore SCROLL CONTAINERS themselves: an anonymous `view()` on their content would measure it against the band it already sits in, where it never enters or leaves, and freeze at 0% — leaving that content parked 18px low forever. (Same trap the parallax block below documents.) Those bands already publish a named timeline of themselves for their media; the content rides that one. */ .rentx-com main > section.rx-px:nth-child(n + 2) > :not(img, video, script, .absolute) { animation-timeline: --rx-px; } /* Stagger for card grids/rows: each child picks up a slightly later slice of its own view() range, so a row of cards arrives in sequence rather than as one block. */ .rentx-com .rx-stagger > * { animation: rx-in 1s linear both; animation-timeline: view(); } .rentx-com .rx-stagger > :nth-child(1) { animation-range: entry 0% entry 55%; } .rentx-com .rx-stagger > :nth-child(2) { animation-range: entry 6% entry 62%; } .rentx-com .rx-stagger > :nth-child(3) { animation-range: entry 12% entry 68%; } .rentx-com .rx-stagger > :nth-child(n + 4) { animation-range: entry 18% entry 74%; } } } @keyframes rx-in { from { transform: translateY(18px); } to { transform: none; } } /* ── Media parallax (scroll-driven, so again NO JS observer and no main-thread work) ── The section reveal above moves a band as a whole; this gives the band DEPTH while it scrolls. An `.rx-px` frame (a clipped, aspect-locked box) declares a view timeline, and its `.rx-px-media` photo drifts vertically against it, so the image travels slower than the page it sits on. · A NAMED timeline, not a bare `view()`. Every frame here clips with `overflow: hidden` — which makes it a SCROLL CONTAINER — so an anonymous `view()` resolved on the media would measure the media against its own frame, where it never enters or leaves, and sit frozen at 0% forever. Declared on the FRAME, the timeline measures the frame against the page scrollport, which is the motion wanted. · TRANSFORM-CLASS ONLY, never opacity — same reason as `rx-in`: an animated opacity is what Lighthouse/axe compute contrast against, and nothing may be invisible in a still screenshot. · Overscan, so the drift can never expose an edge: the media is sized to 118% of the frame and travels ±6% of its OWN height — 7.08% of the frame, inside the 9% margin. MEASURED: without the overscan the drift pulled a blank strip of up to 33px into frame on every band; at 116% the worst-case margin measured a thin 3.8px, so it is 118% to keep sub-pixel rounding off the edge. · The overscan keeps `!important`; the drift does NOT. The competing `inset: 0` / `height: 100%` now arrive as the Tailwind utilities `inset-0 h-full` on the `` itself (they used to be `next/image fill`'s INLINE styles, which no stylesheet rule can outrank without `!important` — that is what these two declarations were originally written to beat). The `!important` is kept deliberately rather than re-tuned to the new specificity: it makes the two static declarations win outright no matter how the utilities are layered, which is the property this needs. `translate` still lands unaided because a CSS animation outranks both. Keeping height/inset OUT of the keyframe is deliberate: a constant box means the animation stays purely compositor-driven, with no per-frame layout. (`bottom` is left at 0 — with top + height + bottom all set the box is over-constrained and `bottom` is the one dropped, which is exactly the resolution wanted here.) · Gated on `@supports` + reduced-motion. Without either, the media keeps the plain `inset: 0` box from its utilities and simply doesn't move — the full photo, correctly framed, never a broken one. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .rentx-com .rx-px { view-timeline-name: --rx-px; view-timeline-axis: block; } .rentx-com .rx-px-media { top: -9% !important; height: 118% !important; animation: rx-px linear both; animation-timeline: --rx-px; animation-range: cover 0% cover 100%; } } } @keyframes rx-px { /* The `translate` property, NOT `transform`: several framed photos also carry a Tailwind `scale-*` hover, and v4 compiles that to the separate `scale` property. Driving the drift through `translate` lets the two compose — animate `transform` here instead and the running animation would win over the hover, killing the zoom. */ from { translate: 0 -6%; } to { translate: 0 6%; } } /* Fixed overlay header (rentx.com pattern): transparent over the dark hero at the top of the page, solidifying to the ink bar as you scroll — the logo/controls are white in BOTH states, so no swap. FALLBACK (no scroll-driven-animation support, e.g. Safari): a solid ink bar always — still legible over every section, just without the transparent-at-top flourish. Zero JS. The solid state is the site's DARK colour, in all three places below (base, keyframe, reduced-motion override) — they must stay in step or the bar changes colour when it settles. It was a fixed #0b0b0e, which was the one dark surface in the theme that did NOT recolour: on a site whose Dark colour is not near-black the header sat as a stray black slab above its own hero. The `var()` resolves on the bar itself, inside the theme scope, so it works in the keyframe exactly as it does in the base rule. */ .rentx-com .rx-header { background-color: var(--dark); } @supports (animation-timeline: scroll()) { .rentx-com .rx-header { background-color: transparent; animation: rx-header-solidify linear both; animation-timeline: scroll(root); animation-range: 20px 140px; } @keyframes rx-header-solidify { to { background-color: var(--dark); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } } } @media (prefers-reduced-motion: reduce) { .rentx-com .rx-header { animation: none !important; background-color: var(--dark) !important; } } /* Anchor targets sit under the fixed header — offset their scroll landing so headings aren't hidden. */ .rentx-com [id] { scroll-margin-top: 90px; } /* ── Drawer open → lock the page behind it (zero JS) ── The nav drawer is `position: fixed` and full-height, but that alone doesn't stop the DOCUMENT from scrolling underneath it: measured on a 390×844 phone, the page behind travelled 600px with the menu open, so a flick on the scrim (or past the end of the drawer's own scroll) left the visitor somewhere else entirely the moment they closed it. Keyed off the drawer's own checkbox, so it costs nothing while the menu is shut. `:root`, not `body`: the scroll port here is the document element (the header's solidify animation rides `scroll(root)`), and `:has()` keeps this root-level property theme-scoped — the rule only matches a document that actually renders this theme. The scope class is on , so the checkbox is a descendant of `.rentx-com`, not of `:root` — hence the descendant combinator. `scrollbar-gutter: stable` is the other half, for desktop: without it, hiding the overflow removes the classic scrollbar and the whole page (plus the fixed bar) jumps ~15px right as the drawer opens. Reserving the gutter on every page of the theme keeps that width constant in both states; it's a no-op with the overlay scrollbars phones use. */ :root:has(.rentx-com) { scrollbar-gutter: stable; } :root:has(.rentx-com #rx-nav:checked) { overflow: hidden; } /* Horizontal card sliders (Vehicles/Services) — scrollbar hidden for the clean reference look; the arrow buttons + autoplay are the affordance (native touch/trackpad/keyboard scroll still works). */ .rentx-com .rx-hscroll { scrollbar-width: none; /* Firefox */ } .rentx-com .rx-hscroll::-webkit-scrollbar { display: none; /* WebKit/Chromium */ } /* Continuous, pure-CSS marquee drift — the coverage rail and the "Trusted by …" client-logo strip (BrandWall.tsx). Both render their list twice and translate -50% for a seamless loop; decorative, halts under prefers-reduced-motion via the block above. */ @keyframes rx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Accordion open/close (Faq.tsx, CoverageAccordion.tsx) — a native

can't transition its own box, so the panel is eased through `::details-content`: `interpolate-size: allow-keywords` makes the `0 → auto` block-size interpolable, and `transition-behavior: allow-discrete` lets the discrete `content-visibility` flip ride along — so the panel glides BOTH open AND closed, with the body fading in behind it. Zero JS, no measured heights. Browsers without `::details-content` fall back to the reveal keyframe: the opened panel still fades + slides in, it just snaps shut — a graceful degrade, never a broken panel. Both paths are stilled under prefers-reduced-motion. ⚠️ CORRECTION, 2026-08-13 (measured in real WebKit, Safari 26.5 engine, via Playwright): this note used to name "Safari/Firefox" as the browsers taking that fallback. SAFARI NO LONGER DOES — it ships `::details-content`, so it takes the branch below, not the `@supports not` one. What Safari does NOT ship is `interpolate-size: allow-keywords`, so `block-size: 0 → auto` is not interpolable there and the panel SNAPS open instead of gliding. Verified end-to-end on all three disclosures the theme has (the FAQ, the coverage accordion and the drawer's "Near {City}" group): every one opens, reaches full height and reveals its last child in WebKit — the degrade is the easing, never the disclosure. Don't "fix" it by moving these rules out of the `@supports`: that would take the animation away from Chrome too, for a browser that is already functional. */ @supports selector(::details-content) { .rentx-com details.rx-acc { interpolate-size: allow-keywords; } .rentx-com details.rx-acc::details-content { block-size: 0; overflow: clip; opacity: 0; /* `allow-discrete` MUST ride inside the shorthand: as a standalone `transition-behavior` the CSS minifier hoists it above `transition`, which then resets it to `normal` — and without it the closed panel stays `content-visibility: hidden`, so there is no box to ease and it snaps. */ transition: block-size 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), content-visibility 0.34s allow-discrete, opacity 0.26s ease; } .rentx-com details.rx-acc[open]::details-content { block-size: auto; opacity: 1; } /* ARRIVING FROM AN ANCHOR opens the row. The states grid links each tile at its own row (`/coverage#alaska` — see `CoverageStates`), and landing on a COLLAPSED row would answer "do you cover Alaska?" with a closed box: the visitor would have to find and click View to see anything. `:target` opens it on arrival with no JS. `content-visibility` has to be set explicitly here, unlike in the `[open]` rule above. The UA keeps `::details-content` at `content-visibility: hidden` for as long as the element has no `open` attribute — and `:target` does not add one — so without this the panel has a height and an opacity but still renders nothing. */ .rentx-com details.rx-acc:target::details-content { block-size: auto; opacity: 1; content-visibility: visible; } /* The global reduced-motion reset above can't reach a pseudo-element — repeat it here. */ @media (prefers-reduced-motion: reduce) { .rentx-com details.rx-acc::details-content { transition-duration: 0.001ms !important; } } } @supports not selector(::details-content) { .rentx-com details.rx-acc[open] > :not(summary), .rentx-com details[open] > .rx-reveal { animation: rx-reveal 0.28s ease both; } } @keyframes rx-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ── Sanitised CMS-HTML (`page.content`) — utilities can't target editor-written markup, so the theme's type styles are reproduced here as scoped descendants. Applied on the `.rx-prose` container in About. ── */ /* ── CMS-BODY TYPE SCALE (raised 2026-08-12, user direction) ─────────────────────────────────── READ THE FLOORS, NOT THE CAPS. Every size here is a clamp, and the `vw` term only overtakes the floor above ~1200px — so the floor IS the size at every laptop and tablet width. A first pass at this set `h3` to `clamp(1.25rem, 1.7vw, 1.5rem)`: a 24px cap that looked like a real increase and a 20px floor that was 0.8px above the flat 1.2rem it replaced, i.e. no visible change at all on the window it was reported from. Raise the FLOOR when the ask is "make it bigger". The floors are also what keeps the hierarchy from inverting: below ~1200px every level sits at its own floor, so those four numbers must already descend on their own (27.2 → 22.4 → 18.4 → 17.6px). That is why `h3` could not be raised alone — `h2`'s floor was 21.6px and `h3` would have overtaken it on exactly the widths the change was for. ── */ .rentx-com .rx-prose h2 { margin: 1.7rem 0 0.65rem; font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); } /* Scaled up 2026-08-12 (user direction). `h3` was a flat 1.2rem — 19.2px against 16px body copy, a 3px step that did not read as a heading at all. It matters more than the number suggests because the editors' bodies routinely START at h3 (the area pages' "Limo Rental in Adjuntas" and its siblings use h3/h4 only, no h2), so on those pages 19.2px was the LARGEST type in the whole section. Now fluid, like `h2` above, so the step holds at every width. */ .rentx-com .rx-prose h3 { margin: 1.5rem 0 0.55rem; font-size: clamp(1.4rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; color: var(--ink); } /* Body copy lifted off the 16px browser default to 1.06rem, and the leading opened to 1.75 with it — at the measure these CMS bodies run to, 16px/1.7 is the low end of comfortable. Same size the Coverage map's lede was raised to earlier today, so the two agree. */ .rentx-com .rx-prose p { margin: 0 0 1.1rem; font-size: 1.1rem; color: var(--body); line-height: 1.75; } .rentx-com .rx-prose a { color: var(--dark); font-weight: 600; text-underline-offset: 3px; } .rentx-com .rx-prose a:hover { text-decoration: underline; } .rentx-com .rx-prose ul { margin: 0 0 1rem; padding-left: 1.15rem; list-style: disc; } /* `li` tracks `p` — these bodies mix paragraphs and bullets in one run, and a list left at the 16px default reads a size smaller than the prose around it. */ .rentx-com .rx-prose li { margin: 0.3rem 0; font-size: 1.1rem; line-height: 1.7; color: var(--body); } /* ── Tags the LEGAL documents use and no other CMS body in this theme does (added 2026-08-12 with `pages/Legal.tsx`). Without these the global reset strips them: an `

` (the heading level the terms documents use most) came out at body size and weight. ── / .rentx-com .rx-prose ol { margin: 0 0 1rem; padding-left: 1.35rem; list-style: decimal; } .rentx-com .rx-prose :is(ul, ol) :is(ul, ol) { margin: 0.35rem 0 0.5rem; } / Nested bullets take the second marker, as a UA would — a policy's sub-clauses are routinely two deep and identical markers make the levels indistinguishable. / .rentx-com .rx-prose ul ul { list-style: circle; } .rentx-com .rx-prose ol ol { list-style: lower-alpha; } / `h4` sits BELOW `h3` in the same ramp. Note `Legal.tsx` demotes a document's headings by one on the way in (its own `

` would be a second H1 under the banner's), so a document's `

` arrives here as `

` — which is why this level has to be styled at all. / .rentx-com .rx-prose h4 { margin: 1.3rem 0 0.45rem; font-size: clamp(1.15rem, 1.4vw, 1.3rem); font-weight: 600; line-height: 1.35; color: var(--ink); } .rentx-com .rx-prose blockquote { margin: 1.2rem 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--line-strong); color: var(--body); } .rentx-com .rx-prose hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); } / The legal HTML leans on inline emphasis for defined terms and "Last updated" lines; the reset flattens both to normal weight/style. / .rentx-com .rx-prose strong { font-weight: 600; color: var(--ink); } .rentx-com .rx-prose em { font-style: italic; } / Editor-written TABLES. There were no rules for these at all, so a `` in `page.content` fell back to the UA default on top of the global reset: no padding, no rules, headers centred and the columns collapsed onto each other — the comparison tables editors write for category/area bodies ("Vehicle | Typical capacity | Best for") were unreadable. Same reasoning as every rule above: a utility class can't reach markup the editor wrote, so the theme's table style lives here. ONE style for all of them, on `.rx-prose` rather than per page, so the category page, the area pages and every other CMS body (Services, Vehicles, Coverage, About) render a table identically. / / The scroll box `wrapTables()` puts around every editor-written table (see that function for the measured bug: a ~450px min-content table in a CMS body scrolled the WHOLE page sideways by 110px at 360px wide). `clip` is not usable here — the point is that the table must stay reachable — so this is the one place in the theme that opts into a real horizontal scroller. `overscroll-behavior-x: contain` stops a swipe that reaches the end of the table from chaining into the page/browser back-gesture. NOT IN SAFARI — measured in WebKit 2336 (Safari 26.5): it supports neither the shorthand nor the axis longhands, so on iOS/macOS Safari a swipe past the end of the table still chains to the page. Kept anyway: it is a progressive enhancement that costs nothing where it is unsupported, and the table itself scrolls correctly in both engines. The header drawer's `overscroll-contain` has exactly the same caveat. The focus ring is the theme's own, because `tabindex="0"` makes this box a tab stop and an invisible one would be worse than no tab stop at all. / .rentx-com .rx-table-scroll { max-width: 100%; / The table's own `margin: 1.6rem 0` moves out here, so the gap above and below is unchanged from before the wrapper existed — a margin left on the table would sit INSIDE the scroll box and both double the spacing and become scrollable dead space. / margin: 1.6rem 0; overflow-x: auto; overscroll-behavior-x: contain; } .rentx-com .rx-table-scroll:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; } / The wrapper is now what separates the table from the copy around it; leaving the margin on the table as well would double the gap. / .rentx-com .rx-table-scroll > table { margin: 0; } .rentx-com .rx-prose table { width: 100%; margin: 1.6rem 0; border: 1px solid var(--line); border-collapse: collapse; font-size: 0.95rem; line-height: 1.6; } / `caption` is what an editor's "Common airport transfer options…" line becomes. The UA centres it; left-aligning it makes it read as the table's label rather than a stray centred sentence. / .rentx-com .rx-prose caption { margin-bottom: 0.5rem; color: var(--ink); font-weight: 600; text-align: left; } .rentx-com .rx-prose :is(th, td) { padding: 0.68rem 0.9rem; border-bottom: 1px solid var(--line); / Cells hold sentences of different lengths, so top-align them — centred cells leave a one-word column floating against a three-line one. / vertical-align: top; text-align: left; } .rentx-com .rx-prose th { background: var(--sand); color: var(--ink); font-weight: 600; } .rentx-com .rx-prose td { color: var(--body); } / Zebra striping on the BODY only, and from `--sand` at a fraction of its strength, so the banding reads on white without competing with the header row's full `--sand`. / .rentx-com .rx-prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sand) 55%, white); } / NARROW SCREENS: the table stays a TABLE and reflows. It buys back the width it needs from padding and type size rather than from the columns, which is the whole trick — at 390px the default 0.9rem side padding was costing ~14% of the row. DELIBERATELY NOT the usual `display: block; overflow-x: auto` swipe-strip, though it was built and measured first (it does scroll, and the page never overflows). `display: block` on a `
` drops the table role from the accessibility tree in every engine — the rows and cells stop being rows and cells, and a screen-reader user loses the column headers that are the only thing making a comparison table readable. The fix for that is `role="table"`/`role="row"`/`role="cell"` on the markup, and this markup is written by an editor in the CMS: CSS cannot put the roles back. A table that wraps is worse-looking than one that scrolls; a table with no headers is worse, full stop. */ @media (width < 40rem) { .rentx-com .rx-prose table { font-size: 0.875rem; } .rentx-com .rx-prose :is(th, td) { padding: 0.55rem 0.5rem; } }