s that
portfolio.js distributes tiles into by estimated height (rather than CSS
`column-count`, which fragments elements across columns — WebKit has a
long-standing bug where a position:absolute descendant inside a column
fragment (.puzzle-item__parallax below) gets its containing block/clip
resolved wrong once its transform is rewritten by JS on scroll, causing
flicker and images that fail to paint. Real DOM columns have no
fragmentation context, so that bug class can't occur). Below 640px
portfolio.js emits a single column (one full-width image per row). */
.section-grid-puzzle {
display: flex;
align-items: flex-start;
max-width: calc(1100px + 2.5rem);
margin-left: auto;
margin-right: auto;
padding: 0 1.25rem clamp(3rem, 8vw, 6rem);
}
.puzzle-column {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
}
.puzzle-item {
display: block;
margin-bottom: 1.75rem;
}
.puzzle-item__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: var(--img-ratio, 4 / 3);
margin: 0;
overflow: hidden;
/* Own compositing layer for the parallax transform below, for smoother
scroll compositing (not a fragmentation workaround — the puzzle grid no
longer uses CSS columns, so that bug class doesn't apply here). */
transform: translateZ(0);
}
/* Parallax moves this inner layer, not .puzzle-item__media itself, so the
tile's box (and the masonry gap below it) stays put — only the image
content slides within the clipped window (same reasoning as
.section-banner__media). Overscan is a fixed px amount rather than a
percentage: tiles here can be as short as ~150px, and the parallax
offset scales with the tile's distance down the page and its speed, not
with its own height, so a percentage would under-cover short tiles.
Must match parallax.js's OVERSCAN constant, which overwrites this at
runtime — kept small because cover-fit pays for this box's full height in
zoom, and that cost is severe on tiles this short. */
.puzzle-item__parallax {
position: absolute;
top: -24px;
right: 0;
left: 0;
height: calc(100% + 48px);
margin: 0;
will-change: transform;
}
.puzzle-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.puzzle-item__media:hover img {
transform: scale(1.045);
}
.puzzle-item__caption {
position: absolute;
inset: auto 0 0 0;
margin: 0;
padding: 2.5rem 1rem 0.85rem;
background: linear-gradient(to top, rgba(10, 8, 6, 0.78), rgba(10, 8, 6, 0) 85%);
display: flex;
flex-direction: column;
gap: 0.2rem;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s ease, transform 0.35s ease;
pointer-events: none;
}
.puzzle-item__media:hover .puzzle-item__caption,
.puzzle-item__media:focus-within .puzzle-item__caption {
opacity: 1;
transform: translateY(0);
}
.puzzle-item__title {
font-family: var(--font-display);
font-weight: 700;
font-style: normal;
font-size: 1rem;
color: var(--color-cream);
}
@media (min-width: 720px) {
.section-grid-hero {
grid-template-columns: 7fr 5fr;
align-items: end;
gap: 0;
margin-top: -3rem;
padding: 0 3.5rem;
}
.section-grid-hero__text {
padding: 0 0 1.5rem 2rem;
}
.section-grid-hero__caption { font-size: 1.375rem; }
}
@media (min-width: 640px) {
.section-grid-puzzle {
gap: 1.5rem;
padding: 0 3.5rem clamp(4rem, 8vw, 6rem);
}
.puzzle-item {
margin-bottom: 1.5rem;
}
}
.section-grid-hero__media img {
cursor: pointer;
}
/* ==========================================================================
Lightbox (grid image slider)
========================================================================== */
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--color-ink) 95%, transparent);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
padding: 1.25rem;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
}
.lightbox__figure {
margin: 0;
max-width: min(92vw, 1100px);
max-height: 82vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.lightbox__image {
max-width: 100%;
max-height: 82vh;
object-fit: contain;
display: block;
box-shadow: 0 30px 60px color-mix(in srgb, var(--color-black) 50%, transparent);
}
.lightbox__caption {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.08em;
color: var(--color-cream-faint);
text-align: center;
}
.lightbox__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--color-cream);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.lightbox__prev,
.lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-cream);
font-size: 1.5rem;
cursor: pointer;
opacity: 0.75;
transition: opacity 0.2s, border-color 0.2s;
}
.lightbox__prev:hover,
.lightbox__next:hover {
opacity: 1;
border-color: var(--color-border-hover);
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
@media (min-width: 640px) {
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: 1.75rem; }
.lightbox__next { right: 1.75rem; }
}
body.lightbox-open {
overflow: hidden;
}
/* ==========================================================================
Project detail overlay (libri & murales — full-screen in-page detail,
deep-linkable via ?opera=
; see public/js/project-detail.js). Sits under
the inner lightbox (z 200) but above the header. Colors derive from the
semantic palette so it follows whatever /theme.css sets (light or dark); the
backdrop uses --color-black so it stays a dark scrim in any palette.
========================================================================== */
.project-detail {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
padding: clamp(1rem, 4vw, 3rem);
background: color-mix(in srgb, var(--color-black) 72%, transparent);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
}
.project-detail.is-open { opacity: 1; visibility: visible; }
.project-detail__panel {
position: relative;
width: 100%;
max-width: 960px;
margin: auto;
padding: clamp(1.5rem, 4vw, 3rem);
background: var(--color-surface);
color: var(--color-ink);
border: 1px solid var(--color-border);
border-radius: 2px;
box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--color-black) 34%, transparent);
}
.project-detail__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
background: none;
border: none;
color: var(--color-ink);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.project-detail__close:hover { color: var(--color-gold); }
.project-detail__title {
margin: 0 0 0.75rem;
padding-right: 2rem;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--color-ink);
}
/* Libri: cover + meta side by side on desktop, stacked on mobile. */
.project-detail__book {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 2.5rem);
align-items: start;
}
@media (min-width: 640px) {
.project-detail__book { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* The cover keeps its own natural (uncropped) proportions — only the extra
mockup/gallery images below it join the puzzle-style cropped grid. */
.project-detail__cover,
.project-detail__cover .project-detail__image {
margin: 0;
aspect-ratio: auto;
overflow: visible;
}
.project-detail__cover .project-detail__image img {
width: 100%;
height: auto;
object-fit: initial;
display: block;
border-radius: 2px;
box-shadow: 0 20px 40px color-mix(in srgb, var(--color-black) 30%, transparent);
}
.project-detail__author {
margin: 0 0 1rem;
font-family: var(--font-mono);
font-size: 0.9rem;
letter-spacing: 0.02em;
color: var(--color-ink-muted);
}
.project-detail__buy {
display: inline-block;
margin: 0 0 1.25rem;
padding: 0.65rem 1.5rem;
background: var(--color-gold);
color: var(--color-bg);
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: opacity 0.2s;
}
.project-detail__buy:hover { opacity: 0.9; }
.project-detail__synopsis {
margin: 0;
white-space: pre-line;
line-height: 1.7;
color: var(--color-ink);
}
.project-detail__murales-meta {
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.project-detail__dot { opacity: 0.5; }
.project-detail__murales-description {
margin: 0.85rem 0 0;
white-space: pre-line;
line-height: 1.7;
color: var(--color-ink);
}
/* Internal image grid — clickable, opens the inner lightbox. Same real-column
masonry as the dipinti/digitali/disegni puzzle grid (see .section-grid-puzzle
/ .puzzle-column above and portfolio.js distributeIntoColumns): project-detail.js
distributes tiles into real column s, 3 columns on desktop and a single
stacked column on mobile. margin-top is the one gap between the cover
(libri) / head (murales) and the grid, so both layouts read the same. */
.project-detail__images {
display: flex;
align-items: flex-start;
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.project-detail__images:empty { margin-top: 0; }
.project-detail__column {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.project-detail__image {
display: block;
margin: 0;
cursor: pointer;
aspect-ratio: var(--img-ratio, 4 / 3);
overflow: hidden;
border-radius: 2px;
}
.project-detail__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.project-detail-open { overflow: hidden; }
/* Click affordance for the project sections' entry points. */
.book-slide,
.wall-item,
.mural-slide { cursor: pointer; }
.book-slide:focus-visible,
.wall-item:focus-visible,
.mural-slide:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 4px;
}
/* ==========================================================================
Wall Grid (Murales — full-bleed banner stack, replaces .section-grid-puzzle
only for category === 'murales'; see design-handoff/Murales e layout banner)
========================================================================== */
.section-grid-wall {
position: relative;
width: 100vw;
padding-left: 30px;
}
/* Runs the full height of the stack (not just the viewport) — a plain
absolute child of the full-height wall column, not sticky, matching the
hifi prototype exactly. */
.wall-rail {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 14px 0;
background: var(--color-shelf-rail);
}
.wall-rail__label {
writing-mode: vertical-rl;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--color-cream-faint);
}
.wall-item {
display: block;
}
.wall-item__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: var(--img-ratio, 1.4);
overflow: hidden;
transform: translateZ(0);
}
/* Same clipped-layer parallax pattern as .puzzle-item__parallax: the image
is the layer that moves, .wall-item__media is the static clip window, so
the banner's own real proportions (via --img-ratio above) never jump
around under the parallax transform. */
.wall-item__parallax {
position: absolute;
top: -24px;
right: 0;
left: 0;
height: calc(100% + 48px);
margin: 0;
will-change: transform;
}
.wall-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
}
.wall-item__caption {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 8px 16px;
border-bottom: 1px solid var(--color-gold);
}
/* :first-of-type, not :first-child — .wall-rail (a
) is the actual
first child of .section-grid-wall, ahead of every .wall-item (
). */
.wall-item:first-of-type .wall-item__caption {
border-top: 1px solid var(--color-gold);
}
.wall-item__caption-left {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--color-ink-muted);
}
.wall-item__caption-right {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--color-gold);
white-space: nowrap;
}
@media (max-width: 480px) {
.section-grid-wall {
padding-left: 20px;
}
.wall-rail {
width: 20px;
}
.wall-rail__label {
font-size: 8px;
}
}
/* ==========================================================================
Book Shelf (Libri — carousel, replaces .section-grid on that page only)
========================================================================== */
.book-shelf {
padding-bottom: clamp(3rem, 8vw, 5rem);
/* Pulls the whole carousel up over the cream quote section's bottom edge —
the centered book is meant to visually rise into it (see
.book-slide translateY below). The track absorbs the matching top
padding itself rather than this margin, because overflow-x: auto also
forces overflow-y: auto (CSS can't have one axis visible and not the
other), which would otherwise clip that rise. */
margin-top: -6.5rem;
position: relative;
z-index: 2;
}
.book-shelf__viewport {
position: relative;
padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2rem, 6vw, 3rem);
}
.book-track {
display: flex;
overflow-x: auto;
overflow-y: auto;
scroll-snap-type: x mandatory;
gap: clamp(1.5rem, 5vw, 3.5rem);
align-items: center;
padding: 5.5rem clamp(20vw, 32vw, 38vw) 1.5rem;
scrollbar-width: none;
}
.book-track::-webkit-scrollbar {
display: none;
}
.book-slide {
flex: 0 0 auto;
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(calc(var(--lift, 0) * -1px)) scale(var(--scale, 1));
/* Always fully opaque — only scale/lift interpolate with scroll distance. */
opacity: 1;
transition: transform 0.35s ease;
}
/* Height + aspect-ratio live on the cover itself, not the slide: the slide
is a flex column that also holds the caption below, and giving the ratio
to the slide's own box (shared with the caption's variable height) made
the cover's *rendered* box drift away from the image's real ratio by
however much vertical space that book's caption happened to take —
worse the more lines its title wrapped to. object-fit: cover then
quietly cropped the difference on every single cover. Sizing the cover
independently of the caption means it always renders at exactly the
persisted ratio, regardless of caption height. */
.book-cover {
position: relative;
height: min(56vh, 540px);
aspect-ratio: var(--ratio, 0.7);
border-radius: 0px 6px 6px 0px;
box-shadow: inset 0 0 0 1px var(--color-border-hover), 0 25px 55px color-mix(in srgb, var(--color-black) 50%, transparent), 0 4px 12px color-mix(in srgb, var(--color-black) 35%, transparent);
cursor: pointer;
overflow: hidden;
}
.book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Spine overlay: a banded gradient standing in for the bound spine's
rounded cylinder (soft, continuous light falloff — no hard steps, so
it reads as a curved surface rather than flat stripes). The cover's own
inset border (see .book-cover box-shadow) already reads as the crease
where the spine folds into the cover, so no separate joint line is
layered on top of it. */
.book-cover__band {
position: absolute;
inset: 0 auto 0 0;
pointer-events: none;
width: 8%;
max-width:30px;
background: linear-gradient(
to right,
transparent 0%,
transparent 10%,
color-mix(in srgb, var(--color-black) 40%, transparent) 45%, transparent 60%
);
}
/* "Flexible" cover profile (coverType: 'flexible'): the paperback/softcover
variant — same geometry as the rigid default, only lighter shadowing. The
drop-shadow layers and the spine band's gradient are dialed down so the book
reads as a limp, un-embossed cover rather than a hardbound one. Every other
property (blur radii, offsets, stop positions, the inset crease border) is
inherited unchanged from .book-cover / .book-cover__band. Placed after the
base rules so these equal-specificity overrides win. The modifier classes are
added by book-shelf.js when a book's coverType is 'flexible'; rigid books get
no extra class. */
.book-cover--flexible {
box-shadow: inset 0 0 0 1px var(--color-border-hover), 0 25px 55px color-mix(in srgb, var(--color-black) 32%, transparent), 0 4px 12px color-mix(in srgb, var(--color-black) 22%, transparent);
}
.book-cover__band--flexible {
background: linear-gradient(
to right,
transparent 0%,
transparent 10%,
color-mix(in srgb, #999 22%, transparent) 45%, transparent 50%);
}
.book-slide__caption {
text-align: center;
margin: 1.1rem 0 0;
max-width: 22ch;
}
.book-slide__title {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.3;
color: var(--color-ink);
}
.book-shelf__arrow {
position: absolute;
top: 38%;
transform: translateY(-50%);
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--color-border-hover);
background: var(--color-ink-muted);
backdrop-filter: blur(6px);
color: var(--color-cream);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.book-shelf__arrow--prev { left: 1rem; }
.book-shelf__arrow--next { right: 1rem; }
.book-shelf__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.75rem;
}
.book-shelf__dots button {
position: relative;
width: 0.4rem;
height: 0.4rem;
border-radius: 1rem;
border: none;
background: var(--color-border-hover);
cursor: pointer;
padding: 0;
transition: width 0.3s ease, background 0.3s ease;
}
/* The visible dot stays tiny by design, but a 6.4px tap target is nearly
unhittable on a touchscreen — this invisible pseudo-element enlarges the
actual hit area without affecting layout or appearance. Kept small enough
(0.25rem each side) that neighboring dots' hit areas never overlap given
the 0.5rem gap between them. */
.book-shelf__dots button::before {
content: '';
position: absolute;
inset: -0.25rem;
}
.book-shelf__dots button.is-active {
width: 1.5rem;
background: var(--color-gold);
}
@media (max-width: 719px) {
/* Mobile drops the carousel entirely: instead of a horizontal scroll-snap
row the covers stack in normal vertical document flow, one card after
another, and the page scrolls through them like any list. No arrows, no
dots, no scroll-driven scale/lift (the JS listeners are gated off below
via matchMedia). Top padding is trimmed since there's no lift headroom to
reserve anymore. */
.book-track {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
scroll-snap-type: none;
padding: 1.5rem 0;
gap: clamp(2rem, 8vw, 3rem);
}
.book-slide {
flex: 0 0 auto;
width: 100%;
scroll-snap-align: none;
/* No centered-slide concept in a vertical list: every cover renders at
full size, un-lifted, regardless of any stale inline --scale/--lift the
JS may have left before the media query gated it off. */
transform: none;
}
/* Sized by width, not height: the base rule (see .book-cover above) drives
size from height + aspect-ratio, so simply adding max-width would leave
height fixed and force the box out of ratio with the image, and
object-fit: cover would crop to fill the mismatched box. Driving from
width with height: auto keeps the box's ratio equal to the image's own
--ratio at any size, so cover never has anything to crop. calc() caps
the width at what the old height limit would have produced, so books
with a narrower --ratio are unaffected. */
.book-cover {
height: auto;
width: min(90vw, calc(min(46vh, 420px) * var(--ratio, 0.7)));
}
.book-shelf__arrow,
.book-shelf__dots {
display: none;
}
/* The desktop carousel's large negative margin-top exists so the centered,
lifted/scaled slide can rise up into the section-quote banner above it
(see .book-shelf's comment). There's no lift effect in the mobile
vertical stack, so that same pull just drags the first cover up under
the quote text instead — cut it down to a small overlap that matches
the trimmed top padding above. */
.book-shelf {
margin-top: -1.5rem;
}
}
/* ==========================================================================
Mural Shelf (Murales — carousel of asymmetric restoration-stain shapes,
replaces .section-grid-wall on this page only)
========================================================================== */
.mural-shelf {
padding-bottom: clamp(3rem, 8vw, 5rem);
margin-top: -9.5rem;
position: relative;
z-index: 2;
}
.mural-shelf__viewport {
position: relative;
padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(2rem, 6vw, 3rem);
}
.mural-track {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: clamp(2rem, 6vw, 4rem);
align-items: center;
/* Generous top padding: the centered slide scales up and lifts (see
mural-shelf.js's updateEffects) enough to rise into the section-quote
banner above — this is the room it rises through before crossing it. */
padding: 11rem clamp(14vw, 26vw, 32vw) 1.5rem;
scrollbar-width: none;
}
.mural-track::-webkit-scrollbar { display: none; }
.mural-slide {
flex: 0 0 auto;
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(calc(var(--lift, 0) * -1px)) scale(var(--scale, 1));
transition: transform 0.35s ease;
cursor: pointer;
}
.mural-blob {
width: min(70vw, 560px);
height: min(60vh, 560px);
/* The shadow lives here, on a plain box with no clip-path of its own:
clip-path clips filter output too, so putting both on the same element
(as .mural-blob__clip needs the clip-path) would clip the drop-shadow's
ink away right along with the excess box — split across two elements is
the only way to get a shadow that follows the irregular silhouette. */
filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--color-black) 22%, transparent))
drop-shadow(0 3px 8px color-mix(in srgb, var(--color-black) 15%, transparent));
transition: filter 0.35s ease;
}
/* Centered slide: raised above its neighbors (and, via the shelf's negative
margin-top, above the section-quote banner it rises into) with a stronger
shadow to sell the depth. */
.mural-slide.is-active {
z-index: 4;
}
.mural-slide.is-active .mural-blob {
filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--color-black) 28%, transparent))
drop-shadow(0 4px 10px color-mix(in srgb, var(--color-black) 18%, transparent));
}
.mural-blob__clip {
position: relative;
width: 100%;
height: 100%;
/* No whole-shape rotation: only the clip-path silhouette varies per slide,
so the artwork inside always renders upright, never tilted. */
/* clip-path set inline per slide — see mural-shelf.js's makeBlobClipPath */
}
.mural-blob img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mural-blob__vignette {
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 50px color-mix(in srgb, var(--color-veil) 35%, transparent);
}
.mural-slide__caption {
text-align: center;
margin: 1.25rem 0 0;
max-width: 24ch;
}
.mural-slide__title {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.3;
color: var(--color-ink);
}
.mural-slide__location {
display: block;
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-muted);
margin-top: 0.3rem;
}
/* Arrows + dots: same rule bodies as .book-shelf__arrow / .book-shelf__dots. */
.mural-shelf__arrow {
position: absolute;
top: 38%;
transform: translateY(-50%);
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--color-border-hover);
background: var(--color-ink-muted);
backdrop-filter: blur(6px);
color: var(--color-cream);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.mural-shelf__arrow--prev { left: 1rem; }
.mural-shelf__arrow--next { right: 1rem; }
.mural-shelf__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1.75rem;
}
.mural-shelf__dots button {
position: relative;
width: 0.4rem;
height: 0.4rem;
border-radius: 1rem;
border: none;
background: var(--color-border-hover);
cursor: pointer;
padding: 0;
transition: width 0.3s ease, background 0.3s ease;
}
.mural-shelf__dots button::before {
content: '';
position: absolute;
inset: -0.25rem;
}
.mural-shelf__dots button.is-active {
width: 1.5rem;
background: var(--color-gold);
}
@media (max-width: 719px) {
/* Mobile drops the carousel entirely: the stain shapes stack in normal
vertical document flow, one after another, and the page scrolls through
them like any list. No arrows, no dots, no scroll-driven scale/lift (the
JS listeners are gated off below via matchMedia). */
.mural-track {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
scroll-snap-type: none;
padding: 1.5rem 0;
gap: clamp(1.5rem, 6vw, 2.5rem);
}
.mural-slide {
flex: 0 0 auto;
width: 100%;
scroll-snap-align: none;
/* No centered-slide concept in a vertical list: every blob renders at full
size, un-lifted, regardless of any stale inline --scale/--lift left by
the JS before the media query gated it off. */
transform: none;
}
.mural-blob {
width: min(84vw, 400px);
height: min(48vh, 440px);
}
.mural-shelf__arrow,
.mural-shelf__dots {
display: none;
}
/* Same reasoning as .book-shelf's mobile override: the desktop negative
margin-top exists to let the centered, lifted/scaled slide rise into the
section-quote banner — with no lift effect in the mobile vertical stack
it just overlaps the quote text instead. */
.mural-shelf {
margin-top: -1.5rem;
}
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
/* DEFAULT = CHIARO. Nella maggior parte delle pagine (dipinti/digitali/
disegni/libri/murales/privacy) il footer arriva subito dopo una zona
CHIARA (section-content, book-shelf, mural-shelf, legal-page — tutte
trasparenti sul campo chiaro globale). Lì il footer deve restare chiaro e
continuare quel campo, senza una banda scura che spezzi lo spotlight: è
quindi trasparente (lascia trasparire body::before) e usa testo scuro.
La variante scura (.site-footer--dark, solo home) è definita più sotto. */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem 1.5rem;
padding: 1.75rem 1.25rem;
position: relative;
background: transparent;
border-top: 1px solid var(--color-border);
font-size: 0.75rem;
color: var(--color-ink-muted);
}
/* Variante SCURA — solo la home, dove il footer segue la .contacts-section
scura: ne è la continuazione. Stessa base #1a1613 e stesso tepore
desaturato; il bordo superiore resta base pura (macchia centrata in basso),
così combacia col bordo inferiore dei contatti — un'unica area scura. */
.site-footer--dark {
background:
radial-gradient(150% 150% at 20% 85%,
color-mix(in srgb, var(--spot-warm) 38%, transparent) 0%,
transparent 62%),
#1a1613;
border-top: 1px solid color-mix(in srgb, var(--color-cream) 10%, transparent);
color: var(--color-cream-faint);
}
@media (min-width: 640px) {
.site-footer { padding: 2rem 3.5rem; }
}
.footer-admin-link {
color: var(--color-ink-muted);
transition: color 0.25s;
}
.footer-admin-link:hover { color: var(--color-ink); }
.site-footer--dark .footer-admin-link { color: var(--color-cream-faint); }
.site-footer--dark .footer-admin-link:hover { color: var(--color-cream); }
.footer-contacts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
order: 3;
width: 100%;
}
@media (min-width: 640px) {
.footer-contacts { order: 2; width: auto; }
}
.footer-contacts__link[hidden] {
display: none;
}
.footer-contacts__link {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-ink-muted);
transition: color 0.25s;
}
.footer-contacts__link:hover,
.footer-contacts__link:focus-visible { color: var(--color-gold); }
.site-footer--dark .footer-contacts__link { color: var(--color-cream-faint); }
.footer-contacts__link svg {
width: 1.2rem;
height: 1.2rem;
display: block;
}
/* ==========================================================================
Admin (preserved & enhanced)
========================================================================== */
.admin-page .site-header,
.admin-page .grain-overlay { display: none; }
.admin-page {
/* Il pannello admin è disegnato per testo cream su superfici scure. Il tema
pubblico ora è chiaro (:root e /theme.css servono valori chiari), quindi qui
ripristiniamo localmente la palette scura originale — l'admin resta identico
a prima. Il tab "Palette colori" mostra comunque i valori (chiari) del tema
salvato: sono dati letti dal server, non influenzati da questo scope. */
--color-bg: #1a1613;
--color-surface: #221d18;
--color-ink: #f2ede4;
--color-ink-muted: rgba(242, 237, 228, 0.6);
--color-border: rgba(242, 237, 228, 0.08);
--color-border-hover: rgba(242, 237, 228, 0.18);
padding-top: 0;
/* Glass / liquid-glass design tokens — scoped to the admin panel only. */
--glass-bg: color-mix(in srgb, var(--color-surface) 62%, transparent);
--glass-bg-strong: color-mix(in srgb, var(--color-surface) 82%, transparent);
--glass-border: rgba(242, 237, 228, 0.14);
--glass-highlight: rgba(242, 237, 228, 0.06); /* inner top light edge */
--glass-blur: 18px;
--glass-radius: 16px;
--glass-radius-sm: 10px;
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.36);
/* Soft warm mesh behind the glass surfaces. background-attachment: fixed so
the blur has something to pick up while scrolling. */
background:
radial-gradient(60rem 60rem at 12% -10%, color-mix(in srgb, var(--color-gold) 10%, transparent), transparent 60%),
radial-gradient(50rem 50rem at 110% 20%, color-mix(in srgb, var(--color-gold) 7%, transparent), transparent 55%),
radial-gradient(70rem 70rem at 50% 120%, rgba(60, 45, 30, 0.5), transparent 60%),
var(--color-bg);
background-attachment: fixed;
}
.admin-page .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem 1rem;
padding: 1.25rem 2rem;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--glass-border);
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.admin-page .header h1 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
}
.header-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
gap: 0.5rem 1.25rem;
}
.header-actions .secondary {
width: auto;
margin-top: 0;
}
.admin-link {
color: var(--color-cream-muted);
text-decoration: none;
font-size: 0.9rem;
}
.admin-link:hover { color: var(--color-gold); }
.admin-main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
overflow: hidden;
}
.project-card img,
.admin-project-card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.project-card .info,
.admin-project-card .info { padding: 1rem; }
.project-card h3,
.admin-project-card h3 {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
}
.project-card p,
.admin-project-card p {
margin: 0;
color: var(--color-cream-muted);
font-size: 0.9rem;
}
.project-card .category-badge,
.admin-project-card .category-badge {
display: inline-block;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 0.35rem;
}
.admin-project-card .featured-badge {
margin-left: 0.5rem;
color: var(--color-cream);
background: var(--color-gold);
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.admin-main .card { padding: 1.5rem; margin-bottom: 1rem; }
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.admin-toolbar h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.admin-toolbar-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.admin-toolbar-actions button { width: auto; margin-top: 0; }
.admin-projects { margin-bottom: 1.5rem; }
.admin-project-card .info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.25rem;
}
.card-actions .order-btn,
.delete-btn, .edit-btn, .feature-btn {
/* min-width 6rem so labels never overflow the ~280px card: when they don't
fit side by side they wrap onto the next line instead of spilling out. */
flex: 1 1 6rem;
min-width: 0;
width: auto;
align-self: stretch;
background: var(--glass-bg);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-weight: 500;
padding: 0.5rem 0.5rem;
border-radius: var(--glass-radius-sm);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.8rem;
text-align: center;
line-height: 1.2;
white-space: nowrap;
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.card-actions .order-btn {
flex: 0 0 2.75rem;
}
.delete-btn {
color: var(--color-danger);
border: 1px solid #7f1d1d;
}
.delete-btn:hover { background: #450a0a; }
.edit-btn {
color: var(--color-info);
border: 1px solid #1e3a8a;
}
.edit-btn:hover { background: #1e3a5f; }
.feature-btn {
color: var(--color-gold);
border: 1px solid var(--color-gold);
}
.feature-btn:hover { background: rgba(212, 175, 55, 0.15); }
.modal-overlay {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: color-mix(in srgb, var(--color-black) 60%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow-y: auto;
}
.modal {
/* Rich edit modals go nearly full-screen; small modals opt back down with
.modal--sm. Strong glass surface so the blurred overlay reads behind it. */
width: min(1100px, 94vw);
max-width: none;
max-height: 92vh;
overflow-y: auto;
margin: auto;
background: var(--glass-bg-strong);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--glass-radius);
box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}
.modal--sm { width: min(480px, 94vw); }
.admin-upload-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.admin-upload-header h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.admin-upload-header button { width: auto; margin-top: 0; }
.edit-image-wrap {
position: relative;
margin-bottom: 1.25rem;
cursor: pointer;
}
.edit-image-preview {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
border-radius: 2px;
border: 1px solid var(--color-border);
transition: opacity 0.15s ease;
}
.edit-image-wrap:hover .edit-image-preview { opacity: 0.75; }
.edit-image-hint {
display: block;
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--color-cream-muted);
text-align: center;
}
.crop-modal {
width: min(1200px, 96vw);
height: min(900px, 94vh);
max-height: 94vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Edit modals (Modifica progetto / Modifica sezione): preview left, form right
on wide viewports; single stacked column below ~860px available width. */
.edit-modal-body {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 1.75rem;
align-items: start;
}
.edit-modal-media { min-width: 0; }
.edit-modal-media .edit-image-wrap { margin-bottom: 0.75rem; }
.edit-modal-media .edit-image-preview { aspect-ratio: 3/4; }
@media (max-width: 860px) {
.edit-modal-body { grid-template-columns: 1fr; gap: 1.25rem; }
.edit-modal-media .edit-image-preview { aspect-ratio: 4/3; }
}
/* "Chi sono" tab: profile photo left (capped width — it's a portrait
headshot, not a banner, so it shouldn't stretch to the card's full
width), text fields right. Single column below ~640px. */
.about-editor {
display: grid;
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: 1.75rem;
align-items: start;
}
.about-editor-media { min-width: 0; }
.about-editor-media .edit-image-wrap { max-width: 260px; margin: 0 auto 0.75rem; }
.about-editor-media .edit-image-preview { aspect-ratio: 3/4; }
@media (max-width: 640px) {
.about-editor { grid-template-columns: 1fr; gap: 1.25rem; }
.about-editor-media .edit-image-wrap { max-width: 320px; }
}
.crop-variant-toggle {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
flex: 0 0 auto;
}
.crop-variant-toggle.hidden { display: none; }
.crop-variant-btn {
width: auto;
margin-top: 0;
background: var(--glass-bg);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid var(--glass-border);
border-radius: var(--glass-radius-sm);
color: var(--color-cream-muted);
cursor: pointer;
padding: 0.4rem 0.9rem;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.crop-variant-btn:hover { color: var(--color-cream); border-color: var(--color-border-hover); }
.crop-variant-btn.is-active {
color: var(--color-bg);
background: var(--color-gold);
border-color: var(--color-gold);
}
.crop-stage {
display: flex;
justify-content: center;
align-items: center;
background: var(--color-black);
border-radius: 2px;
padding: 0.5rem;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.crop-image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
max-height: 100%;
line-height: 0;
}
.crop-image-wrap img {
display: block;
max-width: 100%;
max-height: calc(min(900px, 94vh) - 12rem);
user-select: none;
-webkit-user-drag: none;
}
.crop-box {
position: absolute;
border: 2px solid var(--color-gold);
box-shadow: 0 0 0 9999px color-mix(in srgb, var(--color-black) 55%, transparent);
cursor: move;
touch-action: none;
}
.crop-handle {
position: absolute;
width: 14px;
height: 14px;
background: var(--color-gold);
border-radius: 50%;
touch-action: none;
}
.crop-handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.crop-handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.crop-handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.crop-handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.crop-actions {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
flex: 0 0 auto;
}
.crop-actions button { width: auto; margin-top: 0; }
form label {
display: block;
margin-bottom: 1rem;
font-size: 0.9rem;
color: var(--color-cream-muted);
}
form label.field-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
}
form label.field-checkbox input[type="checkbox"] {
display: inline-block;
width: auto;
margin-top: 0;
}
input, textarea, select, button {
display: block;
width: 100%;
margin-top: 0.35rem;
padding: 0.6rem 0.75rem;
border-radius: 2px;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-cream);
font: inherit;
/* Every admin form field is wrapped in a