/* GENERATED - DO NOT EDIT BY HAND. * Page-scoped subset of tranche1-v03.css for the 'home' 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 106/247 subset bytes 25066 * 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; } /* ----------------------------------------------------------------------------- * 2. CONTRAST FIXES. --idrive-green #15944b measures 3.91:1 on --idrive-white * NOTE ON THE EVIDENCE: an earlier revision of this header recorded these * ratios as 3.53:1 on white and 3.24:1 on mist. Both figures were WRONG. * Recomputed with the WCAG 2.x relative-luminance formula, #15944b is * 3.91:1 on #ffffff and 3.59:1 on #f2f6f3; #0f6f3b is 6.26:1 and 5.73:1 on * the same two grounds. The conclusion is unchanged - both --idrive-green * figures still fail AA 4.5:1 at body size - so no declaration below moves. * Only the stated evidence is corrected, so a reviewer does not carry the * wrong number forward. * and 3.59:1 on --idrive-mist. Neither reaches WCAG AA 4.5:1, and none of * the type below is large text (AA large starts at 24px, or 18.66px bold), * so no exemption applies. --idrive-green-deep #0f6f3b measures 6.26:1 on * white and 5.73:1 on mist. Single-property overrides only. * * Where the failure appears in the LIVE app.css: * line ~199 .trust-strip b .72rem on --idrive-white 3.91:1 * line ~207 .service-card__number .75rem/850 on --idrive-mist 3.59:1 * line ~243 .search-state-card__icon white glyph on green 3.91:1 * line ~119 .hero-badge span white glyph, .78rem/800 3.91:1 * And in the city family this block absorbs: * .city-facts b .62rem/850 on --idrive-white 3.91:1 * * Deliberately NOT overridden: .button--primary's 135deg gradient starts at * --idrive-green, so its extreme top-left corner is 3.91:1 with white text. * The text sits at the gradient's midpoint, which mixes to ~#12813f and * measures 4.96:1. Repainting the primary CTA would need a green that is not * in the token set, so the gradient is left as shipped and recorded here. * * Also left alone: .service-card__icon (1.7rem = 27px, large text, 3:1 is * the AA threshold and 3.91:1 clears it), .desktop-nav a::after (a 2px * non-text indicator, 3:1 threshold), and the verified-place radial dot. * -------------------------------------------------------------------------- */ .trust-strip b { color: var(--idrive-green-deep); } .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); } .hero-badge span { 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; } .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 .results-itinerary { margin-top: .75rem; } /* ----------------------------------------------------------------------------- * 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; } .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; } .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); } .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; } .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; } /* 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; } .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); } .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; } @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); } .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; } .results-boundary--standalone strong { color: var(--idrive-white); font-size: .92rem; } .results-boundary--standalone span { color: #cbdad3; font-size: .84rem; } .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; } }