/* ========================================================== RESPONSIVE OVERRIDES — global, loaded on every page Applied last so it wins over per-page CSS files. ========================================================== */ /* --- Safety net: no horizontal overflow anywhere --- Use `overflow-x: clip` (not `hidden`) so we don't create a scroll container on / — otherwise `position: sticky` sections (e.g. the About page orbit) stop sticking to the viewport. */ html, body { max-width: 100vw; } html { overflow-x: clip; } body { overflow-x: clip !important; overflow-y: visible !important; } img, video, iframe, svg { max-width: 100%; } * { min-width: 0; } /* EU flag in footer: don't let flex-shrink squash it into a sliver. */ .eu-flag { flex-shrink: 0 !important; height: 56px !important; width: auto !important; max-width: none !important; object-fit: contain; } .eu-founding { gap: 18px !important; } /* ========================================================== NAVBAR ========================================================== */ /* Larger comfortable tap area for the hamburger */ .menu-toggle { padding: 10px; margin: -10px; border-radius: 12px; } /* Desktop navbar: never wrap, and keep the pill compact on every width. */ @media (min-width: 1025px) { .liquid-glass-nav { flex-wrap: nowrap !important; } .navbar-container { padding: 16px 32px !important; } .liquid-glass-nav { padding: 8px 40px !important; } .nav-item { padding: 8px 22px !important; font-size: 17px !important; } .navbar-inner .logo { height: 78px !important; max-width: 270px !important; } } @media (min-width: 1025px) and (max-width: 1400px) { .navbar-container { padding: 14px 24px !important; } .liquid-glass-nav { padding: 7px 20px !important; gap: 6px !important; } .nav-item { font-size: 14px !important; padding: 7px 14px !important; } .navbar-inner .logo { height: 70px !important; max-width: 235px !important; } } @media (min-width: 1025px) and (max-width: 1180px) { .nav-item { font-size: 13px !important; padding: 6px 10px !important; } .liquid-glass-nav { padding: 6px 12px !important; } .navbar-inner .logo { height: 64px !important; max-width: 215px !important; } } /* Tablet + small desktop: use the mobile menu up to 1024px so the liquid-glass nav doesn't get squeezed. */ @media (max-width: 1024px) { .navbar-container { padding: 16px 20px !important; } .navbar-inner { justify-content: space-between !important; position: relative; } .navbar-logo-wrapper { flex: 0 1 auto !important; justify-content: flex-start !important; } .navbar-spacer-right { display: none !important; } .navbar-inner .logo { height: 68px !important; max-width: 230px !important; } .menu-toggle { display: flex !important; position: relative !important; right: auto !important; top: auto !important; transform: none !important; z-index: 1101; } .liquid-glass-nav { display: none; flex-direction: column; position: absolute; top: calc(100% + 10px); left: 16px; right: 16px; width: auto !important; max-width: none !important; background: rgba(10, 8, 22, 0.96) !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 18px !important; gap: 6px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .liquid-glass-nav.open { display: flex !important; } .nav-glow-bg { display: none !important; } .nav-item { width: 100% !important; max-width: 100% !important; text-align: center !important; padding: 14px 16px !important; font-size: 16px !important; border-radius: 14px !important; } .nav-item:hover:not(.active) { background: rgba(255,255,255,0.05); } /* Kill the "assorbita" logo hint on touch layouts */ .navbar-container.nav-collapsed .navbar-logo-wrapper { cursor: default; } .navbar-container.nav-collapsed .navbar-logo-wrapper .logo { filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5)) !important; transform: none !important; } .navbar-logo-wrapper::after, .navbar-logo-wrapper::before { display: none !important; } .navbar-container.nav-collapsed .liquid-glass-nav { opacity: 1 !important; transform: none !important; } } @media (max-width: 480px) { .navbar-container { padding: 12px 16px !important; } .navbar-inner .logo { height: 58px !important; max-width: 195px !important; } } /* ========================================================== CASE STUDY HERO — universal responsive rules ========================================================== */ @media (max-width: 1024px) { .cs-hero { min-height: auto !important; } .cs-hero-content { flex-direction: column !important; align-items: stretch !important; padding: 130px 20px 50px !important; gap: 28px !important; } .cs-hero-text { max-width: 100% !important; } .cs-hero-text h1 { font-size: clamp(28px, 6vw, 44px) !important; } .cs-hero-subtitle { font-size: 17px !important; } .cs-hero-desc { font-size: 16px !important; line-height: 1.6 !important; } .cs-info-panel { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 24px !important; box-sizing: border-box; } } /* ========================================================== COMMON SECTIONS — process / formats / cta / footer ========================================================== */ @media (max-width: 1024px) { .cs-process, .cs-formats, .cs-cta-section { padding-left: 20px !important; padding-right: 20px !important; } .cs-process-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .cs-process .cs-title, .cs-cta-section .cs-title { font-size: clamp(24px, 5vw, 36px) !important; } .cs-formats-head { flex-direction: column; align-items: flex-start; gap: 16px; } .cs-formats-title { font-size: clamp(22px, 4.5vw, 30px) !important; } .cs-formats-track { grid-auto-columns: calc((100% - 16px) / 2) !important; gap: 16px !important; } } @media (max-width: 640px) { .cs-formats-track { grid-auto-columns: 82% !important; } .btn-scopri { padding: 14px 32px !important; font-size: 17px !important; } } /* Home hero title fluid sizing */ @media (max-width: 1024px) { .hero-title { margin-top: 100px !important; margin-bottom: 2px !important; } .hero-text { font-size: clamp(15px, 2.5vw, 19px) !important; } } @media (max-width: 576px) { .hero-title { margin-top: 90px !important; } } /* ========================================================== FOOTER ========================================================== */ @media (max-width: 1024px) { .main-footer-fullwidth { padding: 60px 20px 40px !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .footer-bottom { flex-direction: column; text-align: center; gap: 18px; } .eu-founding { flex-direction: column-reverse; text-align: center; max-width: 100% !important; } } /* ========================================================== Long words / URLs must break instead of stretching the page ========================================================== */ p, li, a, h1, h2, h3, h4, h5 { overflow-wrap: anywhere; word-wrap: break-word; } /* Reduce heavy fixed paddings on generic wrappers when the viewport is small */ @media (max-width: 640px) { section, .section, .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } } /* ========================================================== FLUID + COMPACT TYPOGRAPHY (global, all pages) Uses clamp() so text scales smoothly from mobile to desktop while being ~10-15% smaller than the original desktop values. ========================================================== */ /* Base body sizing — slightly compact + fluid */ body { font-size: clamp(14px, 0.55vw + 12px, 16px) !important; line-height: 1.55; } /* Native headings fallback (some sections use plain h1/h2/h3) */ body h1 { font-size: clamp(28px, 3.2vw + 8px, 46px) !important; line-height: 1.15; } body h2 { font-size: clamp(24px, 2.4vw + 8px, 38px) !important; line-height: 1.2; } body h3 { font-size: clamp(20px, 1.6vw + 8px, 28px) !important; line-height: 1.25; } body h4 { font-size: clamp(17px, 1.2vw + 8px, 22px) !important; line-height: 1.3; } /* Hero — home title: same size as the strategy-intro section titles */ .hero-title { font-size: clamp(28px, 3.6vw + 8px, 50px) !important; line-height: 1.15 !important; margin-top: 0 !important; margin-bottom: 0 !important; letter-spacing: -0.01em !important; text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; max-width: 720px !important; } .hero-text, .hero-subtitle { font-size: clamp(15px, 0.9vw + 10px, 20px) !important; line-height: 1.5 !important; } /* Desktop: keep hero text aligned with strategy section sizing */ @media (min-width: 1025px) { .hero-title { font-size: clamp(32px, 3.6vw + 8px, 50px) !important; max-width: 720px !important; } .hero-subtitle { font-size: clamp(15px, 0.9vw + 10px, 20px) !important; } .hero-content { padding-left: 40px !important; padding-bottom: 10px !important; justify-content: flex-end !important; transform: translateY(20px) !important; } } /* Tablet / mobile: sposta la scritta hero più in basso */ @media (max-width: 1024px) { .hero-content { padding-bottom: 0px !important; justify-content: flex-end !important; transform: translateY(12px) !important; } } /* Hero — case studies */ .cs-hero-title { font-size: clamp(30px, 4.8vw + 4px, 72px) !important; line-height: 1.08 !important; } .cs-hero-subtitle { font-size: clamp(14px, 0.8vw + 10px, 20px) !important; line-height: 1.5 !important; } /* Section titles (gradient headers ~52-54px in the original) */ .servizi-title, .storie-title, .contatti-title, .strategy-title, .section-title, .page-title { font-size: clamp(28px, 3.6vw + 8px, 46px) !important; line-height: 1.15 !important; margin-bottom: clamp(28px, 3vw, 60px) !important; } .strategy-subtitle, .section-subtitle { font-size: clamp(15px, 0.9vw + 10px, 20px) !important; line-height: 1.5 !important; } /* Cards & body copy inside sections */ .card-body-text, .strategy-card-label, .footer-col p, .footer-col a { font-size: clamp(13px, 0.4vw + 11px, 15px) !important; line-height: 1.5 !important; } .strategy-card-number { font-size: clamp(28px, 2.4vw + 10px, 44px) !important; } .step-badge { font-size: clamp(13px, 0.4vw + 11px, 16px) !important; } /* Buttons */ .btn-scopri, .btn-invia-huge, .cta-btn, button.cta, .button-primary { font-size: clamp(14px, 0.5vw + 12px, 17px) !important; padding: clamp(10px, 0.6vw + 8px, 16px) clamp(20px, 1.6vw + 12px, 36px) !important; } /* Section paddings — a bit tighter, fluid */ .servizi-sezione, .contatti-sezione, .storie-sezione, .strategy-intro, .steps-timeline-section { padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; margin-top: clamp(60px, 8vw, 140px) !important; margin-bottom: clamp(40px, 6vw, 100px) !important; } /* Form labels */ .company-info-label { font-size: clamp(20px, 1.8vw + 10px, 32px) !important; } .checkbox-label { font-size: clamp(12px, 0.3vw + 11px, 14px) !important; } /* Prevent oversized inline paragraphs from bleeding beyond content */ p { max-width: 100%; overflow-wrap: break-word; } /* ========================================================== HOME — tighter spacing between sections ========================================================== */ .strategy-intro { padding-top: 85px !important; padding-bottom: 65px !important; margin-top: 0 !important; } .steps-timeline-section { padding-top: 65px !important; padding-bottom: 65px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .timeline-row { margin-bottom: 95px !important; } .timeline-row:last-child { margin-bottom: 0 !important; } .storie-sezione { padding-top: 75px !important; padding-bottom: 95px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .servizi-sezione { margin-top: 105px !important; margin-bottom: 55px !important; } .contatti-sezione { margin-top: 55px !important; margin-bottom: 100px !important; } .main-footer-fullwidth { padding-top: 60px !important; padding-bottom: 45px !important; } /* Logo pulito: il contrasto è già incorporato nei colori del marchio. */ .hero-logo-shatter { filter: none; } /* ========================================================== HOME — riduci spazi neri eccessivi su mobile ========================================================== */ @media (max-width: 1024px) { /* Accorcia l’area di scroll dell’hero: meno spazio nero/video prima che arrivi la sezione successiva. */ .hero-scrub-wrap { height: 155vh !important; } .hero-section { height: 85vh !important; height: 85dvh !important; min-height: 520px !important; } .hero-content { padding: 120px 20px 30px !important; justify-content: flex-end !important; transform: none !important; } /* Compatta le sezioni sotto l’hero */ .strategy-intro { padding-top: 50px !important; padding-bottom: 40px !important; } .steps-timeline-section { padding-top: 40px !important; padding-bottom: 40px !important; } .timeline-row { margin-bottom: 60px !important; } .storie-sezione { padding-top: 50px !important; padding-bottom: 50px !important; } .servizi-sezione { margin-top: 60px !important; margin-bottom: 30px !important; } .contatti-sezione { margin-top: 30px !important; margin-bottom: 60px !important; } } @media (max-width: 576px) { .hero-scrub-wrap { height: 145vh !important; } .hero-section { height: 80vh !important; height: 80dvh !important; min-height: 480px !important; } .hero-content { padding-bottom: 20px !important; } } /* ========================================================== HOME — ripristina carosello "Storie di successo" come originale (solo desktop; su tablet/mobile lasciamo che Home.css gestisca) ========================================================== */ @media (min-width: 1025px) { .storie-sezione { padding: 100px 0 140px 0 !important; } .storie-title { font-size: 54px !important; margin-bottom: 60px !important; } .cinema-container { height: 440px !important; } .brand-card-item { width: 700px !important; height: 380px !important; } .brand-card-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .cinema-silhouette img { height: 240px !important; width: auto !important; } } /* Mobile: carosello "Storie di successo" a piena larghezza, card grandi */ @media (max-width: 1024px) { .storie-sezione { overflow-x: clip !important; padding-left: 0 !important; padding-right: 0 !important; } .storie-sezione::before, .storie-sezione::after { display: none !important; } .cinema-overlay { display: none !important; } .cinema-container { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; height: auto !important; } .carousel-viewport { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; overflow: hidden !important; } .brand-card-item { width: 92vw !important; height: auto !important; aspect-ratio: 16 / 10 !important; max-width: 92vw !important; } .brand-card-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .cinema-silhouette { display: none !important; } } /* Hide the "back to top" button when the footer is in view so it doesn't overlap the EU flag / footer content. Toggled by a global observer in __root. */ #scroll-to-top.near-footer { opacity: 0 !important; pointer-events: none !important; transform: translateY(16px) scale(0.9) !important; } /* ========================================================== STORIE DI SUCCESSO page — mobile: bigger cards, no black side borders ========================================================== */ @media (max-width: 640px) { .storie-page .reel-container { height: 120vh !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .storie-page .reel-stage { width: 100% !important; max-width: 100% !important; overflow: hidden !important; container-type: inline-size; } .storie-page .reel-glow, .storie-page .reel-watermark { display: none !important; } .storie-page .rcard { width: 100cqw !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin-top: calc(-1 * 100cqw * 9 / 16 / 2) !important; margin-left: -50cqw !important; } .storie-page .rcard .rname { font-size: clamp(22px, 6vw, 32px) !important; } .storie-page .rcard-overlay { padding: 22px 24px !important; } .storie-page .rcard .rdesc { font-size: clamp(14px, 3.5vw, 18px) !important; } } /* ========================================================== ABOUT US — responsive orbit overrides (logo untouched) ========================================================== */ /* Remove the inner inset highlight/shadow from the glass cards on every viewport. */ .about-page .orbit-card { box-shadow: 0 30px 70px rgba(0,0,0,.5) !important; } /* Shrink the headline so it doesn't overlap orbiting cards. */ .about-page .orbit-headline { max-width: min(300px, 32vw) !important; } .about-page .orbit-eyebrow { font-size: 11px !important; margin-bottom: 4px !important; } .about-page .orbit-title { font-size: clamp(14px, 1.1vw + 6px, 20px) !important; line-height: 1.2 !important; margin-bottom: 6px !important; } .about-page .orbit-sub { font-size: clamp(11px, 0.6vw + 6px, 13px) !important; line-height: 1.4 !important; } @media (max-width: 768px) { .about-page .orbit-headline { max-width: 55vw !important; top: 16px !important; right: 16px !important; } .about-page .orbit-title { font-size: 14px !important; } .about-page .orbit-sub { font-size: 11px !important; } .about-page .orbit-eyebrow { font-size: 10px !important; } } /* ---------------------------------------------------------- Orbit cards: one coherent geometry + type scale. The ring is only scaled per breakpoint, so typography stays consistent (no font jumps) and card height always matches the content, avoiding clipped text. ---------------------------------------------------------- */ .about-page .orbit-item { width: var(--orbit-card-w, 250px) !important; margin: calc(var(--orbit-card-h, 320px) / -2) 0 0 calc(var(--orbit-card-w, 250px) / -2) !important; } .about-page .orbit-card { height: var(--orbit-card-h, 320px) !important; padding: var(--orbit-card-pad, 20px) !important; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 22px !important; overflow: hidden !important; } /* Consistent internal typography across every viewport */ .about-page .orbit-card-intro { justify-content: center !important; } .about-page .orbit-card-intro p { font-size: 14px !important; line-height: 1.5 !important; font-weight: 700 !important; color: #fff !important; } .about-page .orbit-card-text { justify-content: flex-start !important; padding-top: calc(var(--orbit-card-pad, 18px) + 2px) !important; padding-bottom: var(--orbit-card-pad, 18px) !important; } .about-page .orbit-card-icon { font-size: 22px !important; margin-bottom: 10px !important; } .about-page .orbit-card-text h3 { font-size: 14px !important; line-height: 1.25 !important; margin-bottom: 8px !important; } .about-page .orbit-card-text p { font-size: 12px !important; line-height: 1.55 !important; color: #fff !important; } .about-page .orbit-stat-overlay, .about-page .orbit-person-overlay { padding: 18px !important; background: linear-gradient(to top, rgba(3,0,17,.92) 0%, rgba(3,0,17,.35) 60%, rgba(3,0,17,.05) 100%) !important; } .about-page .orbit-stat-overlay strong { font-size: 24px !important; line-height: 1.2 !important; } .about-page .orbit-stat-overlay p { font-size: 12px !important; line-height: 1.5 !important; } .about-page .orbit-card-person h3 { font-size: 14px !important; margin-bottom: 4px !important; } .about-page .orbit-person-role { font-size: 10px !important; margin-bottom: 6px !important; } .about-page .orbit-person-desc { font-size: 12px !important; line-height: 1.55 !important; } /* Backgrounds stay intact on every size */ .about-page .orbit-card-intro { background: radial-gradient(circle at 30% 20%, rgba(31,224,186,.18), transparent 60%), #0c0a1e !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; } .about-page .orbit-card-stat, .about-page .orbit-card-person { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; padding: 0 !important; } .about-page .orbit-card::before { display: block !important; content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.06) 100%) !important; pointer-events: none !important; } /* --- Geometry per breakpoint: smaller cards so they don't overlap --- */ .about-page { --orbit-card-w: 210px; --orbit-card-h: 275px; --orbit-card-pad: 18px; } @media (max-width: 1200px) { .about-page { --orbit-card-w: 205px; --orbit-card-h: 270px; } .about-page .orbit-ring { transform: rotateX(16deg) scale(0.9) !important; } } @media (max-width: 992px) { .about-page { --orbit-card-w: 200px; --orbit-card-h: 265px; --orbit-card-pad: 16px; } .about-page .orbit-ring { transform: rotateX(16deg) scale(0.82) !important; } } @media (max-width: 768px) { .about-page { --orbit-card-w: 195px; --orbit-card-h: 260px; --orbit-card-pad: 16px; } .about-page .orbit-ring { transform: rotateX(16deg) scale(0.72) !important; } } @media (max-width: 640px) { .about-page { --orbit-card-w: 190px; --orbit-card-h: 255px; --orbit-card-pad: 16px; } .about-page .orbit-ring { transform: rotateX(16deg) scale(0.64) !important; } } @media (max-width: 480px) { .about-page { --orbit-card-w: 185px; --orbit-card-h: 250px; --orbit-card-pad: 14px; } .about-page .orbit-ring { transform: rotateX(16deg) scale(0.58) !important; } } /* ===== Loader per i contatori video Vimeo ===== */ @keyframes vimeo-count-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .vimeo-count-loading { display: inline-block; vertical-align: middle; width: 2.2em; height: 0.9em; border-radius: 999px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.10) 25%, rgba(120, 200, 255, 0.45) 50%, rgba(255, 255, 255, 0.10) 75% ); background-size: 200% 100%; animation: vimeo-count-shimmer 1.2s linear infinite; } .reel-title .vimeo-count-loading { width: 1.6em; height: 0.55em; border-radius: 999px; }