/* ===================================================== LIGHT-BODY EXPERIMENT — POC redesign Accenture-style Branch: redesign-light-body Scope: body.light-body (only on pages with that class) Strategy: dark hero (full-bleed) + light body + dark CTA + dark footer ===================================================== */ body.light-body { --paper: #FFFFFF; /* bianco puro — body bg base */ --paper-band: #D8DFE8; /* slate cool saturo per band (zero giallo, brand-coerente) */ --paper-alt: #F7F9FB; /* sub-tone hover */ --paper-elevated: #FFFFFF; /* card bg (pure white) */ --ink-dark: #0A1628; /* primary text (== --bg, navy hero) */ --ink-dark-soft: #4A5568; /* secondary text — navy-mute per gerarchia visiva (lede, body p, descriptions) */ --ink-dark-mute: #4A5568; /* tertiary / metadata only */ --line-dark-soft: rgba(10, 22, 40, 0.22); /* line visibile su cream */ --line-dark-faint: rgba(10, 22, 40, 0.10); --accent-on-light: #A01729; /* red on cream — AA compliant */ --accent-on-light-bright: #C41E3A; --card-shadow: 0 1px 2px rgba(10,22,40,0.06), 0 6px 20px rgba(10,22,40,0.08); --card-shadow-hover: 0 4px 12px rgba(10,22,40,0.10), 0 16px 40px rgba(10,22,40,0.14); background: var(--paper); color: var(--ink-dark); } /* ===================================================== NAV — resta dark trasparente, MA i suoi link ereditano il color: navy del body. Forziamoli cream esplicitamente altrimenti diventano navy-su-navy (invisibili). ===================================================== */ body.light-body .nav, body.light-body .nav a, body.light-body .nav__dropdown-trigger, body.light-body .lang-switcher__current, body.light-body .lang-switcher__alt, body.light-body .lang-switcher__sep { color: var(--ink); } /* ===================================================== HERO — restiamo DARK ma con effetto full-bleed. .page-hero ha max-width: 1440px e margin auto, quindi va "rotto" verso i bordi viewport per dare il fondo navy edge-to-edge. ===================================================== */ body.light-body .page-hero { background: var(--bg); color: var(--ink); max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(var(--gutter), calc(50vw - var(--container)/2 + var(--gutter))); padding-right: max(var(--gutter), calc(50vw - var(--container)/2 + var(--gutter))); padding-top: 170px; padding-bottom: 60px; position: relative; overflow: hidden; } /* 100vh full-bleed SOLO per hero con media (cosa-facciamo, azienda, portfolio, lavora-con-noi). La contatti usa plain .page-hero (singola colonna icona+testo) e non serve drama 100vh — torna ad altezza naturale. */ body.light-body .page-hero--media { min-height: 100vh; min-height: 100dvh; padding-top: 120px; padding-bottom: 80px; } /* Immagine hero piu dominante per riempire il 100vh — bumped da 540 a 620px max */ body.light-body .page-hero__media { max-width: 620px; } /* CONTATTI — .page-hero__icon: nessun override. Posizionamento absolute top-right originale preservato. (Scope POC: solo colori, no struttura/layout) */ /* ===================================================== HOME .hero (index.html) — anch'essa 100vh full per evitare "scalino bianco" quando l'8% sotto la hero (originale 92vh) mostrava bg dark del resto del sito ma su light-body diventa bianco visibile sotto la hero dark. color: var(--ink) cream esplicito: il titolo .hero__title non ha color: dichiarato, eredita da body. Su light-body body color e' navy -> il titolo navy su hero dark video = invisibile. Forzo cream. ===================================================== */ body.light-body .hero { min-height: 100vh; min-height: 100dvh; color: var(--ink); position: relative; justify-content: center; } /* Scroll cue minimal sulla home .hero (uguale a quello di .page-hero--media). Sostituisce il chevron+dot+line originale per coerenza visiva tra hero. */ body.light-body .hero__scroll { display: none; } body.light-body .hero::before { content: ""; position: absolute; left: 50%; bottom: 32px; width: 2px; height: 56px; background: linear-gradient(to bottom, transparent 0%, var(--ink) 50%, transparent 100%); transform: translateX(-50%); animation: heroScrollCue 2.4s ease-in-out infinite; z-index: 2; pointer-events: none; } @media (prefers-reduced-motion: reduce) { body.light-body .hero::before { animation: none; opacity: 0.5; } } /* ===================================================== CASE CARDS (home — Armonizzazione processi SAP / Manufacturing / ecc.) .case ha bg dark navy (var --bg-alt) esplicito → resta dark. .case__title NON ha color esplicito → eredita da body. Su light-body body color = navy → titolo navy su card navy = invisibile. Forzo color cream sulla .case, i child inherit cream. ===================================================== */ body.light-body .case { color: var(--ink); } /* ===================================================== EURISKO VERTICAL WORDMARK — inversione cromatica su light: base ROSSA crimson (era cream invisibile su bianco, poi navy dopo primo fix), hover NAVY (era crimson sul dark, ora swap). Logica: su light la base attira piu' del navy, hover navy reveal piu' calmo. ===================================================== */ body.light-body .eurisko-wordmark span::before { color: var(--accent-on-light-bright); } body.light-body .eurisko-wordmark span::after { color: var(--ink-dark); } /* ===================================================== QUOTE ATTRIBUTION — .quote__role usa var --ink-soft (#B8BDC9 light grey, pensato per dark). Su bianco si perde. Sposto a navy mute (#4A5568) come metadata leggibile su light. ===================================================== */ body.light-body .quote__role { color: var(--ink-dark-mute); } /* ===================================================== BODY DESCRIPTIVE TEXTS — gli altri paragrafi tipo .commitment__text (azienda D&I/Sostenibilita/Etica) e tutti i .lede in tutte le pagine (anche dentro .section--tight, .container, ecc che il selettore .section .lede non catturava) ricevono lo stesso tono navy-mute #4A5568. ===================================================== */ body.light-body .commitment__text, body.light-body .lede { color: var(--ink-dark-mute); } /* Eccezione: .page-hero__lede dentro hero dark resta cream-soft */ body.light-body .page-hero .lede { color: var(--ink-soft); } /* Eccezione: .hero (home) e .page-hero hanno bg dark navy. Eyebrow text in CREAM (come gli span dei page-hero crumbs) per matching con linguaggio "EURISKO / COSA FACCIAMO". Dash ::before resta accent red. */ body.light-body .hero .eyebrow, body.light-body .page-hero .eyebrow { color: var(--ink); } body.light-body .hero .eyebrow::before, body.light-body .page-hero .eyebrow::before { background: var(--accent-text); } body.light-body .hero .lede { color: var(--ink-soft); } /* Page-hero crumbs (EURISKO / COSA FACCIAMO etc): aggiunto dash rosso accent come prefix per coerenza visiva con gli eyebrow. .page-hero__crumbs ha display: flex gap: 12px, il ::before diventa primo flex item. */ body.light-body .page-hero__crumbs::before { content: ""; width: 28px; height: 2px; background: var(--accent-text); align-self: center; } /* ===================================================== AZIENDA — .value boxes (VISIONE / OBIETTIVO / METODO) .value ha bg var --bg navy esplicito, .value__text eredita color da body = navy su navy invisibile. Forzo cream sul parent. ===================================================== */ body.light-body .value { color: var(--ink); } /* ===================================================== LAVORA CON NOI — .values--4cols (Perche Eurisko box ambiente di lavoro) Allineato a caps Moduli SAP / azienda team boxes: slate band + container bianco unificato + celle .value transparent con bordi interni. Modifier --4cols specifico distingue da .values azienda VISIONE/OBIETTIVO/METODO che restano dark. ===================================================== */ body.light-body section:has(.values--4cols) { background: var(--paper-band); } body.light-body .values--4cols { background: #FFFFFF; border: 1px solid var(--line-dark-soft); box-shadow: var(--card-shadow); } body.light-body .values--4cols .value { background: transparent !important; color: var(--ink-dark) !important; border-right: 1px solid var(--line-dark-faint); border-bottom: 1px solid var(--line-dark-faint); transition: background 0.3s var(--ease); } body.light-body .values--4cols .value:hover { background: rgba(10, 22, 40, 0.035) !important; } body.light-body .values--4cols .value__text { color: var(--ink-dark-mute) !important; } /* ===================================================== AZIENDA — Il team section: slate band + team-grid white container unificato come i caps Moduli SAP di cosa-facciamo. Member cells con bordi interni navy-faint, no individual shadow. Target via :has(.team-grid) per individuare la section containing. ===================================================== */ body.light-body section:has(.team-grid) { background: var(--paper-band); } body.light-body .team-grid { background: #FFFFFF; border: 1px solid var(--line-dark-soft); box-shadow: var(--card-shadow); } body.light-body .member { background: transparent !important; color: var(--ink-dark); border: none !important; border-right: 1px solid var(--line-dark-faint) !important; border-bottom: 1px solid var(--line-dark-faint) !important; box-shadow: none; padding: 40px 36px; min-height: 320px; transition: background 0.3s var(--ease); } body.light-body .member:hover { background: rgba(10, 22, 40, 0.035) !important; transform: none; box-shadow: none; } body.light-body .member__role { font-size: 0.875rem; color: var(--accent-on-light); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; margin-bottom: 10px; } body.light-body .member:hover .member__role { color: var(--accent-on-light-bright); } body.light-body .member__name { font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-dark); max-width: 14ch; } body.light-body .member .eyebrow { font-size: 0.875rem; letter-spacing: 0.18em; color: var(--accent-on-light); } body.light-body .member .eyebrow::before { background: var(--accent-on-light); } /* ===================================================== AZIENDA — .ourvalues__text (Quattro promesse descrizioni) Card bg trasparente (eredita dal body bianco), .ourvalues__text usa var --ink-soft #B8BDC9 light grey pensato per dark, su bianco si perde. Sposto a navy mute leggibile. ===================================================== */ body.light-body .ourvalues__text { color: var(--ink-dark-mute); } /* ===================================================== PORTFOLIO — .logo-cell (clienti + partner) box navy con hover rosso Originale: transparent bg + var --ink-soft text (per dark body). Su light body si perde. Trasformo in box navy con cream text e hover rosso (replica della logica dark mode "BIOTEST highlight"). ===================================================== */ body.light-body .logo-cell { background: var(--bg); color: var(--ink); border-right: none; border-bottom: none; } /* Box separati con gap invece di griglia continua con bordi: ogni cella diventa un blocco indipendente, niente piu' "mappazzone" visivo. */ body.light-body .logos-grid { border-top: none; border-left: none; gap: 12px; } body.light-body .logo-cell:hover { background: var(--accent); color: var(--ink); } body.light-body .logo-cell a { color: inherit; } /* Cella inerte "ALTRI+": navy box ma testo grey/muto, no hover */ body.light-body .logo-cell--inert, body.light-body .logo-cell--inert:hover { background: var(--bg); color: var(--ink-soft); cursor: default; } /* Partner (logos-grid con aria-label specifico) — inversione cromatica rispetto ai clienti: bg rosso accent di base, hover navy. Distinguibili visivamente dai clienti senza modifiche strutturali. */ body.light-body [aria-label="Partner di consulenza Eurisko"] .logo-cell, body.light-body [aria-label="Eurisko consulting partners"] .logo-cell { background: var(--accent); color: var(--ink); } body.light-body [aria-label="Partner di consulenza Eurisko"] .logo-cell:hover, body.light-body [aria-label="Eurisko consulting partners"] .logo-cell:hover { background: var(--bg); color: var(--ink); } body.light-body [aria-label="Partner di consulenza Eurisko"] .logo-cell--inert, body.light-body [aria-label="Partner di consulenza Eurisko"] .logo-cell--inert:hover, body.light-body [aria-label="Eurisko consulting partners"] .logo-cell--inert, body.light-body [aria-label="Eurisko consulting partners"] .logo-cell--inert:hover { background: var(--accent); color: var(--ink-soft); cursor: default; } /* Mobile: nascondi la cella inerte "Altri+"/"More+" nella griglia partner. */ @media (max-width: 1023px) { body.light-body [aria-label="Partner di consulenza Eurisko"] .logo-cell--inert, body.light-body [aria-label="Eurisko consulting partners"] .logo-cell--inert { display: none; } } /* Font piu' grande su TUTTI i box loghi (partner + clienti, portfolio e settori), SOLO desktop. Approvato sui partner, esteso ai clienti. */ @media (min-width: 1024px) { body.light-body .logo-cell { font-size: clamp(24px, 2.2vw, 34px); } } /* Mobile: font dei box loghi piu' grande, proporzionato ai box piu' piccoli. */ @media (max-width: 1023px) { body.light-body .logo-cell { font-size: clamp(16px, 4.6vw, 22px); } } /* Home mobile — box "Otto aree" (.caps): titolo ancorato in alto, descrizione ancorata in basso. Le celle della stessa riga hanno altezza uguale (grid), quindi i .cap__desc si allineano sul fondo a prescindere dalla lunghezza di titolo e testo. */ @media (max-width: 820px) { body.light-body .cap__desc { margin-top: auto; } } /* ===================================================== STATS (lavora-con-noi + portfolio + altri) — .stat__label sotto i numeri usa var --ink-soft light grey, su bianco si perde. .stat__num inherita da body navy -> visibile su bianco, ok. ===================================================== */ body.light-body .stat__label { color: var(--ink-dark-mute); } /* ===================================================== LAVORA CON NOI — .approach-step (iter selezione "Come funziona") .approach-step__desc usa probabilmente --ink-soft, su bianco si perde. ===================================================== */ body.light-body .approach-step__desc { color: var(--ink-dark-mute); } /* ===================================================== SCROLL CUE — strappato il colore var --ink-soft (light grey), troppo timido sul navy del page-hero. Bumpato a var --ink cream, spessore 2px, altezza 56px, opacita min 0.4 (sempre visibile). ===================================================== */ /* Scroll cue al fondo della hero: piccola freccia animata che indica "scorri sotto" Eredita lo stile minimal di McKinsey/Bain ("Scorri il testo" / chevron) */ body.light-body:not(.light-body--compact) .page-hero--media::before { content: ""; position: absolute; left: 50%; bottom: 32px; width: 2px; height: 56px; background: linear-gradient(to bottom, transparent 0%, var(--ink) 50%, transparent 100%); transform: translateX(-50%); animation: heroScrollCue 2.4s ease-in-out infinite; z-index: 2; pointer-events: none; } @keyframes heroScrollCue { 0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(-10px); } 50% { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (prefers-reduced-motion: reduce) { body.light-body:not(.light-body--compact) .page-hero--media::before { animation: none; opacity: 0.5; } } /* Sottile glow rosso in hero per dare profondita' e legare visivamente col CTA finale. Due aloni sui LATI (sinistra + destra), spostati in basso: la parte superiore (verso l'header) resta navy pulita, senza sfumatura rossa. Sulle pagine con media il drop-shadow dell'immagine aggiunge il glow attorno ad essa. */ body.light-body .page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 50% at 0% 72%, rgba(196, 30, 58, 0.14) 0%, transparent 70%), radial-gradient(46% 55% at 100% 66%, rgba(196, 30, 58, 0.18) 0%, transparent 70%); pointer-events: none; z-index: 0; } body.light-body .page-hero > *:not(.page-hero__icon) { position: relative; z-index: 1; } /* Menu header: font piu grande (era 0.875rem/14px) per migliore leggibilita/presenza */ body.light-body .nav__links { font-size: 1rem; } body.light-body .nav__links a, body.light-body .nav__dropdown-trigger { white-space: nowrap; } /* ===================================================== HAMBURGER (<=1024px) — icona distintiva, non tre linee anonime: linea centrale piu corta e in accent rosso, right-aligned, con micro-interazione hover (si allunga a tutta larghezza). Apertura: morph in X (le linee piene ruotano, la rossa centrale svanisce). Posizione: burger a SINISTRA, logo CENTRATO (sia chiuso sia aperto). ===================================================== */ body.light-body .nav__burger span { transition: width .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease); } body.light-body .nav__burger span:nth-child(2) { width: 15px; align-self: flex-end; background: var(--accent-text); } body.light-body .nav__burger:hover span:nth-child(2) { width: 26px; } @media (max-width: 1200px) { /* CHIUSO: burger a sinistra, logo centrato, search a destra */ body.light-body .nav:not(.open) .nav__burger { order: -1; } body.light-body .nav:not(.open) .nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* APERTO: X di chiusura in alto a sinistra, logo in alto al centro */ body.light-body .nav.open .nav__burger { left: var(--gutter); right: auto; } body.light-body .nav.open .nav__logo { left: 50%; right: auto; transform: translateX(-50%); } } /* Crumb/title/lede dentro hero restano sui token dark originali — gia' coerenti */ /* ===================================================== SEZIONI BODY — alternanza ritmica cream / band warmer Layout cosa-facciamo: hero (dark) 1. Consulenza .section → cream 2. Moduli .section--tight → BAND 3. Settori .section--top-md → cream 4. S/4HANA .section--top-md → BAND 5. AMS .section--top-md → cream cta-block (dark) ===================================================== */ body.light-body .section { background: var(--paper); color: var(--ink-dark); } /* Mappa sezioni
figli di
: 1: page-hero → dark (full-bleed) 2: Consulenza .section → white 3: Moduli .section → BAND tan 4: Settori .section → white 5: S/4HANA .section → DARK NAVY full-bleed (drama: pitch 2027) 6: AMS .section → white + red wash radiale al fondo (close ancorato) 7: cta-block .section → dark (proprio bg) */ body.light-body--cosa-facciamo main > section.section:nth-of-type(3) { background: var(--paper-band); } /* ===================================================== SECTION 5 — S/4HANA full dark navy band (drama editoriale) Pillars tornano in dark mode SOLO dentro questa sezione ===================================================== */ body.light-body--cosa-facciamo main > section.section:nth-of-type(5) { background: var(--bg); color: var(--ink); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .eyebrow { color: var(--ink-soft); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .eyebrow::before { background: var(--accent-text); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .h1, body.light-body--cosa-facciamo main > section.section:nth-of-type(5) h2 { color: var(--ink); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .lede { color: var(--ink-soft); } /* Pillars revert al dark mode originale per questa sezione */ body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .pillars { background: var(--line-faint); gap: 1px; padding-block: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .pillar { background: var(--bg); color: var(--ink); box-shadow: none; transform: none; } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .pillar:hover { background: var(--bg-elevated); color: var(--ink); box-shadow: none; transform: none; border-top: 1px solid var(--accent); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .pillar__num { color: var(--accent-text); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .pillar__title { color: var(--ink); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .pillar__desc { color: var(--ink-soft); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .link-arrow { color: var(--ink); border-bottom-color: var(--line-soft); } body.light-body--cosa-facciamo main > section.section:nth-of-type(5) .link-arrow:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); } /* ===================================================== SECTION 6 — AMS resta bianco puro. Taglio netto verso il CTA gradient: il CTA ha gia gradient navy->crimson + glow radiale, aggiungere bridge cromatico ruberebbe scena al "punch" finale. Silenzio bianco prima del CTA. ===================================================== */ /* Section header: eyebrow rosso uniforme su TUTTE le pagine (allargato da .section .eyebrow a tutto .eyebrow per catturare anche .section--tight (portfolio), .hero (home) e qualunque altro contesto. Coerenza cromatica garantita.) */ body.light-body .eyebrow { color: var(--accent-on-light); } body.light-body .eyebrow::before { background: var(--accent-on-light); } body.light-body .section .h1, body.light-body .section h2 { color: var(--ink-dark); } body.light-body .section .lede { color: var(--ink-dark-soft); } /* em italic gradient rimane invariato (gradient red su qualsiasi bg funziona) */ /* ===================================================== SERVICE ROWS (Consulenza SAP) ===================================================== */ body.light-body .service-row { border-top-color: var(--line-dark-soft); } body.light-body .service-row:last-child { border-bottom-color: var(--line-dark-soft); } body.light-body .service-row__num { color: var(--accent-on-light); } body.light-body .service-row__title { color: var(--ink-dark); } body.light-body .service-row__body p { color: var(--ink-dark-soft); } body.light-body .tag { border-color: var(--line-dark-soft); color: var(--ink-dark-soft); } body.light-body .tag:hover { border-color: var(--accent-on-light); color: var(--accent-on-light); } /* abbr: rimuovi underline ereditato e armonizza */ body.light-body abbr[title] { text-decoration-color: var(--line-dark-soft); } /* ===================================================== CAPS — Moduli SAP (griglia 5 col) Fill bianco + border perimetrale + shadow per staccare da cream ===================================================== */ body.light-body .caps { background: #FFFFFF; border: 1px solid var(--line-dark-soft); border-top: 1px solid var(--line-dark-soft); box-shadow: var(--card-shadow); } body.light-body .cap { border-right-color: var(--line-dark-faint); border-bottom-color: var(--line-dark-faint); } body.light-body a.cap { color: var(--ink-dark); } body.light-body .cap:hover { background: rgba(10, 22, 40, 0.035); /* tint navy molto leggero su white */ } body.light-body a.cap::after { color: var(--accent-on-light); } body.light-body .cap__desc { color: var(--ink-dark-soft); } body.light-body .cap:nth-child(odd) .cap__dot { background: var(--accent-on-light); } body.light-body .cap:nth-child(even) .cap__dot { background: var(--ink-dark-mute); } /* ===================================================== SECTORS TEASER — chip orizzontali ===================================================== */ body.light-body .sectors-teaser__item { background: #FFFFFF; border-color: var(--line-dark-soft); color: var(--ink-dark); box-shadow: 0 1px 2px rgba(10,22,40,0.05); } body.light-body .sectors-teaser__item:hover { background: #FFFFFF; border-color: var(--accent-on-light); color: var(--accent-on-light); box-shadow: 0 2px 8px rgba(10,22,40,0.12); transform: translateY(-1px); } /* Le icone settori sono SVG con stroke navy: su sfondo cream funzionano gia' bene, ma assicuriamoci che l'opacita' di default non le sbiadisca. */ body.light-body .sectors-teaser__item img { opacity: 1; } /* ===================================================== SECTORS MAGAZINE GRID — magazine editorial 4x2 Sostituisce .sectors-teaser pill su cosa-facciamo.html. Layout: griglia con bordi interni, numero+icona+nome+freccia. Hover: tint slate + scale icon + arrow slide-in. ===================================================== */ body.light-body .sectors-magazine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-dark-soft); border-left: 1px solid var(--line-dark-soft); margin-top: 32px; background: #FFFFFF; } body.light-body .sectors-magazine__item { border-right: 1px solid var(--line-dark-soft); border-bottom: 1px solid var(--line-dark-soft); padding: 44px 32px; min-height: 280px; display: flex; flex-direction: column; gap: 16px; position: relative; color: var(--ink-dark); background: transparent; text-decoration: none; transition: background 0.4s var(--ease), padding 0.4s var(--ease); overflow: hidden; } body.light-body .sectors-magazine__num { font-family: 'Oswald', 'Switzer', sans-serif; font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.22em; color: var(--accent-on-light); text-transform: uppercase; align-self: flex-start; } body.light-body .sectors-magazine__icon { width: 56px; height: 56px; margin-top: auto; margin-bottom: 4px; opacity: 0.85; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); } body.light-body .sectors-magazine__name { font-size: clamp(20px, 1.85vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-dark); margin: 0; max-width: 14ch; } body.light-body .sectors-magazine__arrow { position: absolute; right: 28px; bottom: 36px; font-size: 1.5rem; color: var(--accent-on-light); opacity: 0; transform: translateX(-12px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); pointer-events: none; } body.light-body .sectors-magazine__item:hover { background: var(--paper-band); } body.light-body .sectors-magazine__item:hover .sectors-magazine__icon { transform: scale(1.12) translateY(-4px); opacity: 1; } body.light-body .sectors-magazine__item:hover .sectors-magazine__arrow { opacity: 1; transform: translateX(0); } body.light-body .sectors-magazine__item:focus-visible { outline: 2px solid var(--ink-dark); outline-offset: -2px; } @media (max-width: 1100px) { body.light-body .sectors-magazine { grid-template-columns: repeat(2, 1fr); } body.light-body .sectors-magazine__item { min-height: 220px; padding: 36px 28px; } } @media (max-width: 600px) { body.light-body .sectors-magazine { grid-template-columns: 1fr; } body.light-body .sectors-magazine__item { min-height: 180px; padding: 32px 24px; } } /* ===================================================== CAPS MODULI — polish per piu personalita Padding piu generoso, name typography piu grande, hover slate. ===================================================== */ body.light-body .cap { padding: 48px 32px; min-height: 200px; } body.light-body .cap__name { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.022em; } body.light-body a.cap::after { font-size: 1.5rem; bottom: 28px; right: 28px; } /* ===================================================== CAPS — banda slate dietro la sezione (come cosa-facciamo). Le .caps sono card bianche: su sfondo bianco "spariscono", su banda slate staccano e diventano leggibili come blocchi. Applico la banda a tutte le sezioni con .caps: home "Otto aree", consulenza/cosa-facciamo "Moduli SAP" + equivalenti EN. ESCLUSE le caps id=benefit (lavora-con-noi) e id=benefits (en/careers): sono gia adiacenti alla banda values--4cols, bandarle creerebbe due fasce slate attaccate. ===================================================== */ body.light-body section:has(.caps):not(#benefit):not(#benefits) { background: var(--paper-band); } /* ===================================================== PILLARS — 3 card S/4HANA ===================================================== */ body.light-body .pillars { background: transparent; /* niente gap-color: gestisco col gap reale */ gap: 16px; /* gap fisico tra le card al posto del 1px linea */ border-top: none; border-bottom: none; padding-block: 8px; } body.light-body .pillar { background: #FFFFFF; /* card bianca pulita */ color: var(--ink-dark); box-shadow: var(--card-shadow); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } body.light-body .pillar:hover { background: #FFFFFF; color: var(--ink-dark); border-top-color: transparent; /* annullo border-top accent (era per dark) */ box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } body.light-body .pillar__num { color: var(--accent-on-light); } body.light-body .pillar:hover .pillar__num { color: var(--accent-on-light-bright); } body.light-body .pillar__title { color: var(--ink-dark); } body.light-body .pillar__desc { color: var(--ink-dark-soft); } /* ===================================================== LINK ARROW (call-to-action testuali con freccia) ===================================================== */ body.light-body .link-arrow { color: var(--ink-dark); border-bottom-color: rgba(10, 22, 40, 0.35); /* underline visibile su cream */ } body.light-body .link-arrow:hover { color: var(--accent-on-light); border-bottom-color: var(--accent-on-light); } /* ===================================================== BTN — bottoni primari in sezioni body In dark mode: bg ink (cream) su body dark. In light mode: bg navy su body cream → invertire. ===================================================== */ body.light-body .section .btn, body.light-body .error-page .btn, body.light-body .thanks .btn { background: var(--ink-dark); color: var(--paper); border-color: var(--ink-dark); } body.light-body .section .btn:hover, body.light-body .error-page .btn:hover, body.light-body .thanks .btn:hover { background: var(--accent-on-light); color: var(--paper); border-color: var(--accent-on-light); } /* ===================================================== CTA BLOCK + FOOTER + NAV restano dark — nessuna modifica. Marquee resta dark — nessuna modifica. ===================================================== */ /* ===================================================== FORM FIELDS (contatti + lavora-con-noi) — light style Ribaltati da dark (bg var --bg-alt navy + cream text) a light: bg bianco con bordo navy alpha visibile, testo navy dark, placeholder navy-mute. Coerente col resto della pagina (no piu' blocchi neri pesanti in mezzo a contenuto light). Focus border crimson accent. ===================================================== */ body.light-body .field label { color: var(--ink-dark); font-weight: 500; } body.light-body .field input, body.light-body .field textarea, body.light-body .field select { background: #FFFFFF !important; color: var(--ink-dark) !important; border: 1px solid rgba(10, 22, 40, 0.20) !important; border-radius: 6px; } body.light-body .field input:focus, body.light-body .field textarea:focus, body.light-body .field select:focus { border-color: var(--accent-on-light-bright) !important; outline: none; box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.30); } body.light-body .field input::placeholder, body.light-body .field textarea::placeholder { color: var(--ink-dark-mute); opacity: 1; } body.light-body .field select option { background: #FFFFFF; color: var(--ink-dark); } /* Checkbox consenso privacy: la regola .field input {background:#fff!important} sopra colpiva anche il checkbox, lasciandolo bianco anche da spuntato (con spunta cream invisibile). Override dedicato: box bianco con bordo navy visibile; da spuntato rosso con spunta bianca. */ body.light-body .field--checkbox input[type="checkbox"] { background: #FFFFFF !important; border: 1.5px solid var(--ink-dark-soft) !important; border-radius: 4px; } body.light-body .field--checkbox input[type="checkbox"]:hover { border-color: var(--ink-dark) !important; } body.light-body .field--checkbox input[type="checkbox"]:checked { background: var(--accent-on-light) !important; border-color: var(--accent-on-light) !important; } body.light-body .field--checkbox input[type="checkbox"]:checked::after { border-color: #FFFFFF; } body.light-body .field--checkbox label { color: var(--ink-dark-soft); } body.light-body .field-help { color: var(--ink-dark-mute); } body.light-body .field--checkbox label { color: var(--ink-dark); } body.light-body .field--checkbox label a { color: var(--ink-dark) !important; text-decoration: underline; text-decoration-color: rgba(10, 22, 40, 0.35); text-underline-offset: 3px; } body.light-body .field--checkbox label a:hover { color: var(--accent-on-light-bright) !important; text-decoration-color: var(--accent-on-light-bright); } body.light-body .form-required-hint, body.light-body .form-status { color: var(--ink-dark-mute); } /* ===================================================== LAVORA CON NOI — Posizioni aperte cards (.job da jobs.js) .job__meta (Torino / Ibrido, Full-time · Mid-Senior, ecc) erano --ink-soft light grey invisibili su bianco. Allineo a navy-mute come tutti gli altri body descriptive texts. ===================================================== */ body.light-body .job__role { color: var(--ink-dark); } body.light-body .job__meta { color: var(--ink-dark-mute); font-size: 1rem; } body.light-body .job__arrow { color: var(--ink-dark); transition: transform 0.3s var(--ease), color 0.3s var(--ease); } /* Evidenziazione lista posizioni: divisori navy visibili (erano --line-soft quasi invisibili su bianco) + riga interattiva tipo bacheca: hover con sfondo slate, barra accent a sinistra, ruolo e freccia in rosso. */ body.light-body .job { border-top-color: var(--line-dark-soft); padding-inline: 18px; border-radius: 8px; position: relative; } body.light-body .job:last-child { border-bottom-color: var(--line-dark-soft); } body.light-body .job::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent-on-light); transform: scaleY(0); transition: transform 0.3s var(--ease); } body.light-body .job:hover { background: var(--paper-band); padding-left: 26px; } body.light-body .job:hover::before { transform: scaleY(1); } body.light-body .job:hover .job__role { color: var(--accent-on-light); } body.light-body .job:hover .job__arrow { color: var(--accent-on-light); transform: translateX(4px); } /* ===================================================== COOKIE BANNER — Floating glass card stile macOS / Notion. Originale: banner full-width bianco al fondo viewport. Override: card 440px max bottom-right, backdrop-blur frosted, bordo sottile, shadow morbida, slide-in entrance. Mobile (<=600px): card full-width con margine 16px. ===================================================== */ body.light-body .cookie-banner { position: fixed !important; inset: auto 24px 24px auto !important; width: min(440px, calc(100vw - 48px)) !important; max-width: none !important; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: var(--ink-dark); border: 1px solid rgba(10, 22, 40, 0.10) !important; border-radius: 16px !important; padding: 22px 26px !important; box-shadow: 0 12px 48px rgba(10, 22, 40, 0.22), 0 4px 16px rgba(10, 22, 40, 0.10) !important; animation: cookieSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1); } body.light-body .cookie-banner__title, body.light-body .cookie-banner__text, body.light-body .cookie-banner__actions { max-width: none; margin-left: 0; margin-right: 0; } body.light-body .cookie-banner__title { margin-bottom: 8px; color: var(--ink-dark); } body.light-body .cookie-banner__text { margin-bottom: 16px; font-size: 0.875rem; color: var(--ink-dark-mute); } body.light-body .cookie-banner__text a { color: var(--ink-dark); text-decoration-color: rgba(10, 22, 40, 0.35); } body.light-body .cookie-banner__text a:hover { color: var(--accent-on-light-bright); text-decoration-color: var(--accent-on-light-bright); } body.light-body .cookie-banner__actions { gap: 8px; justify-content: flex-end; } @keyframes cookieSlideIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 600px) { body.light-body .cookie-banner { inset: auto 16px 16px 16px; width: auto; } } @media (prefers-reduced-motion: reduce) { body.light-body .cookie-banner { animation: none; } } /* ===================================================== ACCESSIBILITY — focus visible su sfondi chiari I focus ring di default sono pensati per dark bg, su cream possono perdere contrasto. Rinforziamo con outline navy. ===================================================== */ body.light-body .section a:focus-visible, body.light-body .section button:focus-visible, body.light-body .section .btn:focus-visible { outline: 2px solid var(--ink-dark); outline-offset: 3px; } /* ===================================================== REVEAL animations: invariate (transform + opacity, agnostiche al colore) ===================================================== */ /* ===================================================== PAGINE RESTANTI (IT + EN) — fix leggibilita componenti specifici dei template non ancora coperti dall'overlay. Audit completo su 70 pagine: glossari, legali, sitemap, 404, grazie, soluzioni, liste bulleted, servizi. Solo colori (regola POC): nessun layout/posizione toccato. ===================================================== */ /* --- Liste .bulleted (ai-culture, moduli, ecc.) — testo era --ink cream invisibile su bianco; tick era --warm sbiadito --- */ body.light-body .bulleted li { color: var(--ink-dark-soft); } body.light-body .bulleted li::before { background: var(--accent-on-light); } /* --- Bottone ghost (404) — era cream su cream (testo + bordo) --- */ body.light-body .btn--ghost { background: transparent; color: var(--ink-dark); border-color: var(--ink-dark); } body.light-body .btn--ghost:hover { background: var(--ink-dark); color: var(--paper); border-color: var(--ink-dark); } /* --- 404 error-page — lede grigio (--ink-soft) su bianco. Titolo eredita navy, "404" code e title em sono gradient rosso: ok. Resta pagina bianca full-screen sotto la nav navy: pattern corretto. --- */ body.light-body .error-page__lede { color: var(--ink-dark-soft); } /* 404 — immagine astronauta: nel base usa filter url(#removeBlack) per "ritagliare" il nero dello spazio (ok su pagina scura). Su body chiaro l'astronauta chiaro ritagliato si perde ("troppo chiara"). Mostro la foto piena con angoli arrotondati e ombra navy morbida (niente cutout). */ body.light-body img.error-page__media--cutout { filter: drop-shadow(0 20px 50px rgba(10, 22, 40, 0.22)); border-radius: 14px; } /* Contatti — intestazioni info-block (indirizzo/telefono/email) sono eyebrow-style (.75rem maiuscolo, identiche a .eyebrow): navy si confondeva col contenuto sotto. A rosso accent come ogni eyebrow su fondo chiaro (coerenza gerarchia visiva). */ body.light-body .info-block h2, body.light-body .info-block h3, body.light-body .info-block h4 { color: var(--accent-on-light); } /* --- Grazie — paragrafo grigio su bianco. Icona resta badge rosso. --- */ body.light-body .thanks p { color: var(--ink-dark-soft); } /* --- Soluzioni — .sector-card erano box navy con nome che ereditava navy (invisibile). Convertiti a card bianche editoriali con hairline grid, stessa logica di .caps / .sectors-magazine. --- */ body.light-body .sectors-grid { background: var(--line-dark-faint); border-top-color: var(--line-dark-soft); border-bottom-color: var(--line-dark-soft); grid-template-columns: repeat(4, 1fr); /* 8 box -> 4x2 (era repeat(3) base) */ } body.light-body .sector-card { background: var(--paper-band); color: var(--ink-dark); } body.light-body .sector-card:hover { background: #FFFFFF; } body.light-body .sector-card__label { color: var(--accent-on-light); } body.light-body .sector-card__name { color: var(--ink-dark); } body.light-body .sector-card:hover .sector-card__name { color: var(--accent-on-light); } /* Icona SVG settore (stroke #B8BDC9 grigio chiaro, nata per hero scure): su card slate si perde. La scurisco con filtro (~navy-mute) solo in light-body, senza toccare i file SVG che servono chiari nelle hero scure delle pagine settori. */ body.light-body .sector-card__icon { filter: brightness(0.4); } /* Griglia settori responsive: 4 col desktop -> 2 col tablet -> 1 col mobile. Stessi breakpoint della sectors-magazine per coerenza. Specificita body.light-body batte le media query base (900/560). */ @media (max-width: 1100px) { body.light-body .sectors-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { body.light-body .sectors-grid { grid-template-columns: 1fr; } } /* --- Glossari — dt/dd ereditano navy (ok su bianco). Index alfabetico: hover era chip navy + rosso acceso, armonizzo a slate + rosso light. --- */ body.light-body .gloss-index a.link-arrow:hover, body.light-body .gloss-index a.link-arrow:focus-visible { background: var(--paper-band); color: var(--accent-on-light); } /* --- Pagine legali (privacy, cookie, note-legali, termini, accessibilita) IT + EN — prosa su --ink-soft/--ink cream, tabelle e TOC box navy. --- */ body.light-body .legal p, body.light-body .legal li { color: var(--ink-dark-soft); } body.light-body .legal a { color: var(--ink-dark); } body.light-body .legal a:hover { color: var(--accent-on-light); } body.light-body .legal strong { color: var(--ink-dark); } body.light-body .legal h2 { border-top-color: var(--line-dark-soft); } body.light-body .legal .legal-meta { color: var(--ink-dark-mute); border-bottom-color: var(--line-dark-faint); } /* tabelle: th era navy+cream, td --ink-soft; bordi --line-soft invisibili */ body.light-body .legal td, body.light-body .legal th { border-color: var(--line-dark-soft); color: var(--ink-dark-soft); } body.light-body .legal th { background: var(--paper-band); color: var(--ink-dark); } /* indice (TOC) — box navy --bg-alt -> box slate chiaro, testo navy */ body.light-body .legal .toc { background: var(--paper-band); border-color: var(--line-dark-soft); } body.light-body .legal .toc h2 { color: var(--ink-dark-mute); } body.light-body .legal .toc li { color: var(--ink-dark); } /* --- Sitemap (mappa-del-sito / site-map): la