/* ================================================================ PADLEZ GROUP — STYLESHEET Colors: Crimson #710014 | Sand #B38F6F | Pearl #F2F1ED | Black #161616 ================================================================ */ /* ── CUSTOM PROPERTIES ────────────────────────────────────────── */ :root { --crimson: #710014; --crimson-dk: #520010; --crimson-lt: #8c001a; --sand: #B38F6F; --sand-lt: #c9a98a; --pearl: #F2F1ED; --pearl-dk: #e5e4df; --black: #161616; --black-lt: #242424; --white: #ffffff; --gray-mid: #6b6560; --gray-faint: #9a9590; --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-brand: 'Montserrat', system-ui, sans-serif; --nav-h: 80px; --radius: 6px; --radius-lg: 14px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --t: 0.3s; --t-slow: 0.65s; --max-w: 1200px; } /* ── RESET ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background: var(--white); color: var(--black); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } input, textarea, button { font-family: inherit; } /* ── UTILITIES ────────────────────────────────────────────────── */ .container { max-width: var(--max-w); margin-inline: auto; padding-inline: 2rem; } .section { padding-block: 6rem; } .about, .services, .progetti, .blog-section { padding-bottom: 3.5rem; } .br-desktop { display: block; } /* ── SCROLL REVEAL ────────────────────────────────────────────── */ /* Visible by default — JS adds .js-reveal-ready to which activates the animation start state. This ensures content is always readable even if JS hasn't run yet. */ body.js-reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); } .reveal.visible { opacity: 1 !important; transform: translateY(0) !important; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); } /* Stagger values grid */ .values-grid .value-card:nth-child(1) { transition-delay: 0.04s; } .values-grid .value-card:nth-child(2) { transition-delay: 0.10s; } .values-grid .value-card:nth-child(3) { transition-delay: 0.16s; } .values-grid .value-card:nth-child(4) { transition-delay: 0.22s; } .values-grid .value-card:nth-child(5) { transition-delay: 0.28s; } .values-grid .value-card:nth-child(6) { transition-delay: 0.34s; } /* Stagger services */ .svc-grid .svc-card:nth-child(1) { transition-delay: 0.05s; } .svc-grid .svc-card:nth-child(2) { transition-delay: 0.12s; } .svc-grid .svc-card:nth-child(3) { transition-delay: 0.19s; } .svc-grid .svc-card:nth-child(4) { transition-delay: 0.26s; } /* Stagger mv */ .mv-grid .mv-card:nth-child(1) { transition-delay: 0.05s; } .mv-grid .mv-card:nth-child(2) { transition-delay: 0.15s; } /* ── SECTION HEADERS ──────────────────────────────────────────── */ .section-head { text-align: center; max-width: 780px; margin-inline: auto; margin-bottom: 2.5rem; } .section-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--crimson); border: 1px solid var(--crimson); border-radius: 100px; padding: 0.3rem 1.1rem; margin-bottom: 1.4rem; } .section-title { font-family: var(--font-serif); font-size: clamp(2.5rem, 5.5vw, 4.6rem); font-weight: 300; line-height: 1.1; color: var(--black); margin-bottom: 1.25rem; } .section-sub { font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 300; line-height: 1.8; color: var(--gray-mid); max-width: 580px; margin-inline: auto; } /* ================================================================ LOGO ================================================================ */ .logo { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .logo-img { height: 38px; width: auto; display: block; } /* White variant (footer) – no toggle needed, single img */ /* Header: show white over dark hero, red when scrolled */ .logo-img-white { display: block; } .logo-img-color { display: none; } /* ================================================================ HEADER / NAV ================================================================ */ .header { position: fixed; inset-block-start: 0; inset-inline: 0; height: var(--nav-h); z-index: 210; transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease); } /* Transparent state (over hero) – show white logo, hide red */ .header:not(.scrolled) .logo-img-white { display: block; } .header:not(.scrolled) .logo-img-color { display: none; } /* Scrolled state – show red logo, hide white */ .header.scrolled .logo-img-white { display: none; } .header.scrolled .logo-img-color { display: block; } .header:not(.scrolled) .nav-link { color: rgba(255,255,255,0.82); } .header:not(.scrolled) .nav-link:hover { color: var(--white); } .header:not(.scrolled) .nav-cta { border-color: rgba(255,255,255,0.5); color: var(--white) !important; } .header:not(.scrolled) .nav-cta:hover { background: var(--white); color: var(--crimson) !important; border-color: var(--white); } .header:not(.scrolled) .nav-toggle span { background: var(--white); } /* Scrolled state */ .header.scrolled { background: var(--white); box-shadow: 0 1px 24px rgba(0,0,0,0.07); } .nav { display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav-menu { display: flex; align-items: center; gap: 2.5rem; } .nav-link { font-size: 0.85rem; font-weight: 500; color: var(--black); letter-spacing: 0.02em; transition: color var(--t); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-cta::after { display: none; } /* CTA pill */ .nav-cta { padding: 0.45rem 1.2rem; border: 1px solid var(--crimson); border-radius: 100px; color: var(--crimson) !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; transition: background var(--t), color var(--t); } .nav-cta:hover { background: var(--crimson); color: var(--white) !important; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 211; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--black); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t); } .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Nav overlay */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; opacity: 0; transition: opacity var(--t-slow); } .nav-overlay.show { display: block; opacity: 1; } /* ================================================================ HERO ================================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(165deg, #2a0008 0%, #4a0010 45%, #1a0005 100%); background-size: 400% 400%; animation: heroGradient 15s ease infinite; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.65; } .hero-glow-1 { width: 75vw; height: 75vw; top: -15%; left: -10%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 70%); opacity: 0.07; animation: glowPulse1 8s ease-in-out infinite; } .hero-glow-2 { width: 55vw; height: 55vw; bottom: -10%; right: -5%; background: radial-gradient(circle, rgba(140,50,0,0.7) 0%, rgba(80,0,16,0.4) 40%, transparent 70%); opacity: 0.35; animation: glowPulse2 12s ease-in-out infinite; } .hero-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.5; } .hero-content { position: relative; z-index: 2; text-align: center; padding-top: calc(var(--nav-h) + 3rem); max-width: 1050px; } .hero-overline { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: #ffd700; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s var(--ease) 0.2s forwards; text-shadow: 0 0 20px rgba(255,215,0,0.4); } .hero-title { font-family: var(--font-serif); font-size: clamp(4.8rem, 10.5vw, 9.5rem); font-weight: 400; line-height: 1.05; color: var(--white); margin-bottom: 1.75rem; opacity: 0; animation: heroTitleEnter 1.1s var(--ease) 0.4s forwards; text-shadow: 0 0 100px rgba(255,255,255,0.25), 0 0 50px rgba(232,0,58,0.4); letter-spacing: -0.01em; } .hero-title .title-line1 { font-size: 0.75em; } .hero-title em { font-style: italic; font-size: 1.28em; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 40%, #ffa500 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 40px rgba(255,215,0,0.6)) drop-shadow(0 0 20px rgba(255,165,0,0.5)); display: inline-block; animation: comunicazionePopup 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards; } .hero-sub { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: rgba(255,255,255,0.85); line-height: 1.75; margin-bottom: 2rem; opacity: 0; animation: fadeUp 0.8s var(--ease) 0.6s forwards; text-shadow: 0 0 30px rgba(255,255,255,0.15); } .hero-manifesto { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 300; color: rgba(255,255,255,0.62); text-align: center; max-width: 860px; margin-inline: auto; line-height: 1.75; margin-top: 2rem; margin-bottom: 3rem; opacity: 0; animation: fadeUp 0.8s var(--ease) 0.9s forwards; } .hero-actions .btn { font-size: 1rem; } .hero-actions .btn-primary { background: var(--pearl); color: var(--crimson); border-color: var(--pearl); box-shadow: 0 8px 24px rgba(242,241,237,0.15); font-weight: 700; letter-spacing: 0.05em; } .hero-actions .btn-primary:hover { background: var(--pearl); border-color: var(--pearl); box-shadow: 0 30px 60px rgba(242,241,237,0.5), 0 0 30px rgba(255,255,255,0.4), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-5px) scale(1.05); } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; opacity: 0; animation: fadeUp 0.8s var(--ease) 0.8s forwards; } .hero-keywords { display: flex; align-items: center; justify-content: center; gap: 0.9rem; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.35); opacity: 0; animation: fadeUp 0.8s var(--ease) 1.0s forwards; } .kw-dot { color: var(--sand); opacity: 0.5; } /* Scroll caret */ .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0; animation: fadeIn 1s var(--ease) 1.4s forwards; } .scroll-bar { display: block; width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45)); margin: 0 auto; animation: scrollPulse 2.2s ease-in-out infinite; } /* ================================================================ BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 2rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 100px; border: none; cursor: pointer; transition: all var(--t) var(--ease); white-space: nowrap; } .btn-primary { background: var(--crimson); color: var(--white); } .btn-primary:hover { background: var(--crimson-dk); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(113,0,20,0.38); } .btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.38); } .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.65); } .btn-outline { background: transparent; color: var(--crimson); border: 1px solid var(--crimson); } .btn-outline:hover { background: var(--crimson); color: var(--white); } /* ================================================================ CI HANNO SCELTO — LOGO MARQUEE ================================================================ */ .clienti-strip { background: linear-gradient(160deg, #2a0009 0%, #3d000d 50%, #1a0005 100%); padding-block: 3rem 3.5rem; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); } .clienti-header { text-align: center; margin-bottom: 2rem; } .clienti-label { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.28); } .clienti-track-wrap { overflow-x: clip; overflow-y: visible; padding-block: 14px; width: 100%; } .clienti-track { display: flex; align-items: center; gap: 4.5rem; width: max-content; animation: clienti-scroll 50s linear infinite; will-change: transform; } .clienti-track:hover { animation-play-state: paused; } .clienti-track img { display: block; height: 64px; width: auto; max-width: none; flex-shrink: 0; filter: opacity(0.85); transition: filter 0.3s var(--ease), transform 0.3s var(--ease); cursor: pointer; } .clienti-track img:hover { filter: opacity(1); transform: scale(1.18); } @keyframes clienti-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ================================================================ ABOUT ================================================================ */ .about { background: linear-gradient(155deg, #3e0010 0%, #520010 50%, #270008 100%); position: relative; overflow: hidden; } .about::before { content: ''; position: absolute; width: 50vw; height: 50vw; top: -15%; right: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,1) 0%, transparent 70%); opacity: 0.15; pointer-events: none; } .about .section-tag { color: var(--sand); border-color: rgba(179,143,111,0.4); background: rgba(179,143,111,0.08); } .about .section-title { color: var(--white); text-shadow: 0 0 60px rgba(179,0,30,0.2); } .about .section-sub { color: rgba(255,255,255,0.55); } .about-divider { border-top: 1px solid rgba(255,255,255,0.1); margin-block: 4rem; } .about-block { text-align: center; margin-bottom: 2.5rem; } .about-block-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 400; color: var(--white); margin-top: 0.75rem; margin-bottom: 0.75rem; line-height: 1.25; } .about-block-sub { font-size: 0.95rem; color: rgba(255,255,255,0.55); max-width: 640px; margin-inline: auto; line-height: 1.75; } .about-body { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: 4rem; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 2.5rem 2.75rem; backdrop-filter: blur(6px); } .about-body p { font-size: 1.05rem; line-height: 1.88; color: rgba(255,255,255,0.65); margin-bottom: 1.1rem; } .about-body p:last-of-type { margin-bottom: 0; } .about-lead { font-size: 1.2rem !important; color: var(--sand-lt) !important; font-weight: 400; } .btn-about-cta { margin-top: 2.5rem; background: var(--pearl); color: var(--crimson); border-color: var(--pearl); } .btn-about-cta:hover { background: var(--pearl-dk); border-color: var(--pearl-dk); box-shadow: 0 10px 28px rgba(242,241,237,0.18); } /* Mission / Vision */ .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin-inline: auto; margin-top: 0; } .mv-card { border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.1); padding: 2.5rem; position: relative; overflow: hidden; transition: box-shadow var(--t), border-color var(--t); } .mv-card:nth-child(1) { background: linear-gradient(135deg, rgba(140,0,28,0.60) 0%, rgba(100,0,20,0.40) 50%, rgba(20,5,12,0.72) 100%); border-color: rgba(180,20,40,0.45); } .mv-card:nth-child(2) { background: linear-gradient(145deg, rgba(18,38,110,0.68) 0%, rgba(35,20,85,0.50) 50%, rgba(10,5,30,0.78) 100%); border-color: rgba(70,60,200,0.45); } .mv-card:nth-child(1) .mv-icon { color: rgba(235,80,105,0.95); } .mv-card:nth-child(2) .mv-icon { color: rgba(110,150,255,0.95); } .mv-card:nth-child(1)::after { background: radial-gradient(circle, rgba(200,20,45,0.18) 0%, transparent 70%) !important; } .mv-card:nth-child(2)::after { background: radial-gradient(circle, rgba(60,90,230,0.18) 0%, transparent 70%) !important; } .mv-card::after { content: ''; position: absolute; top: -40%; right: -20%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(179,143,111,0.07) 0%, transparent 70%); pointer-events: none; } .mv-card:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.4); border-color: rgba(179,143,111,0.25); } .mv-icon { width: 2rem; height: 2rem; margin-bottom: 1.1rem; color: var(--sand); opacity: 0.85; } .mv-icon svg { width: 100%; height: 100%; } .mv-card h3 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; color: var(--white); margin-bottom: 1rem; } .mv-card p { font-size: 0.95rem; line-height: 1.82; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; } .mv-card p:last-child { margin-bottom: 0; } /* ================================================================ VALUES ================================================================ */ .values { background: linear-gradient(150deg, #240009 0%, #3d000d 55%, #1e0412 100%); position: relative; overflow: hidden; } .values::before { content: ''; position: absolute; width: 55vw; height: 55vw; bottom: -20%; left: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 65%); opacity: 0.05; pointer-events: none; } .values .section-tag { color: var(--sand); border-color: rgba(179,143,111,0.4); background: rgba(179,143,111,0.08); } .values .section-title { color: var(--white); text-shadow: 0 0 60px rgba(179,0,30,0.2); } .values .section-sub { color: rgba(255,255,255,0.55); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius-lg); overflow: hidden; } .value-card { padding: 2.4rem 2.2rem; border-right: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); position: relative; overflow: hidden; transition: background var(--t), box-shadow var(--t); } .value-card:nth-child(3n) { border-right: none; } .value-card:nth-last-child(-n+3) { border-bottom: none; } /* Per-card distinct gradient backgrounds */ .value-card:nth-child(1) { background: linear-gradient(145deg, rgba(179,0,30,0.24) 0%, transparent 65%); } .value-card:nth-child(2) { background: linear-gradient(145deg, rgba(10,40,220,0.22) 0%, rgba(20,10,140,0.14) 65%); } .value-card:nth-child(3) { background: linear-gradient(145deg, rgba(0,110,130,0.22) 0%, rgba(0,70,90,0.12) 65%); } .value-card:nth-child(4) { background: linear-gradient(145deg, rgba(180,100,0,0.24) 0%, rgba(140,70,0,0.12) 65%); } .value-card:nth-child(5) { background: linear-gradient(145deg, rgba(120,0,180,0.22) 0%, rgba(160,0,100,0.12) 65%); } .value-card:nth-child(6) { background: linear-gradient(145deg, rgba(0,110,40,0.22) 0%, rgba(0,80,30,0.12) 65%); } /* Hover accent bar */ .value-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--crimson), var(--sand)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .value-card:hover::before { transform: scaleX(1); } .value-card:hover { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 40px rgba(179,0,30,0.08); } .val-num { display: inline-block; font-family: var(--font-brand); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; padding: 0.25rem 0.7rem; border-radius: 100px; margin-bottom: 0.9rem; } .value-card h3 { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 300; color: var(--white); margin-bottom: 0.65rem; } .value-card p { font-size: 0.92rem; line-height: 1.78; color: rgba(255,255,255,0.58); } /* ================================================================ MANIFESTO STRIP ================================================================ */ .manifesto-strip { background: var(--crimson); padding-block: 5rem; overflow: hidden; position: relative; } .manifesto-strip::before { content: ''; position: absolute; width: 60vw; height: 60vw; top: -30%; right: -15%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%); pointer-events: none; } .manifesto-cta { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } .manifesto-cta-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.65); } .manifesto-text { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.2vw, 2.8rem); font-style: italic; font-weight: 300; color: var(--white); text-align: center; line-height: 1.4; max-width: 760px; margin: 0; } /* ================================================================ SERVICES ================================================================ */ .services { background: linear-gradient(145deg, #450012 0%, #540010 45%, #38000f 100%); position: relative; overflow: hidden; } .services::before { content: ''; position: absolute; width: 55vw; height: 55vw; top: -15%; right: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,1) 0%, transparent 65%); opacity: 0.15; pointer-events: none; } .services::after { content: ''; position: absolute; width: 35vw; height: 35vw; bottom: 5%; left: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 65%); opacity: 0.05; pointer-events: none; } .services .section-tag { color: var(--sand); border-color: rgba(179,143,111,0.5); } .services .section-title { color: var(--white); text-shadow: 0 0 60px rgba(179,0,30,0.2); } .services .section-sub { color: rgba(255,255,255,0.5); } .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } /* ── Card ── */ .svc-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 1 / 1; cursor: pointer; outline: none; } .svc-card:focus-visible { box-shadow: 0 0 0 3px var(--sand); } /* ── Placeholder visual (swap for real later) ── */ .svc-visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .svc-card:nth-child(1) .svc-visual { background: linear-gradient(135deg, #520010 0%, #710014 60%, #8c001a 100%); } .svc-card:nth-child(2) .svc-visual { background: linear-gradient(160deg, #0a0e1a 0%, #1a1a3a 40%, #520010 100%); } .svc-card:nth-child(3) .svc-visual { background: linear-gradient(120deg, #710014 0%, #8c2a00 60%, #b35a00 100%); } .svc-card:nth-child(4) .svc-visual { background: linear-gradient(145deg, #0d0d1a 0%, #2a1040 50%, #520010 100%); } .svc-card:nth-child(5) .svc-visual { background: linear-gradient(135deg, #0d0d0d 0%, #2a1010 100%); } .svc-card:nth-child(6) .svc-visual { background: linear-gradient(155deg, #1a1a1a 0%, #380010 100%); } .svc-card:nth-child(7) .svc-visual { background: linear-gradient(140deg, #111111 0%, #2d1a1a 100%); } .svc-card:nth-child(8) .svc-visual { background: linear-gradient(150deg, #1e0808 0%, #710014 100%); } .svc-card:nth-child(9) .svc-visual { background: linear-gradient(130deg, #2d0a0a 0%, #520010 100%); } .svc-visual-num { font-family: var(--font-brand); font-size: 7rem; font-weight: 900; color: rgba(255,255,255,0.05); user-select: none; line-height: 1; } /* ── Always-visible title strip at bottom ── */ .svc-front { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1.5rem 1.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.72)); transition: opacity 0.3s var(--ease); } .svc-card:hover .svc-front, .svc-card.active .svc-front { opacity: 0; } .svc-front-cat { display: inline-block; font-family: var(--font-brand); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); background: rgba(113,0,20,0.6); border: 1px solid rgba(179,143,111,0.3); padding: 0.28rem 0.7rem; border-radius: 100px; backdrop-filter: blur(4px); margin-bottom: 0.55rem; } .svc-front-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--white); line-height: 1.3; } /* ── Hover overlay — slides up from bottom ── */ .svc-overlay { position: absolute; inset: 0; padding: 1.75rem 1.5rem 1.5rem; background: rgba(82, 0, 16, 0.97); display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; transform: translateY(101%); transition: transform 0.45s var(--ease); } .svc-card:hover .svc-overlay, .svc-card.active .svc-overlay { transform: translateY(0); } .svc-overlay-cat { font-family: var(--font-brand); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); margin-bottom: 0.5rem; } .svc-overlay-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; color: var(--white); line-height: 1.3; margin-bottom: 0.9rem; } .svc-overlay p { font-size: 0.875rem; line-height: 1.75; color: rgba(255,255,255,0.75); } /* ================================================================ TEAM ================================================================ */ .team { background: linear-gradient(155deg, #3a000f 0%, #520010 50%, #280008 100%); position: relative; overflow: hidden; } .team::before { content: ''; position: absolute; width: 45vw; height: 45vw; top: -10%; right: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,1) 0%, transparent 65%); opacity: 0.15; pointer-events: none; } .team::after { content: ''; position: absolute; width: 30vw; height: 30vw; bottom: -10%; left: 5%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 65%); opacity: 0.05; pointer-events: none; } .team .section-tag { color: var(--sand); border-color: rgba(179,143,111,0.4); } .team .section-title { color: var(--white); } .team-card { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; align-items: start; background: rgba(0,0,0,0.22); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.1); padding: 3.5rem; } .team-left { display: flex; flex-direction: column; gap: 1.5rem; } .team-avatar { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-lt) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-weight: 800; font-size: 1.4rem; letter-spacing: 0.05em; color: var(--white); } .team-name { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 500; color: var(--white); line-height: 1.2; margin-bottom: 0.3rem; } .team-role { font-size: 0.85rem; font-weight: 600; color: var(--crimson); letter-spacing: 0.02em; margin-bottom: 0.2rem; } .team-city { font-size: 0.78rem; color: var(--gray-faint); letter-spacing: 0.06em; } .team-bio p { font-size: 1rem; line-height: 1.88; color: rgba(255,255,255,0.65); margin-bottom: 1.2rem; } .team-quote { font-family: var(--font-serif); font-style: italic; font-size: 1.08rem !important; color: rgba(255,255,255,0.85) !important; padding-left: 1.3rem; border-left: 2px solid var(--sand); margin-top: 1.75rem !important; margin-bottom: 0 !important; } /* ================================================================ CONTACT ================================================================ */ .contact { background: linear-gradient(150deg, #620012 0%, #710014 50%, #4a000e 100%); } .contact-tag { color: var(--sand); border-color: rgba(179,143,111,0.45); } .contact-title { color: var(--white); } .contact-sub { color: rgba(255,255,255,0.65); } .contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 2.2rem; } .contact-item { display: flex; flex-direction: column; gap: 0.35rem; } .c-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); opacity: 0.75; } .c-value { font-size: 1.05rem; color: var(--white); transition: opacity var(--t); } a.c-value:hover { opacity: 0.7; } /* Form */ .contact-form { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); padding: 2.5rem; backdrop-filter: blur(12px); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; } .form-group label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .form-group input, .form-group textarea { width: 100%; padding: 0.85rem 1rem; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius); font-size: 0.95rem; color: var(--white); outline: none; transition: border-color var(--t), background var(--t); resize: vertical; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.32); } .form-group input:focus, .form-group textarea:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.13); } .btn-send { width: 100%; background: var(--white); color: var(--crimson); font-weight: 700; font-size: 0.875rem; padding: 0.95rem; border-radius: 100px; border: none; cursor: pointer; transition: background var(--t), transform var(--t), box-shadow var(--t); margin-top: 0.25rem; } .btn-send:hover { background: var(--pearl); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.22); } .btn-send:disabled { opacity: 0.75; cursor: not-allowed; transform: none; box-shadow: none; } .form-notice { margin-top: 0.75rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); text-align: center; min-height: 1.2em; } /* ================================================================ FOOTER ================================================================ */ .footer { background: linear-gradient(170deg, #1a0005 0%, #120003 55%, #0e0002 100%); color: var(--white); padding-block: 3rem 1.5rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.07); } .footer-brand .logo { margin-bottom: 1rem; } .footer-tagline { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: rgba(255,255,255,0.45); margin-bottom: 0.4rem; } .footer-city { font-size: 0.75rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.25); } .footer-nav h4, .footer-contact h4 { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 0.85rem; } .footer-nav ul, .footer-contact ul { display: flex; flex-direction: column; gap: 0.45rem; } .footer-nav a, .footer-contact a, .footer-contact li { font-size: 0.875rem; color: rgba(255,255,255,0.55); transition: color var(--t); } .footer-nav a:hover, .footer-contact a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.25rem; font-size: 0.78rem; color: rgba(255,255,255,0.22); } .footer-made-by { font-size: 0.68rem; color: rgba(255,255,255,0.18); text-decoration: none; letter-spacing: 0.04em; transition: color var(--t); } .footer-made-by:hover { color: rgba(255,255,255,0.55); } /* ================================================================ ATMOSPHERIC GLOWS & SECTION DYNAMISM ================================================================ */ /* Sections need relative positioning for pseudo-element glows */ .about, .services, .progetti, .values, .blog-section { position: relative; overflow: hidden; } /* CHI SIAMO — warm crimson top-right + cool cobalt bottom-left */ .about::before { content: ''; position: absolute; top: -10%; right: -8%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(179,0,30,0.14) 0%, transparent 65%); pointer-events: none; z-index: 0; } .about::after { content: ''; position: absolute; bottom: -8%; left: -8%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(10,40,200,0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* VALORI — amber top-left + teal bottom-right */ .values::before { content: ''; position: absolute; top: -8%; left: -5%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(180,100,0,0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } .values::after { content: ''; position: absolute; bottom: -8%; right: -5%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0,110,120,0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* SERVIZI — violet bottom-left + crimson top-right */ .services::before { content: ''; position: absolute; top: -6%; right: -6%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(179,0,30,0.13) 0%, transparent 65%); pointer-events: none; z-index: 0; } .services::after { content: ''; position: absolute; bottom: -8%; left: -6%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(100,0,180,0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* PROGETTI — deep teal top-left + amber bottom-right */ .progetti::before { content: ''; position: absolute; top: -6%; left: -6%; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(0,100,120,0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } .progetti::after { content: ''; position: absolute; bottom: -6%; right: -5%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(180,90,0,0.11) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* BLOG — forest green top-right + crimson bottom-left */ .blog-section::before { content: ''; position: absolute; top: -8%; right: -5%; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(0,100,40,0.11) 0%, transparent 65%); pointer-events: none; z-index: 0; } .blog-section::after { content: ''; position: absolute; bottom: -6%; left: -5%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(179,0,30,0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Ensure section containers render above glows */ .about > .container, .values > .container, .services > .container, .progetti > .container, .blog-section > .container { position: relative; z-index: 1; } /* Manifesto strip subtle glow */ .manifesto-strip { position: relative; overflow: hidden; } .manifesto-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 120% at 50% 50%, rgba(113,0,20,0.18) 0%, transparent 70%); pointer-events: none; } /* ================================================================ BACK TO TOP ================================================================ */ .back-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 150; width: 44px; height: 44px; border-radius: 50%; background: var(--crimson); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity var(--t), transform var(--t), box-shadow var(--t); pointer-events: none; } .back-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-top:hover { box-shadow: 0 6px 20px rgba(113,0,20,0.4); } .back-top svg { width: 20px; height: 20px; color: var(--white); } /* ================================================================ KEYFRAMES ================================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollPulse { 0%,100% { opacity: 0.35; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.12); } } @keyframes heroGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes glowPulse1 { 0%, 100% { opacity: 0.05; transform: scale(1); } 50% { opacity: 0.12; transform: scale(1.1); } } @keyframes glowPulse2 { 0%, 100% { opacity: 0.25; transform: scale(0.95); } 50% { opacity: 0.45; transform: scale(1.05); } } @keyframes heroTitleEnter { from { opacity: 0; transform: translateY(28px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes comunicazionePopup { 0% { opacity: 0; transform: scale(0.6) translateY(12px); } 50% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .hero-title em:hover { animation: comunicazioneShake 0.5s cubic-bezier(0.36, 0, 0.66, 1) infinite; } @keyframes comunicazioneShake { 0% { transform: rotateZ(0deg) scale(1); opacity: 1; } 15% { transform: rotateZ(-5deg) scale(1); opacity: 1; } 30% { transform: rotateZ(10deg) scale(1); opacity: 1; } 45% { transform: rotateZ(-10deg) scale(1); opacity: 1; } 60% { transform: rotateZ(5deg) scale(1); opacity: 1; } 75% { transform: rotateZ(-3deg) scale(1); opacity: 1; } 100% { transform: rotateZ(0deg) scale(1); opacity: 1; } } /* ================================================================ RESPONSIVE — TABLET (≤1024px) ================================================================ */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .mv-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: repeat(2, 1fr); } .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .team-card { grid-template-columns: 1fr; gap: 2.5rem; } .contact-grid { grid-template-columns: 1fr; gap: 3rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } .footer-brand { grid-column: 1 / -1; } /* Values grid border fix on 2 cols */ .value-card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.09); } .value-card:nth-child(2n) { border-right: none; } .value-card:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,0.09); } .value-card:nth-last-child(-n+2) { border-bottom: none; } } /* ================================================================ RESPONSIVE — MOBILE (≤768px) ================================================================ */ @media (max-width: 768px) { :root { --nav-h: 68px; } .section { padding-block: 4.5rem; } .br-desktop { display: none; } /* Mobile nav */ .nav-toggle { display: flex; } .nav-menu { position: fixed; top: 0; right: -100%; width: min(300px, 82vw); height: 100vh; background: var(--white); flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem; gap: 2rem; z-index: 200; transition: right var(--t-slow) var(--ease); box-shadow: -8px 0 40px rgba(0,0,0,0.12); } .nav-menu.open { right: 0; } /* Force normal link colours on open mobile menu */ .nav-menu .nav-link { color: var(--black) !important; font-size: 1.15rem; } .nav-menu .nav-cta, .header:not(.scrolled) .nav-menu .nav-cta { color: var(--crimson) !important; border-color: var(--crimson) !important; background: transparent !important; } .nav-menu .nav-cta:hover, .header:not(.scrolled) .nav-menu .nav-cta:hover { background: var(--crimson) !important; color: var(--white) !important; } /* Values 1 col */ .values-grid { grid-template-columns: 1fr; border: none; gap: 1px; } .value-card { border: 1px solid rgba(255,255,255,0.09) !important; border-radius: var(--radius); margin-bottom: 0; } .hero-actions { flex-direction: column; align-items: center; } .hero-actions .btn { width: 100%; max-width: 280px; } .form-row { grid-template-columns: 1fr; } .team-card { padding: 2rem; gap: 2rem; } .contact-form { padding: 1.75rem; } .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } .back-top { bottom: 1.25rem; right: 1.25rem; } } /* ================================================================ RESPONSIVE — SMALL MOBILE (≤480px) ================================================================ */ @media (max-width: 480px) { .container { padding-inline: 1.25rem; } .section { padding-block: 3.5rem; } .hero-title { font-size: 2.2rem; } .hero-title em { font-size: 1.1em; } .mv-card, .team-card { padding: 1.75rem; } .svc-grid { grid-template-columns: 1fr; gap: 1rem; } .manifesto-strip { padding-block: 2rem; } .cl-steps { flex-direction: column; gap: 2rem; } .cl-arrow { transform: rotate(90deg); align-self: center; } .progetto-card { min-height: 360px; } .collabora-inner { padding: 2rem; } } /* ================================================================ LANGUAGE SWITCHER ================================================================ */ .nav-lang { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; padding-left: 1rem; border-left: 1px solid rgba(0,0,0,0.12); } .header:not(.scrolled) .nav-lang { border-left-color: rgba(255,255,255,0.25); } .lang-btn { background: none; border: none; cursor: pointer; font-family: var(--font-brand); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gray-mid); padding: 0.2rem 0.1rem; transition: color var(--t); } .lang-btn:hover { color: var(--crimson); } .lang-btn.active { color: var(--crimson); } .header:not(.scrolled) .lang-btn { color: rgba(255,255,255,0.55); } .header:not(.scrolled) .lang-btn:hover { color: var(--white); } .header:not(.scrolled) .lang-btn.active{ color: var(--white); } .lang-sep { font-size: 0.6rem; color: var(--gray-faint); user-select: none; } .header:not(.scrolled) .lang-sep { color: rgba(255,255,255,0.3); } /* Show lang switcher in mobile menu too */ @media (max-width: 768px) { .nav-lang { border-left: none; border-top: 1px solid var(--pearl-dk); padding-left: 0; padding-top: 1rem; margin-left: 0; margin-top: 0.5rem; gap: 0.6rem; } .lang-btn { font-size: 0.8rem; color: var(--gray-mid) !important; } .lang-btn.active { color: var(--crimson) !important; } .lang-sep { color: var(--gray-faint) !important; } } /* ================================================================ SERVICE OVERLAY LIST ================================================================ */ .svc-overlay-desc { font-size: 0.82rem; line-height: 1.65; color: rgba(255,255,255,0.72); margin-bottom: 1rem; } .svc-overlay-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; } .svc-overlay-list li { font-size: 0.8rem; color: rgba(255,255,255,0.9); padding-left: 1rem; position: relative; } .svc-overlay-list li::before { content: '—'; position: absolute; left: 0; color: var(--sand); font-size: 0.7rem; } /* Adjust card aspect ratio for 4-col layout */ .svc-card { aspect-ratio: 3 / 4; } /* ================================================================ MANIFESTO QUOTE SECTION ================================================================ */ .manifesto-quote-section { background: var(--black); padding-block: 5rem; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .mq-inner { max-width: 780px; margin: 0 auto; text-align: center; padding-inline: 2rem; } .mq-text { font-family: var(--font-serif); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 300; font-style: italic; color: rgba(255,255,255,0.72); line-height: 1.85; } /* ================================================================ CHI SIAMO — CTA BUTTON ================================================================ */ .btn-about-cta { margin-top: 2rem; display: inline-block; } @media (max-width: 768px) { .btn-about-cta { display: block; width: 100%; max-width: 340px; margin-inline: auto; text-align: center; white-space: normal; box-sizing: border-box; } } /* ================================================================ COME LAVORIAMO ================================================================ */ .come-lavoriamo { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid rgba(255,255,255,0.07); } .cl-header { text-align: center; margin-bottom: 3.5rem; } .cl-tag { color: var(--sand) !important; border-color: rgba(179,143,111,0.4) !important; } .cl-title { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; color: var(--white); line-height: 1.35; margin-top: 0.75rem; } .cl-steps { display: flex; align-items: stretch; gap: 0; } .cl-step { flex: 1; text-align: center; padding: 2rem 1.5rem; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); background: rgba(255,255,255,0.02); transition: background var(--t), border-color var(--t); } .cl-step:hover { background: rgba(255,255,255,0.05); border-color: rgba(179,143,111,0.3); } .cl-num { display: block; font-family: var(--font-brand); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; color: var(--sand); opacity: 1; margin-bottom: 0.75rem; } .cl-step h4 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--white); margin-bottom: 0.5rem; } .cl-step p { font-size: 0.82rem; line-height: 1.65; color: rgba(255,255,255,0.45); } .cl-arrow { flex-shrink: 0; align-self: center; padding: 0 0.6rem; color: rgba(179,143,111,0.5); font-size: 1.1rem; } /* ================================================================ WHATSAPP CTA STRIP ================================================================ */ .wa-strip { background: var(--pearl); padding-block: 4rem; border-top: 1px solid var(--pearl-dk); border-bottom: 1px solid var(--pearl-dk); } .wa-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .wa-text { font-family: var(--font-serif); font-size: clamp(1rem, 1.8vw, 1.25rem); font-style: italic; color: var(--black); line-height: 1.6; max-width: 600px; } .btn-wa { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 2rem; background: #25D366; color: #fff !important; border-radius: 100px; font-family: var(--font-brand); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; transition: background var(--t), transform var(--t); flex-shrink: 0; } .btn-wa::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center/contain; } .btn-wa:hover { background: #1ebe5d; transform: translateY(-2px); } .btn-wa-large { padding: 1rem 2.5rem; font-size: 0.95rem; } .wa-cta-block { display: flex; justify-content: center; margin: 3.5rem 0 2rem; } @media (max-width: 768px) { .wa-strip-inner { flex-direction: column; text-align: center; } .wa-text { max-width: 100%; } .hero-manifesto { text-align: center; } } /* ================================================================ PROGETTI ================================================================ */ .progetti { background: linear-gradient(145deg, #440010 0%, #520010 40%, #360010 100%); } .progetti .section-tag { color: var(--sand); border-color: rgba(179,143,111,0.5); background: rgba(179,143,111,0.08); } .progetti .section-title { color: var(--white); text-shadow: 0 0 60px rgba(179,0,30,0.2); } .progetti .section-sub { color: rgba(255,255,255,0.5); } .progetti-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .progetto-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 480px; cursor: default; } /* Gradient placeholder backgrounds */ .progetto-bg { position: absolute; inset: 0; } .progetto-bg-1 { background: linear-gradient(160deg, #1a0508 0%, #710014 40%, #c9a98a 100%); } .progetto-bg-2 { background: linear-gradient(155deg, #050d1a 0%, #0a1a2e 50%, #520010 100%); } .progetto-bg-3 { background: linear-gradient(145deg, #080514 0%, #1a0a30 40%, #710014 100%); } /* Dark overlay for readability */ .progetto-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); } .progetto-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; } .progetto-top { display: flex; justify-content: flex-start; } .progetto-settore { font-family: var(--font-brand); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); background: rgba(113,0,20,0.6); border: 1px solid rgba(179,143,111,0.3); padding: 0.3rem 0.75rem; border-radius: 100px; backdrop-filter: blur(4px); } .progetto-bottom { display: flex; flex-direction: column; gap: 0.75rem; } .progetto-nome { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; color: var(--white); line-height: 1.2; } .progetto-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(255,255,255,0.65); } .progetto-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; } .progetto-tags span { font-family: var(--font-brand); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.15); padding: 0.25rem 0.65rem; border-radius: 100px; } @media (max-width: 1024px) { .progetti-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } } @media (max-width: 768px) { .progetti-grid { max-width: 100%; } .progetto-card { min-height: 380px; } } /* ================================================================ BLOG ================================================================ */ .blog-section { background: linear-gradient(140deg, #3e000e 0%, #520010 55%, #380010 100%); position: relative; overflow: hidden; } .blog-section::before { content: ''; position: absolute; width: 50vw; height: 50vw; top: -10%; right: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,1) 0%, transparent 65%); opacity: 0.15; pointer-events: none; } .blog-section .section-tag { color: var(--sand); border-color: rgba(179,143,111,0.4); background: rgba(179,143,111,0.08); } .blog-section .section-title { color: var(--white); text-shadow: 0 0 60px rgba(179,0,30,0.2); } .blog-section .section-sub { color: rgba(255,255,255,0.55); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .blog-card { background: rgba(255,255,255,0.04); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.09); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t); } .blog-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); box-shadow: 0 16px 48px rgba(0,0,0,0.35); } .blog-card-visual { height: 180px; background: linear-gradient(135deg, #3a000d 0%, var(--crimson) 45%, #b38f6f40 100%); display: flex; align-items: center; justify-content: center; } .blog-card-visual span { font-family: var(--font-brand); font-size: 2.5rem; font-weight: 900; color: rgba(255,255,255,0.12); letter-spacing: 0.05em; } .blog-card-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .blog-author { font-family: var(--font-brand); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); } .blog-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 300; color: var(--white); line-height: 1.4; } .blog-excerpt { font-size: 0.875rem; line-height: 1.75; color: rgba(255,255,255,0.55); flex: 1; } .blog-read-more { font-family: var(--font-brand); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--sand); text-transform: uppercase; transition: letter-spacing var(--t); align-self: flex-start; } .blog-read-more:hover { letter-spacing: 0.1em; } @media (max-width: 1024px) { .blog-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } } @media (max-width: 768px) { .blog-grid { max-width: 100%; } } /* ================================================================ CI PIACE COLLABORARE ================================================================ */ .collabora { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid rgba(255,255,255,0.08); } .collabora-inner { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 3rem; text-align: center; max-width: 680px; margin: 0 auto; backdrop-filter: blur(6px); } .collabora-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; color: var(--white); margin-bottom: 1rem; } .collabora-sub { font-size: 0.9rem; line-height: 1.75; color: rgba(255,255,255,0.6); margin-bottom: 1.75rem; } .btn-ghost-dark { display: inline-block; padding: 0.65rem 1.75rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; color: var(--white) !important; font-family: var(--font-brand); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; transition: background var(--t), border-color var(--t); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); } /* ================================================================ CTA BOX (reusable across pages) ================================================================ */ .cta-box-section { padding-block: 3rem; background: linear-gradient(155deg, #3a000f 0%, #520010 50%, #280008 100%); } .cta-box { position: relative; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 2.5rem 3rem; text-align: center; max-width: 840px; margin-inline: auto; overflow: hidden; backdrop-filter: blur(6px); } .cta-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), rgba(255,255,255,0.55), rgba(255,255,255,0.25), transparent); } .cta-box::after { content: ''; position: absolute; width: 55vw; height: 55vw; top: -40%; right: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 65%); opacity: 0.05; pointer-events: none; } .cta-box-label { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 0.75rem; } .cta-box .hero-manifesto { margin-top: 0; margin-bottom: 1.5rem; } .cta-box-text { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.65; margin-bottom: 2.5rem; max-width: 680px; margin-inline: auto; } .cta-box-text br { display: block; } @media (max-width: 768px) { .cta-box { padding: 1.75rem 1.5rem; } .cta-box-text { font-size: 1.15rem; } } /* ================================================================ BLOG ARTICLE PAGES ================================================================ */ .article-hero { background: var(--black); padding-top: calc(var(--nav-h) + 4rem); padding-bottom: 4rem; } .article-back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-brand); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); margin-bottom: 2.5rem; transition: gap var(--t); } .article-back:hover { gap: 0.8rem; } .article-title-page { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; color: var(--white); line-height: 1.2; max-width: 800px; margin-bottom: 1.5rem; } .article-meta-page { font-family: var(--font-brand); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); } .article-body { background: var(--white); padding-block: 5rem; } .article-body .container { max-width: 760px; } .article-body p { font-size: 1.05rem; line-height: 1.9; color: var(--gray-mid); margin-bottom: 1.5rem; } .article-body p:last-of-type { margin-bottom: 0; } .article-cta-section { background: var(--crimson); padding-block: 4rem; text-align: center; } .article-cta-section p { font-family: var(--font-serif); font-size: 1.3rem; font-style: italic; color: rgba(255,255,255,0.85); margin-bottom: 2rem; max-width: 600px; margin-inline: auto; } .article-cta-section .btn { border-color: rgba(255,255,255,0.6); color: var(--white) !important; } .article-cta-section .btn:hover { background: var(--white); color: var(--crimson) !important; } /* ================================================================ TEASER SECTION (homepage row linking to inner pages) ================================================================ */ .teaser-section { background: var(--pearl); } .teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .teaser-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 2.25rem 2rem; background: var(--white); border: 1px solid var(--pearl-dk); border-radius: var(--radius-lg); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); cursor: pointer; color: var(--black); } .teaser-card:hover { border-color: var(--crimson); box-shadow: 0 8px 32px rgba(113,0,20,0.1); transform: translateY(-3px); } .teaser-num { font-family: var(--font-brand); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; color: var(--crimson); } .teaser-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.2; } .teaser-desc { font-size: 0.88rem; color: var(--gray-mid); line-height: 1.7; flex: 1; } .teaser-link { font-size: 0.82rem; font-weight: 600; color: var(--crimson); letter-spacing: 0.04em; margin-top: 0.25rem; } @media (max-width: 900px) { .teaser-grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* ================================================================ ENHANCED GLOWS, GRADIENT TEXT & COLOR PLAY ================================================================ */ /* — Atmospheric glows v3: crimson + warm gold — consistent across all sections — */ /* Crimson — top-right on about/services/team, top-left on values/progetti/blog */ .about::before, .services::before, .team::before { content: ''; position: absolute; top: -15%; right: -8%; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(190,5,35,0.33) 0%, rgba(140,0,22,0.15) 50%, transparent 68%); pointer-events: none; z-index: 0; } .values::before, .progetti::before, .blog-section::before { content: ''; position: absolute; top: -12%; left: -8%; width: 660px; height: 660px; border-radius: 50%; background: radial-gradient(circle, rgba(190,5,35,0.30) 0%, rgba(140,0,22,0.13) 50%, transparent 68%); pointer-events: none; z-index: 0; } /* Warm gold — bottom-left on about/services/team, bottom-right on values/progetti/blog */ .about::after, .services::after, .team::after { content: ''; position: absolute; bottom: -12%; left: -8%; width: 630px; height: 630px; border-radius: 50%; background: radial-gradient(circle, rgba(200,135,0,0.26) 0%, rgba(155,90,0,0.12) 50%, transparent 68%); pointer-events: none; z-index: 0; } .values::after, .progetti::after, .blog-section::after { content: ''; position: absolute; bottom: -12%; right: -8%; width: 590px; height: 590px; border-radius: 50%; background: radial-gradient(circle, rgba(200,135,0,0.24) 0%, rgba(155,90,0,0.11) 50%, transparent 68%); pointer-events: none; z-index: 0; } .about > .container, .values > .container, .services > .container, .progetti > .container, .blog-section > .container, .team > .container { position: relative; z-index: 1; } /* — Manifesto strip glow — */ .manifesto-strip::before { background: radial-gradient(ellipse 100% 160% at 50% 50%, rgba(190,5,35,0.30) 0%, rgba(200,135,0,0.10) 75%, transparent 100%); } /* — Gradient text: section titles on dark backgrounds — */ .about .section-title, .values .section-title, .services .section-title, .team .section-title, .progetti .section-title, .blog-section .section-title { background: linear-gradient(130deg, #ffffff 0%, #f5ddc8 50%, #eab878 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 45px rgba(190,5,35,0.40)) drop-shadow(0 0 85px rgba(200,135,0,0.20)); } /* — Hero title warm gradient (no filter: em has its own drop-shadow) — */ .hero-title { background: linear-gradient(130deg, #ffffff 0%, #f5ddc8 50%, #eab878 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } /* — About block titles warm gradient — */ .about-block-title { background: linear-gradient(125deg, #fff 0%, #f5ddc8 55%, #eab878 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 35px rgba(190,5,35,0.32)) drop-shadow(0 0 65px rgba(200,135,0,0.16)); } /* — Manifesto strip quote gradient — */ .manifesto-text { background: linear-gradient(120deg, #fff 0%, #f8e0c5 40%, #f0c480 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* — Val-num: pill badge with per-card vivid color — */ .value-card:nth-child(1) .val-num { color: #f03255; background: rgba(240,50,85,0.15); border: 1px solid rgba(240,50,85,0.40); } .value-card:nth-child(2) .val-num { color: #5a8cff; background: rgba(90,140,255,0.15); border: 1px solid rgba(90,140,255,0.40); } .value-card:nth-child(3) .val-num { color: #22ccd8; background: rgba(34,204,216,0.15); border: 1px solid rgba(34,204,216,0.40); } .value-card:nth-child(4) .val-num { color: #f0a020; background: rgba(240,160,32,0.15); border: 1px solid rgba(240,160,32,0.40); } .value-card:nth-child(5) .val-num { color: #b855f0; background: rgba(184,85,240,0.15); border: 1px solid rgba(184,85,240,0.40); } .value-card:nth-child(6) .val-num { color: #35cc72; background: rgba(53,204,114,0.15); border: 1px solid rgba(53,204,114,0.40); } /* — Val card hover top-border: per-card color — */ .value-card:nth-child(1)::before { background: linear-gradient(90deg, #f03255, #900015); } .value-card:nth-child(2)::before { background: linear-gradient(90deg, #5a8cff, #1a40c0); } .value-card:nth-child(3)::before { background: linear-gradient(90deg, #22ccd8, #007888); } .value-card:nth-child(4)::before { background: linear-gradient(90deg, #f0a020, #b05800); } .value-card:nth-child(5)::before { background: linear-gradient(90deg, #b855f0, #6800b8); } .value-card:nth-child(6)::before { background: linear-gradient(90deg, #35cc72, #007830); } /* — Val card number index label — */ .val-num { font-weight: 800; } /* — Blog card visual richer gradient — */ .blog-card-visual { background: linear-gradient(135deg, #380008 0%, #820016 35%, #8c3400 70%, #b46010 100%); } /* — Blog card-intro visual richer — */ .blog-card-intro .blog-card-visual { background: linear-gradient(140deg, #200006 0%, #710014 40%, #a03000 75%, #c48020 100%); } /* — Progetto bg more vivid — */ .progetto-bg-1 { background: linear-gradient(160deg, #2e0008 0%, #8a0016 38%, #c48058 85%, #d8a878 100%); } .progetto-bg-2 { background: linear-gradient(155deg, #03091a 0%, #0c1e3a 48%, #6e0012 85%, #200030 100%); } .progetto-bg-3 { background: linear-gradient(145deg, #070314 0%, #200c3a 38%, #8a0016 75%, #520010 100%); } /* — Hero overline golden — */ .hero-overline { color: #d4a850; } /* — CTA box top shimmer line more vivid — */ .cta-box::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), rgba(255,220,150,0.55), rgba(255,255,255,0.18), transparent); } /* — MV card hover border color — */ .mv-card:nth-child(1):hover { border-color: rgba(200,50,30,0.5); } .mv-card:nth-child(2):hover { border-color: rgba(100,50,180,0.5); } /* — Section sub on dark sections slightly warmer — */ .about .section-sub, .values .section-sub, .services .section-sub, .team .section-sub, .progetti .section-sub, .blog-section .section-sub { color: rgba(255,230,210,0.55); } /* ================================================================ CARD GLOWS — crimson + warm gold ambient glow on all boxes ================================================================ */ .mv-card, .value-card, .progetto-card, .blog-card, .team-card { box-shadow: 0 0 32px rgba(160,0,25,0.16), 0 0 65px rgba(185,115,0,0.07); } .cta-box { box-shadow: 0 0 55px rgba(160,0,25,0.20), 0 0 100px rgba(185,115,0,0.09); } .mv-card:hover, .value-card:hover { box-shadow: 0 8px 42px rgba(160,0,25,0.28), 0 0 85px rgba(185,115,0,0.13); } .progetto-card:hover { box-shadow: 0 10px 48px rgba(160,0,25,0.30), 0 0 90px rgba(185,115,0,0.13); } .blog-card:hover { box-shadow: 0 8px 42px rgba(160,0,25,0.26), 0 0 80px rgba(185,115,0,0.11); }