AdminGit2026/nis2-agile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UX] Landing NIS2: tema rosso cybersecurity

Browse Source 
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 2026-03-09 11:56:03 +01:00
parent 0a194f6f12
commit c4c34aeed1
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/index.html
View File

@ -16,18 +16,18 @@
--surface-darker: #0F172A; --surface-darker: #0F172A;
--surface-dark: #1E293B; --surface-dark: #1E293B;
--surface-card: rgba(30, 41, 59, 0.8); --surface-card: rgba(30, 41, 59, 0.8);
--brand-accent: #06B6D4; --brand-accent: #EF4444;
--brand-accent2: #3B82F6; --brand-accent2: #3B82F6;
--brand-gradient: linear-gradient(135deg, #06B6D4, #3B82F6); --brand-gradient: linear-gradient(135deg, #EF4444, #DC2626);
--text-white: #F8FAFC; --text-white: #F8FAFC;
--text-light: #CBD5E1; --text-light: #CBD5E1;
--text-muted: #94A3B8; --text-muted: #94A3B8;
--border-color: rgba(6, 182, 212, 0.12); --border-color: rgba(239, 68, 68, 0.12);
--green: #10B981; --green: #10B981;
--yellow: #EAB308; --yellow: #EAB308;
--orange: #F59E0B; --orange: #F59E0B;
--red: #EF4444; --red: #EF4444;
--cyan: #06B6D4; --cyan: #EF4444;
} }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
@ -77,11 +77,11 @@
.btn-invite { .btn-invite {
background: var(--brand-gradient); background: var(--brand-gradient);
color: white; 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 { .btn-invite:hover {
transform: translateY(-1px); 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 { .btn {
display: inline-flex; display: inline-flex;
@ -100,11 +100,11 @@
.btn-primary { .btn-primary {
background: var(--brand-gradient); background: var(--brand-gradient);
color: white; 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 { .btn-primary:hover {
transform: translateY(-1px); 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 { .btn-ghost {
background: transparent; background: transparent;
@ -139,8 +139,8 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: rgba(6,182,212,0.1); background: rgba(239,68,68,0.1);
border: 1px solid rgba(6,182,212,0.25); border: 1px solid rgba(239,68,68,0.25);
border-radius: 20px; border-radius: 20px;
padding: 6px 16px; padding: 6px 16px;
font-size: 12px; font-size: 12px;
@ -195,7 +195,7 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 16px; border-radius: 16px;
overflow: hidden; 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 { .hero-visual-bar {
background: var(--surface-darker); background: var(--surface-darker);
@ -214,10 +214,10 @@
.mock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .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-title { font-size: 16px; font-weight: 700; color: var(--text-white); }
.mock-score { font-size: 28px; font-weight: 800; color: var(--cyan); } .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-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-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-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); } .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; } .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-red { background: rgba(239,68,68,0.12); color: var(--red); }
.icon-orange { background: rgba(245,158,11,0.12); color: var(--orange); } .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-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-green { background: rgba(16,185,129,0.12); color: var(--green); }
.icon-purple { background: rgba(168,85,247,0.12); color: #A855F7; } .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-red { background: rgba(239,68,68,0.12); color: var(--red); }
.tag-orange { background: rgba(245,158,11,0.12); color: var(--orange); } .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 HEADERS ── */
.section-header { text-align: center; margin-bottom: 64px; } .section-header { text-align: center; margin-bottom: 64px; }
@ -332,14 +332,14 @@
pointer-events: none; pointer-events: none;
} }
.target-card.card-cyan { .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 { .target-card.card-cyan::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; right: 0; top: 0; right: 0;
width: 200px; height: 200px; 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; pointer-events: none;
} }
.target-card-icon { .target-card-icon {
@ -350,7 +350,7 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.tc-blue { background: rgba(59,130,246,0.12); color: var(--brand-accent2); } .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 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-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; } .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; transition: border-color 0.25s ease, transform 0.25s ease;
} }
.feature-card:hover { .feature-card:hover {
border-color: rgba(6,182,212,0.3); border-color: rgba(239,68,68,0.3);
transform: translateY(-2px); transform: translateY(-2px);
} }
.feature-icon { .feature-icon {
@ -490,7 +490,7 @@
top: -60px; left: 50%; top: -60px; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 400px; height: 400px; 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; pointer-events: none;
} }
.cta-box h2 { font-size: 40px; font-weight: 800; color: var(--text-white); margin-bottom: 16px; line-height: 1.2; } .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 ── */ /* ── NORMATIVA HIGHLIGHT ── */
.norma-strip { .norma-strip {
background: rgba(6,182,212,0.05); background: rgba(239,68,68,0.05);
border: 1px solid rgba(6,182,212,0.15); border: 1px solid rgba(239,68,68,0.15);
border-radius: 10px; border-radius: 10px;
padding: 14px 20px; padding: 14px 20px;
display: flex; display: flex;