/* ===================================================================== TEMA DASHBOARD ATHENA - foglio di stile condiviso, VIVO dal 31/07 --------------------------------------------------------------------- Questo file e' l'UNICO posto da modificare per cambiare token e pattern condivisi. Vive in assets/ (non piu' dentro template/) perche' non e' piu' solo una bozza: e' collegato per davvero, con , sia dalle 4 pagine-tipo di template/ sia dalle pagine reali gia' portate. Per Pietro: cambia i valori nel blocco TOKEN e ricarica una pagina qualsiasi tra quelle collegate. Tutto si adegua insieme, non devi cercare i colori dentro l'HTML. Pagine reali gia' collegate (manifesto completo e regola di propagazione in template/sistema-design-athena.md): - bank-research/index.html (dal 31/07) Ogni pagina reale futura si collega qui invece di ricopiare i token — vedi "Checklist di porting" punto 9 in template/sistema-design-athena.md. SCALA TIPOGRAFICA DI RIFERIMENTO (deciso 29-30/07 confrontando con skills/investing-report/template-web.html — regola: tra i due vince sempre il valore piu' grande, mai quello piu' piccolo): Corpo narrativo (Lora)........17px (gia' uguale nei due sistemi) Testo secondario (Lora)....... 15px (Investing Insight vinceva) Etichette maiuscole...........13px (Investing Insight vinceva) Dati tabellari (mono)..........14px (tema.css vinceva) Disclaimer / footer............13px (Investing Insight vinceva) H1 / titolo di pagina..........44px (deciso da Pietro, allinea COT/ Daily Snapshot/Weekly Playbook/ Retail Sentiment che erano gia' su questa taglia; NON si applica alla homepage, che ha gia' la sua) Vale per le pagine di report/archivio del Gruppo A/B. La homepage e i blocchi fissi di sidebar/topbar NON si toccano: hanno gia' le loro taglie. ===================================================================== */ /* ===================================================================== 1. TOKEN -- e' qui che si lavora ===================================================================== */ :root{ /* --- Fondali e superfici ------------------------------------------ Deciso (sistema di design ATHENA): nero e grigi neutri, non i grigi con punta di blu che le pagine usano oggi. */ --bg: #000000; --surface: #0D0D0D; --surface-2: #131313; --surface-3: #191919; --border: #2E2E2E; /* --- Rosso di marca (allineato alla brand guide) ------------------ */ --red: #BF1922; --red-light: #E32832; --red-dark: #92131A; --red-dim: rgba(191,25,34,.15); --red-line: rgba(191,25,34,.32); /* --- Testo -------------------------------------------------------- Corretto il 31/07: la brand guide distingueva #FFFFFF titoli da #E8E8E8 corpo, ma quella distinzione non e' mai stata costruita da nessuna parte — la homepage vera (fonte di verita', vedi regola "il template si allinea alla homepage") usa #FFFFFF per tutto cio' che non e' --muted/--dim, il suo --g1/#E8E8E8 e' dichiarato ma mai usato. tema.css seguiva ancora l'aspirazione della brand guide, non la pratica reale: allineato. */ --text: #FFFFFF; --muted: #AAAAAA; --dim: #666666; /* --- Colori di segnale -------------------------------------------- Corretto il 2/08 (Pietro): non "rimossi", erano in stand-by senza un caso d'uso reale davanti. Trovato un uso reale, coerente su molte pagine non ancora restilizzate, per ambra e blu — rimessi come stati a sé, non varianti di rosso/verde/neutro: --red/--red-light : negativo, rischio, attenzione forte --green : positivo, completo, riuscito --amber : neutro, moderato, in corso/in attesa --blue : informativo, "guarda qui" (non un giudizio positivo o negativo) - diverso da --blu-ist sotto, che e' categorico, non di stato Viola resta fuori da questo gruppo: i suoi usi reali sono categorie senza gerarchia, non stati — vedi "Colori categorici" sotto e pipeline.md (vault) per i casi reali trovati e la valutazione rimandata a quando si porta una di quelle pagine. */ --green: #22C55E; --amber: #F59E0B; --blue: #60A5FA; /* --- Colori categorici ------------------------------------------- Caso diverso dal rosso/verde di stato: servono a distinguere categorie senza gerarchia (es. tipo di fonte in bank-research, classi di asset nel COT Report, temi nel Macro Report) — qui il colore va tenuto, mai ridotto a neutro. Set aperto: aggiungere qui una voce per ogni nuova categoria condivisa tra piu' pagine, non inventarne una diversa dentro la singola pagina. Usati per la prima volta in bank-research (29-30/07) per il badge fonte. */ --oro: #C9A84C; /* Premium / accento; Metalli nel COT Report */ --oro-light: #E8D8A0; /* variante chiara di --oro, stesso ruolo di --red/--red-light - testo leggibile su sfondo scuro dove --oro sarebbe poco contrastato (link Premium in bank-research, 5/08) */ --blu-ist: #5D7A99; /* banche centrali; Tassi nel COT, BCE/Fed nel Macro Report */ --teal-dati: #4F8F82; /* petrolio/fonti dati; Energia nel COT e nel Macro Report */ --argento-fx: #8F8C96; /* Valute, COT Report e Macro Report */ --viola-vol: #8B7AB5; /* Indici e volatilita, COT Report (VIX = viola nei terminali) */ --khaki-agri: #8F9450; /* Agricoli, COT Report */ --rosa-soft: #9C6E74; /* Soft & livestock, COT Report */ --rame-crescita: #B37B45; /* Crescita/manifattura, solo Macro Report */ --mattone-inflazione: #A8503F; /* Inflazione, solo Macro Report */ /* Natura del dato (Dizionario Macro, 11/08) - anticipatore/coincidente/ritardato: tre categorie senza gerarchia, non uno stato (nessuna e' "migliore" delle altre) - deciso con Pietro di non riusare blu/ambra di stato (mismatch concettuale, vedi audit dell'11/08) ne' tre intensita' dello stesso colore (non abbastanza distinguibili). Narrativa: orizzonte (quello che si vede arrivare) / presente attivo / passato sedimentato. */ --nat-leading: #5B95B0; /* Anticipatore - azzurro-ghiaccio */ --nat-coincident: #C97B4C; /* Coincidente - arancio bruciato */ --nat-lagging: #6B5568; /* Ritardato - prugna spenta */ /* --- Font (allineati alla brand guide) ---------------------------- */ --font-ui: 'Montserrat', Arial, sans-serif; /* titoli, etichette */ --font-body: 'Lora', Georgia, serif; /* testo narrativo */ --font-mono: 'Roboto Mono', Consolas, monospace; /* numeri e dati */ /* --- Spaziature ----------------------------------------------------- Scala fissa (30/07): quando serve un margine/padding/gap nuovo, usare una di queste invece di scrivere un numero a mano — evita che si accumulino valori leggermente diversi mai decisi apposta. Non cambia nulla di gia' scritto, e' solo per il codice nuovo da qui in avanti. */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; /* --- Etichette compatte (maiuscole, sopra un valore o un controllo) --- Deciso il 5/08 con Pietro, dopo aver trovato la stessa etichetta scritta a taglie diverse (9/11/13px) senza un vero motivo su COT Report/Banche Centrali/Weekly Playbook/Stagionalita'. Non un'unica taglia obbligata ovunque - due, deliberate, riusate cosi' come sono gia' in uso nel sistema reale (nessun numero nuovo inventato): --label-lg: caso standard - etichetta isolata o griglia larga (4 colonne o meno). E' gia' la taglia del COT Report (il piu' recente) e quella della scala tipografica del 29-30/07 ("Etichette maiuscole 13px"). Di default, quando si porta/ritocca una pagina usare questa. --label-sm: spazi stretti - righe di controlli affollate, pillole, KPI strip dense (5+ colonne). E' gia' la taglia di .box-t (condiviso) e delle etichette di Banche Centrali. Scendere qui solo se lo spazio reale lo richiede (verificato con uno screenshot, non deciso a priori) - l'etichetta conta meno del valore sotto in questi casi, c'e' meno urgenza di farla grande. */ --label-lg: 13px; --label-sm: 11px; /* --- Numeri in evidenza (il "valore grande" di una card KPI) ---------- Deciso il 5/08 con Pietro, stesso spirito delle etichette sopra: non una taglia unica, ma una SCALA con 5 scalini, tutti riusati da valori gia' reali nel sistema (nessun numero inventato) - dal piu' grande al piu' piccolo: --num-1: 34px - .stat-n condiviso (usato in Gestione Licenze). Il piu' grande disponibile. --num-2: 28px - .kpi-value di Banche Centrali. --num-3: 22px - .kpi-price di Weekly Playbook, .doughnut-big .kpi-value di Stagionalita'. --num-4: 19px - .pnl-sm .kpi-value di Stagionalita' (griglie KPI dense, 4+ colonne). --num-5: 15px - non usato da nessun componente reale oggi (Stagionalita' l'ha liberato il 5/08, vedi pagine-reali/seasonality.md "Ottavo giro": lo spazio reale nelle card del Simulatore Trade permetteva di salire a --num-4). Resta nella scala di proposito, come riserva gia' validata per un caso futuro ancora piu' stretto - non cancellarlo solo perche' oggi non serve a nessuno. REGOLA — si parte SEMPRE dallo scalino piu' grande che entra nel layout reale (verificato con uno screenshot, mai deciso a priori); se non entra si scende di UNO scalino alla volta (1->2-> 3->...), mai un numero a caso in mezzo. Il COT Report usa una tecnica diversa (clamp(), scala col viewport tra ~22px e ~35px) - non va forzato su questa scala fissa, i suoi due estremi combaciano gia' con --num-1 e --num-3. ABBINAMENTO CON L'ETICHETTA (obbligatorio, deciso lo stesso giorno): l'etichetta sopra un numero deve sempre essere proporzionata allo scalino del numero, mai a caso - --num-1 / --num-2 / --num-3 -> --label-lg (numero prominente, l'etichetta puo' permettersi di essere leggibile quanto lo e' altrove nel sistema) --num-4 / --num-5 -> --label-sm (griglia densa, l'etichetta conta meno del numero e deve restare compatta per non affollare la card) Non mescolare le coppie (es. mai --num-4 con --label-lg) senza un motivo scritto qui accanto. */ --num-1: 34px; --num-2: 28px; --num-3: 22px; --num-4: 19px; --num-5: 15px; /* --- Misure -------------------------------------------------------- */ /* Corretto il 31/07: --r-md e --r-lg erano stati stimati a occhio (7/10px) invece di essere misurati sulla homepage vera. La homepage ha una scala --radius-sm/md/lg 4/8/12px, usata davvero (13 occorrenze): sm sui badge/ stelle, md sui controlli (pillole topbar, hamburger, .product-card), lg sui contenitori grandi (.hero-main/.hero-mini). Allineato: r-md ora serve anche .card (equivalente di .product-card), r-lg resta libero per un futuro contenitore grande in stile hero, non e' piu' usato da .card. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --pad-page: 24px 28px 70px; --maxw: 1400px; /* --- Profondita' ----------------------------------------------------- Corretto il 31/07: stimato a occhio, non misurato sull'hover reale di .product-card nella homepage (0 14px 32px rgba(0,0,0,.45)). Allineato. */ --shadow: 0 14px 32px rgba(0,0,0,.45); } /* ===================================================================== 2. BASE ===================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font-ui);min-height:100%;position:relative} /* Grana sottile sul nero pieno (deciso 30/07, confronto in template/07-effetti-proposte.html): da' "materialita'" invece di un nero digitale piatto. Opacita' bassissima apposta (2%) — non deve essere notata a colpo d'occhio, solo percepita da vicino. */ body::before{content:'';position:fixed;inset:0;z-index:0;opacity:.02;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .page-header,.page-content{position:relative;z-index:1} p{font-family:var(--font-body);font-size:17px;line-height:1.75;color:var(--muted);margin-bottom:13px} p strong,li strong{color:var(--text);font-weight:600} ul,ol{margin:0 0 14px 20px} li{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:7px} a{color:var(--red-light)} code{font-family:var(--font-mono);font-size:12px;color:var(--text); background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:1px 5px} hr{border:none;border-top:1px solid var(--border);margin:34px 0} /* ===================================================================== 3. TESTATA DI PAGINA Presente in quasi tutte le pagine della dashboard. ===================================================================== */ /* Non piu' sticky (deciso 2/08 con Pietro): la testata e' alta 186px e pesante (gradiente + watermark), restare fissa per sempre su pagine lunghe (es. weekly-playbook, bank-research) rubava spazio permanente al contenuto. La sidebar resta comunque sempre fissa e copre gia' il ruolo di orientamento ("in che pagina sono"), non si perde nulla lasciandola scorrere via. */ .page-header{position:relative} .page-hero{ position:relative;padding:26px 28px 22px;min-height:186px;box-sizing:border-box;overflow:hidden; background:linear-gradient(110deg,#0a0000 0%,#1a0306 35%,var(--surface-2) 100%); border-bottom:1px solid var(--red-line); } /* Deciso 30/07: 186px e' l'altezza concordata (misurata su bank-research, la prima pagina reale), non un valore a caso — con o senza sottotitolo la testata deve uscire sempre a quell'altezza per default (min-height, mai height fissa: una pagina con piu' contenuto puo' comunque crescere). Prima di questa regola le pagine senza sottotitolo erano 148px contro i 175-186px di quelle con sottotitolo, e il watermark (dimensionato per l'altezza piena) veniva tagliato in alto — segnalato da Pietro su "Pagina dati". Valutare le eccezioni caso per caso se una pagina reale ha davvero bisogno di uscire da questo standard, non di default. */ /* Tolto 30/07 il reticolo a griglia (repeating-linear-gradient) che stava qui: su un'area larga come la testata di pagina si vedeva come una vecchia trama a quadretti, non come profondita' sottile — segnalato da Pietro guardando bank-research dal vivo. Non riportarlo. */ /* watermark a icona: OBBLIGATORIO su ogni testata di pagina reale (deciso 30/07, non piu' opzionale) — un'icona enorme in filigrana (stessa tecnica delle card prodotto senza foto), fa parte della testata definitiva tanto quanto il breadcrumb. Aggiungere sempre ... come primo figlio di .page-hero, vedi l'esempio gia' presente in 02-05.html — non partire da una pagina senza guardare come l'hanno fatto quelle. REGOLA: l'icona DEVE essere la stessa gia' usata per quella pagina nella voce di menu della sidebar (index.html, .nav-item corrispondente) — mai disegnarne/sceglierne una nuova. Errore reale gia' successo (30/07): su bank-research era stata messa un'icona inventata (una casa) invece della valigetta gia' in sidebar, e prima ancora il watermark era stato dimenticato del tutto — per questo ora c'e' un esempio vero in ogni pagina tipo, non solo questo commento. */ .page-hero-icon{position:absolute;right:-20px;top:50%;transform:translateY(-50%);color:#fff;opacity:.06;pointer-events:none} /* Deciso 30/07: niente piu' colonna a destra separata (badge Premium + data) — allineato alla struttura reale di bank-research, dove .hero-inner e' un blocco unico e la data e' l'ultimo tag della riga, spinto a destra con margin-left:auto sullo span. .page-meta-row/.page-badge/ .page-date erano rimasti nel file "per altri usi" ma non li usava piu' nessuno (trovato il 31/07, la home del template li aveva ancora nell'header con un badge "Bozza" e una data fissa mai aggiornata) — rimossi per davvero, non tenere codice morto "nel dubbio". */ .page-hero-inner{position:relative;z-index:1} /* Deciso 30/07 (proposta C3 di template/06-header-varianti.html): niente piu' un'etichetta "Riservato/Premium" ripetuta identica su ogni pagina (ridondante, tutta la dashboard lo e'). .page-eyebrow ora e' un breadcrumb leggero "Dashboard / Nome pagina" — orienta davvero, utile anche su mobile dove la sidebar si chiude. */ .page-eyebrow{position:relative;z-index:1;font-size:11px;font-family:var(--font-ui); color:rgba(255,255,255,.35);margin-bottom:12px} .page-eyebrow .sep{margin:0 6px;color:rgba(255,255,255,.2)} /* segmento cliccabile del breadcrumb: solo quando punta a una pagina indice reale sopra quella corrente (es. corso.html/attestato.html -> video-library/index.html), mai sull'ultimo segmento (la pagina corrente, quella resta testo). Deciso 1/08 con Pietro: orientamento passivo (il breadcrumb) + azione visibile (.page-back sotto) non sono ridondanti come lo erano badge/loghi doppi - ruoli diversi, non la stessa informazione due volte. */ .page-eyebrow a{color:inherit;text-decoration:none;transition:color .15s} .page-eyebrow a:hover{color:rgba(255,255,255,.7)} .page-title{font-size:44px;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px;margin-bottom:10px} .page-title span{color:var(--red-light)} /* sottotitolo opzionale, una riga sola: usarlo solo se la pagina ha un dato reale da dire (fonti/copertura/periodo), non riempitivo generico */ .page-hero-sub{position:relative;z-index:1;font-size:14px;color:rgba(255,255,255,.5);margin-bottom:14px} .page-hero-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .page-hero-tag{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:rgba(255,255,255,.45);padding:3px 8px;border:1px solid rgba(255,255,255,.12);border-radius:2px} .page-hero-tag.accent{color:var(--red-light);border-color:var(--red-line)} /* Tenere i tag a 2-3 al massimo: sono l'unico numero visibile prima di entrare nel dettaglio, non un secondo posto dove elencare tutto. */ /* Tolto max-width:var(--maxw) il 4/08 (segnalato da Pietro su Stagionalita', poi verificato su tutte le pagine collegate): su un monitor normale (1920px) lasciava 240px di spazio nero vuoto a destra. La homepage vera - fonte di verita' - non ha mai avuto un limite di larghezza sul suo contenuto (la sua griglia si allarga aggiungendo colonne), quindi il valore era una stima mai confrontata con l'originale, a differenza di raggi/spaziature che invece lo erano stati. bank-research e weekly-playbook non sono toccati da questo cambio: hanno un contenitore proprio (.wrap 1100px, .evento-wrap) e non usano .page-content - continuano a limitare la larghezza dei paragrafi lunghi come prima. --maxw resta un token disponibile per chi lo vuole usare altrove. */ .page-content{padding:var(--pad-page)} /* Link di ritorno alla pagina indice - per pagine con una gerarchia a due livelli (es. video-library/corso.html e attestato.html, che dipendono da video-library/index.html). Riusa .btn (stesso stile secondario neutro di tutta la dashboard), va messo come primo elemento dentro .page-content, prima di qualunque altro blocco - non dentro .page-hero-tags (lì competeva visivamente con i tag informativi veri). Testo libero per pagina ("Torna a video Library", ecc.) - non serve una nuova classe per ogni caso, solo . */ .page-back{margin-bottom:20px;justify-self:start} /* ===================================================================== 4. TITOLI DI SEZIONE ===================================================================== */ /* font-size/peso/maiuscolo corretti il 31/07: erano stimati (13px, maiuscolo, spaziato), il vero .section-title della homepage e' 15px, peso 700, minuscolo normale, nessuna spaziatura. Portato a 18px il 5/08 (segnalato da Pietro, confrontando COT Report con le altre pagine): 15px violava la regola "mai un sottotitolo piu' piccolo del testo sotto" gia' scritta piu' in basso in questo file, visto che il corpo di testo del sistema e' 17px - un titolo di sezione deve superarlo, non stargli sotto. Diverge apposta dal valore originale della home (15px, non collegata a questo file): non e' una deriva non misurata come nel caso storico del 31/07, e' una correzione di gerarchia tipografica decisa con Pietro - non riportarlo a 15px pensando di "riallinearlo" alla home. */ .sec-title{font-size:18px;font-weight:700; color:var(--text);display:flex;align-items:center;gap:10px;margin-bottom:14px} .sec-title::before{content:'';display:block;width:3px;height:18px;background:var(--red); border-radius:2px;flex-shrink:0} .sec-title::after{content:'';display:block;flex:1;height:1px;background:linear-gradient(to right,var(--border),transparent)} .sec-count{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--red-light);flex-shrink:0} .section{margin-bottom:32px} /* Riga descrittiva sotto un .sec-title (5/08, segnalato da Pietro su Stagionalita'): ogni pagina la reinventava uguale a mano a 13px/font UI, troppo piccola - il pattern equivalente gia' esistente nel COT Report ("Lettura del posizionamento dei non commercial...") e' un

comune, quindi eredita il corpo narrativo di base (17px, Lora, var(--muted)). Allineato a quello invece di inventare una taglia intermedia - stessa gerarchia in tutte le pagine collegate. min-width assente apposta: e' il container (.section/.pnl) a decidere la larghezza. */ .sec-sub{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--muted);margin:-6px 0 14px} h2{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:40px 0 14px;color:var(--text)} h3{font-size:16px;font-weight:800;margin:24px 0 10px;color:var(--text)} h4{font-size:13px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase; color:var(--dim);margin:20px 0 9px} /* ===================================================================== 5. INTRO E RIQUADRI ===================================================================== */ .intro{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-left:3px solid var(--red); border-radius:8px;padding:16px 20px;margin-bottom:26px} .intro p{font-size:15px;margin-bottom:0} .box{border-radius:8px;padding:14px 18px;margin:18px 0;border:1px solid var(--border);background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%)} .box p{margin-bottom:0;font-size:15px} .box p+p{margin-top:9px} .box-t{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase; margin-bottom:7px;font-family:var(--font-ui)} .box.key{border-left:3px solid var(--red);background:rgba(191,25,34,.05)} .box.key .box-t{color:var(--red-light)} .box.warn{border-color:var(--red-line);background:rgba(191,25,34,.03)} .box.warn .box-t{color:var(--red-light)} .box.tip{border-color:var(--border);background:var(--surface)} .box.tip .box-t{color:var(--dim)} .box.ok{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.05)} .box.ok .box-t{color:var(--green)} /* nuove il 2/08, stesso trattamento delle altre varianti - vedi --amber/--blue sopra per il significato di stato (non varianti di rosso/verde/neutro) */ .box.pending{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05)} .box.pending .box-t{color:var(--amber)} .box.info{border-color:rgba(96,165,250,.3);background:rgba(96,165,250,.05)} .box.info .box-t{color:var(--blue)} /* ===================================================================== 6. CARD PRODOTTO (home e pagine indice) ===================================================================== */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px} /* gradiente 155deg (chiaro->scuro) misurato sul vero .product-card (31/07) — non 135deg surface-> surface-2 come stimato inizialmente, la direzione era invertita */ .card{background:linear-gradient(155deg,var(--surface-2) 0%,var(--surface) 100%);border:1px solid var(--border);border-radius:var(--r-md); overflow:hidden;text-decoration:none;display:flex;flex-direction:column; transition:transform .2s ease,border-color .2s,box-shadow .2s} /* translateY/border-color misurati sull'hover reale di .product-card (31/07), non stimati */ .card:hover{border-color:rgba(191,25,34,.45);transform:translateY(-4px);box-shadow:var(--shadow)} .card-cover{position:relative;height:118px;background-size:cover;background-position:center; background-color:var(--surface-2)} /* opacita' corrette il 31/07 (era .65->trasparente, il vero .pc-overlay e' .85->.08, mai del tutto trasparente) */ .card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.08) 100%)} .card-tag{position:absolute;top:9px;left:9px;z-index:2;font-size:9px;font-weight:700; letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--red); border-radius:var(--r-sm);padding:3px 7px;box-shadow:0 0 12px rgba(191,25,34,.4)} .card-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} /* Variante B (senza foto): mai un'icona sola su sfondo piatto — icona in filigrana enorme dietro (riempie lo spazio, da' profondita') + icona nitida con alone davanti. Copiata 1:1 dalle card vere della home (.pc-icon-watermark/.pc-icon-cover/.pc-icon-glow in index.html): qui mancava, il .card-ico da solo sopra NON e' la variante approvata, non riusarlo per le card senza foto — vedi sistema-design-athena.md "Card prodotto". */ .card-icon-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; opacity:.07;transform:scale(2.4);pointer-events:none} .card-icon-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .card-icon-glow{position:relative;display:flex;align-items:center;justify-content:center} .card-icon-glow::before{content:'';position:absolute;inset:-16px;border-radius:50%; background:radial-gradient(circle,var(--glow-color,var(--red-light)),transparent 70%); opacity:.28;filter:blur(7px);z-index:-1} /* padding/gap/background misurati sul vero .pc-body (31/07) — lo spazio tra titolo e testo era un margin-bottom sul titolo, il vero usa gap sul contenitore flex */ .card-body{padding:14px 16px 6px;flex:1;display:flex;flex-direction:column;gap:5px; background:var(--surface);position:relative;z-index:1} .card-title{font-size:17px;font-weight:700;color:var(--text);line-height:1.3} /* font-size 15->14 e font-family Lora->UI corretti il 31/07: il vero .pc-desc eredita il font dei titoli (Montserrat), non quello narrativo — una descrizione di card e' un'etichetta breve, non un contesto narrativo lungo */ .card-desc{font-size:14px;color:var(--muted);line-height:1.55;flex:1} /* Colore di riposo neutro, rosso solo all'hover della card intera — allineato il 31/07 al pattern reale della homepage (.pc-footer/.pc-arrow), che il template aveva disegnato in modo diverso (rosso statico, nessuna animazione freccia) senza mai confrontarlo col codice vero. */ .card-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 14px; font-size:11px;font-weight:700;color:var(--muted);border-top:1px solid var(--border); transition:color .15s} .card:hover .card-foot{color:var(--red-light)} .card-arrow{display:inline-block;transition:transform .15s} .card:hover .card-arrow{transform:translateX(4px)} /* ===================================================================== 7. TABELLE ===================================================================== */ /* th/td aggiornati il 5/08 (era 9px/--dim/Lora, mai usato da nessuna tabella reale - COT Report/Banche Centrali/Institutional Insight lo sovrascrivevano tutte e tre con lo stesso valore, allineato indipendentemente in ognuna). Ora il default e' quello che si usa davvero: th a --label-lg (13px, stesso token delle etichette, non un numero nuovo), td font UI invece di Lora (nessuna tabella reale vuole il corpo narrativo per i dati - stessa causa del bug trovato su Institutional Insight, dove Lora filtrava per una svista di cascata). Padding/ allineamento/background restano qui come default ragionevole ma ogni pagina li sovrascrive gia' in base alla propria densita' - non fanno parte dello standard condiviso, solo taglia/ peso/colore/font lo sono. Vedi pagine-reali/seasonality.md, sezione "Sesto giro"/"Nono giro". */ /* overflow-y:hidden esplicito (9/08, bug reale trovato su Livelli Opzioni): "overflow-x:auto" da solo fa si' che il browser imposti anche "overflow-y:auto" per conto suo - un solo pixel di overflow verticale (arrotondamenti, bordi) fa comparire una scrollbar verticale che ruba spazio orizzontale al contenuto, disallineando qualunque indicatore di scroll costruito sopra (striscia rossa) anche senza overflow orizzontale reale. */ /* striscia rossa di scroll promossa qui dentro (11/08, segnalato da Pietro su mt5-manuale): tecnica gia' in uso da tempo su COT Report/Banche Centrali/Institutional Insight (classe locale .tbl-scroll, prima della standardizzazione su .tw) e ricopiata a mano una seconda volta su investing-insight.html - .tw era rimasta l'unica pagina/wrapper senza l'indicatore, esattamente il tipo di copia-incolla ripetuto che va promosso al file condiviso invece di rifarlo una terza volta. Due strati di colore pieno "attaccati" allo scroll del contenuto (non allo scroll della pagina, background-attachment:local) coprono due strisce rosse "attaccate" alla viewport - spariscono da sole quando non c'e' overflow reale o si e' a inizio/fine scroll. */ .tw{overflow-x:auto;overflow-y:hidden;margin:16px 0;border:1px solid var(--border);border-radius:8px; background: linear-gradient(to right, var(--surface), var(--surface)), linear-gradient(to right, var(--surface), var(--surface)), linear-gradient(to right, var(--red-light), var(--red-light)), linear-gradient(to right, var(--red-light), var(--red-light)); background-repeat:no-repeat;background-color:var(--surface); background-size:12px 100%,12px 100%,3px 100%,3px 100%; background-position:0 0,100% 0,0 0,100% 0; background-attachment:local,local,scroll,scroll} table{width:100%;border-collapse:collapse;min-width:440px} th{font-size:var(--label-lg);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted); text-align:left;padding:11px 14px;background:var(--surface-2); border-bottom:1px solid var(--border);white-space:nowrap} td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted); line-height:1.65;vertical-align:top;font-family:var(--font-ui)} tr:last-child td{border-bottom:none} tbody tr:hover{background:rgba(255,255,255,.02)} .num{font-family:var(--font-mono);font-size:14px;color:var(--text);text-align:right} .pos{color:var(--green)} .neg{color:var(--red-light)} /* ===================================================================== 8. ELEMENTI DI STATO ===================================================================== */ .badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1px; text-transform:uppercase;padding:4px 9px;border-radius:3px;white-space:nowrap} .badge.ok{background:rgba(34,197,94,.13);color:var(--green);border:1px solid rgba(34,197,94,.3)} .badge.warn{background:var(--surface-3);color:var(--text);border:1px solid var(--border)} .badge.bad{background:var(--red-dim);color:var(--red-light);border:1px solid var(--red-line)} .badge.off{background:var(--surface-2);color:var(--dim);border:1px solid var(--border)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:20px} .stat{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:8px;padding:14px 16px} .stat-n{font-family:var(--font-mono);font-size:34px;font-weight:600;line-height:1;margin-bottom:5px;color:var(--text)} .stat-l{font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} /* ===================================================================== 9. CONTROLLI ===================================================================== */ /* Altezza/font alzati il 5/08 (segnalato da Pietro su COT Report, confrontando col menu a tendina accanto: 36px reali contro i 42px di un