/* ========================================================================== TelaStampiamo — Stili globali Reset minimale, tipografia, header, footer, utilità, capability helpers. ========================================================================== */ /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* lo smooth lo gestisce Lenis */ background: var(--ts-black); } body { font-family: var(--ts-font-body); font-size: var(--ts-text-base); line-height: var(--ts-leading-body); color: var(--ts-text); background: var(--ts-black); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: color var(--ts-dur-fast) var(--ts-ease-out-quint); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--ts-red); outline-offset: 3px; } /* --- Tipografia di base --- */ h1, h2, h3 { font-family: var(--ts-font-display); font-weight: 400; line-height: var(--ts-leading-tight); letter-spacing: var(--ts-tracking-display); text-transform: uppercase; } p { max-width: 60ch; } .ts-eyebrow { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-red); } /* --- Skip link (a11y) --- */ .ts-skip-link { position: fixed; top: var(--ts-space-2xs); left: var(--ts-space-2xs); z-index: var(--ts-z-loader); padding: 0.5rem 1rem; background: var(--ts-red); color: var(--ts-white); border-radius: var(--ts-radius); transform: translateY(-150%); transition: transform var(--ts-dur-fast) var(--ts-ease-out-quint); } .ts-skip-link:focus { transform: translateY(0); } /* --- Header --- */ #ts-header { position: fixed; inset: 0 0 auto 0; z-index: var(--ts-z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-md); height: var(--ts-header-h); padding-inline: var(--ts-gutter); background: transparent; transition: background var(--ts-dur-slow) var(--ts-ease-out-quint), opacity var(--ts-dur-normal) var(--ts-ease-out-quint), transform var(--ts-dur-normal) var(--ts-ease-out-quint); } #ts-logo-link { display: inline-flex; align-items: center; } #ts-logo-link img { width: clamp(130px, 15vw, 165px); height: auto; } #ts-nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); font-size: var(--ts-text-sm); } #ts-nav a { position: relative; padding-block: 0.25rem; color: var(--ts-text-dim); letter-spacing: 0.01em; } /* Tutte le voci di nav (inclusa Contatti) hanno lo stesso stile: underline rosso in hover. */ #ts-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ts-red); transform: scaleX(0); transform-origin: left; transition: transform var(--ts-dur-normal) var(--ts-ease-out-quint); } #ts-nav a:hover { color: var(--ts-white); } #ts-nav a:hover::after { transform: scaleX(1); } /* Pagina corrente: voce evidenziata con underline rosso persistente. */ #ts-nav a[aria-current="page"] { color: var(--ts-white); } #ts-nav a[aria-current="page"]::after { transform: scaleX(1); } /* Header — stati guidati da classi su (vedi home.js) */ html.ts-light-section #ts-header { background: rgba(13, 13, 13, 0.96); } html.ts-hero-active #ts-header { opacity: 0; pointer-events: none; transform: translateY(-12px); } /* --- Hamburger --- */ #ts-hamburger { display: none; width: 40px; height: 40px; position: relative; } #ts-hamburger span { position: absolute; left: 8px; width: 24px; height: 2px; background: var(--ts-white); transition: transform var(--ts-dur-normal) var(--ts-ease-out-quint), opacity var(--ts-dur-fast) linear; } #ts-hamburger span:nth-child(1) { top: 13px; } #ts-hamburger span:nth-child(2) { top: 19px; } #ts-hamburger span:nth-child(3) { top: 25px; } #ts-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } #ts-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } #ts-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* --- CTA / bottoni --- */ .ts-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ts-font-mono); font-size: var(--ts-text-sm); letter-spacing: 0.04em; color: var(--ts-white); } .ts-cta::after { content: ''; width: 1.5rem; height: 1px; background: var(--ts-red); transition: width var(--ts-dur-normal) var(--ts-ease-out-quint); } .ts-cta:hover::after { width: 2.5rem; } .ts-btn-primary { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.8rem; font-family: var(--ts-font-display); font-size: var(--ts-text-lg); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ts-white); background: var(--ts-red); border-radius: var(--ts-radius); transition: background var(--ts-dur-normal) var(--ts-ease-out-quint), transform var(--ts-dur-normal) var(--ts-ease-out-expo); } .ts-btn-primary:hover { background: var(--ts-red-dim); transform: translateY(-2px); } /* Bottone CTA caratteristico (finale home + submit form): pill con sweep rosso + freccia */ .ts-cta-final { position: relative; display: inline-flex; align-items: center; gap: 1rem; margin-top: var(--ts-space-sm); padding: 0 2.2rem; height: 4rem; font-family: var(--ts-font-display); font-size: var(--ts-text-xl); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-white); background: transparent; border: 2px solid var(--ts-red); border-radius: 999px; overflow: hidden; isolation: isolate; cursor: pointer; transition: color var(--ts-dur-normal) var(--ts-ease-out-quint), box-shadow var(--ts-dur-normal) var(--ts-ease-out-quint), transform var(--ts-dur-normal) var(--ts-ease-out-expo); } .ts-cta-final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ts-red); transform: scaleX(0); transform-origin: left; transition: transform var(--ts-dur-slow) var(--ts-ease-out-expo); } .ts-cta-final:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -12px rgba(193, 39, 45, 0.8); } .ts-cta-final:hover::before { transform: scaleX(1); } .ts-cta-final-arrow { transition: transform var(--ts-dur-normal) var(--ts-ease-out-expo); } .ts-cta-final:hover .ts-cta-final-arrow { transform: translateX(6px); } /* --- Footer --- */ /* Sfondo TRASPARENTE: lo sfondo della pagina (shader incluso) prosegue sotto. position:relative + z-index per stare sopra i canvas di sfondo (z:0). */ #ts-footer { position: relative; z-index: var(--ts-z-content); /* Top ridotto: prima space-2xl (6rem) lasciava un vuoto evidente sopra il logo (specie sulla home, dove sotto c'e' solo nero). Ora il footer parte piu' vicino al contenuto. */ padding: var(--ts-space-lg) var(--ts-gutter) var(--ts-space-lg); background: transparent; /* niente border-top: il footer si fonde con lo sfondo della pagina (che prosegue sotto). */ } .ts-footer-inner { max-width: var(--ts-maxw); margin-inline: auto; display: grid; gap: var(--ts-space-lg); } /* 3 colonne: logo · navigazione · contatti */ .ts-footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; } .ts-footer-col { display: grid; gap: 0.65rem; align-content: start; } .ts-footer-h { margin: 0 0 0.2rem; font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-red); } .ts-footer-col a { width: fit-content; color: var(--ts-text-dim); text-decoration: none; font-size: var(--ts-text-sm); transition: color var(--ts-dur-fast); } .ts-footer-col a:hover { color: var(--ts-white); } .ts-footer-logo { width: clamp(150px, 16vw, 180px); height: auto; display: block; } .ts-footer-col--brand { gap: var(--ts-space-sm); } .ts-footer-contact { display: inline-flex; align-items: center; gap: 0.55rem; } .ts-footer-contact .ts-ic { width: 18px; height: 18px; flex: none; color: var(--ts-text-dim); transition: color var(--ts-dur-fast); } .ts-footer-contact:hover .ts-ic { color: var(--ts-red); } .ts-footer-copy { max-width: var(--ts-maxw); margin-inline: auto; padding-top: var(--ts-space-md); border-top: var(--ts-hairline); color: var(--ts-text-dim); font-size: var(--ts-text-xs); } .ts-footer-copy a, .ts-footer-prefs { margin-left: 1em; color: inherit; font: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; } .ts-footer-copy a:hover, .ts-footer-prefs:hover { color: var(--ts-white); } @media (max-width: 700px) { .ts-footer-cols { grid-template-columns: 1fr; gap: var(--ts-space-lg); } } /* --- Fallback page (index.php) --- */ .ts-fallback { min-height: 70vh; display: grid; place-items: center; padding: calc(var(--ts-header-h) + var(--ts-space-2xl)) var(--ts-gutter) var(--ts-space-2xl); } .ts-fallback-inner { max-width: 50rem; } .ts-fallback-title { font-size: var(--ts-text-2xl); margin-bottom: var(--ts-space-md); } .ts-fallback-content { color: var(--ts-text-dim); } /* --- Banner cookie standalone (assets/js/cookie-consent.js) --- Costruito e inserito nel DOM da JS dopo 'load' (mai candidato LCP). */ .ts-cookie-banner { position: fixed; left: var(--ts-gutter); right: var(--ts-gutter); bottom: var(--ts-space-md); z-index: var(--ts-z-loader); max-width: 46rem; margin-inline: auto; padding: var(--ts-space-md) var(--ts-space-lg); background: color-mix(in oklab, var(--ts-gray) 92%, transparent); border: var(--ts-hairline); border-left: 2px solid var(--ts-red); border-radius: var(--ts-radius); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); opacity: 0; transform: translateY(120%); transition: transform var(--ts-dur-slow) var(--ts-ease-out-expo), opacity var(--ts-dur-normal) var(--ts-ease-out-quint); } .ts-cookie-banner--in { opacity: 1; transform: translateY(0); } .ts-cookie-banner__inner { display: grid; gap: var(--ts-space-sm); } .ts-cookie-banner__text { font-size: var(--ts-text-sm); color: var(--ts-text-dim); max-width: none; } .ts-cookie-banner__text a { color: var(--ts-white); text-decoration: underline; } .ts-cookie-banner__prefs { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .ts-cookie-toggle { display: flex; align-items: center; gap: 0.6rem; font-size: var(--ts-text-sm); } .ts-cookie-toggle em { color: var(--ts-text-dim); font-style: normal; } .ts-cookie-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .ts-cookie-btn { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.7rem 1.4rem; border-radius: var(--ts-radius); } .ts-cookie-btn.ts-btn-primary { padding: 0.7rem 1.4rem; font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); } .ts-cookie-btn--ghost { background: transparent; color: var(--ts-text-dim); text-decoration: underline; text-underline-offset: 2px; } .ts-cookie-btn--ghost:hover { color: var(--ts-white); } @media (max-width: 560px) { .ts-cookie-banner { left: var(--ts-space-sm); right: var(--ts-space-sm); bottom: var(--ts-space-sm); padding: var(--ts-space-sm) var(--ts-space-md); } .ts-cookie-btn { flex: 1 1 auto; text-align: center; } } @media (prefers-reduced-motion: reduce) { .ts-cookie-banner { transition: opacity var(--ts-dur-fast) linear; transform: none; } } /* --- Utilità --- */ .ts-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Loader (overlay durante il caricamento del 3D) --- */ #ts-loader { position: fixed; inset: 0; z-index: var(--ts-z-loader); display: grid; place-items: center; background: var(--ts-black); transition: opacity var(--ts-dur-slow) var(--ts-ease-out-quint); } #ts-loader.ts-loader--done { opacity: 0; pointer-events: none; } .ts-loader-logo { display: block; width: min(78vw, 420px); height: auto; margin: 0 auto var(--ts-space-md); } .ts-loader-bar { width: clamp(120px, 30vw, 280px); height: 4px; background: var(--ts-gray-2); border-radius: 99px; overflow: hidden; } .ts-loader-bar span { display: block; height: 100%; width: 0%; background: var(--ts-red); transition: width var(--ts-dur-normal) linear; } .ts-loader-pct { margin-top: var(--ts-space-sm); font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); color: var(--ts-text-dim); letter-spacing: var(--ts-tracking-wide); } /* --- Mobile nav: overlay editoriale (typografico, numerato, stagger) --- */ @media (max-width: 900px) { #ts-hamburger { display: block; } #ts-nav { position: fixed; inset: 0; z-index: var(--ts-z-nav-overlay); flex-direction: column; justify-content: center; align-items: stretch; gap: 0; padding: calc(var(--ts-header-h) + var(--ts-space-md)) var(--ts-gutter) var(--ts-space-xl); /* fondale quasi opaco + alone rosso in alto a destra + blur leggero dietro (premium) */ background: radial-gradient(125% 80% at 100% 0%, rgba(193, 39, 45, 0.18), transparent 55%), rgba(11, 11, 11, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-y: auto; overscroll-behavior: contain; counter-reset: ts-navitem; transform: translateX(100%); opacity: 0; transition: transform var(--ts-dur-slow) var(--ts-ease-out-expo), opacity var(--ts-dur-normal) var(--ts-ease-out-quint); } /* Eyebrow in cima al blocco + tagline a chiusura (entrambi pseudo, niente markup extra). */ #ts-nav::before { content: 'Navigazione'; font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-red); margin-bottom: var(--ts-space-md); opacity: 0; transform: translateY(-10px); transition: opacity var(--ts-dur-normal) var(--ts-ease-out-quint), transform var(--ts-dur-normal) var(--ts-ease-out-quint); } #ts-nav::after { content: 'Stampa le tue idee!'; font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-text-dim); margin-top: var(--ts-space-lg); opacity: 0; transition: opacity var(--ts-dur-normal) var(--ts-ease-out-quint); } /* Voci: display oversize, numerate (01—), divisori hairline, accento rosso. */ #ts-nav a { counter-increment: ts-navitem; position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; font-family: var(--ts-font-display); font-size: clamp(2.3rem, 11vw, 3.4rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ts-white); border-bottom: 1px solid rgba(245, 245, 245, 0.09); opacity: 0; transform: translateX(26px); transition: opacity var(--ts-dur-normal) var(--ts-ease-out-quint), transform var(--ts-dur-slow) var(--ts-ease-out-expo), color var(--ts-dur-fast) var(--ts-ease-out-quint); } #ts-nav a:last-of-type { border-bottom: 0; } #ts-nav a::before { content: counter(ts-navitem, decimal-leading-zero); font-family: var(--ts-font-mono); font-size: var(--ts-text-sm); color: var(--ts-red); letter-spacing: 0.06em; min-width: 2.4rem; } /* L'underline animato desktop non serve nell'overlay (usiamo i divisori + il colore). */ #ts-nav a::after { display: none; } #ts-nav a:hover, #ts-nav a:active, #ts-nav a[aria-current="page"] { color: var(--ts-red); } /* Apertura: overlay dentro + reveal a cascata di eyebrow, voci e tagline. */ html.ts-nav-open #ts-nav { transform: translateX(0); opacity: 1; } html.ts-nav-open #ts-header { opacity: 1 !important; pointer-events: auto !important; transform: none !important; } html.ts-nav-open #ts-nav::before { opacity: 1; transform: none; transition-delay: 0.08s; } html.ts-nav-open #ts-nav a { opacity: 1; transform: none; } html.ts-nav-open #ts-nav a:nth-of-type(1) { transition-delay: 0.12s; } html.ts-nav-open #ts-nav a:nth-of-type(2) { transition-delay: 0.17s; } html.ts-nav-open #ts-nav a:nth-of-type(3) { transition-delay: 0.22s; } html.ts-nav-open #ts-nav a:nth-of-type(4) { transition-delay: 0.27s; } html.ts-nav-open #ts-nav a:nth-of-type(5) { transition-delay: 0.32s; } html.ts-nav-open #ts-nav a:nth-of-type(6) { transition-delay: 0.37s; } html.ts-nav-open #ts-nav::after { opacity: 1; transition-delay: 0.42s; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }