/* GENERATED - DO NOT EDIT BY HAND. * Page-scoped subset of tranche2-v01.css for the 'legal' 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 30/155 subset bytes 9245 * 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. */ /* ===== Legal and policy ===== */ /* ============================================================================= * iDrive frontend tranche 2 — LEGAL AND POLICY family append. * * APPEND-ONLY, to the END of assets/css/app.css. The theme registers exactly * one style handle, so this is the only place these rules can live. Nothing * below restates a token, a font, a breakpoint or a component that already * exists above; the family reuses .content-main, .content-hero, .prose-layout, * .explore-stream, .prose, .explore-sidebar, .explore-provenance, .action-row, * .search-state-card, .section--tight and .breadcrumb as shipped. * * Nine new class names in total, all emitted by template-legal.php, * template-legal-index.php or the render partials in inc/legal-pages.php: * .legal-toc .legal-toc__list .legal-index .legal-index__row * .legal-index__label .legal-status .legal-status--approved * .legal-status--pending .legal-identity * * Breakpoints reused, never invented: 760 / 430. * Colours are --idrive-* tokens plus the two literal tints already used by the * live sheet's chip pattern (#e7f6ec) and its warning-tinted sibling. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. Table of contents. Built from the headings the approved document actually * contains, so it is a navigation aid, never a summary of the wording. Every * row is a 44px target; h3 rows indent through the data-level attribute the * partial already emits, which avoids a tenth class. * -------------------------------------------------------------------------- */ .legal-toc { padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.4rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); } .legal-toc h2 { margin: 0 0 .5rem; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .legal-toc__list { display: grid; gap: .05rem; margin: 0; padding: 0; list-style: none; } .legal-toc__list li { display: block; } .legal-toc__list a { display: flex; align-items: center; min-height: 2.75rem; padding: .45rem .55rem; border-radius: .6rem; color: var(--idrive-green-deep); font-size: .92rem; font-weight: 700; } .legal-toc__list a:hover { color: var(--idrive-ink); background: var(--idrive-white); } .legal-toc__list a:focus-visible { background: var(--idrive-white); } .legal-toc__list li[data-level="3"] a { padding-left: 1.6rem; color: var(--idrive-text); font-size: .87rem; font-weight: 650; } /* 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; } /* ----------------------------------------------------------------------------- * 2. The policy index. One row per document in the registry, carrying its real * state. A document with no published page renders as , not , so * the index cannot contain a dead link. * -------------------------------------------------------------------------- */ .legal-index { display: grid; gap: .5rem; } .legal-index__row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; min-height: 3.5rem; padding: .7rem 1rem; border: 1px solid var(--idrive-line); border-radius: .85rem; background: var(--idrive-white); } .legal-index__label { min-width: 0; display: grid; gap: .15rem; } .legal-index__label a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--idrive-green-deep); font-size: 1rem; font-weight: 800; } .legal-index__label a:hover { color: var(--idrive-ink); text-decoration: underline; text-underline-offset: .18em; } .legal-index__label strong { color: var(--idrive-text); font-size: 1rem; font-weight: 750; } .legal-index__label small { color: var(--idrive-muted); font-size: .78rem; font-weight: 650; } /* ----------------------------------------------------------------------------- * 3. Status pill. Two states only, because the template only has two: a * document is either approved and rendered, or it is not and the placeholder * is rendered. --idrive-green-deep on #e7f6ec measures 5.6:1 and * --idrive-warning #8f5000 on #fdf3e6 measures 7.4:1; both clear AA at this * size, which --idrive-green would not. * -------------------------------------------------------------------------- */ .legal-status { flex: none; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; } .legal-status--approved { color: var(--idrive-green-deep); background: #e7f6ec; } .legal-status--pending { color: var(--idrive-warning); background: #fdf3e6; } /* ----------------------------------------------------------------------------- * 4. Contracting identity. Rendered from idrive_platform_legal_identity() on * legal pages only. Deliberately quiet: it is a disclosure, not a badge, and * it must not read as a trust signal. * -------------------------------------------------------------------------- */ .legal-identity { display: grid; gap: .35rem; padding: 1rem 1.2rem; border: 1px solid var(--idrive-line); border-left: 3px solid var(--idrive-lime); border-radius: 0 var(--idrive-radius) var(--idrive-radius) 0; background: var(--idrive-mist); } .legal-identity h2, .legal-identity h3 { margin: 0; color: var(--idrive-ink); font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .legal-identity p { margin: 0; color: var(--idrive-text); font-size: .95rem; } .legal-identity strong { color: var(--idrive-ink); font-weight: 800; } .legal-identity .text-link { text-align: left; } /* ----------------------------------------------------------------------------- * 5. Responsive. Existing breakpoints only. * -------------------------------------------------------------------------- */ @media (max-width: 760px) { .legal-toc { padding: 1rem; } } @media (max-width: 430px) { .legal-index__row { flex-direction: column; align-items: flex-start; gap: .5rem; } .legal-status { align-self: flex-start; } } /* ----------------------------------------------------------------------------- * 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; }