From 7350da01ceb1602409e0648d370b95659fcb7b72 Mon Sep 17 00:00:00 2001 From: Andrea Manzi Date: Fri, 23 Oct 2026 22:50:59 +0200 Subject: [PATCH] Titolo e introduzione: illustrazione sempre intera, testi in proporzione, bande riempite con l'immagine sfocata Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_017egeN2amL84ErjfgQFtEDn --- style.css | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index 45b0119..f355ffd 100644 --- a/style.css +++ b/style.css @@ -66,12 +66,12 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h .overlay[hidden] { display: none; } /* Titolo e introduzione: le illustrazioni a pixel netti, con una velatura per leggere il testo. */ #title { justify-content: flex-start; padding-top: 6%; image-rendering: pixelated; - background: linear-gradient(rgba(20, 12, 30, .55), rgba(20, 12, 30, .05) 45%, rgba(20, 12, 30, .7)), url(assets/scenes/titolo.png) 86% center / cover; } + background: none; } #title .buttons { margin-top: auto; } #title .dedication { margin-bottom: 2%; text-shadow: 2px 2px 0 #000; } #title .subtitle { color: var(--ink); text-shadow: 2px 2px 0 #000; } #intro { justify-content: flex-start; padding-top: 7%; cursor: pointer; image-rendering: pixelated; - background: linear-gradient(rgba(20, 12, 30, .6), rgba(20, 12, 30, .1) 55%), url(assets/scenes/panorama-intro.png) center / cover, #2a2030; } + background: none; } #intro-text { min-height: 4.2em; max-width: 30em; font-size: clamp(11.52px, 1.87vw, 21.6px); font-weight: bold; line-height: 1.3; color: var(--ink); text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; animation: appear .8s ease-out; } #intro .hint { margin-top: auto; margin-bottom: 40px; color: var(--dim); font-size: clamp(8.64px, 1.08vw, 11.52px); text-shadow: 1px 1px 0 #000; } @@ -85,14 +85,29 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h #splash, #title, #intro { position: fixed; inset: 0; z-index: 10; } #credits { position: fixed; inset: 0; z-index: 12; } body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-inset-top)); right: 8px; } -#title h1 { font-size: clamp(28px, 7vw, 84px); } +/* Le illustrazioni si vedono sempre intere (contain): sul telefono in verticale il titolo sta sopra e i pulsanti + sotto; in orizzontale stanno sopra l'immagine. --u รจ l'1% della larghezza dell'immagine sullo schermo. */ +#title, #intro { --u: min(1vw, 1.78vh); } +/* Ai lati dell'illustrazione intera, la stessa immagine sfocata e scura: niente bande vuote. */ +#title, #intro { isolation: isolate; overflow: hidden; } +#title::before, #intro::before { content: ''; position: absolute; inset: -30px; z-index: -1; background: center / cover; + filter: blur(18px) brightness(.4) saturate(1.2); } +#title::before { background-image: url(assets/scenes/titolo.png); } +#intro::before { background-image: url(assets/scenes/panorama-intro.png); } +/* Sopra lo sfocato, l'illustrazione intera con la sua velatura. */ +#title::after, #intro::after { content: ''; position: absolute; inset: 0; z-index: -1; image-rendering: pixelated; } +#title::after { background: linear-gradient(rgba(20, 12, 30, .55), rgba(20, 12, 30, .05) 45%, rgba(20, 12, 30, .7)), url(assets/scenes/titolo.png) center / contain no-repeat; } +#intro::after { background: linear-gradient(rgba(20, 12, 30, .6), rgba(20, 12, 30, .1) 55%), url(assets/scenes/panorama-intro.png) center / contain no-repeat; } +#title h1 { font-size: max(24px, calc(var(--u) * 7)); } /* Sotto il controllo del volume, che sta in alto a destra. */ -#title, #intro { padding-top: max(6%, 56px); } +#title, #intro { padding-top: max(calc(var(--u) * 5), 48px); padding-bottom: max(calc(var(--u) * 2), 10px); } #splash .splash-name { font-size: clamp(30px, 9vw, 88px); } #splash .splash-art { font-size: clamp(20px, 5vw, 50px); } #splash .splash-present { font-size: clamp(12px, 2.6vw, 26px); } -#title .subtitle { font-size: clamp(11px, 1.8vw, 20px); } -#title .buttons button { font-size: clamp(12px, 2vw, 20px); } +#title .subtitle { font-size: max(10px, calc(var(--u) * 1.8)); } +#title .dedication { font-size: max(9px, calc(var(--u) * 1.5)); } +#intro-text { font-size: max(11px, calc(var(--u) * 2)); } +#title .buttons button { font-size: max(11px, calc(var(--u) * 1.9)); } #splash { z-index: 11; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%); animation: splash-out .7s ease-in 4.3s forwards; } #splash p { margin: 0; max-width: none; font-weight: bold; text-shadow: 3px 3px 0 #000; opacity: 0; }