[UX] Landing NIS2: tema rosso cybersecurity
Cambio colore brand da cyan (#06B6D4) a rosso (#EF4444): - --brand-accent: #EF4444 - --brand-gradient: #EF4444 → #DC2626 - --border-color: rgba(239,68,68,0.12) - --cyan: #EF4444 (compatibilità var) Tutte le 22+ referenze colore aggiornate via CSS variables cascade. Tema blu (#3B82F6) mantenuto solo per card "Azienda" (differenziazione). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
DevEnv nis2-agile
parent
0a194f6f12
commit
c4c34aeed1
@ -16,18 +16,18 @@
|
||||
--surface-darker: #0F172A;
|
||||
--surface-dark: #1E293B;
|
||||
--surface-card: rgba(30, 41, 59, 0.8);
|
||||
--brand-accent: #06B6D4;
|
||||
--brand-accent: #EF4444;
|
||||
--brand-accent2: #3B82F6;
|
||||
--brand-gradient: linear-gradient(135deg, #06B6D4, #3B82F6);
|
||||
--brand-gradient: linear-gradient(135deg, #EF4444, #DC2626);
|
||||
--text-white: #F8FAFC;
|
||||
--text-light: #CBD5E1;
|
||||
--text-muted: #94A3B8;
|
||||
--border-color: rgba(6, 182, 212, 0.12);
|
||||
--border-color: rgba(239, 68, 68, 0.12);
|
||||
--green: #10B981;
|
||||
--yellow: #EAB308;
|
||||
--orange: #F59E0B;
|
||||
--red: #EF4444;
|
||||
--cyan: #06B6D4;
|
||||
--cyan: #EF4444;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
@ -77,11 +77,11 @@
|
||||
.btn-invite {
|
||||
background: var(--brand-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(6,182,212,0.25);
|
||||
box-shadow: 0 4px 16px rgba(239,68,68,0.25);
|
||||
}
|
||||
.btn-invite:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px rgba(6,182,212,0.35);
|
||||
box-shadow: 0 8px 24px rgba(239,68,68,0.35);
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
@ -100,11 +100,11 @@
|
||||
.btn-primary {
|
||||
background: var(--brand-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(6,182,212,0.25);
|
||||
box-shadow: 0 4px 16px rgba(239,68,68,0.25);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px rgba(6,182,212,0.35);
|
||||
box-shadow: 0 8px 24px rgba(239,68,68,0.35);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
@ -139,8 +139,8 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(6,182,212,0.1);
|
||||
border: 1px solid rgba(6,182,212,0.25);
|
||||
background: rgba(239,68,68,0.1);
|
||||
border: 1px solid rgba(239,68,68,0.25);
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
font-size: 12px;
|
||||
@ -195,7 +195,7 @@
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 80px rgba(6,182,212,0.1);
|
||||
box-shadow: 0 24px 80px rgba(239,68,68,0.1);
|
||||
}
|
||||
.hero-visual-bar {
|
||||
background: var(--surface-darker);
|
||||
@ -214,10 +214,10 @@
|
||||
.mock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.mock-title { font-size: 16px; font-weight: 700; color: var(--text-white); }
|
||||
.mock-score { font-size: 28px; font-weight: 800; color: var(--cyan); }
|
||||
.mock-gauge { height: 8px; background: rgba(6,182,212,0.1); border-radius: 4px; margin-bottom: 20px; overflow: hidden; }
|
||||
.mock-gauge { height: 8px; background: rgba(239,68,68,0.1); border-radius: 4px; margin-bottom: 20px; overflow: hidden; }
|
||||
.mock-gauge-fill { height: 100%; width: 73%; background: var(--brand-gradient); border-radius: 4px; }
|
||||
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
|
||||
.mock-card { background: rgba(6,182,212,0.05); border: 1px solid rgba(6,182,212,0.1); border-radius: 8px; padding: 12px; }
|
||||
.mock-card { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.1); border-radius: 8px; padding: 12px; }
|
||||
.mock-card-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
|
||||
.mock-card-value { font-size: 14px; font-weight: 700; color: var(--text-white); }
|
||||
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; }
|
||||
@ -256,7 +256,7 @@
|
||||
}
|
||||
.icon-red { background: rgba(239,68,68,0.12); color: var(--red); }
|
||||
.icon-orange { background: rgba(245,158,11,0.12); color: var(--orange); }
|
||||
.icon-cyan { background: rgba(6,182,212,0.12); color: var(--cyan); }
|
||||
.icon-cyan { background: rgba(239,68,68,0.12); color: var(--cyan); }
|
||||
.icon-blue { background: rgba(59,130,246,0.12); color: var(--brand-accent2); }
|
||||
.icon-green { background: rgba(16,185,129,0.12); color: var(--green); }
|
||||
.icon-purple { background: rgba(168,85,247,0.12); color: #A855F7; }
|
||||
@ -274,7 +274,7 @@
|
||||
}
|
||||
.tag-red { background: rgba(239,68,68,0.12); color: var(--red); }
|
||||
.tag-orange { background: rgba(245,158,11,0.12); color: var(--orange); }
|
||||
.tag-cyan { background: rgba(6,182,212,0.12); color: var(--cyan); }
|
||||
.tag-cyan { background: rgba(239,68,68,0.12); color: var(--cyan); }
|
||||
|
||||
/* ── SECTION HEADERS ── */
|
||||
.section-header { text-align: center; margin-bottom: 64px; }
|
||||
@ -332,14 +332,14 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
.target-card.card-cyan {
|
||||
border-color: rgba(6,182,212,0.3);
|
||||
border-color: rgba(239,68,68,0.3);
|
||||
}
|
||||
.target-card.card-cyan::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 200px; height: 200px;
|
||||
background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
|
||||
background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.target-card-icon {
|
||||
@ -350,7 +350,7 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.tc-blue { background: rgba(59,130,246,0.12); color: var(--brand-accent2); }
|
||||
.tc-cyan { background: rgba(6,182,212,0.12); color: var(--cyan); }
|
||||
.tc-cyan { background: rgba(239,68,68,0.12); color: var(--cyan); }
|
||||
.target-card h3 { font-size: 22px; font-weight: 800; color: var(--text-white); margin-bottom: 8px; }
|
||||
.target-card .subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; font-weight: 500; }
|
||||
.target-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||||
@ -391,7 +391,7 @@
|
||||
transition: border-color 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.feature-card:hover {
|
||||
border-color: rgba(6,182,212,0.3);
|
||||
border-color: rgba(239,68,68,0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.feature-icon {
|
||||
@ -490,7 +490,7 @@
|
||||
top: -60px; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
|
||||
background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.cta-box h2 { font-size: 40px; font-weight: 800; color: var(--text-white); margin-bottom: 16px; line-height: 1.2; }
|
||||
@ -527,8 +527,8 @@
|
||||
|
||||
/* ── NORMATIVA HIGHLIGHT ── */
|
||||
.norma-strip {
|
||||
background: rgba(6,182,212,0.05);
|
||||
border: 1px solid rgba(6,182,212,0.15);
|
||||
background: rgba(239,68,68,0.05);
|
||||
border: 1px solid rgba(239,68,68,0.15);
|
||||
border-radius: 10px;
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user