/* GENERATED - DO NOT EDIT BY HAND. * Page-scoped subset of tranche2-v01.css for the 'account' 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 41/155 subset bytes 10333 * 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; } } /* ----------------------------------------------------------------------------- * 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; } /* ===== account-and-authentication ===== */ /* ============================================================================= * TRANCHE 2 - ACCOUNT AND AUTHENTICATION FAMILY * page-account.php, page-sign-in.php, page-register.php, * page-password-reset.php and inc/account-pages.php. * * Appended to the ONE stylesheet. No new handle, no second file. * * The family deliberately reuses the live account shell rather than inventing a * second one: .account-gateway__grid is the two-column layout, and * .account-gateway__card / .account-gateway__status are the panel and the dark * status note. Only the column stacks, the page rail and the form controls are * new. Actions use the existing .action-row, empty and gated states use the * existing .search-state-card, and the booking prompt uses the existing * .page-booking-card through template-parts/cta-booking.php. * * Every control here clears 44px: .account-nav rows are 2.75rem, the check * labels are 2.75rem, and .account-form__field is 2.15rem of input inside * .6rem of vertical padding. Contrast: labels and hints are --idrive-muted on * white and links are --idrive-green-deep, never --idrive-green, which fails AA * at body sizes. * * Breakpoints reuse the existing 760 / 430 steps. .account-gateway__grid * already collapses to one column at 760, so nothing is restated here. * ========================================================================== */ .account-main, .account-rail { min-width: 0; display: grid; gap: 1.25rem; align-content: start; } /* Panel extensions. The live rules declare .account-gateway__card h2 and li only, and these four pages also put paragraphs and lists in the panel. */ .account-gateway__card > p { color: var(--idrive-muted); } .account-gateway__card > p:last-child { margin-bottom: 0; } .account-gateway__card > ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--idrive-text); } .account-gateway__card .search-state-card { margin-top: 1rem; box-shadow: none; } .account-gateway__status strong { display: block; margin-bottom: .4rem; color: var(--idrive-white); } .account-gateway__status p:last-child { margin-bottom: 0; } /* The rail across the four account surfaces. Crawlable list, no JS. */ .account-nav { padding: clamp(1.1rem, 2.4vw, 1.5rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); } .account-nav h2 { margin: 0 0 .5rem; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .account-nav ol { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; } .account-nav li { margin: 0; } .account-nav a, .account-nav span { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .6rem; border-radius: .6rem; font-size: .9rem; font-weight: 700; } .account-nav a { color: var(--idrive-green-deep); } .account-nav a:hover { background: var(--idrive-white); text-decoration: underline; text-underline-offset: .18em; } .account-nav span { color: var(--idrive-muted); } .account-nav [aria-current="page"] { color: var(--idrive-ink); background: var(--idrive-white); box-shadow: inset 0 0 0 1px var(--idrive-line); } /* Forms. Plain POST to admin-post.php, so every rule here has to work with no script running at all. */ .account-form { display: grid; gap: 1rem; margin: 1.15rem 0 0; } .account-form + .account-form { margin-top: .35rem; padding-top: 1rem; border-top: 1px solid var(--idrive-line); } .account-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; } .account-form__field { min-width: 0; display: grid; gap: .2rem; padding: .6rem .9rem; border: 1px solid var(--idrive-line); border-radius: .9rem; background: var(--idrive-white); transition: border-color .18s ease, box-shadow .18s ease; } .account-form__field:focus-within { border-color: var(--idrive-green-deep); box-shadow: 0 0 0 3px rgba(21, 148, 75, .18); } .account-form__label { color: var(--idrive-muted); font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .account-form__hint { max-width: 62ch; margin: 0; color: var(--idrive-muted); font-size: .82rem; line-height: 1.5; } .account-form__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; } .account-form__check input { width: 1.35rem; height: 1.35rem; margin: .7rem 0 0; accent-color: var(--idrive-green-deep); } .account-form__check label { min-height: 2.75rem; display: flex; align-items: center; color: var(--idrive-text); font-size: .92rem; line-height: 1.45; } .account-form__check a { color: var(--idrive-green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; } .account-form__check a:hover { color: var(--idrive-ink); } .account-form__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; } .account-form__actions .button { min-height: 2.75rem; } /* What registration will ask for, in order. */ .account-steps { display: grid; gap: .65rem; margin: 0 0 1.15rem; padding: 0; list-style: none; counter-reset: idrive-account-step; } .account-steps li { position: relative; margin: 0; padding-left: 2.5rem; color: var(--idrive-muted); font-size: .92rem; line-height: 1.5; } .account-steps li::before { counter-increment: idrive-account-step; content: counter(idrive-account-step); position: absolute; top: 0; left: 0; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: var(--idrive-white); border-radius: 50%; background: var(--idrive-green-deep); font-size: .8rem; font-weight: 850; } .account-steps li strong { display: block; color: var(--idrive-ink); font-weight: 800; } @media (max-width: 430px) { .account-form__grid { grid-template-columns: 1fr; } .account-form__actions .button { width: 100%; } } /* ============================================================================= * 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; } }