body {
background: linear-gradient(120deg, rgba(35, 116, 171, 0.08), transparent 30%), linear-gradient(240deg, rgba(236, 91, 26, 0.12), transparent 36%), #fbf6ed;
}
.stylebook-header {
backdrop-filter: blur(14px);
background: rgba(251, 246, 237, 0.9);
border-bottom: 1px solid rgba(16, 24, 39, 0.1);
}
.stylebook-nav {
min-height: 76px;
}
.stylebook-brand {
align-items: center;
color: #101827;
display: inline-flex;
font-family: "Fraunces", Georgia, serif;
font-size: 2rem;
gap: 0.75rem;
line-height: 1;
}
.stylebook-brand img {
height: 2.5rem;
width: 2.5rem;
}
.stylebook-section {
border-top: 1px solid rgba(16, 24, 39, 0.1);
}
.stylebook-section-title {
color: #101827;
font-family: "Fraunces", Georgia, serif;
font-size: 3.5rem;
letter-spacing: 0;
line-height: 1.06;
}
.stylebook-panel {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(16, 24, 39, 0.08);
border-radius: 1rem;
box-shadow: 0 12px 36px rgba(16, 24, 39, 0.09);
padding: clamp(1.25rem, 3vw, 2rem);
}
.stylebook-rule {
background: #ec5b1a;
border-radius: 999px;
height: 0.25rem;
width: 2.75rem;
}
.stylebook-swatch {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(16, 24, 39, 0.08);
border-radius: 0.75rem;
box-shadow: 0 12px 36px rgba(16, 24, 39, 0.09);
min-height: 8rem;
overflow: hidden;
}
.stylebook-swatch-color {
min-height: 4.5rem;
}
.stylebook-swatch-body {
background: rgba(255, 255, 255, 0.78);
padding: 0.75rem;
}
.stylebook-swatch-ink {
background: #101827;
}
.stylebook-swatch-ember {
background: #ec5b1a;
}
.stylebook-swatch-saffron {
background: #f59e0b;
}
.stylebook-swatch-paper {
background: #f7ead9;
}
.stylebook-swatch-moss {
background: #557c45;
}
.stylebook-swatch-ocean {
background: #2374ab;
}
.stylebook-swatch-violet {
background: #8b5cf6;
}
.stylebook-swatch-danger {
background: #b83232;
}
.stylebook-token-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.stylebook-token {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(16, 24, 39, 0.08);
border-radius: 0.5rem;
box-shadow: none;
display: grid;
gap: 0.5rem;
min-height: 5rem;
padding: 0.75rem;
}
.stylebook-token span {
color: #5d6875;
font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
font-size: 0.75rem;
}
.stylebook-radius-sample {
background: rgba(236, 91, 26, 0.1);
border: 1px solid rgba(16, 24, 39, 0.1);
height: 3rem;
}
.stylebook-shadow-sample {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(16, 24, 39, 0.08);
border-radius: 0.5rem;
box-shadow: 0 12px 36px rgba(16, 24, 39, 0.09);
height: 3rem;
}
.stylebook-shadow-sample.is-raised {
box-shadow: 0 18px 48px rgba(16, 24, 39, 0.06);
}
.stylebook-shadow-sample.is-lift {
box-shadow: 0 24px 70px rgba(16, 24, 39, 0.14);
}
.stylebook-hero-sample {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(16, 24, 39, 0.08);
border-radius: 1rem;
box-shadow: 0 24px 70px rgba(16, 24, 39, 0.14);
background: radial-gradient(circle at 80% 20%, rgba(236, 91, 26, 0.18), transparent 28%), rgba(255, 255, 255, 0.7);
overflow: hidden;
padding: clamp(1.5rem, 4vw, 3rem);
}
.stylebook-doc-sample {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(16, 24, 39, 0.08);
border-radius: 0.75rem;
box-shadow: 0 12px 36px rgba(16, 24, 39, 0.09);
padding: 1.5rem;
}
.stylebook-doc-sample h3 {
color: #101827;
font-family: "Fraunces", Georgia, serif;
}
.stylebook-doc-sample code {
color: #ec5b1a;
}
.stylebook-console-intro {
align-items: end;
display: grid;
gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
margin-bottom: 2rem;
}
.stylebook-console-canvas {
max-width: 112rem;
}
@media (max-width: 768px) {
.stylebook-console-intro {
align-items: stretch;
grid-template-columns: 1fr;
}
}