/* Theme Name: TFT Theme URI: https://trendfollowingtraders.com Author: Stefano Mastria Description: Tema del blog Trend Following Traders. Scritto a mano per sostituire SEOCrawler di GoodLayers: stesse scelte grafiche, senza page builder, senza jQuery e senza font-icona. Cinque modelli, un guscio solo. Version: 1.1.0 Requires at least: 6.0 Tested up to: 7.0 License: proprietario Text Domain: tft */ /* ═══════════════════════════════════════════════════════════════════ LE SCELTE GRAFICHE, TUTTE QUI Sono i valori estratti dal tema precedente, misurati e non indovinati. Cambiare un colore o un carattere del sito significa cambiare UNA riga in questo blocco: è ciò che sostituisce il pannello di GoodLayers. ═══════════════════════════════════════════════════════════════════ */ :root{ /* colori — dal foglio compilato del vecchio tema */ --fondo: #000000; --testo: #ffffff; --testo-tenue: #9c9c9c; --link: #66f9ff; --link-hover: #4887bf; --accento: #3155a7; --riga: #2c2c2c; --fondo-alt: #111111; --barra-fondo: #ffffff; --barra-testo: #000000; --campo-fondo: #f3f3f3; --campo-testo: #7c7c7c; /* caratteri — Poppins per testo e titoli, Nunito per il menu */ --font-testo: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-menu: "Nunito", var(--font-testo); --font-cita: Georgia, serif; /* dimensioni */ --corpo: 18px; --interlinea: 1.7; --h1: 26px; --h2: 25px; --h3: 20px; --h4: 16px; --menu: 16px; --contenitore: 1100px; /* spazi */ --gap: 30px; --gap-l: 60px; } /* ── azzeramento minimo ─────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--fondo);color:var(--testo); font:400 var(--corpo)/var(--interlinea) var(--font-testo)} img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)} h1,h2,h3,h4,h5,h6{font-family:var(--font-testo);font-weight:600;color:var(--testo); line-height:1.3;margin:1.6em 0 .6em} h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)} h4{font-size:var(--h4)} p{margin:0 0 1.3em} blockquote{font-family:var(--font-cita);font-style:italic;border-left:3px solid var(--accento); margin:1.6em 0;padding:.2em 0 .2em 24px} code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em} hr{border:0;border-top:1px solid var(--riga);margin:var(--gap-l) 0} input,textarea,select,button{font:inherit} input,textarea{background:var(--campo-fondo);color:var(--campo-testo); border:0;border-radius:3px;padding:12px 14px;width:100%} :focus-visible{outline:2px solid var(--link);outline-offset:2px} /* ── impaginazione ──────────────────────────────────────────────── */ .tft-contenitore{max-width:var(--contenitore);margin:0 auto;padding:0 20px} .tft-corpo{padding:var(--gap-l) 0} .salta{position:absolute;left:-9999px} .salta:focus{left:8px;top:8px;z-index:100;background:var(--barra-fondo); color:var(--barra-testo);padding:10px 16px;border-radius:3px} /* ── barra in alto ──────────────────────────────────────────────── */ .tft-barra{background:var(--barra-fondo);color:var(--barra-testo);font-size:13px} .tft-barra .tft-contenitore{display:flex;align-items:center;justify-content:space-between; min-height:48px;max-width:1140px} /* inline-flex SOLO sulle icone: applicato a tutti i link della barra rendeva il testo un elemento flex, e il flex scarta lo spazio finale dentro («Community?Ok» invece di «Community? Ok»). */ .tft-barra a{color:var(--barra-testo)} .tft-social a{display:inline-flex;align-items:center} .tft-barra a:hover{opacity:.6} .tft-social{display:flex;gap:14px;align-items:center} .tft-social svg{width:17px;height:17px;fill:currentColor} .tft-barra-testo{font-size:13px} .tft-barra-testo a{color:var(--barra-testo)} .tft-barra-testo a:hover{color:var(--accento)} /* ── testata e menu ─────────────────────────────────────────────── */ /* Nessun bordo sotto la testata: il vecchio tema non ce l'ha. L'unica riga è quella CHIARA sopra il menu, larga quanto lo schermo (misurata: 1px #e6e6e6). position+z-index NON sono decorazione: senza, la testata sta sullo stesso piano del contenuto e vince chi viene dopo nel documento. Il commutatore IT/EN della home ha z-index:60 come la tendina del menu, ed essendo più in basso nel codice le compariva SOPRA. Alzando la testata a 200 il menu è sempre davanti a qualunque cosa ci sia nella pagina. */ .tft-testata{background:var(--fondo);position:relative;z-index:200} /* Il marchio sta su una riga sua, grande e centrato: è così che il sito si presenta da sempre, e restringerlo per far posto al menu lo sminuiva. */ .tft-marchio{padding:0;text-align:center} /* 800x297: la misura vera del logo nel vecchio tema, non una stima */ .tft-logo img{width:100%;max-width:800px;height:auto;margin:0 auto} /* La riga del menu è larga quanto lo schermo, non quanto il contenitore: nel vecchio tema la lente sta all'estremo destro della finestra. */ .tft-riga-menu{display:flex;align-items:center;justify-content:center; gap:var(--gap);min-height:64px;position:relative; width:100%;max-width:none;padding:0 20px;border-top:1px solid #e6e6e6} .tft-riga-menu .tft-azioni{position:absolute;right:16px} .tft-logo a{color:var(--testo);font-weight:700;font-size:20px} .tft-menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:0;list-style:none;margin:0;padding:0} /* Misurato sull'originale: 16px, peso 200, Nunito, NESSUNA spaziatura fra le lettere, e nessun riempimento orizzontale sul link — la distanza fra le voci la danno gli 8px di margine dell'elemento. Con riempimento e spaziatura aggiunti il menu andava a capo. */ .tft-menu>li{margin:0 8px} .tft-menu a, .tft-voce-bottone{font-family:var(--font-menu);font-size:var(--menu);font-weight:200; text-transform:uppercase;color:var(--testo);padding:12px 0;display:block} /* «Canali» apre una tendina ma non porta da nessuna parte: è un