/* === WAY4TECH NEW MODERN CSS === */
/* Reset e base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Text selection with Way4Tech brand colors */
::selection {
background: #e74c3c;
color: #ffffff;
text-shadow: none;
}
::-moz-selection {
background: #e74c3c;
color: #ffffff;
text-shadow: none;
}
/* Selection for inputs and textareas */
input::selection,
textarea::selection {
background: #e74c3c;
color: #ffffff;
}
input::-moz-selection,
textarea::-moz-selection {
background: #e74c3c;
color: #ffffff;
}
/* =========================================
PILLAR PAGES (Strategy / Technologies / Soluzioni)
========================================= */
/* Intro (kicker, H2, lead) */
.strategy-panels .panels-intro,
.tech-segments .segments-intro,
.solutions-panels .panels-intro {
text-align: center;
max-width: 860px;
margin: 0 auto clamp(68px, 8vw, 96px);
}
.strategy-panels .panels-intro .kicker,
.tech-segments .segments-intro .kicker,
.solutions-panels .panels-intro .kicker { display: inline-block; margin-bottom: 10px; }
.strategy-panels .panels-intro h2,
.tech-segments .segments-intro h2,
.solutions-panels .panels-intro h2 {
font-size: clamp(2.1rem, 3.2vw, 3.1rem);
line-height: 1.08;
margin: 0 0 10px 0;
}
.strategy-panels .panels-intro .lead,
.tech-segments .segments-intro .lead,
.solutions-panels .panels-intro .lead {
color: var(--gray-700, #424242);
font-size: clamp(1.02rem, 1.35vw, 1.14rem);
line-height: 1.85;
}
/* Blocchi pannelli: aspetto vetro + barra laterale brand */
.strategy-panels .panel,
.tech-entry,
.solutions-panels .panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: clamp(32px, 4vw, 72px);
padding: clamp(30px, 5vw, 64px);
margin-bottom: clamp(52px, 7.5vw, 96px);
border-radius: 28px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(231, 76, 60, 0.12);
box-shadow: 0 30px 70px rgba(22, 29, 37, 0.08);
overflow: hidden;
isolation: isolate;
}
.strategy-panels .panel:last-of-type,
.tech-entry:last-of-type,
.solutions-panels .panel:last-of-type { margin-bottom: 0; }
/* Accent bar */
.strategy-panels .panel::after,
.tech-entry::after,
.solutions-panels .panel::after {
content: "";
position: absolute;
top: clamp(22px, 3.8vw, 40px);
bottom: clamp(22px, 3.8vw, 40px);
width: 8px;
border-radius: 999px;
background: var(--gradient-primary);
opacity: 0.95;
}
.strategy-panels .panel.panel-right::after,
.solutions-panels .panel.panel-right::after,
.tech-entry.entry-right::after { right: clamp(18px, 3.2vw, 40px); }
.strategy-panels .panel.panel-left::after,
.solutions-panels .panel.panel-left::after,
.tech-entry.entry-left::after { left: clamp(18px, 3.2vw, 40px); }
/* Testo nel corpo dei pannelli */
.strategy-panels .panel-text,
.solutions-panels .panel-text,
.tech-entry .entry-body {
display: flex;
flex-direction: column;
gap: 18px;
color: var(--gray-800, #1f2937);
font-size: 1.05rem;
line-height: 1.8;
}
/* Titoli e tag */
.strategy-panels .panel-title,
.solutions-panels .panel-title,
.tech-entry .entry-heading { display: flex; flex-direction: column; gap: 12px; }
.strategy-panels .panel-title h3,
.solutions-panels .panel-title h3 { font-size: clamp(2.0rem, 2.8vw, 2.6rem); line-height: 1.05; }
.tech-entry .entry-heading h3 { font-size: clamp(2.1rem, 3vw, 2.8rem); line-height: 1.05; }
.strategy-panels .panel-tag,
.solutions-panels .panel-tag,
.tech-entry .entry-tag { font-size: .95rem; color: var(--gray-600, #6b7280); }
/* Evidenze e eyebrow */
.strategy-panels .panel-highlight,
.solutions-panels .panel-highlight,
.tech-entry .entry-highlight,
.tech-entry .entry-eyebrow {
color: var(--primary-red);
font-weight: 600;
letter-spacing: .01em;
}
.tech-entry .entry-eyebrow { color: var(--gray-700); font-weight: 600; }
/* CTA link dentro i pannelli */
.strategy-panels .panel-cta,
.solutions-panels .panel-cta,
.tech-entry .entry-link {
align-self: flex-start;
font-weight: 700;
color: var(--primary-red);
text-decoration: none;
border-bottom: 2px solid rgba(231, 76, 60, 0.38);
padding-bottom: 4px;
margin-top: 8px;
transition: color var(--transition-normal), border-color var(--transition-normal), transform .2s ease;
}
.strategy-panels .panel-cta:hover,
.solutions-panels .panel-cta:hover,
.tech-entry .entry-link:hover {
color: var(--accent-orange);
border-color: rgba(255, 107, 53, 0.6);
transform: translateY(-1px);
}
/* Allineamenti per layout alternato */
.strategy-panels .panel.panel-right .panel-title,
.solutions-panels .panel.panel-right .panel-title,
.tech-entry.entry-right .entry-heading { text-align: right; }
.strategy-panels .panel.panel-left .panel-title,
.solutions-panels .panel.panel-left .panel-title,
.tech-entry.entry-left .entry-heading { text-align: left; }
/* Hover lift delicato */
.strategy-panels .panel:hover,
.tech-entry:hover,
.solutions-panels .panel:hover {
box-shadow: 0 36px 90px rgba(22, 29, 37, 0.12);
transform: translateY(-2px);
transition: box-shadow .28s ease, transform .28s ease;
}
/* Sezioni base con gradiente chiaro coerente */
.strategy-panels,
.tech-segments,
.solutions-panels {
padding: clamp(96px, 9vw, 120px) 0;
background: linear-gradient(120deg, #ffffff 0%, #f6f8fb 58%, rgba(255, 59, 48, 0.08) 100%);
}
/* Responsivo */
@media (max-width: 1024px) {
.strategy-panels .panel,
.tech-entry,
.solutions-panels .panel {
grid-template-columns: 1fr;
}
.strategy-panels .panel::after,
.tech-entry::after,
.solutions-panels .panel::after { display: none; }
.strategy-panels .panel.panel-right .panel-title,
.strategy-panels .panel.panel-left .panel-title,
.solutions-panels .panel.panel-right .panel-title,
.solutions-panels .panel.panel-left .panel-title,
.tech-entry.entry-right .entry-heading,
.tech-entry.entry-left .entry-heading { text-align: left; }
}
/* Piccoli affinamenti tipografici */
.strategy-panels p b,
.tech-segments p b,
.solutions-panels p b { color: var(--gray-900, #0f172a); }
.strategy-panels ul.list-ticked li,
.solutions-panels ul.list-ticked li { list-style: disc; margin-left: 1.15rem; }
/* Migliore contrasto per testi sopra i background fixed */
main::before { pointer-events: none; }
/* Accessibilit�: focus solo per tastiera */
.strategy-panels .panel-cta:focus,
.solutions-panels .panel-cta:focus,
.tech-entry .entry-link:focus { outline: none; }
.strategy-panels .panel-cta:focus-visible,
.solutions-panels .panel-cta:focus-visible,
.tech-entry .entry-link:focus-visible {
outline: 2px solid var(--accent-orange);
outline-offset: 2px;
border-color: var(--accent-orange);
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height, 96px);
/* Hide vertical scrollbar globally while preserving scroll */
-ms-overflow-style: none; /* IE/Edge legacy */
scrollbar-width: none; /* Firefox */
}
/* WebKit browsers (Chrome, Safari, Edge) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 0;
height: 0;
}
:root {
/* Palette corretta basata sul logo Way4Tech - rosso vivace */
--primary-black: #1A1A1A;
--primary-red: #FF3B30;
--secondary-red: #FF4757;
--accent-orange: #FF6B35;
--accent-coral: #FF7675;
--header-height: 96px;
--header-h: 96px;
/* Palette neutrale moderna */
--white: #FFFFFF;
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #EEEEEE;
--gray-300: #E0E0E0;
--gray-400: #BDBDBD;
--gray-500: #9E9E9E;
--gray-600: #757575;
--gray-700: #424242;
--gray-800: #212121;
--gray-900: #000000;
/* Gradients moderni corretti */
--gradient-primary: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
--gradient-secondary: linear-gradient(135deg, var(--accent-orange), var(--accent-coral));
--gradient-dark: linear-gradient(135deg, var(--primary-black), var(--gray-800));
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
--gradient-wave: linear-gradient(90deg, transparent 0%, var(--primary-red) 25%, var(--accent-orange) 50%, var(--primary-red) 75%, transparent 100%);
/* Advanced shadows (iOS 18 style) */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.12);
/* Typography */
--font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', sans-serif;
--font-w4t: 'SF w4t', 'Monaco', 'Inconsolata', 'Roboto w4t', w4tspace;
/* Font sizes */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 2.5rem;
--space-3xl: 3rem;
--space-4xl: 4rem;
/* Border radius */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 24px;
--radius-3xl: 32px;
--radius-full: 50%;
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* iOS 18 Glass tokens */
--glass-blur: 28px;
--glass-saturation: 180%;
--glass-bg-dark: rgba(24, 24, 28, 0.45);
--glass-bg-tile: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.22);
--glass-border-strong: rgba(255, 255, 255, 0.32);
--glass-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--gray-900);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
cursor: none;
padding-top: var(--header-height, 96px);
}
@media (hover: none) and (pointer: coarse) {
body {
cursor: auto;
}
a,
button,
.clickable {
cursor: pointer !important;
}
.cursor-dot,
.cursor-aura {
display: none !important;
}
}
/* Subtle iOS-like wallpaper behind content to enhance glass blur */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
/* very soft brand-tinted blobs + micro-noise */
background:
radial-gradient(800px 600px at 10% -10%, rgba(255,59,48,0.06), transparent 60%),
radial-gradient(900px 700px at 110% 20%, rgba(255,107,53,0.05), transparent 60%),
radial-gradient(1000px 650px at 50% 120%, rgba(255,71,87,0.04), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
url('data:image/svg+xml;utf8,');
background-blend-mode: normal, normal, normal, normal, multiply;
}
/* === CUSTOM CURSOR EFFECTS === */
.cursor-dot {
position: fixed;
width: 8px;
height: 8px;
background: var(--primary-red);
border-radius: 50%;
z-index: 9999;
pointer-events: none;
transition: transform 0.1s ease-out;
opacity: 1;
box-shadow: 0 0 8px rgba(255, 59, 48, 0.8);
}
.cursor-aura {
position: fixed;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 59, 48, 0.12) 0%, rgba(255, 107, 53, 0.08) 30%, rgba(255, 71, 87, 0.04) 60%, transparent 80%);
border-radius: 50%;
z-index: 9998;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
opacity: 0.7;
filter: blur(1px);
}
.cursor-aura::before {
content: '';
position: absolute;
inset: -20px;
background: radial-gradient(circle, rgba(255, 59, 48, 0.08) 0%, rgba(255, 71, 87, 0.04) 40%, transparent 70%);
border-radius: 50%;
animation: pulse-aura 3s ease-in-out infinite;
}
.cursor-aura::after {
content: '';
position: absolute;
inset: 20px;
background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, transparent 60%);
border-radius: 50%;
animation: pulse-aura-inner 2s ease-in-out infinite reverse;
}
body.w4t-reel-hover .cursor-dot,
body.w4t-reel-hover .cursor-aura {
opacity: 0 !important;
transform: scale(0.25) !important;
}
/* Work cards: show only the "Prova demo" circle (no custom cursor / hand cursor). */
body.w4t-demo-hover {
cursor: none !important;
}
body.w4t-demo-hover a,
body.w4t-demo-hover button,
body.w4t-demo-hover .clickable {
cursor: none !important;
}
body.w4t-demo-hover .cursor-dot,
body.w4t-demo-hover .cursor-aura {
opacity: 0 !important;
transform: scale(0.25) !important;
}
@keyframes pulse-aura-inner {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.3); opacity: 0.2; }
}
@keyframes pulse-aura {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 0.4; }
}
/* Hide cursor on clickable elements */
a, button, .clickable {
cursor: none;
}
a:hover ~ .cursor-dot,
button:hover ~ .cursor-dot,
.clickable:hover ~ .cursor-dot {
transform: scale(1.5);
background: var(--secondary-red);
}
a:hover ~ .cursor-aura,
button:hover ~ .cursor-aura,
.clickable:hover ~ .cursor-aura {
transform: scale(2);
opacity: 1;
}
/* === UTILITIES === */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Simple utilities (global, reusable) */
.text-center { text-align: center; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.centered-media { display: flex; justify-content: center; }
.media-frame {
width: 100%;
max-width: 1000px;
border-radius: 16px;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-xl);
}
.gradient-text, .grad {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Enhanced Glassmorphism */
.glassmorphism {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-glass);
}
/* Buttons with enhanced hover effects */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-lg);
border: 2px solid transparent; /* avoid layout shift on hover */
border-radius: var(--radius-lg);
font-size: var(--text-base);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-normal);
min-height: 48px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-normal);
}
.btn.primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: var(--shadow-lg);
}
.btn.primary:hover {
/* invert: transparent background, red text + outline */
background: transparent;
color: var(--primary-red);
border-color: var(--primary-red);
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(255, 59, 48, 0.18);
}
.btn.secondary {
background: transparent;
color: var(--primary-red);
border: 2px solid var(--primary-red);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
position: relative;
overflow: hidden;
}
.btn.secondary::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-normal);
z-index: -1;
}
.btn.secondary:hover {
color: var(--white);
transform: translateY(-3px);
box-shadow:
0 15px 30px rgba(255, 59, 48, 0.25),
0 5px 15px rgba(255, 107, 53, 0.2);
border-color: transparent;
position: relative;
z-index: 1;
}
.btn.secondary:hover::before {
opacity: 1;
}
/* Glass CTA (red) used across pages */
a.cta-glass-red {
display: inline-block;
padding: 12px 28px;
border: 2px solid var(--primary-red);
border-radius: var(--radius-lg);
font: 600 16px/1.3 var(--font-primary);
color: var(--primary-red);
background: transparent;
text-decoration: none;
position: relative;
overflow: hidden;
transition: color var(--transition-normal),
background-color var(--transition-normal),
border-color var(--transition-normal);
}
a.cta-glass-red:hover {
color: var(--white);
background: rgba(255, 59, 48, 0.85);
border-color: var(--primary-red);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
box-shadow: 0 8px 24px rgba(255, 59, 48, 0.25);
}
a.cta-glass-red::after {
content: '';
position: absolute;
top: 0; left: -75%;
width: 50%; height: 100%;
background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
transition: all .6s ease;
}
a.cta-glass-red:hover::after { left: 130%; }
/* Special hover effect for "Scopri di pi�" button */
.btn.special-hover {
position: relative;
overflow: hidden;
transition: all var(--transition-slow);
}
.btn.special-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
transition: left 0.6s ease;
z-index: 1;
}
.btn.special-hover:hover::before {
left: 100%;
}
.btn.special-hover:hover {
transform: translateY(-4px) scale(1.05);
box-shadow:
0 25px 50px rgba(255, 59, 48, 0.4),
0 15px 30px rgba(255, 107, 53, 0.3),
inset 0 2px 0 rgba(255, 255, 255, 0.3),
0 0 40px rgba(255, 59, 48, 0.5);
background: linear-gradient(135deg,
var(--primary-red) 0%,
var(--secondary-red) 50%,
var(--accent-orange) 100%
);
color: var(--white);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.btn.large {
padding: var(--space-lg) var(--space-2xl);
font-size: var(--text-lg);
min-height: 56px;
}
/* Clickable cards */
.clickable {
cursor: pointer;
transition: all var(--transition-normal);
}
.clickable:hover {
transform: translateY(-8px) scale(1.02);
}
/* === SECTION SEPARATORS === */
.section-separator {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--primary-red) 20%,
var(--secondary-red) 50%,
var(--accent-orange) 80%,
transparent 100%
);
opacity: 0.6;
}
/* === ANIMATIONS === */
[data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].reveal,
[data-reveal].revealed {
opacity: 1;
transform: translateY(0);
}
/* === HEADER === */
.modern-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.modern-header.is-scrolled {
background: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(30px) saturate(150%);
backdrop-filter: blur(30px) saturate(150%);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
opacity: 1;
visibility: visible;
display: flex;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
min-height: 80px;
}
.brand .logo {
height: 45px;
width: auto;
border-radius: var(--radius-sm);
transition: transform var(--transition-normal);
}
.brand .logo:hover {
transform: scale(1.05);
}
html.intro-skip .intro-screen {
display: none !important;
}
.brand--clickable {
cursor: pointer;
}
.brand--clickable:focus-visible {
outline: none;
}
.brand--clickable:focus-visible .logo {
box-shadow: 0 0 0 3px rgba(255, 82, 70, 0.35);
border-radius: var(--radius-sm);
}
html.js-enabled .modern-header.modern-header--intro-hidden {
opacity: 0;
pointer-events: none;
}
html.js-enabled .modern-header.modern-header--intro-hidden .brand .logo {
opacity: 0;
transform: translateY(-18px) scale(0.78);
}
html.js-enabled .modern-header.modern-header--intro-hidden .menu > a,
html.js-enabled .modern-header.modern-header--intro-hidden .menu > .dropdown > .menu-label {
opacity: 0;
}
html.js-enabled .modern-header.modern-header--intro-playing {
opacity: 1;
pointer-events: auto;
}
html.js-enabled .modern-header.modern-header--intro-playing .brand .logo {
animation: header-logo-bounce 0.92s cubic-bezier(0.34, 1.45, 0.38, 1) forwards;
}
html.js-enabled .modern-header.modern-header--intro-playing .menu > a,
html.js-enabled .modern-header.modern-header--intro-playing .menu > .dropdown > .menu-label {
transition: opacity 0.35s ease, transform 0.35s ease;
}
.menu a,
.menu .menu-label {
position: relative;
}
.menu [data-typing="true"]::after {
content: '�';
display: inline-block;
margin-left: 4px;
width: 0.45ch;
animation: nav-caret-blink 0.8s steps(2) infinite;
opacity: 0.6;
}
.menu a.is-typed,
.menu .menu-label.is-typed {
opacity: 1 !important;
}
@keyframes nav-caret-blink {
0%, 45% { opacity: 0.7; }
50%, 100% { opacity: 0; }
}
@keyframes header-logo-bounce {
0% {
opacity: 0;
transform: translateY(-28px) scale(0.72);
}
55% {
opacity: 1;
transform: translateY(8px) scale(1.08);
}
72% {
transform: translateY(-6px) scale(0.97);
}
85% {
transform: translateY(4px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.menu {
display: flex;
align-items: center;
gap: var(--space-xl);
}
.menu a, .menu .menu-label {
color: var(--gray-700);
text-decoration: none;
font-weight: 500;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
transition: all var(--transition-normal);
cursor: pointer;
position: relative;
}
.menu a::after, .menu .menu-label::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: all var(--transition-normal);
transform: translateX(-50%);
}
.menu a:hover::after, .menu .menu-label:hover::after,
.menu a.active::after {
width: 80%;
}
.menu a:hover, .menu .menu-label:hover,
.menu a.active {
color: var(--primary-red);
}
.dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-2xl);
padding: var(--space-md);
min-width: 250px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-normal);
}
.dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown:focus-within .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-content a {
display: block;
padding: var(--space-md);
border-radius: var(--radius-md);
color: var(--gray-700);
font-size: var(--text-sm);
transition: all var(--transition-fast);
}
.dropdown-content a:hover {
background: var(--gray-50);
color: var(--primary-red);
transform: translateX(4px);
}
.burger {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
width: 42px;
height: 42px;
padding: 0;
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
color: var(--gray-800);
cursor: pointer;
transition: background var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal),
color var(--transition-normal);
}
.burger span {
display: block;
width: 22px;
height: 2px;
border-radius: 999px;
background: currentColor;
transition: transform var(--transition-normal),
opacity var(--transition-normal),
width var(--transition-normal),
background var(--transition-normal);
}
.burger span:nth-child(2) {
width: 16px;
}
.burger:hover,
.burger:focus-visible {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(26, 26, 26, 0.08);
box-shadow: 0 10px 28px rgba(31, 41, 55, 0.15);
color: var(--primary-red);
}
.burger:focus-visible {
outline: 2px solid rgba(255, 59, 48, 0.25);
outline-offset: 2px;
}
.burger.is-active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
width: 22px;
}
.burger.is-active span:nth-child(2) {
opacity: 0;
transform: scaleX(0.4);
}
.burger.is-active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
width: 22px;
}
.burger.is-active {
color: var(--primary-red);
}
/* === HOMEPAGE (w4t-STYLE) HEADER === */
.modern-header.modern-header--w4t {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: none;
box-shadow: none;
transform: translateY(0);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
--w4t-action-gap: 12px;
--w4t-mail-size: 44px;
--w4t-area-max: 210px;
--w4t-right-safe-offset: 40px;
--w4t-brand-width: 200px;
--w4t-right-reserved: calc(
var(--w4t-mail-size) + var(--w4t-action-gap) + var(--w4t-area-max) + 14px +
var(--w4t-right-safe-offset)
);
}
.modern-header.modern-header--w4t.is-hidden {
transform: translateY(-110%);
}
.modern-header.modern-header--w4t .container.nav {
max-width: none;
padding-left: clamp(20px, 4vw, 46px);
padding-right: clamp(20px, 4vw, 46px);
}
.modern-header.modern-header--w4t .nav {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-md);
padding: 24px 0;
min-height: 88px;
position: relative;
padding-right: var(--w4t-right-reserved);
}
/* Homepage: header elements may be hidden inline (keep hidden, but do not reserve space) */
.modern-header.modern-header--w4t nav.menu[style*="visibility:hidden"],
.modern-header.modern-header--w4t nav.menu[style*="visibility: hidden"] {
display: none !important;
}
.modern-header.modern-header--w4t button.burger[style*="visibility:hidden"],
.modern-header.modern-header--w4t button.burger[style*="visibility: hidden"] {
display: none !important;
}
.modern-header.modern-header--w4t .menu {
--w4t-pill-inset: 6px;
position: relative;
justify-self: center;
transform: translateX(0);
padding: var(--w4t-pill-inset);
gap: 2px;
border-radius: 999px;
background: rgba(26, 26, 26, 0.86);
border: 1px solid rgba(255, 59, 48, 0.18);
box-shadow: 0 18px 46px rgba(17, 24, 39, 0.22);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
isolation: isolate;
}
.modern-header.modern-header--w4t .menu a,
.modern-header.modern-header--w4t .menu .menu-label {
color: rgba(255, 255, 255, 0.9);
padding: 10px 16px;
border-radius: 999px;
position: relative;
z-index: 1;
}
.modern-header.modern-header--w4t .dropdown-content {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 22px 52px rgba(0, 0, 0, 0.22);
}
.modern-header.modern-header--w4t .dropdown-content a {
color: rgba(15, 23, 42, 0.92);
border-radius: 14px;
}
.modern-header.modern-header--w4t .dropdown-content a.dropdown-all {
font-weight: 700;
color: var(--primary-red);
background: rgba(227, 54, 63, 0.08);
border: 1px solid rgba(227, 54, 63, 0.18);
margin-bottom: 6px;
}
.modern-header.modern-header--w4t .dropdown-content a.dropdown-all:hover,
.modern-header.modern-header--w4t .dropdown-content a.dropdown-all:focus-visible {
color: #fff;
background: var(--primary-red);
}
.modern-header.modern-header--w4t .dropdown-content a:hover,
.modern-header.modern-header--w4t .dropdown-content a:focus-visible {
color: #fff;
background: var(--primary-red);
transform: none;
outline: none;
}
.modern-header.modern-header--w4t .menu a::after,
.modern-header.modern-header--w4t .menu .menu-label::after {
content: none;
}
.modern-header.modern-header--w4t .menu .menu-label {
display: inline-flex;
align-items: center;
gap: 8px;
user-select: none;
}
.modern-header.modern-header--w4t .menu a:hover,
.modern-header.modern-header--w4t .menu .menu-label:hover {
color: #fff;
}
.modern-header.modern-header--w4t .menu a.active {
color: var(--primary-black);
font-weight: 650;
}
.modern-header.modern-header--w4t .menu a:focus-visible,
.modern-header.modern-header--w4t .menu .menu-label:focus-visible {
outline: 2px solid rgba(255, 220, 106, 0.6);
outline-offset: 2px;
}
.modern-header.modern-header--w4t .menu-pill {
position: absolute;
top: var(--w4t-pill-inset);
bottom: var(--w4t-pill-inset);
left: var(--w4t-pill-inset);
width: 0px;
transform: translateX(0px);
border-radius: 999px;
opacity: 0;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.2s ease;
z-index: 0;
}
.modern-header.modern-header--w4t .menu-pill.is-visible {
opacity: 1;
}
.modern-header.modern-header--w4t .menu-pill--hover {
width: var(--w4t-hover-w, 0px);
transform: translateX(var(--w4t-hover-x, 0px));
background: rgba(255, 59, 48, 0.2);
}
.modern-header.modern-header--w4t .menu-pill--active {
width: var(--w4t-active-w, 0px);
transform: translateX(var(--w4t-active-x, 0px));
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.modern-header.modern-header--w4t .header-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 16px;
border-radius: 999px;
text-decoration: none;
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: transform var(--transition-normal),
background var(--transition-normal),
border-color var(--transition-normal);
white-space: nowrap;
}
/* Desktop: keep the Area Riservata CTA with a fixed max length */
@media (min-width: 769px) {
.modern-header.modern-header--w4t .menu {
transform: translateX(
calc((var(--w4t-brand-width) - var(--w4t-right-reserved)) / 2)
);
}
.modern-header.modern-header--w4t .header-cta--area {
width: var(--w4t-area-max);
max-width: var(--w4t-area-max);
justify-content: center;
}
}
.modern-header.modern-header--w4t .header-cta--area {
background: rgba(26, 26, 26, 0.9);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
position: absolute;
top: 50%;
right: calc(var(--w4t-mail-size) + var(--w4t-action-gap));
transform: translateY(-50%);
width: auto;
max-width: var(--w4t-area-max);
z-index: 3;
margin-right: var(--w4t-right-safe-offset);
}
.modern-header.modern-header--w4t .header-cta:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 59, 48, 0.35);
}
.modern-header.modern-header--w4t .header-cta--area:hover {
background: rgba(26, 26, 26, 0.98);
transform: translateY(calc(-50% - 1px));
}
.modern-header.modern-header--w4t .header-cta:focus-visible {
outline: 3px solid rgba(255, 59, 48, 0.35);
outline-offset: 3px;
}
.modern-header.modern-header--w4t .header-contact {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
width: 44px;
padding: 0;
border-radius: 999px;
background: var(--primary-red);
color: #ffffff;
text-decoration: none;
overflow: hidden;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
transition: transform var(--transition-normal),
box-shadow var(--transition-normal),
opacity var(--transition-normal);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 4;
margin-right: var(--w4t-right-safe-offset);
}
.modern-header.modern-header--w4t button.header-contact {
border: none;
cursor: pointer;
font: inherit;
letter-spacing: inherit;
line-height: inherit;
-webkit-appearance: none;
appearance: none;
}
.modern-header.modern-header--w4t .header-contact:hover {
transform: translateY(calc(-50% - 1px));
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}
.modern-header.modern-header--w4t .header-contact:focus-visible {
outline: 3px solid rgba(255, 59, 48, 0.35);
outline-offset: 3px;
}
.modern-header.modern-header--w4t .header-contact__icon {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 999px;
padding: 10px;
background: transparent;
}
.modern-header.modern-header--w4t .header-contact__icon svg {
width: 20px;
height: 20px;
animation: w4t-wave 2.5s infinite;
transform-origin: 70% 70%;
}
.modern-header.modern-header--w4t .header-contact__icon svg path {
fill: currentColor !important;
}
.modern-header.modern-header--w4t .header-contact__icon svg.icon-mail path {
fill: none !important;
stroke: currentColor !important;
}
body.footer-in-view #contactDrawerBtn {
opacity: 0;
transform: scale(0.92);
pointer-events: none;
}
/* Homepage request: keep the mail icon visible even when footer is in view */
body.home.footer-in-view .modern-header.modern-header--w4t #contactDrawerBtn {
opacity: 1 !important;
transform: translateY(-50%) !important;
pointer-events: auto !important;
}
.site-footer .footer-contact-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.95rem;
letter-spacing: 0.01em;
width: auto;
align-self: flex-start;
margin-top: 0;
max-height: 0;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(255, 59, 48, 0.35);
background: rgba(255, 59, 48, 0.1);
color: rgba(255, 59, 48, 0.95);
font-weight: 650;
cursor: pointer;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
overflow: hidden;
transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease,
max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
margin-top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-footer .footer-contact-trigger::after {
content: "?";
font-size: 1.05em;
opacity: 0.9;
transition: transform 0.2s ease;
}
.site-footer .footer-contact-trigger:hover {
background: rgba(255, 59, 48, 0.16);
}
body.footer-in-view .site-footer .footer-contact-trigger {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
max-height: 44px;
padding: 0 18px;
margin-top: 14px;
background: var(--primary-red);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
body.footer-in-view .site-footer .footer-contact-trigger:hover::after,
body.footer-in-view .site-footer .footer-contact-trigger:focus-visible::after {
transform: translateX(3px);
}
@keyframes w4t-wave {
0% {
transform: rotate(0);
}
10% {
transform: rotate(15deg);
}
15% {
transform: rotate(-15deg);
}
20% {
transform: rotate(14deg);
}
25% {
transform: rotate(-15deg);
}
30% {
transform: rotate(0);
}
to {
transform: rotate(0);
}
}
@media (max-width: 767px) {
.modern-header.modern-header--w4t .nav {
padding: 14px var(--space-md);
}
.modern-header.modern-header--w4t .header-cta {
height: 40px;
padding: 0 12px;
font-size: 0.92rem;
}
.modern-header.modern-header--w4t .header-contact {
width: 46px;
height: 46px;
justify-content: center;
}
.modern-header.modern-header--w4t {
--w4t-mail-size: 46px;
--w4t-area-max: 180px;
}
}
@media (max-width: 768px) {
/* Mobile/tablet: hide Area Riservata CTA (desktop only) */
.modern-header.modern-header--w4t .header-cta--area {
display: none !important;
}
.modern-header.modern-header--w4t {
--w4t-area-max: 0px;
--w4t-action-gap: 0px;
}
}
@media (max-width: 420px) {
.modern-header.modern-header--w4t {
--w4t-action-gap: 10px;
--w4t-mail-size: 42px;
--w4t-area-max: 156px;
}
.modern-header.modern-header--w4t .brand .logo {
width: 156px !important;
}
.modern-header.modern-header--w4t .header-cta {
height: 38px;
padding: 0 10px;
font-size: 0.86rem;
font-size: clamp(0.72rem, 2.8vw, 0.86rem);
}
.modern-header.modern-header--w4t .header-contact {
width: 42px;
height: 42px;
}
}
@media (max-width: 360px) {
.modern-header.modern-header--w4t .brand .logo {
width: 144px !important;
}
.modern-header.modern-header--w4t .header-cta {
padding: 0 8px;
}
.modern-header.modern-header--w4t .header-contact {
width: 40px;
height: 40px;
}
}
/* === w4t HERO (HOMEPAGE) === */
.w4t-hero {
--hero-reel: 0;
--hero-bottom-pad: clamp(2.25rem, 6vw, 4.25rem);
--w4t-reel-start-inset: 10px;
position: relative;
margin-top: calc(-1 * var(--header-height, 96px));
padding: calc(var(--header-height, 96px) + clamp(1.75rem, 4vw, 3.25rem)) 0
calc(var(--hero-bottom-pad) * (1 - var(--hero-reel)));
background: #171717;
color: #ffffff;
overflow: hidden;
}
.w4t-hero .container {
max-width: 1440px;
padding-left: clamp(20px, 4vw, 46px);
padding-right: clamp(20px, 4vw, 46px);
}
.w4t-hero::before {
content: '';
position: absolute;
inset: -20% -10% -20% -10%;
pointer-events: none;
background:
radial-gradient(1100px 520px at 18% 18%, rgba(255, 59, 48, 0.12), transparent 60%),
radial-gradient(900px 480px at 82% 84%, rgba(255, 107, 53, 0.1), transparent 58%),
radial-gradient(980px 560px at 50% 110%, rgba(255, 71, 87, 0.08), transparent 60%);
filter: blur(10px);
z-index: 0;
}
.w4t-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--header-height, 96px) - clamp(1.25rem, 3vw, 2.5rem));
justify-content: space-between;
gap: clamp(3rem, 12vh, 7.25rem);
}
.w4t-hero__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 540px);
align-items: center;
gap: clamp(1rem, 2.8vw, 2.4rem);
}
.w4t-hero__content {
min-width: 0;
display: flex;
align-items: center;
}
.w4t-hero__media {
display: flex;
justify-content: flex-end;
align-self: center;
padding-top: 0;
transform: translateY(-18px);
}
.w4t-hero__avatar-shell {
--avatar-native-width: 1080px;
--avatar-native-height: 1920px;
--avatar-scale: 1;
--avatar-zoom: 1.03;
position: relative;
width: min(100%, 450px);
aspect-ratio: 1080 / 1920;
border-radius: 28px;
overflow: hidden;
isolation: isolate;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 246, 248, 0.78));
border: 1px solid rgba(227, 54, 63, 0.14);
box-shadow:
0 30px 70px rgba(15, 23, 42, 0.12),
0 10px 24px rgba(227, 54, 63, 0.08);
transition:
width 0.3s ease,
border-radius 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
.w4t-hero__avatar-toggle {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.38);
background: rgba(12, 14, 20, 0.5);
color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(9px) saturate(130%);
-webkit-backdrop-filter: blur(9px) saturate(130%);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.015em;
cursor: pointer;
transition:
transform 0.22s ease,
background 0.22s ease,
box-shadow 0.22s ease;
}
.w4t-hero__avatar-toggle:hover,
.w4t-hero__avatar-toggle:focus-visible {
transform: translateY(-1px);
background: rgba(227, 54, 63, 0.82);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
outline: none;
}
.w4t-hero__avatar-toggle-icon {
width: 15px;
height: 15px;
display: inline-flex;
}
.w4t-hero__avatar-toggle-icon svg {
width: 100%;
height: 100%;
display: block;
}
.w4t-avatar-fs-backdrop {
position: fixed;
inset: 0;
z-index: 13050;
opacity: 0;
pointer-events: none;
background: rgba(5, 6, 10, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: opacity 0.24s ease;
}
.w4t-avatar-fs-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
html.w4t-avatar-fullscreen,
body.w4t-avatar-fullscreen {
overflow: hidden;
overscroll-behavior: contain;
}
/* Native browser fullscreen: solid black background + centered avatar */
.w4t-hero__media:fullscreen,
.w4t-hero__media:-webkit-full-screen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 12px;
box-sizing: border-box;
display: grid;
place-items: center;
background: #000;
transform: none !important;
}
.w4t-hero__media:fullscreen::backdrop,
.w4t-hero__media:-webkit-full-screen::backdrop {
background: #000;
}
.w4t-hero__media:fullscreen .w4t-hero__avatar-shell,
.w4t-hero__media:-webkit-full-screen .w4t-hero__avatar-shell {
--avatar-zoom: 1;
width: min(calc((100vh - 24px) * 1080 / 1920), 92vw) !important;
height: min(94vh, 980px);
max-width: calc(100vw - 24px);
max-height: calc(100vh - 24px);
margin: 0;
border-radius: 30px;
border-color: rgba(255, 255, 255, 0.25);
box-shadow:
0 26px 88px rgba(0, 0, 0, 0.5),
0 12px 28px rgba(0, 0, 0, 0.35);
}
.w4t-hero__media:fullscreen .w4t-hero__avatar-toggle,
.w4t-hero__media:-webkit-full-screen .w4t-hero__avatar-toggle {
top: 16px;
right: 16px;
}
.w4t-hero__media:fullscreen .w4t-hero__avatar-viewport,
.w4t-hero__media:-webkit-full-screen .w4t-hero__avatar-viewport {
transform: translate(-50%, -50%) scale(var(--avatar-scale));
}
.w4t-hero__avatar-viewport {
position: absolute;
top: 50%;
left: 50%;
width: var(--avatar-native-width);
height: var(--avatar-native-height);
transform: translate(-50%, -50%) scale(calc(var(--avatar-scale) * var(--avatar-zoom)));
transform-origin: center;
}
.w4t-hero__avatar-frame {
display: block;
width: var(--avatar-native-width);
height: var(--avatar-native-height);
border: 0;
background: transparent;
}
.w4t-hero__title {
margin: 0;
font-size: clamp(2.75rem, 5vw, 4.15rem);
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.02em;
max-width: none;
text-align: left;
width: calc(
(100% - var(--w4t-reel-start-inset)) +
(100vw - (100% - var(--w4t-reel-start-inset))) * var(--hero-reel)
);
margin-left: calc(
(var(--w4t-reel-start-inset) / 2) +
((50% - 50vw) - (var(--w4t-reel-start-inset) / 2)) * var(--hero-reel)
);
margin-top: clamp(64px, 10vh, 120px);
margin-bottom: clamp(64px, 10vh, 120px);
}
.w4t-hero__title strong {
font-weight: 400;
}
.w4t-hero .emph-word {
padding: 0;
background: none !important;
text-shadow: none;
font-weight: 400;
color: var(--primary-red);
-webkit-text-fill-color: var(--primary-red);
}
.w4t-hero .emph-word::before {
display: none;
}
.w4t-hero .emph-word.ideas {
color: var(--secondary-red);
-webkit-text-fill-color: var(--secondary-red);
}
.w4t-hero .emph-word.future {
color: var(--accent-orange);
-webkit-text-fill-color: var(--accent-orange);
}
.w4t-client-marquee {
margin-top: calc(-1 * clamp(54px, 7vh, 110px));
margin-bottom: clamp(22px, 5vh, 46px);
width: 100%;
}
@media (max-width: 480px) {
.w4t-hero {
--hero-bottom-pad: clamp(1.25rem, 4vw, 2.25rem);
}
.w4t-hero__inner {
min-height: auto;
justify-content: flex-start;
gap: clamp(1.1rem, 4.5vh, 2.25rem);
}
.w4t-hero__layout {
grid-template-columns: 1fr;
}
.w4t-hero__media {
justify-content: stretch;
}
.w4t-client-marquee {
margin-top: calc(-1 * clamp(34px, 6vh, 72px));
margin-bottom: clamp(10px, 2vh, 18px);
}
}
.w4t-client-marquee__viewport {
position: relative;
overflow: hidden;
padding: 2px 0;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%
);
}
.w4t-client-marquee__track {
display: flex;
width: max-content;
gap: 0;
animation: w4t-client-marquee 28s linear infinite;
will-change: transform;
}
.w4t-client-marquee__group {
display: flex;
align-items: center;
gap: clamp(54px, 4vw, 64px);
padding-right: clamp(54px, 4vw, 64px);
}
.w4t-client-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(220px, 16vw, 220px);
height: clamp(54px, 4vw, 54px);
padding: 0;
border-radius: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.86);
font-weight: 650;
letter-spacing: 0.02em;
white-space: nowrap;
user-select: none;
}
.w4t-client-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.w4t-client-marquee:hover .w4t-client-marquee__track {
animation-play-state: paused;
}
@keyframes w4t-client-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.w4t-client-marquee__track {
animation: none;
flex-wrap: wrap;
width: 100%;
justify-content: flex-start;
gap: clamp(14px, 2vw, 24px);
}
.w4t-client-marquee__group[aria-hidden='true'] {
display: none;
}
}
.w4t-reel {
--reel-progress: 0;
--reel-start-height: clamp(420px, 66vh, 720px);
--reel-start-radius: 24px;
--reel-start-inset: var(--w4t-reel-start-inset);
position: relative;
border-radius: 24px;
overflow: hidden;
cursor: pointer;
background: #0b0c10;
box-shadow: 0 36px 80px rgba(15, 23, 42, 0.16);
transform: translateZ(0);
width: calc(
(100% - var(--reel-start-inset)) +
(100vw - (100% - var(--reel-start-inset))) * var(--reel-progress)
);
margin-left: calc(
(var(--reel-start-inset) / 2) +
((50% - 50vw) - (var(--reel-start-inset) / 2)) * var(--reel-progress)
);
height: calc(
var(--reel-start-height) +
(100vh - var(--reel-start-height)) * var(--reel-progress)
);
border-radius: calc(
var(--reel-start-radius) -
(var(--reel-start-radius) * var(--reel-progress))
);
contain: layout paint;
will-change: width, height, margin-left, border-radius;
}
.w4t-reel.is-fullbleed {
--reel-progress: 1;
}
.w4t-reel:hover {
cursor: none;
}
.w4t-reel:hover * {
cursor: none !important;
}
.w4t-reel:focus-visible {
outline: none;
}
.w4t-reel__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
filter: saturate(1.02) contrast(1.02);
transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.w4t-reel__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.32) 100%);
opacity: 0.55;
transition: opacity 0.5s ease;
pointer-events: none;
}
.w4t-reel__circle {
position: absolute;
left: var(--reel-x, 50%);
top: var(--reel-y, 50%);
width: 112px;
height: 112px;
transform: translate(-50%, -50%) scale(0.55);
opacity: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.24);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
display: grid;
place-items: center;
pointer-events: none;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.35s ease;
color: rgba(17, 24, 39, 0.9);
}
.w4t-reel__play {
width: 34px;
height: 34px;
}
.w4t-reel:hover .w4t-reel__video {
transform: scale(1.015);
filter: saturate(1.08) contrast(1.06);
}
.w4t-reel:hover .w4t-reel__scrim {
opacity: 0.38;
}
.w4t-reel:hover .w4t-reel__circle,
.w4t-reel:focus-visible .w4t-reel__circle {
opacity: 1;
transform: translate(-50%, -50%) scale(1.15);
}
@media (max-width: 767px) {
.w4t-hero__title {
max-width: none;
}
.w4t-reel__video {
height: 100%;
}
.w4t-reel__circle {
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
left: 50%;
top: 50%;
}
}
@media (prefers-reduced-motion: reduce) {
.w4t-reel__video,
.w4t-reel__scrim,
.w4t-reel__circle {
transition: none;
}
}
/* === FULLSCREEN VIDEO OVERLAY === */
.w4t-video-modal {
position: fixed;
inset: 0;
z-index: 13000;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.w4t-video-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.w4t-video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 6, 10, 0.72);
backdrop-filter: blur(10px);
}
.w4t-video-modal__panel {
position: absolute;
inset: 0;
display: block;
}
.w4t-video-modal__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #000;
object-fit: cover;
}
.w4t-video-modal__video:focus,
.w4t-video-modal__video:focus-visible {
outline: none;
}
.w4t-video-modal__panel:focus,
.w4t-video-modal__panel:focus-visible {
outline: none;
}
.w4t-video-modal__close {
position: absolute;
top: 18px;
right: 18px;
width: 46px;
height: 46px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 0.2s ease, background 0.2s ease;
z-index: 2;
}
.w4t-video-modal__close:hover,
.w4t-video-modal__close:focus-visible {
transform: scale(1.05) rotate(90deg);
background: rgba(255, 255, 255, 0.18);
outline: none;
}
body.w4t-video-open {
overflow: hidden;
overscroll-behavior: contain;
}
html.w4t-video-open {
overflow: hidden;
overscroll-behavior: contain;
}
/* === WORK PROJECT VIEWER (progetti.html) === */
html.w4t-project-viewer-open {
overflow: hidden;
overscroll-behavior: contain;
}
body.w4t-project-viewer-open {
overflow: hidden;
overscroll-behavior: contain;
}
/* When closing the fullscreen viewer, suppress any lingering focus outline on the underlying card. */
body.w4t-suppress-work-card-outline .w4t-work-card:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.w4t-project-viewer {
position: fixed;
inset: 0;
z-index: 13100;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
color: rgba(255, 255, 255, 0.92);
}
.w4t-project-viewer.is-open {
opacity: 1;
pointer-events: auto;
}
.w4t-project-viewer__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 6, 10, 0.84);
backdrop-filter: blur(10px);
}
.w4t-project-viewer__close {
position: fixed;
top: max(14px, env(safe-area-inset-top));
right: max(14px, env(safe-area-inset-right));
width: 46px;
height: 46px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
z-index: 3;
transition: transform 0.2s ease, background 0.2s ease;
}
.w4t-project-viewer .w4t-project-viewer__home {
position: fixed;
top: max(14px, env(safe-area-inset-top));
left: max(14px, env(safe-area-inset-left));
height: 46px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
font-size: 0.98rem;
font-weight: 800;
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer !important;
text-decoration: none;
z-index: 3;
transition: transform 0.2s ease, background 0.2s ease;
}
.w4t-project-viewer .w4t-project-viewer__home:hover,
.w4t-project-viewer .w4t-project-viewer__home:focus-visible {
transform: translateX(-2px);
background: rgba(255, 255, 255, 0.18);
outline: none;
}
.w4t-project-viewer__close:hover,
.w4t-project-viewer__close:focus-visible {
transform: scale(1.05) rotate(90deg);
background: rgba(255, 255, 255, 0.18);
outline: none;
}
.w4t-project-viewer__scroller {
position: relative;
z-index: 2;
height: 100vh;
height: 100svh;
overflow-y: auto;
overscroll-behavior: contain;
scroll-snap-type: y proximity;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
@supports (height: 100dvh) {
.w4t-project-viewer__scroller {
height: 100dvh;
}
}
.w4t-project-viewer.is-animating .w4t-project-viewer__scroller {
opacity: 0;
pointer-events: none;
}
.w4t-project-viewer__chapter {
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
opacity: 0.96;
transition: opacity 0.55s ease;
}
.w4t-project-viewer__chapter.is-active {
opacity: 1;
}
.w4t-project-viewer__hero {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
isolation: isolate;
}
@supports (height: 100dvh) {
.w4t-project-viewer__hero {
height: 100dvh;
}
}
.w4t-project-viewer__hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.72) 90%);
opacity: 0.86;
pointer-events: none;
z-index: 1;
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.w4t-project-viewer__chapter.is-active .w4t-project-viewer__hero::after {
opacity: 0.72;
}
.w4t-project-viewer__media {
position: absolute;
inset: 0;
z-index: 0;
transform: scale(1.06);
filter: saturate(1.05) contrast(1.05);
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.w4t-project-viewer__chapter.is-active .w4t-project-viewer__media {
transform: scale(1);
}
.w4t-project-viewer__media img,
.w4t-project-viewer__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.w4t-project-viewer__heading {
position: absolute;
inset: 0;
z-index: 2;
padding: max(22px, env(safe-area-inset-top)) clamp(18px, 4vw, 56px)
max(22px, env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
text-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
transform: translate3d(0, 14px, 0);
opacity: 0.92;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}
.w4t-project-viewer__chapter.is-active .w4t-project-viewer__heading {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.w4t-project-viewer__kicker {
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
.w4t-project-viewer__title {
margin: 0;
font-size: clamp(2.1rem, 5.2vw, 4.2rem);
letter-spacing: -0.02em;
line-height: 1.06;
}
.w4t-project-viewer__roles {
margin: 0;
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.78);
}
.w4t-project-viewer__details {
position: relative;
z-index: 2;
margin-top: clamp(-120px, -12vh, -72px);
padding: clamp(26px, 4vw, 44px) 0 0;
background: linear-gradient(180deg, rgba(8, 9, 13, 0.86) 0%, rgba(5, 6, 10, 0.96) 55%, rgba(5, 6, 10, 1) 100%);
border-top-left-radius: 30px;
border-top-right-radius: 30px;
box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.55);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Ufficio Remoto: switch to light background after "La Banca a casa tua" */
.w4t-project-viewer__chapter--ufficio-remoto .w4t-project-viewer__details::before {
content: '';
position: absolute;
inset: 0;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background: #e9e7f2;
opacity: 0;
transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 0;
}
.w4t-project-viewer__chapter--ufficio-remoto .w4t-project-viewer__details > * {
position: relative;
z-index: 1;
}
.w4t-project-viewer.w4t-ur-bg-light
.w4t-project-viewer__chapter--ufficio-remoto
.w4t-project-viewer__details::before {
opacity: 1;
}
.w4t-project-viewer.w4t-ur-bg-light
.w4t-project-viewer__chapter--ufficio-remoto
.w4t-project-viewer__details {
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.26);
}
.w4t-project-viewer__details-inner {
max-width: 1060px;
margin: 0 auto;
padding: 0 clamp(18px, 4vw, 56px);
}
.w4t-project-viewer__details-inner h3 {
margin: 0 0 10px 0;
font-size: 1.15rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.86);
}
.w4t-project-viewer__details-inner p {
margin: 0 0 16px 0;
color: rgba(255, 255, 255, 0.78);
line-height: 1.7;
max-width: 74ch;
}
.w4t-project-viewer__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
}
.w4t-project-viewer__card {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
padding: 18px;
}
.w4t-project-viewer__card h4 {
margin: 0 0 8px 0;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.84);
}
.w4t-project-viewer__card ul {
margin: 0;
padding-left: 18px;
color: rgba(255, 255, 255, 0.76);
line-height: 1.65;
}
.w4t-project-viewer__next {
height: min(68vh, 620px);
display: grid;
place-items: center;
padding: 30px clamp(18px, 4vw, 56px) max(30px, env(safe-area-inset-bottom));
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(900px 340px at 50% 0%, rgba(255, 59, 48, 0.12), transparent 60%);
}
/* Keep Ufficio Remoto viewer background uniformly dark */
.w4t-project-viewer__chapter--ufficio-remoto .w4t-project-viewer__next {
background: rgba(5, 6, 10, 1);
}
.w4t-project-viewer.w4t-ur-bg-light
.w4t-project-viewer__chapter--ufficio-remoto
.w4t-project-viewer__next {
background: #e9e7f2;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.w4t-project-viewer.w4t-ur-bg-light .w4t-project-viewer__next-label {
color: rgba(12, 14, 20, 0.68);
}
.w4t-project-viewer.w4t-ur-bg-light .w4t-project-viewer__next-title {
color: rgba(12, 14, 20, 0.9);
}
.w4t-project-viewer::before {
content: '';
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
background: radial-gradient(800px 420px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 60%);
transition: opacity 0.6s ease;
}
.w4t-project-viewer.is-switching::before {
opacity: 1;
}
/* Force native cursor inside the fullscreen viewer */
html.w4t-project-viewer-open,
html.w4t-project-viewer-open body {
cursor: auto !important;
}
html.w4t-project-viewer-open .cursor-dot,
html.w4t-project-viewer-open .cursor-aura {
display: none !important;
}
.w4t-project-viewer,
.w4t-project-viewer * {
cursor: auto !important;
}
.w4t-project-viewer button {
cursor: pointer !important;
}
.w4t-project-viewer__next-inner {
text-align: center;
max-width: 60ch;
}
.w4t-project-viewer__next-label {
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.w4t-project-viewer__next-title {
margin: 10px 0 0 0;
font-size: clamp(1.6rem, 4.2vw, 2.2rem);
letter-spacing: -0.02em;
}
.w4t-project-viewer__fly {
position: fixed;
inset: 0;
z-index: 4;
pointer-events: none;
}
.w4t-project-viewer__fly-media {
position: absolute;
inset: 0;
will-change: transform, border-radius;
border-radius: 22px;
overflow: hidden;
transform-origin: center center;
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.58);
background: #000;
}
.w4t-project-viewer__fly-media img,
.w4t-project-viewer__fly-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 760px) {
.w4t-project-viewer__grid {
grid-template-columns: 1fr;
}
}
/* === w4t PROJECTS (HOMEPAGE) === */
.w4t-projects {
position: relative;
min-height: 100vh;
background: transparent;
}
.w4t-projects__pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
background: #ffffff;
color: rgba(15, 23, 42, 0.95);
transition: color 0.2s linear;
isolation: isolate;
}
.w4t-projects__pin::before {
content: '';
position: absolute;
inset: 0;
background:
/* Same mood as "Collaborazione e passione..." but flipped (to match shadows). */
radial-gradient(1200px 520px at 50% 100%, rgba(255, 107, 53, 0.12) 0%, transparent 55%),
radial-gradient(900px 420px at 90% 15%, rgba(255, 59, 48, 0.12) 0%, transparent 55%),
radial-gradient(800px 380px at 10% 15%, rgba(255, 118, 117, 0.1) 0%, transparent 58%),
linear-gradient(0deg, #07090f 0%, #05060a 100%);
opacity: var(--mp-dark, 0);
pointer-events: none;
transition: opacity 0.2s linear;
z-index: 0;
}
.w4t-projects__intro {
position: absolute;
inset: 0 0 auto 0;
height: var(--mp-intro-h, 46vh);
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
padding-left: var(--home-gutter, var(--space-lg));
padding-right: var(--home-gutter, var(--space-lg));
padding-bottom: clamp(12px, 2.5vh, 28px);
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 0.25s linear, transform 0.35s ease;
}
.w4t-projects__intro .kicker {
margin-left: 0;
margin-right: auto;
}
.w4t-projects__title {
margin: 0;
font-size: clamp(1.9rem, 4.2vw, 3.1rem);
line-height: 1.12;
letter-spacing: -0.03em;
max-width: 28ch;
font-weight: 550;
text-wrap: balance;
}
.w4t-projects__slides {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: var(--mp-intro-h, 56vh);
height: calc(100vh - var(--mp-intro-h, 56vh));
z-index: 1;
opacity: var(--mp-slides-opacity, 1);
transition: opacity 0.35s ease;
pointer-events: auto;
}
.w4t-projects__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 44px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--primary-red);
color: #fff;
font-weight: 650;
text-decoration: none;
margin-top: 18px;
width: fit-content;
align-self: flex-start;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
transition: transform 0.2s ease, filter 0.2s ease;
}
.w4t-projects__cta::after {
content: "?";
transition: transform 0.2s ease;
}
.w4t-projects__cta:hover,
.w4t-projects__cta:focus-visible {
transform: translateY(-1px);
filter: saturate(1.06);
outline: none;
}
.w4t-projects__cta:hover::after,
.w4t-projects__cta:focus-visible::after {
transform: translateX(3px);
}
/* === w4t COLLAGE (HOMEPAGE) === */
.w4t-collage {
position: relative;
min-height: 100vh;
background: #fff;
color: #0f1220;
}
.w4t-collage__pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
width: 100%;
overflow: hidden;
padding: clamp(70px, 7vw, 96px) clamp(18px, 3.4vw, 46px)
clamp(84px, 9vw, 120px);
background: #fff;
}
.w4t-collage__pin-inner {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.w4t-collage__header {
max-width: 980px;
margin: 0;
text-align: left;
}
.w4t-collage__header .kicker {
margin-left: 0;
margin-right: auto;
}
.w4t-collage__title {
margin: 0;
font-size: clamp(1.85rem, 4.2vw, 3.1rem);
line-height: 1.12;
letter-spacing: -0.03em;
max-width: 34ch;
font-weight: 650;
}
.w4t-collage__photos {
position: relative;
flex: 1;
width: 100%;
margin-top: clamp(34px, 4vw, 48px);
padding: 0 clamp(14px, 2.2vw, 30px);
border-radius: 22px;
overflow: hidden;
}
.w4t-collage__slide {
position: absolute;
inset: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
transform: translate3d(0, 100vh, 0);
transform-origin: center;
border-radius: 22px;
overflow: hidden;
will-change: transform, opacity;
pointer-events: none;
}
.w4t-collage__slide img {
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
overflow: hidden;
border-radius: 22px;
transform: translate3d(0, 0, 0);
will-change: transform;
}
@media (max-width: 767px) {
.w4t-collage__pin {
padding: 56px 18px 86px;
}
}
@media (prefers-reduced-motion: reduce) {
.w4t-collage__slide,
.w4t-collage__slide img {
transition: none;
}
}
.w4t-projects__track {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.w4t-projects__slide {
display: block;
position: absolute;
inset: 0;
height: 100%;
width: 100%;
overflow: hidden;
text-decoration: none;
color: inherit;
cursor: none; /* mettere cursoir: pointer; */
background: #0b0c10;
transform: translate3d(0, 110%, 0) scale(1);
transform-origin: top center;
border-radius: 0;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
will-change: transform, border-radius;
}
.w4t-projects__slide:focus-visible {
outline: 3px solid rgba(227, 54, 63, 0.85);
outline-offset: -3px;
}
.w4t-projects__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate3d(0, 0, 0) scale(1.06);
will-change: transform;
/* filter: saturate(1.03) contrast(1.03); */
object-fit: cover;
object-position: center right;
padding-right: clamp(12px, 6vw, 50px);
box-sizing: border-box;
}
.w4t-projects__slide[data-index="0"] .w4t-projects__image {
object-position: left center;
transform: scale(1.01);
}
.w4t-projects__meta {
position: absolute;
top: clamp(18px, 4vw, 46px);
left: clamp(20px, 4vw, 46px);
right: clamp(20px, 4vw, 46px);
z-index: 2;
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-end;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.w4t-projects__meta--center {
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: clamp(18px, 4vw, 46px);
justify-content: space-between;
align-items: center;
text-align: left;
gap: 26px;
}
.w4t-projects__meta--center .w4t-projects__brand {
align-items: flex-start;
max-width: min(54%, 520px);
}
.w4t-projects__meta--center .w4t-projects__description,
.w4t-projects__meta--center .w4t-projects__skills {
text-align: right;
max-width: min(46%, 520px);
}
.w4t-projects__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 0;
}
.w4t-projects__logo {
display: block;
width: clamp(110px, 14vw, 180px);
height: auto;
max-width: 45vw;
opacity: 0.98;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}
.w4t-projects__image {
object-fit: cover;
object-position: center;
}
/* Desktop piccoli / laptop */
@media (max-width: 1440px) {
.w4t-projects__slide[data-index="0"] .w4t-projects__image {
object-position: 65% center;
}
}
/* Desktop grandi */
@media (min-width: 1800px) {
.w4t-projects__slide[data-index="0"] .w4t-projects__image {
object-position: right center;
}
}
.w4t-projects__slide::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.38) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.52) 100%);
pointer-events: none;
}
.w4t-projects__slide.is-active .w4t-projects__meta {
opacity: 1;
transform: translateY(0);
}
.w4t-projects__name {
font-size: clamp(2.45rem, 2.8vw, 2.15rem);
font-weight: 650;
letter-spacing: -0.02em;
}
.w4t-projects__description,
.w4t-projects__skills {
font-size: clamp(1.02rem, 1.4vw, 1.15rem);
font-weight: 520;
opacity: 0.94;
text-align: right;
max-width: 48ch;
line-height: 1.42;
text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
.w4t-projects__intro,
.w4t-projects__slides,
.w4t-projects__meta {
transition: none;
}
}
body.w4t-video-open .cursor-dot,
body.w4t-video-open .cursor-aura,
body.contact-drawer-opening .cursor-dot,
body.contact-drawer-open .cursor-dot,
body.contact-drawer-closing .cursor-dot,
body.contact-drawer-opening .cursor-aura,
body.contact-drawer-open .cursor-aura,
body.contact-drawer-closing .cursor-aura {
z-index: 20050;
}
body.w4t-video-open .cursor-aura,
body.contact-drawer-opening .cursor-aura,
body.contact-drawer-open .cursor-aura,
body.contact-drawer-closing .cursor-aura {
z-index: 20049;
}
/* === CONTACT DRAWER (w4t-style bottom sheet) === */
.contact-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 12040;
opacity: 0;
pointer-events: none;
background: rgba(5, 6, 10, 0.55);
backdrop-filter: blur(8px);
transition: opacity 0.35s ease;
}
body.contact-drawer-opening .contact-drawer-backdrop,
body.contact-drawer-open .contact-drawer-backdrop,
body.contact-drawer-closing .contact-drawer-backdrop {
opacity: 1;
pointer-events: auto;
}
body.contact-drawer-opening,
body.contact-drawer-open,
body.contact-drawer-closing {
overflow: hidden;
}
html.contact-drawer-open {
overflow: hidden;
overscroll-behavior: contain;
}
.contact-drawer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 12050;
height: min(76vh, 860px);
transform: translateY(110%);
pointer-events: none;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1);
border-top-left-radius: 26px;
border-top-right-radius: 26px;
overflow: hidden;
background: #ffffff;
color: rgba(15, 23, 42, 0.92);
box-shadow: 0 -28px 80px rgba(0, 0, 0, 0.32);
}
body.contact-drawer-opening .contact-drawer,
body.contact-drawer-open .contact-drawer,
body.contact-drawer-closing .contact-drawer {
transform: translateY(0%);
pointer-events: auto;
}
body.contact-drawer-expanded .contact-drawer,
.contact-drawer.is-expanded {
height: 100vh;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.contact-drawer__top {
position: sticky;
top: 0;
z-index: 2;
display: flex;
justify-content: flex-end;
padding: 16px 16px 10px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 255, 255, 0.9) 100%
);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.contact-drawer__content {
height: calc(100% - 70px);
overflow: auto;
scrollbar-width: none;
padding: clamp(18px, 4vw, 32px);
}
.contact-drawer__content::-webkit-scrollbar {
width: 0;
height: 0;
}
.contact-drawer__layout {
display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 60%);
gap: clamp(22px, 5vw, 72px);
align-items: stretch;
max-width: 1180px;
margin: 0 auto;
}
.contact-drawer__pitch {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
}
.contact-drawer__pitch-title,
.contact-drawer__heading h2 {
margin: 0;
font-size: clamp(2.85rem, 6.6vw, 6.1rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 0.92;
}
.contact-drawer__pitch-title > span {
display: block;
}
.contact-drawer__pitch p,
.contact-drawer__heading p {
margin: 0;
color: rgba(100, 116, 139, 0.86);
max-width: 44ch;
font-size: clamp(1.60rem, 1.5vw, 1.28rem);
line-height: 1.55;
}
.contact-drawer-form {
margin-top: 0;
display: grid;
gap: 16px;
}
.contact-drawer-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.contact-field {
display: grid;
gap: 8px;
}
.contact-field > span {
font-size: 0.95rem;
color: rgba(51, 65, 85, 0.86);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.16);
background: rgba(15, 23, 42, 0.03);
color: rgba(15, 23, 42, 0.92);
padding: 14px 14px;
outline: none;
transition: border-color 0.25s ease, background 0.25s ease;
}
.contact-field select {
appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px 18px;
}
.contact-field select:invalid {
color: rgba(51, 65, 85, 0.66);
}
.contact-field--full {
grid-column: 1 / -1;
}
.contact-field textarea {
resize: vertical;
min-height: 140px;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
border-color: rgba(255, 59, 48, 0.6);
background: rgba(255, 59, 48, 0.06);
}
.contact-drawer-form__actions {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
}
.contact-drawer-form__actions .contact-privacy {
flex: 1;
}
.contact-privacy {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(51, 65, 85, 0.86);
font-size: 0.95rem;
line-height: 1.35;
}
.contact-privacy input {
margin-top: 3px;
}
.contact-privacy a {
color: var(--primary-red);
}
.contact-submit {
height: 54px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid rgba(255, 59, 48, 0.35);
background: linear-gradient(
135deg,
rgba(255, 59, 48, 0.96),
rgba(255, 107, 53, 0.92)
);
color: #fff;
font-weight: 650;
letter-spacing: 0.02em;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 16px 34px rgba(255, 59, 48, 0.22), 0 14px 34px rgba(0, 0, 0, 0.14);
transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.contact-submit::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.42) 35%,
transparent 70%
);
transform: translateX(-120%) skewX(-16deg);
transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-submit:hover {
transform: translateY(-1px);
filter: saturate(1.08);
box-shadow: 0 20px 44px rgba(255, 59, 48, 0.28), 0 18px 44px rgba(0, 0, 0, 0.16);
}
.contact-submit:hover::before {
transform: translateX(120%) skewX(-16deg);
}
.contact-submit:active {
transform: translateY(0px) scale(0.99);
}
.contact-submit:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.22),
0 18px 44px rgba(255, 59, 48, 0.28),
0 18px 44px rgba(0, 0, 0, 0.16);
}
.contact-drawer-close {
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.14);
background: rgba(15, 23, 42, 0.04);
color: rgba(15, 23, 42, 0.92);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 0.2s ease, background 0.2s ease;
}
.contact-drawer-close:hover,
.contact-drawer-close:focus-visible {
transform: rotate(90deg) scale(1.05);
background: rgba(15, 23, 42, 0.08);
outline: none;
}
@media (max-width: 900px) {
.contact-drawer__layout {
grid-template-columns: 1fr;
}
.contact-drawer__pitch p {
max-width: 70ch;
}
}
.contact-multiselect {
margin: 0;
padding: 14px 14px 16px;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(15, 23, 42, 0.02);
}
.contact-multiselect legend {
padding: 0 8px;
font-weight: 650;
color: rgba(15, 23, 42, 0.9);
}
.contact-multiselect legend span {
font-weight: 500;
color: rgba(51, 65, 85, 0.75);
margin-left: 6px;
}
.contact-multiselect__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.contact-option {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
cursor: pointer;
user-select: none;
transition: transform 0.15s ease, border-color 0.15s ease,
background 0.15s ease;
}
.contact-option:hover {
transform: translateY(-1px);
border-color: rgba(255, 59, 48, 0.3);
background: rgba(255, 59, 48, 0.04);
}
.contact-option input {
width: 16px;
height: 16px;
accent-color: var(--primary-red);
}
@media (max-width: 767px) {
.contact-multiselect__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* === SITE: footer underlay (mono.studio-like) === */
body.home {
--font-primary: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--home-gutter: clamp(20px, 4vw, 46px);
font-weight: 400;
}
body.home .container {
max-width: 1440px;
padding-left: var(--home-gutter);
padding-right: var(--home-gutter);
}
body.w4t-footer-underlay .footer-sentinel {
height: var(--footer-underlay-height, 0px);
}
body.home :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-primary) !important;
font-weight: 400 !important;
}
body.home :where(strong, b) {
font-weight: 400 !important;
}
body.home :where(p, a, li, span, label, button, input, textarea, select, small) {
font-family: var(--font-primary) !important;
font-weight: 400 !important;
}
body.home .kicker {
font-weight: 400 !important;
}
body.home .section-header h2,
body.home .w4t-hero__title,
body.home .w4t-projects__title,
body.home .w4t-collage__title,
body.home .innovation-motor__title,
body.home .w4t-projects__cta,
body.home .w4t-projects__name,
body.home .w4t-projects__description,
body.home .w4t-projects__skills,
body.home .servizio-card__tag,
body.home .servizio-card__header h3,
body.home .servizio-card__description,
body.home .servizio-card__list li,
body.home .innovation-motor__item-title {
font-weight: 400 !important;
}
body.home .w4t-hero .emph-word {
font-weight: 400;
}
body.home .w4t-hero__title strong {
font-weight: 400;
}
body.home .w4t-hero__inner {
gap: clamp(0.75rem, 2.5vh, 1.5rem) !important;
}
body.home .w4t-hero__layout {
width: 100%;
}
body.home .w4t-hero__title {
width: calc(
(100% - var(--w4t-reel-start-inset)) +
(100vw - (100% - var(--w4t-reel-start-inset))) * var(--hero-reel)
);
max-width: none;
margin-left: calc(
(var(--w4t-reel-start-inset) / 2) +
((50% - 50vw) - (var(--w4t-reel-start-inset) / 2)) * var(--hero-reel)
) !important;
margin-top: 0;
margin-bottom: clamp(4px, 1vh, 12px) !important;
}
body.home .w4t-client-marquee {
margin-top: clamp(-4px, 0.4vh, 8px) !important;
}
body.home .modern-header.modern-header--w4t .menu a.active {
font-weight: 400;
}
body.w4t-footer-underlay .site-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.45);
}
body.w4t-footer-underlay .site-footer {
background: #121212;
color: rgba(255, 255, 255, 0.9);
padding: clamp(44px, 6vw, 84px) 0 clamp(28px, 4vw, 56px);
}
body.w4t-footer-underlay .site-footer .footer-simple {
display: grid;
grid-template-columns: 1fr max-content;
gap: var(--space-lg);
align-items: start;
max-width: 1380px;
}
body.w4t-footer-underlay .site-footer .footer-simple__left {
margin-top: clamp(10px, 1.4vw, 50px);
margin-bottom: clamp(10px, 1.4vw, 50px);
}
body.w4t-footer-underlay .site-footer .footer-simple__right {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 10px;
align-self: center;
margin-top: clamp(8px, 1.2vw, 18px);
}
body.w4t-footer-underlay .site-footer .footer-simple__logo {
width: clamp(160px, 18vw, 240px);
height: auto;
display: block;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
margin-bottom: 16px;
}
body.w4t-footer-underlay .site-footer .footer-simple__copy,
body.w4t-footer-underlay .site-footer .footer-simple__addr {
margin: 0;
font-size: 0.96rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.86);
letter-spacing: 0.01em;
}
body.w4t-footer-underlay .site-footer .footer-simple__addr {
margin-top: 8px;
color: rgba(255, 255, 255, 0.76);
}
body.w4t-footer-underlay .site-footer .footer-simple__legal {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
max-width: min(700px, 95%);
}
body.w4t-footer-underlay .site-footer .footer-simple__legal-row {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.74);
}
body.w4t-footer-underlay .site-footer .footer-simple__legal-row + .footer-simple__legal-row {
margin-top: 2px;
}
body.w4t-footer-underlay .site-footer .footer-simple__legal-links {
margin: 8px 0 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 0.9rem;
}
body.w4t-footer-underlay .site-footer .footer-simple__legal-links span {
color: rgba(255, 255, 255, 0.35);
}
body.w4t-footer-underlay .site-footer .footer-simple__legal-links a {
color: rgba(255, 255, 255, 0.9);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.32);
text-underline-offset: 0.18em;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
body.w4t-footer-underlay .site-footer .footer-simple__legal-links a:hover,
body.w4t-footer-underlay .site-footer .footer-simple__legal-links a:focus-visible {
color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.9);
outline: none;
}
body.w4t-footer-underlay .site-footer .footer-simple__title {
margin: 0 0 10px 0;
font-size: 1.02rem;
color: rgba(255, 255, 255, 0.92);
}
body.w4t-footer-underlay .site-footer .footer-simple__mail {
display: inline-flex;
width: fit-content;
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
margin-bottom: 6px;
}
body.w4t-footer-underlay .site-footer .footer-simple__mail:hover,
body.w4t-footer-underlay .site-footer .footer-simple__mail:focus-visible {
color: rgba(255, 255, 255, 0.98);
outline: none;
}
body.w4t-footer-underlay .site-footer .footer-simple__cta {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: var(--primary-red);
color: rgba(255, 255, 255, 0.96);
cursor: pointer;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, filter 0.2s ease;
font-size: 0.96rem;
opacity: 1;
max-height: none;
pointer-events: auto;
transform: none;
margin-top: 0;
}
body.w4t-footer-underlay .site-footer .footer-simple__cta::after {
content: none;
}
body.w4t-footer-underlay .site-footer .footer-simple__cta:hover,
body.w4t-footer-underlay .site-footer .footer-simple__cta:focus-visible {
transform: translateY(-1px);
filter: saturate(1.06);
outline: none;
}
body.w4t-footer-underlay .site-footer .footer-simple__cta-icon {
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
display: grid;
place-items: center;
}
body.w4t-footer-underlay .site-footer .footer-simple__cta-icon svg {
display: block;
color: #fff;
width: 18px;
height: 18px;
}
/* Hide legacy footer blocks kept for now (index.html only). */
body.w4t-footer-underlay .site-footer .footer-logo-wrapper,
body.w4t-footer-underlay .site-footer .footer-container,
body.w4t-footer-underlay .site-footer .footer-bottom {
display: none !important;
}
@media (max-width: 900px) {
body.w4t-footer-underlay .site-footer .footer-simple {
grid-template-columns: 1fr;
}
body.w4t-footer-underlay .site-footer .footer-simple__left {
margin-top: 0;
}
body.w4t-footer-underlay .site-footer .footer-simple__right {
align-self: start;
margin-top: 18px;
}
body.w4t-footer-underlay .site-footer .footer-simple__legal {
max-width: 100%;
}
}
body.w4t-footer-underlay section:not(.w4t-entry-overlay),
body.w4t-footer-underlay .section-separator {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.contact-drawer-form__grid {
grid-template-columns: 1fr;
}
.contact-drawer-form__actions {
flex-direction: column;
align-items: stretch;
}
.contact-submit {
width: 100%;
}
}
/* === BRAND INTRO SCREEN === */
.intro-screen {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: clamp(3rem, 7vw, 7.5rem) clamp(1.5rem, 5vw, 4rem);
background: linear-gradient(180deg, var(--white) 0%, #f8fbff 100%);
color: var(--primary-black);
overflow: hidden;
text-align: center;
transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1;
}
html.js-enabled .intro-screen {
position: fixed;
inset: 0;
z-index: 12000;
}
.intro-layer {
position: absolute;
inset: -20%;
pointer-events: none;
transform: translate3d(0, 0, 0);
transition: transform 0.6s ease;
}
.intro-layer--gradient {
background:
radial-gradient(60% 60% at 20% 20%, rgba(255, 59, 48, 0.08) 0%, transparent 70%),
radial-gradient(55% 55% at 80% 75%, rgba(255, 107, 53, 0.07) 0%, transparent 70%),
linear-gradient(180deg, var(--white) 0%, #f8fbff 100%);
}
.intro-layer--texture {
opacity: 0.35;
background-image: url('data:image/svg+xml;utf8,');
background-size: 180px 180px;
mix-blend-mode: soft-light;
}
.intro-layer--glow {
inset: -10% -30% -20% -30%;
background: radial-gradient(55% 55% at 50% 60%, rgba(255, 71, 87, 0.18) 0%, rgba(255, 118, 117, 0.12) 40%, transparent 70%);
filter: blur(32px);
opacity: 0.8;
}
.intro-inner {
position: relative;
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.8rem, 4vw, 2.5rem);
}
.intro-reveal {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 46% 28%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 82, 70, 0.24) 40%, rgba(90, 90, 96, 0.12) 70%, rgba(255, 255, 255, 0.02) 98%);
opacity: 0;
transform: scale(1);
filter: blur(16px) saturate(140%);
transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 40;
}
.intro-overlay {
position: absolute;
inset: -3%;
pointer-events: none;
opacity: 0;
transform: scale(0.95);
transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 55;
mix-blend-mode: screen;
}
.intro-overlay--burst {
background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 71, 87, 0.92) 42%, rgba(255, 119, 72, 0.96) 62%, rgba(90, 90, 96, 0.88) 100%);
}
.intro-overlay--burst::after {
content: '';
position: absolute;
inset: -12%;
background:
repeating-linear-gradient(62deg, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px 12px),
repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.25) 0 1px, transparent 1px 10px);
mix-blend-mode: screen;
opacity: 0;
transform: scale(1.05);
}
.intro-overlay--veil {
z-index: 58;
background:
conic-gradient(from 120deg at 50% 40%, rgba(255, 134, 91, 0.38), rgba(47, 52, 64, 0.82), rgba(255, 92, 84, 0.88), rgba(255, 181, 82, 0.62), rgba(38, 41, 54, 0.92)),
radial-gradient(circle at 52% 38%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 117, 86, 0.55) 32%, rgba(76, 83, 102, 0.75) 72%, rgba(24, 26, 32, 0.95) 100%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 8px, transparent 8px 24px),
repeating-linear-gradient(-135deg, rgba(255, 255, 255, 0.12) 0 6px, transparent 6px 22px);
background-blend-mode: screen, lighten, screen, screen;
filter: saturate(1.15);
}
.intro-overlay--aura {
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 24%, rgba(255, 255, 255, 0.24) 52%, transparent 82%);
filter: blur(26px);
z-index: 60;
}
html.js-enabled .intro-screen--burst .intro-overlay--burst {
opacity: 1;
transform: scale(1);
}
html.js-enabled .intro-screen--burst .intro-overlay--burst::after {
opacity: 0.6;
animation: introBurstCrackle 1.4s ease-out forwards;
}
html.js-enabled .intro-screen--burst .intro-overlay--veil {
opacity: 0.28;
transform: scale(1.01);
}
html.js-enabled .intro-screen--arrow-launch .intro-overlay--burst {
opacity: 0.9;
transform: scale(1.08);
}
html.js-enabled .intro-screen--arrow-launch .intro-overlay--veil {
opacity: 0.95;
transform: scale(1.24);
animation: introVeilShatter 1.45s ease-out forwards;
}
html.js-enabled .intro-screen--aura .intro-overlay--burst {
opacity: 0.36;
}
html.js-enabled .intro-screen--aura .intro-overlay--veil {
opacity: 0.45;
transform: scale(1.38);
filter: blur(34px) saturate(1.45);
}
html.js-enabled .intro-screen--aura .intro-overlay--aura {
opacity: 1;
transform: scale(1.08);
}
html.js-enabled .intro-screen--reveal .intro-overlay--veil {
opacity: 0;
transform: scale(1.62);
transition-delay: 0.18s;
}
@keyframes introBurstCrackle {
0% { transform: scale(1.05) rotate(0deg); opacity: 0.2; }
32% { transform: scale(1.25) rotate(2deg); opacity: 0.6; }
65% { transform: scale(1.52) rotate(-1deg); opacity: 0.4; }
100% { transform: scale(1.8) rotate(0deg); opacity: 0; }
}
@keyframes introVeilShatter {
0% {
background-position: 50% 40%, 50% 40%, 0 0, 0 0;
filter: saturate(1.1) brightness(1);
}
38% {
background-position: 48% 34%, 52% 44%, 18px -26px, -14px 26px;
filter: saturate(1.28) brightness(1.08);
}
65% {
background-position: 44% 68%, 56% 76%, -32px 42px, 28px -38px;
filter: saturate(1.45) brightness(1.2);
}
100% {
background-position: 40% 110%, 50% 118%, -72px 96px, 54px -62px;
filter: saturate(1.32) brightness(1.32);
}
}
.intro-logo {
position: relative;
width: clamp(280px, 48vw, 640px);
aspect-ratio: 10 / 3.2;
margin-inline: auto;
display: block;
opacity: 1;
transform: translate3d(0, 0, 0);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro-logo--deconstructed {
position: relative;
}
html.js-enabled .intro-screen--sequence .intro-logo {
opacity: 0;
transform: translate3d(0, 26px, 0) scale(0.94);
}
html.js-enabled .intro-screen--started .intro-logo {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1.08);
}
html.js-enabled .intro-screen--logo-finished .intro-logo {
transform: translate3d(0, -12vh, 0) scale(1.02);
}
html.js-enabled .intro-screen--collapse .intro-logo {
transform: translate3d(0, -16vh, 0) scale(0.96);
}
html.js-enabled .intro-screen--arrow-focus .intro-logo {
opacity: 0.25;
transform: translate3d(0, -18vh, 0) scale(0.92);
}
html.js-enabled .intro-screen--arrow-launch .intro-logo {
opacity: 0;
}
.intro-fragment {
position: absolute;
inset: 0;
background-image: url('images/LOGHI/logo_def.png');
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.72s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity, filter;
z-index: 62;
}
html.js-enabled .intro-fragment {
opacity: 0;
transform: translate3d(0, 32px, 0) scale(0.94);
}
html.js-enabled .intro-fragment.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
html.js-enabled .intro-fragment--arrow {
transform: translate3d(0, 32px, 0) scale(0.94);
}
html.js-enabled .intro-fragment--arrow.is-visible {
transform: translate3d(0, 0, 0) scale(1.02);
}
.intro-fragment--arrow {
z-index: 66;
clip-path: polygon(43% 18%, 58% 18%, 58% 82%, 43% 82%);
filter: none;
transform: translate3d(0, 0, 0) scale(1);
}
.intro-fragment--word {
z-index: 65;
}
.intro-fragment--divider {
z-index: 64;
}
.intro-fragment--w { clip-path: polygon(0% 20%, 18% 20%, 18% 82%, 0% 82%); }
.intro-fragment--a { clip-path: polygon(18% 20%, 31% 20%, 31% 82%, 18% 82%); }
.intro-fragment--y { clip-path: polygon(31% 20%, 43% 20%, 43% 82%, 31% 82%); }
.intro-fragment--arrow { clip-path: polygon(43% 20%, 58% 20%, 58% 82%, 43% 82%); }
.intro-fragment--t { clip-path: polygon(58% 20%, 66% 20%, 66% 82%, 58% 82%); }
.intro-fragment--e { clip-path: polygon(66% 20%, 74% 20%, 74% 82%, 66% 82%); }
.intro-fragment--c { clip-path: polygon(74% 20%, 82% 20%, 82% 82%, 74% 82%); }
.intro-fragment--h { clip-path: polygon(82% 20%, 91% 20%, 91% 82%, 82% 82%); }
.intro-fragment--divider { clip-path: polygon(91% 15%, 93% 15%, 93% 88%, 91% 88%); }
.intro-fragment--software { clip-path: polygon(93.2% 26%, 100% 26%, 100% 44%, 93.2% 44%); }
.intro-fragment--ideas { clip-path: polygon(93.2% 46%, 100% 46%, 100% 64%, 93.2% 64%); }
.intro-fragment--future { clip-path: polygon(93.2% 66%, 100% 66%, 100% 84%, 93.2% 84%); }
html.js-enabled .intro-screen--collapse .intro-fragment--letter:not(.intro-fragment--arrow),
html.js-enabled .intro-screen--collapse .intro-fragment--divider,
html.js-enabled .intro-screen--collapse .intro-fragment--word {
opacity: 0;
transform: translate3d(0, -28px, 0) scale(0.84);
}
html.js-enabled .intro-screen--collapse .intro-fragment--arrow {
opacity: 0;
transform: translate3d(0, -24px, 0) scale(0.88);
filter: drop-shadow(0 18px 32px rgba(255, 59, 48, 0.18));
}
html.js-enabled .intro-screen--arrow-focus .intro-fragment:not(.intro-fragment--arrow) {
opacity: 0;
transform: translate3d(0, -32px, 0) scale(0.82);
}
html.js-enabled .intro-screen--arrow-focus .intro-fragment--arrow,
html.js-enabled .intro-screen--arrow-launch .intro-fragment--arrow {
opacity: 0;
}
@media (max-width: 680px) {
.intro-logo {
aspect-ratio: 10 / 4;
}
html.js-enabled .intro-screen--logo-finished .intro-logo {
transform: translate3d(0, -10vh, 0) scale(0.94);
}
html.js-enabled .intro-screen--collapse .intro-logo {
transform: translate3d(0, -14vh, 0) scale(0.9);
}
html.js-enabled .intro-screen--arrow-focus .intro-logo {
transform: translate3d(0, -16vh, 0) scale(0.88);
}
html.js-enabled .intro-screen--arrow-focus .intro-fragment--arrow {
transform: translate3d(0, -10vh, 0) scale(1.35);
}
}
.intro-progress {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: clamp(260px, 58vw, 420px);
margin-inline: auto;
margin-top: clamp(0.6rem, 2.4vw, 1.4rem);
padding: clamp(0.35rem, 1.2vw, 0.55rem);
pointer-events: none;
opacity: 0;
transform: translate3d(0, 16px, 0);
transition: opacity 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28),
transform 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
--progress-position: 0.08;
}
.intro-progress__band {
position: fixed;
width: 1500px;
height: clamp(58px, 7vw, 76px);
border-radius: 18px;
background: linear-gradient(120deg, rgba(255, 82, 70, 0.96), rgba(255, 82, 70, 0.96));
box-shadow: 0 22px 48px rgba(255, 82, 70, 0.32);
overflow: hidden;
}
.intro-progress__fill {
position: absolute;
inset: 0;
width: 0%;
max-width: 100%;
background: rgba(255, 255, 255, 0.98);
border-radius: inherit;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: clamp(0.6rem, 1.9vw, 1.1rem);
transition: width 0.75s cubic-bezier(0.18, 0.89, 0.32, 1.28);
pointer-events: none;
}
.intro-progress__indicator {
position: absolute;
top: 50%;
left: clamp(8%, calc(var(--progress-position, 0.08) * 100%), 96%);
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: clamp(0.45rem, 1.4vw, 0.75rem);
padding: clamp(0.3rem, 1.1vw, 0.55rem) clamp(0.5rem, 1.4vw, 0.8rem);
background: rgba(255, 255, 255, 0.2);
border-radius: 999px;
backdrop-filter: blur(14px);
box-shadow: 0 12px 30px rgba(12, 12, 20, 0.18);
transition: left 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
pointer-events: none;
}
.intro-progress__logo {
width: clamp(36px, 6vw, 46px);
height: clamp(36px, 6vw, 46px);
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px rgba(255, 82, 70, 0.18);
}
.intro-progress__logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.intro-progress__value {
font-size: clamp(1.15rem, 3vw, 1.6rem);
font-weight: 700;
color: var(--primary-red);
font-variant-numeric: tabular-nums;
text-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
}
.intro-progress__sub {
display: none;
}
.intro-progress.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.intro-progress.is-complete .intro-progress__value {
color: rgba(255, 82, 70, 1);
}
html.js-enabled .intro-screen--collapse .intro-progress,
html.js-enabled .intro-screen--arrow-focus .intro-progress {
opacity: 0;
transform: translate3d(0, -22px, 0);
transition-duration: 0.55s;
}
@media (max-width: 640px) {
.intro-progress {
width: min(90vw, 320px);
padding: clamp(0.28rem, 4vw, 0.45rem);
}
.intro-progress__band {
height: clamp(56px, 18vw, 66px);
border-radius: 16px;
}
.intro-progress__indicator {
gap: clamp(0.38rem, 3vw, 0.6rem);
padding: clamp(0.28rem, 2.8vw, 0.42rem) clamp(0.45rem, 3.2vw, 0.65rem);
box-shadow: 0 10px 24px rgba(12, 12, 20, 0.18);
}
.intro-progress__logo {
width: clamp(32px, 12vw, 40px);
height: clamp(32px, 12vw, 40px);
}
}
.intro-scroll {
position: absolute;
bottom: clamp(1.5rem, 5vw, 3.5rem);
left: 50%;
transform: translateX(-50%);
width: 54px;
height: 54px;
border-radius: 999px;
border: 1px solid rgba(26, 26, 26, 0.2);
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
cursor: pointer;
}
.intro-scroll__chevron {
width: 14px;
height: 14px;
border-left: 2px solid rgba(26, 26, 26, 0.6);
border-bottom: 2px solid rgba(26, 26, 26, 0.6);
transform: rotate(-45deg);
animation: intro-scroll-bounce 2.2s ease-in-out infinite;
}
.intro-scroll:hover,
.intro-scroll:focus-visible {
transform: translateX(-50%) translateY(-6px);
border-color: rgba(255, 59, 48, 0.5);
background: rgba(255, 255, 255, 0.95);
}
.intro-scroll:focus-visible {
outline: 2px solid rgba(255, 59, 48, 0.35);
outline-offset: 4px;
}
html.js-enabled .intro-screen--dismissed {
opacity: 0;
transform: translate3d(0, -5%, 0);
pointer-events: none;
}
html.js-enabled .intro-screen--arrow-focus .intro-scroll {
opacity: 0;
transform: translateX(-50%) translateY(14px);
pointer-events: none;
}
html.js-enabled .intro-screen--arrow-focus .intro-reveal {
opacity: 0.35;
transform: scale(1.12);
filter: blur(20px) saturate(160%);
}
html.js-enabled .intro-screen--burst .intro-layer--texture {
opacity: 0.2;
}
html.js-enabled .intro-screen--arrow-focus .intro-layer {
opacity: 0.85;
transform: scale(1.01);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-enabled .intro-screen--arrow-launch .intro-layer {
opacity: 0.24;
transform: scale(1.05);
}
html.js-enabled .intro-screen--arrow-launch .intro-reveal {
opacity: 0.68;
transform: scale(1.18);
filter: blur(14px) saturate(180%);
}
html.js-enabled .intro-screen--aura .intro-layer {
opacity: 0;
}
html.js-enabled .intro-screen--aura .intro-reveal {
opacity: 0.92;
transform: scale(1.06);
filter: blur(24px) saturate(220%);
}
html.js-enabled .intro-screen--reveal {
background: linear-gradient(180deg, rgba(255, 82, 70, 0.18) 0%, rgba(255, 118, 117, 0.1) 36%, #ffffff 88%);
}
html.js-enabled .intro-screen--reveal .intro-layer {
opacity: 0;
transition: opacity 0.8s ease, transform 0.6s ease;
}
html.js-enabled .intro-screen--reveal .intro-reveal {
opacity: 1;
transform: scale(1.02);
filter: blur(6px) saturate(140%);
}
.intro-flight {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transform: scale(0.82) translate3d(0, 4vh, 0);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 85;
}
.intro-flight__arrow {
width: clamp(88px, 12vw, 160px);
aspect-ratio: 1 / 1.45;
background: url('images/LOGHI/LogoFreccia_2-removebg-preview.png') center / contain no-repeat;
filter: drop-shadow(0 18px 48px rgba(255, 59, 48, 0.48));
transform: rotate(180deg) scale(0.84);
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
filter 1s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js-enabled .intro-screen--arrow-focus .intro-flight {
opacity: 1;
transform: scale(1) translate3d(0, 0, 0);
}
html.js-enabled .intro-screen--arrow-focus .intro-flight__arrow {
transform: rotate(180deg) scale(1.08);
filter: drop-shadow(0 28px 68px rgba(255, 71, 68, 0.6));
}
/* Arrow tension state: show arrow pulled slightly downward before launch */
html.js-enabled .intro-screen--arrow-tension .intro-flight {
opacity: 1;
transform: scale(1) translate3d(0, 2vh, 0);
}
html.js-enabled .intro-screen--arrow-tension .intro-flight__arrow {
transform: rotate(180deg) translateY(14px) scale(1.06);
filter: drop-shadow(0 32px 78px rgba(255, 71, 68, 0.62));
}
html.js-enabled .intro-screen--arrow-launch .intro-flight {
transform: scale(1.12) translate3d(0, -120vh, 0);
opacity: 0;
transition-duration: 1.6s;
}
html.js-enabled .intro-screen--arrow-launch .intro-flight__arrow {
transform: rotate(180deg) scale(1.18);
filter: drop-shadow(0 42px 96px rgba(255, 59, 48, 0.5));
}
@keyframes intro-scroll-bounce {
0%, 100% { transform: rotate(-45deg) translate3d(0, 0, 0); opacity: 0.7; }
50% { transform: rotate(-45deg) translate3d(0, 8px, 0); opacity: 1; }
}
body.intro-lock {
overflow: hidden;
}
body.intro-lock .modern-header {
opacity: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
html.js-enabled .intro-screen--sequence .intro-logo,
html.js-enabled .intro-screen--sequence .intro-fragment,
html.js-enabled .intro-screen--logo-finished .intro-logo {
transition: none !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
.intro-scroll__chevron {
animation: none;
}
}
/* === HOMEPAGE ENTRY OVERLAY (video + avatar) === */
body.w4t-entry-open {
overflow: hidden;
padding-top: var(--header-height, 96px) !important;
}
/* The custom cursor cannot track inside cross-origin iframes:
while the entry overlay is open, force native cursor visibility. */
body.w4t-entry-open,
body.w4t-entry-open * {
cursor: auto !important;
}
body.w4t-entry-open .w4t-entry-overlay__close {
cursor: pointer !important;
}
body.w4t-entry-open .cursor-dot,
body.w4t-entry-open .cursor-aura {
opacity: 0 !important;
transform: scale(0.2) !important;
}
.w4t-avatar-fab {
position: fixed;
right: clamp(14px, 2.4vw, 28px);
bottom: clamp(14px, 2.8vw, 30px);
z-index: 19000;
width: clamp(56px, 5.8vw, 74px);
height: clamp(56px, 5.8vw, 74px);
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Press Start 2P", "Courier New", monospace;
font-size: clamp(12px, 1.3vw, 15px);
letter-spacing: 0.04em;
color: #fff4f2;
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.26), transparent 48%),
radial-gradient(circle at 70% 78%, rgba(255, 80, 66, 0.44), transparent 54%),
linear-gradient(145deg, #4a0a08, #380605 62%, #250303);
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.44),
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 0 0 rgba(122, 28, 25, 0.5);
cursor: pointer;
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, opacity 260ms ease;
animation: w4t-avatar-fab-pulse 2.4s ease-out infinite;
}
.w4t-avatar-fab:hover,
.w4t-avatar-fab:focus-visible {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 24px 46px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.24) inset,
0 0 0 11px rgba(122, 28, 25, 0.08);
outline: none;
}
body.w4t-entry-open .w4t-avatar-fab {
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.9);
}
body.w4t-entry-open .modern-header {
opacity: 1;
pointer-events: none;
z-index: 21000;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
body.w4t-entry-open .modern-header::before,
body.w4t-entry-open .modern-header::after {
display: none !important;
}
body.w4t-entry-open .modern-header .menu,
body.w4t-entry-open .modern-header .header-cta,
body.w4t-entry-open .modern-header .header-contact {
opacity: 0 !important;
visibility: hidden !important;
}
body.w4t-entry-open .modern-header .brand {
pointer-events: none;
}
body.w4t-entry-open .modern-header .brand .logo {
filter: none !important;
opacity: 1 !important;
}
.w4t-entry-overlay {
position: fixed;
inset: 0;
height: 100vh;
min-height: 100vh;
width: 100%;
display: grid;
place-items: center;
background: #050608;
overflow: hidden;
z-index: 20000;
opacity: 0;
visibility: hidden;
isolation: isolate;
transform: scale(1.01) translateZ(0);
will-change: transform, opacity;
transition:
opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
transform 880ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 880ms;
}
.w4t-entry-overlay.is-open {
opacity: 1;
visibility: visible;
transform: scale(1) translateZ(0);
transition-delay: 0s, 0s, 0s;
}
.w4t-entry-overlay.is-closing {
opacity: 0;
transform: scale(1.03) translateZ(0);
pointer-events: none;
}
.w4t-entry-overlay.is-closing.is-closing-phase2 {
transform: scale(1.04) translateZ(0);
}
.w4t-entry-overlay::before,
.w4t-entry-overlay::after {
content: '';
position: absolute;
inset: -12%;
pointer-events: none;
z-index: 1;
}
.w4t-entry-overlay::before {
background:
radial-gradient(1200px 640px at 16% 22%, rgba(255, 59, 48, 0.2), transparent 62%),
radial-gradient(980px 580px at 82% 74%, rgba(255, 107, 53, 0.16), transparent 60%),
radial-gradient(700px 460px at 52% 52%, rgba(255, 255, 255, 0.08), transparent 66%),
conic-gradient(from 180deg at 52% 54%, rgba(255, 59, 48, 0.1), rgba(255, 107, 53, 0.05), rgba(255, 255, 255, 0.04), rgba(255, 59, 48, 0.1));
filter: blur(16px);
mix-blend-mode: screen;
animation: w4t-entry-nebula 11s ease-in-out infinite alternate;
}
.w4t-entry-overlay::after {
background:
radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px 100%),
radial-gradient(circle at 72% 38%, rgba(255, 59, 48, 0.25) 0 2px, transparent 3px 100%),
radial-gradient(circle at 48% 78%, rgba(255, 107, 53, 0.22) 0 2px, transparent 3px 100%),
radial-gradient(circle at 84% 86%, rgba(255, 255, 255, 0.2) 0 2px, transparent 3px 100%);
background-size: 240px 240px, 300px 300px, 260px 260px, 220px 220px;
opacity: 0.3;
mix-blend-mode: screen;
animation: w4t-entry-molecules 14s linear infinite;
}
body.w4t-footer-underlay .w4t-entry-overlay {
position: fixed;
z-index: 20000;
}
@supports (height: 100dvh) {
.w4t-entry-overlay {
height: 100dvh;
min-height: 100dvh;
}
}
.w4t-entry-overlay[hidden] {
display: none !important;
}
.w4t-entry-overlay__video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transform: scale(1.01) translateZ(0);
transition:
transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 760ms ease;
}
.w4t-entry-overlay__shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.66) 100%);
transition: opacity 760ms ease, transform 880ms cubic-bezier(0.22, 1, 0.36, 1);
}
.w4t-entry-overlay__brand {
position: absolute;
top: clamp(18px, 2.5vw, 32px);
left: clamp(24px, 3.2vw, 46px);
z-index: 4;
width: clamp(150px, 14vw, 210px);
height: auto;
opacity: 0.98;
pointer-events: none;
user-select: none;
}
.w4t-entry-overlay__close {
position: absolute;
top: clamp(10px, 2.2vw, 22px);
right: clamp(10px, 2.2vw, 22px);
z-index: 3;
min-height: 42px;
padding: 0 16px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 999px;
background: rgba(10, 10, 10, 0.62);
color: #fff;
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transition:
background-color 220ms ease,
border-color 220ms ease,
transform 220ms ease;
}
.w4t-entry-overlay__close:hover,
.w4t-entry-overlay__close:focus-visible {
background: rgba(227, 54, 63, 0.92);
border-color: rgba(255, 255, 255, 0.72);
transform: translateY(-1px);
outline: none;
}
.w4t-entry-overlay.is-loading .w4t-entry-overlay__close {
opacity: 0;
pointer-events: none;
transform: translateY(-8px) scale(0.9);
}
.w4t-entry-overlay__avatar {
--avatar-native-width: 1080px;
--avatar-native-height: 1920px;
--avatar-scale: 1;
--avatar-zoom: 1;
position: relative;
z-index: 2;
width: min(92vw, 420px);
aspect-ratio: 1080 / 1920;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(20px) scale(0.95);
transform-style: preserve-3d;
filter: saturate(0.95) contrast(0.98);
transition:
transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 740ms ease,
filter 780ms ease,
box-shadow 860ms ease;
}
.w4t-entry-overlay.is-open .w4t-entry-overlay__avatar {
opacity: 1;
transform: translateY(0) scale(1);
filter: saturate(1) contrast(1);
box-shadow:
0 34px 86px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.w4t-entry-overlay__loader {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
pointer-events: none;
background:
radial-gradient(440px 320px at 50% 52%, rgba(56, 6, 5, 0.52), rgba(56, 6, 5, 0.18) 65%, transparent 100%);
opacity: 1;
transform: translateY(0);
transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.w4t-entry-overlay__loader-percent {
font-family: "Press Start 2P", "Courier New", monospace;
font-size: clamp(34px, 8vw, 72px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
color: #f6dede;
text-shadow:
0 0 0 rgba(56, 6, 5, 0.95),
3px 3px 0 rgba(56, 6, 5, 0.85),
0 0 26px rgba(56, 6, 5, 0.58);
transform: translate3d(0, 0, 0);
animation: w4t-entry-percent-flicker 2.1s steps(2, end) infinite;
}
.w4t-entry-overlay.is-avatar-ready .w4t-entry-overlay__loader {
opacity: 0;
transform: translateY(12px);
pointer-events: none;
}
.w4t-entry-overlay.is-open .w4t-entry-overlay__video {
transform: scale(1) translateZ(0);
}
.w4t-entry-overlay.is-closing .w4t-entry-overlay__video {
opacity: 0.86;
transform: scale(1.03) translateZ(0);
}
.w4t-entry-overlay.is-closing .w4t-entry-overlay__avatar {
opacity: 0;
transform: translateY(-14px) scale(0.88);
filter: saturate(1.12);
}
.w4t-entry-overlay.is-closing .w4t-entry-overlay__shade {
opacity: 0.14;
transform: scale(1.01);
}
.w4t-entry-overlay.is-closing::before {
animation: w4t-entry-collapse-field 860ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.w4t-entry-overlay.is-closing::after {
animation: w4t-entry-particle-burst 840ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.w4t-entry-overlay.is-closing.is-closing-phase2 .w4t-entry-overlay__video {
transform: scale(1.04) translateZ(0);
}
.w4t-entry-overlay.is-closing--navigate::after {
opacity: 0.64;
}
@keyframes w4t-entry-nebula {
0% {
transform: translate3d(-2%, -1%, 0) scale(1);
}
100% {
transform: translate3d(2%, 1.5%, 0) scale(1.04);
}
}
@keyframes w4t-entry-molecules {
0% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
50% {
transform: translate3d(1.6%, -1.4%, 0) rotate(2deg) scale(1.02);
}
100% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
}
@keyframes w4t-entry-collapse-field {
0% {
opacity: 0.7;
transform: scale(1) translate3d(0, 0, 0);
}
60% {
opacity: 0.95;
transform: scale(1.14) translate3d(0, 1.2%, 0);
}
100% {
opacity: 0;
transform: scale(1.34) translate3d(0, 2.4%, 0);
}
}
@keyframes w4t-entry-particle-burst {
0% {
opacity: 0.22;
transform: scale(1) rotate(0deg);
}
45% {
opacity: 0.62;
transform: scale(1.12) rotate(2deg);
}
100% {
opacity: 0;
transform: scale(1.32) rotate(5deg);
}
}
@keyframes w4t-avatar-fab-pulse {
0% {
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.44),
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 0 0 rgba(122, 28, 25, 0.42);
}
70% {
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.44),
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 0 14px rgba(122, 28, 25, 0);
}
100% {
box-shadow:
0 18px 38px rgba(0, 0, 0, 0.44),
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 0 0 rgba(122, 28, 25, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.w4t-entry-overlay,
.w4t-entry-overlay__video,
.w4t-entry-overlay__shade,
.w4t-entry-overlay__avatar,
.w4t-avatar-fab,
.w4t-entry-overlay::before,
.w4t-entry-overlay::after {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
}
}
.w4t-entry-overlay__viewport {
position: absolute;
top: 50%;
left: 50%;
width: var(--avatar-native-width);
height: var(--avatar-native-height);
transform: translate(-50%, -50%) scale(calc(var(--avatar-scale) * var(--avatar-zoom)));
transform-origin: center;
}
.w4t-entry-overlay__frame {
display: block;
width: var(--avatar-native-width);
height: var(--avatar-native-height);
border: 0;
background: transparent;
opacity: 1;
transform: scale(1);
transition: opacity 520ms ease, transform 740ms cubic-bezier(0.22, 1, 0.36, 1);
}
.w4t-entry-overlay__avatar.is-pending .w4t-entry-overlay__frame {
opacity: 0.01;
transform: scale(1.03);
}
.w4t-entry-overlay.is-avatar-ready .w4t-entry-overlay__avatar.is-pending .w4t-entry-overlay__frame,
.w4t-entry-overlay.is-avatar-ready .w4t-entry-overlay__avatar .w4t-entry-overlay__frame {
opacity: 1;
transform: scale(1);
}
.w4t-entry-overlay__video {
filter: brightness(0.45) saturate(0.84) contrast(1.05);
}
.w4t-entry-overlay__shade {
background:
radial-gradient(1000px 540px at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75) 54%, rgba(0, 0, 0, 0.92) 100%),
linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.9) 100%);
}
.w4t-entry-overlay__fakeai {
position: relative;
z-index: 4;
width: min(94vw, 820px);
padding: clamp(16px, 2.6vw, 28px);
border-radius: 26px;
border: 1px solid rgba(126, 241, 255, 0.34);
background:
linear-gradient(140deg, rgba(2, 10, 15, 0.86), rgba(2, 8, 20, 0.9)),
radial-gradient(700px 380px at 20% 16%, rgba(86, 227, 255, 0.16), transparent 58%);
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.62),
0 0 80px rgba(67, 210, 255, 0.18),
inset 0 0 0 1px rgba(182, 247, 255, 0.1);
backdrop-filter: blur(7px);
display: grid;
gap: clamp(14px, 2vw, 22px);
transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.w4t-entry-overlay__fakeai::before,
.w4t-entry-overlay__fakeai::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.w4t-entry-overlay__fakeai::before {
background:
repeating-linear-gradient(
180deg,
rgba(170, 248, 255, 0.03) 0px,
rgba(170, 248, 255, 0.03) 1px,
transparent 2px,
transparent 6px
);
opacity: 0.7;
}
.w4t-entry-overlay__fakeai::after {
border: 1px solid rgba(155, 246, 255, 0.2);
border-radius: inherit;
clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}
.w4t-entry-overlay.is-conversation-done .w4t-entry-overlay__fakeai {
opacity: 0;
transform: translateY(-20px) scale(0.96);
pointer-events: none;
}
.w4t-entry-overlay__holo {
position: relative;
width: clamp(100px, 13vw, 132px);
aspect-ratio: 1;
margin-inline: auto;
}
.w4t-entry-overlay__holo-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(121, 239, 255, 0.5);
box-shadow: 0 0 28px rgba(66, 208, 255, 0.45), inset 0 0 18px rgba(66, 208, 255, 0.24);
animation: w4t-holo-spin 5.6s linear infinite;
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__holo-ring {
box-shadow: 0 0 34px rgba(96, 228, 255, 0.74), inset 0 0 18px rgba(66, 208, 255, 0.24);
}
.w4t-entry-overlay__holo-face {
position: absolute;
inset: 17%;
border-radius: 50%;
background: radial-gradient(circle at 50% 30%, rgba(147, 246, 255, 0.92), rgba(23, 95, 116, 0.9));
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
place-items: center;
box-shadow: inset 0 0 30px rgba(8, 27, 40, 0.56);
}
.w4t-entry-overlay__holo-eye {
width: 14px;
height: 14px;
border-radius: 999px;
background: #d7fcff;
box-shadow: 0 0 14px rgba(190, 251, 255, 0.92);
animation: w4t-holo-blink 3.2s infinite;
}
.w4t-entry-overlay__holo-mouth {
grid-column: 1 / span 2;
width: 38px;
height: 9px;
border-radius: 999px;
background: rgba(217, 252, 255, 0.9);
box-shadow: 0 0 14px rgba(190, 251, 255, 0.9);
animation: w4t-holo-talk 460ms ease-in-out infinite;
animation-play-state: paused;
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__holo-mouth {
animation-play-state: running;
}
.w4t-entry-overlay__dialogue {
display: grid;
gap: 12px;
}
.w4t-entry-overlay__line {
margin: 0;
min-height: 3.2em;
color: #e8fbff;
font-size: clamp(16px, 2.35vw, 24px);
line-height: 1.38;
letter-spacing: 0.02em;
font-weight: 560;
text-shadow: 0 0 22px rgba(102, 228, 255, 0.28);
}
.w4t-entry-overlay__name-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.w4t-entry-overlay__name-input {
width: 100%;
border-radius: 14px;
border: 1px solid rgba(162, 246, 255, 0.36);
background: rgba(6, 25, 34, 0.72);
color: #f6feff;
padding: 13px 14px;
font-size: 16px;
}
.w4t-entry-overlay__name-submit {
border: 0;
border-radius: 14px;
padding: 0 16px;
color: #021318;
font-weight: 800;
letter-spacing: 0.02em;
background: linear-gradient(135deg, #84f5ff, #a9ffff);
cursor: pointer;
}
.w4t-entry-overlay__status {
margin: 0;
font-size: 13px;
color: rgba(186, 247, 255, 0.9);
letter-spacing: 0.08em;
text-transform: uppercase;
animation: w4t-fake-status-pulse 1.5s ease-in-out infinite;
}
.w4t-entry-overlay__audio-btn {
justify-self: start;
border: 1px solid rgba(160, 246, 255, 0.48);
background: rgba(15, 45, 57, 0.5);
color: #d6fbff;
border-radius: 999px;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 9px 14px;
cursor: pointer;
transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}
.w4t-entry-overlay__audio-btn:hover,
.w4t-entry-overlay__audio-btn:focus-visible {
outline: none;
transform: translateY(-1px);
background: rgba(28, 86, 107, 0.58);
border-color: rgba(186, 248, 255, 0.78);
}
.w4t-entry-overlay__audio-btn[hidden] {
display: none !important;
}
.w4t-entry-overlay__launchfx {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
opacity: 0;
}
.w4t-entry-overlay.is-launching-avatar .w4t-entry-overlay__launchfx {
opacity: 1;
}
.w4t-entry-overlay__launchfx span {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg, transparent, rgba(142, 248, 255, 0.95), transparent);
animation: w4t-launch-line 780ms ease-out forwards;
}
.w4t-entry-overlay__launchfx span:nth-child(1) { left: 14%; }
.w4t-entry-overlay__launchfx span:nth-child(2) { left: 38%; animation-delay: 80ms; }
.w4t-entry-overlay__launchfx span:nth-child(3) { left: 63%; animation-delay: 140ms; }
.w4t-entry-overlay__launchfx span:nth-child(4) { left: 83%; animation-delay: 220ms; }
.w4t-entry-overlay__avatar {
z-index: 5;
opacity: 0;
transform: translateY(30px) scale(0.82) rotateX(14deg);
filter: blur(7px) saturate(1.06);
pointer-events: none;
}
.w4t-entry-overlay.is-avatar-live .w4t-entry-overlay__avatar {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg);
filter: none;
pointer-events: auto;
transition:
opacity 520ms ease,
transform 860ms cubic-bezier(0.16, 1, 0.3, 1),
filter 640ms ease;
}
.w4t-entry-overlay.is-avatar-live .w4t-entry-overlay__shade {
opacity: 0.5;
}
/* DEPT-inspired fake AI scene override */
.w4t-entry-overlay {
background:
radial-gradient(1200px 760px at 22% 18%, rgba(80, 18, 150, 0.52), transparent 64%),
radial-gradient(980px 640px at 70% 58%, rgba(117, 9, 94, 0.38), transparent 60%),
#020207;
}
.w4t-entry-overlay::after {
opacity: 0.5;
}
.w4t-entry-overlay__video {
filter: brightness(0.28) saturate(0.92) contrast(1.12);
}
.w4t-entry-overlay__shade {
background:
repeating-linear-gradient(
180deg,
rgba(147, 72, 255, 0.032) 0 2px,
rgba(0, 0, 0, 0) 3px 6px
),
linear-gradient(180deg, rgba(3, 1, 12, 0.3), rgba(0, 0, 0, 0.84));
}
.w4t-entry-overlay__fakeai {
width: min(94vw, 1240px);
min-height: min(86vh, 860px);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
padding: clamp(18px, 3.2vw, 42px);
display: grid;
grid-template-rows: auto auto auto;
align-content: start;
align-items: center;
justify-items: center;
row-gap: clamp(8px, 1.3vh, 16px);
}
.w4t-entry-overlay__fakeai::before,
.w4t-entry-overlay__fakeai::after {
display: none;
}
.w4t-entry-overlay__hud {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 14px;
z-index: 3;
}
.w4t-entry-overlay__hud-left {
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: clamp(10px, 0.82vw, 12px);
letter-spacing: 0.28em;
color: rgba(246, 242, 255, 0.9);
text-transform: uppercase;
}
.w4t-entry-overlay__sound-toggle {
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.85);
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: clamp(10px, 0.82vw, 12px);
letter-spacing: 0.25em;
text-transform: uppercase;
cursor: pointer;
opacity: 0.92;
}
.w4t-entry-overlay__sound-toggle::after {
content: " / OFF";
opacity: 0.4;
}
.w4t-entry-overlay__sound-toggle.is-off::before {
content: "SOUND OFF";
}
.w4t-entry-overlay__sound-toggle.is-off::after {
content: " / ON";
}
.w4t-entry-overlay__sound-toggle.is-off {
color: rgba(255, 255, 255, 0.56);
}
.w4t-entry-overlay__particle-head {
position: relative;
z-index: 2;
width: min(86vw, 760px);
aspect-ratio: 1 / 1;
margin-top: clamp(24px, 3.4vh, 52px);
border-radius: 999px;
background:
radial-gradient(circle at 50% 34%, rgba(255, 170, 255, 0.52), transparent 28%),
radial-gradient(circle at 50% 56%, rgba(178, 38, 238, 0.82), rgba(90, 11, 132, 0.28) 48%, transparent 72%);
filter: saturate(1.08) contrast(1.04) blur(0.2px);
mask-image: radial-gradient(circle at 50% 44%, black 0 55%, transparent 74%);
animation: w4t-particle-drift 8s ease-in-out infinite alternate;
}
.w4t-entry-overlay__particle-head::before,
.w4t-entry-overlay__particle-head::after {
content: "";
position: absolute;
inset: 6%;
border-radius: 999px;
pointer-events: none;
}
.w4t-entry-overlay__particle-head::before {
background:
radial-gradient(circle, rgba(240, 134, 255, 0.84) 0 1px, transparent 1.3px 100%);
background-size: 7px 7px;
mix-blend-mode: screen;
opacity: 0.86;
}
.w4t-entry-overlay__particle-head::after {
inset: -8%;
border: 1px solid rgba(166, 94, 255, 0.24);
box-shadow: 0 0 80px rgba(153, 52, 238, 0.33), inset 0 0 40px rgba(153, 52, 238, 0.24);
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__particle-head {
filter: saturate(1.18) contrast(1.08) brightness(1.06);
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__particle-head::before {
opacity: 1;
}
.w4t-entry-overlay__dialogue {
position: relative;
z-index: 4;
top: auto;
left: auto;
width: min(80vw, 860px);
transform: none;
display: grid;
justify-items: center;
gap: 10px;
margin-top: clamp(2px, 0.8vh, 10px);
padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.8vw, 18px);
border-radius: 14px;
background: linear-gradient(
180deg,
rgba(7, 5, 14, 0.08),
rgba(7, 5, 14, 0.28)
);
backdrop-filter: blur(5px);
}
.w4t-entry-overlay__line {
margin: 0;
min-height: 2.4em;
color: #f6ebff;
text-align: center;
font-size: clamp(28px, 4.2vw, 60px);
font-weight: 460;
letter-spacing: -0.02em;
line-height: 1.08;
text-shadow: 0 8px 32px rgba(110, 17, 156, 0.45);
opacity: 0.92;
transform: translateY(8px);
filter: blur(0.4px);
transition:
opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.w4t-entry-overlay__line.is-revealing {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.w4t-entry-overlay.is-briefing .w4t-entry-overlay__line {
max-width: min(92vw, 1100px);
font-size: clamp(20px, 2.25vw, 36px);
line-height: 1.2;
}
.w4t-entry-overlay__name-form {
width: min(92vw, 840px);
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
}
.w4t-entry-overlay__name-input {
border-radius: 16px;
border: 1px solid rgba(237, 233, 255, 0.72);
background: rgba(249, 248, 255, 0.92);
color: #171325;
min-height: 58px;
font-size: clamp(18px, 2.2vw, 28px);
}
.w4t-entry-overlay__name-submit {
border-radius: 16px;
min-height: 58px;
min-width: 150px;
font-family: "IBM Plex Mono", "Courier New", monospace;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #001015;
background: linear-gradient(135deg, #86f4ff, #64e3f2);
}
.w4t-entry-overlay__status {
margin: 0;
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: clamp(10px, 0.72vw, 12px);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(230, 215, 255, 0.76);
text-align: center;
}
/* Hard fixes requested */
.w4t-entry-overlay__name-form[hidden] {
display: none !important;
}
.w4t-entry-overlay__particle-head {
background:
radial-gradient(ellipse at 50% 28%, rgba(255, 185, 255, 0.56), transparent 24%),
radial-gradient(ellipse at 50% 48%, rgba(206, 56, 244, 0.84), rgba(94, 14, 137, 0.32) 54%, transparent 76%);
mask-image:
radial-gradient(ellipse at 50% 32%, #000 0 24%, transparent 40%),
radial-gradient(ellipse at 50% 58%, #000 0 48%, transparent 74%);
}
.w4t-entry-overlay__particle-head::after {
background:
radial-gradient(circle at 42% 42%, rgba(236, 215, 255, 0.95) 0 8px, transparent 10px),
radial-gradient(circle at 58% 42%, rgba(236, 215, 255, 0.95) 0 8px, transparent 10px),
radial-gradient(ellipse at 50% 60%, rgba(237, 219, 255, 0.9) 0 16px, transparent 20px),
radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.12), transparent 56%);
box-shadow:
0 0 80px rgba(153, 52, 238, 0.33),
inset 0 0 40px rgba(153, 52, 238, 0.24);
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__particle-head::after {
transform: translateY(1px) scale(1.012);
}
.w4t-entry-overlay__avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateY(38px) scale(0.82) rotateX(14deg);
border: 0;
box-shadow: none;
background: transparent;
overflow: hidden;
}
.w4t-entry-overlay:not(.is-avatar-live) .w4t-entry-overlay__avatar {
opacity: 0 !important;
pointer-events: none !important;
border: 0 !important;
box-shadow: none !important;
}
.w4t-entry-overlay.is-avatar-live .w4t-entry-overlay__avatar {
transform: translate(-50%, -50%) translateY(0) scale(1) rotateX(0deg);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 34px 86px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
/* Final style alignment: particle face only + screenshot-like input */
.w4t-entry-overlay__particle-head {
width: min(38vw, 420px) !important;
aspect-ratio: 1 / 1 !important;
border-radius: 999px !important;
position: relative;
overflow: hidden;
background: transparent !important;
box-shadow: none !important;
filter: saturate(1.08) contrast(1.02) !important;
mask-image: none !important;
animation:
w4t-particle-drift 5.6s ease-in-out infinite alternate,
w4t-orb-breathe 2.9s ease-in-out infinite;
}
.w4t-entry-overlay__particle-head::before,
.w4t-entry-overlay__particle-head::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.w4t-entry-overlay__particle-head::before {
content: none;
}
.w4t-entry-overlay__particle-head::after {
content: none;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__particle-head {
filter: saturate(1.14) contrast(1.05) brightness(1.03) !important;
box-shadow: none !important;
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__particle-head::before {
animation: w4t-orb-ring-pulse 620ms ease-in-out infinite;
}
.w4t-entry-overlay__fakeai.is-talking .w4t-entry-overlay__particle-head::after {
animation: w4t-orb-ring-pulse 760ms ease-in-out infinite reverse;
}
.w4t-entry-overlay__particle-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.w4t-entry-overlay__name-form {
width: min(78vw, 760px) !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.w4t-entry-overlay__name-input {
border-radius: 0 !important;
border: 1px solid rgba(236, 236, 255, 0.78) !important;
background: rgba(6, 7, 14, 0.56) !important;
color: #eceaf6 !important;
min-height: 48px !important;
font-size: clamp(20px, 1.45vw, 24px) !important;
padding: 8px 14px !important;
letter-spacing: 0.01em;
}
.w4t-entry-overlay__name-input::placeholder {
color: rgba(236, 234, 246, 0.66);
}
.w4t-entry-overlay__name-submit {
display: none !important;
}
.w4t-entry-overlay__name-enter {
margin: 0;
justify-self: end;
font-family: "IBM Plex Mono", "Courier New", monospace;
font-size: clamp(11px, 0.74vw, 13px);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(236, 234, 246, 0.82);
}
@media (max-width: 767px) {
.w4t-entry-overlay__name-form {
width: min(88vw, 520px) !important;
}
.w4t-entry-overlay__dialogue {
width: min(92vw, 620px);
padding: 8px 10px;
}
.w4t-entry-overlay__line {
min-height: 2.6em;
font-size: clamp(16px, 4.8vw, 26px);
line-height: 1.14;
}
}
@keyframes w4t-particle-drift {
from { transform: translateY(0) scale(1); }
to { transform: translateY(10px) scale(1.03); }
}
@keyframes w4t-face-jitter {
0%, 100% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-1px, 0, 0); }
50% { transform: translate3d(0, 1px, 0); }
75% { transform: translate3d(1px, 0, 0); }
}
@keyframes w4t-orb-breathe {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, 0, 0) scale(1.015); }
}
@keyframes w4t-orb-ring-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.58;
}
50% {
transform: scale(1.04);
opacity: 0.9;
}
}
@keyframes w4t-face-particles-flow {
0% { background-position: 0 0, 7px 11px, 13px 5px, 3px 17px, 11px 9px, 5px 3px, 17px 7px, 9px 7px, 9px 13px, 15px 4px, 2px 12px, 8px 16px, 16px 16px, 14px 6px, 6px 14px, 12px 8px, 4px 10px, center; }
50% { background-position: 6px 4px, 10px 13px, 16px 8px, 8px 20px, 14px 13px, 9px 5px, 20px 11px, 12px 10px, 12px 16px, 19px 6px, 5px 15px, 10px 19px, 20px 19px, 18px 8px, 9px 17px, 15px 11px, 8px 13px, center; }
100% { background-position: 12px 8px, 14px 16px, 19px 11px, 13px 23px, 17px 16px, 12px 8px, 24px 14px, 15px 13px, 14px 19px, 22px 9px, 8px 18px, 13px 22px, 24px 22px, 21px 11px, 12px 20px, 18px 14px, 11px 16px, center; }
}
@keyframes w4t-face-feature-breathe {
0%, 100% { opacity: 0.88; filter: blur(0.22px); }
50% { opacity: 1; filter: blur(0.14px); }
}
@keyframes w4t-holo-spin {
from { transform: rotate(0deg) scale(1); }
to { transform: rotate(360deg) scale(1.04); }
}
@keyframes w4t-holo-blink {
0%, 44%, 100% { transform: scaleY(1); opacity: 1; }
46%, 50% { transform: scaleY(0.1); opacity: 0.4; }
}
@keyframes w4t-holo-talk {
0%, 100% { transform: scaleX(1) scaleY(0.7); }
50% { transform: scaleX(1.25) scaleY(1.1); }
}
@keyframes w4t-fake-status-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes w4t-launch-line {
0% { transform: translateY(-100%); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
@keyframes w4t-entry-percent-flicker {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
48% {
opacity: 0.96;
transform: translate3d(0, -1px, 0);
}
52% {
opacity: 0.88;
transform: translate3d(1px, 1px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media (max-width: 767px) {
.w4t-entry-overlay__fakeai {
width: 100%;
min-height: 100%;
padding: 16px;
}
.w4t-entry-overlay__name-form {
grid-template-columns: 1fr;
}
.w4t-entry-overlay__name-submit {
min-height: 44px;
}
.w4t-entry-overlay__avatar {
width: min(92vw, 360px);
border-radius: 20px;
}
.w4t-entry-overlay__line {
font-size: clamp(34px, 10vw, 52px);
}
}
/* Mobile override: keep text compact and below face */
@media (max-width: 767px) {
.w4t-entry-overlay__dialogue {
width: min(92vw, 620px);
padding: 8px 10px;
margin-top: 6px;
}
.w4t-entry-overlay__line {
min-height: 2.6em;
font-size: clamp(16px, 4.8vw, 26px);
line-height: 1.14;
}
}
/* Final layout override: desktop split face/text */
@media (min-width: 992px) {
.w4t-entry-overlay__fakeai {
width: min(95vw, 1380px);
min-height: min(84vh, 900px);
padding: clamp(20px, 2.2vw, 34px) clamp(26px, 3.1vw, 46px);
grid-template-columns: minmax(360px, 0.95fr) minmax(380px, 1.05fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"hud hud"
"face dialogue";
column-gap: clamp(18px, 2.1vw, 38px);
row-gap: clamp(14px, 1.6vh, 22px);
align-items: center;
justify-items: stretch;
}
.w4t-entry-overlay__hud {
grid-area: hud;
}
.w4t-entry-overlay__particle-head {
grid-area: face;
width: min(28vw, 320px) !important;
margin-top: 0 !important;
align-self: center;
justify-self: center;
}
.w4t-entry-overlay__dialogue {
grid-area: dialogue;
width: 100%;
max-width: 680px;
justify-self: start;
align-self: center;
margin-top: 0;
padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.5vw, 20px);
background: linear-gradient(
180deg,
rgba(8, 6, 12, 0.14),
rgba(8, 6, 12, 0.34)
);
}
.w4t-entry-overlay__line {
min-height: 3.1em;
font-size: clamp(22px, 2.6vw, 38px);
line-height: 1.06;
text-align: left;
overflow-wrap: anywhere;
text-wrap: pretty;
}
.w4t-entry-overlay.is-briefing .w4t-entry-overlay__line {
font-size: clamp(20px, 1.95vw, 34px);
line-height: 1.22;
}
.w4t-entry-overlay__name-form {
width: min(100%, 640px) !important;
}
.w4t-entry-overlay__status {
justify-self: start;
text-align: left;
}
}
.w4t-entry-overlay__line-brand {
color: #ff3b30;
}
/* === HERO FULLSCREEN === */
.hero-fullscreen {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transform: scale(1);
filter: saturate(1) brightness(1);
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease, visibility 0s linear 0.8s,
transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), filter 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(28, 28, 30, 0.6) 100%
);
z-index: 1;
opacity: 0.78;
backdrop-filter: blur(0px);
transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 2.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* White background before intro ends; hide video and overlay */
body:not(.hero-video-visible) .hero-fullscreen {
background: #ffffff;
}
body:not(.hero-video-visible) .hero-fullscreen .hero-video {
opacity: 0;
visibility: hidden;
transition-delay: 0s; /* ensure hidden immediately */
}
body:not(.hero-video-visible) .hero-fullscreen .hero-overlay {
opacity: 0;
}
/* Reveal video and overlay once intro finishes */
body.hero-video-visible .hero-fullscreen .hero-video {
opacity: 1;
visibility: visible;
transition-delay: 0s, 0s, 0s, 0s; /* cancel visibility delay */
}
body.hero-video-visible .hero-fullscreen .hero-overlay {
opacity: 0.78;
}
.hero-content-center {
position: relative;
z-index: 2;
text-align: center;
color: var(--white);
max-width: 900px;
padding: 0 var(--space-lg);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 1;
transform: translateY(0);
}
.hero-title-large {
font-size: var(--text-7xl);
font-weight: 900;
line-height: 1.1;
margin-bottom: var(--space-xl);
text-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
}
#dynamic-word {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: opacity var(--transition-slow);
position: relative;
}
/* Enlarge and animate the rotating slogan word */
.hero-title-large #dynamic-word {
display: inline-block;
font-size: 1.35em; /* bigger carousel word */
letter-spacing: 0.02em;
animation: heroWordPulse 6s ease-in-out infinite;
}
.hero-title-large #dynamic-word::before {
content: '';
position: absolute;
left: 50%;
bottom: -12px;
width: 58%;
height: 4px;
background: linear-gradient(90deg, rgba(255, 13, 0, 0), rgba(255,59,48,.9), rgba(255,59,48,.0));
border-radius: 999px;
transform: translateX(-50%);
filter: blur(0.2px);
}
@keyframes heroWordPulse {
0% { transform: translateY(0) scale(1); opacity: 1; }
25% { transform: translateY(-4px) scale(1.04); }
50% { transform: translateY(0) scale(1.02); }
75% { transform: translateY(3px) scale(1.03); }
100% { transform: translateY(0) scale(1); }
}
#dynamic-word::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
z-index: -1;
}
.hero-subtitle-large {
font-size: var(--text-xl);
color: rgba(255, 255, 255, 0.92);
margin-bottom: var(--space-3xl);
line-height: 2.1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
max-width: 80ch;
margin-inline: auto;
}
/* === EMPH WORD � refined, clean highlight === */
.emph-word {
position: relative;
display: inline-block;
padding: 0.1em 0.3em;
font-weight: 600;
font-size: 1.05em;
color: #fff;
-webkit-text-fill-color: #fff;
background: none !important;
z-index: 0;
transition: color 0.4s ease, text-shadow 0.4s ease;
}
.emph-word::before {
content: "";
position: absolute;
inset: -2px -6px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.05);
z-index: -1;
transition: background 0.4s ease;
}
/* === Palette raffinata + glow controllato === */
.emph-word.software {
color: white;
/* -webkit-text-fill-color: rgba(58, 97, 177, 0.96); */
}
.emph-word.software::before {
background: rgba(58, 97, 177, 0.8);
}
.emph-word.software:hover {
text-shadow: 0 0 10px rgba(38, 77, 165, 0.5);
}
.emph-word.ideas {
color: white;
}
.emph-word.ideas::before {
background: rgba(213, 58, 42, 0.8);
}
.emph-word.ideas:hover {
text-shadow: 0 0 10px rgba(205, 54, 44, 0.5);
}
.emph-word.future {
color: white
}
.emph-word.future::before {
background: rgba(141, 37, 180, 0.8);
}
.emph-word.future:hover {
text-shadow: 0 0 10px rgba(117, 42, 168, 0.5);
}
/* === Hover leggero, senza casino === */
.emph-word:hover::before {
background: rgba(255, 255, 255, 0.15);
}
.emph-word:hover {
text-shadow: 0 0 10px currentColor;
transform: translateY(-1px);
}
@keyframes typing { from { max-width: 0; } to { max-width: var(--tw, 8ch); } }
@keyframes caretBlink { 0%,45% { border-right-color: rgba(255,255,255,0.95);} 50%,100% { border-right-color: transparent; } }
.hero-cta-center {
display: flex;
gap: var(--space-xl);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-4xl);
}
.scroll-indicator {
position: absolute;
bottom: var(--space-xl);
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
z-index: 10;
}
.scroll-arrow {
width: 24px;
height: 24px;
border: 2px solid var(--white);
border-radius: 50%;
position: relative;
}
.scroll-arrow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-bottom: 2px solid var(--white);
border-right: 2px solid var(--white);
transform: translate(-50%, -70%) rotate(45deg);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* === SECTIONS WITH GLASS EFFECTS === */
.competenze-section {
/* Dark like the hero, then switch to white while scrolling the section (projects-like) */
--comp-dark: 1;
--comp-dark-p: calc(var(--comp-dark) * 100%);
--comp-light-p: calc(100% - var(--comp-dark-p));
background: #ffffff;
position: relative;
isolation: isolate;
}
@media (max-width: 360px) {
.modern-header.modern-header--w4t {
--w4t-action-gap: 8px;
--w4t-mail-size: 40px;
--w4t-area-max: 120px;
}
.modern-header.modern-header--w4t .brand .logo {
width: 132px !important;
}
.modern-header.modern-header--w4t .header-cta {
height: 36px;
padding: 0 10px;
font-size: 0.78rem;
}
.modern-header.modern-header--w4t .header-cta--area {
overflow: hidden;
text-overflow: ellipsis;
}
.modern-header.modern-header--w4t .header-contact {
width: 40px;
height: 40px;
}
}
.competenze-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(1100px 520px at 18% 18%, rgba(255, 59, 48, 0.12), transparent 60%),
radial-gradient(900px 480px at 82% 84%, rgba(255, 107, 53, 0.1), transparent 58%),
radial-gradient(980px 560px at 50% 110%, rgba(255, 71, 87, 0.08), transparent 60%),
linear-gradient(0deg, #171717 0%, #171717 100%);
opacity: var(--comp-dark, 1);
pointer-events: none;
transition: opacity 0.2s linear;
/* filter: blur(10px); */
z-index: 0;
}
.competenze-section .container {
position: relative;
z-index: 1;
}
/* Homepage request: tiles look like kicker (soft red bg + red border) */
.competenze-section .servizio-card,
.competenze-section .servizio-card--strategy,
.competenze-section .servizio-card--technologies,
.competenze-section .servizio-card--innovation {
--servizio-gradient: linear-gradient(
135deg,
rgba(255, 59, 48, 0.28) 0%,
rgba(255, 71, 87, 0.18) 100%
);
--servizio-shadow: rgba(255, 59, 48, 0.18);
border-color: rgba(255, 59, 48, 0.46);
color: rgba(15, 23, 42, 0.92);
}
.competenze-section .servizio-card__tag {
background: var(--primary-red) !important;
border: 2px solid rgba(255, 255, 255, 0.78) !important;
color: #ffffff !important;
font-size: clamp(0.82rem, 0.98vw, 0.96rem) !important;
font-weight: 900 !important;
letter-spacing: 0.14em !important;
padding: 0.42rem 1.1rem !important;
margin-bottom: 0.55rem !important;
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.16) !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.32) !important;
backdrop-filter: none;
}
.competenze-section .servizio-card__header h3 {
font-size: clamp(1.9rem, 2.6vw, 2.35rem);
line-height: 1.08;
}
.competenze-section .servizio-card__description {
color: rgba(15, 23, 42, 0.78);
font-size: clamp(1.05rem, 1.55vw, 1.18rem);
line-height: 1.55;
}
.competenze-section .servizio-card__list li {
color: rgba(15, 23, 42, 0.76);
font-size: clamp(1.02rem, 1.4vw, 1.16rem);
line-height: 1.55;
}
.competenze-section .servizio-card__list li::before {
background: var(--primary-red) !important;
box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.22) !important;
}
.competenze-section .servizio-card:hover {
border-color: rgba(255, 59, 48, 0.9);
}
.competenze-section .servizio-card:hover .servizio-card__description {
color: rgba(15, 23, 42, 0.9);
}
.competenze-section .servizio-card:hover .servizio-card__list li {
color: rgba(15, 23, 42, 0.9);
}
.competenze-section .servizio-card:hover .servizio-card__list li::before {
box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.26),
0 0 12px rgba(255, 59, 48, 0.18) !important;
}
.section-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-4xl);
}
/* Homepage request: left-aligned title block for competenze section */
.competenze-section .section-header {
text-align: left;
max-width: none;
margin: 0 0 var(--space-4xl);
padding-top: clamp(18px, 4vw, 64px);
display: grid;
grid-template-columns: minmax(0, 1.80fr) minmax(0, 2fr);
grid-template-rows: auto auto;
column-gap: clamp(22px, 5vw, 72px);
row-gap: 12px;
align-items: end;
color: color-mix(
in srgb,
rgba(15, 23, 42, 0.94) var(--comp-light-p),
rgba(255, 255, 255, 0.94) var(--comp-dark-p)
);
}
.competenze-section .section-header .kicker {
display: inline-flex;
margin: 0 0 var(--space-md) 0;
grid-column: 1;
grid-row: 1;
}
.competenze-section .section-header h2 {
grid-column: 1;
grid-row: 2;
margin: 0;
display: block;
font-size: clamp(3.1rem, 6.2vw, 4.7rem);
line-height: 1.02;
letter-spacing: -0.04em;
max-width: 11ch;
color: color-mix(
in srgb,
rgba(15, 23, 42, 0.96) var(--comp-light-p),
rgba(255, 255, 255, 0.96) var(--comp-dark-p)
);
}
.competenze-section .section-header h2 .gradient-text {
display: block;
margin-top: 0.08em;
}
.competenze-section .section-header .lead {
margin-left: 0;
margin-right: 0;
grid-column: 2;
grid-row: 2;
margin: 0;
font-size: clamp(1.1rem, 2vw, 1.38rem);
line-height: 1.55;
max-width: none;
justify-self: end;
color: color-mix(
in srgb,
rgba(15, 23, 42, 0.72) var(--comp-light-p),
rgba(255, 255, 255, 0.72) var(--comp-dark-p)
);
}
@media (max-width: 900px) {
.competenze-section .section-header {
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: var(--space-md);
align-items: start;
}
.competenze-section .section-header .lead {
grid-column: 1;
grid-row: auto;
}
}
/* Header speciale per servizi */
.servizi-section .section-header {
position: relative;
padding: var(--space-2xl);
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-2xl);
border: 1px solid rgba(255, 59, 48, 0.1);
-webkit-backdrop-filter: blur(20px) saturate(150%);
backdrop-filter: blur(20px) saturate(150%);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.08),
0 10px 20px rgba(255, 59, 48, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transform: translateY(0);
transition: all var(--transition-slow);
}
.servizi-section .section-header:hover {
transform: translateY(-8px);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.12),
0 15px 30px rgba(255, 59, 48, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 1),
0 0 40px rgba(255, 59, 48, 0.1);
}
/* Aureola luminosa dietro il titolo servizi */
.servizi-section .section-header h2 {
position: relative;
}
.servizi-section .section-header h2::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 150%;
background: radial-gradient(circle, rgba(255, 59, 48, 0.1) 0%, transparent 70%);
border-radius: 50%;
z-index: -1;
animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}
.kicker {
display: block;
color: var(--primary-red);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
margin: 0 auto var(--space-md) auto;
padding: var(--space-xs) var(--space-lg);
background: linear-gradient(135deg,
rgba(255, 59, 48, 0.1) 0%,
rgba(255, 71, 87, 0.08) 100%
);
border-radius: var(--radius-md);
position: relative;
transition: all var(--transition-normal);
text-align: center;
width: fit-content;
}
.kicker::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
var(--primary-red) 0%,
var(--secondary-red) 50%,
var(--accent-orange) 100%
);
border-radius: 1px;
}
.kicker:hover {
transform: translateY(-2px);
background: linear-gradient(135deg,
rgba(255, 59, 48, 0.15) 0%,
rgba(255, 71, 87, 0.12) 100%
);
color: var(--secondary-red);
}
.section-header h2 {
font-size: var(--text-5xl);
font-weight: 800;
margin-bottom: var(--space-lg);
color: var(--gray-900);
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-md);
}
/* Fix: servizi-section particles visibili sopra il background */
.servizi-section::before {
z-index: 1;
}
.servizi-section > .container,
.servizi-section .section-header,
.servizi-grid {
position: relative;
z-index: 2;
}
/* Fix: workflow section background full width */
.modalita-section {
background: linear-gradient(135deg, #F8F9FA 0%, #F0F0F0 100%);
position: relative;
overflow: hidden;
width: 100vw;
min-width: 100vw;
margin-left: calc(50% - 50vw);
padding: var(--space-4xl) 0;
}
.modalita-section > .container {
background: none !important;
}
/* Modalit�: header style to match reference (pill kicker + underline) */
.modalita-section .section-header .kicker {
display: inline-block;
padding: 10px 18px;
border-radius: 9999px; /* full pill */
background: linear-gradient(135deg,
rgba(255, 59, 48, 0.12) 0%,
rgba(255, 71, 87, 0.10) 100%
);
color: var(--primary-red);
letter-spacing: 0.2em;
text-transform: uppercase;
position: relative;
margin-bottom: var(--space-md);
}
.modalita-section .section-header .kicker::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -6px; /* visible gap under pill */
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--accent-orange));
border-radius: 9999px;
}
/* Ensure heading weight/spacing mirrors design */
.modalita-section .section-header h2 {
font-weight: 800;
letter-spacing: -0.02em;
}
/* === INNOVAZIONE COME MOTORE (Homepage) === */
.innovation-motor {
position: relative;
padding: clamp(56px, 7vw, 90px) 0;
min-height: 100vh;
display: flex;
align-items: center;
background: radial-gradient(1200px 520px at 50% 0%, rgba(255, 107, 53, 0.12) 0%, transparent 55%),
radial-gradient(900px 420px at 10% 85%, rgba(255, 59, 48, 0.12) 0%, transparent 55%),
radial-gradient(800px 380px at 90% 85%, rgba(255, 118, 117, 0.10) 0%, transparent 58%),
linear-gradient(180deg, #07090f 0%, #05060a 100%);
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
isolation: isolate;
}
.innovation-motor::before {
content: '';
position: absolute;
inset: -2px;
pointer-events: none;
background: radial-gradient(600px 260px at 50% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 62%);
filter: blur(8px);
opacity: 0.9;
}
.innovation-motor .container {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.innovation-motor__header {
max-width: 980px;
margin: 0 0 clamp(46px, 5vw, 62px);
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.innovation-motor .kicker {
margin-left: 0;
margin-right: auto;
display: inline-flex;
}
.innovation-motor__kicker {
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 10px 18px;
border-radius: 9999px;
background: rgba(255, 59, 48, 0.14);
border: 1px solid rgba(255, 59, 48, 0.22);
color: var(--primary-red);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.innovation-motor__title {
margin: 16px 0 0;
font-size: clamp(2.05rem, 4.2vw, 3.05rem);
line-height: 1.12;
letter-spacing: -0.03em;
color: rgba(255, 255, 255, 0.96);
font-weight: 750;
}
.w4t-badge {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border-radius: 999px;
background: rgba(227, 54, 63, 0.18);
color: #e3363f;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.85rem;
text-decoration: none;
}
.kicker.w4t-badge::before {
content: none;
display: none;
}
.innovation-motor__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(34px, 4.6vw, 64px) clamp(26px, 6vw, 86px);
max-width: 1160px;
margin: 0 auto;
justify-items: start;
justify-content: center;
}
.innovation-motor::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
opacity: 0.9;
pointer-events: none;
}
.innovation-motor__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(14px, 2.4vw, 18px);
}
.innovation-motor__icon {
width: 62px;
height: 62px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--primary-red);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 59, 48, 0.06);
margin-bottom: 16px;
}
.innovation-motor__icon i {
font-size: 24px;
}
.innovation-motor__item-title {
margin: 0 0 8px;
font-size: clamp(1.18rem, 1.6vw, 1.42rem);
font-weight: 800;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.96);
}
.innovation-motor__item-text {
margin: 0;
max-width: 46ch;
font-size: clamp(1.02rem, 1.35vw, 1.16rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 860px) {
.innovation-motor__grid {
grid-template-columns: 1fr;
gap: 26px;
}
.innovation-motor__item {
padding: 10px 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.innovation-motor::before {
animation: none;
}
}
/* Fix: kicker e titolo left nella chi-siamo-preview */
.chi-siamo-preview .kicker,
.chi-siamo-preview h2 {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.chi-siamo-preview .section-header {
text-align: left;
margin-left: 0;
margin-right: auto;
}
/* Fix: kicker e titolo left nella sezione "La nostra storia" */
#storia-section .section-header {
text-align: left;
margin-left: 0;
margin-right: auto;
}
#storia-section .section-header .kicker {
text-align: left;
margin-left: 0;
margin-right: 0;
}
/* La nostra storia: kicker dentro content-col (markup senza .section-header) */
#storia-section .content-col .kicker {
text-align: left;
margin-left: 0;
margin-right: 0;
display: inline-block; /* evita centering per width fit-content */
}
/* Fix: workflow section background full width */
.modalita-section {
min-width: 100vw;
background: linear-gradient(135deg, #F8F9FA 0%, #F0F0F0 100%);
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: var(--space-4xl) 0;
}
/* Prima section: kicker e header left */
.hero-fullscreen .section-header {
text-align: left;
margin-left: 0;
margin-right: auto;
}
.hero-fullscreen .section-header .kicker {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.lead {
font-size: var(--text-lg);
color: var(--gray-600);
line-height: 1.8;
}
/* Improve only the workflow header paragraph */
.modalita-section .section-header .lead {
font-size: var(--text-xl);
color: var(--gray-600);
line-height: 1.4;
max-width: 980px;
margin: var(--space-md) auto 0;
text-wrap: pretty;
}
/* .modalita-section .section-header .lead b {
color: var(--primary-gray);
font-weight: 800;
} */
.competenze-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: var(--space-2xl);
margin-bottom: var(--space-4xl);
}
.competenze-card {
padding: var(--space-2xl);
border-radius: var(--radius-2xl);
transition: all var(--transition-slow);
background: var(--white);
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
}
.competenze-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-glass);
opacity: 0;
transition: opacity var(--transition-normal);
}
.competenze-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 30px 60px rgba(198, 40, 40, 0.15),
0 20px 40px rgba(255, 87, 34, 0.1),
0 10px 20px rgba(142, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: var(--primary-red);
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(25px) saturate(130%);
backdrop-filter: blur(25px) saturate(130%);
}
.competenze-card:hover::before {
opacity: 1;
}
.card-header {
display: flex;
align-items: center;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
position: relative;
z-index: 1;
}
.card-icon {
width: 60px;
height: 60px;
border-radius: var(--radius-lg);
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
box-shadow: var(--shadow-lg);
}
.card-header h3 {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--gray-900);
}
.tech-stack {
display: flex;
flex-direction: column;
gap: var(--space-md);
position: relative;
z-index: 1;
}
.tech-category {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--gray-50);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
border: 1px solid transparent;
}
.tech-category:hover {
background: var(--white);
border-color: var(--primary-orange);
transform: translateX(8px);
}
.tech-badge {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
min-width: 80px;
text-align: center;
white-space: nowrap;
}
.tech-badge.frontend { background: #E3F2FD; color: #1565C0; }
.tech-badge.backend { background: #F3E5F5; color: #7B1FA2; }
.tech-badge.mobile { background: #E8F5E8; color: #2E7D32; }
.tech-badge.ai { background: #FFF3E0; color: #EF6C00; }
.tech-badge.cloud { background: #E0F2F1; color: #00695C; }
.tech-details {
color: var(--gray-700);
font-size: var(--text-base);
font-weight: 500;
flex: 1;
}
.metodologie-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
position: relative;
z-index: 1;
}
.metodologia-item {
padding: var(--space-lg);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
}
.metodologia-item:hover {
border-color: var(--primary-orange);
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.metodologia-item h4 {
font-size: var(--text-lg);
font-weight: 600;
color: var(--gray-900);
margin-bottom: var(--space-sm);
}
.metodologia-item p {
font-size: var(--text-sm);
color: var(--gray-600);
line-height: 1.6;
}
/* === WORKFLOW SECTION - Design ispirato alla foto === */
.modalita-section {
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, #F8F9FA 0%, #F0F0F0 100%);
position: relative;
overflow: hidden;
width: 100vw;
min-width: 100vw;
margin-left: calc(50% - 50vw);
padding: var(--space-4xl) 0;
}
.modalita-section > .container {
background: none !important;
}
.modalita-section .section-header {
text-align: center;
margin-bottom: var(--space-4xl);
}
.modalita-section h3 {
font-size: var(--text-4xl);
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--space-lg);
}
.modalita-section .section-header p {
font-size: var(--text-lg);
color: var(--gray-600);
max-width: 600px;
margin: 0 auto;
}
/* Workflow Wave Path - iOS Glass Effect */
/* Workflow Wave Path - parte sempre ferma */
.workflow-path {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 80px;
transform: translateY(-50%) scaleX(0);
transform-origin: center;
opacity: 0;
overflow: hidden;
/* Animazione preparata ma in pausa */
animation: drawPath 1.6s ease-out forwards;
animation-delay: 0.15s;
animation-play-state: paused;
}
.workflow-path::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
background: var(--gradient-wave);
transform: translateY(-50%);
clip-path: polygon(
0% 20%, 10% 80%, 20% 20%, 30% 80%, 40% 20%, 50% 80%,
60% 20%, 70% 80%, 80% 20%, 90% 80%, 100% 20%, 100% 100%, 0% 100%
);
/* Anche l'onda � pronta ma in pausa */
animation: wave-flow 4s ease-in-out infinite;
animation-play-state: paused;
}
.workflow-path::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(180deg, rgba(198,40,40,.05) 0%, rgba(255,87,34,.03) 50%, transparent 100%);
transform: translateY(-50%);
border-radius: 40px;
filter: blur(8px);
pointer-events: none;
}
/* Quando la sezione � in viewport, fai partire le animazioni */
.modalita-section.in-view .workflow-path {
animation-play-state: running;
}
.modalita-section.in-view .workflow-path::before {
animation-play-state: running;
}
@keyframes drawPath {
0% { opacity: 0; transform: translateY(-50%) scaleX(0); }
100% { opacity: 1; transform: translateY(-50%) scaleX(1); }
}
@keyframes wave-flow {
0%,100% {
clip-path: polygon(
0% 20%, 10% 80%, 20% 20%, 30% 80%, 40% 20%, 50% 80%,
60% 20%, 70% 80%, 80% 20%, 90% 80%, 100% 20%, 100% 100%, 0% 100%
);
}
50% {
clip-path: polygon(
0% 80%, 10% 20%, 20% 80%, 30% 20%, 40% 80%, 50% 20%,
60% 80%, 70% 20%, 80% 80%, 90% 20%, 100% 80%, 100% 100%, 0% 100%
);
}
}
/* Workflow Grid */
.workflow-container {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-2xl);
}
/* Workflow Card - Glass Futuristico */
.workflow-card {
flex: 1;
max-width: 350px;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(25px) saturate(180%);
backdrop-filter: blur(25px) saturate(180%);
border-radius: var(--radius-2xl);
padding: var(--space-2xl);
box-shadow:
0 15px 35px rgba(255, 59, 48, 0.1),
0 5px 15px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
/* Be explicit: some browsers ignore 'all' for backdrop-filter */
transition:
background var(--transition-slow),
border-color var(--transition-slow),
box-shadow var(--transition-slow),
transform var(--transition-slow),
-webkit-backdrop-filter var(--transition-slow),
backdrop-filter var(--transition-slow),
opacity var(--transition-slow);
opacity: 0; /* nascosta inizialmente */
transform: translateY(40px); /* parte dal basso */
}
/* Stato attivo quando scrollo */
.workflow-card.visible {
opacity: 1;
transform: translateY(0);
transition: all 0.8s ease-out;
}
/* Hover border glow */
.workflow-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-2xl);
padding: 2px;
background: var(--gradient-primary);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: subtract;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: subtract;
opacity: 0;
transition: opacity var(--transition-normal);
}
.workflow-card:hover::before {
opacity: 1;
}
/* Hover: trasparente davvero */
.workflow-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.22);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
box-shadow:
0 20px 40px rgba(255, 59, 48, 0.12),
0 10px 24px rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
opacity: 1; /* contenuto sempre visibile */
z-index: 10;
}
/* Glass wave effect on hover */
.workflow-card::after {
content: '';
position: absolute;
bottom: -40px;
left: -20px;
right: -20px;
height: 60px;
background: linear-gradient(
135deg,
rgba(198, 40, 40, 0.08) 0%,
rgba(255, 87, 34, 0.05) 50%,
transparent 100%
);
border-radius: 50%;
opacity: 0;
transform: translateY(20px);
transition: all var(--transition-slow);
filter: blur(15px);
}
.workflow-card:hover::after {
opacity: 1;
transform: translateY(0);
}
/* Workflow Icon */
.workflow-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-xl);
box-shadow: var(--shadow-lg);
transition: transform var(--transition-normal);
}
.workflow-card:hover .workflow-icon {
transform: scale(1.1) rotate(5deg);
}
.workflow-icon svg {
width: 40px;
height: 40px;
color: var(--white);
}
/* Workflow Content */
.workflow-card h4 {
font-size: var(--text-xl);
font-weight: 700;
color: var(--gray-900);
text-align: center;
margin-bottom: var(--space-lg);
}
.workflow-card p {
color: var(--gray-600);
font-size: var(--text-base);
line-height: 1.7;
text-align: center;
margin-bottom: var(--space-lg);
}
.workflow-caption-mobile {
display: none;
}
/* Workflow Features List */
.workflow-features {
list-style: none;
padding: 0;
margin: 0;
}
.workflow-features li {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) 0;
color: var(--gray-700);
font-size: var(--text-sm);
font-weight: 500;
}
.workflow-features li::before {
content: '?';
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--primary-orange);
color: var(--accent-coral);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
/* Connection Line - iniziale */
.workflow-container.workflow-init::before {
content: '';
position: absolute;
top: 50%;
left: 50%; /* parte dal centro */
height: 2px;
background: linear-gradient(90deg, var(--primary-orange), var(--primary-red));
transform: translateY(-50%);
z-index: -1;
opacity: 0;
width: 0; /* nascosta */
transition: all 1s ease-out;
}
/* Connection Line - visibile */
.workflow-container.visible::before {
opacity: 0.3;
width: 50%; /* come prima */
left: 25%; /* centrata */
}
/* Responsive Workflow */
@media (max-width: 767px) {
.workflow-container {
flex-direction: column;
align-items: center;
gap: var(--space-2xl);
padding: 0 var(--space-xl);
}
.workflow-container::before { display: none; }
.workflow-container.workflow-init::before,
.workflow-container.visible::before { display: none !important; }
/* Vertical connector through stacked cards */
.workflow-container::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--primary-orange), var(--primary-red));
opacity: 0.35;
z-index: 0;
}
.workflow-card {
max-width: 520px;
width: 100%;
margin: 0 auto;
z-index: 1; /* keep above connector */
}
.workflow-path { display: none !important; }
/* === FEEDBACK/REFERENCES: Responsive grid === */
.feedback-videos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2.2rem;
justify-items: center;
align-items: stretch;
}
/* Desktop medio: 3 colonne */
@media (max-width: 1200px) {
.feedback-videos { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Tablet: 2 colonne */
@media (max-width: 992px) {
.feedback-videos { grid-template-columns: repeat(2, 1fr) !important; }
.feedback-video-card { max-width: 100% !important; width: 100% !important; }
}
/* Mobile: 1 colonna e card full width */
@media (max-width: 600px) {
.feedback-videos {
grid-template-columns: 1fr !important;
gap: 1.2rem !important;
justify-items: stretch !important;
}
.feedback-video-card { max-width: none !important; width: 100% !important; }
.feedback-video-card video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.feedback-overlay span { font-size: 0.95rem !important; }
}
/* === CHI SIAMO: HERO (refactor) === */
.about-hero {
position: relative;
overflow: hidden;
background: #fff;
}
.about-hero::before {
content: none;
}
.about-hero__content {
position: relative;
z-index: 1;
padding-top: clamp(78px, 9vw, 140px);
padding-bottom: clamp(18px, 3vw, 26px);
}
.about-hero__title {
margin: 0;
font-size: clamp(2.35rem, 4.1vw, 4.05rem);
line-height: 1.14;
letter-spacing: -0.02em;
font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight: 400;
color: rgba(15, 23, 42, 0.92);
max-width: 26ch;
margin-inline: 0;
}
.about-hero__accent {
color: var(--primary-red);
font-weight: 400;
}
.about-hero__meta {
margin-top: clamp(34px, 5vw, 72px);
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
gap: clamp(34px, 8vw, 140px);
align-items: center;
max-width: 1120px;
margin-inline: 0;
}
.about-hero__pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 30px;
border-radius: 999px;
font-size: 0.82rem;
letter-spacing: 0.06em;
font-weight: 600;
color: rgba(255, 59, 48, 0.95);
background: rgba(255, 59, 48, 0.12);
border: 1px solid rgba(255, 59, 48, 0.12);
box-shadow: none;
white-space: nowrap;
}
.about-hero__lead {
margin: 0;
font-size: clamp(1.02rem, 1.18vw, 1.08rem);
line-height: 1.9;
color: rgba(51, 65, 85, 0.9);
max-width: 56ch;
}
.about-hero__photo {
position: relative;
width: 100%;
margin-top: clamp(18px, 3vw, 30px);
height: clamp(240px, 18vw, 380px);
background: #ededee;
transform: translate3d(0, 0, 0);
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.08);
will-change: transform;
}
.about-hero__marquee {
height: 100%;
width: 100%;
overflow: hidden;
}
.about-hero__marquee-track {
display: flex;
width: 200%;
height: 100%;
will-change: transform;
animation: about-hero-marquee 24s linear infinite;
}
.about-hero__marquee-item {
flex: 0 0 50%;
height: 100%;
}
.about-hero__marquee-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
display: block;
transform: scale(1.01);
will-change: transform;
}
@keyframes about-hero-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.about-hero__marquee-track {
animation: none;
transform: translate3d(0, 0, 0);
}
}
.about-hero__photo::before {
content: none;
}
.about-hero__photo::after {
content: none;
}
@media (max-width: 860px) {
.about-hero__meta {
grid-template-columns: 1fr;
gap: 14px;
align-items: start;
}
.about-hero__photo {
height: clamp(280px, 44vh, 420px);
}
.about-hero__marquee-img {
object-position: center 22%;
}
}
/* Ecosistema WAY: evitare troncamenti del titolo */
.hero-ecosystem .section-header h2 {
display: block;
white-space: normal;
word-break: normal;
}
/* Mockup sotto CTA in 'La nostra storia' */
.mockup-under-cta {
margin-top: 24px;
display: flex;
justify-content: center;
}
.mockup-under-cta #desktopMock {
max-width: 480px;
width: 100%;
}
/* Colonna mockup a destra su desktop */
#storia-section .mockup-col {
display: flex;
justify-content: flex-end;
}
@media (max-width: 480px) {
.mockup-under-cta { margin-top: 16px; }
.mockup-under-cta #desktopMock { max-width: 100%; }
}
/* === Responsive: Sezione 'La nostra storia' a colonna su mobile/tablet === */
@media (max-width: 992px) {
#storia-section .two-col {
display: flex !important;
flex-direction: column !important;
gap: var(--space-2xl) !important;
}
#storia-section .content-col {
order: 1;
}
#storia-section .mockup-col {
order: 2;
justify-content: center;
}
#storia-section #desktopMock { max-width: 100% !important; }
}
.workflow-path {
display: none;
}
}
/* (legacy chi-siamo hero responsive removed) */
.servizi-section {
padding: var(--space-4xl) 0;
background: linear-gradient(135deg,
#FAFAFA 0%,
#FFFFFF 30%,
#F8F9FA 70%,
#F5F5F5 100%
);
position: relative;
overflow: hidden;
}
/* Effetti particelle animate di sfondo */
.servizi-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image:
radial-gradient(circle at 20% 20%, rgba(255, 59, 48, 0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),
radial-gradient(circle at 50% 10%, rgba(255, 71, 87, 0.02) 0%, transparent 30%),
radial-gradient(circle at 10% 90%, rgba(255, 59, 48, 0.02) 0%, transparent 30%),
radial-gradient(circle at 90% 30%, rgba(255, 107, 53, 0.03) 0%, transparent 40%);
animation: floatParticles 20s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes floatParticles {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-20px, -30px) rotate(5deg); }
50% { transform: translate(30px, -20px) rotate(-3deg); }
75% { transform: translate(-10px, 20px) rotate(2deg); }
}
.servizi-container {
display: flex;
flex-direction: column;
gap: var(--space-3xl);
}
.servizi-intro {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2xl);
padding: clamp(1.9rem, 3vw, 2.6rem);
border-radius: var(--radius-2xl);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 82, 70, 0.14);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
box-shadow:
0 24px 60px rgba(12, 12, 20, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
position: relative;
z-index: 1;
}
.servizi-intro__content {
flex: 1 1 360px;
max-width: 640px;
display: grid;
gap: var(--space-lg);
}
.servizi-intro__content h2 {
font-size: clamp(2.1rem, 4vw, 2.9rem);
line-height: 1.15;
color: var(--gray-900);
font-weight: 800;
letter-spacing: -0.01em;
}
.servizi-intro__content .lead {
margin: 0;
color: rgba(35, 35, 45, 0.78);
font-size: clamp(1.05rem, 2vw, 1.22rem);
}
.servizi-intro__cta {
align-self: center;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 0.85rem 1.9rem;
border-radius: 999px;
background: linear-gradient(120deg, var(--primary-red), var(--accent-orange));
color: var(--white);
font-weight: 600;
text-decoration: none;
letter-spacing: 0.04em;
box-shadow: 0 18px 36px rgba(255, 82, 70, 0.28);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.servizi-intro__cta::after {
content: '\2192';
font-size: 1.15em;
transition: transform var(--transition-normal);
}
.servizi-intro__cta:hover {
transform: translateY(-4px);
box-shadow: 0 24px 46px rgba(255, 82, 70, 0.34);
}
.servizi-intro__cta:hover::after {
transform: translateX(4px);
}
.servizi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1.8rem, 3vw, 2.4rem);
position: relative;
z-index: 2;
}
.servizi-grid--tiles {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@keyframes shimmer {
0% { transform: translateX(-45%) translateY(-45%) rotate(-18deg); }
100% { transform: translateX(45%) translateY(45%) rotate(-18deg); }
}
.servizio-card {
--servizio-gradient: linear-gradient(150deg, rgba(35, 37, 51, 0.94) 0%, rgba(14, 15, 24, 0.96) 90%);
--servizio-shadow: rgba(24, 28, 46, 0.28);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-lg);
padding: clamp(2rem, 3vw, 2.6rem);
border-radius: var(--radius-2xl);
background: var(--servizio-gradient);
color: var(--white);
min-height: 320px;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 28px 60px rgba(12, 12, 20, 0.18);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transform-style: preserve-3d;
perspective: 1000px;
}
.servizio-card::before {
content: '';
position: absolute;
inset: -40%;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 55%),
radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
opacity: 0;
transform: translate3d(0, 0, 0) scale(0.9);
transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
filter: blur(20px);
}
.servizio-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
transform: translateX(-100%) skewX(-15deg);
transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
}
.servizio-card:hover {
transform: translateY(-20px) scale(1.02) rotateX(2deg);
box-shadow: 0 40px 100px var(--servizio-shadow),
0 0 60px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.servizio-card:hover::before {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1.1);
filter: blur(30px);
animation: pulse-glow 3s ease-in-out infinite;
}
.servizio-card:hover::after {
opacity: 1;
transform: translateX(100%) skewX(-15deg);
}
.servizio-card__header {
display: flex;
flex-direction: column;
gap: var(--space-sm);
position: relative;
z-index: 1;
}
.servizio-card__tag {
align-self: flex-start;
padding: 0.32rem 0.85rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px) saturate(130%);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.servizio-card__header h3 {
margin: 0;
font-size: clamp(1.7rem, 2.5vw, 1.95rem);
font-weight: 800;
letter-spacing: -0.02em;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.servizio-card:hover .servizio-card__header h3 {
transform: translateX(8px);
letter-spacing: 0.01em;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.servizio-card__description {
margin: 0;
color: rgba(255, 255, 255, 0.88);
line-height: 1.6;
font-size: clamp(1rem, 1.8vw, 1.08rem);
position: relative;
z-index: 1;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.05s;
}
.servizio-card:hover .servizio-card__description {
color: rgba(255, 255, 255, 0.98);
transform: translateX(4px);
}
.servizio-card__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.7rem;
position: relative;
z-index: 1;
}
.servizio-card__list li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.servizio-card:hover .servizio-card__list li {
transform: translateX(6px);
color: rgba(255, 255, 255, 0.95);
}
.servizio-card:hover .servizio-card__list li:nth-child(1) {
transition-delay: 0.05s;
}
.servizio-card:hover .servizio-card__list li:nth-child(2) {
transition-delay: 0.1s;
}
.servizio-card:hover .servizio-card__list li:nth-child(3) {
transition-delay: 0.15s;
}
.servizio-card__list li::before {
content: '';
width: 10px;
height: 10px;
margin-top: 0.4rem;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.05) 100%);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
flex-shrink: 0;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.servizio-card:hover .servizio-card__list li::before {
transform: scale(1.3);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3),
0 0 12px rgba(255, 255, 255, 0.4);
}
.servizio-card.clickable {
cursor: pointer;
}
.servizio-card--strategy {
--servizio-gradient: linear-gradient(140deg, rgba(213, 58, 42, 0.95) 0%, rgba(134, 27, 27, 0.92) 100%);
--servizio-shadow: rgba(205, 54, 44, 0.32);
}
.servizio-card--technologies {
--servizio-gradient: linear-gradient(135deg, rgba(58, 97, 177, 0.96) 0%, rgba(24, 43, 122, 0.92) 100%);
--servizio-shadow: rgba(38, 77, 165, 0.32);
}
.servizio-card--innovation {
--servizio-gradient: linear-gradient(135deg, rgba(141, 37, 180, 0.96) 0%, rgba(74, 20, 140, 0.92) 100%);
--servizio-shadow: rgba(117, 42, 168, 0.32);
}
.servizio-card--technologies .servizio-card__tag {
background: rgba(185, 209, 255, 0.22);
color: rgba(226, 236, 255, 0.9);
}
.servizio-card--innovation .servizio-card__tag {
background: rgba(233, 203, 255, 0.22);
color: rgba(248, 237, 255, 0.9);
}
.servizio-card--strategy .servizio-card__tag {
background: rgba(255, 183, 173, 0.22);
color: rgba(255, 235, 232, 0.9);
}
.servizio-card--strategy .servizio-card__list li::before {
background: linear-gradient(135deg, rgba(255, 207, 201, 0.92) 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.servizio-card--technologies .servizio-card__list li::before {
background: linear-gradient(135deg, rgba(210, 227, 255, 0.92) 0%, rgba(255, 255, 255, 0.18) 100%);
box-shadow: 0 0 0 2px rgba(226, 236, 255, 0.22);
}
.servizio-card--innovation .servizio-card__list li::before {
background: linear-gradient(135deg, rgba(236, 211, 255, 0.92) 0%, rgba(255, 255, 255, 0.18) 100%);
box-shadow: 0 0 0 2px rgba(245, 228, 255, 0.22);
}
@media (max-width: 1024px) {
.servizi-intro {
padding: clamp(1.6rem, 4vw, 2.2rem);
}
}
@media (max-width: 900px) {
.servizi-intro {
flex-direction: column;
}
.servizi-intro__cta {
align-self: flex-start;
}
}
@media (max-width: 640px) {
.servizi-grid--tiles {
grid-template-columns: 1fr;
}
.servizio-card {
padding: 1.8rem;
}
.servizio-card:hover {
transform: translateY(-12px) scale(1.01);
}
}
/* === CHI SIAMO PREVIEW === */
.chi-siamo-preview {
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, #F5F6FA 0%, #E8E9F0 100%);
}
.chi-siamo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4xl);
align-items: center;
}
.content-col h2 {
font-size: var(--text-4xl);
font-weight: 700;
margin-bottom: var(--space-xl);
line-height: 1.2;
}
.content-col p {
font-size: var(--text-lg);
color: var(--gray-600);
line-height: 1.8;
margin-bottom: var(--space-lg);
}
.team-preview {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.team-member {
text-align: center;
transition: transform var(--transition-normal);
}
.team-member:hover {
transform: translateY(-8px);
}
.team-member img {
width: 140px;
height: 140px;
border-radius: var(--radius-full);
object-fit: cover;
margin-bottom: var(--space-lg);
border: 4px solid var(--white);
box-shadow: var(--shadow-xl);
}
.member-info h4 {
font-size: var(--text-lg);
font-weight: 600;
color: var(--gray-900);
margin-bottom: var(--space-xs);
}
.member-info span {
font-size: var(--text-base);
color: var(--gray-600);
}
/* === FOOTER CLEAN LAYOUT === */
.site-footer {
background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
color: var(--gray-800);
padding: var(--space-4xl) 0 0;
position: relative;
border-top: 1px solid var(--gray-200);
}
/* Footer Grid Layout */
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4xl);
margin-bottom: var(--space-3xl);
}
/* Footer Section Styles */
.footer-section h4 {
color: var(--gray-900);
font-size: var(--text-2xl);
font-weight: 700;
margin-bottom: var(--space-md);
letter-spacing: 0.5px;
position: relative;
padding-top: var(--space-lg);
}
.footer-section h4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--primary-red);
border-radius: 2px;
}
.footer-subtitle {
color: var(--gray-600);
font-size: var(--text-base);
margin-bottom: var(--space-2xl);
line-height: 1.5;
}
/* Form Styles */
.footer-form {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.footer-form input,
.footer-form textarea {
width: 100%;
padding: var(--space-lg);
background: var(--white);
border: 2px solid var(--gray-300);
border-radius: var(--radius-lg);
color: var(--gray-900);
font-family: inherit;
font-size: var(--text-base);
transition: all var(--transition-normal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.footer-form input::placeholder,
.footer-form textarea::placeholder {
color: var(--gray-500);
}
.footer-form input:focus,
.footer-form textarea:focus {
outline: none;
border-color: var(--primary-red);
background: var(--white);
box-shadow: 0 4px 12px rgba(255, 59, 48, 0.1);
}
.footer-form textarea {
resize: vertical;
min-height: 120px;
}
/* Privacy Check */
.privacy-check {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin: var(--space-md) 0;
}
.privacy-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
margin-top: 2px;
}
.privacy-check label {
color: var(--gray-600);
font-size: var(--text-sm);
line-height: 1.5;
flex: 1;
}
.privacy-link {
color: var(--primary-red);
text-decoration: none;
}
.privacy-link:hover {
text-decoration: underline;
}
/* Submit Button */
.btn-submit {
background: var(--primary-red);
color: var(--white);
padding: var(--space-lg) var(--space-2xl);
border: none;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
align-self: flex-start;
}
.btn-submit:hover {
background: var(--secondary-red);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}
/* Footer Info Section */
.footer-info {
display: flex;
flex-direction: column;
gap: var(--space-3xl);
padding-left: var(--space-2xl);
}
.info-section h4 {
color: var(--gray-900);
font-size: var(--text-lg);
font-weight: 700;
margin-bottom: var(--space-sm);
text-transform: uppercase;
letter-spacing: 0.8px;
position: relative;
padding-top: var(--space-md);
}
.info-section h4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--primary-red);
border-radius: 1px;
}
.info-section p {
color: var(--gray-600);
font-size: var(--text-base);
line-height: 1.6;
margin: var(--space-xs) 0;
font-weight: 500;
}
/* Responsive Footer */
@media (max-width: 767px) {
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.footer-info {
padding-left: 0;
gap: var(--space-xl);
}
}
.footer-bottom {
text-align: center;
padding: var(--space-xl);
border-top: 1px solid var(--gray-300);
background: var(--white);
margin-top: var(--space-2xl);
}
.footer-bottom p {
color: var(--gray-600);
font-size: var(--text-sm);
margin: 0;
letter-spacing: 0.5px;
}
.footer-bottom strong {
color: var(--gray-900);
font-weight: 700;
}
/* === FOOTER SOCIAL LINKS === */
.footer-social {
display: flex;
justify-content: center;
gap: var(--space-lg);
margin: var(--space-lg) 0;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(255, 59, 48, 0.2);
border-radius: 50%;
color: var(--primary-red);
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--primary-red), var(--secondary-red));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 50%;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
border-color: var(--primary-red);
box-shadow: 0 10px 25px rgba(255, 59, 48, 0.3);
}
.social-link:hover::before {
opacity: 1;
}
.social-link:hover i {
color: white;
z-index: 1;
position: relative;
}
/* === MOBILE MENU === */
.nav-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 0;
background: linear-gradient(165deg, #1A1A1A 0%, #212121 25%, #2d1412 60%, #1A1A1A 100%);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
.nav-overlay::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 1400px 800px at 15% 10%, rgba(255, 59, 48, 0.08), transparent 50%),
radial-gradient(ellipse 900px 600px at 85% 85%, rgba(255, 107, 53, 0.06), transparent 55%);
opacity: 0.7;
}
.nav-overlay.active,
.nav-overlay.open {
opacity: 1;
visibility: visible;
}
.overlay-close {
position: fixed;
top: clamp(1.8rem, 5vw, 3rem);
right: clamp(1.8rem, 5vw, 3rem);
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
font-size: 1.6rem;
font-weight: 300;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease, color 0.3s ease;
z-index: 10000;
}
.overlay-close:hover,
.overlay-close:focus-visible {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg) scale(1.08);
color: #fff;
outline: none;
}
.overlay-nav {
position: relative;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: clamp(4.5rem, 10vw, 7rem) clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem);
text-align: left;
transform: translateX(-30px);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay.open .overlay-nav,
.nav-overlay.active .overlay-nav {
transform: translateX(0);
opacity: 1;
}
.overlay-link,
.overlay-accordion {
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(1.1rem, 2.6vw, 1.6rem) 0;
color: var(--white);
font-size: clamp(1.2rem, 2.8vw, 1.6rem);
font-weight: 2000;
letter-spacing: 0.04em;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease;
background-color: transparent;
border: none;
}
.overlay-link.active {
color: #FF3B30;
}
.overlay-accordion {
font-weight: 500;
}
.chev {
font-size: clamp(1rem, 2.5vw, 1.3rem);
font-style: normal;
opacity: 0.8;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
display: inline-block;
line-height: 1;
}
.overlay-accordion.open .chev {
transform: rotate(180deg);
opacity: 1;
}
.overlay-submenu {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0.75rem 0 0.5rem 1.5rem;
border-left: 2px solid rgba(255, 59, 48, 0.3);
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.4s ease, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: -25px;
}
.overlay-submenu.open {
opacity: 1;
margin: 0.5rem 0 1rem 0;
max-height: 600px;
}
.overlay-submenu a {
color: rgba(255, 255, 255, 0.75);
font-family: 'Georgia', 'Times New Roman', serif;
font-size: clamp(1.05rem, 3vw, 1.35rem);
font-weight: 300;
text-decoration: none;
padding: clamp(0.6rem, 2vw, 0.85rem) 0;
border-bottom: 1px solid transparent;
transition: color 0.3s ease, padding-left 0.3s ease, border-bottom-color 0.3s ease;
}
.overlay-submenu a:hover,
.overlay-submenu a:focus-visible {
color: #fff;
padding-left: 0.6rem;
border-bottom-color: rgba(255, 255, 255, 0.15);
outline: none;
}
@media (max-width: 767px) {
.overlay-nav {
padding: clamp(4rem, 12vw, 6rem) clamp(1.5rem, 8vw, 3rem) clamp(2.5rem, 10vw, 4rem);
}
.overlay-close {
top: clamp(1.5rem, 6vw, 2.5rem);
right: clamp(1.5rem, 6vw, 2.5rem);
width: 42px;
height: 42px;
}
}
/* === RESPONSIVE === */
@media (max-width: 767px) {
.menu {
display: none;
}
.burger {
display: flex;
}
.hero-title-large {
font-size: var(--text-5xl);
}
.competenze-grid {
grid-template-columns: 1fr;
}
.chi-siamo-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.modalita-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.servizi-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.metodologie-grid {
grid-template-columns: 1fr;
}
.hero-cta-center {
flex-direction: column;
align-items: center;
}
/* Metodo Way4Tech: mobile layout, testo integrato nelle card */
#competenze .workflow-rows {
gap: 2.5rem !important;
}
#competenze .workflow-row {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
#competenze .workflow-card {
width: 100% !important;
max-width: 100% !important;
}
#competenze .workflow-caption-desktop {
display: none !important;
}
#competenze .workflow-caption-mobile {
display: block;
margin-top: 1rem;
color: #444;
font-style: italic;
font-size: 1.02rem;
line-height: 1.8;
background: rgba(255, 255, 255, 0.96);
border-left: 4px solid #ff3b3b;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(255, 59, 59, 0.07);
padding: 1.1rem 1.1rem 1.1rem 1.4rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-md);
}
.hero-title-large {
font-size: var(--text-4xl);
}
.section-header h2 {
font-size: var(--text-3xl);
}
.competenze-card,
.modalita-card {
padding: var(--space-lg);
}
.nav {
padding: var(--space-sm) var(--space-lg);
}
}
/* === Responsive: section titles split over two lines (black top, red bottom) === */
@media (max-width: 780px) {
/* Only target section headers to avoid affecting hero titles */
.section-header h2 {
line-height: 1.15;
}
.section-header h2 .gradient-text,
.section-header h2 .grad {
display: block; /* push the red gradient to its own line */
margin-top: 6px; /* small spacing between lines */
}
}
/* Override: keep subtitle on one line for modalit� on mobile */
@media (max-width: 780px) {
.modalita-section .section-header h2 .gradient-text,
.modalita-section .section-header h2 .grad {
display: inline;
margin-top: 0;
}
}
/* === FIX: Hero intro centered on chi-siamo === */
.hero.block.center {
text-align: center;
}
.hero.block.center .container,
.hero.block.center .container.narrow {
max-width: 900px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
.hero.block.center h1,
.hero.block.center .lead {
text-align: center;
}
/* Ensure the hero background canvas sits behind the content */
.hero.block.center #cover-bg-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.hero.block.center .container,
.hero.block.center .container.narrow {
position: relative;
z-index: 1;
}
.hero.block.center .hero-cta-center { position: relative; z-index: 1; }
/* === ECOSISTEMA WAY: Orbit/Planets (light theme) === */
.hero-ecosystem {
padding: var(--space-4xl) 0;
position: relative;
overflow: hidden;
}
/* Make sure content sits above section background */
.hero-ecosystem .container,
.hero-ecosystem .ecosystem-content,
.hero-ecosystem .section-header,
.hero-ecosystem .ecosystem-orbit-container {
position: relative;
z-index: 1;
}
/* Section-wide elegant minimal background (non interfering with labels) */
.hero-ecosystem::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(1200px 600px at 10% -10%, rgba(255,59,48,0.06), transparent 60%),
radial-gradient(1000px 500px at 110% 20%, rgba(255,107,53,0.05), transparent 60%),
radial-gradient(900px 450px at 50% 120%, rgba(255,71,87,0.05), transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero-ecosystem::after {
content: '';
position: absolute;
inset: 0;
/* Subtle dotted grid, slightly more pronounced with very light brand red */
background-image: radial-gradient(rgba(255,59,48,0.07) 1.5px, transparent 2.2px);
background-size: 22px 22px;
opacity: 0.65;
pointer-events: none;
z-index: 0;
/* Removed mask for maximum compatibility/visibility */
}
.ecosystem-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3xl);
justify-items: center;
text-align: center;
}
.ecosystem-orbit-container {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: var(--space-xl) auto;
}
/* Orbital decorative background */
/* Rimosse decorazioni legate all'orbita per non coprire label */
.orbit-xl {
position: relative;
width: min(720px, 100%);
height: 380px;
border-radius: var(--radius-xl);
overflow: visible;
}
.orbit-xl .planet {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
font-weight: 800;
letter-spacing: 0.5px;
-webkit-user-select: none;
user-select: none;
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
border: 2px solid transparent;
transition:
background var(--transition-normal),
color var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal),
transform var(--transition-normal),
filter var(--transition-normal),
-webkit-backdrop-filter var(--transition-normal),
backdrop-filter var(--transition-normal);
}
/* Sizes and initial positions (JS will animate) */
.orbit-xl .planet-tech { width: 120px; height: 120px; left: 8%; top: 48%; background: var(--primary-red); box-shadow: 0 0 26px rgba(255,59,48,0.35); }
.orbit-xl .planet-design{ width: 96px; height: 96px; left: 60%; top: 18%; background: linear-gradient(135deg,#3b82f6,#6366f1); box-shadow: 0 0 22px rgba(99,102,241,0.35); }
.orbit-xl .planet-rent { width: 90px; height: 90px; left: 74%; top: 64%; background: linear-gradient(135deg,#16a34a,#22c55e); box-shadow: 0 0 20px rgba(34,197,94,0.35); }
/* Hover inversion: glass background, colored text/border */
.orbit-xl .planet-tech:hover {
background: rgba(255,255,255,0.2);
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
color: var(--primary-red);
border-color: rgba(255,59,48,0.5);
box-shadow: 0 8px 28px rgba(255,59,48,0.25), 0 0 0 1px rgba(255,59,48,0.1) inset;
}
.orbit-xl .planet-design:hover {
background: rgba(255,255,255,0.2);
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
color: #3b82f6;
border-color: rgba(59,130,246,0.5);
box-shadow: 0 8px 28px rgba(59,130,246,0.22), 0 0 0 1px rgba(59,130,246,0.1) inset;
}
.orbit-xl .planet-rent:hover {
background: rgba(255,255,255,0.2);
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
color: #16a34a;
border-color: rgba(34,197,94,0.5);
box-shadow: 0 8px 28px rgba(34,197,94,0.22), 0 0 0 1px rgba(34,197,94,0.1) inset;
}
/* Center hub */
.ecosystem-center {
position: absolute;
left: 50%;
top: 50%;
width: 96px;
height: 96px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-red), var(--accent-orange));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.4rem;
letter-spacing: 2px;
box-shadow: 0 0 32px rgba(255,59,48,0.35);
z-index: 2;
}
/* Pulsing halo around center */
/* Halo centrale leggero mantenuto nella card stessa per non coprire label */
/* Labels */
.planet-label {
display: none;
position: absolute;
left: 50%;
top: -50px;
transform: translateX(-50%);
background: #fff;
color: var(--gray-800);
font-size: 0.9rem;
font-weight: 700;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--gray-300);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal), top var(--transition-normal);
z-index: 5;
}
.planet:hover .planet-label,
.planet:focus .planet-label {
display: block;
opacity: 1;
top: -56px;
}
/* Accent label tones per planet */
.planet-tech .planet-label { color: var(--primary-red); border-color: rgba(255,59,48,0.35); }
.planet-design .planet-label { color: #3b82f6; border-color: rgba(59,130,246,0.35); }
.planet-rent .planet-label { color: #16a34a; border-color: rgba(34,197,94,0.35); }
/* Pause animation on hover (handled by JS positions, we just raise z-index) */
.orbit-xl .planet:hover { z-index: 3; filter: brightness(1.05); }
@media (max-width: 900px) {
.orbit-xl { height: 300px; }
.orbit-xl .planet-tech { width: 90px; height: 90px; }
.orbit-xl .planet-design { width: 72px; height: 72px; }
.orbit-xl .planet-rent { width: 66px; height: 66px; }
.ecosystem-center { width: 72px; height: 72px; font-size: 1.1rem; }
}
@media (max-width: 600px) {
.orbit-xl { height: 240px; }
.orbit-xl .planet-tech { width: 72px; height: 72px; }
.orbit-xl .planet-design { width: 56px; height: 56px; }
.orbit-xl .planet-rent { width: 52px; height: 52px; }
.ecosystem-center { width: 60px; height: 60px; font-size: 1rem; }
}
/* === APPROFONDIMENTI: deep-dive (no card) === */
.deep-dive-section {
padding: var(--space-4xl) 0;
background:
radial-gradient(800px 500px at 10% 0%, rgba(255,59,48,0.04), transparent 60%),
radial-gradient(900px 600px at 100% 30%, rgba(255,107,53,0.03), transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}
.deep-dive-section .section-header { margin-bottom: var(--space-3xl); }
.pill-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
margin-bottom: var(--space-2xl);
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255,59,48,0.35);
color: var(--primary-red);
background: rgba(255,255,255,0.6);
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
font-weight: 600;
font-size: var(--text-sm);
}
.deep-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: start;
}
.list-block {
padding-left: var(--space-xl);
border-left: 4px solid transparent;
border-image: linear-gradient(180deg, var(--primary-red), var(--accent-orange)) 1;
}
.list-block h4 {
font-size: var(--text-2xl);
font-weight: 800;
margin-bottom: var(--space-md);
}
.list-ticked {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.list-ticked li {
position: relative;
padding-left: 28px;
color: var(--gray-700);
font-weight: 500;
}
.list-ticked li::before {
content: '?';
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
background: var(--gradient-primary);
color: #fff;
font-size: 12px;
box-shadow: var(--shadow-md);
}
.muted { color: var(--gray-600); }
.deep-note {
margin-top: var(--space-2xl);
padding: var(--space-lg) var(--space-xl);
border-top: 1px dashed rgba(255,59,48,0.35);
color: var(--gray-700);
}
@media (max-width: 992px) {
.deep-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
}
/* --- WAY4TECH JOURNEY SECTION --- */
.journey-section {
position: relative;
width: 100%;
height: 120vh;
background: var(--gray-50);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: var(--font-primary);
color: var(--primary-black);
}
.journey-container {
width: 90%;
max-width: 1200px;
text-align: center;
}
.journey-header {
margin-bottom: 4rem;
}
.journey-header h2 {
font-size: var(--text-5xl);
font-weight: 700;
margin-bottom: 0.5rem;
}
.journey-header .grad {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.journey-header p {
color: var(--gray-600);
font-size: var(--text-lg);
}
/* Traccia */
.journey-track {
position: relative;
width: 100%;
height: 10px;
background: var(--gray-300);
border-radius: var(--radius-full);
margin: 0 auto;
}
/* Oggetto animato */
.journey-object {
position: absolute;
top: 50%;
left: 0;
width: 40px;
height: 40px;
background: var(--gradient-secondary);
border-radius: var(--radius-full);
box-shadow: 0 0 15px rgba(255, 75, 57, 0.5);
transform: translate(-50%, -50%);
}
/* Punti/fasi */
.journey-point {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25%;
text-align: center;
transition: all var(--transition-normal);
}
.journey-point:nth-child(2) { left: 0%; }
.journey-point:nth-child(3) { left: 25%; }
.journey-point:nth-child(4) { left: 50%; }
.journey-point:nth-child(5) { left: 75%; }
.journey-point .dot {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
margin: 0 auto 1rem auto;
background: var(--gray-400);
transition: background var(--transition-normal), transform var(--transition-normal);
}
.journey-point.active .dot {
background: var(--primary-red);
transform: scale(1.3);
box-shadow: 0 0 15px rgba(255, 59, 48, 0.6);
}
.journey-point h3 {
font-size: var(--text-2xl);
margin-bottom: 0.3rem;
transition: color var(--transition-normal);
}
.journey-point p {
color: var(--gray-600);
font-size: var(--text-base);
opacity: 0;
transition: opacity var(--transition-normal);
}
.journey-point.active h3 {
color: var(--primary-red);
}
.journey-point.active p {
opacity: 1;
}
/* Responsivo */
@media (max-width: 767px) {
.journey-section {
height: auto;
padding: 6rem 0;
}
.journey-track {
height: 400px;
width: 6px;
margin: 0 auto;
}
.journey-object {
left: 50%;
top: 0;
}
.journey-point {
position: relative;
left: 0;
width: 100%;
margin: 4rem 0;
transform: none;
}
.journey-point .dot {
margin-bottom: 0.5rem;
}
}
/* ===============================================
Keyframes per animazioni card competenze
=============================================== */
@keyframes pulse-glow {
0%, 100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1.1);
}
50% {
opacity: 0.85;
transform: translate3d(0, 0, 0) scale(1.15);
}
}
@keyframes shimmer-sweep {
0% {
transform: translateX(-100%) skewX(-15deg);
}
100% {
transform: translateX(100%) skewX(-15deg);
}
}
/* === Homepage: responsive/mobile fallbacks === */
@media (max-width: 1440px) {
body.home .w4t-hero__layout {
grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
gap: clamp(0.8rem, 2.2vw, 1.8rem);
}
body.home .w4t-hero__title {
font-size: clamp(2.45rem, 4.3vw, 3.7rem);
}
body.home .w4t-hero__avatar-shell {
width: min(100%, 410px);
}
}
@media (max-width: 1280px) {
body.home .w4t-hero__inner {
min-height: auto;
}
body.home .w4t-hero__layout {
grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
gap: clamp(0.7rem, 1.8vw, 1.3rem);
}
body.home .w4t-hero__title {
font-size: clamp(2.15rem, 3.65vw, 3.1rem);
}
body.home .w4t-hero__avatar-shell {
width: min(100%, 360px);
}
body.home .w4t-client-logo {
width: clamp(110px, 18vw, 150px);
height: clamp(30px, 4.5vw, 40px);
}
body.home .w4t-projects__name {
font-size: clamp(2rem, 3vw, 2.2rem);
}
body.home .w4t-projects__description,
body.home .w4t-projects__skills {
font-size: clamp(1rem, 1.9vw, 1.1rem);
}
}
@media (max-width: 1024px) {
body.home .w4t-hero__layout {
align-items: start;
}
body.home .w4t-hero__content {
display: block;
}
body.home .w4t-hero {
--hero-bottom-pad: clamp(1.5rem, 5vw, 2.75rem);
}
body.home .w4t-hero__inner {
gap: clamp(0.6rem, 2vh, 1.4rem) !important;
}
body.home .w4t-hero__layout {
grid-template-columns: 1fr;
}
body.home .w4t-hero__title {
width: 100%;
max-width: none;
margin-left: 0 !important;
}
body.home .w4t-hero__media {
justify-content: center;
align-self: start;
padding-top: 0;
transform: none;
}
body.home .w4t-hero__avatar-shell {
width: min(100%, 420px);
margin-inline: auto;
}
body.home .w4t-client-marquee {
margin-top: clamp(-8px, 0.3vh, 6px) !important;
margin-bottom: clamp(14px, 3vh, 28px);
}
body.home .w4t-client-marquee__group {
gap: clamp(10px, 2vw, 16px);
padding-right: clamp(10px, 2vw, 16px);
}
body.home .servizi-grid--tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home .servizio-card {
min-height: 280px;
}
body.home .innovation-motor {
min-height: auto;
}
}
@media (max-width: 767px) {
body.home .w4t-hero__inner {
min-height: auto;
justify-content: flex-start;
}
body.home .w4t-hero__title {
font-size: clamp(1.8rem, 4vw, 2.7rem);
line-height: 1.15;
position: relative;
left: auto;
right: auto;
text-align: left;
max-width: none;
top: auto;
margin-top: 0;
margin-bottom: 0 !important;
}
body.home .w4t-hero__media {
justify-content: center;
padding-top: 0;
}
body.home .w4t-hero__avatar-shell {
width: 100%;
max-width: 380px;
aspect-ratio: 1080 / 1920;
border-radius: 22px;
margin-inline: auto;
}
.w4t-hero__avatar-toggle {
top: 10px;
right: 10px;
height: 36px;
padding: 0 11px;
font-size: 0.76rem;
}
body.home .w4t-client-marquee {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
margin-top: clamp(18px, 3.5vh, 36px) !important;
margin-bottom: clamp(6px, 1.4vh, 14px);
}
body.home .w4t-client-logo {
width: clamp(96px, 26vw, 140px);
height: clamp(28px, 5vw, 36px);
}
body.home .innovation-motor__header {
margin-bottom: clamp(28px, 5vw, 42px);
}
body.home .innovation-motor__item {
align-items: flex-start;
text-align: left;
}
body.home .innovation-motor__icon {
margin-bottom: 12px;
}
body.home .w4t-projects__intro {
padding-left: var(--home-gutter, var(--space-lg));
padding-right: var(--home-gutter, var(--space-lg));
}
body.home .w4t-projects__meta--center {
padding: clamp(16px, 5vw, 26px);
}
}
@media (max-width: 480px) {
body.home .w4t-hero__title {
font-size: clamp(1.55rem, 7.2vw, 2.1rem);
max-width: none;
margin-top: 0;
}
body.home .w4t-hero__avatar-shell {
max-width: 332px;
--avatar-zoom: 1.02;
}
.w4t-hero__media:fullscreen .w4t-hero__avatar-shell,
.w4t-hero__media:-webkit-full-screen .w4t-hero__avatar-shell {
height: calc(100vh - 16px);
width: min(calc((100vh - 16px) * 1080 / 1920), calc(100vw - 16px)) !important;
max-height: calc(100vh - 16px);
border-radius: 20px;
}
.w4t-hero__media:fullscreen .w4t-hero__avatar-toggle,
.w4t-hero__media:-webkit-full-screen .w4t-hero__avatar-toggle {
top: 10px;
right: 10px;
}
body.home .w4t-client-marquee__group {
gap: 10px;
}
body.home .w4t-client-marquee {
top: auto;
bottom: auto;
margin-top: clamp(14px, 2.8vh, 28px) !important;
}
body.home .servizi-grid--tiles {
grid-template-columns: 1fr;
}
body.home .servizio-card {
padding: 1.5rem;
min-height: 250px;
}
body.home .servizio-card__list {
gap: 0.5rem;
}
body.home .w4t-projects__name {
font-size: clamp(1.6rem, 7vw, 2rem);
}
body.home .w4t-projects__description,
body.home .w4t-projects__skills {
font-size: clamp(0.95rem, 4.2vw, 1.05rem);
}
}
@media (max-width: 860px) {
body.home .container {
padding-left: clamp(20px, 4vw, 46px);
padding-right: clamp(20px, 4vw, 46px);
}
body.home .w4t-projects.w4t-projects--static {
min-height: auto;
}
body.home .w4t-projects--static .w4t-projects__pin {
position: relative;
height: auto;
overflow: visible;
}
body.home .w4t-projects--static .w4t-projects__intro {
position: relative;
height: auto;
padding-top: clamp(64px, 10vw, 96px);
padding-bottom: clamp(24px, 5vw, 42px);
}
body.home .w4t-projects--static .w4t-projects__slides {
position: relative;
top: auto;
height: auto;
pointer-events: auto;
padding: 0 clamp(12px, 3.4vw, 18px) clamp(54px, 10vw, 86px);
}
body.home .w4t-projects--static .w4t-projects__track {
position: relative;
inset: auto;
height: auto;
display: grid;
gap: 18px;
}
body.home .w4t-projects--static .w4t-projects__slide {
position: relative;
inset: auto;
height: auto;
min-height: 54svh;
transform: none !important;
border-radius: 22px;
}
body.home .w4t-projects--static .w4t-projects__image {
padding-right: 0;
}
body.home .w4t-projects--static .w4t-projects__meta {
opacity: 1;
transform: none;
}
body.home .w4t-collage.w4t-collage--static {
min-height: auto;
}
body.home .w4t-collage--static .w4t-collage__pin {
position: relative;
height: auto;
overflow: visible;
}
body.home .w4t-collage--static .w4t-collage__photos {
overflow: visible;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
body.home .w4t-collage--static .w4t-collage__slide {
position: relative;
inset: auto;
transform: none !important;
border-radius: 18px;
overflow: hidden;
pointer-events: auto;
aspect-ratio: 4 / 3;
}
body.home .w4t-collage--static .w4t-collage__slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
}
@media (max-width: 520px) {
body.home .w4t-collage--static .w4t-collage__photos {
grid-template-columns: 1fr;
}
}
/* === Ufficio Remoto (project viewer) === */
.w4t-ur {
--ur-accent: #e3363f;
--ur-accent2: #ff6b53;
position: relative;
margin: 0 auto;
padding: clamp(10px, 1.8vw, 18px) 0 clamp(56px, 8vw, 92px);
isolation: isolate;
}
.w4t-ur::before {
content: none;
}
.w4t-ur__kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.72);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(6px);
}
.w4t-ur__intro {
text-align: center;
margin: 0 auto clamp(28px, 5vw, 46px);
max-width: 78ch;
}
.w4t-ur .w4t-ur__title {
margin: 14px 0 10px;
font-weight: 900;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.02;
font-size: clamp(2.3rem, 5.6vw, 3.7rem);
}
.w4t-ur .w4t-ur__title span {
background: linear-gradient(135deg, var(--ur-accent), var(--ur-accent2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.w4t-ur .w4t-ur__lead {
margin: 0 0 12px;
font-size: clamp(1.1rem, 1.7vw, 1.25rem);
color: rgba(255, 255, 255, 0.86);
text-wrap: balance;
}
.w4t-ur .w4t-ur__lead2 {
margin: 0 auto;
color: rgba(255, 255, 255, 0.74);
line-height: 1.75;
max-width: 74ch;
}
.w4t-ur__mosaic {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(10px, 2vw, 16px);
margin: clamp(26px, 4.6vw, 38px) 0 clamp(44px, 7vw, 72px);
}
.w4t-ur__shot {
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
transition: transform 220ms ease, filter 220ms ease;
will-change: transform;
}
.w4t-ur__shot:hover {
transform: translate3d(0, var(--ur-parallax-y, 0px), 0) scale(1.015);
filter: saturate(1.05);
}
.w4t-ur__shot::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(540px 240px at 50% 18%, rgba(255, 255, 255, 0.16), transparent 62%);
opacity: 0.7;
pointer-events: none;
}
.w4t-ur__shot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.w4t-ur__shot--wide {
grid-column: 1 / span 7;
aspect-ratio: 16 / 9;
}
.w4t-ur__shot--tall {
grid-column: 8 / span 5;
grid-row: 1 / span 2;
aspect-ratio: 3 / 4;
}
.w4t-ur__shot--small {
grid-column: 1 / span 7;
aspect-ratio: 7 / 4;
}
.w4t-ur__block {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(16px, 3vw, 28px);
align-items: center;
margin: clamp(28px, 5vw, 48px) 0;
}
.w4t-ur__block--reverse {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.w4t-ur__block--reverse .w4t-ur__copy {
order: 2;
}
.w4t-ur .w4t-ur__h {
margin: 0 0 10px;
font-size: 1.2rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
}
.w4t-ur .w4t-ur__h--center {
text-align: center;
margin-bottom: 16px;
}
.w4t-ur .w4t-ur__p {
margin: 0;
color: rgba(255, 255, 255, 0.76);
line-height: 1.75;
max-width: 74ch;
}
.w4t-ur .w4t-ur__p + .w4t-ur__p {
margin-top: clamp(12px, 1.6vw, 18px);
}
.w4t-ur__hl {
background: linear-gradient(135deg, rgba(227, 54, 63, 0.22), rgba(255, 107, 83, 0.2));
padding: 0 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.w4t-ur__media {
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
will-change: transform;
}
.w4t-ur__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.w4t-ur__media--stack {
position: relative;
min-height: clamp(240px, 36vw, 380px);
}
.w4t-ur__media--stack .w4t-ur__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.w4t-ur__media--stack .w4t-ur__img--back {
transform: scale(1.06);
filter: saturate(1.05) contrast(1.02);
opacity: 0.42;
}
.w4t-ur__tri {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 2.4vw, 18px);
margin: clamp(34px, 6vw, 58px) 0;
}
.w4t-ur__tile {
position: relative;
border-radius: 22px;
padding: 18px 18px 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
will-change: transform;
overflow: hidden;
}
.w4t-ur__tile::before {
content: '';
position: absolute;
inset: -60px -40px auto -60px;
height: 180px;
background: radial-gradient(260px 150px at 30% 30%, rgba(255, 255, 255, 0.08), transparent 60%);
pointer-events: none;
}
.w4t-ur__tile-icon {
width: 62px;
height: 62px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.14);
margin-bottom: 12px;
}
.w4t-ur__tile-icon img {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.38));
}
.w4t-ur__access {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(14px, 2.8vw, 24px);
align-items: center;
margin: clamp(34px, 6vw, 60px) 0;
}
.w4t-ur__access-media {
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
will-change: transform;
}
.w4t-ur__access-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.w4t-ur__steps {
margin: clamp(40px, 7vw, 76px) 0;
}
.w4t-ur__steps-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 2.5vw, 18px);
}
.w4t-ur__step {
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
will-change: transform;
}
.w4t-ur__step img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: saturate(1.02) contrast(1.02);
}
.w4t-ur__step figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 14px 14px 16px;
color: rgba(255, 255, 255, 0.88);
line-height: 1.55;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
}
.w4t-ur__step figcaption span {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(0, 0, 0, 0.22);
margin-bottom: 8px;
}
.w4t-ur__app {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(14px, 3vw, 26px);
align-items: center;
margin: clamp(34px, 6.4vw, 66px) 0;
}
.w4t-ur__phones {
position: relative;
min-height: clamp(260px, 44vw, 420px);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
will-change: transform;
}
.w4t-ur__phone {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.45));
}
.w4t-ur__phone--back {
transform: rotate(-6deg) translateX(-8%);
opacity: 0.62;
}
.w4t-ur__phone--front {
transform: rotate(5deg) translateX(8%);
}
.w4t-ur__video {
margin: clamp(34px, 6.4vw, 66px) 0 clamp(40px, 7vw, 80px);
}
.w4t-ur__video-stage {
position: relative;
padding: clamp(14px, 2.6vw, 18px);
transform: translate3d(0, var(--ur-parallax-y, 0px), 0);
will-change: transform;
}
.w4t-ur__video-ghost {
position: absolute;
inset: auto;
width: min(44vw, 420px);
height: auto;
opacity: 0.22;
filter: saturate(1.05) drop-shadow(0 28px 80px rgba(0, 0, 0, 0.55));
pointer-events: none;
}
.w4t-ur__video-ghost--left {
left: clamp(-40px, -6vw, -20px);
bottom: clamp(-120px, -12vw, -60px);
transform: rotate(-10deg);
}
.w4t-ur__video-ghost--right {
right: clamp(-40px, -6vw, -20px);
top: clamp(-140px, -14vw, -70px);
transform: rotate(12deg);
}
.w4t-ur__video-phone {
position: relative;
margin: 0 auto;
width: min(380px, 86vw);
aspect-ratio: 9 / 19.5;
border-radius: 34px;
overflow: hidden;
background: #fff;
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}
.w4t-ur--welfare {
--w4t-welfare-rot-scale: 0.7;
--w4t-welfare-phone-w: 380px;
--w4t-welfare-phone-h: 823px;
}
.w4t-ur--welfare .w4t-ur__video-phone {
transform: rotate(0deg) scale(1);
transform-origin: center;
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.w4t-ur--welfare .w4t-ur__video.is-revealed .w4t-ur__video-phone {
transform: rotate(90deg) scale(var(--w4t-welfare-rot-scale, 0.7));
}
.w4t-ur--welfare .w4t-ur__video-el {
transform: none;
}
.w4t-ur--welfare .w4t-ur__video.is-revealed .w4t-ur__video-el {
inset: auto;
top: 50%;
left: 50%;
width: var(--w4t-welfare-phone-h, 823px);
height: var(--w4t-welfare-phone-w, 380px);
transform: translate(-50%, -50%) rotate(-90deg);
object-fit: cover;
}
.w4t-ur__video-el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
/* reveal (opt-in via JS) */
.w4t-ur[data-fx='1'] .w4t-ur-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 560ms ease, transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
.w4t-ur[data-fx='1'] .w4t-ur-reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 980px) {
.w4t-ur__tri {
grid-template-columns: 1fr;
}
.w4t-ur__block,
.w4t-ur__block--reverse,
.w4t-ur__access,
.w4t-ur__app {
grid-template-columns: 1fr;
}
.w4t-ur__block--reverse .w4t-ur__copy {
order: 0;
}
.w4t-ur__shot--wide,
.w4t-ur__shot--small {
grid-column: 1 / -1;
}
.w4t-ur__shot--tall {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 16 / 10;
}
.w4t-ur__steps-grid {
grid-template-columns: 1fr;
}
.w4t-ur__video-ghost {
opacity: 0.18;
}
}
/* Text contrast when Ufficio Remoto background is light */
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__kicker {
color: rgba(12, 14, 20, 0.6);
border-color: rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.55);
}
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__lead,
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__lead2,
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__p {
color: rgba(12, 14, 20, 0.76);
}
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__h {
color: rgba(12, 14, 20, 0.9);
}
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__hl {
border-color: rgba(0, 0, 0, 0.08);
}
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__tile,
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__step,
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__media,
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__access-media,
.w4t-project-viewer.w4t-ur-bg-light .w4t-ur .w4t-ur__shot {
border-color: rgba(0, 0, 0, 0.12);
}
/* Homepage hero full-width text layout (no side media column). */
body.home .w4t-hero__layout.w4t-hero__layout--full {
grid-template-columns: minmax(0, 1fr) !important;
padding-top: clamp(28px, 7vh, 110px);
}
body.home .w4t-hero__layout.w4t-hero__layout--full .w4t-hero__title {
margin-top: 0 !important;
}
@media (min-width: 1025px) {
body.home .w4t-hero__layout.w4t-hero__layout--full .w4t-hero__title {
font-size: clamp(3.1rem, 5.8vw, 4.9rem) !important;
line-height: 1.14;
}
}
@media (max-width: 1024px) {
body.home .w4t-hero__layout.w4t-hero__layout--full {
padding-top: 0;
}
}