/* ========================================================================== 3DOptix redesign — GENERIC ARCHIVE page-unique CSS. Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css Enqueued CONDITIONALLY from archive.php (handle 'dxr-page-archive', dependency 'dxr-shell'), so it ships on archive URLs only and can never reorder the shared layer. WHAT IT SERVES. Every listing surface with no more specific template: /video/, /academy-post/, /academy-cat//, the other CPT category taxonomies, and core's category / tag / author / date archives. See the docblock in archive.php for why it cannot reach /blog/, /videos/, /use-cases/, /academy/ or the WooCommerce store. DESIGN SOURCE. The approved prototype contains exactly ONE collection view — the Academy index, '3DOptix Website.dc.html' lines 628-741 — and every structure below is transcribed from it, the same source the blog index, Use Cases and Videos stylesheets were written from. That is deliberate: a stray archive should read as the same system as the curated lists, not as a fifth invention. Line references below point at that block. RULES FOR THIS FILE: - SCOPE. Every selector is scoped to .dxr-page-archive, the wrapper class archive.php emits inside the shell's
. No bare element selectors, ever. Sibling templates were written in parallel by other agents and share component names — the page scope is what keeps the files from having to agree. - No new colour. Every value resolves from the token layer; the only raw numbers are geometry transcribed from the prototype, and each is named in §0 rather than repeated as a literal below. - No new keyframe. The only motion here is a border-colour transition, already neutralised by the shared prefers-reduced-motion block in dxr-components.css §2. - The spectrum gradient appears ZERO times in this file. Site-wide budget unchanged: nav 2px + footer 3px. Contents §0 Page-local custom properties §1 Header band — dark §2 Archive description §2b The ONE reset re-declaration, and why it lives here §3 Result count line §4 Card grid + card §5 Pagination §6 Empty state ========================================================================== */ /* ========================================================================== §0 Page-local custom properties Prototype values with no entry in the token layer. Declared once, used by name below, so every literal in this file is traceable to a prototype line and a design change is a one-line edit. Values are deliberately identical to dxr-page-blog.css §0 — the two screens ARE the same collection view, and drifting them apart by a few pixels would be the only visible difference between a curated list and a stray archive. ========================================================================== */ .dxr-page-archive{ --dxr-arch-head-top:clamp(27px,3.3vw,44px); /* proto 632 */ --dxr-arch-head-bot:clamp(32px,3.9vw,52px); /* proto 632 */ --dxr-arch-gap:24px; /* proto 659 — NOT --dxr-gap-panels (20px) */ --dxr-arch-page-h:44px; /* pagination cell — see §5. 44px, not 40: the cell is a touch target and the design transcribes no value. */ } /* ========================================================================== §1 Header band — dark (proto 630-639) Deliberately NOT .dxr-hero: no glow, no CTA row, no spectrum eyebrow bar. An archive is a directory, not a pitch. The 64px blueprint is the design's one documented 64px instance and .dxr-blueprint--64 already exists for it. The rhythm is the prototype's, not the system's, so .dxr-section's --dxr-section-y is overridden here rather than in the shared layer. The two-class selector outranks .dxr-section (0,1,0) without !important. ========================================================================== */ .dxr-page-archive .dxr-arch__head{ padding:var(--dxr-arch-head-top) 0 var(--dxr-arch-head-bot); } /* The breadcrumb occupies the eyebrow slot — it is already mono, and it is already real content on this page. That is why dxr_eyebrow() is not called. */ .dxr-page-archive .dxr-arch__crumbs{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-bottom:24px; font:400 12px/1 var(--dxr-font-mono); color:var(--dxr-on-dark-caption); } .dxr-page-archive .dxr-arch__crumbs a{position:relative;color:var(--dxr-on-dark-body-alt)} .dxr-page-archive .dxr-arch__crumbs a:hover{color:var(--dxr-on-dark)} /* TOUCH TARGET. The 12px mono line box gives the crumb link a ~12px-tall hit area. The pseudo-element enlarges the hit area WITHOUT moving anything: 12 + 16 + 16 = 44px tall, and 4px of horizontal bleed against the row's 10px gap leaves the neighbouring crumb its own 2px of clearance. The band's top padding is >=27px and the row's margin-bottom is 24px, so the overhang never reaches another control. Same construction as dxr-page-blog.css §1. */ .dxr-page-archive .dxr-arch__crumbs a::after{ content:"";position:absolute;inset:-16px -4px; } /* Prototype 636. Smaller than .dxr-h1--page on purpose — an index H1 is not a product H1. The shared type file is off-limits to this batch, so the role is authored here rather than added to §4 of dxr-components.css, exactly as .dxr-blog__title is. overflow-wrap is load-bearing HERE in a way it is not on the blog: the string is core's own archive title and can be a 40-character unbroken tag slug or a term name with no spaces at all. At 800 weight and the clamp minimum that overflows the 280px content box a 320px viewport leaves, and nothing in the ancestor chain clips or scrolls — the document itself would scroll sideways. `break-word` (not `anywhere`) cannot affect any track sizing. */ .dxr-page-archive .dxr-arch__title{ margin:0; font:800 clamp(27px,4.2vw,46px)/1.08 var(--dxr-font-sans); letter-spacing:-.038em; color:var(--dxr-on-dark); overflow-wrap:break-word; } /* Core wraps the archive NAME in a bare and leaves the prefix ("Category:", "Archives:", "Year:") outside it — see get_the_archive_title(). The span is styled to inherit rather than left to chance: a UA or a plugin stylesheet reaching a bare inside an

would otherwise be the only thing deciding how half this heading looks. */ .dxr-page-archive .dxr-arch__title span{font:inherit;color:inherit;letter-spacing:inherit} /* ========================================================================== §2 Archive description Term and author descriptions. Empty on nearly every archive on this site today, so the template renders the whole block conditionally and there is no collapsed-empty case to style. Measure is capped at the shared 620px reading width — the same measure the list pages give their lede — because this sits under a 46px heading on a full 1300px container, and a description running the whole width would be the only unmeasured prose in the design. ========================================================================== */ .dxr-page-archive .dxr-arch__desc{ max-width:min(100%,620px); margin-top:14px; font:400 15px/1.7 var(--dxr-font-sans); color:var(--dxr-on-dark-body); } /* ========================================================================== §2b THE ONE RESET RE-DECLARATION — read this before touching §2 archive.php is a 'chrome' surface: everything it prints is esc_html()'d into an element it authored, so dxr-prose.css is NOT loaded. The single exception is this block — get_the_archive_description() is EDITOR CONTENT, emitted through wp_kses_post(), so it can legitimately contain

,