/* ═══════════════════════════════════════════════════════════════════════════════ TYPE · SISTEMA TIPOGRAFICO UNICO DI AFFILIATE MANAGER (type.css) ░ LEGENDA / MAPPA FILE ░ ═══════════════════════════════════════════════════════════════════════════════ COS'È Foglio UNICO con i token di TIPOGRAFIA di tutto Affiliate Manager: famiglia font, scala dimensioni, pesi e COLORI del testo (giorno/notte). Servito su «/type.css» e collegato da ogni schermata (shell, Chat AI, Pannello Admin, NetHance/Meta Manager + Agency, Report). Cambi un token qui → cambia il testo OVUNQUE. Tocca SOLO il testo: niente sfondi, bottoni, layout (quelli restano dove sono). CONVENZIONE TEMA Dark-first come Chat AI: il default (:root) è la modalità NOTTE; «html.light» è il GIORNO. Toggle via classe su . USO Ancora univoca «@AM:». Nelle regole si usa SEMPRE il token, mai il valore: font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); Oppure le CLASSI-RUOLO già pronte (size+peso+colore+famiglia in un colpo):

Chat AI

…

RUOLI DEL TESTO (la regola decisa con l'utente) Hero il più grande · grassetto · NERO ASSOLUTO (#000 giorno / #fff notte) → nomi delle schermate/sezioni principali (es. "Pannello Admin", "Chat AI") Titolo grassetto · colore forte attuale (poco più chiaro del nero hero) Sottotitolo semi · grigio scuro tenue (il "muted") Corpo normale (non grassetto) · stesso colore dei titoli Label/Caption testo piccolo/etichette/meta · grigio muted SEZIONI type-family Famiglia (solo Inter) + monospace per il codice type-weight Pesi (regular/semibold/bold) type-size Scala dimensioni (px) — 50 valori storici collassati in pochi step type-color-night / type-color-day Colori del testo per tema type-roles Classi-ruolo riusabili (.t-hero/.t-title/.t-subtitle/.t-body/…) ═══════════════════════════════════════════════════════════════════════════════ */ /* @AM:type-family ── FAMIGLIA (solo Inter) ────────────────────────────────────────── */ :root{ --font: 'Montserrat', sans-serif; /* testo generale: SOLO Montserrat */ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* solo blocchi di codice */ } /* @AM:type-weight ── PESI ──────────────────────────────────────────────────────────────── */ :root{ --fw-light: 300; /* testo leggero (raro) */ --fw-regular: 400; /* testo corpo */ --fw-medium: 500; /* enfasi lieve */ --fw-semibold: 600; /* sottotitoli, label, bottoni */ --fw-bold: 700; /* titoli, hero, enfasi */ --fw-black: 900; /* enfasi massima / badge "cicciotti" */ } /* @AM:type-size ── SCALA DIMENSIONI (px) ───────────────────────────────────────────────── I ~50 valori storici (rem/em/px misti) collassano su questi step. */ :root{ --fs-display: 40px; /* splash / benvenuto (raro) */ --fs-hero: 26px; /* nome schermata/sezione principale */ --fs-title: 20px; /* titolo di sezione */ --fs-subtitle: 16px; /* sottotitolo / descrizione */ --fs-body: 16px; /* testo corpo (base) — 16px richiesto come dimensione base del testo normale */ --fs-sm: 13px; /* testo secondario */ --fs-label: 12px; /* etichette / meta */ --fs-caption: 11px; /* caption / timestamp */ --fs-micro: 10px; /* badge minuscoli */ /* Interlinee abbinate */ --lh-tight: 1.2; /* titoli */ --lh-base: 1.45; /* corpo */ } /* @AM:type-space ── SPAZIATURA DI SISTEMA · margine esterno delle schermate ─────────────────── --screen-pad = sponda esterna delle schermate (ALTO + DESTRA + SINISTRA, simmetrica). Usato da: .wrap (Pannello Admin), #main (Chat AI), .board (Report giornaliero). Cambi qui → cambia il margine esterno OVUNQUE. */ :root{ --screen-pad:20px; /* @AM raggi di sistema: box/card = --radius-card (10px, standard uniforme di tutte le sezioni), piccoli controlli/bottoni filtro = --radius-sm (6px). Cambi qui → cambiano tutte le card. */ /* SCALA ROTONDITÀ DI SISTEMA (riferimento = angolo della toolbar = --radius-card 10px). Proporzionale: sezioni/card/toolbar/pop-up = --radius-card · riquadri interni medi/input/gruppi = --radius-md · bottoni/tag/controlli piccoli = --radius-sm. Un riquadro dentro un altro scende di un gradino. */ --radius-card:10px; --radius-md:8px; --radius-sm:6px; /* Pop-up: il CONTENITORE del contenuto ha padding --popup-pad sui 4 lati (rientro dal bordo); gli elementi interni sono a tutta larghezza e distanziati di --popup-gap l'uno dall'altro. */ --popup-pad:15px; --popup-gap:15px; /* @AM:popup-system ── STILE DI SISTEMA DEI POP-UP (canone = pop-up "Impostazioni" della Shell) ───── Token UNICI per box/intestazione/bottoni di OGNI pop-up dell'app. Cambi qui → cambiano tutti. La LARGHEZZA resta per-pop-up (guidata dal contenuto): non è un token di sistema. 1) box → border-radius:var(--popup-radius); padding:var(--popup-pad) 2) head → background:var(--popup-head-bg); color:var(--popup-head-fg); font-size:var(--fs-sm); font-weight:var(--fw-bold); padding:var(--popup-head-pad) 3) btn → padding:var(--popup-btn-pad); border-radius:var(--popup-btn-radius); font-size:var(--popup-btn-fs); font-weight:var(--popup-btn-fw); gap riga:var(--popup-gap) 4) testo→ titolo/messaggio:var(--fs-subtitle); corpo:var(--fs-body) */ --popup-radius:var(--radius-card); /* raggio del box */ --popup-head-bg:#161616; /* barra titolo scura (costante giorno/notte) */ --popup-head-fg:#ffffff; /* testo barra titolo */ --popup-head-pad:11px 14px; /* padding barra titolo */ --popup-btn-pad:8px 18px; /* padding bottoni interni */ --popup-btn-radius:8px; /* raggio bottoni interni */ --popup-btn-fs:var(--fs-body); /* 14px */ --popup-btn-fw:var(--fw-semibold); /* 600 */ --text-on-accent:#ffffff; /* testo su sfondo accent */ } /* Mobile: margine esterno ridotto a 15px (vale ovunque, un solo punto) */ @media (max-width:768px){ :root{ --screen-pad:15px; } } /* @AM:type-color-day ── COLORI DI SISTEMA · GIORNO (default, :root) ──────────────────────────── Light-first: convenzione unica «html.dark» = NOTTE. Palette GitHub-Primer + ACCENTO Meta #1877f2. I colori DATO/COLONNA (righe spesa/risultato/CPA, grafici, reti) restano LOCALI alle sezioni. */ :root{ /* Superfici */ --bg:#f3f6f7; --surface-deep:#ffffff; --surface-0:#ffffff; --surface-1:#ffffff; --surface-2:#f2f4f7; --surface-3:#e9ecef; --surface-4:#e0e4e8; --sidebar-bg:#e6eaef; /* Bordi */ --border:#d0d7de; --border-strong:#b8c0c8; --divider:#d0d7de; /* Testo */ --text-hero:#000000; --text-strong:#1f2328; --text-soft:#424a53; --text-muted:#57606a; --text-faint:#6e7781; --text-disabled:#8c959f; /* Accento — blu Meta #1877f2 (costante giorno/notte) */ --accent:#1877f2; --accent-2:#58a6ff; --accent-3:#218bff; --accent-hover:#1668d8; --accent-strong:#1f6feb; --accent-4:#1877f2; --accent-soft:#ddf4ff; /* Stati — palette Meta (costante giorno/notte). Rosso "danger" di sistema = #cf222e (sobrio, scelto come standard): usato da OGNI elemento di pericolo (elimina/esci/errore). --danger-hover per lo stato hover pieno, --danger-soft per gli sfondi tenui (badge/riga). Cambi qui → cambia ovunque. */ --ok:#3fb950; --danger:#cf222e; --danger-hover:#a40e26; --danger-soft:rgba(207,34,46,.12); --warn:#d29922; --warn-2:#d29922; --purple:#bc8cff; --orange:#e3b341; /* Link / errore (testo) */ --text-link:var(--accent); --text-error:var(--danger); /* Tinte */ --tint-green:#dafbe1; --tint-warm:#fff8c5; --tint-warm-2:#fff8c5; --tint-blue:#ddf4ff; /* Interazione liste/righe */ --sel:#fcebb0; --hover:#fef3c7; --input-divider:#d0d7de; /* UI varie */ --sb-thumb:#cdd3db; --sb-thumb-h:#b6bec8; --switch-off:#c9cdd2; /* Ombre */ --shadow-card:0 0 5px rgba(20,30,60,.13); --shadow-btn:var(--shadow-card); --shadow:0 0 6px rgba(20,30,60,.08); --shadow-lg:0 0 22px rgba(20,30,60,.16); --shadow-group:0 0 4px rgba(20,30,60,.06); /* @AM TUTTE le ombre CENTRATE (offset 0 → alone omogeneo tutt'attorno, mai verso il basso); --shadow-card un filo più forte per definire i bottoni (richiesta utente) */ /* Pop-up (box; le animazioni stanno in popup-base.css) */ --pop-backdrop:rgba(20,30,60,.35); --pop-bg:#e9ecf1; --pop-sec:#ffffff; --pop-card:#eef1f5; --pop-field:#ffffff; color-scheme:light; } /* @AM:type-color-night ── COLORI DI SISTEMA · NOTTE (html.dark) ──────────────────────────────── */ html.dark{ --bg:#0d1117; --surface-deep:#0a0e14; --surface-0:#0d1117; --surface-1:#161b22; --surface-2:#1c2128; --surface-3:#21262d; --surface-4:#2d333b; --sidebar-bg:#0a0e14; --border:#30363d; --border-strong:#3d444d; --divider:#30363d; --text-hero:#ffffff; --text-strong:#e6edf3; --text-soft:#c9d1d9; --text-muted:#8b949e; --text-faint:#6e7681; --text-disabled:#484f58; /* accento e stati restano costanti (ereditati da :root) */ --accent-soft:#1a3a5c; --tint-green:#d6ffd6; --tint-warm:#3a2e16; --tint-warm-2:#1c1812; --tint-blue:#1a3a5c; --sel:#24406e; --hover:#1b2942; --input-divider:#234e78; --sb-thumb:#39414d; --sb-thumb-h:#4b5563; --switch-off:#6e7681; --shadow-card:0 0 10px rgba(0,0,0,.26), 0 0 3px rgba(0,0,0,.20); --shadow-btn:0 0 6px rgba(0,0,0,.16), 0 0 2px rgba(0,0,0,.12); --shadow:0 0 8px rgba(0,0,0,.16); --shadow-lg:0 0 24px rgba(0,0,0,.30); --shadow-group:0 0 5px rgba(0,0,0,.14); /* @AM notte: ombra un filo PIÙ FORTE (richiesta utente) → i bottoni staccano di più sul fondo scuro */ --pop-backdrop:rgba(0,0,0,.55); --pop-bg:#0d1117; --pop-sec:#161b22; --pop-card:#222b36; --pop-field:#2d333b; color-scheme:dark; } /* @AM:type-base ── BASE GLOBALE · body + controlli (EREDITARIETÀ VERA del testo) ────────────── Applica i token del testo agli ELEMENTI (non solo alle classi .t-*): così OGNI schermata — anche una NUOVA che non ridichiara nulla — eredita font, dimensione, interlinea, COLORE del testo e sfondo di sistema. Prima questa regola viveva SOLO inline in affiliate-manager.html → una sezione nuova cadeva sul nero/bianco di DEFAULT del browser (era il bug del "font che non si uniforma"). Tocca solo tipografia + colore/sfondo di base: layout e sfondi specifici restano nelle sezioni, le cui regole (più avanti nel file o inline) vincono dove serve. I controlli non ereditano il font per default → lo forziamo a Inter + colore del testo. Solo proprietà "sicure": nessun box-sizing/margine globale che possa spostare i layout esistenti. */ body{ font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-base); color:var(--text-strong); background:var(--bg); } button, input, select, textarea{ font-family:inherit; font-size:inherit; line-height:inherit; color:inherit; } /* @AM:type-chart ── GRAFICI DI SISTEMA (stile del grafico "andamento" di Meta Ads Manager) ────── Stile canonico per TUTTI i grafici (Meta canvas riferimento + Admin/Report SVG). Negli SVG si usano con FALLBACK letterale [= valore Meta] per robustezza negli iframe: stroke: var(--chart-grid, rgba(0,0,0,.13)); Serie/linea/punti/font costanti; sfondo/griglia/assi/testo cambiano giorno↔notte. */ :root{ --chart-bg:#f6f8fb; /* sfondo PLOT del grafico: grigio molto chiaro (giorno) per tutte le sezioni */ --chart-head:#ffffff; --chart-head-fg:var(--text-strong); /* BARRA TITOLO: BIANCA in modalità giorno (richiesta utente; la notte resta scura, riga html.dark) — stacco dato dal testo più grassetto */ --chart-grid:rgba(0,0,0,0.13); --chart-axis:rgba(0,0,0,0.12); --chart-text:#1f2328; --chart-c1:#3fb950; --chart-c2:#0082fb; --chart-c3:#8250df; --chart-c4:#cf222e; --chart-c5:#d29922; --chart-c6:#bc8cff; --chart-line-w:3px; --chart-dot-r:2.2px; --chart-fs:10px; /* linea 3px = anno corrente Report, spessore di sistema */ } html.dark{ --chart-bg:#1c2128; --chart-head:transparent; --chart-head-fg:var(--text-strong); /* notte: BARRA TITOLO = bg della sezione (--chart-bg #1c2128) una TRASPARENTE = eredita lo sfondo della card (surface-1 o chart-bg) → nessuno stacco di sfondo, come in giorno; stacco solo dal testo più grassetto */ --chart-grid:rgba(255,255,255,0.06); --chart-axis:rgba(255,255,255,0.12); --chart-text:#8b949e; } /* @AM:type-roles ── CLASSI-RUOLO (size + peso + colore + famiglia) ───────────────────────── Opt-in: si applicano via class. Servono per uniformare i testi su tutte le schermate. */ .t-hero{ font-family:var(--font); font-size:var(--fs-hero); font-weight:var(--fw-bold); color:var(--text-hero); line-height:var(--lh-tight); } .t-display{ font-family:var(--font); font-size:var(--fs-display); font-weight:var(--fw-bold); color:var(--text-hero); line-height:var(--lh-tight); } .t-title{ font-family:var(--font); font-size:var(--fs-title); font-weight:var(--fw-bold); color:var(--text-strong); line-height:var(--lh-tight); } .t-subtitle{ font-family:var(--font); font-size:var(--fs-subtitle); font-weight:var(--fw-semibold); color:var(--text-muted); line-height:var(--lh-base); } .t-body{ font-family:var(--font); font-size:var(--fs-body); font-weight:var(--fw-regular); color:var(--text-strong); line-height:var(--lh-base); } /* CAPS di sistema: SOLO le etichette piccole (label/caption) vanno in MAIUSCOLETTO (uppercase + micro-spaziatura). Titoli/sottotitoli/corpo restano come scritti. */ .t-label{ font-family:var(--font); font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--text-muted); line-height:var(--lh-base); text-transform:uppercase; letter-spacing:.04em; } .t-caption{ font-family:var(--font); font-size:var(--fs-caption); font-weight:var(--fw-regular); color:var(--text-muted); line-height:var(--lh-base); text-transform:uppercase; letter-spacing:.04em; } .t-link{ color:var(--text-link); } .t-error{ color:var(--text-error); } /* @AM:sys-button-anim ── ANIMAZIONE DI SISTEMA SU OGNI BOTTONE ───────────────────────────── Restringimento al passaggio del mouse (hover) e al clic (press) — l'effetto dei bottoni filtro data, ora globale su TUTTI i