/* ========================================================================== 3DOptix redesign — use case ARTICLE page-unique CSS. Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css Enqueued CONDITIONALLY from single-use-case.php (handle 'dxr-page-use-case', dependency 'dxr-shell'), so it ships on /use-cases// only and can never reorder the shared layer. Transcribed from '3DOptix Website.dc.html' lines 744-819 (line references below are to that file) plus README §6, which is authoritative where the two disagree — see §2. RELATIONSHIP TO dxr-page-article.css. That file is the SAME SCREEN for the Academy CPT and it shipped first. This one is its sibling, not its replacement: identical geometry, identical rhythm, identical component choices, its own block names and its own page scope. The duplication is deliberate and is the pattern dxr-page-article.css §1 names explicitly — "two parallel page stylesheets can each carry their own copy without colliding", with promotion into the shared layer as the follow-up once the pattern is confirmed on a second screen. This IS that second screen; the candidates for promotion are called out in §1 and §8 below. THIS FILE IS THE ARTICLE'S CHROME, NOT ITS BODY. The body — the client's legacy, Elementor-wrapped, editor-authored HTML — is styled by assets/css/dxr-prose.css and by nothing here. There is not one selector in this file that reaches inside .dxr-prose, and there must never be: the prose layer is a carefully arithmetic-checked specificity ladder (see its header), and a stray rule from a page stylesheet landing in the middle of it is exactly how a library gets silently unstyled. If something about the body needs changing, change dxr-prose.css. RULES FOR THIS FILE: - SCOPE. Every selector is scoped to .dxr-page-use-case-article, the wrapper the template emits inside the shell's
. No bare element selectors, ever. Note the scope is NOT .dxr-page-usecases — that is the /use-cases/ INDEX (dxr-page-usecases.css). Two different screens, two class tokens that cannot match each other. - 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. - The spectrum gradient appears ZERO times in this file. The header eyebrow uses --dxr-spectrum-eyebrow through the shared .dxr-eyebrow-bar component; dxr-tokens.css §1.4 documents that five-stop gradient as a different asset from the seven-stop --dxr-spectrum and explicitly outside the two-placement rule. Site-wide budget unchanged: nav 2px + footer 3px. - ONE media query, at --dxr-nav-break (900px), the site's only named breakpoint. See §2. Contents §0 Page-local custom properties §1 Header band — breadcrumb, title row §2 Two-column body — the grid and its collapse §3 Article column: pagination, end-of-article bar, legacy tag list §4 Sidebar shell §5 Sidebar (a) — promo card §6 Sidebar (b) — related use cases §7 Sidebar (c) — dark CTA card §8 Category row ========================================================================== */ /* ========================================================================== §0 Page-local custom properties Prototype values with no entry in the token layer. Declared once, used by name below, so a design change is a one-line edit and every literal in this file is traceable to a prototype line. ========================================================================== */ .dxr-page-use-case-article{ --dxr-uca-head-top:34px; /* proto 747 */ --dxr-uca-head-bot:clamp(27px,3.3vw,44px); /* proto 747 */ --dxr-uca-body-top:clamp(35px,4.1vw,56px); /* proto 765 */ --dxr-uca-aside-w:348px; /* README §6 — see §2 */ --dxr-uca-sticky-top:104px; /* proto 795 == --dxr-nav-h (76) + 28 */ --dxr-uca-card-pad:22px; /* proto 804 / 813 */ --dxr-uca-radius-chip:6px; /* legacy tag pills, §3 */ } /* ========================================================================== §1 Header band — proto 746-763 .dxr-section supplies the hairline (--rule-b) and the container; the rhythm is the prototype's own, much tighter than --dxr-section-y, so it is overridden here. The two-class selector out-ranks .dxr-section (0,1,0) without !important. An article header is a label for what follows, not a hero: no blueprint, no glow, no lede. Deliberately NOT .dxr-hero. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-art__head{ background:var(--dxr-surface); padding:var(--dxr-uca-head-top) 0 var(--dxr-uca-head-bot); } /* --- breadcrumb ---------------------------------------------------------- The SECOND instance of this component (the first is dxr-page-article.css §1). The declarations are byte-identical on purpose: the block class stays plain .dxr-crumbs so that promoting these five rules into dxr-components.css is a copy-paste and a delete, not a rewrite. Until that promotion happens each page stylesheet carries its own copy, scoped, and the two cannot collide. PROMOTION CANDIDATE — flagged, not done here. Moving a rule into the shared layer changes every page at once and is not this template's call to make. flex-wrap is load-bearing, not defensive: the third crumb is the post title, and production carries titles past 60 characters (the longest is the "speed and performance of 3DOptix cloud based optical simulations" post). It wraps rather than truncates — a truncated breadcrumb tells the reader less than a two-line one. ------------------------------------------------------------------------ */ .dxr-page-use-case-article .dxr-crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 28px; /* proto 748 */ font:400 12px/1.4 var(--dxr-font-mono); /* mono: a path is measured content */ color:var(--dxr-text-subtle); } .dxr-page-use-case-article .dxr-crumbs a{ color:var(--dxr-text-subtle); transition:color .15s ease; } .dxr-page-use-case-article .dxr-crumbs a:hover{color:var(--dxr-primary)} .dxr-page-use-case-article .dxr-crumbs__sep{color:var(--dxr-text-disabled)} .dxr-page-use-case-article .dxr-crumbs__current{color:var(--dxr-ink)} /* --- title row ----------------------------------------------------------- align-items:flex-end pins the CTA's baseline to the bottom of the copy column, exactly as the prototype does (753). flex-wrap drops the button under the copy before it can squeeze the heading — the button is white-space:nowrap, so without the wrap a long title and a long label fight for the same row. NOTE the copy column here is taller than the Academy one: it carries the category row (§8) under the title. flex-end therefore aligns the CTA to the bottom of the CATEGORY row on a post that has terms, and to the bottom of the title on one that does not. Both read correctly — the CTA sits on the last baseline of the block it is paired with, which is what the prototype's alignment expresses. ------------------------------------------------------------------------ */ .dxr-page-use-case-article .dxr-uc-art__head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; } .dxr-page-use-case-article .dxr-uc-art__head-copy{ min-width:0; /* lets a long unbroken title shrink instead of overflowing */ } /* Local deltas from the shared .dxr-eyebrow-bar (26px margin, 44px rule, .13em). Proto 751-753 gives 16px, 40px, .12em. Everything else inherited. */ .dxr-page-use-case-article .dxr-uc-art__eyebrow{margin-bottom:16px} .dxr-page-use-case-article .dxr-uc-art__eyebrow .dxr-eyebrow-bar__rule{width:40px} .dxr-page-use-case-article .dxr-uc-art__eyebrow .dxr-eyebrow-bar__label{letter-spacing:.12em} /* The type role is .dxr-h1--compact (shared, an exact match for proto 757 bar 0.002em of tracking). Only the box is local — and the element may be an

or a

depending on whether the stored content already carries an

, which is why margin is declared here rather than relied on from the reset. */ .dxr-page-use-case-article .dxr-uc-art__title{ margin:0; overflow-wrap:break-word; } /* The CTA never shrinks below its label — it wraps to its own row instead. */ .dxr-page-use-case-article .dxr-uc-art__cta{flex-shrink:0} /* ========================================================================== §2 Two-column body — proto 765-767 + README §6 RESOLVED CONTRADICTION, carried over from dxr-page-article.css §2 because it is the same layout. Proto 767 is grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)) which resolves to TWO EQUAL 1fr columns — a ~574px sidebar at container width. README §6 states minmax(0,1fr) body + a 348px sidebar at a 72px gap. The auto-fit form is a prototyping shortcut (it collapses without a media query, which is why the prototype reached for it); the README states the real intent and names the exact width. README wins. minmax(0,1fr) ON THE BODY COLUMN IS LOAD-BEARING. A grid track's default min-width is auto, i.e. its content's min-content size. These bodies are the same class of legacy Elementor content as the Academy library — tables with inline pixel widths, images with intrinsic width attributes, iframes at width:100% with inline heights. Under `1fr` alone any one of those would widen the track and push the sidebar off the container. dxr-prose §12 scrolls the tables and §10 caps the images; this is the outer guarantee that makes those work. align-items:start is what makes the sidebar's position:sticky function at all — the default `stretch` gives the aside the full row height, leaving it nothing to slide within. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-art__body{ background:var(--dxr-surface); padding:var(--dxr-uca-body-top) 0 var(--dxr-section-y); /* proto 765 */ } .dxr-page-use-case-article .dxr-uc-art__grid{ display:grid; grid-template-columns:minmax(0,1fr) var(--dxr-uca-aside-w); gap:var(--dxr-gap-col-xwide); /* 72px */ align-items:start; } .dxr-page-use-case-article .dxr-uc-art__main{min-width:0} /* --- the collapse -------------------------------------------------------- ONE breakpoint, at the site's only named one. Why 900px is the right number and not a guess: at a 901px viewport the gutter is 4vw ~= 36px, leaving 829px of container. Minus the 72px gap and the 348px sidebar the body column still holds 409px — comfortably above the 340px floor the prototype itself chose. Below 900px the sidebar stacks under the article, un-sticks, and reads as an appendix; the dark CTA card (§7) becomes the end-of-article CTA, which is the second "Start designing now" production carries at the foot of the page. Do not introduce a second breakpoint. ------------------------------------------------------------------------ */ @media (max-width:900px){ /* == --dxr-nav-break */ .dxr-page-use-case-article .dxr-uc-art__grid{ grid-template-columns:minmax(0,1fr); gap:40px; } .dxr-page-use-case-article .dxr-uc-art__aside{ position:static; top:auto; } } /* ========================================================================== §3 Article column — pagination, end-of-article bar, legacy tag list Everything between these two is .dxr-prose and belongs to dxr-prose.css. ========================================================================== */ /* wp_link_pages() for a multi-page post. Absent from the prototype (nothing in the library paginates today) and absent from the design, but dropping the styling would leave bare, reset-stripped number links if an editor ever splits a post. Mono, because page numbers are measured content. */ .dxr-page-use-case-article .dxr-uc-art__pages{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:34px; font:500 13px/1 var(--dxr-font-mono); color:var(--dxr-body); } .dxr-page-use-case-article .dxr-uc-art__pages a, .dxr-page-use-case-article .dxr-uc-art__pages > span{ display:inline-flex; align-items:center; justify-content:center; /* 44px is the touch floor, matching the pagers on the four list pages. .dxr-uc-art__pages wraps, so the taller cells cannot widen the row. */ min-width:44px; height:44px; padding:0 10px; border:1px solid var(--dxr-border); border-radius:var(--dxr-radius-md); background:var(--dxr-surface); color:inherit; transition:border-color .15s ease,color .15s ease; } .dxr-page-use-case-article .dxr-uc-art__pages a:hover{ border-color:var(--dxr-primary); color:var(--dxr-primary); } .dxr-page-use-case-article .dxr-uc-art__pages > span{ background:var(--dxr-ink); border-color:var(--dxr-ink); color:var(--dxr-on-dark); } /* --- end-of-article bar — proto 790-792 --------------------------------- Sits INSIDE
, after .dxr-prose and outside it. It is the whole of the prototype's article close: there is no full-width band on this screen. The header CTA and the dark sidebar card carry the conversion load. The meta line here is the post's REAL last-updated year. Production prints a hardcoded "Available on January 30th, 2023" on all 19 posts from Theme Builder document 10231 — see the template docblock for why that is not reproduced. ------------------------------------------------------------------------ */ .dxr-page-use-case-article .dxr-uc-art__foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--dxr-border); } .dxr-page-use-case-article .dxr-uc-art__back{ display:inline-flex; align-items:center; gap:8px; font:600 14px/1 var(--dxr-font-sans); color:var(--dxr-primary); transition:color .15s ease; } .dxr-page-use-case-article .dxr-uc-art__back:hover{color:var(--dxr-primary-hover)} /* The arrow is typographic — there is no icon set on this site. */ .dxr-page-use-case-article .dxr-uc-art__meta{ font:400 12px/1.4 var(--dxr-font-mono); /* a date is measured content */ color:var(--dxr-text-subtle); } /* Legacy tag list. Expected to be inert — the CPT does not register post_tag — but kept styled rather than falling back to reset-stripped links if tags are ever switched on. */ .dxr-page-use-case-article .dxr-uc-art__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px; font:400 12px/1 var(--dxr-font-mono); color:var(--dxr-text-subtle); } .dxr-page-use-case-article .dxr-uc-art__tags a{ padding:7px 12px; border:1px solid var(--dxr-border); border-radius:var(--dxr-uca-radius-chip); font:600 12px/1 var(--dxr-font-sans); color:var(--dxr-body); transition:border-color .15s ease,color .15s ease; } .dxr-page-use-case-article .dxr-uc-art__tags a:hover{ border-color:var(--dxr-primary); color:var(--dxr-primary); } /* ========================================================================== §4 Sidebar shell — proto 795 position:sticky, not fixed: the aside must stop scrolling when the article column runs out, which fixed cannot do. It needs three things to work and all three are here or in §2 — a sticky element, an `align-items:start` grid parent (§2), and no overflow:hidden anywhere on the ancestor chain (which is why this section is a plain .dxr-section and NOT .dxr-section--overlay). A sidebar taller than the viewport simply scrolls with the page; there is no inner scroller, because a nested scroll region inside a sticky panel is a trap on a trackpad. The default stack here is two cards (~360px) because the promo card is off unless the client supplies an image — see §5 — so this is shorter than the Academy sidebar, never taller. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-art__aside{ position:sticky; top:var(--dxr-uca-sticky-top); display:flex; flex-direction:column; gap:var(--dxr-gap-panels); /* 20px, proto 795 */ min-width:0; } /* ========================================================================== §5 Sidebar (a) — promo card — proto 796-803 RENDERED ONLY WHEN AN IMAGE EXISTS. The template gates the whole card on dxr_use_case_promo_image returning a src, so unlike the Academy article there is no hatch placeholder here: an unresolved placeholder on 19 client-facing URLs at once, with no asset pending, is a visible gap rather than a review signal. These rules therefore describe a card that is absent by default; they cost nothing until the filter is used. The media slot keeps the Academy's 200px height so a single supplied asset looks identical on both screens. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-promo{ border:1px solid var(--dxr-border); border-radius:var(--dxr-radius-panel); overflow:hidden; background:var(--dxr-surface); } .dxr-page-use-case-article .dxr-uc-promo__media{ height:200px; overflow:hidden; background:var(--dxr-surface-raised); /* shows while the image decodes */ } .dxr-page-use-case-article .dxr-uc-promo__img{ display:block; width:100%; height:100%; object-fit:cover; } .dxr-page-use-case-article .dxr-uc-promo__body{padding:20px} .dxr-page-use-case-article .dxr-uc-promo__title{ margin-bottom:8px; font:700 15px/1.35 var(--dxr-font-sans); color:var(--dxr-ink); } /* The shared .dxr-cta-link is 14px; proto 802 is 13px. Size only — the colour, the hover and the typographic arrow all stay with the component. */ .dxr-page-use-case-article .dxr-uc-promo .dxr-cta-link{font-size:13px} /* ========================================================================== §6 Sidebar (b) — related use cases — proto 804-812 The label reuses the shared .dxr-label--strip role, an exact match for proto 805 (500 10px/1 mono, .12em, uppercase, --dxr-text-subtle); only its margin is local. The rows are real posts (see the two-pass query in single-use-case.php) and the card is suppressed entirely when there are none, so this never renders as an empty frame or with invented titles. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-related{ padding:var(--dxr-uca-card-pad); border:1px solid var(--dxr-border); border-radius:var(--dxr-radius-panel); background:var(--dxr-surface); } .dxr-page-use-case-article .dxr-uc-related__label{margin-bottom:16px} .dxr-page-use-case-article .dxr-uc-related__list{ display:flex; flex-direction:column; gap:14px; } .dxr-page-use-case-article .dxr-uc-related__link{ padding-bottom:14px; border-bottom:1px solid var(--dxr-border-inner); font:600 14px/1.45 var(--dxr-font-sans); color:var(--dxr-ink); transition:color .15s ease; } /* Last row loses the rule and the padding — the card's own padding closes it. */ .dxr-page-use-case-article .dxr-uc-related__link:last-child{ padding-bottom:0; border-bottom:0; } .dxr-page-use-case-article .dxr-uc-related__link:hover{color:var(--dxr-primary)} /* ========================================================================== §7 Sidebar (c) — dark CTA card — proto 813-816 .dxr-on-dark is on the element in the template, which is what gives the shared .dxr-cta-link its --dxr-cyan-light colour and white hover — proto 816 asks for exactly #67E8F9, so the component already does it and nothing needs restating here. BORDER, ESCALATED ONCE ALREADY. Proto 813 puts #E3E8EF — the LIGHT hairline — on a #0B1220 fill. dxr-page-article.css §7 transcribes it verbatim and flags it for sign-off; this file matches that decision rather than taking a second, different one, because the two cards are the same card on two screens and they must not diverge while the question is open. If review lands on the system's on-dark hairline, BOTH files change to border-color:var(--dxr-border-on-dark); in the same commit. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-aside-cta{ position:relative; overflow:hidden; padding:var(--dxr-uca-card-pad); border:1px solid var(--dxr-border); /* see the escalation above */ border-radius:var(--dxr-radius-panel); background:var(--dxr-ink-deep); } .dxr-page-use-case-article .dxr-uc-aside-cta__title{ margin-bottom:8px; font:700 15px/1.4 var(--dxr-font-sans); color:var(--dxr-on-dark); } .dxr-page-use-case-article .dxr-uc-aside-cta__text{ margin:0 0 16px; font:400 13px/1.6 var(--dxr-font-sans); color:var(--dxr-on-dark-muted); /* rgba(255,255,255,0.60), proto 815 */ } /* Proto 816 is 13px; the shared .dxr-cta-link is 14px. Size only. */ .dxr-page-use-case-article .dxr-uc-aside-cta .dxr-cta-link{font-size:13px} /* ========================================================================== §8 Category row — the one block this screen has and the Academy article does not. WHAT IT IS. The post's `use-case-category` terms, under the title, each linking to /use-cases/?filter-category= — the exact URL the index chips already emit (page-templates/dxr-use-cases.php line 359), so the two screens agree without sharing code. WHY IT IS MONO AND NOT A CHIP. The brief is explicit: surface the terms the way the design surfaces LABELS, not as chips-as-icons. The type here is the .dxr-label--strip role's values — 500 10px/1 mono, .1em tracking, uppercase — declared locally rather than by reusing the class, because these are links with a hover state and a colour of their own, and .dxr-label--strip is a static caption role. The colour is --dxr-accent-text, matching the index card's own category label (dxr-page-usecases.css line 280), which is the one other place on the site a use-case term is printed. PROMOTION CANDIDATE, like the breadcrumb in §1: if a second surface needs a term row, these rules move to dxr-components.css as a .dxr-termrow block. Not done here — a shared-layer change is not a page template's call. The separator is a literal middle dot in an aria-hidden span: a typographic mark, which is the whole vocabulary this design has instead of an icon set. flex-wrap because a post can carry two terms and the copy column narrows to the full viewport width below 900px. ========================================================================== */ .dxr-page-use-case-article .dxr-uc-art__terms{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; } /* These are real links to real term archives, so they need a real hit area. At font 500 10px/1.4 with no padding the anchor computes to ~14px tall — the only new control in the batch under the 44px floor. The ::after overlay grows the target without moving the header's typography; 15px of vertical bleed sits inside the 10px row gap plus the row's own leading. */ .dxr-page-use-case-article .dxr-uc-art__term{ position:relative; font:500 10px/1.4 var(--dxr-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dxr-accent-text); transition:color .15s ease; } .dxr-page-use-case-article .dxr-uc-art__term::after{ content:"";position:absolute;inset:-15px -6px; } .dxr-page-use-case-article .dxr-uc-art__term:hover{color:var(--dxr-primary-hover)} .dxr-page-use-case-article .dxr-uc-art__terms-sep{ font:400 10px/1.4 var(--dxr-font-mono); color:var(--dxr-text-disabled); }