/* I font sono caricati via +
nel di ogni pagina HTML — più veloce dell'@import (no request chain,
download in parallelo al CSS). Pesi 300 rimossi: mai usati. */
/* ================================================================
DESIGN SYSTEM TOKENS — "Atelier digitale"
Sistema a 3 ruoli tipografici, ramp neutri AA, scala 8pt, motion unico
================================================================ */
:root {
/* — Superfici (ramp neutro caldo, non più piatto) — */
--bg-darker: #040406;
--bg-dark: #08080b;
--bg-elev-1: #0e0e13; /* card / pannelli */
--bg-elev-2: #15151c; /* hover / superfici sollevate */
--bg-panel: #0f0f13; /* retrocompat */
/* — Testo (tutti verificati ≥4.5:1 su sfondo scuro) — */
--text-primary: #f4f5f7;
--text-secondary: #aab2bf; /* schiarito da #9ca3af */
--text-muted: #828b9a; /* schiarito da #6b7280 → ora passa AA */
/* — Luca IT Theme — */
--accent-it: #00ff66;
--accent-it-rgb: 0, 255, 102;
--accent-it-soft: #5cffa1; /* variante chiara per testo su scuro */
/* — Jiri Creative Theme — */
--accent-creative: #7700ff;
--accent-creative-rgb: 119, 0, 255;
--accent-creative-soft: #b98dff; /* variante chiara per testo su scuro */
/* — Tipografia: 3 ruoli (display espressivo · mono semantico · body) — */
--font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Fira Code', ui-monospace, 'Cascadia Code', 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* — Scala tipografica modulare (~1.25) — */
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.25rem;
--text-4xl: 3rem;
--text-5xl: 3.75rem;
/* — Scala spazi 8pt (ritmo verticale deliberato) — */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
--space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
--border-color: rgba(255, 255, 255, 0.06);
--border-color-hover: rgba(255, 255, 255, 0.12);
--grid-line-color: rgba(255, 255, 255, 0.03);
/* — Motion: token unici, ritmo coerente in tutto il sito — */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrate, espansioni */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* hover, stati */
--dur-micro: 180ms; /* micro-interazioni */
--dur-base: 280ms; /* transizioni standard */
--dur-slow: 420ms; /* movimenti ampi */
--transition-smooth: all var(--dur-slow) var(--ease-out);
--transition-fast: all var(--dur-micro) var(--ease-standard);
}
/* --- RESET & BASIC STYLES --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
background-color: var(--bg-dark);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
scroll-behavior: smooth;
/* Le ancore (#servizi, #audio…) non finiscono più nascoste sotto l'header fisso */
scroll-padding-top: 90px;
height: 100%;
}
/* Testo più nitido su display retina + kerning ottimale */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent; /* niente flash grigio al tap mobile */
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image:
linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: 1;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-fast);
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
/* --- TYPOGRAPHY — sistema a 3 ruoli ---
• DISPLAY (Space Grotesk): titoli espressivi (hero, sezioni, card)
• MONO (Fira Code): eyebrow, label, dati → resta semantico ("precisione/codice")
• BODY (Inter): testo di lettura
Base h1-h6 resta mono per preservare l'identità "terminale" sulle micro-intestazioni. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: -0.02em;
}
/* Titoli display: il salto tipografico premium */
.hero-title,
.pane-title,
.section-title,
.showcase-title,
.service-card h3,
.kit-card h3,
.case-study-card h3,
.workflow-content h4 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.03em;
}
/* I due titoli "monumentali" spingono peso e tracking */
.hero-title,
.pane-title {
font-weight: 700;
letter-spacing: -0.04em;
}
.mono-text {
font-family: var(--font-mono);
}
.highlight-it {
color: var(--accent-it);
text-shadow: 0 0 10px rgba(var(--accent-it-rgb), 0.3);
}
.highlight-creative {
color: var(--accent-creative);
text-shadow: 0 0 10px rgba(var(--accent-creative-rgb), 0.3);
}
/* --- LAYOUT COMPONENTS --- */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
/* Glassmorphism Panel */
.panel {
background: rgba(15, 15, 19, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
transition: var(--transition-smooth);
}
.panel:hover {
border-color: var(--border-color-hover);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
/* --- BUTTONS --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.85rem 1.9rem;
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.875rem;
letter-spacing: 0.01em;
border-radius: 9px; /* coerente con chip/card (era 6px) */
cursor: pointer;
transition: var(--transition-fast);
position: relative;
overflow: hidden;
border: 1px solid transparent;
}
.btn-it {
background: rgba(var(--accent-it-rgb), 0.08);
color: var(--accent-it);
border-color: rgba(var(--accent-it-rgb), 0.3);
box-shadow: 0 0 15px rgba(var(--accent-it-rgb), 0.05);
}
.btn-it:hover {
background: var(--accent-it);
color: var(--bg-darker);
box-shadow: 0 0 25px rgba(var(--accent-it-rgb), 0.4);
transform: translateY(-2px);
}
.btn-creative {
background: rgba(var(--accent-creative-rgb), 0.08);
color: var(--accent-creative);
border-color: rgba(var(--accent-creative-rgb), 0.3);
box-shadow: 0 0 15px rgba(var(--accent-creative-rgb), 0.05);
}
.btn-creative:hover {
background: var(--accent-creative);
color: var(--bg-darker);
box-shadow: 0 0 25px rgba(var(--accent-creative-rgb), 0.4);
transform: translateY(-2px);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.03);
color: var(--text-primary);
border-color: var(--border-color);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--border-color-hover);
transform: translateY(-2px);
}
/* --- HEADER / NAVIGATION --- */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: rgba(8, 8, 10, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
transition: var(--transition-smooth);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
.logo {
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -0.05em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo span {
font-weight: 400;
}
.nav-menu {
display: flex;
gap: 2rem;
list-style: none;
font-family: var(--font-mono);
font-size: 0.9rem;
}
.nav-link {
color: var(--text-secondary);
position: relative;
padding: 0.5rem 0;
}
.nav-link:hover, .nav-link.active {
color: var(--text-primary);
}
.nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
transition: var(--transition-smooth);
}
.nav-it .nav-link:hover::after, .nav-it .nav-link.active::after {
background: var(--accent-it);
width: 100%;
box-shadow: 0 0 8px var(--accent-it);
}
.nav-creative .nav-link:hover::after, .nav-creative .nav-link.active::after {
background: var(--accent-creative);
width: 100%;
box-shadow: 0 0 8px var(--accent-creative);
}
/* Mobile Nav Toggle */
.nav-toggle {
display: none;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
}
/* --- SPLIT SCREEN HOMEPAGE --- */
.split-wrapper {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
.split-pane {
flex: 1;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4rem;
transition: var(--transition-smooth);
z-index: 2;
overflow: hidden;
}
.split-pane::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
transition: var(--transition-smooth);
pointer-events: none;
}
/* Left Pane (Luca IT) */
.pane-it {
background-color: var(--bg-darker);
border-right: 1px solid var(--border-color);
}
.pane-it::before {
background-image: radial-gradient(circle at 30% 30%, var(--accent-it) 0%, transparent 60%);
}
.pane-it:hover::before {
opacity: 0.12;
}
/* Right Pane (Jiri Creative) */
.pane-creative {
background-color: var(--bg-dark);
}
.pane-creative::before {
background-image: radial-gradient(circle at 70% 70%, var(--accent-creative) 0%, transparent 60%);
}
.pane-creative:hover::before {
opacity: 0.12;
}
/* Hover Adjustments */
.split-wrapper.active-left .pane-it {
flex: 1.3;
}
.split-wrapper.active-left .pane-creative {
flex: 0.7;
opacity: 0.5;
filter: blur(2px);
}
.split-wrapper.active-right .pane-creative {
flex: 1.3;
}
.split-wrapper.active-right .pane-it {
flex: 0.7;
opacity: 0.5;
filter: blur(2px);
}
/* Content within Panes */
.pane-content {
text-align: center;
max-width: 480px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
z-index: 5;
}
.pane-subtitle {
font-family: var(--font-mono);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.pane-title {
font-size: 3.15rem;
line-height: 1.05;
font-weight: 700;
height: 6.6rem;
display: flex;
align-items: center;
justify-content: center;
}
.pane-desc {
color: var(--text-secondary);
font-size: 1.05rem;
min-height: 5rem;
display: flex;
align-items: center;
justify-content: center;
}
.split-center-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-darker);
border: 1px solid var(--border-color);
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: none;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.4rem;
transition: var(--transition-smooth);
}
/* Split screen: subtitle "PROGETTI CREATIVI" — il viola #7700ff ha basso contrasto,
aggiungiamo un alone luminoso per compensare senza cambiare colore */
.pane-creative .highlight-creative {
text-shadow:
0 0 7px rgba(165,85,255,0.95),
0 0 20px rgba(119,0,255,0.55);
}
/* Hover rotations and glowing states for the center Ø logo */
.split-wrapper.active-left .split-center-logo {
transform: translate(-50%, -50%) rotate(-90deg);
border-color: var(--accent-it);
color: var(--accent-it);
box-shadow: 0 0 20px rgba(var(--accent-it-rgb), 0.35), 0 0 40px rgba(var(--accent-it-rgb), 0.15);
text-shadow: 0 0 8px rgba(var(--accent-it-rgb), 0.6);
}
.split-wrapper.active-right .split-center-logo {
transform: translate(-50%, -50%) rotate(90deg);
border-color: var(--accent-creative);
color: var(--accent-creative);
box-shadow: 0 0 20px rgba(var(--accent-creative-rgb), 0.35), 0 0 40px rgba(var(--accent-creative-rgb), 0.15);
text-shadow: 0 0 8px rgba(var(--accent-creative-rgb), 0.6);
}
/* --- HERO SECTION FOR PAGES --- */
.page-hero {
padding: 9rem 0 4rem;
border-bottom: 1px solid var(--border-color);
position: relative;
}
.page-hero::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
}
.it-page .page-hero::after {
background: var(--accent-it);
box-shadow: 0 0 10px var(--accent-it);
}
.creative-page .page-hero::after {
background: var(--accent-creative);
box-shadow: 0 0 10px var(--accent-creative);
}
.hero-subtitle {
font-family: var(--font-mono);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 1rem;
}
.hero-title {
font-size: clamp(2.15rem, 6vw, 3.5rem); /* fluido: nessun salto tra breakpoint */
line-height: 1.08;
margin-bottom: 1.5rem;
text-wrap: balance; /* righe bilanciate, edge ottico curato */
}
.hero-desc {
max-width: 64ch; /* misura di lettura ottimale */
font-size: 1.15rem;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 2rem;
text-wrap: pretty; /* niente "orfani" a fine paragrafo */
}
/* --- SERVICES & PORTFOLIO GRIDS --- */
.section {
padding: 6rem 0;
border-bottom: 1px solid var(--border-color);
}
.section-header {
margin-bottom: 4rem;
max-width: 600px;
}
.section-subtitle {
font-family: var(--font-mono);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 0.75rem;
}
.section-title {
font-size: clamp(1.7rem, 3.8vw, 2.35rem); /* fluido */
line-height: 1.15;
text-wrap: balance;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Service Card */
.service-card {
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* ── Icone SVG custom (sprite inline) ────────────────────────────── */
.ico {
width: 24px; height: 24px;
display: inline-block; vertical-align: middle;
fill: none; stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
/* "Chip" icona nelle service card — pattern premium che unifica le card */
.service-card .icon {
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 14px;
margin-bottom: var(--space-2);
border: 1px solid var(--border-color);
background: rgba(255,255,255,0.02);
transition: var(--transition-fast);
}
.service-card .icon .ico { width: 26px; height: 26px; }
.it-page .service-card .icon {
color: var(--accent-it);
background: rgba(var(--accent-it-rgb), 0.07);
border-color: rgba(var(--accent-it-rgb), 0.16);
}
.it-page .service-card:hover .icon {
background: rgba(var(--accent-it-rgb), 0.13);
border-color: rgba(var(--accent-it-rgb), 0.34);
transform: translateY(-2px);
}
.creative-page .service-card .icon {
color: var(--accent-creative);
background: rgba(var(--accent-creative-rgb), 0.07);
border-color: rgba(var(--accent-creative-rgb), 0.16);
}
/* Marker liste (soft skills) */
.li-mark { width: 13px; height: 13px; margin-right: 0.55rem; vertical-align: -1px; }
.it-page .li-mark { color: var(--accent-it); }
/* Icona inline nelle kit-label */
.kit-label .ico { width: 15px; height: 15px; margin-right: 0.15rem; vertical-align: -2px; }
.service-card h3 {
font-size: 1.4rem;
}
.service-card p {
color: var(--text-secondary);
}
.service-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: auto;
font-family: var(--font-mono);
font-size: 0.8rem;
}
.service-tag {
padding: 0.25rem 0.6rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-secondary);
}
.it-page .service-tag {
border-color: rgba(var(--accent-it-rgb), 0.1);
}
.it-page .service-card:hover {
border-color: var(--accent-it);
box-shadow: 0 10px 30px rgba(var(--accent-it-rgb), 0.05);
}
.creative-page .service-tag {
border-color: rgba(var(--accent-creative-rgb), 0.1);
}
.creative-page .service-card:hover {
border-color: var(--accent-creative);
box-shadow: 0 10px 30px rgba(var(--accent-creative-rgb), 0.05);
}
/* Flowchart Workflow Diagram */
.workflow-map {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
padding-left: 2.5rem;
}
.workflow-map::before {
content: "";
position: absolute;
top: 0.5rem;
left: 11px;
width: 2px;
height: calc(100% - 1.5rem);
background: var(--border-color);
}
.it-page .workflow-map::before {
background: linear-gradient(to bottom, var(--accent-it) 30%, var(--border-color));
}
.workflow-step {
position: relative;
}
.workflow-step::before {
content: "";
position: absolute;
left: -2.5rem;
top: 0.4rem;
width: 24px;
height: 24px;
background: var(--bg-darker);
border: 2px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: var(--transition-smooth);
}
.it-page .workflow-step::before {
border-color: var(--accent-it);
box-shadow: 0 0 10px rgba(var(--accent-it-rgb), 0.2);
}
.workflow-step:hover::before {
transform: scale(1.2);
}
.workflow-step-num {
position: absolute;
left: -2.05rem;
top: 0.55rem;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
z-index: 3;
}
.it-page .workflow-step-num {
color: var(--accent-it);
}
.workflow-content {
padding-left: 0.5rem;
}
.workflow-content h4 {
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.workflow-content p {
color: var(--text-secondary);
}
/* --- CREATIVE GALLERY (Jiri) --- */
.showcase-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.showcase-item {
grid-column: span 6;
}
.showcase-item.wide {
grid-column: span 8;
}
.showcase-item.narrow {
grid-column: span 4;
}
.showcase-card {
position: relative;
overflow: hidden;
height: 380px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
border-radius: 12px;
border: 1px solid var(--border-color);
background: var(--bg-darker);
transition: var(--transition-smooth);
}
.showcase-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 90%);
z-index: 2;
transition: var(--transition-smooth);
}
.showcase-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.4;
transition: var(--transition-smooth);
}
.showcase-card:hover .showcase-media {
opacity: 0.7;
transform: scale(1.05);
}
.showcase-card:hover {
border-color: var(--accent-creative);
box-shadow: 0 10px 30px rgba(var(--accent-creative-rgb), 0.15);
}
.showcase-info {
position: relative;
z-index: 3;
}
.showcase-category {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent-creative);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.showcase-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.showcase-desc {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Custom Audio Player Showcase */
.audio-showcase {
background: rgba(15, 15, 19, 0.4);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
}
.track-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.track-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid transparent;
transition: var(--transition-fast);
}
.track-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--border-color-hover);
}
.track-item.playing {
border-color: rgba(var(--accent-creative-rgb), 0.3);
background: rgba(var(--accent-creative-rgb), 0.02);
}
.track-play-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
color: var(--text-primary);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
}
.track-item.playing .track-play-btn,
.track-play-btn:hover {
background: var(--accent-creative);
color: var(--bg-darker);
border-color: var(--accent-creative);
box-shadow: 0 0 10px rgba(var(--accent-creative-rgb), 0.4);
}
.track-info {
flex-grow: 1;
}
.track-title {
font-weight: 500;
font-size: 1rem;
}
.track-genre {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-secondary);
}
.track-duration {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-muted);
}
/* Audio Waveform Animation */
.waveform-animation {
display: flex;
align-items: flex-end;
gap: 3px;
height: 20px;
width: 30px;
opacity: 0;
transition: var(--transition-fast);
}
.track-item.playing .waveform-animation {
opacity: 1;
}
.wave-bar {
width: 3px;
height: 100%;
background: var(--accent-creative);
border-radius: 2px;
transform-origin: bottom;
}
.track-item.playing .wave-bar:nth-child(1) { animation: wave 0.8s ease-in-out infinite alternate; }
.track-item.playing .wave-bar:nth-child(2) { animation: wave 0.5s ease-in-out infinite alternate 0.1s; }
.track-item.playing .wave-bar:nth-child(3) { animation: wave 0.7s ease-in-out infinite alternate 0.2s; }
.track-item.playing .wave-bar:nth-child(4) { animation: wave 0.6s ease-in-out infinite alternate 0.3s; }
@keyframes wave {
0% { transform: scaleY(0.15); }
100% { transform: scaleY(1); }
}
/* --- CONTACT FORM (contatti.html) --- */
.contact-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 4rem;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 2.5rem;
list-style: none;
}
.contact-info-item {
display: flex;
gap: 1.5rem;
}
.contact-info-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 12px;
border: 1px solid var(--border-color);
color: var(--accent-it);
background: rgba(var(--accent-it-rgb), 0.07);
}
.contact-info-icon .ico { width: 22px; height: 22px; }
.creative-page-theme .contact-info-icon {
color: var(--accent-creative);
background: rgba(var(--accent-creative-rgb), 0.07);
}
.contact-info-text h4 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
.contact-info-text p, .contact-info-text a {
font-size: 1.1rem;
font-family: var(--font-mono);
}
.contact-info-text a:hover {
text-decoration: underline;
}
/* Theme Toggle Switch in Contact Form */
.theme-selector-container {
margin-bottom: 2rem;
}
.theme-selector-label {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.theme-toggle-switch {
display: flex;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
padding: 4px;
border-radius: 8px;
width: fit-content;
}
.theme-toggle-btn {
background: none;
border: none;
color: var(--text-secondary);
padding: 0.6rem 1.5rem;
font-family: var(--font-mono);
font-size: 0.85rem;
cursor: pointer;
border-radius: 6px;
transition: var(--transition-fast);
}
.theme-toggle-btn.active {
color: var(--bg-darker);
font-weight: 600;
}
.theme-toggle-btn.active-it {
background: var(--accent-it);
color: var(--bg-darker);
box-shadow: 0 0 15px rgba(var(--accent-it-rgb), 0.3);
}
.theme-toggle-btn.active-creative {
background: var(--accent-creative);
color: var(--bg-darker);
box-shadow: 0 0 15px rgba(var(--accent-creative-rgb), 0.3);
}
/* Form Styles */
.contact-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-family: var(--font-mono);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.form-control {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-color);
padding: 0.9rem 1.2rem;
color: var(--text-primary);
border-radius: 6px;
font-family: var(--font-sans);
font-size: 1rem;
transition: var(--transition-fast);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.form-control:focus {
outline: none;
background: rgba(255, 255, 255, 0.04);
}
/* Focus styles determined by active page theme */
.it-page-theme .form-control:focus {
border-color: var(--accent-it);
box-shadow: 0 0 10px rgba(var(--accent-it-rgb), 0.15);
}
.creative-page-theme .form-control:focus {
border-color: var(--accent-creative);
box-shadow: 0 0 10px rgba(var(--accent-creative-rgb), 0.15);
}
.form-status {
padding: 1rem;
border-radius: 6px;
font-size: 0.95rem;
font-family: var(--font-mono);
display: none;
}
.form-status.success {
background: rgba(0, 255, 102, 0.1);
border: 1px solid var(--accent-it);
color: var(--accent-it);
display: block;
}
.form-status.error {
background: rgba(119, 0, 255, 0.1);
border: 1px solid var(--accent-creative);
color: var(--accent-creative);
display: block;
}
/* --- FOOTER --- */
footer {
border-top: 1px solid var(--border-color);
padding: 4rem 0;
background: var(--bg-darker);
position: relative;
z-index: 10;
}
.footer-grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 3rem;
}
.footer-brand {
max-width: 320px;
}
.footer-brand .logo {
margin-bottom: 1rem;
}
.footer-brand p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.footer-links-grid {
display: flex;
gap: 5rem;
}
.footer-links-col h4 {
font-size: 0.9rem;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 1.25rem;
font-family: var(--font-mono);
}
.footer-links-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
font-size: 0.9rem;
}
.footer-links-col a {
color: var(--text-muted);
}
.footer-links-col a:hover {
color: var(--text-primary);
}
.footer-bottom {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-legal {
display: flex;
gap: 2rem;
}
/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1024px) {
/* .hero-title ora è fluido via clamp() — nessun override necessario */
.split-pane {
padding: 2rem;
}
.pane-title {
font-size: 2.25rem;
}
.showcase-item, .showcase-item.wide, .showcase-item.narrow {
grid-column: span 6;
}
}
/* ============================================
NUOVI COMPONENTI
============================================ */
/* Profile Photo */
.profile-photo-wrap {
width: 160px;
height: 160px;
border-radius: 50%;
border: 2px solid var(--accent-it);
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 0 30px rgba(var(--accent-it-rgb), 0.15);
background: rgba(var(--accent-it-rgb), 0.06);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 2rem;
font-weight: 700;
color: var(--accent-it);
}
.profile-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.creative-page .profile-photo-wrap {
border-color: var(--accent-creative);
box-shadow: 0 0 30px rgba(var(--accent-creative-rgb), 0.15);
background: rgba(var(--accent-creative-rgb), 0.06);
color: var(--accent-creative);
}
/* Kit Grid */
.kit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.kit-card {
padding: 2rem;
border-radius: 12px;
background: rgba(15, 15, 19, 0.5);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 1rem;
transition: var(--transition-smooth);
}
.it-page .kit-card:hover {
border-color: rgba(var(--accent-it-rgb), 0.4);
box-shadow: 0 10px 30px rgba(var(--accent-it-rgb), 0.06);
transform: translateY(-3px);
}
.kit-label {
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-it);
}
/* Reviews */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.review-card {
padding: 2rem;
border-radius: 12px;
background: rgba(15, 15, 19, 0.5);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 1.25rem;
transition: var(--transition-smooth);
}
.review-card:hover { border-color: rgba(var(--accent-it-rgb), 0.2); }
.review-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; }
.review-text { color: var(--text-secondary); font-style: italic; line-height: 1.7; flex-grow: 1; }
.review-author { border-top: 1px solid var(--border-color); padding-top: 1rem; }
.review-author-name { font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 0.2rem; }
.review-author-role { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }
/* Social Links */
.social-links-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.social-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.9rem;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.8rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
color: var(--text-secondary);
transition: var(--transition-fast);
}
.social-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.social-link.sc:hover { color: #ff5500; border-color: rgba(255,85,0,0.35); }
.social-link.yt:hover { color: #ff0000; border-color: rgba(255,0,0,0.35); }
.social-link.sp:hover { color: #1db954; border-color: rgba(29,185,84,0.35); }
.social-link.ig:hover { color: #e1306c; border-color: rgba(225,48,108,0.35); }
.social-link.li:hover { color: #0077b5; border-color: rgba(0,119,181,0.35); }
/* Embed Media */
.embed-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-darker); }
.embed-wrap iframe { display: block; width: 100%; }
/* Case Study Cards */
.case-study-card {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
border-radius: 12px;
background: rgba(15, 15, 19, 0.5);
border: 1px solid var(--border-color);
transition: var(--transition-smooth);
}
.case-study-card:hover {
border-color: rgba(var(--accent-it-rgb), 0.3);
box-shadow: 0 8px 20px rgba(var(--accent-it-rgb), 0.05);
}
.case-tag { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-it); text-transform: uppercase; letter-spacing: 0.1em; }
.case-result { font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-it); border-left: 2px solid var(--accent-it); padding-left: 0.75rem; padding-top: 0.75rem; margin-top: auto; }
/* Logo image */
.logo-img { height: 40px; width: auto; object-fit: contain; }
.logo-img-large { height: 64px; width: auto; object-fit: contain; }
/* Hero logo (jiri.html sopra il hero-subtitle) */
.hero-logo-img {
height: 90px;
width: auto;
display: block;
max-width: 320px;
}
@media (max-width: 768px) {
.hero-logo-img { height: 64px; }
}
/* Matrix canvas (z-index 0, dietro i blob e la griglia) */
canvas.matrix-rain {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0; pointer-events: none;
}
@media (max-width: 1024px) {
.kit-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================
END NEW COMPONENTS
============================================ */
@media (max-width: 768px) {
/* Navigation */
.nav-menu {
position: fixed;
top: 70px;
left: 0;
width: 100%;
height: calc(100vh - 70px);
background: var(--bg-dark);
flex-direction: column;
padding: 3rem 2rem;
gap: 2rem;
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition: var(--transition-smooth);
border-bottom: 1px solid var(--border-color);
}
.nav-menu.open {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
.nav-toggle {
display: block;
}
/* Split Screen Mobile Optimization (Symmetric Tap-to-Expand Resizing) */
.split-wrapper {
flex-direction: column;
height: 100vh;
width: 100vw;
}
.split-pane {
width: 100%;
height: 50vh;
padding: 2.5rem 1.5rem;
justify-content: center;
align-items: center;
transition: var(--transition-smooth);
border-bottom: 1px solid var(--border-color);
border-right: none;
}
.pane-content {
gap: 0.75rem;
max-width: 90%;
}
.pane-title {
font-size: 1.8rem;
height: auto;
margin-bottom: 0.2rem;
}
.pane-desc {
font-size: 0.9rem;
min-height: auto;
max-height: 0;
opacity: 0;
overflow: hidden;
margin-bottom: 0;
transition: var(--transition-smooth);
}
.split-pane .btn {
opacity: 0;
transform: translateY(15px);
pointer-events: none;
transition: var(--transition-smooth);
padding: 0.6rem 1.2rem;
font-size: 0.8rem;
width: auto;
}
/* Active states on mobile (vertical stack flex resizing) */
.split-wrapper.active-left .pane-it {
height: 65vh;
}
.split-wrapper.active-left .pane-creative {
height: 35vh;
opacity: 0.4;
filter: blur(1px);
}
.split-wrapper.active-left .pane-it .pane-desc {
max-height: 120px;
opacity: 1;
margin-bottom: 0.75rem;
}
.split-wrapper.active-left .pane-it .btn {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.split-wrapper.active-right .pane-creative {
height: 65vh;
}
.split-wrapper.active-right .pane-it {
height: 35vh;
opacity: 0.4;
filter: blur(1px);
}
.split-wrapper.active-right .pane-creative .pane-desc {
max-height: 120px;
opacity: 1;
margin-bottom: 0.75rem;
}
.split-wrapper.active-right .pane-creative .btn {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.split-center-logo {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
/* Page Hero & Section Padding adjustments on mobile */
.page-hero {
padding: 6rem 0 3rem;
}
/* .hero-title / .section-title ora fluidi via clamp() */
.hero-desc {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.section {
padding: 3.5rem 0;
}
.section-header {
margin-bottom: 2.5rem;
}
/* Grid structures */
.grid-2, .grid-3 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.showcase-grid {
grid-template-columns: 1fr;
}
.showcase-item, .showcase-item.wide, .showcase-item.narrow {
grid-column: span 1;
}
.showcase-card {
height: 280px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.footer-links-grid {
flex-direction: column;
gap: 2rem;
}
.kit-grid, .reviews-grid { grid-template-columns: 1fr; }
.profile-photo-wrap { width: 100px; height: 100px; font-size: 1.4rem; }
/* ── Mobile: footer legale in colonna ─── */
.footer-legal { flex-direction: column; gap: 0.4rem; }
.footer-bottom { font-size: 0.8rem; }
/* ── Mobile: letter-spacing ridotto sui subtitle monospaziati ─── */
.hero-subtitle,
.section-subtitle,
.pane-subtitle { letter-spacing: 0.07em; }
/* ── Mobile: rimuovi il cursore lampeggiante — salva repaint ─── */
.section-subtitle::after,
.hero-subtitle::after,
.pane-subtitle::after { display: none; }
/* ── Mobile it-page: matrix rain meno invasivo (opacity ridotta via JS) ─── */
/* Il canvas .matrix-rain viene gestito in JS con isMobile check */
canvas.matrix-rain { opacity: 0.28 !important; }
/* ── Mobile creative-page: grain statico → stop repaint ogni 80ms ─── */
body.creative-page::after {
animation: none;
opacity: 0.022;
background-position: 0 0;
}
/* ── Mobile: bio-glow più lento (meno repaint/s per text-shadow) ─── */
body.creative-page .hero-title,
body.creative-page .section-title {
animation-duration: 7s;
}
body.creative-page .hero-subtitle,
body.creative-page .section-subtitle,
body.creative-page .highlight-creative {
animation-duration: 6s;
}
/* ── Mobile: logo nav senza filter-animation (solo filtro statico) ─── */
body.creative-page .logo img {
animation: none;
filter: drop-shadow(0 0 6px rgba(119,0,255,0.55));
}
/* ── Mobile: bottoni full-width nella hero CTA ─── */
.page-hero .hero-cta,
.page-hero > .container > div[style*="display: flex"] {
flex-direction: column;
align-items: flex-start;
}
.page-hero .btn { width: auto; }
/* ── Mobile: social links gap più stretto ─── */
.social-links-row { gap: 0.5rem; }
.social-link { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
/* ── Mobile: audio embed leggermente meno alto ─── */
.audio-showcase.panel { padding: 1.25rem; }
/* ── Mobile: grid-scan disabilitato (inutile su touch) ─── */
.grid-scan { display: none; }
}
/* ============================================
PAGE TRANSITION
============================================ */
body {
animation: page-fade-in 0.35s ease both;
}
@keyframes page-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================
ANIMATIONS
============================================ */
/* --- GRID DRIFT (body::before già esistente) --- */
body::before { animation: grid-drift 60s linear infinite; }
@keyframes grid-drift {
from { background-position: 0 0, 0 0; }
to { background-position: 50px 50px, 50px 50px; }
}
/* --- CREATIVE PAGE: grid viola + grain grunge --- */
body.creative-page::before {
background-image:
linear-gradient(to right, rgba(119,0,255,0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(119,0,255,0.05) 1px, transparent 1px);
animation: grid-drift-cr 80s linear infinite;
}
@keyframes grid-drift-cr {
from { background-position: 0 0, 0 0; }
to { background-position: -50px 50px, -50px 50px; }
}
/* Grain grunge overlay (solo creative-page) con white-noise flicker */
body.creative-page::after {
content: '';
position: fixed; inset: 0;
z-index: 5; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 250px 250px;
animation: noise-flicker 0.08s steps(1) infinite;
}
@keyframes noise-flicker {
0% { opacity: 0.022; background-position: 0px 0px; }
14% { opacity: 0.038; background-position: -37px 18px; }
28% { opacity: 0.026; background-position: 52px -29px; }
42% { opacity: 0.043; background-position: -18px 63px; }
57% { opacity: 0.019; background-position: 74px -8px; }
71% { opacity: 0.036; background-position: -55px 42px; }
85% { opacity: 0.029; background-position: 31px -71px; }
100% { opacity: 0.022; background-position: 0px 0px; }
}
/* ================================================================
BIOLUMINESCENZA — glow angelico su testi e UI creative-page
================================================================ */
/* Titoli principali */
body.creative-page .hero-title,
body.creative-page .section-title {
text-shadow:
0 0 10px rgba(119,0,255,0.9),
0 0 28px rgba(119,0,255,0.55),
0 0 60px rgba(119,0,255,0.25),
0 0 110px rgba(119,0,255,0.1);
animation: bio-glow-h 4.5s ease-in-out infinite;
}
/* Sottotitoli e label accent */
body.creative-page .hero-subtitle,
body.creative-page .section-subtitle,
body.creative-page .highlight-creative {
text-shadow:
0 0 6px rgba(160,80,255,1),
0 0 18px rgba(119,0,255,0.7),
0 0 40px rgba(119,0,255,0.3);
animation: bio-glow-h 3.8s ease-in-out infinite 0.9s;
}
/* Pulsante CTA creativo */
body.creative-page .btn-creative {
box-shadow:
0 0 10px rgba(119,0,255,0.45),
0 0 28px rgba(119,0,255,0.18),
inset 0 0 10px rgba(119,0,255,0.08);
animation: bio-glow-btn 4s ease-in-out infinite 1.4s;
}
/* Card e panel */
body.creative-page .panel,
body.creative-page .card {
box-shadow:
0 0 18px rgba(119,0,255,0.1),
inset 0 0 12px rgba(119,0,255,0.04);
}
/* Service tags */
body.creative-page .service-tag {
box-shadow: 0 0 7px rgba(119,0,255,0.18);
}
/* Logo hero pulsante */
body.creative-page .hero-logo-img {
filter:
drop-shadow(0 0 22px rgba(119,0,255,0.65))
drop-shadow(0 0 55px rgba(119,0,255,0.22));
animation: entry-up 0.4s ease both, bio-glow-logo 5s ease-in-out 1s infinite;
}
/* Logo nav */
body.creative-page .logo img {
filter:
drop-shadow(0 0 8px rgba(119,0,255,0.7))
drop-shadow(0 0 20px rgba(119,0,255,0.28));
animation: bio-glow-logo 5s ease-in-out 1.6s infinite;
}
/* Alone radiale dietro la hero (effetto "luce da dietro" onirico) */
body.creative-page .page-hero {
position: relative;
}
body.creative-page .page-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 65% 55% at 50% 45%,
rgba(119,0,255,0.14) 0%,
rgba(119,0,255,0.05) 45%,
transparent 72%);
animation: bio-hero-breathe 6s ease-in-out infinite;
}
/* ── Keyframes bioluminescenza ── */
@keyframes bio-glow-h {
0%, 100% {
text-shadow:
0 0 10px rgba(119,0,255,0.85),
0 0 25px rgba(119,0,255,0.48),
0 0 55px rgba(119,0,255,0.2);
}
50% {
text-shadow:
0 0 16px rgba(150,50,255,1),
0 0 40px rgba(119,0,255,0.72),
0 0 85px rgba(119,0,255,0.32),
0 0 140px rgba(119,0,255,0.12),
0 0 6px rgba(210,170,255,0.8);
}
}
@keyframes bio-glow-btn {
0%, 100% {
box-shadow:
0 0 8px rgba(119,0,255,0.38),
0 0 22px rgba(119,0,255,0.14),
inset 0 0 8px rgba(119,0,255,0.06);
}
50% {
box-shadow:
0 0 16px rgba(119,0,255,0.65),
0 0 38px rgba(119,0,255,0.28),
0 0 65px rgba(119,0,255,0.1),
inset 0 0 14px rgba(119,0,255,0.12);
}
}
@keyframes bio-glow-logo {
0%, 100% {
filter:
drop-shadow(0 0 18px rgba(119,0,255,0.6))
drop-shadow(0 0 45px rgba(119,0,255,0.2));
}
50% {
filter:
drop-shadow(0 0 30px rgba(140,30,255,0.95))
drop-shadow(0 0 70px rgba(119,0,255,0.38))
drop-shadow(0 0 120px rgba(119,0,255,0.15));
}
}
@keyframes bio-hero-breathe {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
/* ================================================================
LEGGIBILITÀ — testo su sfondo ricco (it-page + creative-page)
================================================================ */
/* ── IT-PAGE: testo su matrix rain verde ────────────────────────── */
body.it-page {
--text-secondary: #a8b3be;
}
body.it-page p {
text-shadow: 0 1px 8px rgba(4,4,5,0.88);
}
body.it-page .hero-desc {
color: #c0cad3;
text-shadow: 0 1px 6px rgba(4,4,5,0.92);
}
/* Scrim concentrico nella hero IT — separa testo dal matrix rain */
body.it-page .page-hero {
background: radial-gradient(
ellipse 90% 100% at 50% 40%,
rgba(4,5,4,0.55) 0%,
rgba(4,5,4,0.18) 55%,
transparent 100%
);
}
/* Sezioni: velo scurissimo over matrix rain */
body.it-page .section {
background: rgba(5,6,5,0.2);
}
/* Pannelli più opachi per leggibilità interno */
body.it-page .panel {
background: rgba(10,12,10,0.84);
}
/* Footer IT */
body.it-page footer {
background: rgba(4,5,4,0.94);
}
/* ── CREATIVE-PAGE: testo su sfondo viola/sigil ──────────────────── */
/* Testo secondario leggermente più chiaro sul sfondo viola/sigil */
body.creative-page {
--text-secondary: #b0bac6;
}
/* Hero description: colore pieno, separazione con dark-halo */
body.creative-page .hero-desc {
color: #c8d0da;
text-shadow: 0 1px 6px rgba(4,4,5,0.92);
}
/* Paragrafi di sezione: dark-halo invisibile ma efficace su bg animato */
body.creative-page p {
text-shadow: 0 1px 8px rgba(4,4,5,0.88);
}
/* Pannelli leggermente più opachi → testo interno più leggibile */
body.creative-page .panel {
background: rgba(10,10,15,0.82);
}
/* Scrim oscuro leggero dietro le sezioni aperte — separa testo dal sigil */
body.creative-page .section {
background: rgba(6,6,9,0.22);
}
/* Scrim concentrico nel hero per la zona di testo */
body.creative-page .page-hero {
background: radial-gradient(
ellipse 90% 100% at 50% 40%,
rgba(5,5,8,0.52) 0%,
rgba(5,5,8,0.18) 55%,
transparent 100%
);
}
/* Footer su creative-page: leggibilità del bottom bar */
body.creative-page footer {
background: rgba(4,4,5,0.92);
}
/* --- BACKGROUND BLOBS (injected via JS) --- */
.bg-blobs {
position: fixed; top: 0; left: 0;
width: 100vw; height: 100vh;
overflow: hidden; pointer-events: none; z-index: 0;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(100px);
}
.blob-home-l {
width: 55vw; height: 65vh;
background: radial-gradient(circle, rgba(0,255,102,0.12) 0%, transparent 70%);
top: -15vh; left: -10vw;
animation: blob-a 22s ease-in-out infinite alternate;
}
.blob-home-r {
width: 55vw; height: 65vh;
background: radial-gradient(circle, rgba(119,0,255,0.1) 0%, transparent 70%);
bottom: -15vh; right: -10vw;
animation: blob-b 26s ease-in-out infinite alternate;
}
.blob-it-a {
width: 55vw; height: 50vh;
background: radial-gradient(circle, rgba(0,255,102,0.09) 0%, transparent 70%);
top: -10vh; left: -8vw;
animation: blob-a 22s ease-in-out infinite alternate;
}
.blob-it-b {
width: 40vw; height: 40vh;
background: radial-gradient(circle, rgba(0,200,80,0.06) 0%, transparent 70%);
bottom: 0; right: -5vw;
animation: blob-b 28s ease-in-out infinite alternate;
}
.blob-cr-a {
width: 55vw; height: 55vh;
background: radial-gradient(circle, rgba(119,0,255,0.1) 0%, transparent 70%);
top: -15vh; right: -8vw;
animation: blob-b 20s ease-in-out infinite alternate;
}
.blob-cr-b {
width: 40vw; height: 50vh;
background: radial-gradient(circle, rgba(60,0,160,0.08) 0%, transparent 70%);
bottom: 0; left: -5vw;
animation: blob-a 26s ease-in-out infinite alternate;
}
@keyframes blob-a {
0% { transform: translate(0,0) scale(1); }
33% { transform: translate(35px, 25px) scale(1.07); }
66% { transform: translate(-20px, 45px) scale(0.96); }
100% { transform: translate(45px, -35px) scale(1.04); }
}
@keyframes blob-b {
0% { transform: translate(0,0) scale(1); }
33% { transform: translate(-40px, -25px) scale(1.06); }
66% { transform: translate(28px, -45px) scale(0.97); }
100% { transform: translate(-30px, 40px) scale(1.03); }
}
/* --- SCAN LINE (injected via JS) --- */
.grid-scan {
position: fixed; top: -2px; left: 0;
width: 100%; height: 2px;
background: linear-gradient(to right,
transparent 0%, rgba(0,255,102,0.06) 20%,
rgba(0,255,102,0.22) 50%, rgba(0,255,102,0.06) 80%, transparent 100%);
z-index: 2; pointer-events: none;
animation: scan-sweep 12s ease-in-out infinite;
animation-delay: 3s;
}
.grid-scan.creative {
background: linear-gradient(to right,
transparent 0%, rgba(119,0,255,0.07) 20%,
rgba(119,0,255,0.22) 50%, rgba(119,0,255,0.07) 80%, transparent 100%);
}
@keyframes scan-sweep {
0% { top: -2px; opacity: 0; }
4% { opacity: 1; }
96% { opacity: 0.5; }
100% { top: 100vh; opacity: 0; }
}
/* --- CURSOR GLOW (injected via JS) --- */
.cursor-glow {
position: fixed; width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,255,102,0.04) 0%, transparent 70%);
pointer-events: none; z-index: 1; top: 0; left: 0;
will-change: transform; /* compositor layer — zero-repaint translate */
}
.cursor-glow.creative {
background: radial-gradient(circle, rgba(119,0,255,0.05) 0%, transparent 70%);
}
/* --- SCROLL REVEAL --- */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
transform 0.55s cubic-bezier(0.16,1,0.3,1);
will-change: opacity, transform;
}
.reveal.revealed {
opacity: 1;
transform: none;
will-change: auto; /* libera il layer GPU dopo l'animazione */
}
/* --- PAGE HERO ENTRY --- */
.page-hero .hero-subtitle { animation: entry-up 0.5s ease both; }
.page-hero .hero-title { animation: entry-up 0.5s 0.1s ease both; }
.page-hero .hero-desc { animation: entry-up 0.5s 0.22s ease both; }
.page-hero .hero-cta { animation: entry-up 0.5s 0.36s ease both; }
@keyframes entry-up {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
/* --- HERO TITLE GLITCH (rifinito: raro e leggero — la tipografia guida,
il glitch è solo un'eco dell'identità cyber, non protagonista) --- */
.it-page .hero-title { animation: glitch-it 14s step-end infinite 2.5s; }
.creative-page .hero-title { animation: glitch-cr 14s step-end infinite 2.5s; }
@keyframes glitch-it {
0%,90%,100% { text-shadow: none; }
91% { text-shadow: -1.5px 0 rgba(0,255,102,0.6), 1.5px 0 rgba(0,200,255,0.35); }
92% { text-shadow: none; }
93% { text-shadow: 1.5px 0 rgba(0,255,102,0.4); }
94% { text-shadow: none; }
}
@keyframes glitch-cr {
0%,90%,100% { text-shadow: none; }
91% { text-shadow: -1.5px 0 rgba(150,50,255,0.6), 1.5px 0 rgba(0,200,255,0.3); }
92% { text-shadow: none; }
93% { text-shadow: 1.5px 0 rgba(150,50,255,0.4); }
94% { text-shadow: none; }
}
/* --- PANE TITLE GLITCH on hover --- */
.pane-it:hover .pane-title { animation: glitch-it 4s step-end infinite; }
.pane-creative:hover .pane-title { animation: glitch-cr 4s step-end infinite; }
/* --- TERMINAL CURSOR on subtitles --- */
.section-subtitle::after,
.hero-subtitle::after,
.pane-subtitle::after {
content: "_";
display: inline-block;
margin-left: 1px;
animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
/* --- BUTTON SHIMMER --- */
.btn-it::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(0,255,102,0.14) 50%, transparent 60%);
background-size: 200% 100%; background-position: -200% 0;
opacity: 0; transition: opacity 0.3s;
}
.btn-it:hover::after { opacity: 1; animation: btn-shimmer 1.4s ease infinite; }
.btn-creative::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(119,0,255,0.16) 50%, transparent 60%);
background-size: 200% 100%; background-position: -200% 0;
opacity: 0; transition: opacity 0.3s;
}
.btn-creative:hover::after { opacity: 1; animation: btn-shimmer 1.4s ease infinite; }
@keyframes btn-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* --- CARD INNER GLOW --- */
.panel.service-card { position: relative; overflow: hidden; }
.panel.service-card::after {
content: ""; position: absolute; inset: 0;
opacity: 0; transition: opacity 0.4s ease;
pointer-events: none; border-radius: 12px;
}
.it-page .panel.service-card::after { background: linear-gradient(135deg, rgba(0,255,102,0.04) 0%, transparent 60%); }
.it-page .panel.service-card:hover::after { opacity: 1; }
.creative-page .panel.service-card::after { background: linear-gradient(135deg, rgba(119,0,255,0.05) 0%, transparent 60%); }
.creative-page .panel.service-card:hover::after { opacity: 1; }
.kit-card { position: relative; overflow: hidden; }
.kit-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(0,255,102,0.04) 0%, transparent 60%);
opacity: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: 12px;
}
.it-page .kit-card:hover::after { opacity: 1; }
/* --- SPLIT SCREEN CENTER LOGO PULSE --- */
.split-center-logo {
animation: logo-pulse 4s ease-in-out infinite;
}
@keyframes logo-pulse {
0%,100% { box-shadow: 0 0 20px rgba(0,0,0,0.8); }
50% { box-shadow: 0 0 30px rgba(255,255,255,0.05), 0 0 60px rgba(255,255,255,0.02); }
}
/* ================================================================
VERY SMALL SCREENS — 480px e sotto (iPhone SE, piccoli Android)
================================================================ */
@media (max-width: 480px) {
.container { padding: 0 1.25rem; }
.page-hero { padding: 5rem 0 2.5rem; }
.hero-logo-img { height: 52px; }
.hero-desc { font-size: 0.92rem; }
.section { padding: 2.5rem 0; }
.section-header { margin-bottom: 2rem; }
.btn { padding: 0.65rem 1.2rem; font-size: 0.82rem; }
/* Chip icone leggermente più compatte su schermi mini */
.service-card .icon { width: 46px; height: 46px; border-radius: 12px; }
.service-card .icon .ico { width: 23px; height: 23px; }
.showcase-card { height: 240px; }
.showcase-card .showcase-title { font-size: 1.2rem; }
.panel { padding: 1.5rem; }
.footer-grid { gap: 2rem; }
.footer-links-grid { gap: 1.25rem; }
/* Audio widget SoundCloud ridotto su schermi mini */
.embed-wrap iframe { min-height: 200px; }
}
/* ================================================================
PREFERS-REDUCED-MOTION — rispetta le preferenze accessibilità
================================================================ */
@media (prefers-reduced-motion: reduce) {
/* Ferma tutte le animazioni CSS pesanti */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* Eccezioni: mantieni i fade-in di entrata (01s = percettibile ma rapido) */
.page-hero .hero-subtitle,
.page-hero .hero-title,
.page-hero .hero-desc,
.page-hero .hero-cta,
.page-hero .hero-logo-img {
animation: entry-up 0.4s ease both !important;
}
/* Sigil grain fermo */
body.creative-page::after {
animation: none !important;
opacity: 0.018 !important;
}
/* Blob fermi */
.blob { animation: none !important; }
.grid-scan { animation: none !important; display: none; }
body::before { animation: none !important; }
body.creative-page::before { animation: none !important; }
.scroll-progress { display: none; }
}
/* ================================================================
POLISH & MICRO-INTERAZIONI — dettagli premium senza cambiare il look
================================================================ */
/* ── Selezione testo a tema (cyber green / violet) ──────────────── */
::selection { background: rgba(255,255,255,0.18); color: #ffffff; text-shadow: none; }
.it-page ::selection,
.it-page-theme ::selection { background: rgba(0,255,102,0.30); color: #eafff2; text-shadow: none; }
.creative-page ::selection,
.creative-page-theme ::selection { background: rgba(150,50,255,0.42); color: #f4ecff; text-shadow: none; }
/* ── Controlli nativi (range, checkbox, ecc.) colorati a tema ───── */
.it-page, .it-page-theme { accent-color: var(--accent-it); }
.creative-page, .creative-page-theme { accent-color: var(--accent-creative); }
/* ── Scrollbar a tema ───────────────────────────────────────────── */
.it-page ::-webkit-scrollbar-thumb { background: rgba(0,255,102,0.20); }
.it-page ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,102,0.40); }
.creative-page ::-webkit-scrollbar-thumb { background: rgba(119,0,255,0.26); }
.creative-page ::-webkit-scrollbar-thumb:hover { background: rgba(119,0,255,0.45); }
/* Firefox */
.it-page { scrollbar-color: rgba(0,255,102,0.3) var(--bg-darker); }
.creative-page { scrollbar-color: rgba(119,0,255,0.35) var(--bg-darker); }
/* ── Focus-visible: anello neon solo per navigazione da tastiera ── */
:focus-visible {
outline: 2px solid var(--accent-it);
outline-offset: 3px;
border-radius: 4px;
}
.creative-page :focus-visible,
.creative-page-theme :focus-visible,
.pane-creative :focus-visible { outline-color: var(--accent-creative); }
/* Il click del mouse non mostra l'anello (solo Tab) */
:focus:not(:focus-visible) { outline: none; }
/* ── Feedback tattile alla pressione dei bottoni ────────────────── */
/* (niente will-change permanente: i bottoni non animano in continuo) */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.06s; }
.theme-toggle-btn:active,
.track-play-btn:active,
.nav-toggle:active { transform: scale(0.94); }
/* ── Social link: micro-lift all'hover ──────────────────────────── */
.social-link:hover { transform: translateY(-2px); }
/* ── Service card: lift uniforme su entrambi i temi ─────────────── */
.it-page .service-card:hover,
.creative-page .service-card:hover { transform: translateY(-3px); }
/* ── Case study + review card: micro-lift coerente ──────────────── */
.case-study-card:hover,
.review-card:hover { transform: translateY(-3px); }
/* ── Link inline (contatti/footer): underline che cresce da sinistra ─ */
.footer-links-col a {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size 0.3s cubic-bezier(0.16,1,0.3,1), color 0.2s;
}
.footer-links-col a:hover { background-size: 100% 1px; }
/* ── Nav link: leggero glow del testo all'hover (oltre all'underline) ─ */
.nav-it .nav-link:hover { text-shadow: 0 0 8px rgba(var(--accent-it-rgb),0.4); }
.nav-creative .nav-link:hover { text-shadow: 0 0 8px rgba(var(--accent-creative-rgb),0.4); }
/* ── Embed iframe: bordo che si illumina a tema all'hover ───────── */
.it-page .embed-wrap:hover { border-color: rgba(0,255,102,0.3); }
.creative-page .embed-wrap:hover { border-color: rgba(119,0,255,0.35); }
/* ── Profile photo: pulse glow continuo, vivo ma discreto ───────── */
.profile-photo-wrap { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; }
.profile-photo-wrap:hover { transform: scale(1.04); }
.it-page .profile-photo-wrap:hover { box-shadow: 0 0 40px rgba(0,255,102,0.28); }
.creative-page .profile-photo-wrap:hover { box-shadow: 0 0 40px rgba(119,0,255,0.32); }
/* ── Immagini: rendering nitido + niente drag fantasma ──────────── */
img { -webkit-user-drag: none; user-select: none; }
/* ================================================================
SCROLL PROGRESS — barra sottile luminosa in cima (GPU scaleX)
================================================================ */
.scroll-progress {
position: fixed;
top: 0; left: 0;
width: 100%; height: 2px;
z-index: 200;
pointer-events: none;
transform: scaleX(0);
transform-origin: 0 50%;
will-change: transform;
}
.it-page .scroll-progress,
.it-page-theme .scroll-progress {
background: linear-gradient(90deg, rgba(0,255,102,0) 0%, var(--accent-it) 100%);
box-shadow: 0 0 10px rgba(0,255,102,0.6);
}
.creative-page .scroll-progress,
.creative-page-theme .scroll-progress {
background: linear-gradient(90deg, rgba(119,0,255,0) 0%, var(--accent-creative) 100%);
box-shadow: 0 0 10px rgba(119,0,255,0.65);
}
/* ================================================================
DISPOSITIVI TOUCH (anche in "modalità desktop") — anti-sfarfallio
Query basate sulla CAPACITÀ del dispositivo: funzionano anche quando
il telefono falsifica la larghezza (dove @media max-width fallisce).
================================================================ */
@media (hover: none), (pointer: coarse) {
/* Glow del mouse: inutile e bloccato al centro su touch → via */
.cursor-glow { display: none !important; }
/* Grana TV: ferma (niente flicker "video in bassa qualità"), solo texture */
body.creative-page::after {
animation: none !important;
opacity: 0.02 !important;
background-position: 0 0 !important;
}
/* Scanline sweep: superflua su touch */
.grid-scan { display: none !important; }
/* Griglia di sfondo: statica su touch (l'animazione del background-position
è un repaint continuo a schermo intero → causa di micro-scatti nello scroll) */
body::before,
body.creative-page::before { animation: none !important; }
}