*/
h1 .hl, h2 .hl{
background: linear-gradient(90deg, var(--orange), var(--orange-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 18px var(--orange-glow));
}
h2{
font-size: var(--fs-lg);
color: var(--orange);
text-transform: uppercase;
letter-spacing: 2px;
margin-top: var(--sp-6);
margin-bottom: var(--sp-4);
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* linea decorativa dopo h2, coerente con lo stile "terminale" */
h2::after{
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--line), transparent);
}
h3{
font-size: var(--fs-xl);
color: var(--orange-2);
margin-top: var(--sp-5);
}
h4{
font-size: var(--fs-md);
color: var(--fg);
text-transform: uppercase;
letter-spacing: 1.5px;
}
h5{
font-size: var(--fs-base);
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
h6{
font-size: var(--fs-sm);
color: var(--dim);
text-transform: uppercase;
letter-spacing: 1px;
}
/* eyebrow/kicker: etichetta piccola sopra un titolo, stile "$ comando" */
.kicker{
color: var(--orange);
font-size: var(--fs-xs);
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: var(--sp-3);
opacity: .9;
}
.kicker::before{ content: "$ "; color: var(--dim); }
/* ---------- 4. TESTO / PARAGRAFI / INLINE ---------- */
p{
margin: 0 0 var(--sp-4);
color: var(--fg-muted);
}
small{ font-size: var(--fs-xs); color: var(--dim); }
strong, b{ color: var(--orange-2); font-weight: 700; }
em, i{ color: var(--fg); font-style: italic; }
mark{
background: var(--orange-soft);
color: var(--orange-2);
padding: 0 4px;
border-radius: 3px;
}
del, s{ color: var(--dim); text-decoration: line-through; }
ins, u{ color: var(--fg); text-decoration: underline; text-decoration-color: var(--orange); }
sub, sup{ font-size: 0.7em; }
abbr[title]{
text-decoration: underline dotted var(--dim);
cursor: help;
}
/* sottotitolo / lead usato sotto h1: */
.subtitle{
color: var(--dim);
font-size: var(--fs-sm);
margin-bottom: var(--sp-6);
border-left: 2px solid var(--orange);
padding-left: var(--sp-3);
}
hr{
border: none;
border-top: 1px solid var(--line);
margin: var(--sp-6) 0;
}
/* ---------- 5. LINK ---------- */
a{
color: var(--orange-2);
text-decoration: none;
border-bottom: 1px solid rgba(255, 179, 71, 0.35);
transition: color .15s ease, border-color .15s ease, text-shadow .15s ease;
}
a:hover{
color: var(--orange);
border-color: var(--orange);
text-shadow: 0 0 10px var(--orange-glow);
}
a:active{ color: var(--orange-dim); }
a:focus-visible{
outline: 2px solid var(--orange);
outline-offset: 3px;
border-radius: 2px;
}
a:visited{ color: #d99a5c; }
/* link "muto", es. nella nav o nel footer */
a.link-muted{
color: var(--dim);
border-bottom-color: transparent;
}
a.link-muted:hover{ color: var(--orange-2); }
/* ---------- 6. LISTE ---------- */
ul, ol{
margin: 0 0 var(--sp-4);
padding-left: var(--sp-5);
color: var(--fg-muted);
}
li{ margin-bottom: var(--sp-2); }
li::marker{ color: var(--orange); }
dl{ margin: 0 0 var(--sp-4); }
dt{ color: var(--orange-2); font-weight: 700; margin-top: var(--sp-3); }
dd{ margin: var(--sp-1) 0 0; color: var(--fg-muted); padding-left: var(--sp-3); }
/* lista "card", stile findings del blog:
*/
ul.findings{
list-style: none;
padding: 0;
margin: 0 0 var(--sp-4);
display: grid;
gap: var(--sp-3);
}
ul.findings li{
background: var(--bg-2);
border: 1px solid var(--line);
border-left: 3px solid var(--orange);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-4);
margin: 0;
}
ul.findings li b{
color: var(--orange-2);
display: block;
font-size: var(--fs-xs);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
/* ---------- 7. CITAZIONI E CODICE ---------- */
blockquote{
margin: 0 0 var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--orange);
background: var(--bg-2);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--fg-muted);
font-style: italic;
}
blockquote footer, blockquote cite{
display: block;
margin-top: var(--sp-2);
font-style: normal;
font-size: var(--fs-xs);
color: var(--dim);
}
code, kbd, samp{
font-family: var(--font-mono);
font-size: 0.92em;
color: var(--orange-2);
background: var(--orange-soft);
padding: 1px 6px;
border-radius: 4px;
}
kbd{
border: 1px solid var(--line);
border-bottom-width: 2px;
background: var(--bg-3);
color: var(--fg);
}
pre{
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--sp-4);
overflow-x: auto;
margin: 0 0 var(--sp-4);
}
pre code{
background: none;
padding: 0;
color: var(--fg);
font-size: var(--fs-sm);
line-height: 1.55;
}
/* blocco "finestra terminale": */
.terminal{
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: 0 0 0 1px rgba(255,255,255,0.02), var(--glow-lg);
margin-bottom: var(--sp-5);
overflow: hidden;
}
.term-bar{
display: flex;
align-items: center;
gap: 6px;
padding: var(--sp-2) var(--sp-3);
background: var(--bg-3);
border-bottom: 1px solid var(--line);
}
.term-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #333; }
.term-bar i:nth-child(1){ background: var(--danger); }
.term-bar i:nth-child(2){ background: var(--warn); }
.term-bar i:nth-child(3){ background: var(--ok); }
.term-title{ margin-left: var(--sp-2); color: var(--dim); font-size: var(--fs-xs); letter-spacing: 1px; }
.term-body{ padding: var(--sp-4); font-size: var(--fs-md); }
.term-body p:last-child{ margin-bottom: 0; }
.prompt{ color: var(--orange); }
.prompt::before{ content: "> "; }
/* ---------- 8. TABELLE ---------- */
table{
width: 100%;
border-collapse: collapse;
margin: 0 0 var(--sp-4);
font-size: var(--fs-sm);
}
caption{
caption-side: top;
text-align: left;
color: var(--dim);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--sp-2);
}
thead th{
color: var(--orange);
text-transform: uppercase;
letter-spacing: 1px;
font-size: var(--fs-xs);
text-align: left;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--orange);
}
tbody td, tfoot td{
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--line);
color: var(--fg-muted);
}
tbody tr:hover{ background: var(--orange-soft); }
tfoot td{ color: var(--dim); font-size: var(--fs-xs); }
/* ---------- 9. FORM ---------- */
form{ margin: 0 0 var(--sp-4); }
fieldset{
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--sp-4);
margin: 0 0 var(--sp-4);
}
legend{
color: var(--orange);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 2px;
padding: 0 var(--sp-2);
}
label{
display: block;
color: var(--fg-muted);
font-size: var(--fs-sm);
margin-bottom: var(--sp-1);
}
input, textarea, select, button{
font-family: var(--font-mono);
font-size: var(--fs-base);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select{
width: 100%;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--fg);
padding: 10px var(--sp-3);
margin-bottom: var(--sp-3);
transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder{ color: var(--dim); }
input:focus, textarea:focus, select:focus{
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 3px var(--orange-soft);
}
textarea{ resize: vertical; min-height: 100px; }
select{ appearance: none; cursor: pointer; }
input[type="checkbox"], input[type="radio"]{
accent-color: var(--orange);
width: 16px; height: 16px;
margin-right: var(--sp-2);
}
input[type="range"]{ accent-color: var(--orange); width: 100%; }
/* pulsante primario */
button, input[type="submit"], input[type="button"], .btn{
display: inline-flex;
align-items: center;
gap: var(--sp-2);
background: var(--orange);
color: #06070a;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: var(--fs-sm);
border: 1px solid var(--orange);
border-radius: var(--radius-sm);
padding: 10px var(--sp-4);
cursor: pointer;
transition: box-shadow .15s ease, transform .1s ease, background .15s ease;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover{
box-shadow: var(--glow-sm);
background: var(--orange-2);
}
button:active, .btn:active{ transform: translateY(1px); }
button:focus-visible, .btn:focus-visible{
outline: 2px solid var(--orange-2);
outline-offset: 2px;
}
button:disabled, .btn:disabled{
opacity: .4;
cursor: not-allowed;
box-shadow: none;
}
/* variante pulsante "outline" secondario */
.btn-outline{
background: transparent;
color: var(--orange);
}
.btn-outline:hover{ background: var(--orange-soft); color: var(--orange-2); }
/* ---------- 10. STRUTTURA DI PAGINA ---------- */
header{
border-bottom: 1px solid var(--line);
padding: var(--sp-4) 6vw;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: rgba(6,7,10,0.85);
backdrop-filter: blur(6px);
z-index: 10;
}
nav{ color: var(--dim); font-size: var(--fs-xs); }
nav ul{ list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4); }
nav li{ margin: 0; }
nav a{ color: var(--fg-muted); border-bottom: none; }
nav a:hover{ color: var(--orange); }
main{
flex: 1 0 auto;
max-width: 820px;
margin: 0 auto;
padding: var(--sp-3) 4vw var(--sp-4); /* top/bottom molto ridotti */
}
section{ margin-bottom: var(--sp-6); }
article{
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--sp-5);
margin-bottom: var(--sp-5);
}
aside{
border-left: 2px solid var(--orange);
padding-left: var(--sp-3);
color: var(--dim);
font-size: var(--fs-sm);
}
footer{
max-width: 820px;
margin: 0 auto;
padding: 0 6vw var(--sp-6);
color: var(--dim);
font-size: var(--fs-xs);
display: flex;
justify-content: space-between;
border-top: 1px solid var(--line);
padding-top: var(--sp-4);
}
footer a{ color: var(--dim); border-bottom: none; }
footer a:hover{ color: var(--orange); }
figure{ margin: 0 0 var(--sp-4); }
figcaption{
color: var(--dim);
font-size: var(--fs-xs);
margin-top: var(--sp-2);
text-align: center;
}
/* elementi "brand" e "dot" pulsante, coerenti col design originale */
.brand{
color: var(--orange);
font-weight: 700;
letter-spacing: 2px;
text-shadow: var(--glow-md);
font-size: var(--fs-sm);
}
.brand span{ color: var(--dim); font-weight: 400; }
.dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--orange);
box-shadow: var(--glow-sm);
display: inline-block;
margin-right: var(--sp-2);
animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
0%, 100%{ opacity: 1; }
50%{ opacity: .35; }
}
/* box "verdetto" / callout finale */
.callout{
margin-top: var(--sp-6);
padding: var(--sp-4) var(--sp-5);
border: 1px solid var(--orange);
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgba(255,106,0,0.06), transparent);
box-shadow: 0 0 40px -10px var(--orange-glow) inset;
}
.callout p{ margin: 0; color: var(--fg); }
/* ---------- 11. ELEMENTI VARI ---------- */
progress{
width: 100%;
height: 6px;
accent-color: var(--orange);
background: var(--bg-2);
border-radius: 4px;
overflow: hidden;
}
meter{ accent-color: var(--orange); }
details{
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
}
summary{
cursor: pointer;
color: var(--orange-2);
font-weight: 700;
outline: none;
}
details[open] summary{ margin-bottom: var(--sp-2); color: var(--orange); }
dialog{
background: var(--bg-2);
color: var(--fg);
border: 1px solid var(--orange);
border-radius: var(--radius-md);
box-shadow: var(--glow-lg);
}
dialog::backdrop{ background: rgba(0,0,0,0.7); }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover{ background: var(--orange-dim); }
/* codice etichetta piccola, es. acceso */
code.tag{
color: var(--orange-2);
background: var(--orange-soft);
padding: 1px 6px;
border-radius: 4px;
font-size: 0.9em;
}
/* ---------- 12. RESPONSIVE ---------- */
@media (max-width: 560px){
header{ padding: var(--sp-3) 5vw; }
main{ padding: var(--sp-2) 4vw var(--sp-3);}
nav ul{ display: none; }
h2{ font-size: var(--fs-md); }
}
/* ======================================================================
14. BOOTSTRAP COMPATIBILITY LAYER
Il sito usa Bootstrap 5 per navbar/grid. Queste regole riskinnano
i componenti bootstrap più comuni senza dover toccare l'HTML/PHP.
Va importato DOPO bootstrap.min.css nell'head.
====================================================================== */
/* navbar */
.navbar{
background: var(--bg-2) !important;
border-bottom: 1px solid var(--line);
box-shadow: none;
padding-top: var(--sp-3);
padding-bottom: var(--sp-3);
position: fixed;
top: 0;
left: 0;
right: 0; /* per estenderla su tutta la larghezza */
z-index: 1000;
}
.navbar .navbar-nav .nav-link{
color: var(--fg-muted) !important;
font-family: var(--font-mono);
font-size: var(--fs-sm);
letter-spacing: 0.5px;
padding: 8px var(--sp-3) !important;
transition: color .15s ease, text-shadow .15s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus{
color: var(--orange) !important;
text-shadow: 0 0 10px var(--orange-glow);
}
.navbar .navbar-nav .nav-link.active{
color: var(--orange-2) !important;
}
/* hamburger menu mobile */
.navbar-toggler{
border-color: var(--line) !important;
}
.navbar-toggler:focus{
box-shadow: 0 0 0 3px var(--orange-soft) !important;
}
.navbar-toggler-icon{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 106, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* container / griglia: non toccano il layout, solo colore testo di base */
.container, .container-fluid, .row, .col, [class^="col-"]{
color: var(--fg-muted);
}
/* bottoni bootstrap standard, se usati altrove sul sito */
.btn-primary{
background: var(--orange) !important;
border-color: var(--orange) !important;
color: #06070a !important;
}
.btn-primary:hover{
background: var(--orange-2) !important;
border-color: var(--orange-2) !important;
}
.btn-outline-primary{
color: var(--orange) !important;
border-color: var(--orange) !important;
background: transparent !important;
}
.btn-outline-primary:hover{
background: var(--orange-soft) !important;
}
/* card bootstrap */
.card{
background: var(--bg-2) !important;
border: 1px solid var(--line) !important;
color: var(--fg-muted);
}
.card-title{ color: var(--orange-2); }
.card-header, .card-footer{
background: var(--bg-3) !important;
border-color: var(--line) !important;
}
/* alert bootstrap, riportati sui toni del tema */
.alert{
background: var(--bg-2) !important;
border: 1px solid var(--orange) !important;
color: var(--fg) !important;
border-left-width: 3px !important;
}
/* badge */
.badge{
background: var(--orange-soft) !important;
color: var(--orange-2) !important;
font-weight: 700;
}
/* logo home, elemento specifico del sito */
.logohome{
max-width: 220px;
height: clamp(80px, 20vh, 160px); /* min 80px, max 160px */
object-fit: contain;
margin: var(--sp-6) auto;
filter: drop-shadow(0 0 20px var(--orange-glow));
}
/* ======================================================================
15. WIDGET PREZZI CRYPTO (widgets.php)
Riskinna le classi esistenti .widgets/.price/.widicons senza
toccare l'HTML o lo script di fetch dei prezzi.
====================================================================== */
.widgets{
display: flex;
align-items: center;
gap: var(--sp-1);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--sp-1) var(--sp-1);
transition: border-color .2s ease, box-shadow .2s ease;
/* dimensione fissa per tutti i widget */
width: 220px;
min-height: 80px;
box-sizing: border-box;
}
.widgets:hover{
border-color: var(--orange);
box-shadow: var(--glow-sm);
}
.widicons{
filter: drop-shadow(0 0 6px var(--orange-glow));
}
.price{
font-family: var(--font-mono);
font-weight: 700;
color: var(--orange-2);
font-size: var(--fs-md);
letter-spacing: 0.5px;
}
.centratura{
display: flex;
justify-content: center;
}
.altezzarigheindex{
padding: var(--sp-3) 0;
}
/* ======================================================================
16. FOOTER SITO (pdp.php)
Sostituisce lo