/* GENERATED - DO NOT EDIT BY HAND. * Page-scoped subset of tranche2-v01.css for the 'supply' 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 37760 md5 04012a3d39110278a790cd0d7d7e3723 blocks kept 38/155 subset bytes 12432 * Regenerate whenever tranche2-v01.css changes. inc/frontend-composed-slice32.php * falls back to the full sheet if the source no longer measures 37760 bytes. */ /* The tabindex the partial adds must not paint a permanent outline on a mouse click. The 5.5rem scroll-margin-top that used to sit on these two selectors is REMOVED. It was the only sticky-header mitigation in the whole composition and it covered article body headings alone, leaving the skip link, the article outline, the booking error summary and sequential Tab focus to land under the header. That is now fixed once, for every target on every page, by html { scroll-padding-top: 6rem } in app.css. Keeping both would have stacked 6rem of scrollport padding on top of 5.5rem of element margin and dropped anchored headings 11.5rem down the viewport. */ .prose h2[id]:focus:not(:focus-visible), .prose h3[id]:focus:not(:focus-visible) { outline: none; } /* ----------------------------------------------------------------------------- * 6. PRINT. A policy document is a document: people print it, save it to PDF * and attach it to a complaint. The stylesheet had no print rules at all, so * this is the first block. Site chrome, the rail, the in-page table of * contents and every button come off; the wording, the version strip and the * contracting identity stay. In-body links print their href so a printed * copy stays traceable, and headings do not orphan across a page break. * -------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .skip-link, .mobile-drawer, .drawer-backdrop, .explore-sidebar, .page-booking-card, .breadcrumb, .legal-toc, .action-row { display: none !important; } .content-main, .prose-layout, .explore-stream { display: block; } .container { width: 100%; max-width: none; margin: 0; padding: 0; } .content-hero { padding: 0 0 .75rem; background: none; border-bottom: 1px solid #000; } .content-hero h1 { max-width: none; font-size: 22pt; } .prose > * { max-width: none; } .prose h2, .prose h3 { break-after: avoid-page; page-break-after: avoid; } .prose p, .prose li, .prose blockquote, .prose table { break-inside: avoid; page-break-inside: avoid; } .prose a:not(.button)::after { content: " (" attr(href) ")"; font-size: .85em; font-weight: 400; word-break: break-all; } .explore-provenance, .legal-identity, .legal-index__row, .search-state-card { border: 1px solid #000; background: none; box-shadow: none; } .legal-identity { border-left-width: 1px; border-radius: 0; } .search-state-card__icon { display: none; } .legal-status { border: 1px solid #000; background: none; } } /* ===== supply ===== */ /* ============================================================================= * iDrive Platform — SUPPLY-SIDE FAMILY append. * * APPEND-ONLY, to the END of assets/css/app.css. The theme registers exactly * ONE style handle, so this is not a new file: it is the tail of the existing * one. Nothing below restates a token, a font, a breakpoint or any rule that * already exists above. * * Breakpoints reused, never invented: 1050 / 760 / 430. * Colour: --idrive-green-deep is used for every piece of text and every rule * on a light ground, because --idrive-green is 3.91:1 on white and fails AA at * these sizes. No new token is declared. * * Classes this block declares for the first time: * .content-main--supply .supply-switch .supply-programmes * .supply-card .supply-card__mark .supply-card__body .supply-card__list * .supply-paths .supply-path * .supply-evidence .supply-evidence__group * .supply-note * * Plus one repair to an existing component: .results-assumptions declares only * an h2 rule, while page-self-drive-car-rental-pakistan.php (tranche 1) and * every supply template put h3 inside it, leaving those headings unstyled and * near-invisible on the dark panel. The h3 rule below closes that. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. Page scope. One local custom property, not a brand token: it sets the * reading measure for the long explanatory paragraphs this family is made * of, in one place. * -------------------------------------------------------------------------- */ .content-main--supply { --idrive-supply-measure: 74ch; } /* ----------------------------------------------------------------------------- * 2. Programme switch. Two real links, rendered inside .content-hero__inner. * The current programme is a --primary button carrying aria-current, so the * state is not signalled by colour alone. * -------------------------------------------------------------------------- */ .supply-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } .supply-switch .button { font-size: .88rem; } .supply-switch .button[aria-current="page"] { box-shadow: 0 0 0 3px rgba(141, 221, 63, .3); } /* ----------------------------------------------------------------------------- * 3. The two programme cards. Never one merged card: DEC-134 keeps chauffeur * transport and self-drive rental as separate approved programmes, and the * layout keeps them visually separate too. * -------------------------------------------------------------------------- */ .supply-programmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(.9rem, 2.5vw, 1.35rem); } .supply-card { min-width: 0; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: start; 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 12px 36px rgba(6, 26, 18, .055); } .supply-card__mark { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: var(--idrive-white); background: linear-gradient(145deg, var(--idrive-green-deep), var(--idrive-ink)); border-radius: 1rem; font-size: .92rem; font-weight: 900; letter-spacing: .06em; } .supply-card__body { min-width: 0; display: grid; gap: .55rem; align-content: start; } .supply-card__body h2, .supply-card__body h3 { margin: 0; color: var(--idrive-ink); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; } .supply-card__body > p { margin: 0; color: var(--idrive-muted); font-size: .95rem; } .supply-card .action-row { margin-top: .35rem; } .supply-card__list { display: grid; gap: .4rem; margin: .15rem 0 0; padding: 0; list-style: none; color: var(--idrive-text); font-size: .88rem; } .supply-card__list li { position: relative; padding-left: 1.25rem; } .supply-card__list li::before { content: ""; position: absolute; top: .55em; left: 0; width: .45rem; height: .45rem; border: 1px solid var(--idrive-green-deep); border-radius: 50%; } /* ----------------------------------------------------------------------------- * 4. Entry paths (DEC-021: sole driver vs fleet/business). A tinted panel, so * it never reads as a third programme card. * -------------------------------------------------------------------------- */ .supply-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: clamp(.9rem, 2.5vw, 1.35rem); } .supply-path { min-width: 0; display: grid; gap: .55rem; align-content: start; padding: clamp(1.15rem, 2.5vw, 1.6rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); } .supply-path h2, .supply-path h3 { margin: 0; color: var(--idrive-ink); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.25; letter-spacing: -.02em; } .supply-path p { max-width: 60ch; margin: 0; color: var(--idrive-text); font-size: .92rem; } .supply-path p + p { color: var(--idrive-muted); font-size: .86rem; } /* ----------------------------------------------------------------------------- * 5. Evidence checklist. Categories of evidence only — no page in this family * collects a document, an identity number or a bank detail in the browser, * so there is no field, no fieldset and no form styling here by design. * -------------------------------------------------------------------------- */ .supply-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(.8rem, 2vw, 1.15rem); } .supply-evidence__group { min-width: 0; display: grid; gap: .6rem; align-content: start; padding: clamp(1.05rem, 2.2vw, 1.4rem); border: 1px solid var(--idrive-line); border-radius: 1rem; background: var(--idrive-white); box-shadow: 0 12px 36px rgba(6, 26, 18, .055); } .supply-evidence__group h2, .supply-evidence__group h3 { margin: 0; color: var(--idrive-green-deep); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .supply-evidence__group ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; color: var(--idrive-text); font-size: .88rem; } .supply-evidence__group li { position: relative; padding-left: 1.35rem; } .supply-evidence__group li::before { content: ""; position: absolute; top: .48em; left: .1rem; width: .55rem; height: .55rem; border: 1px solid var(--idrive-green-deep); border-radius: .2rem; } /* ----------------------------------------------------------------------------- * 6. The explanatory paragraph this family leans on. Capped to the local * measure so a governance sentence never runs the full 1240px. * -------------------------------------------------------------------------- */ .supply-note { max-width: var(--idrive-supply-measure, 74ch); margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; color: var(--idrive-text); font-size: .95rem; } .supply-note + .supply-note { margin-top: .75rem; } .selfdrive-panel .supply-note { margin-top: 0; } /* the panel is a grid; its gap owns the rhythm */ .supply-note a { color: var(--idrive-green-deep); font-weight: 800; text-decoration: underline; } /* ----------------------------------------------------------------------------- * 7. Repair: .results-assumptions styles h2 only, but the self-drive hub and * every supply template use h3 there to keep the heading order legal under * a section h2. Same treatment, matching the existing h2 rule. * -------------------------------------------------------------------------- */ .results-assumptions h3 { margin: 0 0 .45rem; color: var(--idrive-white); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; } .results-assumptions h3:not(:first-child) { margin-top: 1.1rem; } /* ----------------------------------------------------------------------------- * 8. Responsive. Existing breakpoints only. * -------------------------------------------------------------------------- */ @media (max-width: 1050px) { .supply-evidence { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } } @media (max-width: 760px) { .supply-card { grid-template-columns: 1fr; gap: .85rem; } .supply-note { max-width: none; } } @media (max-width: 430px) { .supply-switch .button { flex: 1 1 100%; } .supply-card__mark { width: 3rem; height: 3rem; font-size: .84rem; } } /* ============================================================================= * FORCED-COLORS (Windows High Contrast) SUPPORT for the two current-state * markers this file owns. SC 1.4.11 Non-text Contrast / SC 1.3.1. * * forced-colors mode discards author background-color, background-image and * box-shadow, so both of these lost their marker entirely: * * tranche2:360 .supply-switch .button[aria-current="page"] - a box-shadow * ring and nothing else; the .button--primary gradient that * otherwise distinguishes it is discarded at the same time, so * the current programme became indistinguishable from the rest. * tranche2:485 .account-nav [aria-current="page"] - background + box-shadow. * * Re-expressed with the Highlight / HighlightText system pair, which * forced-colors honours from author stylesheets. No outline is declared here, * so the global :focus-visible ring in app.css stays the only outline and * cannot be out-specified on an element that is both current and focused. * ========================================================================== */ @media (forced-colors: active) { .supply-switch .button[aria-current="page"], .account-nav [aria-current="page"] { background-color: Highlight; color: HighlightText; } }