.sb-psh {
display: grid; grid-template-columns: 0 1fr;
min-height: 480px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #f5e6c8;
color: #2a1a10;
border-radius: 0; overflow: hidden;
transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
border: 2px solid #2a1a10;
}
.sb-psh:has(.sb-psh-cb:checked) { grid-template-columns: 240px 1fr; }
.sb-psh-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-psh:has(.sb-psh-cb:focus-visible) .sb-psh-burger { outline: 2px solid #2a1a10; outline-offset: 2px; }
.sb-psh-side {
background: #e8b04a;
border-right: 2px solid #2a1a10;
padding: 22px 18px; overflow: hidden; min-width: 0;
display: flex; flex-direction: column; gap: 16px;
}
.sb-psh-side header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #2a1a10; white-space: nowrap; }
.sb-psh-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: #1c5e6e; box-shadow: 0 0 0 3px #e8b04a, 0 0 0 5px #2a1a10; }
.sb-psh-side header strong { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #2a1a10; }
.sb-psh-side h3 { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #6b3d1c; white-space: nowrap; }
.sb-psh-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-psh-side a { display: block; padding: 9px 12px; font-size: 14px; font-weight: 600; color: #2a1a10; text-decoration: none; white-space: nowrap; border-radius: 18px; transition: background 0.14s, color 0.14s; }
.sb-psh-side a:hover { background: rgba(42,26,16,0.1); }
.sb-psh-side a[aria-current="page"] { background: #1c5e6e; color: #f5e6c8; }
.sb-psh-quote { margin: auto 0 0; padding: 12px; background: rgba(28,94,110,0.12); border-left: 3px solid #1c5e6e; font-size: 12px; line-height: 1.5; color: #2a1a10; }
.sb-psh-quote em { font-style: italic; color: #1c5e6e; }
.sb-psh-quote span { display: block; font-size: 10.5px; color: #6b3d1c; font-weight: 700; letter-spacing: 0.04em; margin-top: 6px; font-style: normal; }
.sb-psh-main { display: flex; flex-direction: column; background: #4a3122; color: #f5e6c8; }
.sb-psh-bar {
display: flex; align-items: center; gap: 14px;
padding: 14px 22px;
background: #3a2418;
border-bottom: 2px solid #2a1a10;
}
.sb-psh-burger {
width: 38px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: #e8b04a; color: #2a1a10;
border: 2px solid #2a1a10;
border-radius: 4px;
cursor: pointer;
box-shadow: 3px 3px 0 #2a1a10;
transition: transform 0.12s, box-shadow 0.12s;
}
.sb-psh-burger:hover { background: #f0c266; }
.sb-psh-burger:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #2a1a10; }
.sb-psh-burger span { display: inline-flex; flex-direction: column; gap: 3px; }
.sb-psh-burger i { display: block; width: 16px; height: 2px; background: #2a1a10; transition: transform 0.22s, opacity 0.22s; }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(2) { opacity: 0; }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sb-psh-bar strong { font-size: 16px; font-weight: 700; color: #f5e6c8; letter-spacing: -0.01em; }
.sb-psh-pill { margin-left: auto; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #2a1a10; background: #e8b04a; border-radius: 12px; text-transform: uppercase; }
.sb-psh-body { padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.sb-psh-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: #e8b04a; text-transform: uppercase; }
.sb-psh-main h2 { margin: 0; font-size: clamp(36px, 5.5vw, 64px); font-weight: 900; line-height: 0.92; color: #f5e6c8; letter-spacing: -0.03em; }
.sb-psh-main p { margin: 0; font-size: 13.5px; color: rgba(245,230,200,0.85); line-height: 1.65; max-width: 460px; }
.sb-psh-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #e8b04a; background: rgba(232,176,74,0.14); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(232,176,74,0.4); }
.sb-psh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin-top: 6px; }
.sb-psh-card { padding: 16px 16px 14px; background: #5a4a3a; border-left: 4px solid #1c5e6e; display: flex; flex-direction: column; gap: 4px; }
.sb-psh-card-num { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; color: #e8b04a; }
.sb-psh-card strong { font-size: 16px; font-weight: 700; color: #f5e6c8; letter-spacing: -0.01em; }
.sb-psh-card em { font-size: 11.5px; font-style: italic; color: rgba(245,230,200,0.7); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .sb-psh, .sb-psh-burger i { transition: none; } } <div class="sb-psh">
<input id="sb-psh-t" class="sb-psh-cb" type="checkbox" aria-label="Toggle navigation" />
<aside class="sb-psh-side" aria-label="Primary">
<header>
<span class="sb-psh-mark" aria-hidden="true"></span>
<strong>EAMES & CO.</strong>
</header>
<h3>Workspaces</h3>
<nav aria-label="Workspaces">
<ul>
<li><a href="#!" aria-current="page">Engineering</a></li>
<li><a href="#!">Design</a></li>
<li><a href="#!">Product</a></li>
<li><a href="#!">Marketing</a></li>
<li><a href="#!">Operations</a></li>
</ul>
</nav>
<p class="sb-psh-quote"><em>"Details are not the details. They make the design."</em><br/><span>— Charles Eames</span></p>
</aside>
<main class="sb-psh-main">
<header class="sb-psh-bar">
<label class="sb-psh-burger" for="sb-psh-t" aria-controls="sb-psh-side">
<span aria-hidden="true"><i></i><i></i><i></i></span>
<span class="sr-only">Toggle nav</span>
</label>
<strong>Engineering</strong>
<span class="sb-psh-pill">Sprint 47</span>
</header>
<div class="sb-psh-body">
<span class="sb-psh-eye">★ Established 1956</span>
<h2>Form,<br/>function,<br/>flair.</h2>
<p>Toggle the burger — content shifts right rather than being overlaid. Pure CSS on the grid template; works on desktop where both panes should remain visible.</p>
<div class="sb-psh-cards">
<article class="sb-psh-card">
<span class="sb-psh-card-num">01</span>
<strong>Lounge Chair</strong>
<em>Walnut · Tan leather</em>
</article>
<article class="sb-psh-card">
<span class="sb-psh-card-num">02</span>
<strong>Wire Stool</strong>
<em>Powder-coated steel</em>
</article>
</div>
</div>
</main>
</div> Live preview Edit any tab — preview updates live Ready