/* ===================================================================== CRIMINAL DEFENSE — DESKTOP (v234) v234: asset sections rendered as CONTENT PANELS (no sticky pin, no 100vh floor, no overflow clip) so each approved composition is fully visible top-to-bottom. See .cd-asset-host rule below. --------------------------------------------------------------------- CRIMINAL DEFENSE — DESKTOP (v233) The approved compositions displayed directly INSIDE the existing reveal-card system, mirroring the About-page desktop pattern (v229). Each reveal moment keeps its card wrapper, dark/paper chrome, box-shadow seam, and data-reveal motion; only the CONTENT is swapped to the approved asset. Live text stays in the DOM (clipped) for SEO / screen readers. Flow (8 sections): Hero -> Principle -> Allegations -> Procedural -> Attempted Murder -> Phoenix Marijuana DUI -> Closing Bridge -> CTA. Transition #1 (Hero -> Principle) and #2 (Procedural -> Attempted Murder): the EXISTING reveal-card stacking motion, untouched. Transition #3 (Phoenix DUI -> Closing Bridge): custom stronger fade-up (opacity 0->1, translateY 24px->0, 800ms ease-out, one-time). Tablet (641-1024) and mobile (<=640) are UNTOUCHED — every rule here lives behind @media (min-width:1025px) or hides the desktop layer. ===================================================================== */ .page-cd .cd-asset__img { display: none; } .page-cd .cd-asset-hotspot { display: none; } @media (min-width: 641px) { /* the approved asset is the revealed content (data-reveal fades it up, except the hero + the bridge, which are handled below) */ .page-cd .cd-asset__img { display: block; width: 100%; height: auto; margin: 0 auto; } /* clip every other child of an asset host: collapses the live layout and the mobile/desktop photos while keeping live text in the DOM for SEO / a11y */ .page-cd .cd-asset-host > :not(.cd-asset__img):not(.cd-asset-hotspot) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } /* CD asset sections are CONTENT PANELS, not viewport-height slides. The inherited reveal-card system pins each card (position:sticky; top:0; min-height:100vh) and lets the next card slide OVER it — which covers the lower portion of any asset taller than the viewport (Allegations is 2144px, Procedural 1180px). It also carries overflow:hidden (.reveal-card--dark). Here we neutralize all of that so the ASSET's own height sets the section height and nothing is ever cropped. The data-reveal fade-ups + box-shadow seams (the reveal motion) are properties of content/shadow, not of the pin, so they are unaffected — only the pin / 100vh floor / overflow clip are removed. */ .page-cd .cd-asset-host { position: relative !important; top: auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: visible !important; display: block; } /* remove the dark top-fade veil (::before) AND the case-study legibility scrim (::after) so neither darkens the approved asset. The reveal-card seam is a box-shadow (a property, not a pseudo-element), so it survives. */ .page-cd .cd-asset-host::before, .page-cd .cd-asset-host::after { display: none !important; } /* ----- HERO (asset 1) ------------------------------------------------- Not a reveal-card: show directly, neutralize the parallax scale that page-hero.js applies to the first , and collapse the 100vh sticky frame to the asset's natural height. */ .page-cd #hero, .page-cd #hero .page-hero__sticky { min-height: 0; height: auto; padding: 0; position: static; } .page-cd #hero .cd-asset__img { opacity: 1 !important; transform: none !important; } /* ----- ALLEGATIONS continuation (#categories-2) ----------------------- Asset 3 already shows all six categories (incl. DUI + Firearms), so the live continuation card collapses on desktop. Its live text (DUI + Firearms labels, copy, practice links) stays clipped in the DOM for SEO. No asset, no seam. */ .page-cd #categories-2 { box-shadow: none; } /* ----- CLOSING BRIDGE (asset 7) — TRANSITION #3 ----------------------- Stronger one-time fade-up. The asset carries NO data-reveal (so the standard 18px reveal does not also apply); .is-visible is added once by the page-hero.js observer, then unobserved (no replay). No scale, no zoom, no blur, no image movement — only translateY + opacity. */ .page-cd #cd-closing-bridge .cd-asset__img { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease-out, transform 800ms ease-out; will-change: opacity, transform; } .page-cd #cd-closing-bridge.is-visible .cd-asset__img { opacity: 1; transform: none; } /* transparent hotspots over the two navigation assets + the CTA. Coordinates are set inline (left/top/width/height %) per . */ .page-cd .cd-asset-hotspot { display: block; position: absolute; z-index: 3; } /* ----- PROCEDURAL retired on desktop/tablet (v253) -------------------- The combined services asset in #categories (cd-services-dt-v253.jpg) now bakes in the "Not every case starts in the same place" cards, and their 4 hotspots were moved onto that asset. So #procedural collapses here exactly the way #categories-2 was retired: its standalone desktop asset (cd-procedural-dt-v233.jpg) is hidden, its now-orphaned hotspots are disabled, and the seam shadow is removed. The .cd-asset-host rule above already zeroes min-height/height and the generic clip rule keeps the live procedural text in the DOM for SEO/a11y. Mobile (<=640) is untouched — it still renders the baked paper composition via the