/* ============================================================================ Progetti Bridge — foglio di stile Tema chiaro/scuro/auto via [data-theme] su (+ prefers-color-scheme). Animazioni con CSS moderno: scroll-driven view(), @starting-style, . ========================================================================== */ :root { /* Tema CHIARO "caldo": carta di lino, mai bianco puro, inchiostro bruno al posto del nero. Contrasto testo/fondo ~10.5:1 (AAA ma riposante), lontano dal bianco+nero abbagliante. I neutri hanno una velatura calda voluta. */ --bg: #ddd4c0; --surface: #e9e2cf; --surface-2: #d0c5aa; --ink: #2e2a22; --ink-soft: #56503f; --ink-faint: #857b62; --border: #c4b898; --border-strong: #ac9d76; --accent: #0f8a5f; --accent-ink: #0a6446; --shadow-sm: 0 1px 2px rgba(58, 48, 32, 0.09), 0 2px 8px rgba(58, 48, 32, 0.08); --shadow-lg: 0 24px 60px -18px rgba(58, 48, 32, 0.32); --radius: 18px; --radius-sm: 12px; --maxw: 1120px; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #0d0e10; --surface: #17191c; --surface-2: #1e2125; --ink: #ecedef; --ink-soft: #a7adb4; --ink-faint: #767c83; --border: #24272c; --border-strong: #333840; --accent: #2fb587; --accent-ink: #57d3a6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.28); --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.66); color-scheme: dark; } } :root[data-theme="light"] { --bg: #ddd4c0; --surface: #e9e2cf; --surface-2: #d0c5aa; --ink: #2e2a22; --ink-soft: #56503f; --ink-faint: #857b62; --border: #c4b898; --border-strong: #ac9d76; --accent: #0f8a5f; --accent-ink: #0a6446; --shadow-sm: 0 1px 2px rgba(58,48,32,.09), 0 2px 8px rgba(58,48,32,.08); --shadow-lg: 0 24px 60px -18px rgba(58,48,32,.32); color-scheme: light; } :root[data-theme="dark"] { --bg: #0d0e10; --surface: #17191c; --surface-2: #1e2125; --ink: #ecedef; --ink-soft: #a7adb4; --ink-faint: #767c83; --border: #24272c; --border-strong: #333840; --accent: #2fb587; --accent-ink: #57d3a6; --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.28); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.66); color-scheme: dark; } /* Accento del SITO (fisso), distinto da --accent che i progetti sovrascrivono. */ :root { --brand: #0f8a5f; } @media (prefers-color-scheme: dark) { :root { --brand: #2fb587; } } :root[data-theme="light"] { --brand: #0f8a5f; } :root[data-theme="dark"] { --brand: #2fb587; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); } /* =========================================================================== PAGINA PUBBLICA — 5 interfacce commutabili (data-ui su ) =========================================================================== */ body { min-height: 100svh; padding-bottom: 92px; } main { position: relative; } /* ---- Header (usato SOLO da admin.html) ---- */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.4) blur(12px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: -.01em; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem; flex: none; } /* ---- Theme toggle segmentato ---- */ .theme-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; } .theme-seg button { width: 32px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ink-faint); display: grid; place-items: center; transition: background .16s, color .16s; } .theme-seg button:hover { color: var(--ink); } .theme-seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .theme-seg svg { width: 17px; height: 17px; } .theme-float { position: fixed; top: clamp(.9rem, 2.5vw, 1.4rem); right: clamp(.9rem, 2.5vw, 1.4rem); z-index: 60; } .theme-float .theme-seg { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); box-shadow: var(--shadow-sm); } /* ---- Frecce di navigazione ---- */ .nav-arrows { position: fixed; right: clamp(.8rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); z-index: 55; display: none; flex-direction: column; gap: .5rem; } .nav-arrows[data-show="1"] { display: flex; } .nav-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); box-shadow: var(--shadow-sm); transition: transform .18s, background .18s, border-color .18s; } .nav-arrow:hover { transform: scale(1.08); border-color: var(--brand); color: var(--brand); } .nav-arrow:active { transform: scale(.96); } /* ---- Elementi condivisi dai progetti ---- */ .p-eyebrow { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0 0 .8rem; } .p-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; margin: 0 0 .9rem; text-wrap: balance; } .p-desc { color: var(--ink-soft); line-height: 1.6; margin: 0 0 1.2rem; } .p-highlights { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .5rem; } .p-highlights li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; } .p-highlights li::before { content: ""; margin-top: .55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--brand)); flex: none; } .p-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; } .tag { font-size: .74rem; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: .22rem .6rem; } .p-actions { display: flex; gap: .7rem; flex-wrap: wrap; } .p-mono { font-family: var(--font-display); font-weight: 600; color: color-mix(in srgb, var(--accent, var(--brand)) 88%, var(--ink)); letter-spacing: -.03em; line-height: 1; user-select: none; } .p-logo-img { width: 62%; height: 62%; object-fit: contain; } .p-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .p-status-float { position: absolute; top: 1rem; left: 1rem; z-index: 2; } .status { position: relative; display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .02em; padding: .28rem .7rem .28rem .62rem; border-radius: 999px; color: #fff; background: rgba(14, 20, 24, .68); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .status-live::before { background: #2ee38a; box-shadow: 0 0 8px rgba(46, 227, 138, .9); animation: live-glow 1.6s ease-in-out infinite; } .status-live::after { content: ""; position: absolute; left: .62rem; top: 50%; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #2ee38a; transform: translateY(-50%); animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; } .status-beta::before { background: #ffc23d; box-shadow: 0 0 6px rgba(255, 194, 61, .7); } .status-wip::before { background: #b8c4cc; } @keyframes live-glow { 50% { opacity: .55; box-shadow: 0 0 3px rgba(46, 227, 138, .5); } } @keyframes live-ping { 0% { transform: translateY(-50%) scale(1); opacity: .9; } 80%, 100% { transform: translateY(-50%) scale(2.7); opacity: 0; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #16b56f 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1.05rem; border-radius: 11px; font-weight: 600; font-size: .9rem; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink); transition: transform .12s, background .16s, border-color .16s; } .btn:hover { border-color: var(--ink-faint); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent, var(--brand)); border-color: transparent; color: #fff; } .btn-primary:hover { filter: brightness(.94); } .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn svg { width: 16px; height: 16px; } /* Reveal fade-in/out premium (IntersectionObserver → .in-view) — FALLBACK */ .reveal { opacity: 0; transform: translateY(38px) scale(.985); filter: blur(6px); transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1), filter .85s ease; } .reveal.in-view { opacity: 1; transform: none; filter: none; } /* Soccorso anti-blocco (vedi app.js): forza la visibilita' se il timeline scroll-driven del browser non e' mai progredito. */ .reveal-rescue, .reveal-rescue .project-body > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } /* Scroll-Driven Animations (CSS): dove il browser le supporta, l'apparizione del contenuto è legata a QUANTO si scrolla (progressione morbida), non a un semplice trigger d'ingresso. Dove non sono supportate resta il fallback IntersectionObserver qui sopra. Rispetta prefers-reduced-motion (più in basso forziamo tutto visibile). */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Fine entro entry ~55%: per le sezioni a tutta pagina il punto "centrato" coincide con entry 100%, quindi il contenuto è pienamente visibile a riposo. */ .reveal { opacity: 1; transform: none; filter: none; transition: none; animation: sda-reveal both linear; animation-timeline: view(); animation-range: entry 4% entry 52%; } /* In cinema la sezione-progetto non deve dissolversi tutta: resta piena e animiamo solo il suo contenuto (visual + testo). */ [data-ui="cinema"] .project.reveal { animation: none; opacity: 1; } /* Testo dei progetti: stagger legato allo scroll della sezione (fine ≤ entry 75%). */ .project-body > * { opacity: 1; transform: none; transition: none; animation: sda-rise both linear; animation-timeline: view(); } .project-body > *:nth-child(1){ animation-range: entry 15% entry 50%; } .project-body > *:nth-child(2){ animation-range: entry 20% entry 55%; } .project-body > *:nth-child(3){ animation-range: entry 25% entry 60%; } .project-body > *:nth-child(4){ animation-range: entry 30% entry 65%; } .project-body > *:nth-child(5){ animation-range: entry 35% entry 70%; } .project-body > *:nth-child(6){ animation-range: entry 40% entry 75%; } } @keyframes sda-reveal { from { opacity: 0; transform: translateY(38px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } @keyframes sda-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } } /* ---- HERO ---- */ .hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: clamp(4rem,10vw,7rem) clamp(1.1rem,4vw,2rem) clamp(3rem,6vw,4rem); } .hero-inner { max-width: min(94vw, 900px); display: flex; flex-direction: column; align-items: center; } /* Logo firma in cima all'intro: due varianti (inchiostro/bianco) in crossfade automatico sul tema chiaro/scuro. */ .hero-logo { position: relative; width: min(560px, 84vw); aspect-ratio: 1688 / 427; margin: 0 0 clamp(2rem, 5vw, 3.2rem); animation: rise .8s cubic-bezier(.2,.7,.3,1) both; } .hero-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s ease; } .logo-ink { opacity: 1; } .logo-light { opacity: 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-ink { opacity: 0; } :root:not([data-theme="light"]) .logo-light { opacity: 1; } } :root[data-theme="dark"] .logo-ink { opacity: 0; } :root[data-theme="dark"] .logo-light { opacity: 1; } :root[data-theme="light"] .logo-ink { opacity: 1; } :root[data-theme="light"] .logo-light { opacity: 0; } .hero-eyebrow { font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0 0 1.2rem; animation: rise .8s .05s cubic-bezier(.2,.7,.3,1) both; } .hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.8rem,9vw,6rem); line-height: .98; letter-spacing: -.025em; margin: 0 0 1.3rem; text-wrap: balance; animation: rise .9s .12s cubic-bezier(.2,.7,.3,1) both; } .hero-tagline { font-size: clamp(1.05rem,2.6vw,1.35rem); color: var(--ink-soft); margin: 0; max-width: 42ch; line-height: 1.5; animation: rise .9s .2s cubic-bezier(.2,.7,.3,1) both; } .hero-note { font-size: .82rem; color: var(--ink-faint); margin: .5rem 0 0; font-style: italic; animation: rise .9s .26s cubic-bezier(.2,.7,.3,1) both; } .hero-scroll { margin-top: clamp(2.2rem,6vw,3.6rem); color: var(--ink-faint); display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: transparent; cursor: pointer; animation: rise 1s .3s cubic-bezier(.2,.7,.3,1) both, floaty 2.6s 1.2s ease-in-out infinite; transition: color .2s, border-color .2s, background .2s; } .hero-scroll:hover { color: var(--ink); border-color: var(--border-strong); background: var(--surface-2); } /* ===== Hero: cassettiera 3D interattiva (pura CSS, ispirata a jh3y "Pure CSS Drawers"). Clicca un cassetto per aprirlo e leggere la parola. Colori legati ai token del tema (chiaro/scuro). ===== */ .chest-stage { --hover: 0.06; --default: 0.012; --limit: 0.92; --height: 26; --width: 18; --depth: 13; --frame: 1; /* Unità base del modello 3D: come 1vmin ma CAPPATA, così su schermi grandi la cassettiera non cresce all'infinito sforando fuori dal contenitore e coprendo titolo/sottotitolo. */ --vu: min(1vmin, 8.4px); --transition: 0.34s; --unit-one: color-mix(in srgb, var(--ink) 74%, var(--surface)); --unit-two: color-mix(in srgb, var(--ink) 60%, var(--surface)); --unit-three: color-mix(in srgb, var(--ink) 46%, var(--surface)); --unit-four: color-mix(in srgb, var(--ink) 40%, var(--surface)); --drawer-one: color-mix(in srgb, var(--ink) 5%, var(--surface)); --drawer-two: color-mix(in srgb, var(--ink) 15%, var(--surface)); --drawer-three: color-mix(in srgb, var(--ink) 9%, var(--surface)); --handle: color-mix(in srgb, var(--ink) 34%, var(--surface)); display: grid; place-items: center; height: clamp(200px, 30vmin, 262px); margin: .2rem 0 clamp(2rem, 5vmin, 3rem); animation: rise .9s .1s cubic-bezier(.2,.7,.3,1) both; touch-action: none; /* il drag ruota la scena, non scrolla la pagina */ cursor: grab; user-select: none; } .chest-stage.grabbing { cursor: grabbing; } .chest-stage, .chest-stage *, .chest-stage *::before, .chest-stage *::after { transform-style: preserve-3d; box-sizing: border-box; } .chest-stage .chest { position: relative; height: calc(var(--height) * var(--vu)); width: calc(var(--width) * var(--vu)); transform: rotateX(var(--rx, -30deg)) rotateY(var(--ry, 38deg)); color: var(--ink); will-change: transform; } .chest-stage .chest__panel { position: absolute; } .chest-stage .chest__panel--back { background: var(--unit-two); } .chest-stage .chest__panel--back, .chest-stage .chest__panel--front { height: 100%; width: 100%; transform: translate3d(0, 0, calc(var(--depth) * var(--coefficient))); } .chest-stage .chest__panel--front-frame { height: 100%; width: 100%; border: calc(var(--frame) * var(--vu)) solid var(--unit-one); border-bottom-width: calc(var(--frame) * 2 * var(--vu)); transform: translate3d(0, 0, 0); } .chest-stage .chest__panel--front-frame::after, .chest-stage .chest__panel--front-frame::before { content: ''; background: var(--unit-one); height: calc(var(--frame) * 1.5 * var(--vu)); width: calc(var(--width) * var(--vu)); position: absolute; transform: translate(-50%, -50%); left: 50%; } .chest-stage .chest__panel--front-frame::after { top: calc(100 / 3 * 1.01%); } .chest-stage .chest__panel--front-frame::before { top: calc(100 / 3 * 2.01%); } .chest-stage .chest__panel--front { --coefficient: calc(0.5 * var(--vu)); } .chest-stage .chest__panel--back { --coefficient: calc(-0.5 * var(--vu)); } .chest-stage .chest__panel--left, .chest-stage .chest__panel--right { height: 100%; left: 50%; width: calc(var(--depth) * var(--vu)); background: var(--unit-three); transform: translate(-50%, 0) rotateY(90deg) translate3d(0, 0, calc(var(--width) * var(--coefficient))); } .chest-stage .chest__panel--right { width: calc((var(--depth) * var(--vu)) + 2px); --coefficient: calc(0.5 * var(--vu)); } .chest-stage .chest__panel--left { --coefficient: calc(-0.5 * var(--vu)); } .chest-stage .chest__panel--top, .chest-stage .chest__panel--bottom { height: calc(var(--depth) * var(--vu)); width: calc(var(--width) * var(--vu)); background: var(--unit-two); } .chest-stage .chest__panel--top { top: 0; width: calc((var(--width) + 0.1) * var(--vu)); height: calc((var(--depth) + 0.1) * var(--vu)); left: 50%; transform: translate(-50%, -50%) rotateX(-90deg); } .chest-stage .chest__panel--bottom { bottom: 0; transform: translate(0, 50%) rotateX(-90deg); } .chest-stage .chest__drawer { --drawer-height: calc((var(--height) - (5 * var(--frame))) / 3); position: absolute; top: var(--top, 0); left: 50%; height: calc(var(--drawer-height) * var(--vu)); width: calc((var(--width) - (2 * var(--frame))) * var(--vu)); transform: translate3d(-50%, 0, calc((var(--depth) * 0.5 + 0.01) * var(--vu))); } .chest-stage .chest__drawer[data-position="1"] { --top: calc(var(--frame) * var(--vu)); } .chest-stage .chest__drawer[data-position="2"] { --top: calc(((2 * var(--frame)) + var(--drawer-height)) * var(--vu)); } .chest-stage .chest__drawer[data-position="3"] { --top: calc(((3 * var(--frame)) + (2 * var(--drawer-height))) * var(--vu)); } .chest-stage .drawer__structure { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .chest-stage .drawer__panel { position: absolute; } .chest-stage .drawer__panel--left, .chest-stage .drawer__panel--right { width: calc(var(--depth) * var(--vu)); height: 65%; background: var(--drawer-two); bottom: 1%; } .chest-stage .drawer__panel--left { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); } .chest-stage .drawer__panel--right { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); } .chest-stage .drawer__panel--front { height: calc((var(--drawer-height) + (0.6 * var(--frame))) * var(--vu)); width: calc((var(--width) - (0.6 * var(--frame))) * var(--vu)); top: 50%; left: 50%; transform: translate3d(-50%, -50%, 1px); background: var(--unit-four); border-radius: calc(0.4 * var(--vu)); } .chest-stage .drawer__panel--bottom, .chest-stage .drawer__panel--back { width: 100%; } .chest-stage .drawer__panel--bottom { height: calc(var(--depth) * var(--vu)); background: var(--drawer-three); bottom: 5%; left: 50%; transform-origin: 50% 100%; transform: translate(-50%, 0) rotateX(90deg); } .chest-stage .drawer__panel--back { height: 65%; background: var(--drawer-one); bottom: 1%; left: 50%; transform: translate3d(-50%, 0, calc(var(--depth) * -1 * var(--vu))); text-align: center; line-height: calc(var(--drawer-height) * 0.65 * var(--vu)); font-family: var(--font-display, serif); font-weight: 600; font-size: calc(1.95 * var(--vu)); letter-spacing: -.01em; color: var(--accent, var(--brand)); white-space: nowrap; overflow: visible; } .chest-stage details { position: absolute; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; outline: transparent; } .chest-stage details:hover:not([open]), .chest-stage details:hover:not([open]) + .drawer__structure { --open: var(--hover); } .chest-stage details, .chest-stage .drawer__structure { transition: transform var(--transition) cubic-bezier(.2,.7,.3,1); transform: translate3d(0, 0, calc((var(--open, var(--default)) * var(--depth)) * var(--vu))); } .chest-stage details[open], .chest-stage details[open] + .drawer__structure { --open: var(--limit); } .chest-stage summary { outline: transparent; height: 100%; width: 100%; list-style: none; } .chest-stage summary::-webkit-details-marker { display: none; } .chest-stage summary::after { content: ''; position: absolute; background: linear-gradient(var(--handle), var(--handle)) 50% 15%/40% 8% no-repeat, transparent; height: 110%; width: 110%; top: 50%; left: 50%; transform: translate3d(-50%, -50%, calc(0.5 * var(--vu))); } /* Oggetti DENTRO al cassetto: appoggiati sul fondo, visibili quando lo apri. */ /* Oggetti illustrati (SVG) dentro al cassetto: "billboard" — restano sempre frontali quando la scena ruota, quindi sempre leggibili. Centrati e alzati a metà cassetto così non li copre la parete frontale. */ .chest-stage .chest-obj { position: absolute; left: 50%; bottom: 14%; width: calc(4.8 * var(--vu)); height: calc(4.8 * var(--vu)); /* Appoggiati sul FONDO del cassetto (non sospesi), verso la parete posteriore dove il pavimento è visibile, con la posa naturale di ciascun oggetto (--tilt). Niente billboard: la geometria 3D li occlude; da dietro spariscono. */ transform: translate(-50%, 0) translateZ(calc(var(--depth) * -0.58 * var(--vu))) rotate(var(--tilt, 0deg)); transform-origin: center bottom; opacity: 1; } /* Pose fisiche per-oggetto (rotazione sul piano dell'oggetto). */ .chest-stage .obj-bulb { --tilt: -74deg; } /* coricata sul fianco */ .chest-stage .obj-key { --tilt: 70deg; } /* appoggiata di lato */ .chest-stage .obj-book { --tilt: -7deg; } /* leggermente inclinato */ .chest-stage .obj-plant { --tilt: 2deg; } .chest-stage .obj-mug { --tilt: -3deg; } .chest-stage .obj-svg { width: 100%; height: 100%; display: block; overflow: visible; backface-visibility: hidden; filter: drop-shadow(0 .25vmin .35vmin rgba(0,0,0,.3)); } /* ===== Veri cubi 3D (dado, regalo, cassa): 6 facce, occlusi come solidi ===== */ .chest-stage .obj-box { --tilt: 0deg; } .chest-stage .cf { position: absolute; width: calc(3.6 * var(--vu)); height: calc(3.6 * var(--vu)); left: 50%; top: 50%; box-sizing: border-box; backface-visibility: hidden; } .chest-stage .cf-front { transform: translate(-50%, -50%) translateZ(calc(1.8 * var(--vu))); } .chest-stage .cf-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(1.8 * var(--vu))); } .chest-stage .cf-right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(1.8 * var(--vu))); } .chest-stage .cf-left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(1.8 * var(--vu))); } .chest-stage .cf-top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(1.8 * var(--vu))); } .chest-stage .cf-bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(1.8 * var(--vu))); } /* Ombreggiatura per faccia (luce dall'alto). */ .chest-stage .obj-box .cf-top { filter: brightness(1.12); } .chest-stage .obj-box .cf-right { filter: brightness(.9); } .chest-stage .obj-box .cf-left, .chest-stage .obj-box .cf-back { filter: brightness(.78); } .chest-stage .obj-box .cf-bottom { filter: brightness(.7); } /* DADO: avorio + pallini (facce opposte sommano 7). */ .chest-stage .obj-die .cf { background-color: #efe9dc; } .chest-stage .obj-die .cf-front { background-image: radial-gradient(circle at 26% 26%, #33312c 13%, #0000 14%), radial-gradient(circle at 74% 26%, #33312c 13%, #0000 14%), radial-gradient(circle at 50% 50%, #33312c 13%, #0000 14%), radial-gradient(circle at 26% 74%, #33312c 13%, #0000 14%), radial-gradient(circle at 74% 74%, #33312c 13%, #0000 14%); } /* 5 */ .chest-stage .obj-die .cf-back { background-image: radial-gradient(circle at 27% 22%, #33312c 12%, #0000 13%), radial-gradient(circle at 27% 50%, #33312c 12%, #0000 13%), radial-gradient(circle at 27% 78%, #33312c 12%, #0000 13%), radial-gradient(circle at 73% 22%, #33312c 12%, #0000 13%), radial-gradient(circle at 73% 50%, #33312c 12%, #0000 13%), radial-gradient(circle at 73% 78%, #33312c 12%, #0000 13%); } /* 6 */ .chest-stage .obj-die .cf-top { background-image: radial-gradient(circle at 30% 30%, #33312c 13%, #0000 14%), radial-gradient(circle at 70% 70%, #33312c 13%, #0000 14%); } /* 2 */ .chest-stage .obj-die .cf-bottom { background-image: radial-gradient(circle at 28% 28%, #33312c 12%, #0000 13%), radial-gradient(circle at 50% 50%, #33312c 12%, #0000 13%), radial-gradient(circle at 72% 72%, #33312c 12%, #0000 13%), radial-gradient(circle at 72% 28%, #33312c 12%, #0000 13%), radial-gradient(circle at 28% 72%, #33312c 12%, #0000 13%); } /* 5 */ .chest-stage .obj-die .cf-right { background-image: radial-gradient(circle at 28% 28%, #33312c 13%, #0000 14%), radial-gradient(circle at 50% 50%, #33312c 13%, #0000 14%), radial-gradient(circle at 72% 72%, #33312c 13%, #0000 14%); } /* 3 */ .chest-stage .obj-die .cf-left { background-image: radial-gradient(circle at 30% 30%, #33312c 13%, #0000 14%), radial-gradient(circle at 70% 30%, #33312c 13%, #0000 14%), radial-gradient(circle at 30% 70%, #33312c 13%, #0000 14%), radial-gradient(circle at 70% 70%, #33312c 13%, #0000 14%); } /* 4 */ /* REGALO: rosso + nastro a croce dorato su ogni faccia. */ .chest-stage .obj-gift .cf { background-color: #e0574f; background-image: linear-gradient(90deg, #0000 42%, #f2c14e 42% 58%, #0000 58%), linear-gradient(0deg, #0000 42%, #f2c14e 42% 58%, #0000 58%); } /* CASSA: legno + doghe + bordo scuro. */ .chest-stage .obj-crate .cf { background-color: #b3813f; background-image: repeating-linear-gradient(90deg, #0000 0 28%, rgba(0,0,0,.18) 28% 31%); box-shadow: inset 0 0 0 .3vmin rgba(60,38,12,.55); } /* ===== Materia: ombre e texture per un aspetto meno "piatto" ===== */ .chest-stage { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Ombra di contatto a terra: "appoggia" la cassettiera. */ .chest-stage::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 8%; width: 52%; height: 8%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0,0,0,.34), transparent); filter: blur(4px); pointer-events: none; } .chest-stage .chest { z-index: 1; } /* Texture sottile su corpo e interni (non sul pannello con la parola). */ .chest-stage .chest__panel--top::after, .chest-stage .chest__panel--left::after, .chest-stage .chest__panel--right::after, .chest-stage .chest__panel--back::after, .chest-stage .drawer__panel--front::after, .chest-stage .drawer__panel--bottom::after, .chest-stage .drawer__panel--left::after, .chest-stage .drawer__panel--right::after { content: ""; position: absolute; inset: 0; background: var(--noise); background-size: 108px 108px; opacity: .12; mix-blend-mode: overlay; pointer-events: none; } /* Shading direzionale (luce dall'alto-sinistra). */ .chest-stage .chest__panel--top { background-image: linear-gradient(160deg, rgba(255,255,255,.14), rgba(0,0,0,.05)); } .chest-stage .chest__panel--right { background-image: linear-gradient(0deg, rgba(0,0,0,.12), rgba(255,255,255,.03)); } .chest-stage .chest__panel--left { background-image: linear-gradient(0deg, rgba(0,0,0,.16), transparent); } /* Facciata dei cassetti: sfumatura + leggera lucentezza. */ .chest-stage .drawer__panel--front { background: linear-gradient(150deg, color-mix(in srgb, var(--unit-four) 82%, white), var(--unit-four) 62%); } /* Ambient occlusion dentro al cassetto. */ .chest-stage .drawer__panel--bottom { background: linear-gradient(0deg, color-mix(in srgb, var(--drawer-three) 66%, black), var(--drawer-three)); } .chest-stage .drawer__panel--left, .chest-stage .drawer__panel--right { background: linear-gradient(180deg, color-mix(in srgb, var(--drawer-two) 86%, black), var(--drawer-two)); } .chest-stage .drawer__panel--back { box-shadow: inset 0 .5vmin .9vmin rgba(0,0,0,.13); } .hero-hint { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0; animation: rise .9s .22s cubic-bezier(.2,.7,.3,1) both; } @media (prefers-reduced-motion: reduce) { .chest-stage details, .chest-stage .drawer__structure { transition: none; } } @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ============================ INTERFACCIA 1 · CINEMA ======================= */ /* Scroll a sezioni in stile Webflow: snap 100% NATIVO (nessun hijack JS della rotella). `mandatory` + `scroll-snap-stop: always` = una sezione per gesto, fluida su mouse/trackpad/touch. Ogni progetto e hero/bio = pagina piena. */ /* Snap nativo attivo SOLO se fullPage NON è montato (fullPage prende il controllo). */ html[data-ui="cinema"]:not(.fp-active) { scroll-snap-type: y mandatory; } /* Con fullPage attivo: i dot laterali sostituiscono le frecce native; ogni .section riempie il viewport (fullPage imposta l'altezza, noi togliamo margini che rompono). */ html.fp-active #nav-arrows { display: none; } html.fp-active #fullpage .section { padding-top: 0; padding-bottom: 0; } html.fp-active #main { margin: 0; } /* Cinema/fullPage: la sezione è alta 100vh e il contenuto è centrato. Compattiamo logo e chest così tutto l'hero (logo compreso) sta nel viewport con respiro sopra e sotto, evitando che il logo resti incollato al bordo superiore. */ html.fp-active .hero-logo { width: min(288px, 52vw); margin-bottom: clamp(.8rem, 2.4vw, 1.4rem); } html.fp-active .chest-stage { height: clamp(180px, 26vmin, 238px); margin: 0 0 clamp(1.2rem, 3.4vmin, 1.9rem); } /* Anti-FOUC: nasconde il contenuto finché i dati reali non sostituiscono i placeholder statici (evita il flash "I miei progetti" → "Ah, sei qui?"). */ #main { opacity: 0; } html.app-ready #main { opacity: 1; transition: opacity 0.28s ease; } [data-ui="cinema"] .hero, [data-ui="cinema"] .snap, [data-ui="cinema"] .bio { scroll-snap-align: center; scroll-snap-stop: always; } [data-ui="cinema"] .bio { min-height: 100svh; display: grid; align-items: center; } [data-ui="cinema"] .project { min-height: 100svh; display: grid; align-items: center; padding: clamp(3rem,8vw,6rem) clamp(1.1rem,5vw,3rem); border-top: 1px solid var(--border); } [data-ui="cinema"] .project-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,5vw,4.5rem); align-items: center; } [data-ui="cinema"] .project:nth-child(even) .project-visual { order: 2; } [data-ui="cinema"] .p-title { font-size: clamp(2rem,5vw,3.2rem); line-height: 1.02; } [data-ui="cinema"] .p-desc { font-size: clamp(1rem,1.6vw,1.1rem); max-width: 46ch; } .project-body > * { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .project.in-view .project-body > * { opacity: 1; transform: none; } .project.in-view .project-body > *:nth-child(1){transition-delay:.05s} .project.in-view .project-body > *:nth-child(2){transition-delay:.11s} .project.in-view .project-body > *:nth-child(3){transition-delay:.17s} .project.in-view .project-body > *:nth-child(4){transition-delay:.23s} .project.in-view .project-body > *:nth-child(5){transition-delay:.29s} .project.in-view .project-body > *:nth-child(6){transition-delay:.35s} .project-visual { position: relative; aspect-ratio: 4/3; border-radius: 26px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: radial-gradient(120% 120% at 20% 12%, color-mix(in srgb, var(--accent, var(--brand)) 42%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--brand)) 22%, var(--surface)) 0%, var(--surface) 78%); } .project-visual .p-mono { font-size: clamp(3.5rem,11vw,7rem); } /* Observer per lo stagger del corpo in cinema (usa la classe project) */ [data-ui="cinema"] .project.reveal { opacity: 1; transform: none; filter: none; } /* ========================== INTERFACCIA 2 · CAROSELLO ===================== */ /* Carosello full-page: hero → deck (orizzontale) → bio come sezioni magnetiche. Lo scroll verticale sopra al deck viene tradotto in orizzontale (JS) finché non si raggiunge l'ultima card, poi prosegue in verticale verso la bio. */ html[data-ui="carosello"] { scroll-snap-type: y mandatory; } [data-ui="carosello"] .hero, [data-ui="carosello"] .stage, [data-ui="carosello"] .bio { scroll-snap-align: center; scroll-snap-stop: always; } [data-ui="carosello"] .stage { min-height: 100svh; display: grid; align-items: center; padding: 0; } [data-ui="carosello"] .bio { min-height: 100svh; display: grid; align-items: center; } .deck { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem clamp(1.1rem,8vw,10vw); scrollbar-width: none; scroll-behavior: smooth; cursor: grab; } .deck.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; scroll-snap-type: none; } .deck.dragging img, .deck.dragging a { pointer-events: none; } .deck img { -webkit-user-drag: none; user-select: none; } .deck::-webkit-scrollbar { display: none; } .deck-card { scroll-snap-align: center; flex: 0 0 min(88vw, 860px); min-height: 66svh; display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); } .deck-visual { position: relative; display: grid; place-items: center; background: radial-gradient(120% 120% at 25% 15%, color-mix(in srgb, var(--accent, var(--brand)) 45%, transparent), transparent 62%), linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--brand)) 24%, var(--surface)) 0%, var(--surface) 80%); } .deck-visual .p-mono { font-size: clamp(3rem,8vw,5.5rem); } .deck-body { padding: clamp(1.6rem,3vw,2.6rem); display: flex; flex-direction: column; justify-content: center; } .deck-body .p-title { font-size: clamp(1.6rem,3vw,2.4rem); } .deck-body .p-desc { font-size: .98rem; } @media (max-width: 720px) { .deck-card { grid-template-columns: 1fr; grid-template-rows: 40% 60%; } } /* =========================== INTERFACCIA 3 · GRIGLIA ====================== */ [data-ui="griglia"] .stage { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem,6vw,5rem) clamp(1.1rem,4vw,2rem) 4rem; } .grid { display: grid; gap: clamp(1.1rem,2.5vw,1.6rem); grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); } .tilt { perspective: 900px; } .tilt-inner { position: relative; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem 1.4rem 1.3rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .55rem; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; overflow: hidden; } .tilt:hover .tilt-inner { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, var(--border-strong)); } .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(240px 240px at var(--gx,50%) var(--gy,50%), color-mix(in srgb, var(--accent, var(--brand)) 30%, transparent), transparent 70%); } .tilt:hover .tilt-glare { opacity: 1; } .tilt-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .3rem; } .tilt-logo { width: 48px; height: 48px; border-radius: 13px; flex: none; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--accent, var(--brand)); } .tilt-logo .p-mono { font-size: 1.3rem; color: #fff; } .tilt-logo .p-logo-img, .tilt-logo .p-shot { position: static; width: 100%; height: 100%; } .tilt-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; margin: 0; } .tilt-tagline { font-size: .82rem; color: var(--ink-faint); margin: 0; } .tilt-desc { color: var(--ink-soft); font-size: .9rem; margin: .3rem 0 .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tilt .p-tags { margin-top: auto; } /* =========================== INTERFACCIA 4 · RIVISTA ====================== */ [data-ui="rivista"] .stage { max-width: 1000px; margin: 0 auto; padding: clamp(2.5rem,6vw,5rem) clamp(1.1rem,4vw,2rem) 4rem; } .mag-row { border-top: 1px solid var(--border); } .mag-row:last-child { border-bottom: 1px solid var(--border); } .mag-head { width: 100%; background: transparent; border: none; cursor: pointer; color: inherit; display: flex; align-items: center; gap: clamp(1rem,3vw,2.4rem); padding: clamp(1.1rem,3vw,1.9rem) .3rem; text-align: left; font-family: inherit; } .mag-num { font-family: var(--font-display); font-size: clamp(1.1rem,2vw,1.5rem); color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; transition: color .3s; } .mag-titles { flex: 1; min-width: 0; } .mag-title { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem,4vw,2.8rem); letter-spacing: -.02em; line-height: 1.05; transition: color .3s, transform .4s cubic-bezier(.2,.7,.3,1); } .mag-tagline { display: block; color: var(--ink-faint); font-size: .92rem; margin-top: .25rem; } .mag-meta { display: flex; align-items: center; gap: 1rem; flex: none; } .mag-chevron { display: grid; place-items: center; color: var(--ink-faint); transition: transform .4s cubic-bezier(.2,.7,.3,1), color .3s; } .mag-chevron svg { width: 22px; height: 22px; } .mag-head:hover .mag-num, .mag-head:hover .mag-title { color: var(--accent, var(--brand)); } .mag-head:hover .mag-title { transform: translateX(8px); } .mag-row.open .mag-chevron { transform: rotate(90deg); color: var(--accent, var(--brand)); } .mag-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.3,1); } .mag-row.open .mag-panel { grid-template-rows: 1fr; } .mag-panel-in { overflow: hidden; min-height: 0; } .mag-panel-in > * { opacity: 0; transform: translateY(10px); transition: opacity .4s ease .1s, transform .4s ease .1s; } .mag-row.open .mag-panel-in > * { opacity: 1; transform: none; } /* Pannello a due colonne: card grafica + testo (impila su schermi stretti). */ .mag-panel-in { padding-left: clamp(0px, 3vw, 3.5rem); padding-bottom: 1.6rem; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; } .mag-text { max-width: 60ch; } .mag-visual { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: radial-gradient(120% 120% at 20% 12%, color-mix(in srgb, var(--accent, var(--brand)) 42%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--brand)) 22%, var(--surface)) 0%, var(--surface) 78%); } .mag-visual .p-mono { font-size: clamp(2.6rem, 6vw, 4rem); } .mag-visual.is-zoomable { cursor: zoom-in; transition: transform .22s ease, box-shadow .22s ease; } .mag-visual.is-zoomable:hover, .mag-visual.is-zoomable:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent, var(--brand)) 60%, transparent); outline: none; } .mag-visual-zoom { position: absolute; right: .6rem; bottom: .6rem; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--ink-soft); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; } .mag-visual-zoom svg { width: 16px; height: 16px; } .mag-visual.is-zoomable:hover .mag-visual-zoom, .mag-visual.is-zoomable:focus-visible .mag-visual-zoom { opacity: 1; transform: none; } @media (max-width: 720px) { .mag-panel-in { grid-template-columns: 1fr; } .mag-visual { max-width: 340px; } } /* =========================== INTERFACCIA 5 · CINETICA ===================== */ [data-ui="cinetica"] body, [data-ui="cinetica"] .stage { } .kin { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem,6vw,5rem) clamp(1.1rem,4vw,2rem) 5rem; display: flex; flex-direction: column; } .kin-item { position: relative; background: transparent; border: none; cursor: pointer; color: inherit; text-align: left; padding: clamp(.6rem,1.6vw,1.1rem) 0; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 1rem; font-family: inherit; overflow: hidden; } .kin-index { font-family: "Space Grotesk", var(--font-sans); font-weight: 700; font-size: .9rem; color: var(--accent, var(--brand)); flex: none; letter-spacing: .05em; } .kin-line { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,8vw,5.5rem); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--ink-faint); text-stroke: 1.2px var(--ink-faint); transition: -webkit-text-stroke-color .3s; } /* La regione di clip è estesa in alto/basso (inset negativi) così le discendenti (g, p) e le ascendenti non vengono tagliate dal box a line-height 1. */ .kin-line::after { content: attr(data-text); position: absolute; inset: 0; color: var(--accent, var(--brand)); -webkit-text-stroke: 0; text-stroke: 0; clip-path: inset(-0.22em 100% -0.28em 0); transition: clip-path .5s cubic-bezier(.2,.7,.3,1); } .kin-item:hover .kin-line::after { clip-path: inset(-0.22em 0 -0.28em 0); } .kin-item:hover .kin-line { -webkit-text-stroke-color: transparent; } .kin-tag { margin-left: auto; color: var(--ink-faint); font-size: .9rem; flex: none; opacity: 0; transform: translateX(10px); transition: opacity .35s, transform .35s; } .kin-item:hover .kin-tag { opacity: 1; transform: none; } .kin-panel { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.2rem; background: color-mix(in srgb, #05060a 55%, transparent); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; } /* `display:grid` sopra vinceva sull'attributo hidden (stessa specificità): il pannello restava un overlay invisibile che bloccava hover/click sui titoli. Questo selettore più specifico ripristina display:none quando è nascosto. */ .kin-panel[hidden] { display: none; } .kin-panel.show { opacity: 1; } .kin-panel-card { width: min(880px, 96vw); max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1.2fr; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translateY(18px) scale(.98); transition: transform .34s cubic-bezier(.2,.7,.3,1); } .kin-panel.show .kin-panel-card { transform: none; } .kin-panel-visual { position: relative; display: grid; place-items: center; min-height: 220px; background: radial-gradient(120% 120% at 25% 15%, color-mix(in srgb, var(--accent, var(--brand)) 45%, transparent), transparent 62%), linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--brand)) 24%, var(--surface)) 0%, var(--surface) 80%); } .kin-panel-visual .p-mono { font-size: clamp(3rem,7vw,4.5rem); } .kin-panel-body { padding: clamp(1.5rem,3vw,2.4rem); } .kin-panel-body .p-title { font-size: clamp(1.7rem,3vw,2.4rem); } .kin-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; } .kin-close:hover { color: var(--ink); } @media (max-width: 720px) { .kin-panel-card { grid-template-columns: 1fr; } .kin-tag { display: none; } } /* ---- BIO ---- */ .bio { padding: clamp(4rem,10vw,7rem) clamp(1.1rem,5vw,3rem); border-top: 1px solid var(--border); background: radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 55%), var(--surface); } .bio-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(220px,340px) 1fr; gap: clamp(2rem,6vw,4.5rem); align-items: center; } .bio-photo { aspect-ratio: 1; border-radius: 28px; overflow: hidden; position: relative; background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 30%, var(--surface-2)), var(--surface-2)); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; place-items: center; } .bio-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bio-photo-mono { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem,9vw,5rem); color: color-mix(in srgb, var(--brand) 80%, var(--ink)); } .bio-eyebrow { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0 0 .7rem; } .bio-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem,5vw,3rem); letter-spacing: -.02em; margin: 0 0 .4rem; } .bio-role { color: var(--ink-faint); font-size: 1rem; margin: 0 0 1.3rem; } .bio-desc { color: var(--ink-soft); font-size: clamp(1rem,1.6vw,1.12rem); line-height: 1.65; margin: 0 0 1.6rem; max-width: 56ch; } .bio-quotes { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; } .bio-quotes li { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem,2vw,1.28rem); color: var(--ink); line-height: 1.4; padding-left: 1.1rem; border-left: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); } .bio-social { display: flex; gap: .7rem; } .soc { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--border); transition: transform .18s, color .18s, border-color .18s, background .18s; } .soc svg { width: 20px; height: 20px; } .soc:hover { transform: translateY(-3px); color: var(--brand); border-color: var(--brand); } .soc.is-off { opacity: .4; cursor: not-allowed; } @media (max-width: 720px) { .bio-inner { grid-template-columns: 1fr; } .bio-photo { max-width: 240px; } } /* ---- BLOG & FILOSOFIA (sezione madre) ---- */ .blog { padding: clamp(4rem,10vw,7rem) clamp(1.1rem,5vw,3rem); border-top: 1px solid var(--border); min-height: 100svh; display: grid; align-items: center; } [data-ui="cinema"] .blog, [data-ui="carosello"] .blog { scroll-snap-align: center; scroll-snap-stop: always; } .blog-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; } .blog-eyebrow { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0 0 .7rem; } .blog-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem,5vw,3.2rem); letter-spacing: -.02em; margin: 0 0 1rem; text-wrap: balance; } .blog-lead { color: var(--ink-soft); font-size: clamp(1rem,1.6vw,1.12rem); line-height: 1.6; max-width: 62ch; margin: 0 0 clamp(2rem,4vw,3rem); } /* Blog: carosello orizzontale di card (una riga, sempre; niente "muro" che trabocca la sezione full-page). Frecce + drag + scroll nativo. */ .blog-carousel { position: relative; } .blog-list { display: flex; gap: clamp(1rem,2vw,1.4rem); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: .6rem .2rem 1.2rem; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* i bordi del nastro svaniscono gradualmente invece di tagliare le card (il loop è infinito: c'è sempre contenuto da entrambi i lati) */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 5vw, 64px), #000 calc(100% - clamp(28px, 5vw, 64px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 5vw, 64px), #000 calc(100% - clamp(28px, 5vw, 64px)), transparent 100%); } .blog-list.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } /* Scrollbar nascosta: il loop duplica le card (raddoppierebbe la barra) e lo scorrimento avviene con auto-scroll, drag, rotella e tap. */ .blog-list::-webkit-scrollbar { width: 0; height: 0; display: none; } .art-card { flex: 0 0 clamp(258px, 80vw, 328px); scroll-snap-align: start; } /* Titolo sezione + bottone Condividi affiancati. */ .blog-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; } .blog-head .blog-title { margin: 0; } .blog-head .section-share { margin-top: 0; } /* Bottone Condividi su ogni card, in alto a destra. */ .art-share { position: absolute; top: .7rem; right: .7rem; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(6px); transition: color .16s, border-color .16s, background .16s, transform .12s; } .art-share:hover { color: var(--ink); border-color: var(--border-strong); background: var(--surface); } .art-share:active { transform: scale(.92); } .art-share svg { width: 15px; height: 15px; } .art-meta { padding-right: 2.4rem; } .blog-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); transition: opacity .2s, background .16s, transform .12s, border-color .16s; } .blog-prev { left: -12px; } .blog-next { right: -12px; } /* con margini laterali sufficienti le frecce escono del tutto dal nastro */ @media (min-width: 1280px) { .blog-prev { left: -62px; } .blog-next { right: -62px; } } .blog-nav:hover { background: var(--surface); border-color: var(--ink-faint); } .blog-nav:active { transform: translateY(-50%) scale(.93); } .blog-nav[disabled] { opacity: 0; pointer-events: none; } @media (hover: none) { .blog-nav { display: none; } } .art-card { position: relative; overflow: hidden; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow-sm); color: var(--ink); font-family: inherit; transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s; } .art-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--brand)); opacity: .0; transition: opacity .28s; } .art-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } .art-card:hover::before { opacity: 1; } .art-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; font-size: .74rem; } .art-cat { color: var(--accent-ink); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .art-date { color: var(--ink-faint); font-variant-numeric: tabular-nums; } .art-title { font-family: var(--font-display); font-weight: 600; font-size: 1.42rem; line-height: 1.08; letter-spacing: -.01em; } .art-excerpt { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .art-read { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; color: var(--ink-faint); font-size: .8rem; font-weight: 600; } .art-arrow { color: var(--accent, var(--brand)); transition: transform .28s; } .art-card:hover .art-arrow { transform: translateX(5px); } /* ---- Lettore articolo ---- */ body.reader-open { overflow: hidden; } .reader { position: fixed; inset: 0; z-index: 95; background: var(--bg); opacity: 0; transition: opacity .32s ease; display: flex; flex-direction: column; } .reader.show { opacity: 1; } .reader[hidden] { display: none; } .reader-bar { flex: none; height: 58px; display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem,4vw,2rem); border-bottom: 1px solid var(--border); position: relative; } .reader-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--p, 0%); background: var(--accent, var(--brand)); transition: width .1s linear; } .reader-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); transition: color .16s, border-color .16s; } .reader-close:hover { color: var(--ink); border-color: var(--border-strong); } .reader-article { flex: 1; overflow-y: auto; scroll-behavior: smooth; padding: clamp(2.5rem,6vw,5rem) clamp(1.2rem,5vw,2rem) 6rem; } .reader-article { --accent: var(--brand); } /* ---- Frecce articolo precedente/successivo + effetto voltapagina ---- */ .reader-nav { margin: 0 auto; display: flex; gap: 0.55rem; } .reader-navbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); transition: color .16s, border-color .16s, opacity .16s, transform .12s; } .reader-navbtn:hover:not(:disabled) { color: var(--ink); border-color: var(--border-strong); } .reader-navbtn:active:not(:disabled) { transform: translateY(1px); } .reader-navbtn:disabled { opacity: 0.32; cursor: default; } /* Effetto voltalibro (flip 3D): una PAGINA overlay a due facce ruota di 180° sul dorso sinistro sopra il contenuto, come sfogliando un libro vero. - .page-flip-layer: copre l'area articolo (top impostato via JS = altezza barra) e dà la prospettiva; - .page-flip: la pagina (preserve-3d, perno sul dorso = bordo sinistro); - .page-face-front: il contenuto dell'articolo (snapshot); - .page-face-back: il RETRO della pagina, "carta" con gradiente, pre-ruotato di 180° così appare a metà voltata (backface-visibility nasconde l'altra). */ .page-flip-layer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; perspective: 2400px; pointer-events: none; overflow: hidden; } .page-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; will-change: transform; } .page-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--bg); } .page-face-front { box-shadow: 12px 0 34px rgba(0,0,0,0.28); } .page-face .page-snapshot { position: absolute; inset: 0; overflow: hidden; } .page-face-back { transform: rotateY(180deg); background: linear-gradient(105deg, color-mix(in srgb, var(--ink) 10%, var(--bg)) 0%, var(--bg) 30%, color-mix(in srgb, var(--ink) 4%, var(--bg)) 100%); box-shadow: -12px 0 34px rgba(0,0,0,0.22); } .page-flip.turn-next { animation: flipNext 0.8s cubic-bezier(0.45, 0.05, 0.30, 0.95) both; } .page-flip.turn-prev { animation: flipPrev 0.8s cubic-bezier(0.45, 0.05, 0.30, 0.95) both; } @keyframes flipNext { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } } @keyframes flipPrev { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } } @media (prefers-reduced-motion: reduce) { .page-flip.turn-next, .page-flip.turn-prev { animation: none; } } /* ---- Condividi (bottone reader + sezioni + toast) ---- */ .reader-share { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-soft); transition: color .16s, border-color .16s, transform .12s; } .reader-share:hover { color: var(--ink); border-color: var(--border-strong); } .reader-share:active { transform: translateY(1px); } .reader-share svg { width: 18px; height: 18px; } .section-share { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; padding: .5rem .9rem; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink-soft); transition: color .16s, border-color .16s, transform .12s; } .section-share:hover { color: var(--ink); border-color: var(--ink-faint); } .section-share:active { transform: translateY(1px); } .section-share svg { width: 15px; height: 15px; flex: none; } .toast { position: fixed; left: 50%; bottom: max(1.6rem, env(safe-area-inset-bottom)); transform: translate(-50%, 1.2rem); z-index: 200; max-width: min(92vw, 440px); padding: .72rem 1.15rem; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: .88rem; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .toast.show { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .toast { transform: translate(-50%, 0); transition: opacity .22s ease; } } /* ---- Lightbox / galleria ---- */ body.lb-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: clamp(.4rem, 2vw, 1.4rem); padding: clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, #000 82%, transparent); backdrop-filter: blur(6px); } .lightbox[hidden] { display: none; } .lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; min-width: 0; } .lb-img { max-width: min(84vw, 1100px); max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); background: var(--surface); } .lb-cap { color: rgba(255,255,255,.86); font-size: .9rem; font-weight: 500; text-align: center; text-wrap: balance; } .lb-nav { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; transition: background .18s, transform .18s; } .lb-nav:hover { background: rgba(255,255,255,.2); transform: scale(1.06); } .lb-nav svg { width: 24px; height: 24px; } .lb-nav[hidden] { display: none; } .lb-close { position: absolute; top: clamp(.8rem,2.5vw,1.4rem); right: clamp(.8rem,2.5vw,1.4rem); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; transition: background .18s; } .lb-close:hover { background: rgba(255,255,255,.2); } .lb-close svg { width: 22px; height: 22px; } .lb-counter { position: absolute; bottom: clamp(.8rem,2.5vw,1.4rem); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: .82rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .lb-counter[hidden] { display: none; } @media (max-width: 640px) { .lb-nav { width: 42px; height: 42px; } .lb-img { max-width: 92vw; max-height: 72vh; } } .ra-meta { max-width: 68ch; margin: 0 auto .9rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-faint); } .ra-cat { color: var(--accent, var(--brand)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .ra-title { max-width: 20ch; margin: 0 auto clamp(1.6rem,4vw,2.4rem); font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem,6vw,4rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; } .ra-body { max-width: 68ch; margin: 0 auto; } /* Citazioni-fonte: rimando numerato piccolo in apice + elenco Fonti in fondo. */ .cite-ref { font-size: 0.68em; line-height: 0; vertical-align: super; margin-left: 0.12em; } .cite-ref a { color: var(--brand); text-decoration: none; font-weight: 600; } .cite-ref a:hover { text-decoration: underline; } .cite-list { margin-top: 1.6rem; } .cite-list h3 { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); } .cite-list ol { margin: 0.6rem 0 0; padding-left: 1.4rem; } .cite-list li { font-size: 0.92rem; line-height: 1.7; color: var(--ink-soft); scroll-margin-top: 5rem; } .cite-list li:target { color: var(--ink); } .cite-list li:target a { text-decoration: underline; } .cite-list a { color: var(--brand); text-decoration: none; word-break: break-word; } .cite-list a:hover { text-decoration: underline; } .cite-host { color: var(--ink-soft); opacity: 0.75; font-size: 0.85em; } /* ---- CodeCanvas: blocco codice con righe numerate + Copia ---- */ .code-canvas { margin: 1.6rem 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .cc-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } .cc-lang { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .cc-copy { font-size: 0.74rem; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s; } .cc-copy:hover { color: var(--ink); border-color: var(--ink-faint); } .cc-copy:focus-visible { outline: 2px solid var(--accent, var(--brand)); outline-offset: 2px; } .cc-pre { margin: 0; padding: 0.7rem 0; overflow-x: auto; font-size: 0.82rem; line-height: 1.45; } .cc-code { counter-reset: ccline; display: block; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ink); min-width: max-content; } .cc-line { display: block; counter-increment: ccline; position: relative; padding: 0.08rem 1rem 0.08rem 3.4em; white-space: pre; } .cc-line::before { content: counter(ccline); position: absolute; left: 0; width: 2.6em; text-align: right; color: var(--ink-faint); opacity: 0.7; user-select: none; } /* righe alternate a zebra */ .cc-line:nth-child(even) { background: var(--cc-zebra); } /* ---- Colori dei token (evidenziatore leggero, vedi ccHighlight in app.js) ---- */ :root { --cc-zebra: rgba(30, 45, 60, 0.05); --tk-c: #8a95a1; --tk-s: #177a4b; --tk-n: #b3610b; --tk-k: #7434d6; --tk-f: #1465b3; --tk-v: #c02662; --tk-t: #0e7f8a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cc-zebra: rgba(255, 255, 255, 0.045); --tk-c: #7e8994; --tk-s: #57c68b; --tk-n: #e0a52e; --tk-k: #b08bf5; --tk-f: #62aef0; --tk-v: #ef7fab; --tk-t: #4fc3ce; } } :root[data-theme="dark"] { --cc-zebra: rgba(255, 255, 255, 0.045); --tk-c: #7e8994; --tk-s: #57c68b; --tk-n: #e0a52e; --tk-k: #b08bf5; --tk-f: #62aef0; --tk-v: #ef7fab; --tk-t: #4fc3ce; } .tk-c { color: var(--tk-c); font-style: italic; } .tk-s { color: var(--tk-s); } .tk-n { color: var(--tk-n); } .tk-k { color: var(--tk-k); font-weight: 600; } .tk-f { color: var(--tk-f); } .tk-v { color: var(--tk-v); } .tk-t { color: var(--tk-t); } /* ---- Formule (KaTeX; senza rete resta il TeX leggibile in monospace) ---- */ .math-display { margin: 1.4rem 0; overflow-x: auto; text-align: center; font-size: 1.05rem; } .math-display:not(:has(.katex)) { font-family: ui-monospace, Consolas, monospace; font-size: 0.86rem; color: var(--ink-soft); text-align: left; white-space: pre-wrap; } .math-inline:not(:has(.katex)) { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; color: var(--ink-soft); } /* ---- Tabelle Markdown negli articoli ---- */ .md-table { margin: 1.4rem 0; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } .md-table table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .md-table th, .md-table td { padding: 0.55rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .md-table th { background: var(--surface-2); font-weight: 600; color: var(--ink); white-space: nowrap; } .md-table tr:last-child td { border-bottom: none; } .ra-body p { font-size: clamp(1.06rem,1.5vw,1.2rem); line-height: 1.75; color: var(--ink-soft); margin: 0 0 1.3rem; } .ra-body p strong { color: var(--ink); font-weight: 600; } .ra-body em { font-style: italic; } .ra-body hr { border: none; height: 1px; background: var(--border); margin: 2.2rem auto; max-width: 8rem; } .ra-body h2, .ra-body h3 { font-family: var(--font-display); font-weight: 500; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; } .ra-body h2 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); line-height: 1.12; margin: 2.6rem 0 1rem; padding-top: .4rem; border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); } .ra-body h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.15; margin: 2rem 0 .8rem; } .ra-body a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; } .ra-body a:hover { text-decoration-color: var(--accent); } .ra-foot { max-width: 68ch; margin: 2.5rem auto 0; } .ra-back { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: .6rem 1.2rem; font-family: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .16s, background .16s; } .ra-back:hover { border-color: var(--accent, var(--brand)); } @media (max-width: 720px) { .art-card { flex-basis: min(82vw, 300px); } } /* ---- DOCK (footer non tradizionale, sempre accessibile) ---- */ /* Contenitore fisso in basso: mostra solo il TRIGGER; il dock compare sopra all'hover (desktop) o al tap (mobile, classe .open). */ .dock-wrap { position: fixed; left: clamp(.7rem,2.2vw,1.4rem); bottom: clamp(.7rem,2vw,1.2rem); z-index: 70; display: flex; flex-direction: column; align-items: flex-start; } .dock-trigger { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; width: auto; height: 44px; padding: 0 .7rem 0 .8rem; border-radius: 999px; color: var(--ink); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.5) blur(14px); box-shadow: var(--shadow-lg); transition: transform .18s, border-color .18s, color .18s; } .dock-trigger:hover, .dock-wrap:focus-within .dock-trigger { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); } .dock-trigger-n { font-family: var(--font-display); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; min-width: 1ch; } .dock { position: absolute; left: 0; bottom: calc(100% + .55rem); transform: translateY(12px) scale(.96); transform-origin: bottom left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s .24s; z-index: 71; display: flex; align-items: center; gap: clamp(.6rem,1.5vw,1.1rem); padding: .5rem .55rem .5rem .95rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.5) blur(14px); border: 1px solid var(--border); box-shadow: var(--shadow-lg); max-width: calc(100vw - 1.6rem); } /* Zona-cuscinetto invisibile che collega trigger e dock su TUTTA la larghezza del menu e giù fino al livello del trigger: così anche il movimento in diagonale (verso una tab a destra) resta dentro l'area hover e il menu non si chiude. Attivo solo col dock visibile (eredita pointer-events dal .dock). */ .dock::after { content: ""; position: absolute; left: -.5rem; right: -.5rem; top: calc(100% - 6px); height: 2.6rem; } .dock-wrap:hover .dock, .dock-wrap:focus-within .dock, .dock-wrap.open .dock { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.3,1); } /* Chiusura esplicita (click sul trigger aperto o su uno stile): sovrascrive hover/focus-within (stessa specificità, regola successiva → vince) finché il mouse non lascia la dock (mouseleave rimuove .closing via JS). */ .dock-wrap.closing .dock { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(.96); transition: opacity .2s ease, transform .24s cubic-bezier(.2,.7,.3,1), visibility 0s .2s; } .dock-brand { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; padding-right: .2rem; } .dock-switch { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 999px; } .dock-tab { display: inline-flex; align-items: center; gap: .4rem; border: none; background: transparent; cursor: pointer; color: var(--ink-faint); border-radius: 999px; padding: .35rem .7rem; font-family: inherit; font-size: .82rem; font-weight: 600; transition: background .18s, color .18s; } .dock-tab-n { font-variant-numeric: tabular-nums; opacity: .8; } .dock-tab.is-active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .dock-tab:not(.is-active):hover { color: var(--ink); } .dock-social { display: flex; gap: .2rem; } .dock-social .soc { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: none; } .dock-social .soc svg { width: 17px; height: 17px; } .dock-social .soc:hover { transform: none; background: var(--surface-2); } /* Su schermi stretti: nascondi nome/social nel dock, tieni i selettori con la sola numerazione */ @media (max-width: 640px) { .dock-brand, .dock-social { display: none; } .dock-tab-name { display: none; } .dock-tab { padding: .4rem .55rem; } } /* ---- Hamburger flottante + menu overlay ---- */ body.menu-open { overflow: hidden; } .burger { position: fixed; top: clamp(.9rem,2.5vw,1.4rem); right: clamp(.9rem,2.5vw,1.4rem); z-index: 90; width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; gap: 5px; cursor: pointer; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.5) blur(12px); box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s; } .burger:hover { transform: scale(1.06); border-color: var(--brand); } .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .2s; } .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: clamp(4.5rem,10vw,6rem) 1.4rem 6rem; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 16%, var(--surface)) 0%, var(--surface) 60%); clip-path: circle(0% at calc(100% - 44px) 44px); visibility: hidden; transition: clip-path .55s cubic-bezier(.76,0,.24,1), visibility 0s .55s; overflow-y: auto; } .menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; transition: clip-path .6s cubic-bezier(.76,0,.24,1); } .menu-inner { width: min(680px, 100%); display: flex; flex-direction: column; gap: clamp(1.6rem,4vw,2.6rem); } .menu-label { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 0; } .menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(.45rem, 1.4vw, .9rem); } .menu-list > li { opacity: 0; transform: translateY(16px); } .menu.open .menu-list > li { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2,.7,.3,1) var(--d), transform .5s cubic-bezier(.2,.7,.3,1) var(--d); } /* Voci di primo livello (grandi, Fraunces) con trattino animato in hover. */ .m-item { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem,5vw,2.6rem); letter-spacing: -.02em; line-height: 1.12; padding: .06rem 0; transition: color .3s; } .m-item::before { content: ""; flex: none; height: 3px; width: 0; margin-right: 0; border-radius: 3px; background: currentColor; transition: width .42s cubic-bezier(.2,.7,.3,1), margin-right .42s cubic-bezier(.2,.7,.3,1); } .m-item:hover { color: var(--brand); } .m-item:hover::before { width: clamp(24px, 4vw, 46px); margin-right: clamp(12px, 2vw, 20px); } /* Genitore aperto: trattino persistente + colore accento. */ .m-group.is-open > .m-parent { color: var(--brand); } .m-group.is-open > .m-parent::before { width: clamp(24px, 4vw, 46px); margin-right: clamp(12px, 2vw, 20px); } /* Sottomenu ad accordion: rientrato, tipografia più piccola. */ .m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2,.7,.3,1); } .m-group.is-open > .m-sub { grid-template-rows: 1fr; } .m-sub-list { overflow: hidden; min-height: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .m-group.is-open > .m-sub .m-sub-list { padding: .35rem 0 .35rem; } .m-sub-item { position: relative; display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--ink-soft); font-family: var(--font-sans); font-weight: 500; font-size: clamp(.98rem, 2.1vw, 1.18rem); line-height: 1.5; padding: .26rem 0 .26rem clamp(1.3rem, 4vw, 2.4rem); transition: color .22s, padding-left .28s; } .m-sub-item::before { content: ""; position: absolute; left: clamp(.3rem,1.4vw,1rem); top: 50%; width: 0; height: 2px; border-radius: 2px; background: currentColor; transform: translateY(-50%); transition: width .3s; } .m-sub-item:hover { color: var(--brand); padding-left: clamp(1.7rem, 5vw, 2.9rem); } .m-sub-item:hover::before { width: clamp(10px, 2vw, 18px); } .m-sub-label { flex: 0 1 auto; } .m-sub-date { flex: none; font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .menu-controls { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; padding-top: 1rem; border-top: 1px solid var(--border); } .menu-ctl { display: flex; flex-direction: column; gap: .55rem; } .menu-ctl-label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } .lang-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; } .lang-seg button { display: inline-flex; align-items: center; gap: .45rem; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ink-faint); padding: .4rem .7rem; font-family: inherit; font-weight: 600; font-size: .82rem; transition: background .16s, color .16s; } .lang-seg button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .lang-seg button:not(.is-active):hover { color: var(--ink); } .flag { width: 22px; height: 15px; border-radius: 3px; overflow: hidden; display: inline-block; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); } .flag svg { width: 100%; height: 100%; display: block; } /* ---- Polish responsivo (mobile) ---- */ @media (max-width: 640px) { .nav-arrows { display: none !important; } .dock { gap: .3rem; padding: .4rem .5rem; } .theme-float { display: none; } [data-ui="cinema"] .project-inner { grid-template-columns: 1fr; gap: 1.6rem; } [data-ui="cinema"] .project:nth-child(even) .project-visual { order: 0; } .grid { grid-template-columns: 1fr; } body { padding-bottom: 76px; } } @media (max-width: 820px) and (min-width: 641px) { [data-ui="cinema"] .project-inner { grid-template-columns: 1fr; gap: 1.8rem; } [data-ui="cinema"] .project:nth-child(even) .project-visual { order: 0; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html[data-ui="cinema"], html[data-ui="carosello"] { scroll-snap-type: none; } .hero-eyebrow, .hero h1, .hero-tagline, .hero-scroll { animation: none; } .reveal, .project-body > * { opacity: 1; transform: none; filter: none; transition: none; } .status-live::before { animation: none; } .status-live::after { animation: none; display: none; } .tilt-inner { transition: none; } .menu, .menu-list li, .burger span, .m-sub, .m-item::before, .m-sub-item { transition: none; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; } /* ============================================================================ Console admin (admin.html) — riusa i token del tema pubblico ========================================================================== */ :root { --good: #1f9d55; --danger: #d9534f; --muted: var(--ink-faint); } @media (prefers-color-scheme: dark) { :root { --good: #35c07a; --danger: #e8746f; } } :root[data-theme="light"] { --good: #1f9d55; --danger: #d9534f; } :root[data-theme="dark"] { --good: #35c07a; --danger: #e8746f; } .admin-wrap { display: grid; gap: 1.4rem; padding-top: 2rem; padding-bottom: 4rem; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: var(--shadow-sm); } .panel.hidden { display: none; } .panel h2 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .3rem; font-size: 1.35rem; } .panel .muted { color: var(--ink-faint); font-size: .9rem; margin: .2rem 0 1.1rem; } .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .panel-head h2 { margin: 0; } .field { display: grid; gap: .35rem; margin-bottom: .9rem; } .field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); } input, textarea, select { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: .55rem .7rem; width: 100%; transition: border-color .16s, box-shadow .16s; } textarea { resize: vertical; line-height: 1.5; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; } .btn-danger { color: #fff; background: var(--danger); border-color: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); } .status-line { font-size: .86rem; color: var(--ink-faint); margin: .8rem 0 0; min-height: 1.2em; } .status-line.is-ok { color: var(--good); } .status-line.is-err { color: var(--danger); } .proj-list { display: grid; gap: .7rem; } .proj { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; } .proj > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; font-weight: 600; user-select: none; } .proj > summary::-webkit-details-marker { display: none; } .proj-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proj-status { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .proj-body { padding: 0 1rem 1.1rem; display: grid; gap: .8rem; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; } .grid2 label, .full { display: grid; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft); } .full { grid-column: 1 / -1; } .sticky-save { position: sticky; bottom: 0; margin-top: 1.4rem; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--border); background: linear-gradient(to top, var(--surface) 70%, transparent); } /* Ancore SEO/deep-link: offset per non far finire il blocco sotto la barra in alto quando si arriva via #warmageddon / #profilo / #blog ecc. */ .project[id], .deck-card[id], #hero, #blog, .bio, #stage { scroll-margin-top: 84px; }