/* ============================================ DIESSE MEDIA SRL — Stylesheet principale Tema scuro tecnologico/futuristico Brand: nero + arancione #EE7D00 Font: Lexend (titoli) + Source Sans 3 (testo) ============================================ */ /* Font caricati via + preconnect nell' di ogni pagina (più veloce dell'@import). */ :root { --bg: #07080d; --bg-elev: #0c0e15; --surface: rgba(255, 255, 255, .035); --surface-strong: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .09); --border-glow: rgba(238, 125, 0, .45); --text: #f2f4f8; --text-soft: #c7cdd8; --text-muted: #97a0b0; --accent: #ee7d00; --accent-bright: #ff9a2e; --accent-glow: rgba(238, 125, 0, .32); --radius: 12px; --shadow-md: 0 12px 40px rgba(0, 0, 0, .45); --font-head: 'Lexend', system-ui, sans-serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --container: 1160px; } /* cinese: font CJK (Noto Sans SC, caricato solo quando si sceglie 中文) */ html[lang="zh"] { --font-head: 'Noto Sans SC', 'Lexend', system-ui, sans-serif; --font-body: 'Noto Sans SC', 'Source Sans 3', system-ui, sans-serif; } html[lang="zh"] .sv-head, html[lang="zh"] .sv-sub { font-family: 'Noto Sans SC', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* la pagina non deve MAI potersi spostare lateralmente */ overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Sfondo tecnologico: aurora + particelle + griglia ---------- */ body::before { content: ''; position: fixed; inset: -25%; z-index: -2; background: /* aurora */ radial-gradient(40% 32% at 16% 10%, rgba(238, 125, 0, .34), transparent 70%), radial-gradient(44% 36% at 88% 18%, rgba(70, 100, 190, .38), transparent 70%), radial-gradient(52% 42% at 72% 90%, rgba(238, 125, 0, .22), transparent 70%), radial-gradient(38% 32% at 8% 82%, rgba(52, 82, 160, .3), transparent 70%); animation: auroraDrift 18s ease-in-out infinite alternate; pointer-events: none; } @keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, -3%, 0) scale(1.12); } } body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(85% 75% at 50% 25%, #000 25%, transparent 100%); mask-image: radial-gradient(85% 75% at 50% 25%, #000 25%, transparent 100%); pointer-events: none; } /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 9999; background: #07080d; display: flex; align-items: center; justify-content: center; transition: opacity .65s ease, visibility .65s; } .preloader-inner { display: flex; flex-direction: column; align-items: center; } .preloader img { height: 72px; width: auto; opacity: 1; filter: drop-shadow(0 0 34px rgba(238, 125, 0, .4)); animation: preLogo .9s cubic-bezier(.16, 1, .3, 1) both; } @keyframes preLogo { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } } .preloader-bar { width: 180px; height: 2px; margin-top: 28px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; } .preloader-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transform: translateX(-100%); animation: preBar 1.15s .15s ease-in-out forwards; } @keyframes preBar { to { transform: translateX(0); } } .preloader.done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader.skip { display: none; } /* ---------- Titoli rivelati lettera per lettera (js/site.js) ---------- */ .st-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .13em; margin-bottom: -.13em; } .st-c { display: inline-block; opacity: 0; transform: translateY(1.15em) rotate(5deg); transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .45s ease; } .st-in .st-c { opacity: 1; transform: none; } /* ---------- Rete metallica WebGL (js/fx.js) ---------- */ /* quando la rete WebGL è attiva, la griglia CSS statica si spegne */ html.fx-on body::after { display: none; } #fx-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ---------- Cursore magnetico (solo desktop, js/fx.js) ---------- */ html.cur-on * { cursor: none !important; } html.cur-on input, html.cur-on textarea, html.cur-on select { cursor: auto !important; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; opacity: 0; } .cursor-dot.vis, .cursor-ring.vis { opacity: 1; } .cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--accent-bright); box-shadow: 0 0 14px var(--accent-glow); } .cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(255, 154, 46, .5); transition: width .25s, height .25s, margin .25s, border-color .25s, background .25s, opacity .3s; } .cursor-ring.on { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: rgba(255, 154, 46, .95); background: rgba(238, 125, 0, .1); } /* elementi con attrazione magnetica */ .magnet { transition: transform .35s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .magnet:hover { transition: transform .06s linear; } /* ---------- Reveal allo scroll (classi assegnate da js/site.js) ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); } .reveal.in { opacity: 1; transform: none; } img { max-width: 100%; display: block; } a { color: var(--accent-bright); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--text); } ::selection { background: rgba(238, 125, 0, .4); color: #fff; } /* Scrollbar scura (WebKit) */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #262a36; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #343a4a; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .site-header { /* fixed (non sticky): resta SEMPRE visibile — lo sticky si rompe con overflow-x non-visible sugli antenati (fix touch) */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(7, 8, 13, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* compensa l'header fisso */ body { padding-top: 77px; } /* linea di energia sotto l'header */ .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(238, 125, 0, .0) 20%, var(--accent) 50%, rgba(238, 125, 0, .0) 80%, transparent 100%); filter: drop-shadow(0 0 8px var(--accent-glow)); animation: headerBeam 6s ease-in-out infinite; pointer-events: none; } @keyframes headerBeam { 0%, 100% { transform: translateX(-32%); opacity: .55; } 50% { transform: translateX(32%); opacity: 1; } } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; } .logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none !important; } .logo img { height: 46px; width: auto; } /* tema scuro: si usa la versione bianca del logo */ .logo .logo-light { display: none; } .footer-logo img { height: 52px; width: auto; } .main-nav { display: flex; align-items: center; gap: 28px; } .main-nav a { font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--text-soft); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s, text-shadow .2s; } .main-nav a:hover { color: #fff; text-decoration: none; text-shadow: 0 0 14px var(--accent-glow); } .main-nav a.active { color: #fff; border-bottom-color: var(--accent); } .btn { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 15px; padding: 12px 26px; border-radius: 8px; cursor: pointer; border: none; transition: background .2s, box-shadow .25s, transform .15s; text-decoration: none !important; } /* ---------- Selettore lingua IT/EN ---------- */ .lang-switch { display: inline-flex; gap: 2px; margin-left: 6px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .04); } .lang-switch button { font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .5px; color: var(--text-muted); background: transparent; border: none; cursor: pointer; padding: 5px 11px; border-radius: 999px; transition: color .2s, background .2s; } .lang-switch button:hover { color: #fff; } .lang-switch button.on { color: #0b0800; background: linear-gradient(135deg, #ff9224, var(--accent)); } /* versione mobile: nell'header, sempre visibile (nascosta su desktop) */ .lang-switch-mobile { display: none; } .btn-primary { background: linear-gradient(135deg, #ff9224, var(--accent)); color: #0b0800; box-shadow: 0 0 22px var(--accent-glow); animation: btnPulse 3.2s ease-in-out infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 0 18px rgba(238, 125, 0, .28); } 50% { box-shadow: 0 0 38px rgba(238, 125, 0, .55); } } .btn-primary:hover { background: linear-gradient(135deg, #ffa040, #f88a10); box-shadow: 0 0 34px rgba(238, 125, 0, .5); transform: translateY(-1px); } .btn-dark { background: #1a1e29; color: #fff; border: 1px solid var(--border); } .btn-dark:hover { background: #232838; } .btn-outline-light { background: rgba(255, 255, 255, .03); color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); } .btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); box-shadow: 0 0 18px rgba(255, 255, 255, .12); } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2.5px; background: #fff; margin: 5px 0; border-radius: 2px; } /* ---------- Hero interno (pagine secondarie) ---------- */ .page-hero { position: relative; color: #fff; padding: 84px 0 72px; overflow: hidden; border-bottom: 1px solid var(--border); } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(46% 90% at 82% 10%, rgba(238, 125, 0, .34), transparent 70%), radial-gradient(40% 80% at 12% 100%, rgba(60, 90, 175, .38), transparent 70%), linear-gradient(115deg, transparent 42%, rgba(238, 125, 0, .1) 50%, transparent 58%); pointer-events: none; } .page-hero .container { position: relative; } .page-hero h1 { color: #fff; font-size: clamp(32px, 4.5vw, 46px); letter-spacing: -.5px; } .page-hero p { color: var(--text-soft); font-size: 19px; max-width: 640px; margin-top: 16px; } .page-hero .eyebrow { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 14px; } /* ---------- Sezioni ---------- */ .section { padding: 88px 0; } .section.alt { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .012)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-head { max-width: 640px; margin-bottom: 52px; } .section-head .eyebrow { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 12px; } .section-head h2 { font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -.5px; } .section-head p { color: var(--text-muted); font-size: 18px; margin-top: 14px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* ---------- Card griglia servizi ---------- */ .grid { display: grid; gap: 28px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 30px; backdrop-filter: blur(6px); transition: border-color .3s, box-shadow .3s, transform .3s, background .3s; } .card:hover { background: var(--surface-strong); border-color: var(--border-glow); box-shadow: 0 0 0 1px rgba(238, 125, 0, .18), 0 14px 44px rgba(0, 0, 0, .5), 0 0 42px rgba(238, 125, 0, .1); transform: translateY(-4px); } .card .icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(238, 125, 0, .13); border: 1px solid rgba(238, 125, 0, .3); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; box-shadow: 0 0 18px rgba(238, 125, 0, .12); } .card .icon svg { width: 24px; height: 24px; } .card h3 { font-size: 20px; margin-bottom: 10px; } .card p { color: var(--text-muted); font-size: 16px; } .card .card-link { display: inline-block; margin-top: 16px; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--accent-bright); } /* ---------- Numeri ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; } .stat .num { font-family: var(--font-head); font-size: clamp(36px, 4.5vw, 52px); font-weight: 800; color: var(--accent-bright); letter-spacing: -1px; text-shadow: 0 0 28px var(--accent-glow); } .stat .label { font-family: var(--font-head); font-size: 14.5px; font-weight: 500; color: var(--text-muted); margin-top: 6px; letter-spacing: .3px; } /* ---------- Foto / placeholder ---------- */ .photo { border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #12151f, #1c2130); border: 1px solid var(--border); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-family: var(--font-head); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; padding: 20px; } .photo.wide { aspect-ratio: 21 / 9; } .photo img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Split (testo + foto) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split h2 { font-size: clamp(26px, 3.2vw, 34px); margin-bottom: 18px; letter-spacing: -.4px; } .split h2 .accent { color: var(--accent-bright); text-shadow: 0 0 26px rgba(238, 125, 0, .35); } .split p { color: var(--text-muted); margin-bottom: 14px; } /* ---------- Liste check ---------- */ .checklist { list-style: none; margin-top: 20px; } .checklist li { position: relative; padding-left: 32px; margin-bottom: 12px; color: var(--text-soft); } .checklist li::before { content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-bright); filter: drop-shadow(0 0 6px var(--accent-glow)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Tabella formati ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(6px); } table.formats { width: 100%; border-collapse: collapse; font-size: 16px; } table.formats th { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: 1.2px; text-align: left; color: var(--accent-bright); background: rgba(255, 255, 255, .03); padding: 16px 22px; border-bottom: 1px solid var(--border); } table.formats td { padding: 16px 22px; border-bottom: 1px solid var(--border); color: var(--text-soft); } table.formats tr:last-child td { border-bottom: none; } table.formats tr:hover td { background: rgba(238, 125, 0, .05); } table.formats td:first-child { font-family: var(--font-head); font-weight: 600; color: var(--text); } /* ---------- CTA band ---------- */ .cta-band { position: relative; color: #fff; padding: 84px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-elev); } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 120%, rgba(238, 125, 0, .22), transparent 70%); pointer-events: none; } .cta-band .container { position: relative; } .cta-band h2 { color: #fff; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.5px; } .cta-band p { color: var(--text-soft); font-size: 18px; margin: 16px auto 32px; max-width: 560px; } /* ---------- Form contatti ---------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; backdrop-filter: blur(6px); box-shadow: var(--shadow-md); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { margin-bottom: 20px; } .field label { display: block; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; margin-bottom: 7px; color: var(--text-soft); } .field label .req { color: var(--accent-bright); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, .045); color: var(--text); transition: border-color .2s, box-shadow .2s, background .2s; } .field select option { background: #12151f; color: var(--text); } .field input::placeholder, .field textarea::placeholder { color: #6b7486; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 3px rgba(238, 125, 0, .22), 0 0 20px rgba(238, 125, 0, .12); } .field textarea { resize: vertical; min-height: 130px; } .info-block { margin-bottom: 30px; } .info-block h3 { font-size: 17px; margin-bottom: 8px; } .info-block p { color: var(--text-muted); } .info-block a { font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { background: #05060a; color: var(--text-muted); padding: 64px 0 32px; font-size: 15px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .site-footer h4 { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: 10px; } .site-footer a { color: var(--text-muted); } .site-footer a:hover { color: var(--accent-bright); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: #6b7486; } .footer-legal { display: flex; gap: 8px; } .footer-legal a { color: var(--text-muted); } .footer-legal a:hover { color: var(--accent-bright); } /* ---------- Pagine legali (privacy / cookie) ---------- */ .legal { max-width: 820px; } .legal .legal-note { color: var(--text-muted); font-size: 15px; padding: 12px 16px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .03); border-radius: 0 8px 8px 0; margin-bottom: 32px; } .legal h2 { font-size: clamp(20px, 2.4vw, 25px); margin: 40px 0 12px; letter-spacing: -.3px; } .legal h2:first-of-type { margin-top: 8px; } .legal p { color: var(--text-soft); margin-bottom: 14px; } .legal ul { margin: 0 0 18px 22px; color: var(--text-soft); } .legal li { margin-bottom: 8px; } .legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(255, 255, 255, .06); padding: 2px 7px; border-radius: 5px; color: var(--accent-bright); } .legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: 15.5px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .legal-table th { text-align: left; font-family: var(--font-head); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--accent-bright); background: rgba(255, 255, 255, .03); padding: 12px 16px; border-bottom: 1px solid var(--border); } .legal-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-soft); vertical-align: top; } .legal-table tr:last-child td { border-bottom: none; } /* ---------- Banner cookie ---------- */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000; max-width: 940px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 18px 22px; background: rgba(12, 14, 21, .96); backdrop-filter: blur(12px); border: 1px solid var(--border-glow); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(238, 125, 0, .1); } .cookie-banner[hidden] { display: none; } .cookie-banner .cookie-text { font-size: 14.5px; color: var(--text-soft); margin: 0; line-height: 1.55; } .cookie-banner .cookie-text a { color: var(--accent-bright); } .cookie-banner #cookie-ok { flex: none; white-space: nowrap; animation: none; } @media (max-width: 680px) { .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); gap: 36px; } .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { body { font-size: 16px; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .section { padding: 64px 0; } .form-row { grid-template-columns: 1fr; } .nav-toggle { display: block; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(7, 8, 13, .97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 20px; box-shadow: var(--shadow-md); } .main-nav.open { display: flex; } .main-nav a { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--border); } .main-nav a.active { border-bottom-color: var(--accent); } .main-nav .btn { margin-top: 16px; text-align: center; } /* su mobile: nascondi il selettore dentro il menu, mostra quello nell'header */ .main-nav .lang-switch { display: none; } .nav-toggle { order: 3; } .lang-switch-mobile { display: inline-flex; order: 2; margin-left: auto; margin-right: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* ---------- Rete e partnership (sezione discreta) ---------- */ .net-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; } .net-card { padding: 28px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; transition: border-color .3s ease, transform .3s ease; } .net-card:hover { border-color: var(--border-glow); transform: translateY(-3px); } .net-role { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-bright); } .net-name { font-family: var(--font-head); font-weight: 700; font-size: 23px; margin: 10px 0 12px; color: var(--text); } .net-card p { color: var(--text-muted); margin: 0 0 18px; flex: 1; } .net-link { align-self: flex-start; font-weight: 600; color: var(--text-soft); border-bottom: 1px solid var(--border-glow); padding-bottom: 2px; transition: color .2s ease; } .net-link:hover { color: var(--accent-bright); } .net-soon { align-self: flex-start; font-size: 13px; color: var(--text-muted); font-style: italic; } @media (max-width: 820px) { .net-grid { grid-template-columns: 1fr; } } .net-logo { height: 46px; width: auto; max-width: 80%; object-fit: contain; margin: 8px 0 14px; align-self: flex-start; } .net-card .net-name + p, .net-card .net-logo + p { margin-top: 0; }