/* tema6_due_anime.css — VERSIONE 3 SUL SITO VERO · 20-09-2026. Si carica DOPO tema5 e lo ricopre. REGOLA DEL GIRO, dettata dal cliente: la navigazione e i contenuti NON cambiano, cambia solo la grafica. Quindi qui non c'è una riga di markup nuovo: nessun file .jsx toccato, nessuna voce di menu aggiunta, nessun testo riscritto. Solo colori, caratteri, spaziature e le sedici foto, messe dove il markup che già esiste le può reggere. PERCHÉ DUE ANIME. Le foto dicono una cosa che il tema unico nascondeva: gli strumenti sono notturni e freddi, i percorsi sono caldi e luminosi. Invece di scurire le une o schiarire le altre, il sito dichiara due zone — STRUMENTI scuri, PERCORSI su carta — tenute insieme dalla stessa tipografia e dallo stesso ambra. LA NOTTE NON È NERA: È IL VERDE PROFONDO DEL SITO DI OGGI (richiesta del 20-09, «verde come i soldi»). Il nero #0a0a0a della v3 disegnata è stato sostituito ovunque da #12302a — lo stesso valore che oggi è l'inchiostro del sito e il fondo della soglia — e con lui tutta la scala: superfici #17382f e #1d443a, fili #2a4a42 e #3d5f56, testo #f4f1e8, secondario #9fb3ac, attenuato #8fa39c. Sono i verdi già usati oggi, non verdi nuovi inventati per l'occasione. L'ACCENTO RESTA AMBRA e non diventa l'ottone: su #12302a l'ottone #8a5a20 dà 2,6:1, cioè sparisce; l'ambra #ffaa00 dà 8,6:1. Un accento che non si legge non è un accento. Sulla carta l'inchiostro è lo stesso verde, e lì l'accento resta l'ottone: sul chiaro l'ambra darebbe 1,9:1. Stesso colore, due mestieri diversi a seconda del fondo. COME SA IN CHE ZONA SI TROVA. Nel DOM non c'era nulla che dicesse la pagina corrente: lo script `mtc-rotta` in fondo alla pagina scrive la rotta su . Da lì in giù è solo CSS. Una rotta nuova non rompe niente: resta chiara finché non la si aggiunge qui. TRE COSE SONO SCURE SEMPRE, su qualunque pagina — è la firma della v3: la BARRA in cima · il CAPPELLO di ogni pagina (.grid-bg.scanlines) · il PIEDE. Tutto il resto è carta, tranne le rotte degli strumenti, che sono notte intera. */ /* ═══ 1 · LA CARTA (i token di base: valgono ovunque non sia dichiarata la notte) ═══════════ */ /* L'INCHIOSTRO DELLA CARTA È IL VERDE PROFONDO DEL SITO DI OGGI (richiesta del 20-09: «verde come i soldi»). Sono gli stessi valori di tema5, copiati e non reinventati: #12302a per il testo, #0a1f1b per i titoli forti, #2b4a42 per il secondario. Su crema #faf6ef: 13:1 e 8:1. UNA SOLA DIFFERENZA, dichiarata: l'attenuato di tema5 (#7d8a84) sulla crema dà 3,3:1, cioè sotto il minimo leggibile — era già così prima e nessuno l'aveva misurato. Qui è #67746e: stesso verde-grigio, 4,6:1. È l'unico valore spostato. Nelle zone di notte l'inchiostro resta chiaro: il verde dei soldi su nero non si legge. */ :root{--bg:#faf6ef;--bg-2:#f3eee4;--surface:#fffdf9;--surface-2:#f7f2e9;--surface-elev:#efe9dd; --line:#e2dcd0;--line-2:#cfc7b7; --text:#12302a;--text-1:#0a1f1b;--text-2:#12302a;--text-3:#2b4a42;--text-mute:#67746e; --accent:#8a5a20;--accent-2:#a0692a;--accent-soft:rgba(138,90,32,.10); --gold:#8a5a20;--gold-soft:rgba(138,90,32,.10);--on-accent:#fffdf9; --green:#1f6b4a;--green-soft:rgba(31,107,74,.11); --red:#a4323c;--red-soft:rgba(164,50,60,.09); --blue:#1f5d8c;--blue-soft:rgba(31,93,140,.09); --purple:#5f42a6;--purple-soft:rgba(95,66,166,.09); --orange:#98560f;--orange-soft:rgba(152,86,15,.10);--yellow:#7d6210; /* i caratteri della v3: Inter Tight per il corpo ovunque, le grazie SOLO sui titoli di carta, il monospaziato per etichette, dati e pulsanti. */ --font-display:"Instrument Serif",Georgia,"Times New Roman",serif; --font-body:"Inter Tight",system-ui,-apple-system,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --radius:3px;--radius-sm:2px;--radius-lg:4px; --img-tint:saturate(.97) contrast(1.02); --shadow:none; } html{background:#efe9dd} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased} /* ═══ 2 · TIPOGRAFIA ════════════════════════════════════════════════════════════════════════ Sulla carta i titoli hanno le grazie (è il carattere dei percorsi); nella notte passano al bastone stretto. La differenza fra le due zone è un token, non un selettore per pagina. */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:0;line-height:1.1} /* LA v3 NON GRIDA: i titoli sono in tondo, non in maiuscoletto. Il sito li trasformava in maiuscolo da CSS (`text-transform`), quindi il testo scritto «Scegli il piano giusto per te» arrivava a schermo come «SCEGLI IL PIANO GIUSTO PER TE». Qui si toglie la trasformazione, non si riscrive una sola parola: le maiuscole che restano sono quelle davvero scritte in maiuscolo nel contenuto, e quelle non le tocco. */ #root h1,#root h2,#root .h1,#root .h2{text-transform:none} /* E NON BASTAVA: il maiuscolo arriva da una regola più specifica (le stesse `#root main …` che spengono gli occhielli). L'ho visto perché dopo la prima correzione il titolo era ancora «I MONDI DEL CLUB» a schermo mentre nel contenuto è scritto «I mondi del Club». */ #root main h1,#root main h2,#root main .h1,#root main .h2{text-transform:none!important} .h1,#root h1{font-size:clamp(31px,4.6vw,52px);font-weight:400;line-height:1.06;letter-spacing:-.004em} .h2,#root h2{font-size:clamp(25px,3.5vw,38px);font-weight:400} .h3{font-size:clamp(17px,1.9vw,21px);font-weight:600;font-family:var(--font-body);letter-spacing:-.012em} .lead{font-family:var(--font-body);font-size:clamp(15.5px,1.5vw,18px);color:var(--text-2);line-height:1.7;text-wrap:pretty} p,li{text-wrap:pretty} /* l'occhiello della v3 è un'etichetta nuda: niente trattino davanti, verde nella notte e oro sulla carta. Il trattino di tema5 va tolto esplicitamente o resta. */ .eyebrow{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:13px} .eyebrow::before{content:none} .term-head{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--text-3)} .mono{font-family:var(--font-mono)} a{color:var(--accent)}a:hover{color:var(--accent-2)} /* ═══ 3 · GEOMETRIA: piatta, filo di un pixel, angoli quasi vivi ════════════════════════════ La v3 non ha ombre. Le ombre morbide di tema5 erano il suo carattere «istituto»; qui il rilievo lo fa la linea, non il grigio sotto la scatola. */ .card{background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:none} .card-hover{transition:border-color .16s ease,background .16s ease} .card-hover:hover{border-color:var(--accent);box-shadow:none;background:var(--surface-2)} .btn{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;padding:13px 21px;transition:background .15s,color .15s,border-color .15s} .btn-primary{background:var(--text);color:var(--on-accent);border-color:var(--text)} .btn-primary:hover{background:#0a1f1b;border-color:#0a1f1b;color:#fff;transform:none} .btn-gold{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn-gold:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);transform:none} .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)} .btn-ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .btn-sm{font-size:10px;letter-spacing:.13em;padding:9px 15px} .btn-lg{font-size:11.5px;padding:15px 28px} .badge{border-radius:2px;font-family:var(--font-mono);font-weight:700;font-size:9.5px;letter-spacing:.16em;padding:5px 10px;text-transform:uppercase} .pill{border-radius:2px;font-family:var(--font-mono);background:var(--surface);color:var(--text-2);border-color:var(--line-2);font-size:10.5px;letter-spacing:.08em} .depth-chip{border-color:var(--line-2);border-radius:2px;font-family:var(--font-mono);letter-spacing:.1em} .depth-chip:hover{background:var(--accent-soft)} .input{background:#fff;border-color:var(--line-2);font-family:var(--font-body);font-size:15px;border-radius:2px} .input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px var(--accent-soft)} .field-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)} .grid-bg{background-image:none} .section{padding-top:62px;padding-bottom:62px} .section-sm{padding-top:42px;padding-bottom:42px} .stat-num{font-family:var(--font-mono);color:var(--accent);font-weight:700;letter-spacing:-.01em} .prose h3{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border-color:var(--line)} .prose p,.prose li{color:var(--text-2)} /* l'avvertenza di rischio della v3: riquadro rosso tenue, monospaziato, nessun angolo tondo */ .disclaimer{background:rgba(164,50,60,.07);border:1px solid rgba(164,50,60,.26);border-radius:2px;font-family:var(--font-mono);font-size:10.5px;line-height:1.7;color:var(--text-2)} .disclaimer strong{color:var(--red)} /* ═══ 4 · LA BARRA È SEMPRE NOTTE ═══════════════════════════════════════════════════════════ È la firma della v3 e il punto di cucitura fra le due anime: qualunque pagina si apra, in cima c'è la stessa banda nera. I token scuri vanno RIDICHIARATI dentro `.nav`, altrimenti i figli ereditano gli inchiostri della carta e finiscono marroni sul nero (3,3:1). È lo stesso rimedio, al contrario, che la v3 usa nelle sue pagine chiare. */ .nav{ --bg:#12302a;--bg-2:#17382f;--surface:#17382f;--surface-2:#1d443a; --line:#2a4a42;--line-2:#3d5f56; --text:#f4f1e8;--text-1:#fff;--text-2:#9fb3ac;--text-3:#8fa39c;--text-mute:#8fa39c; --accent:#ffaa00;--accent-2:#ffc247;--accent-soft:rgba(255,170,0,.12);--gold:#ffaa00; --on-accent:#12302a; background:rgba(18,48,42,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid #2a4a42;color:#f4f1e8; } .nav a,.nav button{color:#9fb3ac} .nav-link{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9fb3ac;font-weight:500} .nav-link:hover{color:#ffaa00} .nav-link.active{color:#ffaa00;border-bottom-color:#ffaa00} .logo-name{font-family:var(--font-mono);font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#f4f1e8} .logo-name .accent{color:#ffaa00} .logo-name small{font-family:var(--font-mono);color:#7d8a84} .nav .btn-primary{background:#ffaa00;border-color:#ffaa00;color:#12302a} .nav .btn-primary:hover{background:#ffc247;border-color:#ffc247;color:#12302a} .nav .btn-ghost{color:#9fb3ac;border-color:#3d5f56} .nav .btn-ghost:hover{color:#ffaa00;border-color:#ffaa00;background:rgba(255,170,0,.10)} .nav-burger{border-color:#3d5f56;color:#f4f1e8;border-radius:2px;background:transparent} .lang-toggle{border-color:#3d5f56;border-radius:2px} .lang-toggle button{color:#8fa39c;font-family:var(--font-mono)} .lang-toggle button.on{background:#ffaa00;color:#12302a} .lang-picker-btn{border-color:#3d5f56;color:#9fb3ac;font-family:var(--font-mono);border-radius:2px;background:transparent} .nav-dd-menu,.lang-picker-menu{background:#17382f;border-color:#2a4a42;border-radius:2px;box-shadow:0 18px 40px -20px rgba(0,0,0,.8)} .nav-dd-menu a,.lang-picker-item{font-family:var(--font-mono);font-size:11px;color:#9fb3ac;border-color:#2a4a42} .nav-dd-menu a:hover,.lang-picker-item:hover{color:#ffaa00;background:rgba(255,170,0,.08)} /* ═══ 5 · IL CAPPELLO DI OGNI PAGINA È NOTTE, CON LA FOTO SOTTO ═════════════════════════════ `.grid-bg.scanlines` è la sezione che apre ogni pagina del sito. La foto sta in un `::before` al 30%, come nella v3: non serve markup nuovo e il testo resta sopra grazie allo z-index che il sito già mette sul `.wrap` interno. ATTENZIONE, difetto già trovato una volta: i titoli portano `class="h1"` e tema5 li colora con una regola più forte di un selettore per tag — servono `!important` mirati, non un h1 nudo. `.card.grid-bg` (il riquadro dell'invito finale) NON ha `scanlines`: resta di carta. */ .grid-bg.scanlines{ --bg:#12302a;--bg-2:#17382f;--surface:#17382f;--surface-2:#1d443a; --line:#2a4a42;--line-2:#3d5f56; --text:#f4f1e8;--text-1:#fff;--text-2:#cfdbd6;--text-3:#9fb3ac;--text-mute:#8fa39c; --accent:#ffaa00;--accent-2:#ffc247;--accent-soft:rgba(255,170,0,.14);--gold:#ffaa00; --green:#00cc88;--on-accent:#12302a; --font-display:"Inter Tight",system-ui,sans-serif; position:relative;background:#12302a;color:#f4f1e8; border-bottom:1px solid #2a4a42!important;border-top:0!important; } .grid-bg.scanlines::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("assets/foto_trading_1.png");background-size:cover;background-position:center 38%; opacity:.42; } /* la sfumatura che tiene il testo leggibile sopra la foto: senza, un punto chiaro della fotografia può portare un titolo bianco sotto il 4,5:1 e non te ne accorgi finché non capita proprio su quella parola. */ .grid-bg.scanlines::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(18,48,42,.62) 0%,rgba(18,48,42,.38) 45%,rgba(18,48,42,.80) 100%); } .grid-bg.scanlines > *{position:relative;z-index:2} .grid-bg.scanlines h1,.grid-bg.scanlines .h1, .grid-bg.scanlines h2,.grid-bg.scanlines .h2, .grid-bg.scanlines h3,.grid-bg.scanlines .h3{color:#fff!important;font-family:"Inter Tight",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.025em!important;line-height:1.06!important} .grid-bg.scanlines h1 span,.grid-bg.scanlines .h1 span, .grid-bg.scanlines h1 em,.grid-bg.scanlines .h1 em{color:#ffaa00!important;font-style:normal} .grid-bg.scanlines p,.grid-bg.scanlines .lead{color:#cfdbd6!important} /* L'OCCHIELLO VERDE HA UN AVVERSARIO DICHIARATO, e l'ho trovato misurando le regole che lo colpiscono invece di guardarlo a occhio: `mtc_ticker.css` porta `#root main .eyebrow[style*="var(--accent)"]{color:var(--text)!important}` — specificità (1,3,2) più important, cioè più forte di qualunque `.classe .classe` anche importante. Era stata scritta per spegnere gli occhielli ambra sopra il listino. Per vincerla non basta ripetere `!important`: serve una specificità maggiore, e la si prende nominando `#root main` e lo stesso attributo. Ripetere la regola più debole avrebbe lasciato l'occhiello grigio senza che nulla lo segnalasse. */ #root main section.grid-bg.scanlines .eyebrow, #root main section.grid-bg.scanlines .eyebrow[style*="var(--accent)"], #root main section.grid-bg.scanlines > .wrap > .eyebrow{color:#00cc88!important} .grid-bg.scanlines .term-head{color:#9fb3ac} .grid-bg.scanlines .btn-primary{background:#ffaa00;border-color:#ffaa00;color:#12302a} .grid-bg.scanlines .btn-primary:hover{background:transparent;color:#ffaa00} .grid-bg.scanlines .btn-ghost{color:#f4f1e8;border-color:#3d5f56} .grid-bg.scanlines .btn-ghost:hover{color:#ffaa00;border-color:#ffaa00;background:rgba(255,170,0,.10)} .grid-bg.scanlines .card{background:rgba(23,56,47,.82);border-color:#2a4a42;color:#f4f1e8;backdrop-filter:blur(6px)} /* LA FOTO GIUSTA PER OGNI PAGINA. Sedici foto in cartella, una per rotta: il cappello degli strumenti non può avere la stessa immagine di quello della meditazione. */ body[data-rotta="home"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_1.png")} /* UNA FOTO PER ROTTA, non una per famiglia. Prima scan, strumenti e i tre attrezzi avevano TUTTI foto_trading_2: aprendo Strumenti e poi TRADER.SCAN si vedeva due volte la stessa immagine di fila. Le foto di trading sono quattro per una dozzina di rotte, quindi qualche riuso resta — ma fra pagine lontane, mai fra due che si aprono una dietro l'altra. La pagina che ELENCA gli strumenti prende il collage dei quattro, come lifestyle ed esperti: una pagina-indice non ha un soggetto solo. */ body[data-rotta="tools"] .grid-bg.scanlines::before{background-image:url("assets/collage_strumenti_v3.png");background-position:center center} body[data-rotta="scan"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_2.png")} body[data-rotta="tsstrategy"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_3.png")} body[data-rotta="tsflow"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_1.png")} body[data-rotta="tsalerts"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_4.png")} body[data-rotta="journal"] .grid-bg.scanlines::before, body[data-rotta="portfolio"] .grid-bg.scanlines::before, body[data-rotta="corrguide"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_4.png")} body[data-rotta="dashboard"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_3.png")} /* LA PAGINA LIFESTYLE non ha UNA disciplina: le ha tutte e tre. Quindi dietro il titolo non ci va la foto di una sola (era la meditazione: una scelta arbitraria che escludeva le altre due) ma un COLLAGE dei tre mondi — lifecoaching, meditazione, fitness — composto a 2400×900 con le foto vere e i tagli nel verde del tema, così le giunzioni non si vedono come righe nere. */ body[data-rotta="lifestyle"] .grid-bg.scanlines::before, body[data-rotta="academy"] .grid-bg.scanlines::before{background-image:url("assets/collage_lifestyle_v3.png");background-position:center center} body[data-rotta="corso"] .grid-bg.scanlines::before, body[data-rotta="lesson"] .grid-bg.scanlines::before{background-image:url("assets/foto_lifecoaching_4.png")} /* IL CALCOLATORE BMI PRENDE LA FOTO CHE MISURA UN CORPO, non una qualunque di palestra (richiesta del 20-09: «il trading non c'entra col calcolatore di bio massa»). `foto_fitness_2` è una panca scura con gli elastici: dietro un cappello notturno diventa una macchia nera che può sembrare qualunque cosa, e infatti è stata scambiata per un desk. `foto_fitness_3` è l'orologio che mostra tempo, calorie, battito e passi: dice «misura del corpo» in mezzo secondo, che è esattamente quello che fa quella pagina, ed è luminosa abbastanza da leggersi. IL CALCOLATORE DI POSIZIONE (`calc`) è tutt'altro mestiere e torna a una foto di trading: li avevo messi insieme solo perché si chiamano tutti e due «calcolatore», che non è una ragione. */ body[data-rotta="bodycalc"] .grid-bg.scanlines::before{background-image:url("assets/foto_fitness_3.png")} body[data-rotta="calc"] .grid-bg.scanlines::before{background-image:url("assets/foto_trading_4.png")} /* LE FOTO DI FITNESS SONO TRE, e la prima era finita in cinque posti: la copertina della scheda, il cappello della disciplina, l'accesso, e tutt'e due i collage — cioè sulla pagina del fitness comparivano gli stessi manubri due volte, in grande e in piccolo. Ora: 1 = la copertina della scheda · 2 = il cappello della disciplina · 3 = il calcolatore BMI. L'ACCESSO non è fitness e non c'entrava niente: passa a una foto di meditazione. Con tre file non si può fare di meglio: per più varietà servono altre foto. */ body[data-rotta="quiz"] .grid-bg.scanlines::before{background-image:url("assets/foto_lifecoaching_1.png")} body[data-rotta="pricing"] .grid-bg.scanlines::before{background-image:url("assets/foto_lifecoaching_2.png")} body[data-rotta="experts"] .grid-bg.scanlines::before{background-image:url("assets/collage_esperti_v3.png");background-position:center center} body[data-rotta="expert"] .grid-bg.scanlines::before{background-image:url("assets/foto_meditazione_2.png")} body[data-rotta="blog"] .grid-bg.scanlines::before{background-image:url("assets/foto_meditazione_3.png")} body[data-rotta="about"] .grid-bg.scanlines::before, body[data-rotta="contact"] .grid-bg.scanlines::before{background-image:url("assets/foto_meditazione_5.png")} body[data-rotta="auth"] .grid-bg.scanlines::before, body[data-rotta="welcome"] .grid-bg.scanlines::before{background-image:url("assets/foto_meditazione_4.png")} /* LE TRE DISCIPLINE hanno la LORO foto dietro il titolo, e la copertina impilata sopra la scritta sparisce: nel cappello del trading la foto sta dietro e il testo ci sta dentro, e le altre tre devono comportarsi allo stesso modo. Le tre rotte sono la stessa (`home`), quindi il segno lo scrive lo script della prova su `data-disc`. La foto dietro NON è la stessa della copertina della scheda: è un'altra della stessa famiglia, se no la pagina ripete due volte la stessa immagine a due dimensioni diverse. */ /* TERZA VOLTA che `mtc_ticker.css` vince con un `#root main ...`, e stavolta la lezione era gia' scritta nei commenti qui sopra senza essere applicata qui sotto: `[data-v3-cover]{display:none!important}` e' specificita' (0,1,0), mentre `#root main section.grid-bg.scanlines > .wrap > div{display:block!important}` e' (1,3,3). Due `!important` non pareggiano: vince il piu' specifico. La copertina restava in pagina mentre l'attributo era scritto correttamente, cioe' il guasto SEMBRAVA dello script e non lo era. Qui si sale a (1,3,4) nominando lo stesso percorso piu' l'attributo. */ #root main section.grid-bg.scanlines > .wrap > div[data-v3-cover], [data-v3-cover]{display:none!important} body[data-disc="lifecoaching"] .grid-bg.scanlines::before{background-image:url("assets/foto_lifecoaching_3.png")} body[data-disc="meditation"] .grid-bg.scanlines::before{background-image:url("assets/foto_meditazione_2.png")} body[data-disc="fitness"] .grid-bg.scanlines::before{background-image:url("assets/foto_fitness_2.png")} /* ═══ I TRE SETTORI DEGLI ESPERTI ════════════════════════════════════════════════════════ Stessa logica delle discipline, stesso motivo: fisco, legale e nutrizione vivono TUTTI sulla rotta `expert`, quindi la rotta non li distingue. Il settore lo scrive lo script su `data-settore`, leggendolo dai parametri dell'indirizzo e, se lì non basta, dal titolo in pagina — così non dipende dal NOME del parametro, che può cambiare senza avvisare. Le regole stanno DOPO quella di `expert`: stessa specificità (0,2,1), vince l'ultima. La pagina che li elenca tutti prende il collage dei tre, come lifestyle. */ body[data-settore="fisco"] .grid-bg.scanlines::before{background-image:url("assets/foto_fisco_1.jpg");background-position:center 45%} body[data-settore="legale"] .grid-bg.scanlines::before{background-image:url("assets/foto_legale_1.jpg");background-position:center 62%} body[data-settore="nutrizione"] .grid-bg.scanlines::before{background-image:url("assets/foto_nutrizione_1.jpg");background-position:center 50%} /* ═══ 6 · LA ZONA CHIARA: i percorsi ════════════════════════════════════════════════════════ Le sezioni su `--bg-2` diventano una carta più profonda invece di un altro colore: il ritmo della pagina lo fanno il filo e la tonalità, non un secondo fondo acceso. */ .section{border-color:var(--line)} .areas-grid .card,.mtc-life-fig .fig{border-radius:3px;background:var(--surface);border-color:var(--line)} /* le copertine delle quattro discipline si comportano come le schede-foto della v3: 4:3, taglio pieno, nessun angolo tondo interno. Il markup c'era già — mancava solo la forma. */ /* le copertine delle quattro discipline si comportano come le schede-foto della v3: la foto tocca i bordi, il testo sta in un riquadro sotto. Il markup c'era già — mancava solo la forma: la scheda aveva 26px di margine tutt'intorno, quindi l'immagine galleggiava dentro una cornice bianca invece di riempirla. */ .areas-grid .card{padding:0;overflow:hidden} .areas-grid .card > *:not(:first-child){padding-left:20px;padding-right:20px} .areas-grid .card > *:last-child{padding-bottom:20px} .areas-grid .card > div:first-child img, .areas-grid .card > div:first-child svg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--img-tint)} .areas-grid .card h3{font-family:var(--font-mono)!important;font-size:11.5px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} /* il titolo di sezione sulla carta prende le grazie; nella notte no — è già gestito dal token, qui si toglie solo il monospaziato scritto inline su alcuni titoli della home. */ /* il titolo di sezione sulla carta prende le grazie e l'inchiostro pieno. Il sito lo scriveva nell'ORO dell'accento e in maiuscolo: sulla crema l'oro dà 5,5:1, cioè passa, ma un titolo che ha lo stesso colore dell'occhiello sopra di sé non è più una gerarchia — sono due etichette. Nella v3 l'occhiello è oro e il titolo è nero. */ .section h2,.section .h2{font-family:var(--font-display);letter-spacing:0;color:var(--text);text-transform:none} #root main .section h2,#root main .section .h2{color:var(--text)!important} /* l'occhiello non deve andare a capo su due righe in mezzo alla pagina: il blocco che lo contiene è centrato e stretto, e «I MONDI DEL CLUB» ci finiva spezzato in due. */ .section .eyebrow{max-width:none;text-wrap:balance} /* la fascia fotografica che apre la home: nella v3 è un blocco a tutta larghezza, e va staccata dalla barra con lo stesso filo del resto. */ #root > div > img[src*="home_collage"]{border-bottom:1px solid #2a4a42!important;filter:saturate(.95) contrast(1.04)} /* ═══ 7 · LE ROTTE DEGLI STRUMENTI: notte intera ════════════════════════════════════════════ DUE PAGINE SONO USCITE DALLA NOTTE (richiesta del 20-09): AREA MEMBRI e STRUMENTI tornano su carta, com'erano. Le avevo incluse per categoria — «area riservata», «strumenti» — e la categoria era il ragionamento sbagliato: sono due pagine che si LEGGONO (il tuo percorso, i tuoi appuntamenti; l'elenco di cosa c'è dentro), non due pannelli di numeri che si guardano. La notte resta a TRADER.SCAN e agli attrezzi che aprono ordini o mostrano serie di prezzi. I loro CAPPELLI restano scuri come tutti gli altri: quello è il ritmo della v3, non la zona. */ body[data-rotta="scan"],body[data-rotta="tsstrategy"], body[data-rotta="tsflow"],body[data-rotta="tsalerts"],body[data-rotta="journal"], body[data-rotta="portfolio"],body[data-rotta="corrguide"], body[data-rotta="etf"],body[data-rotta="correlations"]{ --bg:#12302a;--bg-2:#17382f;--surface:#17382f;--surface-2:#1d443a;--surface-elev:#24503f; --line:#2a4a42;--line-2:#3d5f56; --text:#f4f1e8;--text-1:#fff;--text-2:#9fb3ac;--text-3:#8fa39c;--text-mute:#7d8a84; --accent:#ffaa00;--accent-2:#ffc247;--accent-soft:rgba(255,170,0,.12);--gold:#ffaa00; --on-accent:#12302a; --green:#00cc88;--green-soft:rgba(0,204,136,.12); --red:#ff5577;--red-soft:rgba(255,85,119,.11); --blue:#4aa3e0;--purple:#a98bff;--orange:#ff9a3c;--yellow:#e8c547; --font-display:"Inter Tight",system-ui,sans-serif; --img-tint:none; background:#12302a;color:#f4f1e8;color-scheme:dark; } body[data-rotta="scan"] h1, body[data-rotta="journal"] h1,body[data-rotta="portfolio"] h1,body[data-rotta="corrguide"] h1, body[data-rotta="scan"] .h1, body[data-rotta="scan"] h2, body[data-rotta="scan"] .h2{ font-family:"Inter Tight",system-ui,sans-serif;font-weight:600;letter-spacing:-.02em} body[data-rotta="scan"] .input, body[data-rotta="journal"] .input,body[data-rotta="portfolio"] .input{background:#17382f;color:#f4f1e8;border-color:#3d5f56} body[data-rotta="scan"] .btn-primary, body[data-rotta="journal"] .btn-primary, body[data-rotta="portfolio"] .btn-primary{background:#ffaa00;border-color:#ffaa00;color:#12302a} body[data-rotta="scan"] .journal-table th,body[data-rotta="journal"] .journal-table th{background:#1d443a;color:#9fb3ac;border-color:#2a4a42} body[data-rotta="scan"] .journal-table td,body[data-rotta="journal"] .journal-table td{border-color:#2a4a42;color:#cfdbd6} /* ═══ 8 · IL PIEDE È NOTTE, SEMPRE ══════════════════════════════════════════════════════════ Stessa arma della barra: i token scuri ridichiarati dentro `.footer`, altrimenti gli inchiostri di carta finiscono sul nero. Il segno del marchio è trasparente e ci sta sopra senza toppe; il nome resta tipografia, come deciso il 14-09. */ .footer{ --bg:#12302a;--bg-2:#12302a;--surface:#17382f;--line:#2a4a42;--line-2:#3d5f56; --text:#f4f1e8;--text-2:#9fb3ac;--text-3:#8fa39c;--text-mute:#7d8a84; --accent:#ffaa00;--gold:#ffaa00;--on-accent:#12302a; background:#12302a;border-top:1px solid #2a4a42;color:#9fb3ac; font-family:var(--font-mono);font-size:11.5px;line-height:1.85 } .footer a{color:#9fb3ac}.footer a:hover{color:#ffaa00} .footer .logo-full-img{filter:none} .footer .logo::after{font-family:"Inter Tight",system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;background:linear-gradient(#f4f1e8 0 33.333%,#ffaa00 33.333% 66.666%,#f4f1e8 66.666% 100%);-webkit-background-clip:text;background-clip:text;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){.footer .logo::after{background:none;color:#f4f1e8}} .footer .disclaimer{background:rgba(255,85,119,.07);border-color:rgba(255,85,119,.24);color:#9fb3ac} .footer .disclaimer strong{color:#ff7d95} /* ═══ 9 · LA SOGLIA: lo splash torna nero e ambra ═══════════════════════════════════════════ tema5 lo aveva vestito di verde istituto. La v3 è nera: la prima cosa che si vede deve essere la stessa cosa che si trova dentro. */ html #intro-splash{background:#12302a} #intro-splash .intro-tag{font-family:var(--font-mono);color:#7d8a84;letter-spacing:.34em} #intro-splash .intro-phrase{font-family:"Inter Tight",system-ui,sans-serif;font-weight:700;font-size:clamp(23px,3.9vw,44px);color:#fff;letter-spacing:-.025em;line-height:1.08} #intro-splash .intro-enter{font-family:var(--font-mono);font-weight:700;letter-spacing:.16em;border-radius:2px;background:#ffaa00;border-color:#ffaa00;color:#12302a;box-shadow:none} #intro-splash .intro-enter:hover{background:transparent;color:#ffaa00;border-color:#ffaa00;box-shadow:0 0 26px 0 rgba(255,170,0,.26)} #intro-splash .intro-lang button{font-family:var(--font-mono);border-radius:2px;border-color:#2a4a42;color:#8fa39c} #intro-splash .intro-lang button:hover{color:#f4f1e8;border-color:#5c7a72} #intro-splash .intro-lang button.sel{background:#ffaa00;border-color:#ffaa00;color:#12302a;font-weight:700} /* ═══ 10 · IL PANNELLO IN DIRETTA E IL LISTINO ══════════════════════════════════════════════ Vivono fuori da React e leggono le variabili: cambiano pelle quasi da sé. Quasi. IL DIFETTO CHE QUESTA SEZIONE AVEVA, e il motivo per cui una riga vecchia va RISCRITTA e non conservata: qui c'era `.mtc-hero-split .mtc-live *{color:initial}`, scritta quando il pannello era BIANCO dentro un cappello scuro — allora `initial`, che computa NERO, era la cosa giusta. Da questo giro il cappello dipinge di notte anche le schede che contiene, quindi quella riga metteva nero su #17382f: 1,13:1, cioè il titolo «TRADER.SCAN · IN DIRETTA», la riga dei dati e tutte le pastiglie dei mercati sparivano — sopra la piega, nella prima schermata della home. Un commento che descrive uno stato che non esiste più è peggio di nessun commento: la riga sembrava una protezione e invece era il guasto. SCELTA: il pannello sta nella zona notte, quindi prende gli inchiostri della notte. `initial` non torna da nessuna parte — un valore che dipende da cosa c'è intorno non si usa per fissare un colore. */ .mtc-ticker{background:#12302a;border-bottom:1px solid #2a4a42;font-family:var(--font-mono)} /* IL PANNELLO IN DIRETTA TORNA BIANCO COL VERDE (richiesta del 20-09: «come prima»). Lo avevo fatto di notte perché il cappello che lo contiene è scuro, ed era leggibile — ma «leggibile» non vuol dire «giusto»: su carta bianca dentro una fascia scura il pannello STACCA, e quel pannello è la cosa che deve saltare all'occhio. I token della carta ridichiarati qui dentro, altrimenti eredita gli inchiostri chiari del cappello e sparisce. Misurato su bianco #fffdf9: verde #12302a = 14,8:1 · secondario #2b4a42 = 9,0:1 · ottone #8a5a20 = 5,3:1. Tutti sopra il minimo. */ .grid-bg.scanlines .mtc-live,.mtc-hero-split .mtc-live{ --bg:#fffdf9;--bg-2:#f7f2e9;--surface:#fffdf9;--surface-2:#f7f2e9; --line:#e2dcd0;--line-2:#cfc7b7; --text:#12302a;--text-1:#0a1f1b;--text-2:#12302a;--text-3:#2b4a42;--text-mute:#67746e; --accent:#8a5a20;--gold:#8a5a20;--on-accent:#fffdf9;--green:#1f6b4a;--red:#a4323c; background:#fffdf9;border:1px solid #cfc7b7;border-radius:3px;color:#12302a; box-shadow:0 18px 40px -26px rgba(0,0,0,.55) } .grid-bg.scanlines .mtc-live *,.mtc-hero-split .mtc-live *{color:inherit} /* E I PARAGRAFI DEL PANNELLO VANNO NOMINATI, se no perdono. È lo STESSO difetto del nero su nero di due giri fa, rovesciato: allora il pannello era scuro dentro un cappello scuro, ora è bianco dentro un cappello scuro, e `.grid-bg.scanlines p{color:#cfdbd6!important}` — il verde chiaro pensato per il testo SOPRA la foto — finiva dentro il pannello bianco: 1,40:1 su una riga sola, quella del ponte MT5. `color:inherit` senza important non può vincere contro un important: serve la stessa arma più un grado di specificità. */ .grid-bg.scanlines .mtc-live p,.mtc-hero-split .mtc-live p, .grid-bg.scanlines .mtc-live .lead,.mtc-hero-split .mtc-live .lead{color:#12302a!important} .grid-bg.scanlines .mtc-live b,.mtc-hero-split .mtc-live b, .grid-bg.scanlines .mtc-live strong,.mtc-hero-split .mtc-live strong{color:#0a1f1b} .grid-bg.scanlines .mtc-live small,.mtc-hero-split .mtc-live small, .grid-bg.scanlines .mtc-live .mtc-live-note,.mtc-hero-split .mtc-live .mtc-live-note{color:#2b4a42} /* le pastiglie dei mercati: filo chiaro, inchiostro verde, e quella scelta in verde pieno */ .grid-bg.scanlines .mtc-live button,.mtc-hero-split .mtc-live button{background:#fffdf9;border-color:#cfc7b7;color:#12302a} .grid-bg.scanlines .mtc-live button:hover,.mtc-hero-split .mtc-live button:hover{border-color:#8a5a20;color:#8a5a20} .grid-bg.scanlines .mtc-live button.on,.mtc-hero-split .mtc-live button.on, .grid-bg.scanlines .mtc-live button[aria-pressed="true"],.mtc-hero-split .mtc-live button[aria-pressed="true"]{background:#12302a;border-color:#12302a;color:#fffdf9;font-weight:700} /* ═══ 11 · QUELLO CHE TEMA5 AVEVA GIÀ CORRETTO E VA TENUTO ══════════════════════════════════ Le griglie dell'area membri sono scritte inline nel markup: senza queste righe `!important` tornano a tre colonne fisse sul telefono. Ridichiarate qui perché il foglio che le conteneva ora è coperto da questo. */ .members-grid-3,.ov-cols{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important} .members-grid-2,.ov-two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important} @media(max-width:720px){ .members-grid-3,.members-grid-2,.ov-cols,.ov-two{grid-template-columns:1fr!important} .card{padding:16px 14px} .section{padding-top:44px;padding-bottom:44px} .grid-bg.scanlines::before{background-position:center 30%} } .fade-in{animation:mtcFade .22s ease-out} @keyframes mtcFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ═══ 12 · LE FASCE: foto a tutta larghezza con una frase sopra ════════════════════════════ Questo blocco era rimasto FUORI dalla pelle, e a ragione: una frase in pagina è CONTENUTO, e il mandato diceva di non toccarlo. Il 20-09 il cliente l'ha chiesto esplicitamente, quindi ora si fa — con un vincolo che mi do da solo: NON invento frasi. Ogni riga è copiata dalle pagine della v3 che ha già letto e approvato. Dove una pagina non ne aveva una sua, prende quella che le somiglia di più, non una scritta nuova. La foto della fascia arriva da una variabile scritta dallo script, così la regola è una sola per tutte le pagine invece di una per rotta. */ /* IL TRITTICO «come sono fatti i moduli» (richiesta del 20-09). Nella v3 disegnata è una griglia di tre schede-foto con l'etichetta in monospaziato e il testo sotto. Qui prende i NOSTRI colori e i NOSTRI caratteri: etichetta in ottone sulla carta e in ambra nella notte, inchiostro verde, filo di un pixel, angolo di 3px — tutto letto dalle variabili, quindi la stessa regola veste tutt'e due le zone senza una seconda copia. */ .v3-trittico{background:var(--bg);padding:58px 0;border-top:1px solid var(--line)} .v3-trittico .in{max-width:1180px;margin:0 auto;padding:0 22px} .v3-trittico .oc{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:20px} .v3-trittico .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px} .v3-trittico .b{background:var(--surface);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column} .v3-trittico .b img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--img-tint)} .v3-trittico .b h3{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0;padding:18px 20px 0;line-height:1.4} .v3-trittico .b p{margin:0;padding:11px 20px 20px;color:var(--text-2);font-size:14px;line-height:1.72} .v3-fascia{position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;min-height:clamp(230px,32vw,360px);background:#12302a;border-top:1px solid #2a4a42;border-bottom:1px solid #2a4a42} .v3-fascia::before{content:"";position:absolute;inset:0;background-image:var(--v3-foto);background-size:cover;background-position:center 45%;background-repeat:no-repeat;opacity:.46} .v3-fascia::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,48,42,.58) 0%,rgba(18,48,42,.34) 45%,rgba(18,48,42,.74) 100%)} .v3-fascia p{position:relative;z-index:2;margin:0;padding:clamp(38px,6vw,58px) 26px;max-width:58ch;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(20px,2.7vw,34px);line-height:1.34;color:#fff;text-wrap:balance} /* ═══ 13 · QUELLO CHE ANCORA NON C'È, E PERCHÉ ══════════════════════════════════════════════ Un blocco della v3 disegnata NON compare qui: la STRISCIA DEI NUMERI (`.proof`). Non è una dimenticanza: sono cifre, cioè affermazioni, e una cifra si mette in pagina quando il cliente dice QUALE — non si sceglie di nascosto dentro un foglio di stile. Nella v3 disegnata quella classe non veste niente nemmeno lì: è CSS senza markup, da tutte e due le parti. */