/* * Platform drawer primitive (§2.5.2.3, §2.5.4). * * Owns: scrim mechanics, slotted layout (header / body / footer), * footer bottom-anchoring, animation timing tokens, stacking * context, surface width. * * Does NOT own: which items render in the drawer, active-state * detection, brand theming. Those are product responsibilities. * * Brief: HumanCapital/docs/briefs/platform-drawer-1F-004.md * Decision: HumanCapital@fbce36a (drawer-platform-extraction.md) * Backlog: closure-backlog #56 (precedent — platform-shell) * * Authored by JS contract — the .is-open modifier on the shell * element is added/removed by platform-drawer.js in response to * data-attribute hooks (data-platform-drawer-toggle / * -close / -target). CSS does not own state; it owns appearance. */ :root { --platform-drawer-transition-duration: 220ms; --platform-drawer-easing: ease-out; --platform-drawer-scrim-color: rgba(0, 0, 0, 0.55); --platform-drawer-surface-color: #ffffff; --platform-drawer-surface-width: 85vw; --platform-drawer-surface-max-width: 360px; --platform-drawer-z-scrim: 1040; --platform-drawer-z-surface: 1050; } /* Shell — full-viewport overlay container. Hidden by default; click-through disabled only while .is-open. */ .platform-drawer-shell { position: fixed; inset: 0; pointer-events: none; z-index: var(--platform-drawer-z-scrim); } .platform-drawer-shell.is-open { pointer-events: auto; } /* Scrim — the visible backdrop. Fades in with the drawer. Click-to-close is bound by JS via [data-platform-drawer-close]. */ .platform-drawer-scrim { position: absolute; inset: 0; background: var(--platform-drawer-scrim-color); opacity: 0; transition: opacity var(--platform-drawer-transition-duration) var(--platform-drawer-easing); z-index: var(--platform-drawer-z-scrim); } .platform-drawer-shell.is-open .platform-drawer-scrim { opacity: 1; } /* Surface — the off-canvas panel. Slides in from the right. Slotted layout via flexbox: header top, body grows + scrolls, footer anchored bottom via margin-top:auto. */ .platform-drawer-surface { position: absolute; top: 0; right: 0; height: 100%; width: var(--platform-drawer-surface-width); max-width: var(--platform-drawer-surface-max-width); background: var(--platform-drawer-surface-color); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform var(--platform-drawer-transition-duration) var(--platform-drawer-easing); z-index: var(--platform-drawer-z-surface); display: flex; flex-direction: column; outline: none; } .platform-drawer-shell.is-open .platform-drawer-surface { transform: translateX(0); } /* Header slot — fixed top, does not scroll. */ .platform-drawer-header { flex: 0 0 auto; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: space-between; } /* Body slot — fills remaining space, scrolls when content overflows. */ .platform-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 1.25rem; -webkit-overflow-scrolling: touch; } /* Footer slot — anchored to bottom regardless of body length (margin-top:auto pushes it down when body content is short). */ .platform-drawer-footer { flex: 0 0 auto; margin-top: auto; padding: 0.75rem 1.25rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* When the drawer is open, lock body scroll so the page does not move underneath the surface. JS adds/removes the modifier on . */ body.platform-drawer-open { overflow: hidden; } /* Above 768px the drawer is structurally available but consumers are expected to keep their primary navigation as a horizontal bar. JS auto-closes on resize past this breakpoint; the rule below is belt-and-braces (defends against the JS not running). */ @media (min-width: 768px) { .platform-drawer-shell { display: none; } }