/* Senza chiedere scusa — site styles */
/* cormorant-garamond-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
src: url('assets/fonts/cormorant-garamond/cormorant-garamond-v21-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 300;
src: url('assets/fonts/inter/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: italic;
font-weight: 300;
src: url('assets/fonts/inter/inter-v20-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('assets/fonts/inter/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('assets/fonts/inter/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('assets/fonts/inter/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
--bg: #0a0a0c;
--bg-warm: #12110d;
--bg-cool: #0b0d12;
--panel: #131317;
--line: #1e1c1a;
--line-2: #2a2824;
--ink: #ebe6d9;
--ink-dim: #a29a8b;
--ink-mute: #6b6558;
--amber: #e7a24a;
--amber-soft: #f0c27b;
--amber-deep: #b9771f;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
font-weight: 400;
font-size: 18px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.mono, .ui, nav, button, .tag, .meta, .kicker, .nav a, .counter {
font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.serif { font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif; }
h1, h2, h3 { font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif; font-weight: 400; margin: 0; letter-spacing: -0.01em; }
/* ===== Mineral textured surface ===== */
.stone {
position: relative;
background:
radial-gradient(1200px 800px at 70% 30%, rgba(231,162,74,0.05), transparent 55%),
radial-gradient(900px 700px at 20% 80%, rgba(70,90,120,0.06), transparent 60%),
linear-gradient(180deg, #0a0a0c 0%, #0c0b0a 100%);
}
.stone::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(255,240,210,0.04), transparent 50%),
radial-gradient(1px 1px at 70% 60%, rgba(255,240,210,0.035), transparent 50%),
radial-gradient(1px 1px at 40% 80%, rgba(255,240,210,0.03), transparent 50%),
radial-gradient(1px 1px at 85% 15%, rgba(255,240,210,0.04), transparent 50%);
background-size: 300px 300px, 220px 220px, 180px 180px, 260px 260px;
opacity: 0.9;
pointer-events: none;
mix-blend-mode: screen;
}
.grain::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.35;
pointer-events: none;
mix-blend-mode: overlay;
}
/* ===== Layout ===== */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; position: relative; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); }
/* ===== UI utilities ===== */
.kicker {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
}
.meta {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-dim);
font-weight: 400;
}
.btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 16px 26px;
border: 1px solid var(--line-2);
background: transparent;
color: var(--ink);
font-family: "Inter", sans-serif;
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
cursor: pointer;
transition: all 300ms ease;
text-decoration: none;
}
.btn:hover { border-color: var(--amber); color: var(--amber-soft); }
.btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.btn-primary {
background: linear-gradient(180deg, rgba(231,162,74,0.12), rgba(231,162,74,0.04));
border-color: rgba(231,162,74,0.35);
color: var(--amber-soft);
}
.btn-primary:hover { border-color: var(--amber); color: #fff; background: linear-gradient(180deg, rgba(231,162,74,0.22), rgba(231,162,74,0.08)); }
/* ===== Nav: italic wordmark top-right, ghost dots on the rail ===== */
.topmark {
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
padding: 28px 36px;
display: flex; align-items: center; justify-content: flex-end;
pointer-events: none;
}
.topmark > * { pointer-events: auto; }
.topmark-index {
background: none; border: 0; cursor: pointer; padding: 6px 0;
opacity: 0.45;
transition: opacity 300ms;
}
.topmark-index:hover { opacity: 0.9; }
.topmark-label {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 300;
font-size: 13px;
letter-spacing: 0.04em;
color: #c8c2b6;
border-bottom: 1px solid rgba(200, 194, 182, 0.22);
padding-bottom: 2px;
}
.topmark-index:hover .topmark-label { color: var(--amber-soft); border-bottom-color: rgba(212,164,110,0.45); }
.siderail {
position: fixed; left: 30px; top: 50%; transform: translateY(-50%);
z-index: 30;
opacity: 0.7;
}
.siderail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.siderail a {
display: block;
width: 8px; height: 1.5px;
background: var(--ink-mute);
opacity: 0.6;
position: relative;
transition: width 280ms, opacity 280ms, background 280ms;
}
.siderail a.active { background: var(--amber-soft); width: 18px; opacity: 1; }
.siderail a:hover { width: 18px; opacity: 0.95; }
.siderail a::after {
content: attr(data-label);
position: absolute;
left: 24px; top: -8px;
white-space: nowrap;
opacity: 0;
transform: translateX(-4px);
transition: opacity 280ms, transform 280ms, color 280ms;
color: var(--ink-mute);
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0.01em;
pointer-events: none;
}
.siderail:hover a::after,
.siderail a.active::after { opacity: 0.85; transform: translateX(0); }
.siderail a.active::after { color: var(--amber-soft); opacity: 1; }
.sheet {
position: fixed; inset: 0; z-index: 50;
background: rgba(6,6,8,0.97);
backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center;
animation: fade 400ms ease;
}
.sheet[hidden] { display: none; }
.sheet-close {
position: absolute; top: 32px; right: 40px;
background: none; border: 0; color: var(--ink-dim); cursor: pointer;
font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.sheet-close:hover { color: var(--amber-soft); }
.sheet-nav { display: flex; flex-direction: column; gap: 18px; text-align: left; }
.sheet-nav a {
font-family: "Cormorant Garamond", serif;
font-size: clamp(36px, 5vw, 58px);
color: var(--ink); text-decoration: none;
line-height: 1; font-weight: 400;
display: flex; align-items: baseline; gap: 28px;
transition: color 120ms;
white-space: nowrap;
max-width: 100%;
position: relative;
}
.sheet-nav a em { font-family: "Inter", sans-serif; font-style: normal; font-size: 11px; letter-spacing: 0.28em; color: var(--ink-mute); width: 36px; transition: color 120ms; }
/* Stack: due versioni del testo (normale + italic) sovrapposte nella stessa cella.
La larghezza della cella è il max delle due — zero layout shift su hover. */
.sheet-nav a .lbl { display: inline-grid; }
.sheet-nav a .lbl > span { grid-area: 1 / 1; transition: opacity 120ms ease; }
.sheet-nav a .lbl > span:first-child { opacity: 1; }
.sheet-nav a .lbl > span:last-child {
font-style: italic;
color: var(--amber-soft);
opacity: 0;
}
.sheet-nav a:hover em { color: var(--amber); }
.sheet-nav a:hover .lbl > span:first-child { opacity: 0; }
.sheet-nav a:hover .lbl > span:last-child { opacity: 1; }
/* ===== Hero — literary, single composition ===== */
.hero {
min-height: 100vh;
position: relative;
display: flex; flex-direction: column;
padding: 0;
}
.hero-crack {
position: absolute;
/* Ancorata al centro + offset fisso → non si sposta al variare del viewport */
left: calc(50% + 180px); top: 0; bottom: 0;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(231,162,74,0.08) 10%,
rgba(231,162,74,0.4) 38%,
rgba(255,220,170,0.7) 52%,
rgba(231,162,74,0.35) 72%,
rgba(231,162,74,0.06) 92%,
transparent 100%);
box-shadow: 0 0 24px rgba(231,162,74,0.22);
pointer-events: none;
}
.hero-inner {
flex: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: 60px;
padding: 160px 120px 120px 140px;
position: relative;
z-index: 2;
}
.hero-left { position: relative; max-width: 640px; }
.hero-author {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 17px;
color: var(--ink-dim);
margin-bottom: 48px;
letter-spacing: 0.005em;
}
.hero-author::before {
content: "";
display: inline-block;
width: 18px; height: 1px;
background: var(--ink-mute);
vertical-align: middle;
margin-right: 14px;
opacity: 0.7;
}
.hero-title {
font-family: "Cormorant Garamond", serif;
font-weight: 400;
line-height: 0.94;
letter-spacing: -0.025em;
display: flex; flex-direction: column;
margin: 0;
font-size: clamp(60px, 8vw, 124px);
}
.hero-title span { display: block; }
.hero-title span:nth-child(2) { padding-left: 0.55em; color: var(--ink-dim); }
.hero-title span:nth-child(3) { padding-left: 1.1em; }
.hero-title span:nth-child(3) em { font-style: italic; font-weight: 300; color: var(--amber-soft); }
.hero-quote {
margin: 52px 0 0;
padding-left: 1.1em;
font-family: "Cormorant Garamond", serif;
font-size: clamp(19px, 1.5vw, 23px);
line-height: 1.4;
color: var(--ink-dim);
max-width: 360px;
font-weight: 300;
}
.hero-quote em {
font-style: italic;
color: var(--ink);
position: relative;
display: block;
}
.hero-quote em::before {
content: "";
position: absolute;
left: -18px; top: 0.5em;
width: 8px; height: 1px;
background: var(--amber);
opacity: 0.7;
}
.hero-places {
margin-top: 44px;
padding-left: 1.1em;
font-family: "Inter", sans-serif;
font-size: 10px;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--ink-mute);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
clear: both;
}
.hero-places .dot {
display: inline-block;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--ink-mute);
opacity: 0.6;
}
.hero-links {
margin-top: 56px;
padding-left: 1.1em;
display: flex;
align-items: baseline;
gap: 20px;
flex-wrap: wrap;
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 17px;
}
.edlink {
color: var(--ink);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid var(--amber);
transition: color 250ms, border-color 250ms;
}
.edlink:hover { color: var(--amber-soft); border-color: var(--amber-soft); }
.edlink-alt {
color: var(--ink-dim);
border-bottom-color: var(--ink-mute);
}
.edlink-alt:hover { color: var(--ink); border-color: var(--ink-dim); }
.edlink-sep { color: var(--ink-mute); opacity: 0.6; }
.hero-right {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
}
.book-stage {
position: relative;
display: flex; justify-content: center; align-items: center;
min-height: 540px;
}
/* Weighty ambient shadow under the book — like paper on a dark surface */
.book-shadow {
position: absolute;
left: 50%; bottom: 120px;
transform: translateX(-50%);
width: 400px; height: 34px;
background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.28) 40%, transparent 75%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
.book { z-index: 1; }
.book-colophon {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 240px;
padding-top: 22px;
border-top: 1px solid var(--line);
font-family: "Inter", sans-serif;
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-mute);
}
.book-colophon .col-row {
display: flex;
justify-content: space-between;
gap: 20px;
}
.book-colophon .col-row span:last-child { color: var(--ink-dim); }
/* Book — mineral, stone, grounded. Built in layers.
IMPORTANTE: promosso a layer compositing GPU con `will-change` +
translateZ(0). Senza questo, ogni cambio di transform/box-shadow durante
l'hover farebbe ri-rasterizzare la copertina (immagine ad alta risoluzione)
producendo un visibile "cambio di trama" tra stato a riposo e stato hover. */
.book {
width: 340px; height: 510px;
position: relative;
background: #050505;
box-shadow:
0 80px 140px -40px rgba(0,0,0,0.95),
0 30px 60px -20px rgba(0,0,0,0.7),
inset 0 0 0 1px rgba(40,36,30,0.6),
inset 0 1px 0 rgba(90,78,60,0.12);
overflow: hidden;
transition: transform 900ms cubic-bezier(0.2,0,0.2,1);
isolation: isolate;
/* GPU layer — fissa la rasterizzazione della copertina */
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Mini-lift secondario rimosso: era ridondante con .book-stage:hover .book
e produceva due transizioni in cascata sulla stessa proprietà transform. */
/* Real printed front cover — fills the .book container exactly.
IMPORTANTE: backface-visibility:hidden + translateZ(0) tengono la texture
stabile su GPU layer, così il filtro brightness/contrast/saturate non viene
ricalcolato a ogni step di animazione (causa principale della "trama che
cambia" sull'hover). */
.book .book-cover-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 2;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
image-rendering: auto;
}
/* Layer 1 — deep stone base: uneven, lit slightly from the crack */
.book .stone-base {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(110% 80% at 52% 45%, #1b1714 0%, #0e0b09 38%, #060505 72%, #020202 100%),
linear-gradient(180deg, #0c0a08 0%, #050404 100%);
background-blend-mode: multiply;
}
/* Layer 2 — coarse mineral grain, large scale */
.book .stone-coarse {
position: absolute; inset: 0; z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.85;
}
/* Layer 3 — fine tactile grain */
.book .stone-fine {
position: absolute; inset: 0; z-index: 2;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.6;
}
/* Layer 4 — dark scuffs / vignette, keeps edges heavy */
.book .stone-vignette {
position: absolute; inset: 0; z-index: 3;
background:
radial-gradient(140% 100% at 52% 50%, transparent 40%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.8) 100%),
linear-gradient(90deg, rgba(0,0,0,0.35), transparent 18%, transparent 82%, rgba(0,0,0,0.35));
mix-blend-mode: multiply;
}
/* Layer 5 — the crack. Organic path, slightly off-center, no blur. */
.book .crack-svg {
position: absolute; inset: 0; z-index: 4;
width: 100%; height: 100%;
pointer-events: none;
}
/* Layer 6 — controlled warm halo, concentrated on the crack only */
.book .crack-halo {
position: absolute;
top: -4%; bottom: -4%;
left: 46%; width: 22%;
z-index: 4;
background: radial-gradient(50% 50% at 50% 50%,
rgba(255,205,140,0.28) 0%,
rgba(231,162,74,0.12) 28%,
rgba(231,162,74,0.04) 55%,
transparent 75%);
mix-blend-mode: screen;
pointer-events: none;
}
/* Layer 7 — a very faint warm wash on the right side of the crack,
like light slipping out of it onto the stone */
.book .crack-wash {
position: absolute; inset: 0; z-index: 4;
background: linear-gradient(90deg,
transparent 45%,
rgba(231,162,74,0.05) 52%,
transparent 62%);
mix-blend-mode: screen;
pointer-events: none;
}
/* Edge of the book — a bit of lift on the spine side */
.book .cover-fold {
position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
z-index: 8;
pointer-events: none;
}
/* Opposite edge — a thin highlight where light could catch */
.book .cover-edge {
position: absolute; right: 0; top: 0; bottom: 0; width: 1px;
background: linear-gradient(180deg, transparent, rgba(120,95,60,0.25) 40%, rgba(160,120,70,0.2) 60%, transparent);
z-index: 8;
pointer-events: none;
}
/* Top edge — paper highlight, makes the book feel substantial */
.book .cover-top-edge {
position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(160,140,110,0.35) 30%, rgba(180,155,120,0.4) 55%, rgba(140,120,95,0.3) 80%, transparent 100%);
z-index: 8;
pointer-events: none;
}
/* Typography on the cover — pressed into the stone */
.book .cover-inner {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: space-between;
padding: 46px 34px 40px;
z-index: 6;
color: var(--ink);
}
.book .cover-top {
font-family: "Inter", sans-serif;
font-size: 9px; letter-spacing: 0.42em; text-transform: uppercase;
color: rgba(200,185,160,0.55);
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
.book .cover-title {
font-family: "Cormorant Garamond", serif;
font-size: 34px;
line-height: 1.02;
font-weight: 400;
letter-spacing: -0.005em;
text-align: center;
color: #d9cfb8;
text-shadow:
0 1px 0 rgba(0,0,0,0.9),
0 0 24px rgba(0,0,0,0.8);
max-width: 260px;
margin: 0 auto;
}
.book .cover-title em {
font-style: italic;
color: #e6b375;
text-shadow: 0 0 18px rgba(231,162,74,0.35), 0 1px 0 rgba(0,0,0,0.9);
}
.book .cover-author {
font-family: "Inter", sans-serif;
font-size: 9px; letter-spacing: 0.48em; text-transform: uppercase;
color: rgba(200,185,160,0.45);
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}
.hero-left { position: relative; z-index: 2; }
.hero-right { position: relative; z-index: 2; }
/* ===== Section chrome ===== */
section.sec { position: relative; padding: 140px 0; }
section.sec .wrap { z-index: 2; }
.sec-head { display: grid; grid-template-columns: 160px 1fr; gap: 40px; margin-bottom: 80px; align-items: start; }
.sec-head .num { font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-mute); text-transform: uppercase; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sec-head h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02; max-width: 900px; }
.sec-head h2 em { font-style: italic; color: var(--amber-soft); font-weight: 300; }
/* Il libro */
.book-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
.excerpt {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
line-height: 1.65;
color: var(--ink);
max-width: 560px;
}
.excerpt p { margin: 0 0 22px; }
.excerpt p:first-child::first-letter {
font-size: 3.6em; float: left; line-height: 0.9; padding: 6px 10px 0 0;
color: var(--amber-soft); font-style: italic;
}
.excerpt .signoff { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); font-family: "Inter", sans-serif; margin-top: 32px; }
.book-facts { border-top: 1px solid var(--line-2); }
.book-facts .row { display: grid; grid-template-columns: 120px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); gap: 20px; }
.book-facts .row .k { font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); padding-top: 4px; }
.book-facts .row .v { font-family: "Cormorant Garamond", serif; font-size: 18px; color: var(--ink); font-style: italic; }
.book-facts .row .v em { color: var(--amber-soft); }
/* L'autore */
.author-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.portrait {
aspect-ratio: 3/4;
background:
repeating-linear-gradient(135deg, #15130f 0 2px, #110f0c 2px 4px),
#110f0c;
border: 1px solid var(--line-2);
position: relative;
display: flex; align-items: flex-end; padding: 20px;
}
.portrait::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 40%, rgba(231,162,74,0.1), transparent 55%);
}
.portrait .placeholder-label {
position: relative; z-index: 2;
font-family: "Inter", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.author-bio p { font-family: "Cormorant Garamond", serif; font-size: 20px; line-height: 1.6; margin: 0 0 20px; color: var(--ink); }
.author-bio p.lead { font-size: 24px; color: var(--amber-soft); font-style: italic; }
/* Gesti della cura */
.cura-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cura-card {
position: relative;
border: 1px solid var(--line-2);
padding: 48px 40px 40px;
background: linear-gradient(180deg, rgba(231,162,74,0.025), transparent);
min-height: 460px;
display: flex; flex-direction: column; justify-content: space-between;
transition: border-color 400ms;
}
.cura-card:hover { border-color: rgba(231,162,74,0.4); }
.cura-card .num { position: absolute; top: 20px; right: 24px; font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute); }
.cura-card h3 { font-size: 44px; line-height: 1; font-style: italic; font-weight: 300; color: var(--ink); margin-bottom: 16px; }
.cura-card h3 em { color: var(--amber-soft); }
.cura-card .kicker { margin-bottom: 20px; }
.cura-card p { color: var(--ink-dim); font-size: 17px; line-height: 1.6; max-width: 420px; }
.cura-card .more { margin-top: 30px; font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber-soft); cursor: pointer; }
.cura-card .more::after { content: " →"; color: var(--amber); }
/* Luoghi */
.luoghi-list { display: grid; grid-template-columns: 1fr; }
.luogo {
display: grid; grid-template-columns: 80px 180px 1fr 220px;
gap: 30px;
padding: 36px 0;
border-top: 1px solid var(--line-2);
align-items: center;
cursor: pointer;
transition: background 300ms;
}
.luogo:last-child { border-bottom: 1px solid var(--line-2); }
.luogo:hover { background: linear-gradient(90deg, rgba(231,162,74,0.05), transparent 80%); }
.luogo .num { font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.24em; color: var(--ink-mute); }
.luogo .name { font-family: "Cormorant Garamond", serif; font-size: 44px; font-weight: 400; color: var(--ink); line-height: 1; }
.luogo:hover .name { color: var(--amber-soft); font-style: italic; }
.luogo .caption { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 18px; color: var(--ink-dim); max-width: 460px; }
.luogo .coord { font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); text-align: right; }
/* Eventi / Newsletter */
.events-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: stretch; }
.event {
display: grid; grid-template-columns: 100px 1fr;
gap: 30px;
padding: 28px 0;
border-top: 1px solid var(--line);
}
.event:first-child { border-top-color: var(--line-2); }
.event .date { font-family: "Cormorant Garamond", serif; font-size: 28px; font-style: italic; color: var(--amber-soft); line-height: 1; }
.event .date small { display: block; font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; font-style: normal; }
.event .info h4 { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }
.event .info .where { font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.event .info p { color: var(--ink-dim); font-size: 16px; line-height: 1.55; margin: 10px 0 0; }
.event.placeholder .info h4 { color: var(--ink-mute); font-style: italic; }
.newsletter {
border: 1px solid var(--line-2);
padding: 40px 36px;
background: linear-gradient(180deg, rgba(231,162,74,0.04), transparent);
position: relative;
}
.newsletter::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, transparent, var(--amber), transparent); }
.newsletter h3 { font-size: 28px; font-style: italic; margin-bottom: 10px; }
.newsletter h3 em { color: var(--amber-soft); }
.newsletter p { color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin: 0 0 24px; }
.newsletter form { display: flex; flex-direction: column; gap: 12px; }
.newsletter input {
background: transparent;
border: none;
border-bottom: 1px solid var(--line-2);
color: var(--ink);
padding: 14px 2px;
font-family: "Cormorant Garamond", serif;
font-size: 17px;
outline: none;
transition: border-color 200ms;
}
.newsletter input::placeholder { color: var(--ink-mute); font-style: italic; }
.newsletter input:focus { border-color: var(--amber); }
.newsletter .consent { font-family: "Inter", sans-serif; font-size: 11px; color: var(--ink-mute); line-height: 1.5; margin: 8px 0 0; }
.newsletter .consent a { color: var(--ink-dim); }
.newsletter button { margin-top: 14px; align-self: flex-start; transition: color 200ms, border-color 200ms, background 200ms, opacity 200ms; }
.newsletter button[data-state="sending"] { opacity: 0.7; cursor: wait; }
.newsletter button[data-state="ok"] { color: var(--amber-soft); border-color: rgba(231,162,74,0.5); background: linear-gradient(180deg, rgba(231,162,74,0.18), rgba(231,162,74,0.05)); }
.newsletter button[data-state="error"] { color: #e9a09b; border-color: rgba(200,110,100,0.45); background: linear-gradient(180deg, rgba(180,80,70,0.12), rgba(180,80,70,0.03)); }
/* Footer — colophon a sinistra + 4 colonne: INDICE · ESTENSIONI · CONTATTI · ACQUISTO */
footer {
padding: 88px 0 60px;
border-top: 1px solid var(--line-2);
background: #07070a;
}
footer .wrap {
display: grid;
/* 5 colonne: colophon più ampio per ospitare la frase italic, poi 4 colonne calibrate */
grid-template-columns: 1.3fr 0.85fr 1fr 1.2fr 1.05fr;
gap: 48px;
align-items: start;
}
footer h4,
footer h5 {
font-family: "Inter", sans-serif;
font-size: 10px; letter-spacing: 0.28em;
text-transform: uppercase; color: var(--ink-mute);
font-weight: 500;
/* margine identico in tutte le colonne → le h5 partono tutte dalla stessa baseline */
margin: 0 0 22px;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: 7px 0; line-height: 1.5; }
footer li a { color: var(--ink-dim); text-decoration: none; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; }
footer li a:hover { color: var(--amber-soft); }
footer .colophon {
font-family: "Cormorant Garamond", serif;
font-style: italic; font-size: 16px;
color: var(--ink-dim);
line-height: 1.65;
/* stessa baseline visiva delle h5 delle altre colonne */
padding-top: 2px;
}
footer .colophon .big { display: block; font-size: 28px; color: var(--ink); font-style: normal; margin-bottom: 14px; letter-spacing: -0.01em; line-height: 1.1; }
footer .fineprint {
font-family: "Inter", sans-serif;
font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--ink-mute);
margin-top: 64px; padding-top: 26px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
/* ===== Extract modal ===== */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(5,5,7,0.85); backdrop-filter: blur(8px);
z-index: 100;
display: flex; align-items: center; justify-content: center;
animation: fade 300ms ease;
}
.modal {
background: #0d0d10;
border: 1px solid var(--line-2);
max-width: 720px; width: calc(100% - 40px);
max-height: 85vh;
overflow-y: auto;
padding: 60px 70px;
position: relative;
}
.modal::before {
content: ""; position: absolute; left: 35px; top: 0; bottom: 0; width: 1px;
background: linear-gradient(180deg, transparent, rgba(231,162,74,0.4), transparent);
}
.modal .close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: var(--ink-dim); cursor: pointer; font-family: Inter, sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.modal .close:hover { color: var(--amber); }
.modal h3 { font-size: 36px; margin-bottom: 8px; }
.modal h3 em { color: var(--amber-soft); font-style: italic; }
.modal .extract-kicker { margin-bottom: 30px; }
.modal .excerpt { font-size: 19px; line-height: 1.7; }
.modal .excerpt p { margin-bottom: 18px; }
/* =====================================================================
INTRO OVERLAY — Immagine 1 (intatta) → crossfade puro verso
Immagine 2 (stessa foto ma con la crepa luminosa, nativa della foto)
→ dalla crepa esplode la luce accecante → dissolvenza sulla homepage.
Niente crepa generata via SVG e niente wipe direzionale: le due foto
sono identiche a meno della crepa, quindi una dissolvenza in opacity
pura fa nascere la crepa "dentro" l'immagine 1 in modo naturale.
Variabili — punti precisi da modificare per timing e intensità.
===================================================================== */
#intro {
/* 1) ritardo iniziale: Immagine 1 immobile, per far "respirare" la scena */
--intro-delay: 650ms;
/* 2) velocità del crossfade (1 → 2), riempie la Fase B */
--intro-crack-duration: 360ms;
/* 3) intensità della luce (moltiplicatore ~0.7 → 1.4) */
--intro-light-intensity: 1;
/* 4) velocità con cui la luce accecante invade lo schermo */
--intro-expand-duration: 920ms;
/* 5) dissolvenza finale dell'overlay sulla homepage */
--intro-fade-duration: 700ms;
/* Posizione del cuore della crepa (in % di viewport): serve per centrare
la luce accecante. Ritoccare se su certi schermi la luce nasce decentrata. */
--intro-bloom-x: 66%;
--intro-bloom-y: 40%;
/* Posizione della cornice dell'immagine (object-position) per far cadere
la crepa reale della foto nel punto giusto del viewport su ogni device.
Default desktop: center center; ogni breakpoint sotto la ritara. */
--intro-img-pos-x: 50%;
--intro-img-pos-y: 50%;
/* Fissaggio robusto al viewport: longhand esplicito invece di inset:0
(Samsung Internet e Chrome Android precedenti non risolvono sempre
inset:0 come altezza definita per le percentuali dei figli), più
fallback dvh/svh per gestire la barra URL mobile senza "salti". */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh; /* fallback per browser senza dvh */
height: 100svh; /* iOS/Android recenti: viewport "piccolo" stabile */
height: 100dvh; /* dinamico: si adatta alla barra URL */
z-index: 200;
background: #050506;
overflow: hidden;
pointer-events: auto; /* serve per il tasto "Salta intro" */
}
/* Layer base comune alle due immagini.
Nota: sono ![]()
(non div con background) perché su iOS Safari, Samsung
Internet e Chrome Android il combo position:fixed + background-size:cover
rende il raster in modo incoerente (l'immagine resta "attaccata" al
document layout invece che al viewport — da qui la sensazione "tutto
spostato in alto a sinistra" su S25 Ultra). Con ![]()
+ object-fit:cover
+ top/left espliciti il comportamento è identico su ogni device. */
#intro .intro-layer {
/* Longhand esplicito: evita edge case dove inset:0 non viene riconosciuto
come dimensione definita dai browser mobile precedenti. */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Blocca l'immagine nella cornice del viewport anche se il parent per
qualsiasi motivo fosse più grande (difesa in profondità). */
max-width: 100%;
max-height: 100%;
object-fit: cover;
/* object-position pilotato da variabili: cambia per breakpoint per far
cadere la crepa reale (al 56% X / 46% Y della foto sorgente) nel
punto giusto del viewport su smartphone e tablet. */
object-position: var(--intro-img-pos-x) var(--intro-img-pos-y);
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
will-change: opacity;
}
/* 1) Immagine 1 — superficie intatta, sempre visibile sotto.
Colore di sfondo di #intro già #050506 → nessun background-color extra. */
/* 2) Immagine 2 — stessa superficie CON la crepa già luminosa nella foto.
Parte invisibile e sale in opacity durante Fase B: crossfade puro,
nessuna direzione, la crepa "emerge" dentro la pietra. */
#intro .intro-crack {
opacity: 0;
}
/* 3) Luce accecante — nasce dal punto caldo della crepa e si espande */
#intro .intro-bloom {
position: absolute; inset: 0;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
/* Gradiente radiale ANCORATO al punto della crepa via variabili CSS.
Man mano che animiamo --bloom-reach, l'alone si espande fino a
invadere tutto lo schermo (white-out). */
background:
radial-gradient(
circle at var(--intro-bloom-x) var(--intro-bloom-y),
rgba(255, 252, 238, 1) 0%,
rgba(255, 240, 200, 0.98) calc(var(--bloom-reach, 0%) * 0.12),
rgba(255, 210, 140, 0.85) calc(var(--bloom-reach, 0%) * 0.30),
rgba(255, 170, 90, 0.50) calc(var(--bloom-reach, 0%) * 0.55),
rgba(255, 140, 60, 0.18) calc(var(--bloom-reach, 0%) * 0.80),
transparent calc(var(--bloom-reach, 0%) * 1.00)
);
filter: brightness(calc(0.85 + var(--intro-light-intensity) * 0.55));
}
/* 4) Wash finale — lastra di luce uniforme che chiude l'accecamento */
#intro .intro-wash {
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at var(--intro-bloom-x) var(--intro-bloom-y),
rgba(255, 252, 238, 1) 0%,
rgba(255, 246, 220, 0.95) 35%,
rgba(255, 230, 180, 0.75) 65%,
rgba(255, 210, 150, 0.35) 90%,
transparent 100%);
mix-blend-mode: screen;
opacity: 0;
}
/* 5) Pulsante "Salta intro" — piccolo, sobrio, bottom-right */
#intro .intro-skip {
position: absolute;
right: 22px; bottom: 18px;
z-index: 2;
background: transparent;
border: 1px solid rgba(255, 244, 220, 0.18);
color: rgba(255, 244, 220, 0.68);
font-family: Inter, system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 9px 16px;
cursor: pointer;
border-radius: 2px;
transition: color 180ms ease, border-color 180ms ease, opacity 220ms ease;
opacity: 0.55;
}
#intro .intro-skip:hover {
color: rgba(255, 244, 220, 0.92);
border-color: rgba(255, 244, 220, 0.36);
opacity: 1;
}
#intro .intro-skip:focus-visible {
outline: 1px solid rgba(255, 244, 220, 0.6);
outline-offset: 2px;
}
/* =====================================================================
SEQUENZA (classe .play aggiunta su #intro da app.js)
Fase A 0 ─────────────── var(--intro-delay)
Immagine 1 immobile.
Fase B delay ─────────── delay + crack-duration
Crossfade puro: opacity di Immagine 2 da 0 a 1, così la
crepa "emerge" dalla pietra senza direzione visibile.
Fase C delay + crack-duration ── + 80ms
piccolissima sospensione, la crepa è visibile nella foto.
Fase D C + 80ms ─────────── + var(--intro-expand-duration)
Bloom: il raggio del gradiente cresce (--bloom-reach 0→200%)
mentre l'opacità sale, fino al white-out dalla crepa.
Il wash si somma verso la fine per uniformare il bianco.
Fase E ultimi var(--intro-fade-duration)
#intro.done → opacity 0 → homepage sotto (già pronta).
===================================================================== */
/* --- Fase B: crossfade puro verso Immagine 2 --- */
#intro.play .intro-crack {
animation: crackReveal var(--intro-crack-duration) cubic-bezier(0.45, 0.02, 0.25, 1) forwards;
animation-delay: var(--intro-delay);
}
/* --- Fase D: bloom parte 80ms dopo la dissolvenza --- */
#intro.play .intro-bloom {
animation: introBloom var(--intro-expand-duration) cubic-bezier(0.5, 0, 0.25, 1) forwards;
animation-delay: calc(var(--intro-delay) + var(--intro-crack-duration) + 40ms);
}
/* --- Fase D (coda): wash uniforma il bianco finale --- */
#intro.play .intro-wash {
animation: introWash calc(var(--intro-expand-duration) * 0.85) ease-out forwards;
animation-delay: calc(var(--intro-delay) + var(--intro-crack-duration) + var(--intro-expand-duration) * 0.40);
}
/* --- Fase E: overlay si dissolve sulla home --- */
#intro.done {
opacity: 0;
transition: opacity var(--intro-fade-duration) ease;
}
#intro.gone { display: none; }
/* Variabile registrata per animarla in un gradient (fallback graceful). */
@property --bloom-reach {
syntax: '';
inherits: false;
initial-value: 0%;
}
/* keyframes --------------------------------------------------------- */
/* Crossfade puro: l'immagine 2 sale in opacity sopra l'immagine 1.
Nessuna direzione visibile: la crepa appare "dentro" la pietra. */
@keyframes crackReveal {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Bloom: cresce il raggio del gradiente + sale l'opacità.
Se @property non è supportato (Safari vecchio), --bloom-reach non si
anima ma l'opacità crea comunque l'effetto di accecamento. */
@keyframes introBloom {
0% { opacity: 0; --bloom-reach: 0%; }
12% { opacity: calc(0.70 * var(--intro-light-intensity)); --bloom-reach: 35%; }
40% { opacity: calc(0.95 * var(--intro-light-intensity)); --bloom-reach: 90%; }
75% { opacity: calc(1.00 * var(--intro-light-intensity)); --bloom-reach: 180%; }
100% { opacity: calc(1.00 * var(--intro-light-intensity)); --bloom-reach: 260%; }
}
@keyframes introWash {
0% { opacity: 0; }
55% { opacity: calc(0.60 * var(--intro-light-intensity)); }
100% { opacity: calc(0.95 * var(--intro-light-intensity)); }
}
/* ============================================================
RIALLINEAMENTO INTRO PER DEVICE — regole STRUTTURALI
============================================================
Le due foto dell'intro (intro-surface.jpg / intro-crack.jpg) sono
verticali, aspect ≈ 0.67 (circa 432 × 641 px). La crepa reale
nella foto è a ~56% X / ~46% Y.
Con object-fit:cover + object-position:center:
- viewport LANDSCAPE (desktop, tablet ruotato): cover scala per
width, taglia verticalmente; la crepa resta a ~56% X del viewport.
- viewport PORTRAIT più stretto della foto (smartphone, tablet
10" verticale): cover scala per height, taglia lateralmente;
la crepa si "sposta" verso il centro del viewport (~58–60% X).
- orientazione LANDSCAPE su smartphone/tablet: cover scala per
width, la foto verticale viene tagliata tanto sopra e sotto,
la crepa resta quasi al 56% X ma più in basso del desktop.
Per ogni breakpoint ritariamo DUE coppie di variabili:
--intro-img-pos-x / --intro-img-pos-y → dove CROPPIAMO la foto
--intro-bloom-x / --intro-bloom-y → dove ANCORIAMO la luce
così crepa visibile e bagliore restano sempre allineati.
============================================================ */
/* --- Tablet verticale (Samsung 10", iPad, ecc.: 641–1024 px, portrait) --- */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
#intro {
--intro-img-pos-x: 50%;
--intro-img-pos-y: 50%;
--intro-bloom-x: 65%;
--intro-bloom-y: 47%;
}
}
/* --- Smartphone verticale standard (361–640 px, portrait) --- */
@media (max-width: 640px) and (orientation: portrait) {
#intro {
--intro-img-pos-x: 50%;
--intro-img-pos-y: 48%;
--intro-bloom-x: 59%;
--intro-bloom-y: 48%;
}
}
/* --- Smartphone ultra-stretto verticale (≤ 420 px portrait:
S25 Ultra, iPhone Pro Max, Pixel 8 Pro): il crop laterale diventa
molto aggressivo, la crepa cade vicino al centro orizzontale. --- */
@media (max-width: 420px) and (orientation: portrait) {
#intro {
--intro-img-pos-x: 50%;
--intro-img-pos-y: 50%;
--intro-bloom-x: 68%;
--intro-bloom-y: 47%;
}
}
/* --- Smartphone / tablet ORIZZONTALE (max-width ≤ 1024 e altezza ridotta):
su landscape mobile la foto verticale viene tagliata molto sopra/sotto.
object-position:center 50% terrebbe al centro dell'immagine; spostiamo
leggermente la Y per mostrare la crepa senza tagliare il punto caldo. --- */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 540px) {
#intro {
--intro-img-pos-x: 56%;
--intro-img-pos-y: 46%;
--intro-bloom-x: 66%;
--intro-bloom-y: 47%;
}
}
/* --- Tablet orizzontale (Samsung Tab, iPad landscape: altezza 541–820) --- */
@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 541px) and (max-height: 900px) {
#intro {
--intro-img-pos-x: 54%;
--intro-img-pos-y: 48%;
--intro-bloom-x: 62%;
--intro-bloom-y: 42%;
}
}
/* --- prefers-reduced-motion: niente dissolvenze, home subito --- */
@media (prefers-reduced-motion: reduce) {
#intro {
--intro-delay: 0ms;
--intro-crack-duration: 0ms;
--intro-expand-duration: 0ms;
--intro-fade-duration: 240ms;
}
#intro.play .intro-crack,
#intro.play .intro-bloom,
#intro.play .intro-wash { animation: none !important; }
}
/* Homepage sempre visibile sotto: nessun fade "a scatti". L'overlay fa tutto. */
main.site { opacity: 1; }
main.site.reveal { opacity: 1; }
main.site .hero-crack,
main.site .hero-inner > * { opacity: 1; transform: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* ===== Tweaks panel ===== */
#tweaks {
position: fixed; right: 24px; bottom: 24px; z-index: 60;
width: 280px;
background: rgba(13,13,16,0.96);
border: 1px solid var(--line-2);
padding: 20px;
font-family: "Inter", sans-serif;
display: none;
backdrop-filter: blur(12px);
}
#tweaks.open { display: block; }
#tweaks h4 { font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; font-weight: 500; }
#tweaks .row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); }
#tweaks .row:last-child { border-bottom: 0; }
#tweaks button.toggle, #tweaks select {
background: transparent; border: 1px solid var(--line-2); color: var(--ink); padding: 6px 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; font-family: inherit;
}
#tweaks button.toggle:hover { border-color: var(--amber); color: var(--amber-soft); }
/* variants */
body[data-accent="ember"] { --amber: #e7a24a; --amber-soft: #f0c27b; --amber-deep: #b9771f; }
body[data-accent="rose"] { --amber: #d28a72; --amber-soft: #e9b2a0; --amber-deep: #8b4d3d; }
body[data-accent="gold"] { --amber: #d4af37; --amber-soft: #eedc9a; --amber-deep: #8a6d10; }
body[data-accent="cold"] { --amber: #9dbdd5; --amber-soft: #c8dceb; --amber-deep: #4d6f87; }
body[data-intensity="calm"] .hero-crack { opacity: 0.5; }
body[data-intensity="bold"] .hero-crack { opacity: 0.9; width: 2px; }
body[data-intensity="calm"] .book .crack-halo { opacity: 0.6; }
body[data-intensity="bold"] .book .crack-halo { opacity: 1.2; }
/* === Portrait with actual photo (overrides placeholder look) === */
.portrait.has-photo {
aspect-ratio: 3/4;
border: 1px solid var(--line-2);
padding: 0;
position: relative;
overflow: hidden;
background: #0d0c0a;
/* soft warm glow beneath the image, echoing the crack */
box-shadow: 0 30px 80px -30px rgba(231,162,74,0.18);
}
.portrait.has-photo img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
filter: saturate(0.92) contrast(1.02);
transition: transform 900ms ease, filter 600ms ease;
}
.portrait.has-photo:hover img { transform: scale(1.015); filter: saturate(1) contrast(1.05); }
.portrait.has-photo::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(90% 60% at 50% 12%, rgba(231,162,74,0.10), transparent 60%),
linear-gradient(180deg, transparent 60%, rgba(10,10,12,0.55) 100%);
pointer-events: none;
z-index: 2;
}
.portrait.has-photo::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.22;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 3;
}
.portrait-caption {
position: absolute;
left: 20px; right: 20px; bottom: 16px;
z-index: 4;
font-family: "Inter", sans-serif;
font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--ink-mute);
}
/* === Epigrafe Baldwin === */
.epigraph {
padding: 80px 0 60px;
text-align: center;
position: relative;
}
.epigraph blockquote {
margin: 0 auto;
padding: 0 24px;
max-width: 780px;
}
.epigraph blockquote p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2.1vw, 28px);
line-height: 1.5;
color: var(--ink-dim);
margin: 0 0 18px;
letter-spacing: 0.005em;
}
.epigraph blockquote cite {
font-family: "Inter", sans-serif;
font-style: normal;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
display: inline-block;
padding-top: 8px;
border-top: 1px solid var(--line-2);
}
/* === Footer "in preparazione" labels (non-links) === */
.presales .soon-label {
color: var(--ink-mute);
font-family: inherit;
font-size: inherit;
opacity: 0.75;
position: relative;
padding-left: 14px;
}
.presales .soon-label::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 6px; height: 1px;
background: var(--amber);
opacity: 0.55;
transform: translateY(-0.5px);
}
/* === Cura cards as anchors (navigate to sub-pages) === */
a.cura-card {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.cura-card:hover .more { color: var(--amber); }
a.cura-card:hover h3 em { color: var(--amber); }
/* === Event variants (release + "no physical dates" note) === */
.event.event-release {
border-top-color: rgba(231,162,74,0.35);
background:
linear-gradient(180deg, rgba(231,162,74,0.04), transparent 70%);
padding-left: 18px;
position: relative;
}
.event.event-release::before {
content: "";
position: absolute;
left: 0; top: 28px; bottom: 28px;
width: 1px;
background: linear-gradient(180deg, transparent, var(--amber) 30%, var(--amber-soft) 55%, var(--amber) 70%, transparent);
opacity: 0.75;
}
.event.event-release .date { color: var(--amber-soft); }
.event.event-release .info h4 { color: var(--ink); }
.event.event-note {
border-top-color: var(--line);
opacity: 0.9;
}
.event.event-note .date {
color: var(--ink-mute);
font-style: normal;
font-size: 22px;
letter-spacing: 0.1em;
padding-top: 4px;
}
.event.event-note .info h4 {
color: var(--ink-dim);
font-style: italic;
font-size: 19px;
margin: 0;
line-height: 1.45;
}
.events-col { display: flex; flex-direction: column; }
/* === Contact sub-note in footer === */
.contact-note {
font-family: "Cormorant Garamond", serif !important;
font-style: italic;
font-size: 15px !important;
line-height: 1.6;
color: var(--ink-dim);
/* Nessuna max-width fissa: si adatta alla colonna del footer con grazia */
}
.contact-note a {
color: var(--amber-soft) !important;
font-style: italic !important;
border-bottom: 1px solid rgba(231,162,74,0.3);
transition: color 200ms, border-color 200ms;
}
.contact-note a:hover { color: var(--amber) !important; border-color: var(--amber); }
/* === Footer legal links (privacy, cookie) === */
.legal-links { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.legal-links a {
color: var(--ink-mute);
text-decoration: none;
letter-spacing: 0.2em;
transition: color 200ms;
}
.legal-links a:hover { color: var(--amber-soft); }
.legal-links .sep { color: var(--ink-mute); opacity: 0.5; }
/* === Cover prominence: warm stage light + rim + ground + hover lift === */
.book-stage { position: relative; isolation: isolate; }
/* Aura ambra larga, caricata in basso — il libro "si stacca dal buio" */
.book-stage::before {
content: "";
position: absolute;
left: 50%; top: 56%;
width: 820px; height: 820px;
transform: translate(-50%, -50%);
background:
radial-gradient(45% 40% at 50% 55%,
rgba(255,215,160,0.38) 0%,
rgba(231,162,74,0.22) 20%,
rgba(231,162,74,0.08) 45%,
transparent 72%);
filter: blur(44px);
z-index: 0;
pointer-events: none;
opacity: 1;
mix-blend-mode: screen;
transition: opacity 600ms ease, transform 600ms ease;
}
/* Halo stretto proprio dietro al libro */
.book-stage::after {
content: "";
position: absolute;
left: 50%; top: 54%;
width: 460px; height: 600px;
transform: translate(-50%, -50%);
background:
radial-gradient(50% 55% at 50% 55%,
rgba(255,230,195,0.42) 0%,
rgba(231,162,74,0.22) 32%,
rgba(231,162,74,0.06) 58%,
transparent 75%);
filter: blur(22px);
z-index: 0;
pointer-events: none;
mix-blend-mode: screen;
/* IMPORTANTE: niente transition su `filter`. Animare il blur durante l'hover
fa ri-rasterizzare l'aura calda dietro la copertina, e l'immagine del libro
in alto sembra cambiare trama (artefatto di antialiasing). Lasciamo solo
opacity + transform in transizione. */
transition: opacity 600ms ease, transform 600ms ease;
}
/* Hover: più luce, libro leggermente avanti.
IMPORTANTE: NIENTE cambio di `filter` qui — il blur lo lasciamo costante
a 22px (definito sopra). Animare blur in transizione causa ri-rasterizzazione
visibile sull'immagine della copertina ("trama che cambia"). */
.book-stage:hover::before { opacity: 1.3; }
.book-stage:hover::after { opacity: 1.35; }
/* Libro: bordo caldo visibile + rim highlight superiore + ombra materica */
.book {
box-shadow:
0 100px 180px -40px rgba(0,0,0,0.95),
0 50px 90px -28px rgba(28,16,8,0.7),
0 16px 34px -12px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(92,70,46,0.7),
inset 0 1px 0 rgba(240,200,150,0.28),
inset 1px 0 0 rgba(240,200,150,0.12),
inset -1px 0 0 rgba(240,200,150,0.10);
transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease;
z-index: 2;
}
/* Hover: viene avanti con alone caldo amplificato.
IMPORTANTE: niente `scale()` — solo translateY. Scalare un ![]()
dell'1–4%
forza il browser a ri-rasterizzare la texture a ogni frame della transizione,
producendo l'effetto "trama che cambia" sulla copertina. La sola traslazione
non re-rasterizza nulla (movimento composito sulla GPU). */
.book-stage:hover .book {
transform: translateY(-10px);
box-shadow:
0 130px 200px -40px rgba(0,0,0,0.95),
0 70px 120px -30px rgba(40,22,10,0.85),
0 30px 80px -20px rgba(231,162,74,0.35),
0 20px 40px -12px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(120,90,60,0.8),
inset 0 1px 0 rgba(250,215,170,0.36),
inset 1px 0 0 rgba(250,215,170,0.18),
inset -1px 0 0 rgba(250,215,170,0.14);
}
/* Rim highlight in alto-sinistra via pseudo (sopra all'img, sottile) */
.book::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
background:
linear-gradient(180deg, rgba(255,230,200,0.12) 0%, transparent 18%),
linear-gradient(90deg, rgba(255,230,200,0.08) 0%, transparent 14%);
mix-blend-mode: screen;
}
/* Immagine: più leggibile, meno smorzata */
.book .book-cover-image {
filter: brightness(1.12) contrast(1.06) saturate(1.08);
}
/* Ombra-luce a terra: doppia — ombra materica + alone caldo che lo "posa" */
.book-shadow {
left: 50%; bottom: 100px;
transform: translateX(-50%);
width: 560px; height: 54px;
background:
radial-gradient(ellipse at 50% 50%,
rgba(28,16,8,0.78) 0%,
rgba(28,16,8,0.32) 38%,
transparent 78%);
filter: blur(14px);
z-index: 0;
pointer-events: none;
}
/* Pozza di luce calda *sotto* al libro, più stretta */
.book-stage .book-floorlight {
position: absolute;
left: 50%; bottom: 88px;
transform: translateX(-50%);
width: 460px; height: 80px;
background:
radial-gradient(ellipse at 50% 40%,
rgba(255,200,140,0.35) 0%,
rgba(231,162,74,0.18) 40%,
transparent 76%);
filter: blur(26px);
z-index: 0;
pointer-events: none;
mix-blend-mode: screen;
transition: opacity 500ms ease, transform 500ms ease;
opacity: 1;
}
.book-stage:hover .book-floorlight { opacity: 1.3; transform: translateX(-50%) translateY(-4px); }
body[data-intensity="calm"] .book-stage::before,
body[data-intensity="calm"] .book-stage::after { opacity: 0.7; }
body[data-intensity="calm"] .book-floorlight { opacity: 0.7; }
body[data-intensity="bold"] .book-stage::before,
body[data-intensity="bold"] .book-stage::after { opacity: 1.25; }
body[data-intensity="bold"] .book-floorlight { opacity: 1.25; }
/* ========================================================= */
/* Sotto-pagine (Pasticceria, Rituali di cura, Privacy, Cookie) */
/* ========================================================= */
.site.subpage, .site.legal-page { padding-top: 0; }
.site.subpage .topmark, .site.legal-page .topmark, .site.estratto-page .topmark { position: fixed; top: 24px; left: 24px; right: auto; z-index: 50; }
.site.subpage .topmark-index, .site.legal-page .topmark-index, .site.estratto-page .topmark-index {
background: rgba(10,10,12,0.6);
border: 1px solid var(--line-2);
padding: 10px 16px;
backdrop-filter: blur(6px);
text-decoration: none;
}
.site.subpage .topmark-index:hover, .site.legal-page .topmark-index:hover, .site.estratto-page .topmark-index:hover { border-color: rgba(231,162,74,0.5); }
.site.subpage .topmark-index .topmark-label, .site.legal-page .topmark-index .topmark-label, .site.estratto-page .topmark-index .topmark-label {
font-family: "Inter", sans-serif;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-dim);
border-bottom: 0;
padding-bottom: 0;
}
/* Subhero con immagine */
.subhero {
position: relative;
min-height: 42vh;
display: flex;
align-items: flex-end;
padding: 88px 0 44px;
overflow: hidden;
border-bottom: 1px solid var(--line-2);
}
.subhero-image {
position: absolute; inset: 0;
z-index: 0;
}
.subhero-image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,12,0.45) 0%, rgba(10,10,12,0.7) 55%, rgba(10,10,12,0.95) 100%);
}
/* Placeholder: trama di pietra + striscia ambra (stessa grammatica del sito) */
.subhero-placeholder {
position: absolute; inset: 0;
background:
radial-gradient(80% 100% at 50% 0%, #1b1714 0%, #0e0b09 40%, #060505 75%, #020202 100%),
linear-gradient(180deg, #0c0a08 0%, #050404 100%);
background-blend-mode: multiply;
}
.subhero-placeholder::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.7;
}
.subhero-placeholder::after {
content: "";
position: absolute;
top: 0; bottom: 0;
/* Ancorata al centro con offset fisso → non si sposta al ridimensionare la finestra */
left: calc(50% - 320px);
width: 2px;
background: linear-gradient(180deg, transparent, rgba(231,162,74,0.55) 30%, rgba(240,194,123,0.9) 55%, rgba(231,162,74,0.55) 70%, transparent);
filter: blur(0.5px);
box-shadow: 0 0 30px 6px rgba(231,162,74,0.25);
opacity: 0.8;
}
.subhero-placeholder.alt::after { left: calc(50% + 320px); }
.placeholder-label {
position: absolute;
left: 24px; bottom: 20px;
font-family: "Inter", sans-serif;
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(230,210,180,0.55);
z-index: 5;
}
.subhero-inner {
position: relative;
z-index: 2;
}
.subhero-inner .kicker { margin-bottom: 18px; color: var(--amber-soft); }
.subhero-title {
font-family: "Cormorant Garamond", serif;
font-size: clamp(52px, 7vw, 92px);
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 18px;
}
.subhero-title em { color: var(--amber-soft); font-style: italic; font-weight: 400; }
.subhero-sub {
font-family: "Cormorant Garamond", serif;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.55;
color: var(--ink-dim);
max-width: 640px;
margin: 0;
}
/* Corpo a due colonne */
.subpage-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 80px;
padding-top: 80px;
padding-bottom: 40px;
}
.subpage-body .lead {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
line-height: 1.55;
color: var(--ink);
margin: 0 0 34px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line-2);
}
.subpage-body h3 {
font-family: "Cormorant Garamond", serif;
font-size: 28px;
font-weight: 400;
color: var(--ink);
margin: 36px 0 14px;
}
.subpage-body h3 em { color: var(--amber-soft); font-style: italic; }
.subpage-body p {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
line-height: 1.7;
color: var(--ink-dim);
margin: 0 0 16px;
max-width: 620px;
}
.subpage-body a {
color: var(--amber-soft);
text-decoration: none;
border-bottom: 1px solid rgba(231,162,74,0.3);
transition: color 200ms, border-color 200ms;
}
.subpage-body a:hover { color: var(--amber); border-color: var(--amber); }
.subpage-side { display: flex; flex-direction: column; gap: 28px; }
.side-block {
border: 1px solid var(--line-2);
padding: 24px 24px 22px;
background: linear-gradient(180deg, rgba(231,162,74,0.02), transparent);
}
.side-block .side-kicker {
font-family: "Inter", sans-serif;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 10px;
}
.side-block h4 {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
font-weight: 400;
color: var(--ink);
margin: 0 0 8px;
line-height: 1.2;
}
.side-block h4 a {
color: inherit;
text-decoration: none;
transition: color 200ms;
}
.side-block h4 a:hover { color: var(--amber-soft); }
.side-block p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
color: var(--ink-dim);
margin: 0;
line-height: 1.5;
}
/* ========================================================= */
/* Pagine legali (Privacy, Cookie) — sobrio, leggibile */
/* ========================================================= */
.site.legal-page .sec.legal { padding-top: 140px; }
.legal-body {
max-width: 720px;
padding-top: 40px;
}
.legal-body .kicker-inline {
font-family: "Inter", sans-serif;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 40px;
}
.legal-body h3 {
font-family: "Cormorant Garamond", serif;
font-size: 26px;
font-weight: 400;
color: var(--ink);
margin: 36px 0 12px;
}
.legal-body p {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.7;
color: var(--ink-dim);
margin: 0 0 14px;
}
.legal-body a {
color: var(--amber-soft);
text-decoration: none;
border-bottom: 1px solid rgba(231,162,74,0.3);
}
.legal-body a:hover { color: var(--amber); border-color: var(--amber); }
.legal-body em { color: var(--ink); font-style: italic; }
.legal-signoff {
margin-top: 40px !important;
padding-top: 24px;
border-top: 1px solid var(--line-2);
font-style: italic;
}
.legal-back {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid var(--line);
}
/* ===================================================================
GALLERIA PASTICCERIA — carrellata cinematografica orizzontale
=================================================================== */
.sec-gallery {
padding: 30px 0 120px;
position: relative;
}
.gallery-header {
padding-bottom: 36px;
max-width: 780px;
}
.gallery-title {
font-family: "Cormorant Garamond", serif;
font-weight: 300;
font-size: clamp(40px, 5vw, 68px);
line-height: 1.05;
letter-spacing: -0.015em;
margin: 12px 0 18px;
}
.gallery-title em { color: var(--amber-soft); font-style: italic; }
.gallery-sub {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 19px;
line-height: 1.6;
color: var(--ink-dim);
max-width: 640px;
}
.gallery-hint {
display: flex; align-items: center; gap: 14px;
margin-top: 28px;
color: var(--ink-mute);
font-family: Inter, sans-serif;
font-size: 10px; letter-spacing: 0.28em;
text-transform: uppercase;
}
.gallery-hint-line {
flex: 0 0 40px; height: 1px;
background: linear-gradient(90deg, transparent, var(--amber-soft), transparent);
opacity: 0.5;
}
/* La track orizzontale: snap scroll + padding per far "respirare" la prima/ultima card */
.gallery-track {
display: flex;
gap: 32px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0 48px;
padding: 40px 48px 60px;
/* Scrollbar personalizzata, elegante */
scrollbar-width: thin;
scrollbar-color: rgba(231,162,74,0.35) transparent;
-webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { height: 6px; background: transparent; }
.gallery-track::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, transparent, rgba(231,162,74,0.4) 30%, rgba(231,162,74,0.4) 70%, transparent);
border-radius: 3px;
}
.gallery-track::-webkit-scrollbar-track { background: transparent; }
/* Le card */
.gallery-card {
flex: 0 0 auto;
width: clamp(280px, 38vw, 520px);
scroll-snap-align: center;
display: flex;
flex-direction: column;
gap: 22px;
position: relative;
transition: transform 500ms ease;
}
.gallery-card:hover { transform: translateY(-6px); }
/* La foto (o placeholder) */
.gallery-media {
aspect-ratio: 3 / 4;
margin: 0;
position: relative;
overflow: hidden;
background: #0c0a08;
border: 1px solid var(--line);
box-shadow:
0 30px 60px -30px rgba(0,0,0,0.9),
0 10px 24px -14px rgba(231,162,74,0.1);
transition: box-shadow 500ms ease, border-color 400ms ease;
}
.gallery-card:hover .gallery-media {
border-color: rgba(231,162,74,0.4);
box-shadow:
0 40px 70px -30px rgba(0,0,0,1),
0 14px 28px -14px rgba(231,162,74,0.25);
}
.gallery-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 800ms cubic-bezier(0.2, 0, 0.2, 1);
}
.gallery-card:hover .gallery-media img { transform: scale(1.04); }
/* Placeholder quando non c'è ancora la foto */
.gallery-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px;
background:
radial-gradient(80% 100% at 50% 50%, #1b1714 0%, #0e0b09 45%, #060505 85%),
linear-gradient(180deg, #0c0a08 0%, #050404 100%);
background-blend-mode: multiply;
}
.gallery-placeholder::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.6;
}
.gallery-placeholder::after {
content: "";
position: absolute;
left: 50%; top: 20%; bottom: 20%;
width: 1px;
transform: translateX(-50%);
background: linear-gradient(180deg, transparent, rgba(231,162,74,0.4) 40%, rgba(240,194,123,0.7) 55%, rgba(231,162,74,0.4) 70%, transparent);
opacity: 0.5;
}
.gallery-placeholder-num {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 42px;
color: var(--amber-soft);
opacity: 0.7;
z-index: 2;
position: relative;
}
.gallery-placeholder-label {
font-family: Inter, sans-serif;
font-size: 9px; letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-mute);
opacity: 0.7;
z-index: 2;
position: relative;
}
/* Didascalia sotto la foto */
.gallery-caption { padding: 0 4px; }
.gallery-cap-num {
font-family: Inter, sans-serif;
font-size: 10px; letter-spacing: 0.32em;
color: var(--amber-soft);
margin-bottom: 10px;
opacity: 0.75;
}
.gallery-cap-title {
font-family: "Cormorant Garamond", serif;
font-weight: 400;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: var(--ink);
}
.gallery-cap-title em { color: var(--amber-soft); font-style: italic; }
.gallery-cap-sub {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
line-height: 1.55;
color: var(--ink-dim);
margin: 0;
max-width: 380px;
}
/* Ultima card: CTA di chiusura */
.gallery-card-end {
width: clamp(260px, 32vw, 420px);
}
.gallery-end {
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 48px;
background:
radial-gradient(60% 50% at 20% 30%, rgba(231,162,74,0.08) 0%, transparent 70%),
linear-gradient(180deg, rgba(20,18,16,0.5), rgba(10,10,12,0.9));
border: 1px solid var(--line-2);
}
.gallery-end .kicker { margin-bottom: 14px; }
.gallery-end h4 {
font-family: "Cormorant Garamond", serif;
font-weight: 300;
font-size: 28px;
line-height: 1.2;
margin: 0 0 14px;
color: var(--ink);
}
.gallery-end p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 15px;
color: var(--ink-dim);
margin: 0 0 26px;
}
.gallery-end .btn-ghost {
padding: 10px 22px;
font-family: Inter, sans-serif;
font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber-soft);
border: 1px solid rgba(231,162,74,0.35);
text-decoration: none;
background: transparent;
transition: border-color 250ms, color 250ms, background 250ms;
}
.gallery-end .btn-ghost:hover {
color: #0a0a0c;
background: var(--amber-soft);
border-color: var(--amber-soft);
}
/* ===================================================================
RITUALI — letture brevi + promemoria
=================================================================== */
.readings {
padding: 0 0 100px;
}
.readings-intro {
max-width: 680px;
margin-bottom: 48px;
}
.readings-intro h2 {
font-family: "Cormorant Garamond", serif;
font-weight: 300;
font-size: clamp(36px, 4.4vw, 58px);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 12px 0 18px;
}
.readings-intro h2 em { color: var(--amber-soft); font-style: italic; }
.readings-intro p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 18px;
line-height: 1.65;
color: var(--ink-dim);
}
.readings-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 56px 60px;
}
.reading {
position: relative;
padding-left: 28px;
border-left: 1px solid var(--line-2);
max-width: 480px;
}
.reading::before {
content: "";
position: absolute;
left: -1px; top: 10px;
width: 1px; height: 42px;
background: linear-gradient(180deg, var(--amber-soft), transparent);
opacity: 0.8;
}
.reading .num {
font-family: Inter, sans-serif;
font-size: 10px; letter-spacing: 0.32em;
color: var(--amber-soft);
text-transform: uppercase;
margin-bottom: 10px;
opacity: 0.8;
}
.reading h3 {
font-family: "Cormorant Garamond", serif;
font-weight: 400;
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0 0 14px;
}
.reading h3 em { color: var(--amber-soft); font-style: italic; }
.reading p {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.65;
color: var(--ink-dim);
margin: 0 0 10px;
}
.reading p em { color: var(--ink); font-style: italic; }
.readings-signoff {
margin-top: 72px;
padding-top: 32px;
border-top: 1px solid var(--line-2);
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 17px;
line-height: 1.65;
color: var(--ink-dim);
text-align: center;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.readings-signoff a {
color: var(--amber-soft);
text-decoration: none;
border-bottom: 1px solid rgba(231,162,74,0.3);
transition: color 200ms, border-color 200ms;
}
.readings-signoff a:hover { color: var(--amber); border-color: var(--amber); }
/* === Responsive === */
@media (max-width: 960px) {
.wrap { padding: 0 24px; }
.hero-inner { grid-template-columns: 1fr; padding: 120px 28px 60px; gap: 60px; }
.hero-crack { left: 50%; opacity: 0.5; }
.siderail { display: none; }
.hero-right { gap: 32px; }
.book-stage { min-height: 480px; }
.book { width: 270px; height: 400px; }
.hero-title { font-size: clamp(48px, 14vw, 84px); }
.hero-links { flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-links .edlink-sep { display: none; }
.book-colophon { min-width: 240px; }
.book-grid, .author-grid, .cura-grid, .events-grid { grid-template-columns: 1fr; gap: 40px; }
.luogo { grid-template-columns: 50px 1fr; }
.luogo .caption, .luogo .coord { grid-column: 1 / -1; }
footer .wrap { grid-template-columns: 1fr 1fr; }
/* Sotto-pagine mobile */
.subpage-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
.subhero { min-height: 36vh; padding: 84px 0 36px; }
.subhero-title { font-size: clamp(44px, 11vw, 72px); }
/* Su mobile le righe dorate tornano semplicemente ai terzi laterali,
così restano eleganti e leggere anche nel layout stretto */
.subhero-placeholder::after { left: 30%; }
.subhero-placeholder.alt::after { left: 70%; }
.site.legal-page .sec.legal { padding-top: 110px; }
/* Footer mobile: colophon a piena larghezza in alto,
poi 2 colonne — INDICE + ESTENSIONI sopra, CONTATTI + ACQUISTO sotto */
footer { padding: 60px 0 44px; }
footer .wrap { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
footer .colophon { grid-column: 1 / -1; max-width: 100%; margin-bottom: 8px; }
/* Su mobile Instagram e TikTok si impilano in colonna per equilibrio visivo */
.contact-social { flex-direction: column; gap: 10px; }
footer .fineprint { margin-top: 44px; padding-top: 22px; font-size: 9.5px; letter-spacing: 0.18em; }
footer .fineprint > span:first-child { flex: 1 1 100%; }
/* Galleria Pasticceria su mobile */
.sec-gallery { padding: 20px 0 80px; }
.gallery-header { padding: 0 24px 28px; }
.gallery-track {
gap: 20px;
scroll-padding: 0 24px;
padding: 28px 24px 40px;
}
.gallery-card { width: 78vw; gap: 16px; }
.gallery-card-end { width: 78vw; }
.gallery-end { padding: 32px 28px; aspect-ratio: auto; min-height: 420px; }
.gallery-cap-title { font-size: 22px; }
.gallery-cap-sub { font-size: 14px; }
.gallery-placeholder-num { font-size: 34px; }
/* Letture Rituali su mobile */
.readings { padding: 0 0 70px; }
.readings-intro { margin-bottom: 36px; }
.readings-list { grid-template-columns: 1fr; gap: 40px; }
.reading { padding-left: 22px; max-width: 100%; }
.reading h3 { font-size: 23px; }
.reading p { font-size: 16px; }
.readings-signoff { margin-top: 52px; padding-top: 26px; font-size: 16px; }
}
/* Tablet portrait (Samsung 10", iPad Mini, ecc.): mantiene due colonne
compatte nell'hero del libro — la copertina resta a destra del titolo
invece di andare a capo sotto. Sovrascrive le regole del blocco 960. */
@media (min-width: 721px) and (max-width: 960px) {
.hero-inner {
grid-template-columns: 1.15fr 1fr;
padding: 140px 36px 84px;
gap: 44px;
}
.hero-crack {
left: calc(50% + 110px);
opacity: 0.85;
}
.hero-title { font-size: clamp(46px, 7.5vw, 76px); }
.hero-right { gap: 28px; }
.book-stage { min-height: 440px; }
.book { width: 220px; height: 326px; }
.book-colophon { min-width: 200px; max-width: 100%; }
.hero-links { flex-direction: row; gap: 18px; align-items: baseline; }
.hero-links .edlink-sep { display: inline; }
.hero-quote { max-width: 100%; }
}
/* Smartphone più piccoli */
@media (max-width: 560px) {
.gallery-title { font-size: 36px; }
.gallery-sub { font-size: 17px; }
.gallery-hint-line { flex-basis: 28px; }
.gallery-card { width: 82vw; }
.gallery-card-end { width: 82vw; }
/* Sheet (indice pop-up) su smartphone */
.sheet { padding: 40px 24px; align-items: flex-start; padding-top: 96px; overflow-y: auto; }
.sheet-close { top: 24px; right: 20px; }
.sheet-nav a { font-size: 32px; gap: 18px; }
.sheet-nav a em { width: 28px; font-size: 10px; }
/* Topmark (← Copertina) più compatto */
.topmark { padding: 18px 20px; }
/* Epigrafe Baldwin / sezioni */
.sec { padding: 80px 0 60px; }
/* Footer fineprint su 2 righe */
footer .fineprint { flex-direction: column; align-items: flex-start; gap: 10px; }
footer .legal-links { font-size: 9.5px; }
/* Intro: la crepa deve restare ben centrata, il flash è già a 50% */
/* nessun override necessario, preserveAspectRatio=slice gestisce viewport strette */
}
/* fine file — build 20260426g */
/* ========================================================
PASTICCERIA — laboratorio (4 stagioni + 3 trittici)
build 20260426g · card quadrate, mobile-first, EXIF-safe
======================================================== */
/* === Hero foto reale === */
.subhero.subhero-photo {
min-height: 58vh;
padding: 92px 0 56px;
position: relative;
overflow: hidden;
}
.subhero.subhero-photo .subhero-image {
position: absolute; inset: 0; z-index: 0;
}
.subhero-photo-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 42%;
filter: saturate(0.92) contrast(1.02) brightness(0.78);
}
.subhero.subhero-photo::after {
content: "";
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.25) 38%, rgba(10,10,12,0.85) 100%),
radial-gradient(60% 80% at 50% 60%, transparent 0%, rgba(10,10,12,0.35) 100%);
pointer-events: none;
}
.subhero.subhero-photo .subhero-inner { position: relative; z-index: 2; }
/* === Sigillo del laboratorio (logo duotone) === */
.laboratory-sigillo .sigillo-frame {
width: 96px; height: 96px;
border: 1px solid var(--line-2);
border-radius: 50%;
padding: 4px;
margin: 4px 0 14px;
background: rgba(255,240,210,0.02);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.laboratory-sigillo .sigillo-img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
opacity: 0.95;
}
.laboratory-sigillo h4 em {
color: var(--amber-soft);
font-style: italic;
font-weight: 400;
}
/* === Le quattro stagioni === */
.laboratory-seasons {
padding: 60px 0 40px;
}
.seasons-intro {
max-width: 760px;
margin-bottom: 56px;
}
.seasons-intro .kicker { margin-bottom: 14px; }
.seasons-title {
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.08;
margin-bottom: 18px;
letter-spacing: -0.012em;
}
.seasons-title em { color: var(--amber-soft); font-style: italic; font-weight: 300; }
.seasons-sub {
color: var(--ink-dim);
font-size: 18px;
line-height: 1.6;
max-width: 640px;
}
.season {
padding: 56px 0 8px;
border-top: 1px solid var(--line);
}
.season:first-of-type { border-top: 0; padding-top: 24px; }
.season-header {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
align-items: baseline;
margin-bottom: 36px;
}
.season-num {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 300;
font-size: 44px;
color: var(--amber-soft);
line-height: 1;
padding-top: 4px;
}
.season-headline { display: block; }
.season-title {
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.12;
letter-spacing: -0.012em;
margin-bottom: 12px;
}
.season-title em { color: var(--amber-soft); font-style: italic; font-weight: 300; }
.season-text {
color: var(--ink-dim);
font-size: 17px;
line-height: 1.6;
max-width: 620px;
margin: 0;
}
.season-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.season-card {
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.season-media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #1a1612;
border: 1px solid var(--line);
}
.season-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.94) contrast(1.02);
transition: transform 600ms ease, filter 400ms ease;
}
.season-card:hover .season-media img {
transform: scale(1.02);
filter: saturate(1.0) contrast(1.04);
}
.season-card figcaption {
font-family: "Cormorant Garamond", serif;
font-size: 16px;
line-height: 1.5;
color: var(--ink-dim);
padding: 0 2px;
}
.season-card figcaption em {
color: var(--amber-soft);
font-style: italic;
}
/* === I trittici === */
.laboratory-triptychs {
padding: 60px 0 40px;
}
.triptychs-intro {
max-width: 760px;
margin-bottom: 56px;
}
.triptychs-intro .kicker { margin-bottom: 14px; }
.triptychs-title {
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.08;
margin-bottom: 18px;
letter-spacing: -0.012em;
}
.triptychs-title em { color: var(--amber-soft); font-style: italic; font-weight: 300; }
.triptychs-sub {
color: var(--ink-dim);
font-size: 18px;
line-height: 1.6;
max-width: 640px;
}
.triptych {
padding: 56px 0 8px;
border-top: 1px solid var(--line);
}
.triptych:first-of-type { border-top: 0; padding-top: 24px; }
.triptych-header {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
align-items: baseline;
margin-bottom: 36px;
}
.triptych-num {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-weight: 300;
font-size: 44px;
color: var(--amber-soft);
line-height: 1;
padding-top: 4px;
}
.triptych-headline { display: block; }
.triptych-title {
font-size: clamp(26px, 3.2vw, 38px);
line-height: 1.12;
letter-spacing: -0.012em;
margin-bottom: 12px;
}
.triptych-title em { color: var(--amber-soft); font-style: italic; font-weight: 300; }
.triptych-text {
color: var(--ink-dim);
font-size: 17px;
line-height: 1.6;
max-width: 620px;
margin: 0;
}
.triptych-text em { color: var(--amber-soft); font-style: italic; }
.triptych-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.triptych-frame {
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.triptych-media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #1a1612;
border: 1px solid var(--line);
}
.triptych-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.94) contrast(1.02);
transition: transform 600ms ease, filter 400ms ease;
}
.triptych-frame:hover .triptych-media img {
transform: scale(1.02);
filter: saturate(1.0) contrast(1.04);
}
.triptych-frame figcaption {
font-family: "Cormorant Garamond", serif;
font-size: 15.5px;
line-height: 1.5;
color: var(--ink-dim);
padding: 0 2px;
display: flex;
align-items: baseline;
gap: 10px;
}
.triptych-frame figcaption em {
color: var(--amber-soft);
font-style: italic;
}
.triptych-frame .cap-step {
font-family: "Inter", sans-serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-mute);
flex-shrink: 0;
padding-top: 2px;
}
/* === CTA finale === */
.laboratory-end {
padding: 70px 0 100px;
}
.end-wrap {
border-top: 1px solid var(--line);
padding-top: 60px;
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.end-wrap .kicker { margin-bottom: 18px; }
.end-wrap h3 {
font-size: clamp(28px, 3.6vw, 40px);
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.012em;
}
.end-wrap h3 em { color: var(--amber-soft); font-style: italic; font-weight: 300; }
.end-wrap p {
color: var(--ink-dim);
font-size: 17px;
line-height: 1.6;
margin: 0 0 28px;
}
.end-wrap .btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-2);
padding: 14px 24px;
font-family: "Inter", sans-serif;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 200ms, color 200ms, background 200ms;
}
.btn-ghost:hover {
border-color: var(--amber);
color: var(--amber-soft);
background: rgba(231,162,74,0.04);
}
/* ===================== Responsive ===================== */
/* Tablet (≤1024px) — 2 colonne, terza card a piena larghezza */
@media (max-width: 1024px) {
.subhero.subhero-photo { min-height: 50vh; padding: 84px 0 48px; }
.subhero-photo-img { object-position: center 38%; }
.laboratory-seasons { padding: 50px 0 32px; }
.laboratory-triptychs { padding: 50px 0 32px; }
.seasons-intro, .triptychs-intro { margin-bottom: 44px; }
.season, .triptych { padding: 44px 0 4px; }
.season-header, .triptych-header {
grid-template-columns: 60px 1fr;
gap: 18px;
margin-bottom: 28px;
}
.season-num, .triptych-num { font-size: 36px; }
.season-grid, .triptych-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.season-card:nth-child(3),
.triptych-frame:nth-child(3) {
grid-column: 1 / -1;
max-width: calc(50% - 10px);
margin: 0 auto;
}
}
/* Smartphone (≤720px) — 1 colonna, card più grandi */
@media (max-width: 720px) {
.subhero.subhero-photo {
min-height: 44vh;
padding: 76px 0 36px;
}
.subhero-photo-img { object-position: center 35%; }
.laboratory-sigillo .sigillo-frame {
width: 76px; height: 76px;
margin-bottom: 12px;
}
.laboratory-seasons { padding: 36px 0 20px; }
.laboratory-triptychs { padding: 36px 0 20px; }
.seasons-intro, .triptychs-intro {
margin-bottom: 32px;
}
.seasons-title, .triptychs-title {
font-size: clamp(28px, 8vw, 36px);
margin-bottom: 14px;
}
.seasons-sub, .triptychs-sub {
font-size: 16px;
}
.season, .triptych {
padding: 36px 0 4px;
}
.season-header, .triptych-header {
grid-template-columns: 48px 1fr;
gap: 14px;
margin-bottom: 24px;
}
.season-num, .triptych-num {
font-size: 30px;
padding-top: 2px;
}
.season-title, .triptych-title {
font-size: clamp(22px, 6.4vw, 28px);
margin-bottom: 10px;
}
.season-text, .triptych-text {
font-size: 16px;
}
/* su mobile: 1 colonna piena */
.season-grid, .triptych-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.season-card:nth-child(3),
.triptych-frame:nth-child(3) {
grid-column: auto;
max-width: 100%;
margin: 0;
}
.season-card figcaption,
.triptych-frame figcaption {
font-size: 16px;
padding: 0 4px;
}
.triptych-frame .cap-step {
font-size: 10px;
}
/* CTA finale */
.laboratory-end { padding: 50px 0 70px; }
.end-wrap {
padding-top: 44px;
}
.end-wrap h3 {
font-size: clamp(24px, 6.6vw, 30px);
}
.end-wrap p { font-size: 16px; }
}
/* Smartphone strettissimi (≤420px) — header in 1 colonna */
@media (max-width: 420px) {
.season-header, .triptych-header {
grid-template-columns: 1fr;
gap: 6px;
}
.season-num, .triptych-num {
font-size: 24px;
}
}
/* fine pasticceria — build 20260426g */
/* Iubenda: nascosto finché non termina l’intro e fino al primo scroll */
html.iubenda-delay #iubenda-cs-banner,
html.iubenda-delay .iubenda-cs-container,
html.iubenda-delay [class*="iubenda-cs"] {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.iubenda-show #iubenda-cs-banner,
html.iubenda-show .iubenda-cs-container,
html.iubenda-show [class*="iubenda-cs"] {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.newsletter .cf-turnstile {
margin-top: 14px;
margin-bottom: 4px;
}
.newsletter iframe {
max-width: 100%;
}
/* ===== Pulizia finale: rimozione linee dorate instabili ===== */
/* Home */
.hero-crack {
display: none !important;
}
/* Pasticceria + Rituali di cura */
.subhero-placeholder::after,
.subhero-placeholder.alt::after {
content: none !important;
display: none !important;
box-shadow: none !important;
}
@media (max-width: 640px) {
.hero-places {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 8px;
white-space: nowrap;
font-size: 11px;
letter-spacing: 0.08em;
}
.hero-places .dot {
flex: 0 0 auto;
}
}
.book-wrap:hover .book {
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.34),
0 0 24px rgba(231, 162, 74, 0.16),
0 0 54px rgba(231, 162, 74, 0.10);
}
.book {
box-shadow:
0 64px 120px -36px rgba(0,0,0,0.78),
0 24px 46px -18px rgba(0,0,0,0.48),
0 0 0 1px rgba(130,110,82,0.22),
inset 0 1px 0 rgba(255,240,210,0.10);
}
/* ========================================================
build 20260426g · sigillo cliccabile, social, amazon
======================================================== */
/* Sigillo del laboratorio cliccabile (link al sito esterno) */
.sigillo-link {
display: block;
text-decoration: none;
color: inherit;
margin-bottom: 6px;
transition: opacity 250ms ease;
}
.sigillo-link:hover { opacity: 0.92; }
.sigillo-link h4 {
margin: 12px 0 0;
transition: color 250ms ease;
}
.sigillo-link:hover h4 { color: var(--amber-soft); }
.sigillo-link:hover .sigillo-frame {
border-color: rgba(231,162,74,0.35);
box-shadow: 0 0 0 1px rgba(231,162,74,0.20), 0 14px 32px -16px rgba(0,0,0,0.65);
}
.laboratory-sigillo .sigillo-frame {
transition: border-color 250ms ease, box-shadow 250ms ease;
}
/* Link discreto al sito dolcilauretta.it nel paragrafo */
.sigillo-site {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--amber-soft);
text-decoration: none;
border-bottom: 1px solid rgba(231,162,74,0.25);
padding-bottom: 1px;
margin-left: 6px;
white-space: nowrap;
transition: color 200ms, border-color 200ms;
}
.sigillo-site:hover {
color: var(--amber);
border-bottom-color: var(--amber);
}
/* Social icons nel footer (Instagram + TikTok) */
.contact-social {
list-style: none;
margin: 12px 0 0 !important;
padding: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.contact-social a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink-dim);
text-decoration: none;
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 200ms ease;
}
.contact-social a svg {
flex-shrink: 0;
transition: stroke 200ms ease, color 200ms ease;
}
.contact-social a:hover { color: var(--amber-soft); }
.contact-social a:hover svg { color: var(--amber-soft); }
/* Link Amazon discreto, stessa famiglia degli altri footer */
.amazon-link {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid rgba(231,162,74,0.20);
padding-bottom: 1px;
transition: color 200ms, border-color 200ms;
}
.amazon-link:hover {
color: var(--amber-soft);
border-bottom-color: var(--amber-soft);
}
/* fine build 20260426g */
/* ========================================================
build 20260426g · spazi sub-pagine + logo a colori
======================================================== */
/* Sezioni "compatte" sulle sub-pagine: meno aria sotto la subhero
prima del manifesto, e meno aria prima delle quattro stagioni. */
.sec.sec-tight { padding: 60px 0 30px; }
.sec.sec-tight-top { padding-top: 30px; }
/* Pasticceria: stacco prima delle Quattro Stagioni e dei Trittici ridotto */
.laboratory-seasons { padding-top: 20px; }
.laboratory-triptychs { padding-top: 30px; }
/* CTA finale: respiro tra il titolo "arriveranno qui" e il bottone */
.end-wrap h3 { margin-bottom: 30px; }
.end-wrap .btn { margin-top: 6px; }
/* === Sigillo a COLORI (versione originale Dolci Tentazioni) === */
.laboratory-sigillo .sigillo-frame.sigillo-color {
width: 120px; height: 120px;
border: 1px solid rgba(231,162,74,0.22);
border-radius: 50%;
padding: 0;
margin: 4px 0 16px;
background: transparent;
display: block;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(231,162,74,0.10), 0 14px 32px -16px rgba(0,0,0,0.65);
transition: border-color 250ms ease, box-shadow 250ms ease;
}
.laboratory-sigillo .sigillo-color .sigillo-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 50%;
display: block;
filter: none;
opacity: 1;
}
/* Mobile: cerchio leggermente più piccolo */
@media (max-width: 720px) {
.laboratory-sigillo .sigillo-frame.sigillo-color {
width: 96px; height: 96px;
}
.sec.sec-tight { padding: 44px 0 20px; }
.laboratory-seasons { padding-top: 12px; }
.end-wrap h3 { margin-bottom: 24px; }
}
/* fine build 20260426g */
/* ========================================================
FIX regressioni mobile da versione 26/04
- blocco overflow orizzontale
- rientro didascalie pasticceria
======================================================== */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
body {
position: relative;
}
/* Pasticceria: foto edge-to-edge, testi e didascalie rientrati */
@media (max-width: 960px) {
.wrap.season,
.wrap.triptych {
padding-left: 0;
padding-right: 0;
}
.season-header,
.triptych-header {
padding-left: 24px;
padding-right: 24px;
}
.season-card figcaption,
.triptych-frame figcaption {
padding-left: 24px;
padding-right: 24px;
}
}
/* Home mobile: evita che i luoghi forzino la larghezza pagina */
@media (max-width: 640px) {
.hero-places {
flex-wrap: wrap;
white-space: normal;
}
}
/* ========================================================
build 20260426g · disclaimer affiliato Amazon
======================================================== */
.presales .amazon-disclaimer {
font-size: 15px;
color: var(--ink-mute);
font-style: italic;
letter-spacing: 0.02em;
line-height: 1.45;
margin: 4px 0 8px;
list-style: none;
}
/* fine build 20260426g */
/* ========================================================
build 20260512a · photo-block full-bleed (Rituali di cura)
======================================================== */
.photo-block {
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
background: #060505;
}
.photo-block-img {
display: block;
width: 100%;
height: 56vh;
max-height: 640px;
min-height: 320px;
object-fit: cover;
object-position: center;
filter: saturate(0.92) contrast(1.02) brightness(0.86);
}
@media (max-width: 1024px) {
.photo-block-img { height: 48vh; min-height: 280px; }
}
@media (max-width: 720px) {
.photo-block-img { height: 40vh; min-height: 220px; max-height: 460px; }
}
/* ===== Per chi è questo libro (home) ===== */
.forwhom {
margin-top: 38px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.forwhom .kicker {
margin-bottom: 18px;
color: var(--amber-soft);
}
.forwhom-line {
font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
font-size: 18px;
line-height: 1.55;
color: var(--ink);
margin: 0 0 6px 0;
letter-spacing: 0.005em;
}
.forwhom-line:first-of-type { margin-top: 0; }
.forwhom-payoff {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(231,162,74,0.18);
font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
font-size: 16px;
color: var(--ink-dim);
line-height: 1.5;
}
.forwhom-payoff em { color: var(--amber-soft); font-style: italic; }
@media (max-width: 720px) {
.forwhom { margin-top: 32px; padding-top: 24px; }
.forwhom-line { font-size: 17px; }
.forwhom-payoff { font-size: 15px; }
}
/* ===== Extract modal CTA ===== */
.modal-cta {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(231,162,74,0.16);
display: flex;
justify-content: flex-start;
}
.modal-cta .btn-primary { font-size: 11px; padding: 13px 22px; }
@media (max-width: 720px) {
.modal-cta { justify-content: stretch; }
.modal-cta .btn-primary { width: 100%; justify-content: center; }
}
/* ===== Footer: ulteriore h5 spaziato (Estensioni del libro) ===== */
.footer-h5-spaced { margin-top: 28px !important; }
/* ===== Newsletter — microcopy rafforzata ===== */
.newsletter .nl-intro {
font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
font-size: 15.5px;
line-height: 1.55;
color: var(--ink-dim);
margin: 14px 0 18px 0;
letter-spacing: 0.005em;
}
.newsletter .nl-intro em { color: var(--amber-soft); font-style: italic; }
@media (max-width: 720px) {
.newsletter .nl-intro { font-size: 14.5px; }
}
/* ===== Estratto page ===== */
.site.estratto-page { padding-top: 0; }
/* Topmark "← Copertina": stesso stile di .site.subpage (regola unica più in alto) */
.estratto-hero {
padding: 130px 0 60px;
position: relative;
border-bottom: 1px solid var(--line);
}
.estratto-hero .wrap { max-width: 920px; }
.estratto-hero .kicker { margin-bottom: 18px; color: var(--amber-soft); }
.estratto-hero h1 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(40px, 5.5vw, 64px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.012em;
color: var(--ink);
margin: 0 0 22px 0;
}
.estratto-hero h1 em { color: var(--amber-soft); font-style: italic; font-weight: 400; }
.estratto-hero .estratto-sub {
font-family: "Cormorant Garamond", serif;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.45;
color: var(--ink-dim);
max-width: 60ch;
margin: 0;
}
.estratto-hero .estratto-sub em { color: var(--ink); font-style: italic; }
.estratto-progress {
position: fixed; top: 0; left: 0;
height: 1.5px;
width: 0;
background: linear-gradient(90deg, var(--amber-deep), var(--amber-soft));
z-index: 100;
transition: width 100ms linear;
opacity: 0.85;
}
.estratto-note {
padding: 56px 0 40px;
border-bottom: 1px solid var(--line);
}
.estratto-note .wrap { max-width: 720px; }
.estratto-note p {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.65;
color: var(--ink-dim);
margin: 0 0 16px 0;
font-style: italic;
}
.estratto-note p:last-child { margin-bottom: 0; }
.estratto-note .estratto-copyright {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-style: normal;
margin-top: 24px;
}
.estratto-passage {
padding: 64px 0;
border-bottom: 1px solid var(--line);
}
.estratto-passage .wrap { max-width: 660px; }
.estratto-passage-num {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--amber-soft);
margin-bottom: 14px;
}
.estratto-passage h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(32px, 4vw, 46px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 8px 0;
color: var(--ink);
}
.estratto-passage h2 em { color: var(--amber-soft); font-style: italic; font-weight: 400; }
.estratto-passage .estratto-passage-meta {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 0 0 34px 0;
}
.estratto-passage p {
font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
font-size: 19px;
line-height: 1.72;
color: var(--ink);
margin: 0 0 20px 0;
letter-spacing: 0.005em;
}
.estratto-passage p em { font-style: italic; }
.estratto-passage .estratto-dotline {
text-align: center;
margin: 28px 0;
color: var(--ink-mute);
letter-spacing: 0.8em;
font-size: 14px;
}
.estratto-interlude {
padding: 64px 0;
background:
radial-gradient(800px 400px at 50% 50%, rgba(231,162,74,0.04), transparent 70%),
transparent;
border-bottom: 1px solid var(--line);
}
.estratto-interlude .wrap { max-width: 660px; text-align: center; }
.estratto-interlude .kicker { margin-bottom: 16px; color: var(--amber-soft); }
.estratto-interlude p {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 18px;
line-height: 1.6;
color: var(--ink-dim);
margin: 0 0 14px 0;
}
.estratto-close {
padding: 70px 0 80px;
}
.estratto-close .wrap { max-width: 720px; text-align: center; }
.estratto-close .estratto-close-text {
font-family: "Cormorant Garamond", serif;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.45;
color: var(--ink);
margin: 0 0 38px 0;
font-style: italic;
}
.estratto-close .estratto-close-text em { color: var(--amber-soft); font-style: italic; }
.estratto-close .estratto-ctas {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.estratto-close .estratto-ctas .btn { min-width: 280px; justify-content: center; }
.estratto-close .estratto-ctas-secondary {
margin-top: 8px;
font-family: "Inter", sans-serif;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--ink-mute);
}
.estratto-close .estratto-ctas-secondary a {
color: var(--ink-dim);
text-decoration: none;
border-bottom: 1px solid var(--line-2);
padding-bottom: 2px;
}
.estratto-close .estratto-ctas-secondary a:hover { color: var(--amber-soft); border-color: var(--amber); }
@media (max-width: 720px) {
.estratto-hero { padding: 110px 0 44px; }
.estratto-note { padding: 44px 0 32px; }
.estratto-passage { padding: 48px 0; }
.estratto-passage p { font-size: 17.5px; line-height: 1.7; }
.estratto-passage h2 { font-size: 30px; }
.estratto-interlude { padding: 48px 0; }
.estratto-close { padding: 56px 0 64px; }
.estratto-close .estratto-ctas .btn { width: 100%; min-width: 0; }
}
/* ===== Gruppi di lettura page ===== */
.gruppi-hero {
padding: 130px 0 56px;
border-bottom: 1px solid var(--line);
}
.gruppi-hero .wrap { max-width: 900px; }
.gruppi-hero .kicker { margin-bottom: 18px; color: var(--amber-soft); }
.gruppi-hero h1 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(40px, 5.5vw, 64px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.012em;
margin: 0 0 22px 0;
}
.gruppi-hero h1 em { color: var(--amber-soft); font-style: italic; font-weight: 400; }
.gruppi-hero .gruppi-sub {
font-family: "Cormorant Garamond", serif;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.5;
color: var(--ink-dim);
max-width: 56ch;
font-style: italic;
margin: 0;
}
.gruppi-intro {
padding: 56px 0 40px;
border-bottom: 1px solid var(--line);
}
.gruppi-intro .wrap { max-width: 720px; }
.gruppi-intro h3 {
font-family: "Cormorant Garamond", serif;
font-size: 24px;
font-weight: 400;
color: var(--ink);
margin: 0 0 18px 0;
letter-spacing: -0.005em;
}
.gruppi-intro p {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
line-height: 1.7;
color: var(--ink-dim);
margin: 0 0 14px 0;
}
.gruppi-intro p:last-child { margin-bottom: 0; }
.gruppi-intro p em { color: var(--ink); font-style: italic; }
.gruppi-domande {
padding: 64px 0 48px;
background:
radial-gradient(900px 600px at 20% 20%, rgba(231,162,74,0.04), transparent 60%),
rgba(8,8,10,0.55);
border-bottom: 1px solid var(--line);
}
.gruppi-domande .wrap { max-width: 880px; }
.gruppi-domande .kicker { margin-bottom: 12px; color: var(--amber-soft); }
.gruppi-domande h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 40px 0;
}
.gruppi-domande h2 em { color: var(--amber-soft); font-style: italic; }
.gruppi-domanda-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px 56px;
margin: 0;
padding: 0;
list-style: none;
}
.gruppi-domanda {
display: flex;
gap: 20px;
align-items: flex-start;
}
.gruppi-domanda .num {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.28em;
color: var(--amber-soft);
font-weight: 500;
min-width: 28px;
padding-top: 6px;
}
.gruppi-domanda .text {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.55;
color: var(--ink);
}
.gruppi-domanda .text .domanda-q { display: block; margin-top: 6px; color: var(--ink-dim); font-style: italic; }
@media (max-width: 880px) {
.gruppi-domanda-list { grid-template-columns: 1fr; gap: 28px; }
}
.gruppi-traccia {
padding: 64px 0 48px;
border-bottom: 1px solid var(--line);
}
.gruppi-traccia .wrap { max-width: 720px; }
.gruppi-traccia .kicker { margin-bottom: 12px; color: var(--amber-soft); }
.gruppi-traccia h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(26px, 3vw, 34px);
font-weight: 400;
margin: 0 0 30px 0;
letter-spacing: -0.005em;
}
.gruppi-traccia h2 em { color: var(--amber-soft); font-style: italic; }
.gruppi-traccia-list {
list-style: none;
margin: 0;
padding: 0;
}
.gruppi-tappa {
display: grid;
grid-template-columns: 110px 1fr;
gap: 24px;
padding: 18px 0;
border-top: 1px solid var(--line);
}
.gruppi-tappa:first-child { border-top: 0; padding-top: 0; }
.gruppi-tappa .tempo {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--amber-soft);
padding-top: 4px;
}
.gruppi-tappa .desc {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.55;
color: var(--ink);
}
.gruppi-tappa .desc strong {
font-weight: 500;
color: var(--ink);
}
.gruppi-tappa .desc em { color: var(--ink-dim); font-style: italic; }
@media (max-width: 600px) {
.gruppi-tappa { grid-template-columns: 1fr; gap: 8px; }
}
.gruppi-cta {
padding: 64px 0 80px;
}
.gruppi-cta .wrap { max-width: 720px; text-align: center; }
.gruppi-cta .cta-row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-top: 18px;
}
.gruppi-cta .cta-row .btn { min-width: 240px; justify-content: center; }
.gruppi-cta .gruppi-cta-note {
font-family: "Cormorant Garamond", serif;
font-style: italic;
font-size: 17px;
line-height: 1.55;
color: var(--ink-dim);
margin: 0 auto 6px auto;
max-width: 50ch;
}
@media (max-width: 720px) {
.gruppi-cta .cta-row .btn { width: 100%; min-width: 0; }
}
/* ===== Stampa page ===== */
.stampa-hero {
padding: 130px 0 56px;
border-bottom: 1px solid var(--line);
}
.stampa-hero .wrap { max-width: 920px; }
.stampa-hero .kicker { margin-bottom: 18px; color: var(--amber-soft); }
.stampa-hero h1 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(40px, 5.5vw, 64px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.012em;
margin: 0 0 22px 0;
}
.stampa-hero h1 em { color: var(--amber-soft); font-style: italic; font-weight: 400; }
.stampa-hero .stampa-sub {
font-family: "Cormorant Garamond", serif;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.55;
color: var(--ink-dim);
max-width: 64ch;
margin: 0 0 28px 0;
}
.stampa-hero .stampa-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
.stampa-block {
padding: 56px 0 48px;
border-bottom: 1px solid var(--line);
}
.stampa-block .wrap { max-width: 920px; }
.stampa-block .kicker { margin-bottom: 14px; color: var(--amber-soft); }
.stampa-block h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(26px, 3vw, 34px);
font-weight: 400;
margin: 0 0 28px 0;
letter-spacing: -0.005em;
}
.stampa-block h2 em { color: var(--amber-soft); font-style: italic; }
.stampa-block p {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.7;
color: var(--ink-dim);
margin: 0 0 14px 0;
max-width: 68ch;
}
.stampa-block p:last-child { margin-bottom: 0; }
.stampa-block p em { color: var(--ink); font-style: italic; }
.stampa-table {
display: grid;
grid-template-columns: 200px 1fr;
gap: 14px 32px;
font-family: "Cormorant Garamond", serif;
margin: 0;
}
.stampa-table dt {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
padding-top: 4px;
font-weight: 500;
}
.stampa-table dd {
font-size: 17px;
color: var(--ink);
margin: 0;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.stampa-table dd:last-of-type { border-bottom: 0; }
.stampa-table dd em { color: var(--amber-soft); font-style: italic; }
@media (max-width: 720px) {
.stampa-table { grid-template-columns: 1fr; gap: 4px; }
.stampa-table dt { padding-top: 8px; }
.stampa-table dd { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
}
.stampa-temi-list,
.stampa-materiali-list {
list-style: none;
padding: 0;
margin: 0;
font-family: "Cormorant Garamond", serif;
}
.stampa-temi-list li,
.stampa-materiali-list li {
font-size: 17px;
line-height: 1.5;
color: var(--ink);
padding: 10px 0 10px 22px;
border-top: 1px solid var(--line);
position: relative;
}
.stampa-temi-list li:first-child,
.stampa-materiali-list li:first-child { border-top: 0; }
.stampa-temi-list li::before,
.stampa-materiali-list li::before {
content: "·";
position: absolute;
left: 0;
color: var(--amber-soft);
font-size: 22px;
line-height: 1.2;
}
.stampa-domande-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 22px;
}
.stampa-domanda {
display: flex;
gap: 18px;
}
.stampa-domanda .num {
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.28em;
color: var(--amber-soft);
font-weight: 500;
min-width: 24px;
padding-top: 5px;
}
.stampa-domanda .q {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1.55;
color: var(--ink);
}
.stampa-contact {
padding: 56px 0 80px;
text-align: center;
}
.stampa-contact .wrap { max-width: 720px; }
.stampa-contact p {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-style: italic;
color: var(--ink-dim);
margin: 0 0 18px 0;
}
.stampa-contact a {
color: var(--amber-soft);
text-decoration: none;
border-bottom: 1px solid rgba(231,162,74,0.45);
padding-bottom: 2px;
}
.stampa-contact a:hover { color: var(--amber); border-color: var(--amber); }
/* fine build 20260512b */
/* ---------------------------------------------------------------
AGGIUNTA · 13 maggio 2026
Classe .micro-label
Sostituisce le label inline ripetute in stampa.html
(sezioni: Descrizione breve, Descrizione lunga, Bio breve, Bio lunga)
--------------------------------------------------------------- */
.micro-label {
color: var(--ink);
font-weight: 500;
font-family: "Inter", sans-serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------
AGGIUNTA · blockquote per il comunicato stampa pronto
Usato nella nuova sezione di stampa.html
--------------------------------------------------------------- */
.stampa-comunicato {
margin: 24px 0 0;
padding: 28px 32px;
border-left: 1px solid var(--amber-soft, rgba(255, 200, 130, 0.4));
background: rgba(255, 255, 255, 0.02);
font-family: "Cormorant Garamond", Garamond, serif;
font-size: 17px;
line-height: 1.6;
color: var(--ink);
}
.stampa-comunicato p {
margin: 0 0 14px;
}
.stampa-comunicato p:last-child {
margin-bottom: 0;
}
.stampa-comunicato strong {
font-family: "Inter", sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
}
.gruppi-ctas {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
.gruppi-ctas .btn {
min-width: 220px;
}
/* ========================================================
FIX 20260516b · Estratto completo come popup breve
Tocca SOLO la pagina estratto.html, non il popup
======================================================== */
.site.estratto-page .estratto-passage p {
font-family: "Cormorant Garamond", serif !important;
font-weight: 300 !important;
font-style: normal;
font-size: 19px;
line-height: 1.7;
letter-spacing: 0;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.site.estratto-page .estratto-passage p em {
font-family: "Cormorant Garamond", serif !important;
font-weight: 300 !important;
font-style: italic !important;
font-synthesis: none;
}
@media (max-width: 720px) {
.site.estratto-page .estratto-passage p {
font-size: 17.5px;
line-height: 1.7;
}
}
/* === V. Eventi · Contatti — layout evergreen (build 20260526a) ===
Colonna sinistra: card "Il libro" + "Presentazioni" impilate (altezza uguale,
stretching per allinearsi linearmente alla newsletter a destra).
colonna destra: newsletter "Resta in ascolto". Niente due card affiancate (≠ sezione cura). */
.find-col { display: flex; flex-direction: column; gap: 26px; height: 100%; }
.find-card {
border: 1px solid var(--line-2);
padding: 36px 34px;
background: linear-gradient(180deg, rgba(231,162,74,0.04), transparent);
display: flex; flex-direction: column;
flex: 1 1 0;
}
.find-card .kicker { margin-bottom: 18px; }
.find-card h3 {
font-family: "Cormorant Garamond", serif;
font-size: 30px; font-weight: 300; font-style: italic;
color: var(--ink); line-height: 1.1; margin: 0 0 14px;
}
.find-card h3 em { color: var(--amber-soft); }
.find-card p { color: var(--ink-dim); font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
.find-card .find-meta { color: var(--ink-dim); }
.find-card .btn { margin-top: auto; align-self: flex-start; }
.prossime { border-top: 1px solid var(--line); padding-top: 24px; }
.prossime .kicker { margin-bottom: 12px; }
.prossime p {
color: var(--ink-mute);
font-family: "Cormorant Garamond", serif;
font-style: italic; font-size: 18px; line-height: 1.6;
max-width: 640px; margin: 0;
}
.prossime p a { color: var(--ink-dim); font-style: normal; }
.prossime p a:hover { color: var(--amber-soft); }
.book-availability {
margin-top: 38px;
font-family: "Cormorant Garamond", serif;
font-style: italic; font-size: 17px;
color: var(--ink-dim);
}
.book-availability a { color: var(--amber-soft); font-style: normal; letter-spacing: 0.02em; }
.book-availability a:hover { color: var(--amber); }
@media (max-width: 720px) {
.find-col { gap: 22px; }
.find-card { padding: 30px 26px; }
}