Files
kaleidoskop/styles/layout.css
T

146 lines
2.4 KiB
CSS
Raw Normal View History

/* ── Image pages ── */
.page--image {
background: var(--color-primary, #1a1a2e);
}
.scene-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder when image not yet available */
.placeholder-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
}
.placeholder-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.9);
text-align: center;
padding: 2rem;
border: 2px dashed rgba(255,255,255,0.4);
border-radius: 12px;
}
.placeholder-story {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.7;
}
.placeholder-scene {
font-size: 1.4rem;
font-weight: 600;
}
/* ── Text pages ── */
.page--text {
background: var(--color-bg, #fafafa);
display: flex;
align-items: center;
}
.text-page-inner {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.scene-ornament {
font-size: 1.5rem;
color: var(--color-secondary, #ccc);
text-align: center;
margin-top: auto;
}
/* ── Front matter pages ── */
.page--title {
background: #1a1a3e;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.page--imprint {
background: #fafafa;
display: flex;
align-items: flex-end;
}
.imprint-content {
width: 100%;
font-size: 0.75rem;
color: #666;
line-height: 1.8;
}
/* ── Table of contents ── */
.page--toc {
background: #fafafa;
display: flex;
flex-direction: column;
gap: 2rem;
}
.toc-list {
list-style: none;
counter-reset: toc;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.toc-list li {
counter-increment: toc;
display: flex;
align-items: baseline;
gap: 0.75rem;
font-size: 1rem;
color: #2a2a4a;
}
.toc-list li::before {
content: counter(toc, decimal-leading-zero);
font-size: 0.8rem;
color: #aaa;
min-width: 2rem;
}
/* ── Finale page ── */
.page--finale {
background: #1a1a2e;
position: relative;
}
.finale-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.finale-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 1in;
color: white;
text-align: center;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}