.sb-flt {
display: grid; grid-template-columns: auto 1fr;
min-height: 480px;
font-family: 'Cormorant Garamond', 'Georgia', serif;
background: #fbf9f4; color: #1a1a1a;
border-radius: 0; overflow: hidden;
border: 1px solid #1a1a1a;
}
.sb-flt-side {
margin: 22px 0 22px 22px; padding: 22px 18px; width: 220px;
background: #fff;
border: 1px solid #1a1a1a;
display: flex; flex-direction: column; gap: 18px;
align-self: start; position: sticky; top: 22px;
}
.sb-flt-brand { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid #1a1a1a; }
.sb-flt-mark { width: 14px; height: 14px; background: #1a1a1a; flex-shrink: 0; transform: rotate(45deg); }
.sb-flt-brand strong { display: block; font-size: 22px; font-weight: 500; font-style: italic; color: #1a1a1a; line-height: 1; letter-spacing: -0.01em; }
.sb-flt-brand em { display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: 0.22em; color: #6a4d35; margin-top: 4px; text-transform: uppercase; }
.sb-flt-side ol { list-style: none; margin: 0; padding: 0; counter-reset: flt; display: flex; flex-direction: column; gap: 0; }
.sb-flt-side li { counter-increment: flt; }
.sb-flt-side a {
display: grid; grid-template-columns: 32px 1fr;
align-items: baseline; gap: 12px;
padding: 11px 0;
font-size: 16px; color: #1a1a1a; text-decoration: none;
border-bottom: 1px dotted #d4cabc;
transition: padding-left 0.16s, color 0.16s;
}
.sb-flt-side a::before {
content: counter(flt, decimal-leading-zero);
font-family: 'Inter', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: #b8924a;
align-self: center;
}
.sb-flt-side a:hover { padding-left: 4px; color: #6a4d35; }
.sb-flt-side a[aria-current="page"] { font-style: italic; padding-left: 4px; }
.sb-flt-side a[aria-current="page"]::before { color: #1a1a1a; }
.sb-flt-side a[aria-current="page"]::after {
content: '·'; font-family: serif; font-size: 22px; line-height: 0; margin-left: 6px; color: #c45a3e;
}
.sb-flt-side footer { margin-top: auto; padding-top: 12px; border-top: 1px solid #1a1a1a; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.12em; color: #6a4d35; text-align: center; text-transform: uppercase; }
.sb-flt-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.sb-flt-eye { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: #c45a3e; text-transform: uppercase; }
.sb-flt-main h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 500; color: #1a1a1a; letter-spacing: -0.03em; line-height: 0.95; }
.sb-flt-main h2 em { font-style: italic; font-weight: 500; color: #6a4d35; }
.sb-flt-main p { margin: 0; font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 17px; color: #3c2818; line-height: 1.55; max-width: 540px; }
.sb-flt-figure { margin: 12px 0 0; display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.sb-flt-frame { aspect-ratio: 1; background: #f4ede0; border: 1px solid #1a1a1a; position: relative; box-shadow: 8px 8px 0 #1a1a1a; }
.sb-flt-circ { position: absolute; left: 28%; top: 22%; width: 56px; height: 56px; border-radius: 50%; background: #1a1a1a; }
.sb-flt-figure figcaption strong { display: block; font-style: italic; font-size: 18px; font-weight: 500; color: #1a1a1a; }
.sb-flt-figure figcaption span { display: block; font-family: 'Inter', sans-serif; font-size: 11px; color: #6a4d35; letter-spacing: 0.04em; margin-top: 4px; }
@media (max-width: 720px) {
.sb-flt { grid-template-columns: 1fr; }
.sb-flt-side { width: auto; margin: 18px 18px 0; position: static; }
.sb-flt-figure { grid-template-columns: 1fr; }
} <div class="sb-flt">
<aside class="sb-flt-side" aria-label="Primary">
<header class="sb-flt-brand">
<span class="sb-flt-mark" aria-hidden="true"></span>
<div>
<strong>Galerie</strong>
<em>Salon No. 12</em>
</div>
</header>
<nav aria-label="Primary">
<ol>
<li><a href="#!" aria-current="page">Overview</a></li>
<li><a href="#!">Catalogue</a></li>
<li><a href="#!">Artists</a></li>
<li><a href="#!">Acquisitions</a></li>
<li><a href="#!">Visit</a></li>
</ol>
</nav>
<footer>
<span>Open Tue—Sun · 10—18</span>
</footer>
</aside>
<main class="sb-flt-main">
<span class="sb-flt-eye">— Currently exhibiting</span>
<h2><em>Light, &</em><br/>the Quiet Room.</h2>
<p>The sidebar floats inside the canvas with margin on all four sides — light visual weight, lots of negative space, generous serif type. The effect is gallery placard, not control panel.</p>
<figure class="sb-flt-figure">
<div class="sb-flt-frame" aria-hidden="true">
<span class="sb-flt-circ"></span>
</div>
<figcaption>
<strong>Untitled (Cream / Black)</strong>
<span>Iva Ström, 2024 · oil on linen</span>
</figcaption>
</figure>
</main>
</div> Live preview Edit any tab — preview updates live Ready