/* ============================================================= Lavora con noi — /lavora-con-noi/ Namespace .lwn- (pagina nuova, 2026-09-20). Pagina volutamente corta: tre sezioni e basta. 1 · apertura: la frase a sinistra, l'officina vera a destra (video 14 s) 2 · i ruoli: sei schede, ognuna preseleziona il ruolo nel modulo 3 · la candidatura: colonna editoriale + modulo (campi da style.css) Le intestazioni di sezione sono allineate a sinistra, non centrate: la pagina parla a una persona, non a una platea. Niente foto di persone: nell'archivio non ne esiste nessuna e non si comprano foto stock (vedi la rimozione dei progetti finti). ============================================================= */ .page-lwn { --lwn-ink: #0b1220; --lwn-copy: #56627a; --lwn-gray: #7b889c; --lwn-quiet: #aab3c2; --lwn-accent: #2563eb; --lwn-accent-ink: #1d4ed8; --lwn-accent-deep: #1e3a8a; --lwn-accent-soft: rgba(37, 99, 235, 0.09); --lwn-mist: #f5f5f7; --lwn-rule: rgba(15, 23, 42, 0.1); --lwn-pad: clamp(84px, 10vw, 150px); --lwn-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* .page-home-corporate impone main{overflow:hidden}: con quello il palco fermo della sezione 3 non funziona. Qui basta non far scorrere di lato. */ body.page-lwn main { overflow-x: clip; overflow-y: visible; padding-top: 0; background: #ffffff; } .lwn-wrap { width: min(100% - 40px, var(--max-width, 1200px)); margin-inline: auto; } .page-lwn section[id] { scroll-margin-top: 72px; } .page-lwn :is(a, button):focus-visible { outline: 3px solid var(--lwn-accent); outline-offset: 4px; border-radius: 4px; } /* ---------- tipografia comune ---------- */ .lwn-eyebrow { margin: 0; color: var(--lwn-accent-deep); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .lwn-head { max-width: 900px; margin: 0 0 clamp(36px, 4.6vw, 64px); } .lwn-title { margin: 0.4em 0 0; color: var(--lwn-ink); font-size: clamp(2.2rem, 4.9vw, 4.2rem); font-weight: 790; letter-spacing: -0.045em; line-height: 1.03; text-wrap: balance; } .lwn-title span { display: block; color: var(--lwn-gray); } .lwn-lede { margin: 22px 0 0; max-width: 62ch; color: var(--lwn-copy); font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.58; } /* link con freccia: niente icone decorative, solo il segno del movimento */ .lwn-link { display: inline-flex; align-items: baseline; gap: 8px; color: var(--lwn-accent-ink); font-weight: 750; text-decoration: none; } .lwn-link::after { content: "\2192"; transition: transform 0.3s var(--lwn-ease); } .lwn-link:hover { text-decoration: underline; } .lwn-link:hover::after { transform: translateX(4px); } /* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel ) */ .reveal-ready .lwn-in { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--lwn-ease), transform 0.8s var(--lwn-ease); } .reveal-ready .lwn-in.is-in { opacity: 1; transform: none; } /* ============================================================= 1 · APERTURA ============================================================= */ .lwn-hero { padding-block: clamp(48px, 6.5vw, 96px) clamp(40px, 5vw, 76px); } .lwn-hero__grid { display: grid; gap: clamp(34px, 5vw, 64px); align-items: center; } .lwn-hero h1 { margin: 0.3em 0 0; color: var(--lwn-ink); font-size: clamp(2.8rem, 6vw, 5.2rem); font-weight: 790; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; } .lwn-hero h1 span { display: block; color: var(--lwn-gray); } .lwn-hero__lead { margin: 26px 0 0; max-width: 44ch; color: var(--lwn-copy); font-size: clamp(1.05rem, 1.4vw, 1.26rem); line-height: 1.55; } .lwn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 36px); } .lwn-hero__reassure { margin: 18px 0 0; color: var(--lwn-gray); font-size: var(--fs-caption); } /* la finestra: proporzione fissa, bordo sottile, ombra bassa. .hero__video (style.css) e' position:absolute: il riquadro deve essere relativo e avere una proporzione sua, altrimenti collassa. */ .lwn-hero__window { position: relative; margin: 0; } .lwn-hero__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--lwn-rule); border-radius: 18px; background: var(--lwn-mist); box-shadow: 0 26px 60px rgba(15, 23, 42, 0.13); } .lwn-hero__media video, .lwn-hero__media img { width: 100%; height: 100%; object-fit: cover; } .lwn-hero__cap { display: grid; gap: 4px; margin-top: 14px; padding-left: 2px; } .lwn-hero__cap-k { color: var(--lwn-accent-deep); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .lwn-hero__cap b { color: var(--lwn-copy); font-size: var(--fs-caption); font-weight: 600; line-height: 1.45; transition: opacity 0.18s ease; } /* ============================================================= 2 · I RUOLI ============================================================= */ .lwn-mestieri { padding-block: var(--lwn-pad); background: #ffffff; } .lwn-jobs { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .lwn-job { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border: 1px solid var(--lwn-rule); border-radius: 18px; background: #ffffff; transition: border-color 0.3s var(--lwn-ease), box-shadow 0.3s var(--lwn-ease); } .lwn-job:hover { border-color: rgba(37, 99, 235, 0.32); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08); } .lwn-job h3 { margin: 0; color: var(--lwn-ink); font-size: clamp(1.28rem, 1.8vw, 1.55rem); font-weight: 790; letter-spacing: -0.03em; line-height: 1.1; } .lwn-job dl { margin: 20px 0 0; display: grid; gap: 4px; } .lwn-job dt { color: var(--lwn-quiet); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .lwn-job dt + dd { margin-top: 2px; } .lwn-job dd { margin: 0 0 14px; color: var(--lwn-copy); font-size: var(--fs-caption); line-height: 1.55; } .lwn-job dd:last-of-type { margin-bottom: 0; } .lwn-job__cta { align-self: flex-start; margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid var(--lwn-rule); width: 100%; text-align: left; background: none; color: var(--lwn-accent-ink); font: inherit; font-size: var(--fs-caption); font-weight: 750; cursor: pointer; } .lwn-job__cta::after { content: "\2192"; margin-left: 8px; display: inline-block; transition: transform 0.3s var(--lwn-ease); } .lwn-job:hover .lwn-job__cta::after { transform: translateX(4px); } .lwn-jobs__note { margin: clamp(26px, 3vw, 38px) 0 0; max-width: 62ch; color: var(--lwn-copy); font-size: var(--fs-caption); line-height: 1.6; } .lwn-jobs__note b { color: var(--lwn-ink); font-weight: 750; } /* ============================================================= 3 · LA CANDIDATURA I campi arrivano da style.css (.form, .form__*): qui si sistemano solo l'impaginazione, le pastiglie del ruolo e il pannello di conferma. Niente di sistema */ .lwn-chips { margin: 0; padding: 0; border: 0; } .lwn-chips legend { padding: 0; color: color-mix(in srgb, var(--lwn-accent-deep) 74%, var(--lwn-copy)); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .lwn-chips__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .lwn-chip { position: relative; } .lwn-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .lwn-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid var(--lwn-rule); border-radius: 999px; background: #ffffff; color: var(--lwn-copy); font-size: var(--fs-caption); font-weight: 650; line-height: 1.2; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .lwn-chip:hover span { border-color: rgba(37, 99, 235, 0.35); } .lwn-chip input:checked + span { border-color: var(--lwn-accent); background: var(--lwn-accent-soft); color: var(--lwn-accent-deep); font-weight: 780; } .lwn-chip input:focus-visible + span { outline: 3px solid var(--lwn-accent); outline-offset: 3px; } /* conferma: prende il posto del modulo a invio riuscito */ [data-mod-shell][data-done] .lwn-form { display: none; } .lwn-mod__done { padding: clamp(26px, 3.2vw, 40px); border: 1px solid rgba(37, 99, 235, 0.28); border-radius: 22px; background: var(--lwn-accent-soft); } .lwn-mod__done:focus { outline: none; } .lwn-mod__done-k { margin: 0; color: var(--lwn-accent-deep); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .lwn-mod__done h3 { margin: 0.4em 0 0; color: var(--lwn-ink); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 790; letter-spacing: -0.03em; line-height: 1.15; } .lwn-mod__done p { margin: 16px 0 0; max-width: 52ch; color: var(--lwn-copy); font-size: var(--fs-caption); line-height: 1.6; } .lwn-mod__done-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; } @media (min-width: 861px) { .lwn-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); } .lwn-mod__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .lwn-mod__side { position: sticky; top: calc(var(--nav-height, 50px) + 28px); } } @media (max-width: 640px) { .lwn-hero__actions .button { width: 100%; justify-content: center; } }