/* ================================================================
HydroPortable — Design System v3.0
Engineering-grade · · Professional print-ready
================================================================ */
/* ── Font loading ───────────────────────────────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-700.woff2') format('woff2'); }
/* ================================================================
DESIGN TOKENS
================================================================ */
:root {
/* Palette primaria — Navy scale 50→900 */
--color-primary-50: #eff6ff;
--color-primary-100: #dbe7f5;
--color-primary-200: #bfd4ed;
--color-primary-300: #90b5dc;
--color-primary-400: #5e8fc7;
--color-primary-500: #2c63a8;
--color-primary-600: #1e5baa;
--color-primary-700: #0b3d7a;
--color-primary-800: #0a2f5d;
--color-primary-900: #0b2340;
/* Neutrals */
--color-surface: #eef4fb; /* azzurro-acqua tenue (era #fff) → meno contrasto coi bottoni navy */
--color-surface-alt: #e8f0f9;
--color-surface-2: #e0ebf6;
--color-surface-3: #d4e3f2;
--color-border-subtle: #edf0f3;
--color-border: #d8dde3;
--color-border-strong: #b8c0cc;
--color-text: #0b1f3a;
--color-text-2: #394a63;
--color-text-muted: #6b7785;
--color-text-faint: #9aa3af;
--color-text-inverse: #ffffff;
/* Semantic — pair bg + border + text per ogni stato */
--color-success: #1a6b5e;
--color-success-bg: #ebf7f4;
--color-success-border:#b8dcd0;
--color-success-text: #0e4d43;
--color-warning: #b14d27;
--color-warning-bg: #fff4ec;
--color-warning-border:#f0c9a6;
--color-warning-text: #6b3410;
--color-danger: #b02a37;
--color-danger-bg: #fdeded;
--color-danger-border: #f1b8bc;
--color-danger-text: #6b1a23;
--color-info-bg: var(--color-primary-50);
--color-info-border: var(--color-primary-100);
--color-info-text: var(--color-primary-900);
/* Category accents */
--cat-canali: #0b3d7a;
--cat-manufatti: #b14d27;
--cat-reti: #2c4a8a;
--cat-idrologia: #1a6b5e;
--cat-invarianza: #2d6b3a;
--cat-utilita: #8a6b1a;
--cat-irrigaz: #6b1f8a;
--cat-impianti: #8a4a1a;
--cat-strutt: #37474f;
--cat-geotec: #6b4423;
--cat-wizard: #4338ca;
--cat-export: #1a6b5e;
/* Spacing scale (4px base) — completa */
--s-0: 0;
--s-1: 4px; --s-2: 8px; --s-3: 12px;
--s-4: 16px; --s-5: 20px; --s-6: 24px;
--s-7: 28px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-14: 56px; --s-16: 64px;
--s-20: 80px; --s-24: 96px;
/* Radius scale — allineata a Material Design 3 shape scale (FASE 4 Q3) */
--r-xs: 4px; --r-sm: 8px; --r-md: 12px;
--r-lg: 16px; --r-xl: 24px; --r-2xl: 28px;
--r-full: 999px;
/* MD3 state-layer opacity (hover/focus/press) — overlay su colore on-surface */
--md-state-hover: 0.08;
--md-state-focus: 0.12;
--md-state-press: 0.12;
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Courier New', monospace;
--font-display: 'Inter', system-ui, sans-serif;
/* Type scale (13/14 base tuned for dense tech UI) */
--fs-xxs: 10px; --fs-xs: 11px; --fs-sm: 12px;
--fs-base: 13px; --fs-md: 14px; --fs-lg: 16px;
--fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 32px;
--fs-4xl: 40px;
--lh-none: 1; --lh-tight: 1.2; --lh-snug: 1.35;
--lh-base: 1.55; --lh-relaxed: 1.7;
/* Font features */
--ff-tabular: 'tnum' 1, 'calt' 0;
--ff-ss01: 'ss01' 1;
/* Elevation scale */
--shadow-xs: 0 1px 1px rgba(11,31,58,0.04);
--shadow-sm: 0 1px 2px rgba(11,31,58,0.06), 0 1px 1px rgba(11,31,58,0.04);
--shadow-md: 0 2px 4px rgba(11,31,58,0.06), 0 4px 8px rgba(11,31,58,0.05);
--shadow-lg: 0 4px 8px rgba(11,31,58,0.07), 0 12px 24px rgba(11,31,58,0.08);
--shadow-xl: 0 8px 16px rgba(11,31,58,0.08), 0 24px 48px rgba(11,31,58,0.10);
--shadow-focus: 0 0 0 3px rgba(11,61,122,0.18);
--shadow-focus-err: 0 0 0 3px rgba(176,42,55,0.18);
--shadow-inset: inset 0 1px 2px rgba(11,31,58,0.06);
/* Motion */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
--ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
--t-fast: 120ms;
--t-base: 180ms;
--t-slow: 280ms;
/* Z-index scale */
--z-base: 0; --z-raised: 10; --z-dropdown: 1000;
--z-sticky: 1020; --z-overlay: 1030; --z-modal: 1040;
--z-toast: 1050; --z-tooltip: 1060;
/* Layout */
--sidebar-w: 260px;
--header-h: 60px;
--max-content: 1280px;
--max-prose: 720px;
/* Print */
--print-page-margin: 2.5cm;
--print-header-h: 2cm;
--print-footer-h: 1.8cm;
--color-print-accent: #0b3d7a;
}
/* ================================================================
RESET + BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
font-size: var(--fs-base);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 4;
scroll-behavior: smooth;
/* Performance: GPU compositing hint */
overflow-anchor: auto;
}
/* Performance: content-visibility su sezioni off-screen */
.cat-section,
.panel--lazy,
.gallery-item {
content-visibility: auto;
contain-intrinsic-size: auto 400px;
}
/* Containment su card (isola layout, reduce reflow) */
.panel, .card { contain: layout style; }
/* Dark mode eliminata: toggle nascosto su tutte le pagine */
#theme-toggle, #nav-dark-icon,
[onclick*="toggleDarkMode"], [onclick*="toggleTheme"] { display: none !important; }
body {
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text);
/* Sfondo "acqua": tinta blu tenue + onde traslucide → riduce il
contrasto con i bottoni navy senza intaccare i pannelli bianchi */
background-color: #dde9f4;
background-image:
linear-gradient(165deg, rgba(239,246,255,0.55) 0%, rgba(191,212,237,0.45) 55%, rgba(144,181,220,0.40) 100%),
url("data:image/svg+xml;utf8,");
background-attachment: fixed;
background-repeat: no-repeat, repeat;
background-size: cover, 140px 70px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: var(--ff-ss01);
min-height: 100vh;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-text);
font-weight: 700;
line-height: var(--lh-tight);
font-family: var(--font-display);
letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
p { line-height: var(--lh-base); }
a {
color: var(--color-primary-700);
text-decoration: none;
transition: color var(--t-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-900); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
code, pre, .mono {
font-family: var(--font-mono);
font-feature-settings: var(--ff-tabular);
}
hr {
border: 0;
height: 1px;
background: var(--color-border);
margin: var(--s-4) 0;
}
::selection { background: var(--color-primary-100); color: var(--color-primary-900); }
/* Utility scroll */
.scroll-area { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--r-full); }
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
/* ================================================================
LAYOUT — App shell
================================================================ */
.app {
display: flex;
min-height: 100vh;
background: var(--color-surface-2);
}
.sidebar {
width: var(--sidebar-w);
background: var(--color-primary-900);
color: #cbd5e1;
flex-shrink: 0;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
padding: var(--s-4) var(--s-3);
z-index: var(--z-sticky);
border-right: 1px solid rgba(255,255,255,0.04);
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--r-full); }
.sidebar__brand {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) var(--s-3);
margin-bottom: var(--s-5);
color: #ffffff;
font-weight: 700;
font-size: var(--fs-md);
letter-spacing: -0.01em;
}
.sidebar__brand-logo {
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
display: flex; align-items: center; justify-content: center;
color: white; font-weight: 800; font-size: 14px;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.sidebar__section { margin-bottom: var(--s-5); }
.sidebar__title {
font-size: var(--fs-xxs);
font-weight: 700;
color: #7ba3d9;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 var(--s-3);
margin-bottom: var(--s-2);
}
.sidebar__footer {
margin-top: auto;
padding-top: var(--s-3);
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
gap: var(--s-1);
}
.main {
flex: 1;
min-width: 0;
padding: var(--s-6) var(--s-8);
max-width: var(--max-content);
margin: 0 auto;
width: 100%;
}
.page-header {
margin-bottom: var(--s-6);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--color-border-subtle);
}
.page-header h1, .page-header h2 {
margin: var(--s-2) 0 var(--s-1);
}
.page-header .subtitle {
font-size: var(--fs-md);
color: var(--color-text-muted);
line-height: var(--lh-snug);
margin-top: var(--s-1);
}
.page-header__actions {
display: flex;
gap: var(--s-2);
margin-top: var(--s-3);
flex-wrap: wrap;
}
.page-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6);
align-items: start;
}
.breadcrumb {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin-bottom: var(--s-3);
display: flex;
align-items: center;
gap: var(--s-1);
flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-muted); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--color-primary-700); text-decoration: none; }
.breadcrumb__sep { margin: 0 var(--s-1); color: var(--color-text-faint); }
.breadcrumb__current { color: var(--color-text); font-weight: 600; }
/* Mobile */
@media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0; left: 0;
transform: translateX(-100%);
transition: transform var(--t-slow) var(--ease-standard);
box-shadow: var(--shadow-xl);
will-change: transform;
}
.sidebar.open {
transform: translateX(0);
box-shadow: var(--shadow-xl), 100vw 0 0 rgba(11,31,58,0.42);
}
.main {
padding: var(--s-4);
padding-top: calc(var(--header-h) + var(--s-4));
}
.page-body { grid-template-columns: 1fr; gap: var(--s-4); }
.mobile-header {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--header-h);
background: var(--color-primary-900);
color: white;
display: flex;
align-items: center;
padding: 0 var(--s-4);
gap: var(--s-3);
z-index: var(--z-sticky);
box-shadow: var(--shadow-md);
}
.mobile-header__toggle {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: var(--s-2);
border-radius: var(--r-sm);
transition: background var(--t-fast);
}
.mobile-header__toggle:hover { background: rgba(255,255,255,0.08); }
}
@media (min-width: 769px) { .mobile-header { display: none; } }
/* ================================================================
PANEL — card neutra + varianti
================================================================ */
.panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-md);
padding: var(--s-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t-base) var(--ease-standard);
}
.panel:hover { box-shadow: var(--shadow-md); }
.panel--flat { box-shadow: none; }
.panel--flat:hover { box-shadow: none; }
.panel--accent { border-left: 3px solid var(--color-primary-700); }
.panel--accent-success { border-left: 3px solid var(--color-success); }
.panel--accent-warning { border-left: 3px solid var(--color-warning); }
.panel--accent-danger { border-left: 3px solid var(--color-danger); }
.panel--sticky { position: sticky; top: var(--s-6); }
.panel--compact { padding: var(--s-3); }
.panel--loose { padding: var(--s-8); }
.panel__title {
font-size: var(--fs-lg);
font-weight: 700;
margin-bottom: var(--s-3);
color: var(--color-text);
display: flex;
align-items: center;
gap: var(--s-2);
}
.panel__subtitle {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin-bottom: var(--s-3);
margin-top: calc(-1 * var(--s-2));
}
.panel__section {
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--color-border-subtle);
}
.panel__actions {
display: flex;
gap: var(--s-2);
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--color-border-subtle);
flex-wrap: wrap;
}
@media (max-width: 768px) { .panel--sticky { position: static; } }
/* card legacy alias */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-md);
padding: var(--s-5);
box-shadow: var(--shadow-sm);
margin-bottom: var(--s-4);
transition: box-shadow var(--t-base) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-md); }
.card > h3:first-child, .card > h4:first-child { margin-top: 0; margin-bottom: var(--s-3); }
/* ================================================================
NAVIGATION
================================================================ */
.nav-item {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) var(--s-3);
border-radius: var(--r-sm);
color: #a8c0dd;
font-size: var(--fs-sm);
font-weight: 500;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
text-decoration: none;
border: none;
background: none;
width: 100%;
text-align: left;
position: relative;
}
.nav-item:hover {
background: rgba(255,255,255,0.06);
color: #ffffff;
text-decoration: none;
padding-left: calc(var(--s-3) + 4px);
}
.nav-item--active {
background: var(--color-primary-700);
color: #ffffff;
font-weight: 600;
}
.nav-item--active::before {
content: '';
position: absolute;
left: -8px;
top: 20%;
bottom: 20%;
width: 3px;
background: var(--color-primary-400);
border-radius: 0 2px 2px 0;
}
.nav-item__icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.nav-item__label { flex: 1; }
.nav-item__badge {
font-family: var(--font-mono);
font-size: var(--fs-xxs);
color: #7ba3d9;
font-weight: 500;
background: rgba(123,163,217,0.1);
padding: 2px 6px;
border-radius: var(--r-full);
font-feature-settings: var(--ff-tabular);
}
.nav-item--active .nav-item__badge { color: #cbd5e1; background: rgba(255,255,255,0.15); }
.tabs {
display: flex;
gap: var(--s-1);
margin-bottom: var(--s-4);
border-bottom: 1px solid var(--color-border);
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
background: none;
border: none;
padding: var(--s-2) var(--s-4);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--t-fast), border-color var(--t-fast);
white-space: nowrap;
}
.tab:hover { color: var(--color-text); }
.tab--active {
color: var(--color-primary-700);
border-bottom-color: var(--color-primary-700);
}
.tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: var(--s-1) var(--s-3);
background: var(--color-primary-50);
border: 1px solid var(--color-primary-100);
border-radius: var(--r-full);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-primary-700);
cursor: pointer;
transition: all var(--t-fast) var(--ease-standard);
text-decoration: none;
}
.chip:hover {
background: var(--color-primary-700);
color: white;
border-color: var(--color-primary-700);
text-decoration: none;
transform: translateY(-1px);
}
.chip-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tag {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: 2px var(--s-2);
font-size: var(--fs-xxs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: var(--r-xs);
background: var(--color-surface-3);
color: var(--color-text-2);
}
.tag--primary { background: var(--color-primary-100); color: var(--color-primary-700); }
.tag--success { background: var(--color-success-bg); color: var(--color-success-text); }
.tag--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.tag--danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.tag__dot {
width: 6px; height: 6px; border-radius: var(--r-full);
background: currentColor; opacity: 0.8;
}
/* ================================================================
FORM
================================================================ */
.field {
display: flex;
flex-direction: column;
gap: var(--s-1);
margin-bottom: var(--s-3);
}
.field__label {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.field__label .req { color: var(--color-danger); margin-left: 2px; }
.field__input,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
font-family: var(--font-sans);
font-size: var(--fs-md);
padding: 9px var(--s-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-sm);
color: var(--color-text);
width: 100%;
transition: border-color var(--t-fast) var(--ease-standard),
box-shadow var(--t-fast) var(--ease-standard),
background var(--t-fast);
outline: none;
line-height: var(--lh-snug);
}
input[type="number"] {
font-family: var(--font-mono);
font-feature-settings: var(--ff-tabular);
}
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
border-color: var(--color-border-strong);
}
input:focus,
select:focus,
textarea:focus,
.field__input:focus {
border-color: var(--color-primary-700);
box-shadow: var(--shadow-focus);
}
input:disabled, select:disabled, textarea:disabled {
background: var(--color-surface-2);
color: var(--color-text-muted);
cursor: not-allowed;
}
input[readonly], textarea[readonly] {
background: var(--color-surface-alt);
color: var(--color-text-2);
}
textarea { resize: vertical; min-height: 80px; }
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--s-3) center;
padding-right: var(--s-8);
}
.field__hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.field__error { font-size: var(--fs-xs); color: var(--color-danger); font-weight: 600; display: none; }
.field__input.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid {
border-color: var(--color-danger);
box-shadow: var(--shadow-focus-err);
}
.field__input.is-invalid ~ .field__error,
input.is-invalid ~ .field__error { display: block; }
.field-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.field-grid--cols-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field-grid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--s-3);
margin-bottom: var(--s-3);
}
.input-grid label {
display: flex;
flex-direction: column;
gap: var(--s-1);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.input-grid .unit {
font-family: var(--font-mono);
font-size: var(--fs-xxs);
color: var(--color-text-faint);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.search {
padding-left: 38px !important;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
}
/* Toggle switch */
.toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--s-2);
cursor: pointer;
font-size: var(--fs-sm);
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__slider {
width: 36px;
height: 20px;
background: var(--color-border-strong);
border-radius: var(--r-full);
position: relative;
transition: background var(--t-fast) var(--ease-standard);
}
.toggle__slider::before {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
background: white;
border-radius: var(--r-full);
transition: transform var(--t-base) var(--ease-standard);
box-shadow: var(--shadow-sm);
}
.toggle input:checked ~ .toggle__slider { background: var(--color-primary-700); }
.toggle input:checked ~ .toggle__slider::before { transform: translateX(16px); }
.toggle input:focus-visible ~ .toggle__slider { box-shadow: var(--shadow-focus); }
/* Checkbox/radio custom */
.check, .radio {
display: inline-flex;
align-items: center;
gap: var(--s-2);
cursor: pointer;
font-size: var(--fs-sm);
user-select: none;
}
.check input[type="checkbox"], .radio input[type="radio"] {
appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--r-xs);
background: var(--color-surface);
cursor: pointer;
transition: all var(--t-fast);
flex-shrink: 0;
position: relative;
}
.radio input[type="radio"] { border-radius: var(--r-full); }
.check input[type="checkbox"]:checked, .radio input[type="radio"]:checked {
background: var(--color-primary-700);
border-color: var(--color-primary-700);
}
.check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.radio input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 4px;
background: white;
border-radius: var(--r-full);
}
.check input:focus-visible, .radio input:focus-visible { box-shadow: var(--shadow-focus); }
/* ================================================================
BUTTON
================================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
padding: 9px var(--s-4);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
border-radius: var(--r-sm);
cursor: pointer;
transition: background var(--t-fast) var(--ease-standard),
color var(--t-fast),
border-color var(--t-fast),
box-shadow var(--t-fast),
transform var(--t-fast);
border: 1px solid transparent;
text-decoration: none;
line-height: var(--lh-none);
user-select: none;
white-space: nowrap;
letter-spacing: 0.005em;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary {
background: var(--color-primary-500); /* blu-acqua morbido (era navy 700) → meno scuro */
color: white;
border-color: var(--color-primary-500);
box-shadow: var(--shadow-xs);
}
.btn--primary:hover:not(:disabled) {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
color: white;
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.btn--secondary {
background: var(--color-surface);
color: var(--color-primary-700);
border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) {
background: var(--color-primary-50);
border-color: var(--color-primary-700);
text-decoration: none;
}
.btn--ghost {
background: transparent;
color: var(--color-text);
border-color: transparent;
}
.btn--ghost:hover:not(:disabled) {
background: var(--color-surface-2);
text-decoration: none;
}
.btn--danger {
background: var(--color-danger);
color: white;
border-color: var(--color-danger);
}
.btn--danger:hover:not(:disabled) { background: #8f2029; border-color: #8f2029; color: white; }
.btn--success {
background: var(--color-success);
color: white;
border-color: var(--color-success);
}
.btn--success:hover:not(:disabled) { background: #0e4d43; border-color: #0e4d43; color: white; }
.btn--icon { width: 34px; height: 34px; padding: 0; }
.btn--sm { padding: 5px var(--s-3); font-size: var(--fs-xs); }
.btn--lg { padding: var(--s-3) var(--s-5); font-size: var(--fs-md); }
.btn--full { width: 100%; }
/* Btn group */
.btn-group {
display: inline-flex;
border-radius: var(--r-sm);
box-shadow: var(--shadow-xs);
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* ================================================================
DATA DISPLAY
================================================================ */
.kpi {
padding: var(--s-4);
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-left: 3px solid var(--color-success);
border-radius: var(--r-sm);
margin-bottom: var(--s-3);
transition: box-shadow var(--t-base);
}
.kpi:hover { box-shadow: var(--shadow-sm); }
.kpi--primary { border-left-color: var(--color-primary-700); }
.kpi--warning { border-left-color: var(--color-warning); }
.kpi--danger { border-left-color: var(--color-danger); }
.kpi__label {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--s-1);
}
.kpi__value {
font-family: var(--font-mono);
font-size: var(--fs-2xl);
font-weight: 700;
color: var(--color-text);
line-height: 1;
font-feature-settings: var(--ff-tabular);
letter-spacing: -0.01em;
}
.kpi__unit {
font-family: var(--font-mono);
font-size: var(--fs-base);
font-weight: 500;
color: var(--color-text-muted);
margin-left: 3px;
}
.kpi__delta {
font-size: var(--fs-xs);
font-weight: 600;
margin-top: var(--s-1);
}
.kpi__delta--up { color: var(--color-success); }
.kpi__delta--down { color: var(--color-danger); }
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--s-2);
margin-top: var(--s-3);
}
.stat {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--r-sm);
padding: var(--s-3);
text-align: center;
transition: all var(--t-fast);
}
.stat:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-xs);
}
.stat__label {
font-size: var(--fs-xxs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
margin-bottom: 4px;
}
.stat__value {
font-family: var(--font-mono);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--color-text);
font-feature-settings: var(--ff-tabular);
}
/* Tables */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
margin: var(--s-3) 0;
background: var(--color-surface);
border-radius: var(--r-sm);
overflow: hidden;
border: 1px solid var(--color-border-subtle);
}
.data-table th {
background: var(--color-primary-700);
color: white;
padding: var(--s-3) var(--s-3);
text-align: left;
font-weight: 600;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--color-primary-800);
}
.data-table th.num, .data-table td.num { text-align: right; }
.data-table td {
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--color-border-subtle);
font-family: var(--font-mono);
font-feature-settings: var(--ff-tabular);
color: var(--color-text-2);
}
.data-table tbody tr:nth-child(even) td {
background: var(--color-surface-alt);
}
.data-table tbody tr:hover td {
background: var(--color-primary-50);
color: var(--color-text);
}
.data-table tfoot td {
font-weight: 700;
background: var(--color-surface-2);
color: var(--color-text);
}
.data-table--compact th, .data-table--compact td { padding: var(--s-1) var(--s-2); font-size: var(--fs-xs); }
.data-table--bordered td { border: 1px solid var(--color-border-subtle); }
/* Code block */
.code-block {
font-family: var(--font-mono);
font-size: var(--fs-sm);
background: var(--color-surface-2);
border-left: 3px solid var(--color-primary-700);
padding: var(--s-3);
border-radius: var(--r-sm);
margin: var(--s-3) 0;
color: var(--color-text);
white-space: pre-wrap;
overflow-x: auto;
line-height: var(--lh-snug);
}
/* Callouts */
.callout {
padding: var(--s-3) var(--s-4);
border-radius: var(--r-sm);
border-left: 3px solid;
margin: var(--s-3) 0;
font-size: var(--fs-sm);
line-height: var(--lh-base);
display: flex;
align-items: flex-start;
gap: var(--s-3);
}
.callout__icon {
flex-shrink: 0;
width: 18px; height: 18px;
font-weight: 700;
font-size: var(--fs-base);
line-height: 1;
}
.callout__body { flex: 1; }
.callout__body strong { font-weight: 700; display: block; margin-bottom: 2px; }
.callout--info {
border-color: var(--color-primary-700);
background: var(--color-info-bg);
color: var(--color-info-text);
}
.callout--warn {
border-color: var(--color-warning);
background: var(--color-warning-bg);
color: var(--color-warning-text);
}
.callout--ok {
border-color: var(--color-success);
background: var(--color-success-bg);
color: var(--color-success-text);
}
.callout--err {
border-color: var(--color-danger);
background: var(--color-danger-bg);
color: var(--color-danger-text);
}
/* Verification boxes (for reports) */
.verifica-ok, .verifica-no {
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
margin: var(--s-2) 0;
font-weight: 600;
font-size: var(--fs-sm);
border-left: 3px solid;
display: flex;
align-items: center;
gap: var(--s-2);
}
.verifica-ok {
background: var(--color-success-bg);
color: var(--color-success-text);
border-left-color: var(--color-success);
}
.verifica-no {
background: var(--color-danger-bg);
color: var(--color-danger-text);
border-left-color: var(--color-danger);
}
.verifica-ok::before { content: '✓'; font-size: var(--fs-lg); font-weight: 700; }
.verifica-no::before { content: '✗'; font-size: var(--fs-lg); font-weight: 700; }
/* Formula blocks */
.formula-block {
background: #fffbeb;
border-left: 3px solid #f59e0b;
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
margin: var(--s-2) 0;
font-family: var(--font-mono);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
font-feature-settings: var(--ff-tabular);
}
.formula-simbolica { color: var(--color-text-2); margin-bottom: 3px; }
.formula-sostituzione { color: var(--color-warning); margin-bottom: 3px; }
.formula-risultato {
color: var(--color-success-text);
font-weight: 700;
background: var(--color-success-bg);
padding: 4px 8px;
border-radius: var(--r-xs);
display: inline-block;
margin-top: 3px;
}
/* Diagram box */
.diagram {
background: var(--color-surface-alt);
border: 1px solid var(--color-border-subtle);
border-radius: var(--r-sm);
padding: var(--s-3);
text-align: center;
margin-bottom: var(--s-3);
}
.diagram img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.diagram svg { max-width: 100%; height: auto; }
/* Badge */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
font-size: var(--fs-xxs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--color-success);
color: white;
border-radius: var(--r-xs);
vertical-align: middle;
margin-left: var(--s-1);
font-family: var(--font-sans);
}
.badge--primary { background: var(--color-primary-700); }
.badge--warning { background: var(--color-warning); }
.badge--danger { background: var(--color-danger); }
.badge--neutral { background: var(--color-text-muted); }
.divider { height: 1px; background: var(--color-border); margin: var(--s-4) 0; border: none; }
/* Progress */
.progress {
width: 100%;
height: 6px;
background: var(--color-surface-2);
border-radius: var(--r-full);
overflow: hidden;
margin: var(--s-2) 0;
}
.progress__bar {
height: 100%;
background: var(--color-primary-700);
border-radius: var(--r-full);
transition: width var(--t-slow) var(--ease-decelerate);
}
.progress--success .progress__bar { background: var(--color-success); }
.progress--warning .progress__bar { background: var(--color-warning); }
.progress--danger .progress__bar { background: var(--color-danger); }
/* Skeleton loader */
@keyframes skeleton-shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
display: inline-block;
background: linear-gradient(90deg,
var(--color-surface-2) 0%,
var(--color-surface-3) 50%,
var(--color-surface-2) 100%);
background-size: 200px 100%;
background-repeat: no-repeat;
border-radius: var(--r-xs);
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 20px; height: 20px;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary-700);
border-radius: var(--r-full);
animation: spin 0.8s linear infinite;
display: inline-block;
}
/* Result row (page legacy) */
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--s-2) 0;
border-bottom: 1px dashed var(--color-border-subtle);
font-size: var(--fs-sm);
}
.result-row:last-child { border-bottom: none; }
.result-row span { color: var(--color-text-muted); }
.result-row strong {
font-family: var(--font-mono);
font-feature-settings: var(--ff-tabular);
color: var(--color-text);
}
/* ================================================================
TOOL GRID — Home categorie
================================================================ */
.cat-section {
margin-bottom: var(--s-10);
scroll-margin-top: var(--s-6);
}
.cat-section h2 {
display: flex;
align-items: center;
gap: var(--s-2);
margin-bottom: var(--s-4);
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--color-border-subtle);
}
.cat-section__count {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--color-text-muted);
font-feature-settings: var(--ff-tabular);
}
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--s-3);
}
.tool-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary-700);
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
text-decoration: none;
color: inherit;
display: block;
position: relative;
overflow: hidden;
}
.tool-card::after {
content: '→';
position: absolute;
right: var(--s-3); top: 50%;
transform: translateY(-50%) translateX(8px);
color: var(--color-text-faint);
opacity: 0;
transition: all var(--t-base) var(--ease-standard);
font-size: var(--fs-base);
}
.tool-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--color-border);
text-decoration: none;
}
.tool-card:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
color: var(--color-primary-700);
}
.tool-card__name {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-text);
line-height: var(--lh-snug);
margin-bottom: 2px;
padding-right: var(--s-4);
}
.tool-card__hint {
font-size: var(--fs-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
font-feature-settings: var(--ff-tabular);
}
.tc--canali { border-left-color: var(--cat-canali); }
.tc--manufatti { border-left-color: var(--cat-manufatti); }
.tc--reti { border-left-color: var(--cat-reti); }
.tc--idrologia { border-left-color: var(--cat-idrologia); }
.tc--invarianza{ border-left-color: var(--cat-invarianza); }
.tc--utilita { border-left-color: var(--cat-utilita); }
.tc--irrigaz { border-left-color: var(--cat-irrigaz); }
.tc--impianti { border-left-color: var(--cat-impianti); }
.tc--strutt { border-left-color: var(--cat-strutt); }
.tc--geotec { border-left-color: var(--cat-geotec); }
.tc--wizard { border-left-color: var(--cat-wizard); }
.tc--export { border-left-color: var(--cat-export); }
.recenti { margin-bottom: var(--s-6); }
.recenti__label {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--s-2);
}
/* Catalogo home: riepilogo e ricerca più chiari */
.page-header--catalog {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-4);
}
.catalog-hero-media {
display: block;
flex: 0 1 360px;
max-width: 40%;
min-width: 260px;
aspect-ratio: 16 / 9;
border-radius: var(--r-md);
overflow: hidden;
background: var(--color-surface-2);
border: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-md);
}
.catalog-hero-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 50%;
}
.catalog-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
gap: var(--s-3);
margin: 0 0 var(--s-5);
}
.catalog-summary__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-2);
min-height: 48px;
padding: var(--s-3) var(--s-4);
color: var(--color-text);
text-decoration: none;
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-left: 3px solid var(--color-primary-700);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
transition: transform var(--t-fast), box-shadow var(--t-base), border-color var(--t-fast), background var(--t-fast);
}
.catalog-summary__item:hover {
transform: translateY(-1px);
text-decoration: none;
box-shadow: var(--shadow-md);
background: var(--color-primary-50);
}
.catalog-summary__item strong {
font-size: var(--fs-sm);
font-weight: 700;
line-height: var(--lh-tight);
}
.catalog-summary__item span {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--color-text-muted);
font-feature-settings: var(--ff-tabular);
}
/* Chip quick-jump colorate per macro (coerenti con le macro-aree) */
.catalog-summary__item[href="#macro-pelo-libero"] { --macro-color:#1565c0; }
.catalog-summary__item[href="#macro-reti-pressione"] { --macro-color:#c2410c; }
.catalog-summary__item[href="#macro-idrologia-drenaggio"]{ --macro-color:#0f766e; }
.catalog-summary__item[href="#macro-invarianza-drenaggio"]{ --macro-color:#7e22ce; }
.catalog-summary__item[href="#macro-strumenti"] { --macro-color:#475569; }
.catalog-summary__item[href^="#macro-"] {
border-left-color: var(--macro-color);
background: color-mix(in srgb, var(--macro-color) 5%, var(--color-surface));
}
.catalog-summary__item[href^="#macro-"]:hover {
background: color-mix(in srgb, var(--macro-color) 12%, var(--color-surface));
border-color: color-mix(in srgb, var(--macro-color) 40%, var(--color-border-subtle));
}
.catalog-summary__item[href^="#macro-"] strong { color: var(--macro-color); }
.catalog-summary__item[href^="#macro-"] span {
color: var(--macro-color);
background: color-mix(in srgb, var(--macro-color) 13%, transparent);
border-radius: var(--r-full); padding: 1px 8px;
}
.search-panel {
margin-bottom: var(--s-5);
padding: var(--s-3);
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--r-md);
box-shadow: var(--shadow-xs);
}
.search-panel__label {
display: block;
margin: 0 0 var(--s-2);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
}
.search-empty {
padding: var(--s-4);
color: var(--color-text-muted);
font-size: var(--fs-sm);
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--r-md);
}
.search-results__label {
margin-bottom: var(--s-2);
color: var(--color-text-muted);
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
}
@media (max-width: 760px) {
.page-header--catalog { display: block; }
.page-header--catalog .page-header__actions { margin-top: var(--s-3); }
.catalog-hero-media {
max-width: none;
width: 100%;
min-width: 0;
margin-top: var(--s-4);
}
.catalog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.catalog-summary { grid-template-columns: 1fr; }
}
/* ================================================================
DARK MODE
================================================================ */
[data-theme="dark"] {
--color-surface: #0d1117;
--color-surface-alt: #13181f;
--color-surface-2: #161b22;
--color-surface-3: #1d232b;
--color-border-subtle: #1f2630;
--color-border: #30363d;
--color-border-strong: #4a5361;
--color-text: #e6edf3;
--color-text-2: #b1bac4;
--color-text-muted: #8b949e;
--color-text-faint: #6e7681;
--color-primary-50: #0f1e36;
--color-primary-100: #1e3a5f;
--color-primary-500: #60a5fa;
--color-primary-600: #4f8cf0;
--color-primary-700: #3b82f6;
--color-primary-800: #1d4ed8;
--color-primary-900: #0a1a2e;
--color-success-bg: #0e2d26;
--color-success-text: #8edcc7;
--color-warning-bg: #2d1f0e;
--color-warning-text: #e8ba8e;
--color-danger-bg: #2d1015;
--color-danger-text: #f7a6ae;
--color-info-bg: #0f1e36;
--color-info-text: #90caf9;
--shadow-xs: 0 1px 1px rgba(0,0,0,0.3);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
--shadow-md: 0 4px 8px rgba(0,0,0,0.45);
--shadow-lg: 0 8px 16px rgba(0,0,0,0.55);
--shadow-xl: 0 16px 32px rgba(0,0,0,0.65);
--shadow-focus: 0 0 0 3px rgba(59,130,246,0.35);
}
[data-theme="dark"] body { background: #0a0e13; }
[data-theme="dark"] .sidebar { background: #030712; border-right: 1px solid var(--color-border); }
[data-theme="dark"] .sidebar__brand { color: #ffffff; }
[data-theme="dark"] .nav-item { color: #9ca3af; }
[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.04); color: #ffffff; }
[data-theme="dark"] .nav-item--active { background: var(--color-primary-700); color: #ffffff; }
[data-theme="dark"] .btn--primary { background: var(--color-primary-700); border-color: var(--color-primary-700); }
[data-theme="dark"] .btn--primary:hover { background: var(--color-primary-500); border-color: var(--color-primary-500); }
[data-theme="dark"] .btn--secondary { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-primary-500); }
[data-theme="dark"] .btn--secondary:hover { background: var(--color-primary-900); border-color: var(--color-primary-700); }
[data-theme="dark"] .kpi { background: var(--color-surface-2); border-color: var(--color-border-subtle); }
[data-theme="dark"] .stat { background: var(--color-surface-2); }
[data-theme="dark"] .data-table { background: var(--color-surface-2); border-color: var(--color-border-subtle); }
[data-theme="dark"] .data-table th { background: var(--color-primary-900); border-bottom-color: var(--color-primary-700); }
[data-theme="dark"] .data-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
[data-theme="dark"] .data-table tbody tr:hover td { background: var(--color-primary-900); color: var(--color-text); }
[data-theme="dark"] .formula-block { background: #2a1e0a; border-left-color: #d97706; }
[data-theme="dark"] .formula-simbolica { color: var(--color-text-2); }
[data-theme="dark"] .formula-sostituzione { color: #fb923c; }
/* Dark mode — componenti v2.6/v2.7 aggiunti */
[data-theme="dark"] .tool-intro { background: var(--color-info-bg); border-color: var(--color-primary-900); }
[data-theme="dark"] .tool-intro__body { color: var(--color-text-2); }
[data-theme="dark"] .tool-help-icon { background: var(--color-primary-900); color: var(--color-primary-500); border-color: var(--color-primary-800); }
[data-theme="dark"] .tool-help-icon:hover { background: var(--color-primary-500); color: var(--color-surface); }
[data-theme="dark"] .tool-help-popover { background: #0d1117; color: #c9d1d9; border: 1px solid var(--color-border); }
[data-theme="dark"] .tool-cta-block { background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface) 100%); border-color: var(--color-border-subtle); }
[data-theme="dark"] .tool-cta-block h3 { color: var(--color-primary-500); }
[data-theme="dark"] .hp-kpi-ok { background: rgba(26,107,94,0.15); }
[data-theme="dark"] .hp-kpi-no { background: rgba(176,42,55,0.18); }
[data-theme="dark"] .hp-kpi-title { color: var(--color-text); }
[data-theme="dark"] .hp-project-badge { background: rgba(22,27,34,0.92); }
[data-theme="dark"] .hp-pb-action:hover { background: var(--color-primary-500); }
[data-theme="dark"] .hp-norm-popover { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme="dark"] .hp-svg-toolbar { background: var(--color-surface-2); }
[data-theme="dark"] .hp-svg-btn { color: var(--color-text-muted); }
[data-theme="dark"] .hp-svg-btn:hover { background: var(--color-primary-900); color: var(--color-primary-500); }
[data-theme="dark"] input.expr-ok { animation: expr-pulse-dark 0.6s var(--ease-decelerate); }
@keyframes expr-pulse-dark {
0% { background: rgba(26,107,94,0.3); }
100% { background: var(--color-surface); }
}
[data-theme="dark"] .toast { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .cmdp__box { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme="dark"] .cmdp__item:hover, [data-theme="dark"] .cmdp__item.is-active { background: var(--color-primary-900); }
[data-theme="dark"] .cmdp__kbd { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-2); }
[data-theme="dark"] .cmdp__hint { background: var(--color-surface); }
[data-theme="dark"] details.accordion { background: var(--color-surface-2); border-color: var(--color-border-subtle); }
[data-theme="dark"] details.accordion > summary:hover { background: var(--color-surface); }
[data-theme="dark"] .skeleton {
background: linear-gradient(90deg,
var(--color-surface-2) 0%,
var(--color-surface-3) 50%,
var(--color-surface-2) 100%);
}
/* ================================================================
PRINT — A4 professional
================================================================ */
@page {
size: A4;
margin: var(--print-page-margin);
@bottom-center {
content: "Pag. " counter(page) " / " counter(pages);
font-family: 'Inter', sans-serif;
font-size: 9pt;
color: #666;
}
@bottom-right {
content: "";
font-family: 'Inter', sans-serif;
font-size: 9pt;
color: #666;
}
@top-left {
content: string(doctitle);
font-family: 'Inter', sans-serif;
font-size: 9pt;
color: #666;
font-weight: 600;
}
}
@page :first {
@top-left { content: ""; }
@bottom-center { content: ""; }
@bottom-right { content: ""; }
}
@page :left {
@top-left {
content: string(doctitle);
font-family: 'Inter', sans-serif;
font-size: 9pt;
color: #666;
}
}
@page :right {
@top-right {
content: string(doctitle);
font-family: 'Inter', sans-serif;
font-size: 9pt;
color: #666;
}
}
/* Print landscape variant: .print-landscape-wrap applies to container */
@page landscape-page {
size: A4 landscape;
margin: 1.5cm 2cm;
}
.print-landscape {
page: landscape-page;
page-break-before: always;
page-break-after: always;
}
@media print {
.print-landscape .data-table {
font-size: 8.5pt !important;
}
}
@media print {
:root {
--color-primary-700: var(--color-print-accent);
--color-surface: #ffffff;
--color-surface-alt: #ffffff;
--color-surface-2: #ffffff;
--color-surface-3: #ffffff;
--md-surface: #ffffff;
--md-surface-container-low: #ffffff;
--md-surface-container: #ffffff;
--md-surface-container-high: #ffffff;
}
html, body {
background: white !important;
color: black !important;
font-size: 10pt !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body { font-family: 'Inter', 'Times New Roman', serif !important; }
.sidebar, .mobile-header, .hp-topbar, .home-bar,
.btn, .tabs, .chip-row, .recenti,
.nefti-print-btn, .share-btn,
.back-button, .copyright-disclaimer,
.nav-bar, .no-print { display: none !important; }
.main {
padding: 0 !important;
max-width: 100% !important;
margin: 0 !important;
}
.container {
padding: 0 !important;
max-width: 100% !important;
background: white !important;
}
.panel, .card {
border: 0.6pt solid #999 !important;
box-shadow: none !important;
page-break-inside: avoid;
margin-bottom: 8pt !important;
padding: 10pt !important;
background: white !important;
}
.page-body { grid-template-columns: 1fr !important; gap: 8pt !important; }
#nefti-print-header {
display: block !important;
border-bottom: 1.5pt solid var(--color-print-accent) !important;
padding: 6pt 0 !important;
margin-bottom: 14pt !important;
}
.kpi {
background: white !important;
border: 0.6pt solid #999 !important;
page-break-inside: avoid;
}
.kpi__value { color: var(--color-print-accent) !important; }
.data-table {
border-collapse: collapse !important;
page-break-inside: auto;
font-size: 9pt !important;
}
.data-table th {
background: var(--color-print-accent) !important;
color: white !important;
font-size: 8pt !important;
}
.data-table td { border-bottom: 0.4pt solid #bbb !important; padding: 3pt 6pt !important; }
.data-table tbody tr:nth-child(even) td { background: #f5f5f5 !important; }
.data-table tbody tr { page-break-inside: avoid; }
.callout, .verifica-ok, .verifica-no, .formula-block {
page-break-inside: avoid;
border-width: 1pt !important;
}
.verifica-ok { background: #e8f5e9 !important; color: #1b5e20 !important; }
.verifica-no { background: #ffebee !important; color: #b71c1c !important; }
.formula-block { background: #fffef5 !important; border-left-color: #d97706 !important; }
svg { page-break-inside: avoid; }
h1 { font-size: 18pt !important; page-break-after: avoid; }
h2 { font-size: 14pt !important; page-break-after: avoid; margin-top: 14pt !important; }
h3 { font-size: 12pt !important; page-break-after: avoid; margin-top: 10pt !important; }
h4 { font-size: 11pt !important; page-break-after: avoid; }
p, ul, ol { orphans: 3; widows: 3; }
img, svg, canvas, table { page-break-inside: avoid; }
/* print brand */
.print-brand {
display: block !important;
font-size: 8pt !important;
color: #666 !important;
text-align: right !important;
margin-top: 2pt !important;
}
a { color: black !important; text-decoration: none !important; }
a[href]::after { content: ''; } /* no URL print */
/* Doc title for @page string */
h1 { string-set: doctitle content(text); }
/* Fine documento */
.report-end {
display: block !important;
text-align: center;
padding: 14pt 0;
margin-top: 2cm;
border-top: 0.6pt solid #999;
font-size: 10pt;
color: #888;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.report-end::before { content: "— FINE DOCUMENTO —"; }
/* Watermark opzionale */
.report-draft::before {
content: "BOZZA";
position: fixed;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 90pt;
color: rgba(176,42,55,0.12);
font-weight: 800;
letter-spacing: 0.1em;
z-index: 0;
pointer-events: none;
}
}
.report-end { display: none; }
#nefti-print-header {
display: none;
border-bottom: 3px solid var(--color-primary-700);
padding-bottom: var(--s-3);
margin-bottom: var(--s-5);
}
.nefti-print-btn {
position: fixed;
bottom: 16px;
right: 16px;
padding: 10px 16px;
background: var(--color-primary-700);
color: white;
border: none;
border-radius: var(--r-sm);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-md);
z-index: var(--z-raised);
transition: all var(--t-fast) var(--ease-standard);
}
.nefti-print-btn:hover {
background: var(--color-primary-800);
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
/* Le azioni flottanti devono restare raggiungibili senza coprire l'ultimo
campo, il relativo hint o il pulsante di calcolo. */
body.hp-has-floating-actions {
padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}
body.hp-has-floating-actions .nefti-print-btn {
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
body.hp-has-floating-actions .hp-floating-share-btn {
bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 640px) {
body.hp-has-floating-actions {
padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}
body.hp-has-floating-actions .nefti-print-btn {
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
padding: 8px 11px;
font-size: var(--fs-xs);
}
body.hp-has-floating-actions .share-btn.hp-floating-share-btn {
right: 12px !important;
bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
width: 38px !important;
height: 38px !important;
font-size: 17px !important;
}
}
/* ================================================================
LEGACY ALIASES — pagine non ancora migrate
================================================================ */
.container {
max-width: var(--max-content);
margin: 0 auto;
padding: var(--s-6) var(--s-8);
background: var(--color-surface);
border-radius: var(--r-md);
min-height: 60vh;
}
@media (max-width: 768px) { .container { padding: var(--s-4); } }
.calc-button,
.menu-button,
.menu-button-sm,
.menu-button-new,
.menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--s-3) var(--s-4);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
background: var(--color-primary-700);
color: white;
border: 1px solid var(--color-primary-700);
border-radius: var(--r-sm);
cursor: pointer;
width: 100%;
margin-top: var(--s-2);
transition: all var(--t-fast) var(--ease-standard);
text-align: left;
box-shadow: var(--shadow-xs);
}
.calc-button:hover,
.menu-button:hover,
.menu-button-sm:hover,
.menu-button-new:hover,
.menu-btn:hover {
background: var(--color-primary-800);
border-color: var(--color-primary-800);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.btn-primary, .btn-secondary, .btn-back {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 9px var(--s-4);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
border-radius: var(--r-sm);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--t-fast) var(--ease-standard);
text-decoration: none;
}
.btn-primary {
background: var(--color-primary-700);
color: white;
border-color: var(--color-primary-700);
box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
background: var(--color-primary-800);
border-color: var(--color-primary-800);
color: white;
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
text-decoration: none;
}
.btn-secondary {
background: var(--color-surface);
color: var(--color-primary-700);
border-color: var(--color-border-strong);
}
.btn-secondary:hover {
background: var(--color-primary-50);
border-color: var(--color-primary-700);
text-decoration: none;
}
.btn-back {
background: transparent;
color: var(--color-primary-700);
border-color: var(--color-primary-700);
}
.btn-back:hover { background: var(--color-primary-50); text-decoration: none; }
.back-button {
display: inline-flex;
align-items: center;
padding: 6px var(--s-3);
background: transparent;
color: var(--color-primary-700);
border: 1px solid var(--color-primary-700);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
margin-bottom: var(--s-4);
text-decoration: none;
transition: all var(--t-fast);
}
.back-button:hover { background: var(--color-primary-50); text-decoration: none; }
.nav-bar {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-4);
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--color-border-subtle);
}
.nav-bar .nav-title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text-muted);
}
.info-box {
padding: var(--s-3) var(--s-4);
border-left: 3px solid var(--color-primary-700);
background: var(--color-info-bg);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
color: var(--color-info-text);
margin-bottom: var(--s-4);
line-height: var(--lh-base);
}
.results, .results-card {
padding: var(--s-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-sm);
margin-top: var(--s-4);
box-shadow: var(--shadow-xs);
}
.results { display: none; }
.results.show { display: block; }
.result-value {
font-family: var(--font-mono);
font-size: var(--fs-xl);
font-weight: 700;
text-align: center;
color: var(--color-primary-700);
margin: var(--s-2) 0;
font-feature-settings: var(--ff-tabular);
letter-spacing: -0.01em;
}
.input-group { margin-bottom: var(--s-3); }
.input-group label {
display: block;
font-size: var(--fs-xs);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--s-1);
}
.input-group .unit {
font-family: var(--font-mono);
font-size: var(--fs-xxs);
color: var(--color-text-faint);
margin-top: 2px;
letter-spacing: 0;
text-transform: none;
font-weight: 500;
}
.mode-selector {
display: flex;
gap: var(--s-1);
margin-bottom: var(--s-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-alt);
padding: 3px;
border-radius: var(--r-sm);
border-bottom: none;
}
.mode-button {
background: none;
border: none;
padding: var(--s-2) var(--s-4);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
border-radius: var(--r-xs);
flex: 1;
transition: all var(--t-fast);
}
.mode-button:hover { color: var(--color-text); }
.mode-button.active {
background: var(--color-surface);
color: var(--color-primary-700);
box-shadow: var(--shadow-xs);
}
.header { display: none; }
.footer-logo { display: none; }
.menu-grid,
.menu-grid-compact,
.home-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--s-3);
}
.menu-grid-compact { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
[id^="cat-"] {
max-width: 1120px;
margin: 0 auto;
}
[id^="cat-"] h2 {
display: flex;
align-items: center;
gap: var(--s-2);
margin: var(--s-2) 0 var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--color-border-subtle);
font-size: var(--fs-2xl);
}
[id^="cat-"] .menu-grid,
[id^="cat-"] .menu-grid-compact {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
align-items: stretch;
}
[id^="cat-"] .menu-button,
[id^="cat-"] .menu-button-sm,
[id^="cat-"] .menu-button-new,
[id^="cat-"] .menu-btn {
justify-content: flex-start;
min-height: 58px;
margin-top: 0;
padding: var(--s-3) var(--s-8) var(--s-3) var(--s-4);
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border-subtle);
border-left: 3px solid var(--color-primary-700);
box-shadow: var(--shadow-xs);
line-height: var(--lh-snug);
position: relative;
}
[id^="cat-"] .menu-button-new {
border-left-color: var(--color-success);
}
[id^="cat-"] .menu-button::after,
[id^="cat-"] .menu-button-sm::after,
[id^="cat-"] .menu-button-new::after,
[id^="cat-"] .menu-btn::after {
content: '>';
position: absolute;
right: var(--s-4);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-faint);
font-family: var(--font-mono);
font-size: var(--fs-xs);
transition: color var(--t-fast), transform var(--t-fast);
}
[id^="cat-"] .menu-button:hover,
[id^="cat-"] .menu-button-sm:hover,
[id^="cat-"] .menu-button-new:hover,
[id^="cat-"] .menu-btn:hover {
background: var(--color-primary-50);
color: var(--color-primary-900);
border-color: var(--color-primary-200);
box-shadow: var(--shadow-md);
}
[id^="cat-"] .menu-button:hover::after,
[id^="cat-"] .menu-button-sm:hover::after,
[id^="cat-"] .menu-button-new:hover::after,
[id^="cat-"] .menu-btn:hover::after {
color: var(--color-primary-700);
transform: translateY(-50%) translateX(2px);
}
[id^="cat-"] .menu-button:focus-visible,
[id^="cat-"] .menu-button-sm:focus-visible,
[id^="cat-"] .menu-button-new:focus-visible,
[id^="cat-"] .menu-btn:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
@media (max-width: 640px) {
[id^="cat-"] .menu-grid,
[id^="cat-"] .menu-grid-compact {
grid-template-columns: 1fr;
}
[id^="cat-"] h2 {
font-size: var(--fs-xl);
}
}
.home-cat-card {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-left: 3px solid var(--color-primary-700);
border-radius: var(--r-sm);
padding: var(--s-4);
cursor: pointer;
text-align: left;
transition: all var(--t-base) var(--ease-standard);
color: var(--color-text);
text-decoration: none;
display: block;
}
.home-cat-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--color-border);
text-decoration: none;
}
.hcc-icon { display: none; }
.hcc-name { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.hcc-count { font-size: var(--fs-xs); color: var(--color-text-muted); font-family: var(--font-mono); font-feature-settings: var(--ff-tabular); }
.unit-chip {
display: inline-block;
padding: 2px var(--s-2);
border: 1px solid var(--color-border);
border-radius: var(--r-sm);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--fs-xxs);
font-weight: 600;
cursor: pointer;
margin: 2px;
transition: all var(--t-fast);
}
.unit-chip:hover { background: var(--color-primary-700); color: white; border-color: var(--color-primary-700); }
.unit-chip.uc-alt { background: var(--color-primary-50); color: var(--color-primary-700); }
.hp-search-wrap { margin-bottom: var(--s-4); }
.hp-search-input {
padding: var(--s-2) var(--s-3) var(--s-2) 38px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
}
/* ================================================================
UTILITIES
================================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-mono { font-family: var(--font-mono); font-feature-settings: var(--ff-tabular); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.font-bold { font-weight: 700; }
.font-semi { font-weight: 600; }
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.hidden { display: none !important; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* High contrast */
@media (prefers-contrast: more) {
:root {
--color-border: #000;
--color-border-strong: #000;
--color-text-muted: #333;
--color-text-faint: #666;
--shadow-focus: 0 0 0 3px #000;
}
.btn { border-width: 2px !important; }
.panel, .card { border-width: 2px !important; }
}
/* ================================================================
ACCESSIBILITY
================================================================ */
.skip-link {
position: absolute;
left: 8px;
top: 8px;
background: var(--color-primary-700);
color: white;
padding: var(--s-2) var(--s-4);
border-radius: var(--r-sm);
text-decoration: none;
font-weight: 600;
z-index: var(--z-tooltip);
transform: translateY(-200%);
transition: transform var(--t-fast) var(--ease-standard);
}
.skip-link:focus {
transform: translateY(0);
outline: 2px solid white;
outline-offset: 2px;
}
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
*:focus:not(:focus-visible) { outline: none; }
/* Screen reader only (reuse sr-only) */
/* Aria live region */
.aria-live {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* ================================================================
TOAST NOTIFICATIONS
================================================================ */
.toast-container {
position: fixed;
bottom: var(--s-5);
right: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-2);
z-index: var(--z-toast);
pointer-events: none;
max-width: 380px;
}
@media (max-width: 600px) {
.toast-container { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: none; }
}
.toast {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary-700);
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
box-shadow: var(--shadow-lg);
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: var(--fs-sm);
pointer-events: auto;
opacity: 0;
transform: translateX(20px) scale(0.98);
animation: toast-in var(--t-slow) var(--ease-decelerate) forwards;
min-width: 260px;
}
.toast.closing {
animation: toast-out var(--t-base) var(--ease-accelerate) forwards;
}
@keyframes toast-in {
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
to { opacity: 0; transform: translateX(20px) scale(0.98); }
}
.toast--success { border-left-color: var(--color-success); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--danger { border-left-color: var(--color-danger); }
.toast__icon {
flex-shrink: 0;
width: 18px; height: 18px;
font-weight: 700;
color: var(--color-primary-700);
}
.toast--success .toast__icon { color: var(--color-success); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--danger .toast__icon { color: var(--color-danger); }
.toast__body { flex: 1; color: var(--color-text); }
.toast__title { font-weight: 700; margin-bottom: 2px; }
.toast__close {
background: none;
border: none;
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
transition: color var(--t-fast);
}
.toast__close:hover { color: var(--color-text); }
/* ================================================================
BUTTON RIPPLE
================================================================ */
.btn, .btn-primary, .btn-secondary, .menu-btn, .calc-button {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
border-radius: var(--r-full);
background: rgba(255,255,255,0.35);
transform: scale(0);
animation: ripple-anim 600ms var(--ease-decelerate);
pointer-events: none;
}
@keyframes ripple-anim {
to { transform: scale(3); opacity: 0; }
}
.btn--secondary .ripple, .btn--ghost .ripple { background: rgba(11,61,122,0.18); }
/* ================================================================
COMMAND PALETTE
================================================================ */
.cmdp {
position: fixed;
inset: 0;
background: rgba(11,31,58,0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
z-index: var(--z-modal);
animation: cmdp-bg var(--t-base) var(--ease-standard);
}
@keyframes cmdp-bg { from { opacity: 0; } }
.cmdp__box {
width: min(640px, calc(100vw - 32px));
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
animation: cmdp-box var(--t-slow) var(--ease-decelerate);
max-height: 70vh;
display: flex;
flex-direction: column;
}
@keyframes cmdp-box { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.cmdp__input {
width: 100%;
border: none !important;
box-shadow: none !important;
padding: var(--s-4) var(--s-5) !important;
font-size: var(--fs-lg) !important;
border-bottom: 1px solid var(--color-border-subtle) !important;
border-radius: 0 !important;
}
.cmdp__input:focus { border-color: var(--color-border-subtle) !important; box-shadow: none !important; }
.cmdp__list {
overflow-y: auto;
flex: 1;
padding: var(--s-2) 0;
scrollbar-width: thin;
}
.cmdp__item {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-2) var(--s-5);
cursor: pointer;
transition: background var(--t-fast);
color: var(--color-text);
text-decoration: none;
font-size: var(--fs-sm);
}
.cmdp__item:hover, .cmdp__item.is-active {
background: var(--color-primary-50);
text-decoration: none;
}
.cmdp__item__cat {
font-size: var(--fs-xxs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
font-weight: 700;
margin-left: auto;
}
.cmdp__empty {
padding: var(--s-6);
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.cmdp__hint {
padding: var(--s-2) var(--s-5);
border-top: 1px solid var(--color-border-subtle);
font-size: var(--fs-xs);
color: var(--color-text-muted);
display: flex;
gap: var(--s-4);
justify-content: space-between;
background: var(--color-surface-alt);
}
.cmdp__kbd {
display: inline-block;
padding: 1px 6px;
background: var(--color-surface-3);
border: 1px solid var(--color-border);
border-radius: var(--r-xs);
font-family: var(--font-mono);
font-size: var(--fs-xxs);
margin: 0 2px;
}
/* ================================================================
COPY TO CLIPBOARD feedback
================================================================ */
.copy-btn {
display: inline-flex;
align-items: center;
gap: var(--s-1);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--r-xs);
padding: 2px var(--s-2);
cursor: pointer;
font-size: var(--fs-xxs);
color: var(--color-text-muted);
font-family: var(--font-sans);
transition: all var(--t-fast);
}
.copy-btn:hover {
background: var(--color-primary-50);
color: var(--color-primary-700);
border-color: var(--color-primary-100);
}
.copy-btn.copied {
background: var(--color-success-bg);
color: var(--color-success-text);
border-color: var(--color-success-border);
}
/* ================================================================
ACCORDION
================================================================ */
details.accordion {
border: 1px solid var(--color-border-subtle);
border-radius: var(--r-sm);
margin-bottom: var(--s-2);
background: var(--color-surface);
overflow: hidden;
}
details.accordion[open] { box-shadow: var(--shadow-sm); }
details.accordion > summary {
padding: var(--s-3) var(--s-4);
cursor: pointer;
font-weight: 600;
font-size: var(--fs-sm);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: background var(--t-fast);
}
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary:hover { background: var(--color-surface-alt); }
details.accordion > summary::after {
content: '▸';
color: var(--color-text-muted);
transition: transform var(--t-base) var(--ease-standard);
}
details.accordion[open] > summary::after { transform: rotate(90deg); }
details.accordion > .accordion__body {
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--color-border-subtle);
}
/* ================================================================
TOOL INTRO — card "Come funziona" per pagine tool
================================================================ */
.tool-intro-wrapper {
margin: var(--s-3) 0 var(--s-4);
}
.tool-intro {
background: var(--color-info-bg);
border: 1px solid var(--color-info-border);
border-left: 3px solid var(--color-primary-700);
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
font-size: var(--fs-sm);
line-height: var(--lh-base);
}
.tool-intro[open] { box-shadow: var(--shadow-xs); }
.tool-intro > summary {
list-style: none;
outline: none;
}
.tool-intro > summary::-webkit-details-marker { display: none; }
.tool-intro > summary::after {
content: '▸';
margin-left: auto;
color: var(--color-text-muted);
transition: transform var(--t-base);
}
.tool-intro[open] > summary::after { transform: rotate(90deg); }
.tool-intro__body {
padding-top: var(--s-3);
margin-top: var(--s-2);
border-top: 1px dashed var(--color-border);
color: var(--color-text-2);
}
.tool-intro__body p { margin: var(--s-2) 0; }
.tool-intro__body strong { color: var(--color-text); }
.tool-intro__body ul { margin: var(--s-2) 0 var(--s-2) var(--s-5); }
.tool-intro__body li { margin: 2px 0; font-size: var(--fs-sm); }
/* Help tooltip icon (?) */
.tool-help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px; height: 16px;
border-radius: var(--r-full);
background: var(--color-primary-50);
color: var(--color-primary-700);
font-size: 10px;
font-weight: 700;
font-family: var(--font-sans);
cursor: help;
margin-left: var(--s-1);
border: 1px solid var(--color-primary-100);
user-select: none;
vertical-align: middle;
transition: all var(--t-fast);
}
.tool-help-icon:hover,
.tool-help-icon:focus-visible {
background: var(--color-primary-700);
color: white;
outline: none;
transform: scale(1.1);
}
.tool-help-popover {
position: absolute;
max-width: 320px;
padding: var(--s-3);
background: #111827;
color: #f9fafb;
border-radius: var(--r-sm);
box-shadow: var(--shadow-lg);
font-size: var(--fs-xs);
line-height: 1.5;
z-index: var(--z-tooltip);
animation: help-pop-in 160ms var(--ease-decelerate);
}
@keyframes help-pop-in { from { opacity: 0; transform: translateY(-4px); } }
/* ================================================================
TOOL CTA BLOCK — azioni finali standardizzate
================================================================ */
.tool-cta-block {
background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
border: 1px solid var(--color-border-subtle);
border-left: 3px solid var(--color-primary-700);
}
.tool-cta-block h3 { color: var(--color-primary-700); }
.tool-cta-block [data-cta-status] {
color: var(--color-success-text);
font-weight: 600;
}
/* ================================================================
HP KPI SUMMARY — banner esito automatico
================================================================ */
.hp-kpi-summary {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-sm);
margin-bottom: var(--s-3);
animation: kpi-pop-in 280ms var(--ease-decelerate);
}
@keyframes kpi-pop-in {
from { opacity: 0; transform: translateY(-6px); }
}
.hp-kpi-ok {
background: var(--color-success-bg);
border-left: 3px solid var(--color-success);
}
.hp-kpi-no {
background: var(--color-danger-bg);
border-left: 3px solid var(--color-danger);
}
.hp-kpi-icon {
font-size: 28px;
line-height: 1;
font-weight: 700;
flex-shrink: 0;
}
.hp-kpi-ok .hp-kpi-icon { color: var(--color-success); }
.hp-kpi-no .hp-kpi-icon { color: var(--color-danger); }
.hp-kpi-title {
font-size: var(--fs-md);
font-weight: 700;
color: var(--color-text);
margin-bottom: 2px;
}
.hp-kpi-sub {
font-size: var(--fs-xs);
color: var(--color-text-muted);
}
/* ================================================================
PROJECT BADGE — floating indicator globale
================================================================ */
.hp-project-badge {
position: fixed;
top: var(--s-3);
right: var(--s-3);
display: flex;
align-items: center;
gap: var(--s-2);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-full);
padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3);
box-shadow: var(--shadow-md);
z-index: var(--z-sticky);
font-size: var(--fs-xs);
max-width: 320px;
transition: all var(--t-fast);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
background: rgba(255,255,255,0.92);
}
[data-theme="dark"] .hp-project-badge {
background: rgba(22,27,34,0.92);
}
.hp-project-badge:hover {
box-shadow: var(--shadow-lg);
}
.hp-project-badge[data-mode="project"] {
border-left: 3px solid var(--color-success);
}
.hp-project-badge[data-mode="free"] {
border-left: 3px solid var(--color-warning);
}
.hp-pb-icon { font-size: 18px; }
.hp-pb-body { display: flex; flex-direction: column; min-width: 0; }
.hp-pb-label {
font-size: 9px;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.hp-pb-sub {
font-weight: 600;
color: var(--color-text);
font-size: var(--fs-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.hp-pb-action {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
border-radius: var(--r-sm);
padding: 3px 8px;
font-size: var(--fs-xxs);
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all var(--t-fast);
white-space: nowrap;
}
.hp-pb-action:hover {
background: var(--color-primary-700);
color: white;
border-color: var(--color-primary-700);
}
@media (max-width: 640px) {
.hp-project-badge {
top: auto;
bottom: 70px;
left: var(--s-3);
right: var(--s-3);
max-width: none;
}
.hp-pb-sub { max-width: none; }
}
@media print {
.hp-project-badge { display: none !important; }
}
/* Project picker modal (riuso stile cmdp) */
.hp-pp-item {
padding: var(--s-3);
margin-bottom: var(--s-1);
border-radius: var(--r-sm);
transition: background var(--t-fast);
}
.hp-pp-item:hover {
background: var(--color-primary-50);
}
/* ================================================================
NORMATIVA popover
================================================================ */
.hp-norm-link {
color: var(--color-primary-700);
border-bottom: 1px dotted currentColor;
transition: all var(--t-fast);
}
.hp-norm-link:hover {
background: var(--color-primary-50);
border-bottom-style: solid;
}
.hp-norm-link::after {
content: '⚖';
font-size: 0.75em;
margin-left: 3px;
opacity: 0.6;
}
.hp-norm-popover {
position: absolute;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary-700);
border-radius: var(--r-sm);
padding: var(--s-3) var(--s-4);
padding-right: var(--s-6);
box-shadow: var(--shadow-lg);
z-index: var(--z-tooltip);
font-size: var(--fs-sm);
max-width: 400px;
animation: norm-pop-in var(--t-base) var(--ease-decelerate);
}
@keyframes norm-pop-in {
from { opacity: 0; transform: translateY(-4px); }
}
.hp-norm-close {
position: absolute;
top: var(--s-1);
right: var(--s-2);
background: none;
border: none;
font-size: 18px;
color: var(--color-text-muted);
cursor: pointer;
line-height: 1;
padding: 2px 6px;
border-radius: var(--r-xs);
}
.hp-norm-close:hover { background: var(--color-surface-2); color: var(--color-text); }
/* ================================================================
SVG INTERACTIVE toolbar + fullscreen
================================================================ */
.hp-svg-container {
position: relative;
background: var(--color-surface-alt);
border-radius: var(--r-sm);
padding: var(--s-2);
}
.hp-svg-toolbar {
position: absolute;
top: var(--s-2);
right: var(--s-2);
display: flex;
gap: 2px;
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--r-sm);
padding: 2px;
box-shadow: var(--shadow-xs);
opacity: 0.35;
transition: opacity var(--t-fast);
z-index: 5;
}
.hp-svg-container:hover .hp-svg-toolbar,
.hp-svg-toolbar:focus-within { opacity: 1; }
.hp-svg-btn {
background: transparent;
border: none;
padding: 4px 8px;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
border-radius: var(--r-xs);
min-width: 28px;
line-height: 1;
transition: all var(--t-fast);
}
.hp-svg-btn:hover {
background: var(--color-primary-50);
color: var(--color-primary-700);
}
.hp-svg-btn:active { transform: scale(0.95); }
.hp-svg-fullscreen {
background: var(--color-surface) !important;
padding: var(--s-6) !important;
overflow: auto;
}
.hp-svg-fullscreen svg { max-width: 90vw !important; max-height: 85vh !important; }
@media print {
.hp-svg-toolbar { display: none !important; }
}
/* ================================================================
SMART INPUT feedback
================================================================ */
input.expr-ok {
animation: expr-pulse 0.6s var(--ease-decelerate);
}
@keyframes expr-pulse {
0% { background: var(--color-success-bg); }
100% { background: var(--color-surface); }
}
/* Unit chip clickable hint */
.unit, .unit-chip {
cursor: pointer;
user-select: none;
transition: all var(--t-fast);
}
.unit:hover {
color: var(--color-primary-700);
text-decoration: underline dotted;
text-underline-offset: 2px;
}
/* ================================================================
MATERIAL TUNING — layer visuale Material-like
================================================================ */
:root {
--md-primary: #1e5baa;
--md-on-primary: #ffffff;
--md-primary-container: #d8e7ff;
--md-on-primary-container: #06224a;
--md-secondary-container: #dce7f5;
--md-on-secondary-container: #243447;
--md-tertiary-container: #d9f0e8;
--md-on-tertiary-container: #143d34;
--md-error-container: #f9d8dc;
--md-surface: #e8f0f9; /* tema acqua (era #f8fafc) */
--md-surface-container-low: #eef4fb; /* era #ffffff → fonte del "tutto bianco" */
--md-surface-container: #e0ebf6;
--md-surface-container-high: #d4e3f2;
--md-outline: #c4ccd8;
--md-elevation-1: 0 1px 2px rgba(21,31,45,0.10), 0 1px 3px rgba(21,31,45,0.08);
--md-elevation-2: 0 2px 6px rgba(21,31,45,0.12), 0 6px 16px rgba(21,31,45,0.08);
--md-elevation-3: 0 8px 22px rgba(21,31,45,0.14), 0 2px 6px rgba(21,31,45,0.08);
--md-state-hover: rgba(30,91,170,0.08);
--md-state-focus: rgba(30,91,170,0.16);
}
[data-theme="dark"] {
--md-primary: #9ec5ff;
--md-on-primary: #072c61;
--md-primary-container: #123b75;
--md-on-primary-container: #d7e7ff;
--md-secondary-container: #263445;
--md-on-secondary-container: #d7e3f5;
--md-tertiary-container: #183f37;
--md-on-tertiary-container: #c4efe2;
--md-error-container: #5d1d26;
--md-surface: #0f141b;
--md-surface-container-low: #151b23;
--md-surface-container: #1b232d;
--md-surface-container-high: #24303d;
--md-outline: #4b5665;
--md-state-hover: rgba(158,197,255,0.10);
--md-state-focus: rgba(158,197,255,0.20);
}
body {
background:
radial-gradient(circle at top left, rgba(216,231,255,0.48), transparent 34rem),
var(--md-surface);
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: 0;
}
.main,
.container {
background: transparent;
}
.panel,
.card,
.results-card,
.search-panel,
.catalog-hero-media,
.cmdp__box,
.toast,
dialog,
.hp-norm-popover {
background: var(--md-surface-container-low);
border-color: rgba(124,139,160,0.22);
border-radius: var(--r-md);
box-shadow: var(--md-elevation-1);
}
.panel:hover,
.card:hover,
.results-card:hover,
.cmdp__box:hover {
box-shadow: var(--md-elevation-2);
}
.tool-card,
.catalog-summary__item,
.home-cat-card,
[id^="cat-"] .menu-button,
[id^="cat-"] .menu-button-sm,
[id^="cat-"] .menu-button-new,
[id^="cat-"] .menu-btn,
.db-quick-card,
.db-project-card {
background: var(--md-surface-container-low);
border-color: rgba(124,139,160,0.22);
border-radius: var(--r-md);
box-shadow: var(--md-elevation-1);
}
.tool-card:hover,
.catalog-summary__item:hover,
.home-cat-card:hover,
[id^="cat-"] .menu-button:hover,
[id^="cat-"] .menu-button-sm:hover,
[id^="cat-"] .menu-button-new:hover,
[id^="cat-"] .menu-btn:hover,
.db-quick-card:hover,
.db-project-card:hover {
background: color-mix(in srgb, var(--md-primary-container) 28%, var(--md-surface-container-low));
border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline));
box-shadow: var(--md-elevation-2);
}
.catalog-summary__item {
min-height: 52px;
}
.search-panel {
padding: var(--s-4);
}
.search-panel__label,
.search-results__label,
.recenti__label {
letter-spacing: 0;
}
.tool-card {
min-height: 78px;
}
.tool-card__name {
font-size: var(--fs-md);
}
.catalog-hero-media {
box-shadow: var(--md-elevation-2);
}
.tool-card::after,
[id^="cat-"] .menu-button::after,
[id^="cat-"] .menu-button-sm::after,
[id^="cat-"] .menu-button-new::after,
[id^="cat-"] .menu-btn::after {
color: color-mix(in srgb, var(--md-primary) 62%, var(--color-text-muted));
}
.btn,
.btn-primary,
.btn-secondary,
.btn-back,
.calc-button,
.menu-button,
.menu-button-sm,
.menu-button-new,
.menu-btn,
button.nav-item {
border-radius: var(--r-full);
min-height: 40px;
font-weight: 500; /* MD3 label-large */
letter-spacing: 0.1px;
}
.btn--primary,
.btn-primary,
.calc-button {
background: var(--md-primary);
color: var(--md-on-primary);
border-color: var(--md-primary);
box-shadow: var(--md-elevation-1);
}
.btn--primary:hover:not(:disabled),
.btn-primary:hover,
.calc-button:hover {
background: color-mix(in srgb, var(--md-primary) 90%, #000000);
border-color: color-mix(in srgb, var(--md-primary) 90%, #000000);
box-shadow: var(--md-elevation-2);
}
.btn--secondary,
.btn-secondary,
.btn-back,
.back-button {
background: transparent;
color: var(--md-primary);
border-color: var(--md-outline);
box-shadow: none;
}
.btn--secondary:hover:not(:disabled),
.btn-secondary:hover,
.btn-back:hover,
.back-button:hover {
background: var(--md-state-hover);
color: var(--md-primary);
border-color: var(--md-primary);
}
.btn--ghost:hover:not(:disabled),
.chip:hover,
.nav-item:hover,
.db-history-item:hover {
background: var(--md-state-hover);
}
.field__input,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
background: var(--md-surface-container);
border-color: transparent;
border-bottom-color: var(--md-outline);
border-radius: var(--r-sm) var(--r-sm) 0 0;
box-shadow: none;
}
.field__input:focus,
input:focus,
select:focus,
textarea:focus {
background: var(--md-surface-container-low);
border-color: transparent;
border-bottom-color: var(--md-primary);
box-shadow: inset 0 -2px 0 var(--md-primary), 0 0 0 3px var(--md-state-focus);
}
.mode-selector,
.tabs {
background: var(--md-secondary-container);
border: none;
border-radius: var(--r-full);
padding: 4px;
}
.mode-button,
.tab {
border-radius: var(--r-full);
}
.mode-button.active,
.tab--active {
background: var(--md-surface-container-low);
color: var(--md-primary);
box-shadow: var(--md-elevation-1);
border-bottom-color: transparent;
}
.tag,
.chip,
.nav-item__badge,
.db-quick-card__count {
background: var(--md-secondary-container);
color: var(--md-on-secondary-container);
border-color: transparent;
}
.info-box,
.tool-intro,
.formula-block,
.note-box {
background: color-mix(in srgb, var(--md-primary-container) 58%, var(--md-surface-container-low));
border-color: color-mix(in srgb, var(--md-primary) 42%, var(--md-primary-container));
color: var(--md-on-primary-container);
border-radius: var(--r-md);
}
.data-table {
border-radius: var(--r-md);
box-shadow: var(--md-elevation-1);
}
.data-table th {
background: var(--md-surface-container-high);
color: var(--color-text);
}
.data-table tbody tr:hover td {
background: var(--md-state-hover);
}
.hp-project-badge {
border-color: rgba(124,139,160,0.22);
box-shadow: var(--md-elevation-2);
background: color-mix(in srgb, var(--md-surface-container-low) 92%, transparent);
}
.hp-svg-container,
.diagram,
canvas {
background: var(--md-surface-container);
border-color: rgba(124,139,160,0.22);
border-radius: var(--r-md);
}
/* ---- MD3 componenti tipizzati: tonal / text / elevated / dialog ---- */
/* Filled-tonal button (MD3) */
.btn--tonal {
background: var(--md-secondary-container);
color: var(--md-on-secondary-container);
border-color: transparent;
box-shadow: none;
}
.btn--tonal:hover:not(:disabled) {
background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container));
border-color: transparent;
color: var(--md-on-secondary-container);
box-shadow: var(--md-elevation-1);
}
/* Text button (MD3): nessun fill, label primary, state-layer su hover */
.btn--ghost {
color: var(--md-primary);
}
/* Elevated card (MD3) */
.card--elevated {
background: var(--md-surface-container-low);
box-shadow: var(--md-elevation-2);
border-color: transparent;
}
.card--elevated:hover {
box-shadow: var(--md-elevation-3);
}
/* Outlined card (MD3) */
.card--outlined {
background: var(--md-surface-container-low);
box-shadow: none;
border: 1px solid var(--md-outline);
}
/* Dialog / paywall: corner extra-large MD3 (28px) + elevazione 3 */
dialog,
.cmdp__box,
.hp-paywall {
border-radius: var(--r-2xl);
}
dialog,
.hp-paywall {
box-shadow: var(--md-elevation-3);
}
@media print {
body {
background: white !important;
}
}
/* ================================================================
VISUAL UPGRADE v30 — dashboard-grade modernizzazione
================================================================ */
:root {
--hp-accent-blue: #1e5baa;
--hp-accent-teal: #0f766e;
--hp-accent-amber: #c47a15;
--hp-hero-ink: #07182f;
--hp-hero-muted: #4b5d73;
}
.app {
background:
linear-gradient(180deg, rgba(248,250,252,0.96), rgba(241,245,249,0.96)),
var(--md-surface);
}
.sidebar {
background:
linear-gradient(180deg, rgba(8,26,52,0.98), rgba(9,39,75,0.98)),
var(--color-primary-900);
box-shadow: 10px 0 30px rgba(7,24,47,0.14);
}
.sidebar__brand {
min-height: 48px;
border-radius: var(--r-md);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
}
.nav-item {
min-height: 38px;
}
.nav-item__badge {
min-width: 28px;
text-align: center;
}
.catalog-hero {
position: relative;
align-items: stretch;
min-height: 320px;
margin-bottom: var(--s-5);
padding: clamp(24px, 4vw, 44px);
overflow: hidden;
background:
linear-gradient(90deg, rgba(238,244,251,0.96) 0%, rgba(224,235,246,0.90) 42%, rgba(212,227,242,0.62) 64%, rgba(212,227,242,0.18) 100%),
var(--md-surface-container-low);
border: 1px solid rgba(124,139,160,0.22);
border-radius: var(--r-lg);
box-shadow: var(--md-elevation-3);
}
.catalog-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(30,91,170,0.10), transparent 46%),
repeating-linear-gradient(90deg, rgba(30,91,170,0.035) 0 1px, transparent 1px 72px);
opacity: 0.7;
}
.catalog-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 560px;
min-width: 0;
}
.catalog-hero__eyebrow {
width: fit-content;
margin-bottom: var(--s-3);
padding: 6px 10px;
color: var(--hp-accent-blue);
background: color-mix(in srgb, var(--md-primary-container) 72%, white);
border: 1px solid color-mix(in srgb, var(--hp-accent-blue) 18%, transparent);
border-radius: var(--r-full);
font-size: var(--fs-xs);
font-weight: 800;
text-transform: uppercase;
}
.catalog-hero h1 {
margin: 0 0 var(--s-2);
color: var(--hp-hero-ink);
font-size: clamp(34px, 5vw, 58px);
line-height: 0.98;
}
.catalog-hero .subtitle {
max-width: 520px;
color: var(--hp-hero-muted);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
}
.catalog-hero__metrics {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: var(--s-5) 0 var(--s-4);
}
.catalog-hero__metrics span {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 6px 12px;
color: var(--color-text);
background: rgba(247,251,255,0.82);
border: 1px solid rgba(124,139,160,0.22);
border-radius: var(--r-full);
box-shadow: var(--md-elevation-1);
font-size: var(--fs-sm);
}
.catalog-hero__metrics strong {
color: var(--hp-accent-blue);
font-family: var(--font-mono);
}
.catalog-hero .page-header__actions {
margin-top: 0;
}
.catalog-hero-media {
position: absolute;
inset: 0 0 0 auto;
z-index: 1;
width: min(58%, 720px);
max-width: none;
min-width: 460px;
height: 100%;
aspect-ratio: auto;
border: none;
border-radius: 0;
box-shadow: none;
}
.catalog-hero-media img {
object-position: 70% 50%;
}
.catalog-summary {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.catalog-summary__item {
position: relative;
min-height: 62px;
padding-left: 44px;
overflow: hidden;
}
.catalog-summary__item::before,
.tool-card::before {
position: absolute;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--r-full);
color: var(--md-primary);
background: color-mix(in srgb, var(--md-primary-container) 70%, white);
box-shadow: inset 0 0 0 1px rgba(30,91,170,0.12);
font-size: 14px;
font-weight: 800;
}
.catalog-summary__item::before {
content: "•";
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.catalog-summary__item.tc--invarianza::before { content: "I"; }
.catalog-summary__item.tc--idrologia::before { content: "P"; }
.catalog-summary__item.tc--canali::before { content: "C"; }
.catalog-summary__item.tc--reti::before { content: "R"; }
.catalog-summary__item.tc--impianti::before { content: "M"; }
.catalog-summary__item.tc--strutt::before { content: "S"; }
.catalog-summary__item.tc--wizard::before { content: "W"; }
.catalog-summary__item.tc--export::before { content: "E"; }
.search-panel {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
}
.search-panel .search {
margin: 0;
min-height: 48px;
font-size: var(--fs-md);
}
.tool-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tool-card {
min-height: 96px;
padding: var(--s-4) var(--s-5) var(--s-4) 52px;
border-left-width: 0;
}
.tool-card::before {
content: "H";
left: var(--s-4);
top: var(--s-4);
}
.tool-card.tc--canali::before { content: "C"; color: var(--cat-canali); }
.tool-card.tc--manufatti::before { content: "M"; color: var(--cat-manufatti); }
.tool-card.tc--reti::before { content: "R"; color: var(--cat-reti); }
.tool-card.tc--idrologia::before { content: "P"; color: var(--cat-idrologia); }
.tool-card.tc--invarianza::before { content: "I"; color: var(--cat-invarianza); }
.tool-card.tc--utilita::before { content: "U"; color: var(--cat-utilita); }
.tool-card.tc--irrigaz::before { content: "A"; color: var(--cat-irrigaz); }
.tool-card.tc--impianti::before { content: "M"; color: var(--cat-impianti); }
.tool-card.tc--strutt::before { content: "S"; color: var(--cat-strutt); }
.tool-card.tc--geotec::before { content: "G"; color: var(--cat-geotec); }
.tool-card.tc--wizard::before { content: "W"; color: var(--cat-wizard); }
.tool-card.tc--export::before { content: "E"; color: var(--cat-export); }
.tool-card__hint {
margin-top: 4px;
font-family: var(--font-sans);
line-height: var(--lh-snug);
}
.cat-section {
padding-top: var(--s-2);
}
.cat-section h2 {
position: sticky;
top: var(--s-3);
z-index: 3;
min-height: 54px;
padding: var(--s-3) var(--s-4);
background: color-mix(in srgb, var(--md-surface) 97%, white);
border: 1px solid var(--color-border-strong);
border-left: 4px solid var(--color-primary-700);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.cat-section__count {
margin-left: auto;
padding: 4px 9px;
background: var(--md-secondary-container);
border-radius: var(--r-full);
}
@media (max-width: 980px) {
.catalog-hero {
min-height: 0;
padding: var(--s-5);
background: var(--md-surface-container-low);
}
.catalog-hero::after { opacity: 0.35; }
.catalog-hero-media {
position: relative;
inset: auto;
width: 100%;
min-width: 0;
height: auto;
aspect-ratio: 16 / 9;
margin-top: var(--s-5);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--md-elevation-2);
}
.search-panel {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.catalog-hero h1 {
font-size: 40px;
}
.catalog-hero .subtitle {
font-size: var(--fs-md);
}
.tool-grid {
grid-template-columns: 1fr;
}
.cat-section h2 {
position: static;
}
}
@media (prefers-reduced-motion: no-preference) {
.catalog-hero-media img {
transition: transform 700ms var(--ease-standard);
}
.catalog-hero:hover .catalog-hero-media img {
transform: scale(1.025);
}
}
/* ══ FASE 2: macro-aree (raggruppamento tool, MASTERPLAN §5) ════════════ */
.macro-area{ margin: var(--s-8) 0 var(--s-6); }
.macro-area__head{ display:flex; align-items:center; gap:var(--s-3); width:100%;
background:var(--color-surface-2); border:1px solid var(--color-border);
border-radius:var(--r-lg); padding:var(--s-4) var(--s-5); cursor:pointer;
font:inherit; color:var(--color-text); text-align:left; transition:background .15s ease; }
.macro-area__head:hover{ background:var(--color-surface-3); }
/* ── Colore distinto per macro-area (default navy, override per id) ── */
.macro-area{ --macro-color: var(--color-primary-700); }
#macro-pelo-libero { --macro-color:#1565c0; } /* blu — pelo libero */
#macro-reti-pressione { --macro-color:#c2410c; } /* arancio — reti/pompe */
#macro-idrologia-drenaggio{ --macro-color:#0f766e; } /* teal — idrologia */
#macro-invarianza-drenaggio{ --macro-color:#7e22ce; } /* viola — invarianza */
#macro-strumenti { --macro-color:#475569; } /* ardesia — strumenti */
.macro-area__head{ border-left:5px solid var(--macro-color);
background:color-mix(in srgb, var(--macro-color) 6%, var(--color-surface-2)); }
.macro-area__head:hover{ background:color-mix(in srgb, var(--macro-color) 11%, var(--color-surface-2)); }
.macro-area__title{ color:var(--macro-color); }
.macro-area__tier{ background:var(--macro-color); }
.macro-area__count{ color:var(--macro-color);
background:color-mix(in srgb, var(--macro-color) 13%, transparent); }
.macro-area__chevron{ color:var(--macro-color); }
/* sezioni: bullet colorato col colore della macro che le contiene */
.macro-area .cat-section > h2{ border-left:3px solid color-mix(in srgb, var(--macro-color) 55%, transparent);
padding-left:var(--s-3); }
.macro-area__icon{ font-size:1.7rem; line-height:1; flex:none;
background:color-mix(in srgb, var(--macro-color) 12%, transparent); border-radius:50%;
width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center; }
.macro-area__headtext{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.macro-area__title{ font-size:1.22rem; font-weight:700; display:flex; align-items:center; gap:var(--s-3); }
.macro-area__desc{ font-size:.82rem; font-weight:400; color:var(--color-text-muted); line-height:1.35; }
.macro-area__tier{ font-size:.62rem; font-weight:700; letter-spacing:.05em; padding:2px 8px;
border-radius:var(--r-full); background:var(--color-primary-700); color:var(--color-text-inverse); }
.macro-area__count{ font-size:.8rem; color:var(--color-text-muted); font-variant-numeric:tabular-nums; flex:none;
background:var(--color-surface-3); border-radius:var(--r-full); padding:3px 10px; }
@media (max-width:600px){ .macro-area__desc{ display:none; } }
.macro-area__chevron{ transition:transform .2s ease; color:var(--color-text-muted); }
.macro-area--collapsed .macro-area__chevron{ transform:rotate(-90deg); }
.macro-area--collapsed .macro-area__body{ display:none; }
/* Stato di partenza: la home apre con TUTTE le aree chiuse. Lo stato chiuso sta
nel CSS (marcatore positivo .macro-area--open messo dal JS) cosi' il catalogo
non compare aperto per un istante prima di initCatalogNavigation(). */
.catalog-home .macro-area:not(.macro-area--open) .macro-area__body{ display:none; }
.catalog-home .macro-area:not(.macro-area--open) .macro-area__chevron{ transform:rotate(-90deg); }
.macro-area__body{ padding-top:var(--s-4); }
.sidebar__title--macro{ display:flex; align-items:center; gap:var(--s-2); text-decoration:none;
color:var(--color-text); font-weight:700; }
.sidebar__title--macro:hover{ color:var(--color-primary-700); }
.sidebar__tier{ font-size:.55rem; font-weight:700; padding:1px 6px; border-radius:var(--r-full);
background:var(--color-primary-700); color:var(--color-text-inverse); letter-spacing:.04em; }
@media print{ .macro-area__head{ background:none; border:0; }
.macro-area--collapsed .macro-area__body,
.catalog-home .macro-area:not(.macro-area--open) .macro-area__body{ display:block; }
.catalog-home .cat-section:not(.cat-section--open) .tool-grid{ display:block; } }
/* ══ SIDEBAR CHIARA (tema più leggero, 2026-06-18) — solo tema default ═══
Converte la sidebar da navy scuro a superficie chiara con accenti navy.
La dark-mode ([data-theme="dark"]) resta scura grazie alle regole dedicate. */
html:not([data-theme="dark"]) .sidebar{
background:#f4f7fb; color:var(--color-text);
border-right:1px solid var(--color-border);
box-shadow:2px 0 12px rgba(11,35,64,0.05);
scrollbar-color:rgba(11,35,64,0.18) transparent;
}
html:not([data-theme="dark"]) .sidebar::-webkit-scrollbar-thumb{ background:rgba(11,35,64,0.18); }
html:not([data-theme="dark"]) .sidebar__brand{
color:var(--color-primary-700); background:#ffffff; border:1px solid var(--color-border-subtle);
}
html:not([data-theme="dark"]) .sidebar__title{ color:var(--color-text-muted); }
html:not([data-theme="dark"]) .sidebar .nav-item{ color:#3f5168; }
html:not([data-theme="dark"]) .sidebar .nav-item:hover{ background:var(--color-primary-50); color:var(--color-primary-700); }
html:not([data-theme="dark"]) .sidebar .nav-item--active{ background:var(--color-primary-700); color:#fff; }
html:not([data-theme="dark"]) .sidebar .nav-item__badge{ color:var(--color-primary-700); background:rgba(11,61,122,0.08); }
html:not([data-theme="dark"]) .sidebar__footer{ border-top:1px solid var(--color-border); }
html:not([data-theme="dark"]) .sidebar__title--macro{ color:var(--color-text); }
/* ══ BOTTONI più chiari / minor contrasto (2026-06-18) ════════════════
I bottoni d'azione e i menu usavano navy molto scuro (#0b3d7a / #1e5baa).
Alleggeriti a un blu più morbido, contrasto ridotto ma testo leggibile. */
html:not([data-theme="dark"]) .calc-button,
html:not([data-theme="dark"]) .btn--primary,
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .menu-button,
html:not([data-theme="dark"]) .menu-button-sm,
html:not([data-theme="dark"]) .menu-button-new,
html:not([data-theme="dark"]) .menu-btn{
background:#3b82f6; border-color:#3b82f6; color:#fff;
box-shadow:0 1px 2px rgba(37,99,235,0.18);
}
html:not([data-theme="dark"]) .calc-button:hover:not(:disabled),
html:not([data-theme="dark"]) .btn--primary:hover:not(:disabled),
html:not([data-theme="dark"]) .btn-primary:hover,
html:not([data-theme="dark"]) .menu-button:hover,
html:not([data-theme="dark"]) .menu-button-sm:hover,
html:not([data-theme="dark"]) .menu-button-new:hover,
html:not([data-theme="dark"]) .menu-btn:hover{
background:#2f6fe0; border-color:#2f6fe0;
}
/* ══ FASE 4: Material Design 3 polish (Q3 = token MD3 vanilla) ══════════ */
/* Transizioni elevation + feedback press coerenti (state layers MD3). */
.tool-card, .btn, .nav-item, .macro-area__head, .catalog-summary__item, .card, .panel {
transition: box-shadow .18s cubic-bezier(.2,0,0,1), transform .12s cubic-bezier(.2,0,0,1),
background-color .15s ease, border-color .15s ease;
}
.tool-card:active, .catalog-summary__item:active { transform: scale(.985); }
.btn:active:not(:disabled) { transform: scale(.97); }
/* Focus-visible ring uniforme (a11y MD3) */
.tool-card:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.macro-area__head:focus-visible, .catalog-summary__item:focus-visible,
.field__input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none; box-shadow: var(--shadow-focus);
}
/* Card hover = elevation +1 (MD3 surface tint) */
.tool-card:hover { box-shadow: var(--shadow-md); }
/* ══ HOME RAZIONALIZZATA: area → gruppo → tool (2026-07-13) ══ */
.catalog-home .main { max-width: 1440px; }
.catalog-home .catalog-hero { min-height: 300px; margin-bottom: var(--s-5); }
.catalog-home .catalog-hero__content { max-width: 600px; }
.catalog-home .sidebar__section { margin-bottom: var(--s-2); }
.catalog-home .sidebar__section .nav-item { display: none; }
.catalog-home .sidebar__title--macro {
min-height: 44px; padding: var(--s-3); border-radius: var(--r-md);
line-height: 1.25;
}
.catalog-home .sidebar__title--macro:hover { background: var(--color-primary-50); }
.catalog-start {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
margin: var(--s-2) 0 var(--s-3); color: var(--color-text-muted);
}
.catalog-start > div, .search-panel__label { display: flex; align-items: center; gap: var(--s-3); }
.catalog-start strong, .search-panel__label strong { display: block; color: var(--color-text); font-size: var(--fs-lg); }
.catalog-start span:not(.catalog-start__step), .search-panel__label small { display: block; margin-top: 2px; font-weight: 400; }
.catalog-start__step {
display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px;
border-radius: 50%; background: var(--color-primary-700); color: white;
font: 700 var(--fs-md)/1 var(--font-mono);
}
.catalog-start__hint { font-size: var(--fs-sm); }
.catalog-home .catalog-summary {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3);
margin-bottom: var(--s-5);
}
.catalog-home .catalog-summary__item {
min-height: 112px; padding: var(--s-5) var(--s-4) var(--s-4) 52px;
align-content: center; border: 1px solid var(--color-border-strong);
border-top: 4px solid var(--color-primary-700); background: rgba(255,255,255,.72);
}
.catalog-home .catalog-summary__item strong { line-height: 1.25; }
.catalog-home .catalog-summary__item > span {
position: absolute; right: var(--s-3); bottom: var(--s-3);
min-width: 28px; padding: 3px 8px; border-radius: var(--r-full);
background: var(--color-surface-3); text-align: center; font: 700 var(--fs-xs)/1.2 var(--font-mono);
}
.catalog-home .search-panel {
position: sticky; top: var(--s-3); z-index: 8;
grid-template-columns: minmax(210px, .42fr) minmax(300px, 1fr);
margin-bottom: var(--s-5); padding: var(--s-4);
border: 1px solid var(--color-border-strong); border-radius: var(--r-lg);
background: rgba(248,251,255,.94); box-shadow: var(--shadow-md); backdrop-filter: blur(14px);
}
.catalog-home .search-panel__label { margin: 0; }
.catalog-home .search-panel__label small { color: var(--color-text-muted); }
.catalog-home .macro-area { margin: 0 0 var(--s-3); scroll-margin-top: 90px; }
.catalog-home .macro-area__head { min-height: 76px; }
.catalog-home .macro-area__body { padding: var(--s-3) 0 var(--s-2) var(--s-6); }
.catalog-home .cat-section { padding: 0; margin: 0 0 var(--s-2); scroll-margin-top: 92px; }
.catalog-home .cat-section h2 {
position: static; min-height: 58px; margin: 0; cursor: pointer; user-select: none;
border-left-color: var(--macro-color); background: rgba(255,255,255,.68);
}
.catalog-home .cat-section h2::after {
content: '▾'; margin-left: var(--s-2); color: var(--macro-color);
transition: transform .18s ease;
}
.catalog-home .cat-section--collapsed h2::after { transform: rotate(-90deg); }
.catalog-home .cat-section--collapsed .tool-grid { display: none; }
.catalog-home .cat-section:not(.cat-section--open) .tool-grid { display: none; }
.catalog-home .cat-section:not(.cat-section--open) h2::after { transform: rotate(-90deg); }
.catalog-home .cat-section .tool-grid { margin: var(--s-3) 0 var(--s-5); }
.catalog-home .tool-card { min-height: 82px; }
.catalog-home.catalog-searching .macro-area,
.catalog-home.catalog-searching .recenti { display: none !important; }
.catalog-home #hp-search-results { scroll-margin-top: 100px; }
@media (max-width: 1120px) {
.catalog-home .catalog-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.catalog-home .catalog-hero { min-height: 0; }
.catalog-start { align-items: flex-start; }
.catalog-start__hint { display: none !important; }
.catalog-home .catalog-summary { grid-template-columns: 1fr 1fr; }
.catalog-home .catalog-summary__item { min-height: 96px; }
.catalog-home .search-panel { position: static; grid-template-columns: 1fr; }
.catalog-home .macro-area__body { padding-left: var(--s-2); }
}
@media (max-width: 480px) {
.catalog-home .catalog-summary { grid-template-columns: 1fr; }
.catalog-home .catalog-summary__item { min-height: 76px; }
}
/* ══ HOME MINIMA + IMPOSTAZIONI COERENTI (v103) ══ */
.catalog-home .catalog-hero {
min-height: 270px; margin-bottom: var(--s-5); display: flex; align-items: center;
}
.catalog-home .catalog-hero__content--minimal { max-width: 560px; }
.catalog-home .catalog-hero__content--minimal h1 { margin: 0; font-size: clamp(3rem, 6vw, 5rem); }
.catalog-home .search-panel--simple {
grid-template-columns: 190px minmax(300px, 1fr); margin-bottom: var(--s-5);
}
.catalog-home .search-panel--simple .search-panel__label {
display: block; color: var(--color-text); font-size: var(--fs-md); font-weight: 700;
}
.catalog-home .macro-area { display: block; }
.catalog-home.catalog-searching .macro-area { display: none; }
.settings-page .sidebar__section { display: grid; gap: var(--s-2); }
.settings-page .sidebar__brand { text-decoration: none; }
.settings-page .sidebar__title--macro {
min-height: 44px; padding: var(--s-3); border-radius: var(--r-md); line-height: 1.25;
}
.settings-page .sidebar__title--macro:hover { background: var(--color-primary-50); }
.settings-main { max-width: 1040px; }
.settings-header { align-items: center; }
.settings-card { max-width: 760px; padding: var(--s-6); }
.settings-card h2 { margin-top: 0; }
.settings-card__intro { color: var(--color-text-muted); }
.settings-language { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0; }
.settings-language label {
display: flex; align-items: center; gap: var(--s-3); min-width: 180px; padding: var(--s-4);
border: 1px solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface);
cursor: pointer;
}
.settings-language input { width: 18px; height: 18px; }
.settings-preview { padding: var(--s-4); border-radius: var(--r-md); background: var(--color-primary-50); }
.settings-preview[hidden], .settings-saved[hidden] { display: none; }
.settings-saved { margin-top: var(--s-3); color: #137333; font-weight: 600; }
@media (max-width: 760px) {
.catalog-home .catalog-hero { min-height: 220px; }
.catalog-home .catalog-hero__content--minimal h1 { font-size: 2.75rem; }
.catalog-home .search-panel--simple { grid-template-columns: 1fr; }
.settings-card { padding: var(--s-4); }
}
/* ══ ABOUT COERENTE + TITOLI GRUPPI COMPATTI (v104) ══ */
.catalog-home .macro-area__desc { display: none; }
.catalog-home .cat-section h2 {
min-height: 50px; padding: var(--s-3) var(--s-4);
font-size: 1rem !important; line-height: 1.3; font-weight: 650;
}
.catalog-home .cat-section__count { font-size: var(--fs-xs); font-weight: 600; }
.info-page .sidebar__section { display: grid; gap: var(--s-2); }
.info-page .sidebar__brand { text-decoration: none; }
.info-page .sidebar__title--macro {
min-height: 44px; padding: var(--s-3); border-radius: var(--r-md); line-height: 1.25;
}
.info-page .sidebar__title--macro:hover { background: var(--color-primary-50); }
.info-main { max-width: 1040px; }
.info-card { padding: var(--s-7); }
.info-card h2 { margin-top: var(--s-7); font-size: var(--fs-xl); }
.info-card p, .info-card li { line-height: 1.7; }
.info-lead { margin-top: 0; font-size: var(--fs-lg); color: var(--color-text-muted); }
@media (max-width: 760px) {
.catalog-home .cat-section h2 { font-size: .95rem !important; }
.info-card { padding: var(--s-4); }
}
/* ══ NAVIGAZIONE VERSIONATA + TESTI UNIFORMI (v105) ══ */
.hp-project-badge { display: none !important; }
.settings-page .page-header h1,
.info-page .page-header h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.025em; }
.settings-page .subtitle,
.info-page .subtitle { color: var(--color-text-muted); font-size: var(--fs-md); }
.info-card h2 { font-size: 1.15rem; color: var(--color-primary-700); }
.info-card strong { color: var(--color-text); }
.settings-page .sidebar__footer .nav-item,
.info-page .sidebar__footer .nav-item { font-weight: 600; }
/* ══ TEMA FISSO + SIDEBAR A FISARMONICA (v106) ══ */
#theme-toggle, #hp-theme-toggle, [onclick*="toggleTheme"], [onclick*="hpToggleTheme"] { display: none !important; }
.sidebar__section .nav-item { display: none; }
.sidebar__section--open .nav-item { display: flex !important; }
.sidebar__title--macro::after {
content: '›'; margin-left: auto; font-size: 1.05rem; color: var(--color-text-muted);
transition: transform .18s ease;
}
.sidebar__section--open .sidebar__title--macro::after { transform: rotate(90deg); }
.sidebar__section--open { padding-bottom: var(--s-2); }
.sidebar__section--open .nav-item { margin-left: var(--s-2); font-size: .8rem; line-height: 1.25; }
/* ══ SUITE STRUMENTI INTEGRATE (v111) ══ */
.suite-shell{max-width:1380px;margin:0 auto}.suite-header{align-items:center}.suite-kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary-700);margin-bottom:var(--s-2)}
.suite-module-label{margin:var(--s-5) 0 var(--s-2);font-weight:700;color:var(--color-text-muted);font-size:var(--fs-sm)}.suite-tabs{display:flex;gap:var(--s-2);overflow-x:auto;padding:0 0 var(--s-3);scrollbar-width:thin}.suite-tab{flex:0 0 auto;padding:10px 15px;border:1px solid var(--color-border-strong);border-radius:var(--r-full);background:rgba(255,255,255,.78);color:var(--color-text);font:600 var(--fs-sm)/1.2 var(--font-sans);cursor:pointer}.suite-tab:hover{background:var(--color-primary-50);border-color:var(--color-primary-300)}.suite-tab.is-active{background:var(--color-primary-700);border-color:var(--color-primary-700);color:#fff}
.suite-workspace{overflow:hidden;border:1px solid var(--color-border-strong);border-radius:var(--r-lg);background:var(--color-surface);box-shadow:var(--shadow-md)}.suite-workspace__bar{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.suite-workspace__bar span{font-size:var(--fs-xs);color:var(--color-text-muted)}#suite-frame{display:block;width:100%;min-height:760px;border:0;background:#dde9f4}
body.hp-suite-embedded>.mobile-header,body.hp-suite-embedded .sidebar,body.hp-suite-embedded>.skip-link{display:none!important}body.hp-suite-embedded .app{display:block!important}body.hp-suite-embedded .main{width:100%!important;max-width:none!important;margin:0!important;padding:var(--s-3)!important}body.hp-suite-embedded .hp-project-badge{display:none!important}@media(max-width:760px){.suite-header{align-items:flex-start}.suite-workspace__bar span{display:none}.suite-tab{padding:9px 12px}.suite-page .main{padding:var(--s-3)}}
/* ══ NAVIGAZIONE E CONTENUTI UNIFICATI (v113) ══ */
.catalog-home .catalog-hero{position:relative;display:grid;place-items:center;min-height:310px;padding:0;overflow:hidden;background:#0b315d}
.catalog-home .catalog-hero-media{position:absolute;inset:0;z-index:0;width:100%;min-width:0;height:100%}
.catalog-home .catalog-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 51%}
.catalog-home .catalog-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,30,58,.62),rgba(11,61,122,.25),rgba(5,30,58,.62))}
.catalog-home .catalog-hero__content--minimal{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;width:100%;max-width:none;text-align:center}
.catalog-home .catalog-hero__content--minimal h1{margin:0;color:#fff;font-size:clamp(3rem,7vw,5.8rem);font-weight:750;line-height:1;letter-spacing:-.055em;text-shadow:0 3px 24px rgba(0,20,45,.55)}
.sidebar__section{--side-accent:#1565c0}
.sidebar__section:nth-of-type(2){--side-accent:#c2410c}.sidebar__section:nth-of-type(3){--side-accent:#0f766e}.sidebar__section:nth-of-type(4){--side-accent:#7e22ce}.sidebar__section:nth-of-type(5){--side-accent:#475569}
.sidebar .sidebar__title--macro{min-height:50px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--side-accent) 24%,var(--color-border));border-left:4px solid var(--side-accent);border-radius:var(--r-md);background:color-mix(in srgb,var(--side-accent) 8%,#fff);color:var(--color-text);font:700 .9rem/1.3 var(--font-sans)}
.sidebar .sidebar__title--macro:hover,.sidebar__section--open .sidebar__title--macro{background:color-mix(in srgb,var(--side-accent) 14%,#fff);color:color-mix(in srgb,var(--side-accent) 82%,#111827)}
.sidebar__section--open{padding-bottom:var(--s-2)}
.sidebar__section--open .nav-item{min-height:42px;margin:5px 0 0 8px;padding:9px 10px;border-left:2px solid color-mix(in srgb,var(--side-accent) 35%,transparent);border-radius:0 var(--r-md) var(--r-md) 0;background:rgba(255,255,255,.42);font:600 .88rem/1.35 var(--font-sans)}
.sidebar__footer .nav-item{font:600 .88rem/1.35 var(--font-sans)}
.catalog-home .macro-area__head{min-height:68px;padding:12px 16px;border-radius:var(--r-md)}
.catalog-home .macro-area__icon{font-size:1.75rem}.catalog-home .macro-area__title{font-size:1rem;line-height:1.3}
.catalog-home .cat-section h2{min-height:46px;padding:11px 14px;border-radius:var(--r-md);font:650 .9rem/1.35 var(--font-sans)!important}
.suite-tab{border-radius:var(--r-md);font:650 .88rem/1.3 var(--font-sans)}
.info-page .info-main{max-width:1080px}.info-page .info-card{position:relative;overflow:hidden}
.info-page .info-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#1565c0,#0f766e,#7e22ce)}
.info-eyebrow{margin:0 0 var(--s-2);color:var(--color-primary-700);font:700 var(--fs-xs)/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.info-page .info-lead{margin-bottom:var(--s-3);color:var(--color-text);font-size:clamp(1.45rem,3vw,2.1rem);font-weight:700;line-height:1.2;letter-spacing:-.025em}
.info-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:var(--s-6) 0;padding:var(--s-4);border:1px solid var(--color-border-strong);border-radius:var(--r-lg);background:var(--color-surface-2)}
.info-metrics div{display:grid;gap:4px;text-align:center}.info-metrics strong{color:var(--color-primary-700);font:700 1.8rem/1 var(--font-mono)}.info-metrics span{color:var(--color-text-muted);font-size:var(--fs-sm)}
.info-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);padding:0;list-style:none}.info-feature-list li{padding:var(--s-4);border:1px solid var(--color-border);border-radius:var(--r-md);background:rgba(255,255,255,.56)}
@media(max-width:760px){.catalog-home .catalog-hero{min-height:230px}.catalog-home .catalog-hero__content--minimal h1{font-size:clamp(2.5rem,13vw,4rem)}.info-metrics,.info-feature-list{grid-template-columns:1fr}.info-card{padding:var(--s-4)}}
/* ================================================================
BARRA SUPERIORE (sostituisce il menu laterale, rimosso in v3)
================================================================ */
.hp-topbar {
position: sticky; top: 0; z-index: 60;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 10px 20px;
background: var(--color-primary-900, #0b2340);
color: #dbe7f5;
box-shadow: var(--shadow-md);
}
.hp-topbar__brand {
display: inline-flex; align-items: center; gap: 8px;
color: #ffffff; text-decoration: none; font-weight: 700; letter-spacing: -0.01em;
}
.hp-topbar__logo {
width: 26px; height: 26px; border-radius: 6px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--color-primary-500, #2c63a8), var(--color-primary-700, #0b3d7a));
color: #fff; font-weight: 800; font-size: 13px;
}
.hp-topbar__page {
flex: 1 1 auto; min-width: 0;
font-size: 13px; color: #9fbadb;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hp-topbar__links { display: flex; gap: 14px; flex-wrap: wrap; }
.hp-topbar__links a {
color: #cfe0f4; text-decoration: none; font-size: 13px; font-weight: 500;
padding: 4px 2px; border-bottom: 1px solid transparent;
}
.hp-topbar__links a:hover { color: #ffffff; border-bottom-color: #7ecfff; }
html { scroll-padding-top: 96px; }
body > main.main,
.hp-topbar + main.main { padding-top: var(--s-5); }
main.main h1,
main.main h2,
main.main .page-header { scroll-margin-top: 96px; }
@media (max-width: 768px) {
.hp-topbar { padding: 8px 12px; gap: 8px; }
.hp-topbar__page { flex-basis: 100%; order: 3; }
.hp-topbar__links { gap: 10px; }
.hp-topbar__links a { font-size: 12px; }
}
@media print { .hp-topbar { display: none !important; } }
/* ================================================================
FLUSSO NUMERATO PAGINE STRUMENTO — 01 DATI / 02 RISULTATI / 03 ESPORTA
================================================================ */
.hp-numbered-section {
display: flex;
align-items: center;
gap: var(--s-3, 12px);
margin: var(--s-6, 24px) 0 var(--s-4, 16px);
}
.hp-numbered-section--separated {
margin-top: var(--s-8, 32px);
padding-top: var(--s-6, 24px);
border-top: 1px solid var(--color-border, #d8dde3);
}
.hp-numbered-section__badge {
display: inline-grid;
place-items: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: var(--r-md, 8px);
background: var(--color-primary-700, #0b3d7a);
color: #fff;
font: 700 var(--fs-sm, .875rem)/1 var(--font-mono, monospace);
letter-spacing: .04em;
}
.hp-numbered-section__copy {
min-width: 0;
}
.hp-numbered-section__title {
margin: 0;
color: var(--color-text, #1c2733);
font-size: var(--fs-md, 1rem);
font-weight: 750;
line-height: 1.15;
letter-spacing: .075em;
text-transform: uppercase;
}
.hp-numbered-section__subtitle {
margin: 3px 0 0;
color: var(--color-text-muted, #6b7785);
font-size: var(--fs-sm, .875rem);
line-height: 1.35;
}
.hp-numbered-section--export {
flex-wrap: wrap;
}
.hp-numbered-section__actions {
display: flex;
align-items: center;
gap: var(--s-2, 8px);
margin-left: auto;
}
.hp-numbered-section__action {
min-height: 40px;
padding: 9px 16px;
border: 1px solid var(--color-primary-700, #0b3d7a);
border-radius: var(--r-md, 8px);
background: var(--color-surface, #fff);
color: var(--color-primary-700, #0b3d7a);
font: 650 var(--fs-sm, .875rem)/1.2 var(--font-sans, sans-serif);
cursor: pointer;
}
.hp-numbered-section__action:hover {
background: var(--color-primary-50, #edf5ff);
}
.hp-numbered-section__action--primary {
background: var(--color-primary-700, #0b3d7a);
color: #fff;
}
.hp-numbered-section__action--primary:hover {
background: var(--color-primary-800, #082f5f);
}
.hp-numbered-section__action:focus-visible {
outline: 3px solid var(--color-focus, #72b7ff);
outline-offset: 2px;
}
@media (max-width: 520px) {
.hp-numbered-section__actions {
width: 100%;
margin-left: 50px;
}
}
@media print {
.hp-numbered-section--separated {
border-top-color: #aeb8c4;
}
.hp-numbered-section__badge {
background: #0b3d7a !important;
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.hp-numbered-section__title { color: #111 !important; }
.hp-numbered-section__subtitle { color: #555 !important; }
.hp-numbered-section__actions { display: none !important; }
}