/* ===================================================================== SisTER • Comune di Senigallia Design system condiviso — Material Design 3 + Glassmorphism Tipografia: Titillium Web (caricata via Google Fonts in ) Compatibile con index.php (Import) ed esporta.php (Backup/Restore) ===================================================================== */ /* ---------- Design tokens (MD3-style, light) ----------------------- */ :root { /* Brand color: Senigallia blue #0b4a8b → tonal palette generata */ --md-primary-0: #000000; --md-primary-10: #001a36; --md-primary-20: #002f5a; --md-primary-30: #08447f; --md-primary-40: #0b4a8b; /* primary base */ --md-primary-50: #1671c7; --md-primary-60: #4892de; --md-primary-70: #74aee8; --md-primary-80: #a3caf1; --md-primary-90: #d3e5fa; --md-primary-95: #eaf2fc; --md-primary-99: #fbfcff; --md-primary-100: #ffffff; /* Semantic roles */ --md-primary: var(--md-primary-40); --md-on-primary: var(--md-primary-100); --md-primary-container: var(--md-primary-90); --md-on-primary-container: var(--md-primary-10); --md-secondary: #4f6079; --md-on-secondary: #ffffff; --md-secondary-container: #d4e3f7; --md-on-secondary-container: #0b1b2c; --md-tertiary: #645b70; --md-tertiary-container: #ebddf7; --md-error: #ba1a1a; --md-on-error: #ffffff; --md-error-container: #ffdad6; --md-on-error-container: #410002; --md-success: #1f7a3f; --md-success-container: #b9efc9; --md-warning: #92541a; --md-warning-container: #ffdcc1; --md-surface: #fbfcff; --md-surface-dim: #d9dce0; --md-surface-bright: #fbfcff; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f3f7ff; --md-surface-container: #edf1f8; --md-surface-container-high: #e7ecf3; --md-surface-container-highest: #e0e6ee; --md-on-surface: #1a1c1f; --md-on-surface-variant: #44474c; --md-outline: #74787f; --md-outline-variant: #c4c7ce; /* Glass surfaces — semi-transparent on blurred background */ --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-strong: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.55); --glass-stroke: rgba(11, 74, 139, 0.16); /* Elevation (MD3 dp ladder, ammorbidito per glass) */ --md-elev-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); --md-elev-2: 0 2px 6px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --md-elev-3: 0 6px 14px rgba(15, 23, 42, .10), 0 2px 4px rgba(15, 23, 42, .06); --md-elev-4: 0 12px 24px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06); --md-elev-5: 0 24px 48px rgba(15, 23, 42, .14), 0 8px 16px rgba(15, 23, 42, .08); /* Shape scale */ --md-shape-xs: 6px; --md-shape-sm: 12px; --md-shape-md: 16px; --md-shape-lg: 22px; --md-shape-xl: 28px; --md-shape-full: 9999px; /* Motion */ --md-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-easing-emphasized: cubic-bezier(0.3, 0, 0, 1); --md-dur-short: 120ms; --md-dur-medium: 220ms; --md-dur-long: 360ms; /* Type */ --md-font: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --md-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* ---------- Dark mode (auto) --------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --md-primary: var(--md-primary-80); --md-on-primary: var(--md-primary-20); --md-primary-container: var(--md-primary-30); --md-on-primary-container: var(--md-primary-90); --md-secondary-container: #354759; --md-on-secondary-container: #d4e3f7; --md-surface: #101216; --md-surface-dim: #101216; --md-surface-bright: #36383d; --md-surface-container-lowest: #0a0c0f; --md-surface-container-low: #181a1e; --md-surface-container: #1c1f23; --md-surface-container-high: #272a2e; --md-surface-container-highest: #323539; --md-on-surface: #e3e5e9; --md-on-surface-variant: #c4c7ce; --md-outline: #8e9197; --md-outline-variant: #44474c; --glass-bg: rgba(28, 31, 35, 0.62); --glass-bg-strong: rgba(28, 31, 35, 0.82); --glass-border: rgba(255, 255, 255, 0.08); --glass-stroke: rgba(116, 174, 232, 0.22); } } /* ---------- Reset & base ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--md-font); font-size: 15px; line-height: 1.5; color: var(--md-on-surface); background-color: var(--md-surface-container-low); background-image: radial-gradient(900px 520px at 8% 6%, rgba(22,113,199,.22), transparent 62%), radial-gradient(820px 600px at 92% 28%, rgba(11,74,139,.18), transparent 56%), radial-gradient(700px 500px at 50% 100%, rgba(116,174,232,.18), transparent 60%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (prefers-color-scheme: dark) { body { background-image: radial-gradient(900px 520px at 8% 6%, rgba(22,113,199,.18), transparent 62%), radial-gradient(820px 600px at 92% 28%, rgba(11,74,139,.22), transparent 56%), radial-gradient(700px 500px at 50% 100%, rgba(8,68,127,.20), transparent 60%); } } /* ---------- Typography (MD3 type scale) ---------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.005em; } h1 { font-size: 28px; line-height: 1.2; font-weight: 700; } h2 { font-size: 22px; line-height: 1.25; font-weight: 700; } h3 { font-size: 18px; line-height: 1.3; font-weight: 700; } h4 { font-size: 16px; line-height: 1.35; font-weight: 700; } .muted { color: var(--md-on-surface-variant); font-size: 14px; line-height: 1.55; } .muted code { font-size: 12.5px; } p { margin: 0 0 8px 0; } a { color: var(--md-primary-50); text-decoration: none; transition: color var(--md-dur-short) var(--md-easing-standard); } a:hover { color: var(--md-primary-40); text-decoration: underline; text-underline-offset: 3px; } @media (prefers-color-scheme: dark) { a { color: var(--md-primary-80); } a:hover { color: var(--md-primary-90); } } code { font-family: var(--md-font-mono); font-size: 0.92em; padding: 1px 7px; border-radius: var(--md-shape-xs); background: var(--md-surface-container); border: 1px solid var(--md-outline-variant); color: var(--md-on-surface); } ::selection { background: var(--md-primary-90); color: var(--md-on-primary-container); } /* ---------- Layout shell ------------------------------------------- */ .wrap { max-width: 1120px; margin: 0 auto; padding: 22px 22px 40px; } @media (max-width: 640px) { .wrap { padding: 14px 14px 28px; } } /* ---------- App bar (top bar with logo) ---------------------------- */ .appbar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--md-shape-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--md-elev-2); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); position: sticky; top: 12px; z-index: 5; } .appbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .appbar .brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(11, 74, 139, .25)); flex-shrink: 0; } .appbar .brand .t { display: flex; flex-direction: column; min-width: 0; } .appbar .brand .t strong { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar .brand .t span { font-size: 13px; font-weight: 400; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar .spacer { flex: 1; } .appbar form { margin: 0; } @media (max-width: 600px) { .appbar { padding: 10px 12px; gap: 10px; } .appbar .brand img { width: 36px; height: 36px; } .appbar .brand .t strong { font-size: 14px; } .appbar .brand .t span { font-size: 12px; } } /* ---------- Card (glass surface) ----------------------------------- */ .card { margin-top: 16px; padding: 22px; border-radius: var(--md-shape-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--md-elev-3); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .card.solid { background: var(--md-surface-container-lowest); backdrop-filter: none; -webkit-backdrop-filter: none; } @media (max-width: 600px) { .card { padding: 16px; border-radius: var(--md-shape-md); } } /* ---------- Form fields (MD3 outlined) ----------------------------- */ label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--md-on-surface-variant); letter-spacing: 0.02em; } input[type=text], input[type=password], input[type=email], input[type=file], input[type=number], select, textarea { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--md-on-surface); background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-sm); outline: none; transition: border-color var(--md-dur-short) var(--md-easing-standard), box-shadow var(--md-dur-short) var(--md-easing-standard), background var(--md-dur-short) var(--md-easing-standard); } input[type=text]:hover, input[type=password]:hover, select:hover { border-color: var(--md-on-surface-variant); } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--md-primary); box-shadow: 0 0 0 3px var(--md-primary-container); } input[type=file] { padding: 10px 12px; cursor: pointer; } input[type=checkbox], input[type=radio] { accent-color: var(--md-primary); width: 18px; height: 18px; cursor: pointer; } ::placeholder { color: var(--md-on-surface-variant); opacity: 0.7; } /* ---------- Buttons (MD3 filled / tonal / outlined / text) --------- */ .btn { --btn-bg: var(--md-primary); --btn-fg: var(--md-on-primary); --btn-shadow: var(--md-elev-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; min-height: 42px; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--btn-fg); background: var(--btn-bg); border: 0; border-radius: var(--md-shape-full); cursor: pointer; box-shadow: var(--btn-shadow); text-decoration: none; position: relative; overflow: hidden; transition: background-color var(--md-dur-short) var(--md-easing-standard), box-shadow var(--md-dur-short) var(--md-easing-standard), transform var(--md-dur-short) var(--md-easing-standard); } .btn:hover { box-shadow: var(--md-elev-3); background: color-mix(in srgb, var(--btn-bg) 92%, var(--md-on-primary)); } .btn:active { transform: translateY(1px); box-shadow: var(--md-elev-1); } .btn:focus-visible { outline: 3px solid var(--md-primary-container); outline-offset: 2px; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* Tonal (secondary) */ .btn.secondary { --btn-bg: var(--md-secondary-container); --btn-fg: var(--md-on-secondary-container); --btn-shadow: none; border: 1px solid transparent; } .btn.secondary:hover { --btn-shadow: var(--md-elev-1); background: color-mix(in srgb, var(--md-secondary-container) 88%, var(--md-on-secondary-container)); } /* Outlined */ .btn.outlined { --btn-bg: transparent; --btn-fg: var(--md-primary); --btn-shadow: none; border: 1px solid var(--md-outline); } .btn.outlined:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); } /* Text */ .btn.text { --btn-bg: transparent; --btn-fg: var(--md-primary); --btn-shadow: none; padding: 10px 14px; } .btn.text:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); } /* Danger (filled, error) */ .btn.danger { --btn-bg: var(--md-error); --btn-fg: var(--md-on-error); } .btn.danger:hover { background: color-mix(in srgb, var(--md-error) 90%, white); } /* Compact button (small) */ .btn.small { padding: 7px 14px; min-height: 32px; font-size: 13px; } /* Icon-only button */ .btn.icon { width: 42px; padding: 0; border-radius: var(--md-shape-full); } /* ---------- Pills / chips ------------------------------------------ */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--md-on-primary-container); background: var(--md-primary-container); border: 1px solid color-mix(in srgb, var(--md-primary) 18%, transparent); border-radius: var(--md-shape-full); white-space: nowrap; } .pill.neutral { background: var(--md-surface-container); color: var(--md-on-surface-variant); border-color: var(--md-outline-variant); } .pill.success { background: var(--md-success-container); color: #003918; border-color: color-mix(in srgb, var(--md-success) 30%, transparent); } .pill.warning { background: var(--md-warning-container); color: #2f1500; border-color: color-mix(in srgb, var(--md-warning) 30%, transparent); } .pill.error { background: var(--md-error-container); color: var(--md-on-error-container); border-color: color-mix(in srgb, var(--md-error) 30%, transparent); } /* ---------- Banner / alert states ---------------------------------- */ .banner { padding: 14px 16px; border-radius: var(--md-shape-md); margin-top: 14px; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .banner b { font-weight: 700; } .banner.err { background: var(--md-error-container); color: var(--md-on-error-container); border-color: color-mix(in srgb, var(--md-error) 30%, transparent); } .banner.ok { background: var(--md-success-container); color: #003918; border-color: color-mix(in srgb, var(--md-success) 30%, transparent); } .banner.warn { background: var(--md-warning-container); color: #2f1500; border-color: color-mix(in srgb, var(--md-warning) 30%, transparent); } .banner.info { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: color-mix(in srgb, var(--md-primary) 22%, transparent); } /* legacy aliases (mantengono compatibilità con il vecchio markup) */ .err { padding:14px 16px;border-radius:var(--md-shape-md);margin-top:14px; background:var(--md-error-container);color:var(--md-on-error-container); border:1px solid color-mix(in srgb, var(--md-error) 30%, transparent); } .ok { padding:14px 16px;border-radius:var(--md-shape-md);margin-top:14px; background:var(--md-success-container);color:#003918; border:1px solid color-mix(in srgb, var(--md-success) 30%, transparent); } /* ---------- Progress bar ------------------------------------------- */ .barwrap { background: var(--md-surface-container-high); border-radius: var(--md-shape-full); overflow: hidden; height: 12px; border: 1px solid var(--md-outline-variant); box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); } .bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--md-primary-40), var(--md-primary-50), var(--md-primary-60)); background-size: 200% 100%; animation: barShimmer 2s linear infinite; transition: width var(--md-dur-medium) var(--md-easing-emphasized); border-radius: var(--md-shape-full); } @keyframes barShimmer { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } /* ---------- Live log (terminal) ------------------------------------ */ .log { margin-top: 12px; background: #0b1220; color: #d6e6f7; border-radius: var(--md-shape-md); padding: 14px 16px; max-height: 560px; overflow: auto; font-family: var(--md-font-mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 2px 8px rgba(0,0,0,0.25); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .log::-webkit-scrollbar { width: 10px; height: 10px; } .log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 8px; } /* ---------- Layout helpers ----------------------------------------- */ .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .col { flex: 1; min-width: 280px; } .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; } .divider { border: none; border-top: 1px solid var(--md-outline-variant); margin: 18px 0; } /* ---------- KPI boxes (esporta.php) -------------------------------- */ .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; } .kpi .box { padding: 12px 14px; border-radius: var(--md-shape-md); background: var(--md-surface-container-lowest); border: 1px solid var(--md-outline-variant); box-shadow: var(--md-elev-1); } .kpi .box b { display: block; font-size: 15px; font-weight: 700; color: var(--md-on-surface); margin-bottom: 2px; } .kpi .box span { color: var(--md-on-surface-variant); font-size: 12px; word-break: break-word; } /* ---------- Tables -------------------------------------------------- */ table { border-collapse: collapse; width: 100%; margin-top: 14px; background: var(--md-surface-container-lowest); border-radius: var(--md-shape-md); overflow: hidden; border: 1px solid var(--md-outline-variant); font-size: 14px; } thead { background: var(--md-surface-container); } th { text-align: left; padding: 11px 12px; font-weight: 600; font-size: 13px; color: var(--md-on-surface-variant); letter-spacing: 0.02em; border-bottom: 1px solid var(--md-outline-variant); } td { padding: 11px 12px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: top; color: var(--md-on-surface); } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: color-mix(in srgb, var(--md-primary) 4%, transparent); } /* ---------- Drop-zone (file upload) --------------------------------- */ .dropzone { margin-top: 12px; padding: 28px 18px; border-radius: var(--md-shape-md); border: 2px dashed var(--md-outline); background: color-mix(in srgb, var(--md-surface-container-lowest) 86%, transparent); cursor: pointer; transition: border-color var(--md-dur-medium) var(--md-easing-standard), background var(--md-dur-medium) var(--md-easing-standard), box-shadow var(--md-dur-medium) var(--md-easing-standard); text-align: center; } .dropzone:hover, .dropzone.is-over { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-container-lowest)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-primary) 15%, transparent); } .dropzone .icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: var(--md-shape-full); background: var(--md-primary-container); color: var(--md-on-primary-container); display: grid; place-items: center; font-size: 26px; } .dropzone .title { font-weight: 700; font-size: 15px; color: var(--md-on-surface); } .dropzone .subtitle { color: var(--md-on-surface-variant); font-size: 13px; margin-top: 4px; } .dropzone ul { margin: 12px 0 0 0; padding: 0; list-style: none; text-align: left; } .dropzone ul li { padding: 8px 12px; margin: 4px 0; background: var(--md-surface-container); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-sm); font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .dropzone ul li::before { content: "📦"; flex-shrink: 0; } /* ---------- Checkbox option (chk + descrittore) -------------------- */ .chk { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; margin-top: 8px; border-radius: var(--md-shape-sm); background: color-mix(in srgb, var(--md-surface-container-lowest) 70%, transparent); border: 1px solid var(--md-outline-variant); transition: background var(--md-dur-short) var(--md-easing-standard); } .chk:hover { background: var(--md-surface-container-lowest); } .chk > input { margin-top: 2px; flex-shrink: 0; } .chk > div { flex: 1; min-width: 0; } .chk b { font-weight: 600; color: var(--md-on-surface); } .chk .muted { margin-top: 2px; font-size: 12.5px; } /* ---------- Schema list specific ----------------------------------- */ .schema-row { display: flex; gap: 10px; align-items: center; } .schema-row .name { font-weight: 700; color: var(--md-on-surface); font-family: var(--md-font-mono); font-size: 14px; } /* ---------- Modal --------------------------------------------------- */ .modal { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 100; animation: fadeIn var(--md-dur-medium) var(--md-easing-standard); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal .panel { width: min(980px, 96vw); max-height: 86vh; overflow: auto; border-radius: var(--md-shape-lg); background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); box-shadow: var(--md-elev-5); animation: slideUp var(--md-dur-long) var(--md-easing-emphasized); } @keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal .hdr { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--md-outline-variant); background: var(--md-surface-container); position: sticky; top: 0; z-index: 1; } .modal .hdr strong { font-size: 17px; font-weight: 700; color: var(--md-on-surface); } .modal .body { padding: 18px 20px; } .modal .x { margin-left: auto; } /* ---------- Footer -------------------------------------------------- */ .app-footer { margin-top: 20px; text-align: center; color: var(--md-on-surface-variant); font-size: 13px; } .app-footer .pill { font-size: 11.5px; } /* ---------- Print -------------------------------------------------- */ @media print { body { background: white; } .appbar, .btn, .dropzone, .modal { display: none !important; } .card { border: 1px solid #888; box-shadow: none; background: white; } } /* ---------- Reduced motion ----------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } } /* --- Aggiunte v2: apertura modale via classe (sostituisce style.display inline) --- */ .modal.open { display: flex; }