/* GENERATED - DO NOT EDIT BY HAND. * Page-scoped subset of tranche1-v03.css for the 'fleet' template family. * Every byte below is copied verbatim from that file, in its original order; * only top-level blocks whose selectors cannot match any element emitted by * this family's templates are omitted, so the cascade is unchanged. * source bytes 48910 md5 00d66fdbec3916684bae57e77e888f1b blocks kept 211/247 subset bytes 41360 * Regenerate whenever tranche1-v03.css changes. inc/frontend-composed-slice32.php * falls back to the full sheet if the source no longer measures 48910 bytes. */ /* ===================================================================== * iDrive frontend tranche 1 — consolidated append. * * APPEND-ONLY. This block is added to the END of the existing app.css. * It never restates an existing token or component; the live :root and the * 441 lines above remain the single owner of everything already declared. * * Consolidates four competing stylesheets produced in parallel * (app-append.css, a second app.css, city-append.css, route-pages.css) * into one file, because the theme registers exactly ONE style handle and * any extra file would never be enqueued. * ===================================================================== */ /* ============================================================================= * iDrive Platform - consolidated interior append block. * * Appended to the END of assets/css/app.css (441 lines). It REPLACES four * competing stylesheets that could never all load, because functions.php * registers exactly one style handle for assets/css/app.css: * * assets/css/app.css (Explore + self-drive family append) * assets/css/app.css (a second, conflicting append of the same path) * assets/css/city-append.css * assets/css/route-pages.css * * All four source files are deleted. Nothing below redeclares a token, a font, * a breakpoint or a component that already exists above line 441; every rule is * either a class with no declaration anywhere, or a single-property contrast * correction to a live rule (each one flagged CONTRAST FIX). * * Breakpoints reused, never invented: 1050 / 760 / 430 / 350. * Colours are --idrive-* tokens, plus --idrive-warning and --idrive-error, * which are the only two tokens this block is permitted to add. * * ----------------------------------------------------------------------------- * TEMPLATE EDITS THIS BLOCK REQUIRES (class renames only, no logic changes): * * .route-hero -> .content-hero template-route.php:33, * template-airport.php:34, * template-route-index.php:57 * (and on the
inside each * header, add content-hero__inner) * .route-hero__lead -> .content-hero__lead same three files * .route-breadcrumb -> .breadcrumb inc/route-pages.php:438 * .fleet-actions -> .action-row page-cars.php x2, * page-vehicle-class.php x3 * .city-state-actions -> .action-row template-city.php x4, * template-city-index.php x1 * .route-state-card__actions-> .action-row inc/route-pages.php x2, * template-route.php x1, * template-airport.php x1 * .city-onward -> .action-row template-city.php x1 * .fleet-faq -> .faq-list page-vehicle-class.php:196 * .city-faq -> .faq-list template-city.php x1 * .route-faq -> .faq-list inc/route-pages.php x1 * .city-boundary -> .results-boundary--standalone * template-city.php:179, * template-city-index.php:68 * .route-state-card__note -> .search-state-card__note * inc/route-pages.php:488 * .route-state-card -> (drop; it only ever rode along with * .search-state-card) inc/route-pages.php:475 * 'pagination explore-pagination' -> 'pagination' template-parts/explore-stream.php:36 * 'dark' accepted alongside 'inline' in the $args['variant'] whitelist * template-parts/cta-booking.php:21 * * Two selectors are dropped outright with no replacement because no markup in * the theme ever emitted them: .city-breadcrumb and .route-prose. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. Tokens. The only two this block may add. Both were already referenced by * the live file through inline fallbacks that no :root ever satisfied: * .search-state-card--warning .search-state-card__icon -> var(--idrive-warning, #b56800) * [aria-invalid="true"] -> var(--idrive-error, #b42318) * --idrive-error keeps the fallback value exactly (6.57:1 on white). * --idrive-warning is DARKER than its fallback on purpose: #b56800 carries * white text on the state-card icon tile at only 4.25:1, which fails AA. * #8f5000 measures 6.34:1 against white and 5.81:1 against --idrive-mist. * -------------------------------------------------------------------------- */ :root { --idrive-warning: #8f5000; --idrive-error: #b42318; } .service-card__number { color: var(--idrive-green-deep); } .service-card--dark .service-card__number { color: var(--idrive-lime); } /* green-deep is only 3.06:1 on --idrive-ink; lime is 11.45:1, and matches .service-card--dark strong */ .search-state-card__icon { background: var(--idrive-green-deep); } /* The state card helper whitelists variant 'error' but nothing ever painted it, so an error state was indistinguishable from a neutral one. */ .search-state-card--error .search-state-card__icon { background: var(--idrive-error); } .search-state-card h3 { margin: 0 0 .35rem; color: var(--idrive-ink); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; } .search-state-card__note { margin: 0; color: var(--idrive-muted); font-size: .76rem; font-weight: 700; } /* ----------------------------------------------------------------------------- * 3. Shared interior scaffold, declared ONCE. * page.php, template-city.php, template-parts/explore-hero.php and * page-vehicle-class.php have all been emitting these classes with zero * declarations anywhere in the theme. That is the pre-existing bug this * section closes, not only the merge of three competing copies. * -------------------------------------------------------------------------- */ .content-main { display: block; } .content-hero { padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(180deg, var(--idrive-mist), var(--idrive-white)); border-bottom: 1px solid var(--idrive-line); } .content-hero__inner { display: grid; gap: .9rem; justify-items: start; } .content-hero .breadcrumb { margin-bottom: .1rem; } .content-hero h1 { max-width: 20ch; margin: 0; color: var(--idrive-ink); font-size: clamp(2.05rem, 4.8vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; } .content-hero__lead { max-width: 62ch; margin: 0; color: var(--idrive-muted); font-size: clamp(1rem, 1.4vw, 1.12rem); } .content-hero__search { width: min(100%, 42rem); margin-top: .35rem; } .content-hero .results-itinerary { margin-top: .75rem; } .prose-layout, .explore-layout, .selfdrive-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .33fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .prose-layout, .explore-layout { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .prose { min-width: 0; color: var(--idrive-text); } .prose > * { max-width: 68ch; } .prose > :first-child { margin-top: 0; } .prose > table, .prose > figure, .prose > .table-scroll, .prose > .result-card__facts, .prose > .results-list { max-width: 100%; } .prose h2 { margin: 2.3rem 0 .8rem; color: var(--idrive-ink); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.03em; } .prose h3 { margin: 1.85rem 0 .5rem; color: var(--idrive-ink); font-size: clamp(1.18rem, 2vw, 1.45rem); letter-spacing: -.02em; } .prose h4 { margin: 1.5rem 0 .45rem; color: var(--idrive-ink); font-size: 1.02rem; } .prose p, .prose ol { margin: 0 0 1.1rem; } .prose ol { padding-left: 1.35rem; } .prose ul { margin: 0 0 1.1rem; padding-left: 0; list-style: none; } .prose ul > li { position: relative; padding-left: 1.35rem; } .prose ul > li::before { content: ""; position: absolute; top: .62em; left: 0; width: .45rem; height: .45rem; border-radius: 50%; background: var(--idrive-lime); } .prose li { margin: .4rem 0; } .prose a:not(.button) { color: var(--idrive-green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; } .prose a:not(.button):hover { color: var(--idrive-ink); } .prose blockquote { margin: 1.5rem 0; padding: .9rem 1.15rem; color: var(--idrive-ink); border-left: 3px solid var(--idrive-lime); border-radius: 0 .75rem .75rem 0; background: var(--idrive-mist); } .prose blockquote p:last-child { margin-bottom: 0; } .prose code { padding: .1rem .35rem; border-radius: .35rem; background: var(--idrive-mist); font-size: .9em; } .prose figure { margin: 1.5rem 0; } .prose figcaption { margin-top: .5rem; color: var(--idrive-muted); font-size: .82rem; } .prose img { height: auto; border-radius: var(--idrive-radius); } .prose .table-scroll { overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; font-size: .92rem; } .prose th, .prose td { padding: .6rem .7rem; border: 1px solid var(--idrive-line); text-align: left; } .prose th { color: var(--idrive-ink); background: var(--idrive-mist); font-weight: 750; } .prose .travel-panel { max-width: 100%; padding: 1.1rem 1.25rem; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); } .prose .travel-panel > :first-child { margin-top: 0; } /* Booking card. One base plus two modifiers, replacing the light card from one family and the dark card from the other. */ .page-booking-card { position: sticky; top: 6rem; display: grid; gap: .55rem; padding: clamp(1.15rem, 2.5vw, 1.6rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 16px 45px rgba(6, 26, 18, .06); } .page-booking-card h2 { margin: 0; color: var(--idrive-ink); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; } .page-booking-card p { margin: 0; color: var(--idrive-muted); font-size: .92rem; } .page-booking-card .eyebrow { margin: 0; font-size: .66rem; } .page-booking-card__actions { display: grid; gap: .55rem; margin-top: .35rem; } .page-booking-card__actions .button { width: 100%; } .page-booking-card p.page-booking-card__note { font-size: .76rem; } .page-booking-card__status { margin-top: .35rem !important; padding-top: .6rem; border-top: 1px solid var(--idrive-line); font-size: .78rem; font-weight: 700; } .page-booking-card--inline { position: static; margin: 2rem 0; background: var(--idrive-mist); } .page-booking-card--dark { color: var(--idrive-white); border-color: transparent; background: linear-gradient(150deg, #0a1c15, #102b20); box-shadow: var(--idrive-shadow); } .page-booking-card--dark h2 { color: var(--idrive-white); } .page-booking-card--dark p { color: #b7c8bf; } .page-booking-card--dark .eyebrow { color: var(--idrive-lime); } .page-booking-card--dark .page-booking-card__status { border-top-color: rgba(255, 255, 255, .14); } .page-booking-card--dark .button--ghost { color: var(--idrive-white); border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .08); } /* ----------------------------------------------------------------------------- * 4. ONE breadcrumb. .city-breadcrumb and .route-breadcrumb are deleted; the * tinted, full-bleed treatment the city family wanted is now the --banded * modifier that inc/shared.php and inc/city-pages.php already emit. * Every crumb link is a 2.75rem (44px) target. * -------------------------------------------------------------------------- */ .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; margin: 0; padding: 0; list-style: none; color: var(--idrive-muted); font-size: .78rem; font-weight: 700; } .breadcrumb li { display: flex; align-items: center; gap: .5rem; } .breadcrumb li + li::before { content: "/"; } .breadcrumb a, .breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-height: 2.75rem; } .breadcrumb a { color: var(--idrive-green-deep); } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--idrive-ink); } .breadcrumb--banded { padding: .35rem 0 0; background: var(--idrive-mist); border-bottom: 1px solid var(--idrive-line); } /* ----------------------------------------------------------------------------- * 5. ONE action row and ONE FAQ list. * .action-row replaces .fleet-actions, .city-state-actions, * .route-state-card__actions and .city-onward. * .faq-list replaces .fleet-faq, .city-faq and .route-faq. * -------------------------------------------------------------------------- */ .action-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; } .action-row:last-child { margin-bottom: 0; } .search-state-card .action-row { margin: 0 0 .5rem; } .prose .action-row { max-width: 100%; } .faq-list { display: grid; gap: .6rem; margin: 0 0 1.5rem; } .faq-list .result-card__details { margin-top: 0; border-color: var(--idrive-line); background: var(--idrive-white); } .faq-list .result-card__details summary { padding: .8rem 1.05rem; } .faq-list .result-card__details summary strong { font-size: .96rem; } .faq-list .result-card__detail-panel { padding: 0 1.05rem 1.05rem; border-top: 0; background: var(--idrive-white); } .faq-list .result-card__detail-panel p { margin: 0 0 .75rem; color: var(--idrive-text); font-size: .9rem; } .faq-list .result-card__detail-panel p:last-child { margin-bottom: 0; } /* ----------------------------------------------------------------------------- * 6. Results components used OFF the dark .results-overview surface. * These modifiers sit next to their base component instead of in a separate * file, which is what let two families define them differently. * .results-boundary and .results-itinerary are both built for a dark ground, * so standing them alone means carrying that ground with them: the same * linear-gradient(150deg, #0a1c15, #102b20) the live .results-assumptions * already uses. #d9e5df on it is 14.8:1; --idrive-lime on it is 11.45:1. * -------------------------------------------------------------------------- */ .results-overview--flat { padding: clamp(1rem, 2.5vw, 1.5rem); color: var(--idrive-text); border-color: var(--idrive-line); background: var(--idrive-white); box-shadow: 0 16px 45px rgba(6, 26, 18, .06); } .results-overview--flat::before { display: none; } .results-boundary--standalone, .results-overview--flat .results-boundary { margin-inline: 0; border-color: rgba(255, 255, 255, .12); background: linear-gradient(150deg, #0a1c15, #102b20); } .results-itinerary--standalone { max-width: none; justify-items: start; text-align: left; border-color: rgba(255, 255, 255, .12); background: linear-gradient(150deg, #0a1c15, #102b20); } /* ----------------------------------------------------------------------------- * 7. Explore Pakistan. None of this existed in any of the four files except in * one abandoned append; the stream, cards, rail and pagination are written * here for the first time. * -------------------------------------------------------------------------- */ .explore-stream { min-width: 0; display: grid; gap: 1.25rem; align-content: start; } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; } .post-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .post-card:hover { transform: translateY(-3px); border-color: #b9cec0; box-shadow: var(--idrive-shadow); } .post-card:focus-within { border-color: var(--idrive-green); } .post-card__media { display: block; overflow: hidden; background: var(--idrive-mist); } .post-card__media img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } .post-card__mark { display: grid; place-items: center; aspect-ratio: 16/9; color: var(--idrive-white); background: radial-gradient(circle at 70% 18%, rgba(141, 221, 63, .2), transparent 40%), linear-gradient(145deg, var(--idrive-green-deep), var(--idrive-ink)); font-size: 2.4rem; font-weight: 900; letter-spacing: .04em; } .post-card__body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1.1rem; } .post-card__meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0; color: var(--idrive-muted); font-size: .7rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } .post-card__chip { padding: .2rem .45rem; color: var(--idrive-green-deep); background: #e7f6ec; border-radius: 999px; } .post-card h2, .post-card h3 { margin: 0; color: var(--idrive-ink); font-size: 1.15rem; line-height: 1.25; letter-spacing: -.015em; } .post-card h2 a:hover, .post-card h3 a:hover { color: var(--idrive-green-deep); } .post-card__excerpt { margin: 0; color: var(--idrive-muted); font-size: .9rem; } .post-card .text-link { margin-top: auto; padding-top: .5rem; text-align: left; } /* Crawlable topic rail: real links, never a script-only filter. */ .topic-rail { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } .topic-rail .button { font-size: .85rem; } .topic-rail .button[aria-current="page"] { color: var(--idrive-white); background: var(--idrive-green-deep); border-color: var(--idrive-green-deep); } .explore-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; align-items: end; } .explore-search__field { min-width: 0; display: grid; gap: .25rem; padding: .55rem .85rem; border: 1px solid var(--idrive-line); border-radius: .9rem; background: var(--idrive-white); box-shadow: 0 8px 24px rgba(6, 26, 18, .06); cursor: text; } .explore-search__field:focus-within { border-color: var(--idrive-green); box-shadow: 0 0 0 3px rgba(141, 221, 63, .2); } .explore-search__label { color: var(--idrive-muted); font-size: .64rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .explore-search__submit { min-height: 3.4rem; } .explore-sidebar { position: sticky; top: 6rem; display: grid; gap: 1rem; max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; } .explore-sidebar__block { display: grid; gap: .6rem; padding: 1.1rem; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .05); } .explore-sidebar__block h2 { margin: 0; color: var(--idrive-ink); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; } .explore-sidebar__list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; } .explore-sidebar__list a { display: block; min-height: 2.75rem; padding: .7rem .5rem; border-radius: .6rem; color: var(--idrive-text); font-size: .92rem; font-weight: 700; } .explore-sidebar__list a:hover { color: var(--idrive-green-deep); background: var(--idrive-mist); } .explore-sidebar__list a[aria-current="page"] { color: var(--idrive-green-deep); background: #e7f6ec; } .explore-sidebar__list span { display: block; color: var(--idrive-muted); font-size: .74rem; font-weight: 600; } .explore-sidebar .explore-search { grid-template-columns: 1fr; } .explore-sidebar .page-booking-card { position: static; } .explore-provenance { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .35rem 0 0; padding: .7rem .9rem; color: var(--idrive-muted); border: 1px solid var(--idrive-line); border-radius: .85rem; background: var(--idrive-white); font-size: .78rem; } .explore-provenance strong { color: var(--idrive-ink); } .explore-figure { margin: 0 0 1.5rem; } .explore-figure img { width: 100%; height: auto; border-radius: var(--idrive-radius); } /* WordPress core pagination markup: nav.pagination > .nav-links > .page-numbers. */ .pagination { margin-top: .75rem; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .pagination .page-numbers { display: inline-flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: .5rem .75rem; color: var(--idrive-text); border: 1px solid var(--idrive-line); border-radius: .75rem; background: var(--idrive-white); font-weight: 750; } .pagination a.page-numbers:hover { color: var(--idrive-green-deep); border-color: var(--idrive-green); } .pagination .page-numbers.current { color: var(--idrive-white); background: var(--idrive-green-deep); border-color: var(--idrive-green-deep); } .pagination .page-numbers.dots { border-color: transparent; background: transparent; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- * 8. Self-drive hub. * -------------------------------------------------------------------------- */ .section--tight { padding: clamp(2.25rem, 5vw, 3.5rem) 0; } .selfdrive-panel { min-width: 0; display: grid; gap: 1.25rem; align-content: start; } .selfdrive-panel .section-heading { margin-bottom: 0; } .selfdrive-panel .prose { margin-top: .25rem; } .selfdrive-split .results-assumptions { margin-top: 0; } .city-selfdrive__classes { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; } .city-selfdrive__classes li { padding: .35rem .7rem; color: var(--idrive-green-deep); background: #e7f6ec; border-radius: 999px; font-size: .74rem; font-weight: 780; } .city-selfdrive__note { color: var(--idrive-muted); font-size: .82rem; } /* ----------------------------------------------------------------------------- * 10. Route corridor, airport and directory family. * .route-hero, .route-hero__lead, .route-breadcrumb, .route-faq, * .route-state-card, .route-state-card__actions, .route-state-card__note * and .route-prose are all gone; what remains is genuinely route-specific. * -------------------------------------------------------------------------- */ .route-note { margin: 1rem 0 0; color: var(--idrive-muted); font-size: .82rem; } .route-note a { color: var(--idrive-green-deep); font-weight: 800; text-decoration: underline; } .route-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin: 0; } .route-facts > div { display: grid; gap: .3rem; align-content: start; padding: 1.1rem; border: 1px solid var(--idrive-line); border-radius: 1rem; background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); } .route-facts dt { color: var(--idrive-green-deep); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .route-facts dd { margin: 0; color: var(--idrive-ink); font-size: 1.02rem; font-weight: 750; } .route-facts dd small { display: block; margin-top: .35rem; color: var(--idrive-muted); font-size: .76rem; font-weight: 500; line-height: 1.45; } .route-facts a { color: var(--idrive-green-deep); font-weight: 800; text-decoration: underline; } .route-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; } .route-links a { display: grid; gap: .18rem; align-content: center; min-height: 4.75rem; padding: .95rem 1rem; border: 1px solid var(--idrive-line); border-radius: 1rem; background: var(--idrive-white); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .route-links a:hover { transform: translateY(-2px); border-color: #b9cec0; box-shadow: 0 14px 34px rgba(6, 26, 18, .08); } .route-links b { color: var(--idrive-green-deep); font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .route-links strong { color: var(--idrive-ink); font-size: .98rem; } .route-links span { color: var(--idrive-muted); font-size: .76rem; } .route-composer { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); } .route-preview .results-list { margin-top: 0; } .route-index__group + .route-index__group { margin-top: clamp(2rem, 4vw, 3rem); } .route-index__group h3 { margin: 0 0 .3rem; color: var(--idrive-ink); font-size: clamp(1.35rem, 2.6vw, 1.95rem); letter-spacing: -.03em; } .route-index__group > p { margin: 0 0 1.1rem; color: var(--idrive-muted); } /* ----------------------------------------------------------------------------- * 11. Fleet family. .fleet-block and .fleet-state are naming hooks the markup * carries alongside a fully styled base component, so they are left * undeclared rather than given a second, competing look. * -------------------------------------------------------------------------- */ .fleet-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .fleet-boundary-section { padding-bottom: 0; } .vehicle-card--fleet { display: flex; flex-direction: column; } .vehicle-card__media { display: block; width: 100%; aspect-ratio: 16/9; margin: 1rem 0; overflow: hidden; border-radius: .75rem; } .vehicle-card__media img { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: contain; } /* neutralises the live .vehicle-card img margin and ratio, which would otherwise double up inside this wrapper */ .vehicle-card__media--token { display: grid; place-items: center; color: var(--idrive-white); background: radial-gradient(circle at 70% 18%, rgba(141, 221, 63, .2), transparent 40%), linear-gradient(145deg, var(--idrive-green-deep), var(--idrive-ink)); } .vehicle-card__media--token span { font-size: 1.5rem; font-weight: 900; letter-spacing: .08em; } /* ----------------------------------------------------------------------------- * 12. Responsive. Existing breakpoints only: 1050 / 760 / 430 / 350. * -------------------------------------------------------------------------- */ @media (max-width: 1050px) { .prose-layout, .explore-layout, .selfdrive-split { grid-template-columns: minmax(0, 1fr) minmax(15rem, .4fr); } .destination-grid--compact { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); } } @media (max-width: 760px) { .prose-layout, .explore-layout, .selfdrive-split { grid-template-columns: 1fr; } .content-hero { padding-top: 1.75rem; } .content-hero h1 { max-width: none; } .explore-sidebar { position: static; max-height: none; overflow: visible; } .page-booking-card { position: static; } .city-composer .section-heading--compact .button { justify-self: start; } .city-facts { grid-template-columns: 1fr 1fr; } .destination-grid--compact { grid-template-columns: 1fr; } .destination-grid--compact a { min-height: 7.5rem; } .route-facts, .route-links { grid-template-columns: 1fr; } /* .results-boundary already stacks at this breakpoint in the live file, and both standalone modifiers inherit that, so nothing is restated here. */ } @media (max-width: 430px) { .post-grid { grid-template-columns: 1fr; } .explore-search { grid-template-columns: 1fr; } .explore-search__submit { width: 100%; } .explore-provenance { display: grid; gap: .3rem; } .breadcrumb ol { font-size: .74rem; } .action-row .button { width: 100%; } .city-facts { grid-template-columns: 1fr; } .city-selfdrive__band .button { width: 100%; } .destination-grid--compact a { padding: 2.9rem 1rem 1rem; } .fleet-switch .button { width: 100%; } } @media (max-width: 350px) { .content-hero h1 { font-size: 1.85rem; } .city-facts i { font-size: .95rem; } } /* The live reduced-motion block sits above this append and clamps transition duration globally, but not the hover transforms introduced here. */ @media (prefers-reduced-motion: reduce) { .post-card { transition: none; } .post-card:hover, .route-links a:hover { transform: none; } } /* --- rules recovered from the second parallel stylesheet --- */ .screen-reader-text:focus { z-index: 100000; top: .5rem; left: .5rem; width: auto; height: auto; padding: .75rem 1rem; clip: auto; color: var(--idrive-ink); background: var(--idrive-white); border-radius: .6rem; box-shadow: var(--idrive-shadow); } .prose figure.wp-block-table, .prose .table-scroll { max-width: 100%; overflow-x: auto; } .page-booking-card h2, .page-booking-card h3 { margin: 0; color: var(--idrive-ink); font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; } .page-booking-card--dark h2, .page-booking-card--dark h3 { color: var(--idrive-white); } .page-booking-card--dark strong { color: var(--idrive-white); } .post-card__media picture { display: block; block-size: 100%; } .not-found { padding: clamp(4rem,10vw,8rem) 0; } .not-found h1 { max-width: 18ch; margin: .25rem 0 .75rem; color: var(--idrive-ink); font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.045em; } .not-found p { color: var(--idrive-muted); } .not-found > .container > div:last-child { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; } .explore-search__field input { min-height: 2.25rem; } .explore-sidebar__list a time { display: block; color: var(--idrive-muted); font-size: .74rem; font-weight: 600; } .explore-figure figcaption { padding: .6rem .9rem; color: var(--idrive-muted); font-size: .8rem; } .results-boundary--standalone strong { color: var(--idrive-white); font-size: .92rem; } .results-boundary--standalone span { color: #cbdad3; font-size: .84rem; } /* Emitted by page-vehicle-class.php at both numbered fact grids. The base * .result-card__facts is declared live; --flat drops the panel chrome for * use outside .result-card__detail-panel. */ .result-card__facts--flat { padding: 0; border: 0; background: none; box-shadow: none; } .result-card__facts--flat h3 { margin: 0 0 .35rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--idrive-muted); } /* The live rule caps only DIRECT children at 68ch, so an nested in a *
escapes the cap and can overflow at 375px. */ .prose img, .prose figure img { max-width: 100%; height: auto; } .city-routes, .city-airport, .city-fleet, .city-neighbours, .city-selfdrive, .city-index-onward, .services-section, .destinations-section { display: grid; gap: clamp(.85rem, 2.5vw, 1.25rem); } .city-routes > h2, .city-airport > h2, .city-fleet > h2, .city-neighbours > h2, .city-selfdrive > h2, .city-index-onward > h2, .services-section > h2, .destinations-section > h2 { margin: 0; } /* ============================================================================= * FORCED-COLORS (Windows High Contrast) SUPPORT * * SC 1.4.11 Non-text Contrast / SC 1.3.1 Info and Relationships. * Before this block, forced-colors / -ms-high-contrast / forced-color-adjust * appeared in none of the twelve stylesheets. In forced-colors mode the UA * discards author background-color, background-image and box-shadow, so every * state below was carried by a property that is not there any more: * * app.css:130-135 selected booking service - background + box-shadow only, * so both service buttons rendered identically. * app.css:155 active combobox option - a linear-gradient only, so * arrow-key users had no cursor in the location list. * tranche1:293 .explore-sidebar__list a[aria-current="page"] - background. * tranche1:279 .topic-rail .button[aria-current="page"] - background. * tranche1:308 .pagination .page-numbers.current - background. * app-experience-v11.css:363 .appx-tabbar__item[aria-current="page"]. * * Each is re-expressed with the system colour pair Highlight / HighlightText, * which forced-colors mode honours from author stylesheets. background/colour * is used deliberately in preference to outline: the global :focus-visible ring * (app.css) is an outline, and an outline here would have out-specified it and * removed the focus indicator from any element that was both current and * focused. Nothing in this block touches outline. * * Both aria-selected and aria-checked are matched on the service switch so the * rule survives the pending radiogroup correction to the markup that emits it * (idrive-platform-core.php:572-574). * ========================================================================== */ @media (forced-colors: active) { .booking-shell__tabs button[aria-selected="true"], .booking-shell__tabs button[aria-checked="true"] { background-color: Highlight; color: HighlightText; } .booking-shell__tabs button[aria-selected="true"] strong, .booking-shell__tabs button[aria-selected="true"] small, .booking-shell__tabs button[aria-checked="true"] strong, .booking-shell__tabs button[aria-checked="true"] small { color: HighlightText; } .place-suggestion:hover, .place-suggestion[aria-selected="true"] { background-color: Highlight; color: HighlightText; } .place-suggestion:hover strong, .place-suggestion:hover span, .place-suggestion[aria-selected="true"] strong, .place-suggestion[aria-selected="true"] span { color: HighlightText; } .explore-sidebar__list a[aria-current="page"], .topic-rail .button[aria-current="page"], .pagination .page-numbers.current, .appx-tabbar__item[aria-current="page"] { background-color: Highlight; color: HighlightText; } } /* ===== slice-40-conversion-layer ===== */ /* ============================================================================= * SLICE 40 - CONVERSION LAYER * template-parts/cta-booking.php, single.php and page-book.php. * * Appended to tranche1-v03.css, not to slice33-editorial.css, on purpose: * slice33-editorial.css is enqueued only for is_singular('post') || is_home() || * is_category() || is_search() (inc/frontend-composed-slice32.php:63), and two * of these components render outside that set - .page-booking-card__expect * renders wherever template-parts/cta-booking.php is used, and .book-quote-aside * renders on the /book/ page. tranche1-v03.css is enqueued on every request * (inc/frontend-composed-slice32.php:34-37), so nothing here can load late. * * REUSE FIRST. .button, .button--primary, .button--ghost, .action-row, .eyebrow, * .page-booking-card, .page-booking-card--inline, .page-booking-card__actions * and .page-booking-card__note are used unchanged and are NOT restated. Exactly * sixteen new classes are declared, and every one is emitted in markup. * * CONTRAST, measured with the WCAG 2.x relative-luminance formula, not eyeballed: * --idrive-green-deep #0f6f3b 6.26:1 on #ffffff, 5.73:1 on --idrive-mist * (#f2f6f3, the ground of .page-booking-card--inline) * --idrive-muted #64716c 5.10:1 on white, 4.67:1 on mist * --idrive-ink #07110e 17.57:1 on mist * #5f8474 control border 4.17:1 on white, 3.82:1 on mist - both clear * the 3:1 SC 1.4.11 floor for a control boundary, * which --idrive-line #dce5df (1.29:1) does not. * --idrive-green #15944b is 3.91:1 on white (NOT 3.53:1, an earlier and * wrong figure) and so appears as TEXT nowhere here. * --idrive-lime #8ddd3f is 1.67:1 on white and appears nowhere in this * block at all; it is never a focus indicator. * Focus keeps the global :focus-visible ring in app.css unchanged - no rule * below declares outline. * * TARGET SIZE (SC 2.5.8, 24x24 minimum). Every control declared here is at * least 2.75rem (44px) tall: the disclosure summary, each select, and the * accessibility checkbox row. .button already carries min-height 2.75rem. * * BREAKPOINTS reuse the existing 760 and 430 steps only; no new step. * ========================================================================== */ /* 1. Article context carried into the planner. .page-booking-card p is already * declared, so the element selector is qualified rather than redefined. */ .page-booking-card p.page-booking-card__context { padding-left: .8rem; border-left: 3px solid var(--idrive-green-deep); color: var(--idrive-text); font-size: .84rem; } /* 2. What a request is and is not. A plain list, not a badge row: nothing here * is a trust claim, so nothing here is decorated like one. */ .page-booking-card__expect { display: grid; gap: .4rem; margin: .85rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--idrive-line); list-style: none; color: var(--idrive-muted); font-size: .8rem; line-height: 1.5; } .page-booking-card__expect li { position: relative; padding-left: 1rem; } .page-booking-card__expect li::before { content: ""; position: absolute; top: .5rem; left: 0; width: .35rem; height: .35rem; border-radius: 50%; background: var(--idrive-green-deep); } .page-booking-card__expect strong { color: var(--idrive-ink); } /* 3. Progressive disclosure. The party fields are optional, so they start * closed; the native
/ pair carries the expanded state, so * no ARIA is added on top of it. */ .cta-intent { display: grid; gap: .6rem; margin-top: .35rem; } .cta-intent__disclose { border: 1px solid var(--idrive-line); border-radius: .75rem; background: var(--idrive-white); } .cta-intent__summary { min-height: 2.75rem; padding: .78rem .9rem; color: var(--idrive-green-deep); font-size: .84rem; font-weight: 750; cursor: pointer; } .cta-intent__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; padding: 0 .9rem .9rem; } .cta-intent__field { display: grid; gap: .25rem; color: var(--idrive-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .cta-intent__field select { width: 100%; min-height: 2.75rem; padding: .5rem .7rem; color: var(--idrive-ink); border: 1px solid #5f8474; border-radius: .6rem; background: var(--idrive-white); font-size: .9rem; font-weight: 700; letter-spacing: normal; text-transform: none; cursor: pointer; } .cta-intent__check { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: var(--idrive-text); font-size: .82rem; line-height: 1.4; cursor: pointer; } .cta-intent__check input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--idrive-green-deep); cursor: pointer; } /* 4. Journeys the guide itself names. Each row is a label plus one permitted * CTA; the row states no coverage, price, vehicle or travel time. */ .article-journeys { display: grid; gap: .75rem; margin: 2rem 0; } .article-journeys > h2 { margin: 0; color: var(--idrive-ink); font-size: clamp(1.05rem, 2.4vw, 1.25rem); } .article-journeys > p { margin: 0; color: var(--idrive-muted); font-size: .88rem; } .article-journeys__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; } .article-journeys__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--idrive-line); border-radius: .85rem; background: var(--idrive-white); } .article-journeys__label { min-width: 0; color: var(--idrive-ink); font-size: .92rem; font-weight: 750; } /* 5. Foot-of-article action bar. Shown only below 760px, where the sticky rail * card is not on screen; above that it would duplicate a control the reader * can already see. * * ACCESSIBILITY DECISION, recorded because it was asked for as a sticky bar: * this is a STATIC bar at the end of
, not position:sticky/fixed. A * viewport-pinned bar overlays the bottom of the scrollport, and anything a * keyboard user tabs to underneath it fails SC 2.4.11 Focus Not Obscured * (Minimum) - the same defect this pass is fixing for the sticky header. It * sits at the end of the document flow where the markup already places it. */ .article-action-bar { display: none; } .article-action-bar__text { color: var(--idrive-muted); font-size: .82rem; line-height: 1.45; } @media (max-width: 760px) { .article-action-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 2rem 0 0; padding: 1rem; border-top: 1px solid var(--idrive-line); } .article-action-bar__text { flex: 1 1 12rem; } } @media (max-width: 430px) { .cta-intent__fields { grid-template-columns: 1fr; } .article-journeys__row { align-items: stretch; flex-direction: column; } .article-journeys__row .button { width: 100%; } .article-action-bar .button { width: 100%; } } @media (forced-colors: active) { /* The two list markers above are drawn with background on a ::before, which forced-colors discards, and the context rule leans on a border colour that is forced too. CanvasText keeps all three visible. */ .page-booking-card__expect li::before, .book-quote-aside__list li::before { background: CanvasText; } .page-booking-card p.page-booking-card__context { border-left-color: CanvasText; } }