/* ========================================================= BLACKLEMON — style.css Design system: bold black + lemon yellow (da presentazione Canva) ========================================================= */ /* ---------- TOKENS ---------- */ :root { --ink: #0e0e0e; --ink-soft: #161616; --ink-card: #1c1c1c; --lemon: #ffcd00; --lemon-deep: #f6c500; --paper: #ffffff; --paper-dim: #f4f4f2; --ash: #9a9a9a; --ash-dark: #6a6a6a; --line: rgba(255, 255, 255, 0.14); --line-dark: rgba(0, 0, 0, 0.12); --font-display: "Anton", "Archivo", system-ui, sans-serif; --font-head: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --maxw: 1280px; --pad: clamp(1.25rem, 5vw, 4rem); --radius: 18px; /* Respiro verticale delle sezioni. Sopra e sotto sono token distinti perché il fondo sezione ha bisogno di più aria del bordo superiore: il contenuto che si chiude a ridosso del limite inferiore (o del bordo della scheda, nello stack) legge come "tagliato". Usati sia dalla regola generica "section" (mobile e pagine non-stack) sia da .stack-inner.has-overflow nello stack desktop, così il valore si regola in un punto solo. */ --section-pad-top: clamp(4rem, 9vw, 8rem); --section-pad-bottom: clamp(7rem, 15vw, 14rem); /* Padding verticale del footer. Token perché va dichiarato in due punti: su .site-footer (mobile e pagine senza stack) e sul suo .stack-inner nello stack desktop, dove .stack-section azzera il padding del footer stesso. Un solo valore da regolare. */ --footer-pad-top: clamp(2rem, 3vw, 2.75rem); --footer-pad-bottom: clamp(4rem, 7vw, 5.5rem); /* Altezza dell'header fisso. Non è un valore arbitrario: è quanto misura davvero .site-header (logo + padding-block di .header-inner) — verificato in Chrome, 79px a desktop. Serve al footer nello stack, che si aggancia esattamente sotto l'header con min-height: calc(100vh - var(--header-h)) (vedi il blocco STACK SCROLL in fondo al file). Se cambi il padding dell'header o la dimensione del logo, aggiorna questo valore: è l'unico punto da toccare. */ --header-h: 79px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* `clip` invece di `hidden`. ATTENZIONE alla motivazione: NON è questa la causa del bug dello stack su Chrome (quella è il numero di layer compositi — vedi la nota nel blocco STACK SCROLL in fondo al file). Verificato direttamente su Chrome 152 con un test isolato: `hidden`, `clip` e `visible` danno esattamente le stesse posizioni di aggancio per le sticky. La teoria "hidden su html rompe lo sticky" è stata misurata e smentita, non va reintrodotta. `clip` resta comunque preferibile: quando l'overflow di è diverso da `visible` viene propagato al viewport, e con `hidden` il viewport diventa un contenitore di scorrimento sull'asse X (una barra di scorrimento orizzontale latente, e la pagina resta scrollabile lateralmente via tastiera o trackpad anche quando non dovrebbe). `clip` taglia l'eccedenza senza creare nulla di scorrevole. È il sostituto moderno di `hidden` per il solo contenimento. Sull'asse Y: `overflow-y` non è dichiarato, quindi resta `visible` nel foglio di stile — ma poiché i due assi non possono essere `visible` e `clip` insieme, il valore USATO diventa `auto`. È esattamente ciò che serve (la pagina deve scorrere in verticale) ed è anche il comportamento che si aveva prima con `hidden`, quindi non cambia nulla rispetto a com'era. Da non "correggere" mettendo `overflow-y: visible` esplicito: non otterrebbe l'effetto e rischierebbe di reintrodurre il problema. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); background: var(--ink); color: var(--paper); line-height: 1.6; font-size: 1rem; /* NIENTE overflow-x qui: il contenimento orizzontale sta su come `clip` (vedi la nota lì, che spiega perché `hidden` — su body o su html, indifferentemente — rompeva lo sticky su Chrome). */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } em { font-style: normal; color: var(--lemon); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* Bootstrap compensa il gutter di .row con margini NEGATIVI laterali (g-5 = -1.5rem = -24px per lato) dando per scontato che il contenitore abbia almeno altrettanto padding. Il nostro --pad e' fluido — clamp(1.25rem, 5vw, 4rem) — e sotto i 480px 5vw scende a ~18px: meno dei 24px del gutter, cosi' la riga sporgeva di ~5px per lato e l'intera pagina acquisiva scroll orizzontale. Qui il margine negativo viene limitato al padding realmente disponibile. */ .container > .row { --bs-gutter-x: min(3rem, calc(var(--pad) * 2)); } /* ---------- ACCESSIBILITY ---------- */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--lemon); color: var(--ink); padding: 0.8rem 1.2rem; font-weight: 700; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; border-radius: 4px; } /* Testo leggibile dagli screen reader ma non a schermo (usato dove il testo visibile è spezzato in elementi non leggibili, es. i titoli lettera-per-lettera di .cc-card). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section-yellow :focus-visible, .section-light :focus-visible { outline-color: var(--ink); } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.95rem 1.7rem; border-radius: 100px; cursor: pointer; border: 2px solid transparent; transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); /* will-change solo al passaggio del mouse, non sempre: dichiarato in modo permanente ogni bottone della pagina diventa un layer composito a sé: su portfolio (2 frecce per case study + le CTA) sono decine, e insieme alle schede dello stack esaurivano il budget di layer di Chrome. Il browser ha comunque il tempo di prepararlo prima che la transizione parta. */ } .btn:hover { transform: translateY(-3px); } .btn:hover, .btn:focus-visible { will-change: transform; } .btn-primary { background: var(--lemon); color: var(--ink); } .btn-primary:hover, .btn-primary:focus { background: var(--paper); color: var(--ink); border-color: var(--ink); } .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: var(--paper); } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--lemon); color: var(--lemon); } .btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover, .btn-dark:focus { background: var(--paper); color: var(--ink); } .btn-pill { background: var(--lemon); color: var(--ink); padding: 0.7rem 1.3rem; } .btn-pill:hover, .btn-pill:focus { background: var(--paper); color: var(--ink); } .btn-lg { font-size: 1.05rem; padding: 1.15rem 2.4rem; } /* ---------- SECTION HELPERS ---------- */ section { padding-top: var(--section-pad-top); padding-bottom: var(--section-pad-bottom); position: relative; } .section-dark { background: var(--ink); color: var(--paper); } .section-light { background: var(--paper-dim); color: var(--ink); } .section-yellow { background: var(--lemon); color: var(--ink); } .section-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.2rem; opacity: 0.9; } /* Coerenza: se il kicker sta dentro .prose non deve ereditare font/spaziatura del testo lungo */ .prose p.section-kicker { font-size: 0.85rem; line-height: 1.4; opacity: 0.9; margin-top: 0; margin-bottom: 1.2rem; } /* Icona limone del kicker: file SVG diversi in base allo sfondo. Default (sezioni scure) = limone chiaro; su sfondo giallo/chiaro = limone scuro. */ .kicker-mark { display: inline-block; flex-shrink: 0; width: 1.15em; height: 1.15em; background: url("/assets/images/lemon-pic-light.svg") center / contain no-repeat; } .section-yellow .kicker-mark, .section-light .kicker-mark { background-image: url("/assets/images/lemon-pic-dark.svg"); } .section-title { font-family: var(--font-display); font-weight: 400; line-height: 1; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -0.01em; margin-bottom: 1.5rem; margin-bottom: 2.5rem; } .section-title .accent { color: var(--lemon); } .section-light .section-title .accent { color: var(--lemon-deep); } .section-yellow .section-title .accent { color: var(--ink); } .section-title s { color: var(--paper); text-decoration-color: var(--lemon); text-decoration-thickness: 4px; } /* ---------- PHILOSOPHY TITLE: sequenza "siamo fornitori" -> barrato -> "siamo partner strategici" ---------- */ .philosophy-strike { position: relative; text-decoration: none; } .philosophy-strike::after { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 4px; background: var(--lemon); transform: translateY(-50%); transition: width 0.6s var(--ease); } .philosophy-title-swap.is-struck .philosophy-strike::after { width: 100%; } .philosophy-partner { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .philosophy-title-swap.is-swapped .philosophy-partner { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .philosophy-strike::after, .philosophy-partner { transition: none; } } /* ========================================================= HEADER ========================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease), border-color 0.35s var(--ease); border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(14, 14, 14, 0.82); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; } .logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--paper); } .logo-img { height: 34px; width: auto; } .logo-mark { color: var(--lemon); display: inline-flex; } .logo-text { font-family: var(--font-head); font-weight: 900; letter-spacing: 0.02em; font-size: 1.25rem; text-transform: uppercase; } .logo-text-accent { color: var(--lemon); } .main-nav { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 2rem; } .nav-list > li { display: flex; align-items: center; } /* NB: lo stile dei link nav (colore, underline animato) è gestito dalle regole .navbar .nav-link nel blocco "BOOTSTRAP — integrazione". Qui niente ::after per non entrare in conflitto con la freccia del dropdown Servizi. */ /* Vecchio menu custom (submenu/mobile-nav/nav-toggle) rimosso: ora la navbar usa Bootstrap. Vedi blocco 'BOOTSTRAP — integrazione'. */ /* ========================================================= HERO ========================================================= */ .hero { min-height: 100svh; display: flex; align-items: center; padding-top: 6rem; padding-bottom: 4rem; overflow: hidden; /* NIENTE `isolation: isolate` — stessa ragione per cui e' stato tolto da .stack-section (vedi la nota estesa la' sotto): su Chrome crea un contesto di impilamento che, dentro una sticky con overflow:hidden, viene ricomposto male. Qui il sintomo era il titolo che perdeva la parola "UN" tornando in cima dopo uno scroll, finche' un click non forzava il repaint. Serviva a confinare i figli con z-index negativo (.hero-video a -2, .hero-overlay a -1) perche' non finissero dietro il fondo pagina: a questo basta gia' `position: relative` — che .stack-section fornisce sullo stack e che qui viene ripristinato esplicitamente per la vista senza stacking. */ position: relative; background: var(--ink); /* fondo neutro finché il video non è pronto */ } .hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; /* NIENTE `filter` qui (era grayscale(0.2) contrast(1.05)). Il filtro promuove il video a layer di composizione proprio; dentro una .stack-section sticky con overflow:hidden, tornando in cima dopo uno scroll Chrome ricomponeva quel layer senza ridipingere il testo sovrapposto, e la parola piu' corta del titolo ("UN") spariva finche' un click non forzava il repaint. La desaturazione la fa ora .hero-overlay con un velo neutro in piu': stesso risultato a schermo, nessun layer aggiuntivo. */ opacity: 0; transition: opacity 0.6s var(--ease); /* fade-in quando c'è un frame reale */ } .hero-video.is-ready { opacity: 1; } .hero-overlay { position: absolute; inset: 0; z-index: -1; /* Scrim semitrasparente: scurisce quel tanto che basta a leggere le scritte, ma lascia intravedere il video dietro. */ background: radial-gradient( 120% 90% at 70% 10%, rgba(255, 205, 0, 0.12), transparent 55% ), linear-gradient( 180deg, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.62) 70%, rgba(10, 10, 10, 0.78) ), /* Velo grigio uniforme: sostituisce il grayscale(0.2) che stava sul video, smorzando la saturazione senza usare un filtro. */ linear-gradient( rgba(128, 128, 128, 0.14), rgba(128, 128, 128, 0.14) ); } .hero-content { max-width: 60rem; } .hero-eyebrow { font-family: var(--font-head); font-weight: 700; color: var(--lemon); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 1.4rem; } .hero-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(3.2rem, 10vw, 8rem); letter-spacing: -0.015em; margin-bottom: 1.2rem; } .hero-title em { color: var(--lemon); } .hero-sub { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 3.5vw, 2.4rem); color: var(--paper); margin-bottom: 2rem; } .hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.4rem; } .hero-tags li { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 100px; color: rgba(255, 255, 255, 0.82); backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.04); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } .hero-scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 100px; display: grid; place-items: start center; padding-top: 7px; } .hero-scroll-dot { width: 4px; height: 8px; border-radius: 4px; background: var(--lemon); animation: scrollDot 1.6s var(--ease) infinite; } @keyframes scrollDot { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(12px); } } /* ---------- PROVA "cinematic": reveal di scritte + gradiente a fine video ---------- Confinata alla classe .hero--cinematic. Rimuovere quella classe in HTML per annullare. */ .hero--cinematic .hero-content, .hero--cinematic .hero-overlay, .hero--cinematic .hero-scroll { opacity: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .hero--cinematic .hero-content { transform: translateY(24px); } .hero--cinematic.hero--revealed .hero-content, .hero--cinematic.hero--revealed .hero-overlay, .hero--cinematic.hero--revealed .hero-scroll { opacity: 1; } .hero--cinematic.hero--revealed .hero-content { transform: none; } @media (prefers-reduced-motion: reduce) { /* Niente attesa del video: mostra tutto subito, senza transizioni */ .hero--cinematic .hero-content, .hero--cinematic .hero-overlay, .hero--cinematic .hero-scroll { opacity: 1; transform: none; transition: none; } } /* ========================================================= CLAIM (yellow) ========================================================= */ .claim-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.6rem; } .claim-sub { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--paper); /* lo stacco dalla griglia è gestito da .claim-grid margin-top */ margin-bottom: 0; letter-spacing: -0.8px; } .claim-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; } /* Mobile (1 colonna): separazione orizzontale in alto a ogni blocco */ .claim-card { border-top: 2px solid var(--ink); padding-top: 1.2rem; } .claim-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; margin-bottom: 0.4rem; letter-spacing: -0.8px; } .claim-card p { max-width: 30ch; font-weight: 500; } .claim-card .accent { color: var(--lemon); } /* Variante su fondo scuro. .claim-* nasce per la sezione gialla (testo nero, filetti neri): su .section-dark quei valori sparirebbero contro il fondo. Qui si invertono solo i colori — dimensioni, pesi e spaziature restano quelle della variante gialla, così le due sezioni si leggono come lo stesso componente. */ .section-dark .claim-title { color: var(--paper); } .section-dark .claim-title .accent { color: var(--lemon); } .section-dark .claim-sub { color: var(--lemon); } /* Su fondo chiaro il bianco della variante base e' illeggibile (1.5:1 sul giallo). Serve il nero, come .claim-title che lo ha gia' di default. Senza questa regola la home usava uno style="color:black" inline. */ .section-yellow .claim-sub, .section-light .claim-sub { color: var(--ink); } /* mobile (1 colonna): il filetto in alto a ogni blocco */ .section-dark .claim-card { border-top-color: var(--paper); } /* ========================================================= FEATURE — badge + titolo + griglia di voci con check (porting in HTML/CSS vanilla di un componente React/Tailwind: Badge, titolo, lead e griglia 1 → 2 → 3 colonne con icona check. Le utility Tailwind sono tradotte in classi semantiche qui, e i valori arbitrari (text-3xl/md:text-5xl, gap-10, pt-12) in scale fluide coerenti col resto del sito invece che in px fissi.) ========================================================= */ .feature-badge { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--ink); color: var(--lemon); margin-bottom: 2rem; } /* Su fondo scuro il badge si inverte (giallo pieno, testo nero) così resta leggibile ovunque la sezione venga riusata. Su fondo giallo resta nero con testo giallo, come sul chiaro. */ .section-dark .feature-badge { background: var(--lemon); color: var(--ink); } .feature-head { display: flex; flex-direction: column; gap: 0.6rem; } .feature-title { font-family: var(--font-head); font-weight: 800; /* equivalente fluido di text-3xl → md:text-5xl */ font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; /* tracking-tighter */ letter-spacing: -0.03em; max-width: 20ch; } .feature-lead { font-size: 1.125rem; line-height: 1.7; letter-spacing: -0.01em; /* text-muted-foreground: stesso ruolo, tinta del sistema */ color: var(--ash-dark); max-width: 62ch; } .section-dark .feature-lead { color: var(--ash); } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; margin-top: 3rem; list-style: none; /* padding:0 — è un