/* ========================================================= 1) Design tokens — tema chiaro (default) Palette pensata per WCAG AA su tutti gli accoppiamenti testo/sfondo principali. ========================================================= */ :root{ /* Brand */ --brand:#d14124; --brand-700:#a8341a; --brand-50: rgba(209,65,36,.08); /* Testo */ --text:#15181c; /* ~16:1 su --bg */ --text-muted:#565b61; /* ~6.4:1 su --bg, AA per testo normale */ /* Superfici */ --bg:#f1f3f5; /* off-white tendente al grigio caldo */ --surface:#ffffff; /* card */ --surface-2:#e6eaee; /* superfici secondarie / hover */ --surface-alt:#eef1f4; --top-bar-bg:#fbfcfd; /* lievemente più chiara di --surface */ /* Bordi e focus */ --border:#d0d4d9; --focus:#2266ff; /* Link inline (separato dal brand per non mischiarsi al testo) */ --link:#a8341a; --link-hover:#7e2812; /* Stato */ --ok:#117a3c; /* verde più scuro per AA su superfici chiare */ --bad:#b00020; --warn:#7a5500; --pill-ok-bg:#e3f5e8; --pill-bad-bg:#fde7e7; --pill-warn-bg:#fff5d9; /* Tipografia */ --ff: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; --fs-1: clamp(.95rem, .92rem + .2vw, 1rem); --fs-2: 1.125rem; --fs-3: 1.25rem; --fs-4: 1.5rem; --fs-5: 1.875rem; /* Geometria */ --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06); --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --w-col-label: 9.5rem; --w-col-name: 22rem; /* Altezza della top-bar: usata come offset per le filter card sticky. Se cambi il padding di .top-bar, aggiorna qui per mantenere allineato. */ --topbar-height: 3.5rem; } /* ========================================================= 2) Tema scuro — attivo con [data-theme="dark"] su Stessa identità visiva, ma colori ricalibrati per AA su superfici scure (no nero puro, no rossi troppo cupi). ========================================================= */ :root[data-theme="dark"] { /* Brand */ --brand:#e9573b; /* rosso un filo più chiaro per superfici scure */ --brand-700:#c0411f; --brand-50: rgba(233,87,59,.16); /* Testo */ --text:#eceef2; /* ~15:1 su --bg */ --text-muted:#a3aab5; /* ~7.5:1 su --bg */ /* Superfici (mai nero puro: riducono affaticamento visivo) */ --bg:#14171c; --surface:#1d2027; --surface-2:#262a32; --surface-alt:#2a2e37; --top-bar-bg:#1a1d23; /* Bordi e focus */ --border:#3a3f4b; --focus:#6da3ff; /* Link più chiari per restare leggibili sul dark */ --link:#ffa07f; --link-hover:#ffc1ab; /* Stato — colori scelti per contrasto AA su --bg/--surface */ --ok:#4ade80; --bad:#ff7a85; --warn:#fbbf24; --pill-ok-bg: rgba(74,222,128,.14); --pill-bad-bg: rgba(255,122,133,.15); --pill-warn-bg: rgba(251,191,36,.16); /* Ombre più marcate per leggere l'elevazione su dark */ --shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.45); color-scheme: dark; } /* Transizione morbida quando si cambia tema, ma rispettiamo prefers-reduced-motion. */ html, body, .sidebar, .top-bar, .card, .btn, .table, input, select, textarea, .news-box, .alert, .role-badge, .pill, .status { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } @media (prefers-reduced-motion: reduce){ html, body, .sidebar, .top-bar, .card, .btn, .table, input, select, textarea, .news-box, .alert, .role-badge, .pill, .status { transition: none; } } /* Link inline (paragrafi, breadcrumb...) su entrambi i temi. Conservano il colore del brand ma con tono accessibile. */ a { color: var(--link); } a:hover { color: var(--link-hover); } :root[data-theme="dark"] a { color: var(--link); } :root[data-theme="dark"] a:hover { color: var(--link-hover); } /* Bottoni con etichetta sopra brand: testo sempre bianco. */ .btn--primary, .btn--bad, .nav-list .btn.is-current, .nav-list .btn[aria-current="page"], .nav-tiles .tile, .nav-tiles .tile strong, .nav-tiles .tile .tile-sub { color:#fff; } /* Stato "attivo" nella navbar (rosso brand) — regola unica per i due temi. */ .nav-list [aria-current="page"], .nav-list .btn.is-current[aria-disabled="true"] { background: var(--brand); border-color: color-mix(in oklab, var(--brand) 75%, black); color: #fff; opacity: 1; } /* ============================ Dark — fix di contrasto puntuali ============================ */ :root[data-theme="dark"] .btn { color: var(--text); } :root[data-theme="dark"] .nav-list .btn { background: var(--surface-2); border-color: var(--border); color: var(--text); } :root[data-theme="dark"] .muted, :root[data-theme="dark"] .site-title .site-subtitle, /* Breadcrumb in dark: scavalca la regola globale `:root[data-theme="dark"] a` sopra (specificita' 0,1,2) cosi' i link del breadcrumb tornano a ereditare il colore del parent .breadcrumb (--brand su entrambi i temi) e non diventano peach (--link). Anche l'hover non cambia colore: solo la decoration. */ :root[data-theme="dark"] .breadcrumb a, :root[data-theme="dark"] .breadcrumb a:hover { color: inherit; } :root[data-theme="dark"] .badge { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } :root[data-theme="dark"] .table thead th, :root[data-theme="dark"] .table.table--freeze thead th, :root[data-theme="dark"] .table.table--freeze th[scope="row"], :root[data-theme="dark"] .table.table--freeze .col-sticky-left, :root[data-theme="dark"] .table.table--freeze .col-sticky-left-2 { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 1px 0 0 var(--border); } :root[data-theme="dark"] .alert { background: var(--surface-2); color: var(--text); border-color: var(--border); } :root[data-theme="dark"] .alert-error { color: var(--bad); background: var(--pill-bad-bg); border-color: color-mix(in oklab, var(--bad) 25%, var(--border)); } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface); color: var(--text); border-color: var(--border); } :root[data-theme="dark"] label { color: var(--text); } /* Toolbar buttons in dark restano bianchi sopra il brand. */ :root[data-theme="dark"] .toolbar .btn--search, :root[data-theme="dark"] .toolbar .btn--primary { color:#fff; } /* ========================================================= Toggle tema (in top-bar, accanto al Logout) ========================================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 600; font-size: .9rem; line-height: 1; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; } .theme-toggle:hover { background: color-mix(in oklab, var(--surface-2) 80%, var(--brand)); border-color: var(--brand); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .theme-toggle .theme-toggle__icon { width: 1.05rem; height: 1.05rem; display: inline-block; flex: 0 0 auto; } /* 2) Reset minimale */ *{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth} body{ margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; font-size:var(--fs-1); line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{max-width:100%; height:auto} a{color:inherit; text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--focus); outline-offset:2px} /* App shell / layout principale */ .app-wrapper{ --sidebar-width: 280px; min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); background: var(--bg); } .app-wrapper.is-sidebar-collapsed{ --sidebar-width: 64px; } .sidebar{ position: sticky; top: 0; align-self: start; /* height (non min-height) + overflow-y abilita lo scroll INTERNO della sidebar quando le voci eccedono il viewport. Senza overflow-y la sidebar cresceva oltre lo schermo e le ultime voci finivano sotto la fold senza essere raggiungibili. */ height: 100vh; overflow-y: auto; padding: var(--sp-6) var(--sp-5); border-right: 1px solid var(--border); background: var(--surface); transition: padding 0.18s ease; } .sidebar.is-collapsed{ padding: var(--sp-6) var(--sp-2); } .sidebar-header{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-5); } .sidebar.is-collapsed .sidebar-header{ justify-content: center; } .sidebar-header .site-title{ font-size: 1.9rem; line-height: 1.1; flex: 1; min-width: 0; } .sidebar-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; flex-shrink: 0; } .sidebar-toggle:hover{ background: var(--surface-2); } .sidebar-nav .nav-list{ flex-direction: column; align-items: stretch; gap: .4rem; list-style: none; padding: 0; margin: 0; } .sidebar-nav .nav-list > li{ width: 100%; display: block; } /* Tutti i tasti della sidebar: stessa larghezza, stessa altezza, allineati a sinistra */ .sidebar-nav .nav-list .btn{ display: flex; align-items: center; justify-content: flex-start; gap: .65rem; width: 100%; text-align: left; padding: .6rem .85rem; font-size: .95rem; font-weight: 600; line-height: 1.25; min-height: 2.5rem; border-radius: 10px; } .sidebar-nav .nav-list .btn .nav-icon{ flex-shrink: 0; } .sidebar.is-collapsed .nav-list .btn{ justify-content: center; padding: .6rem 0; gap: 0; } .sidebar.is-collapsed .nav-list .nav-label{ display: none; } .sidebar-nav .nav-list .nav-divider-label{ margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .sidebar.is-collapsed .nav-list .nav-divider-label{ font-size: 0; padding-top: .5rem; margin-top: .5rem; } .main-layout{ min-width: 0; display: flex; flex-direction: column; } .top-bar{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--topbar-height); padding: var(--sp-2) var(--sp-6); border-bottom: 1px solid var(--border); background: var(--top-bar-bg); position: sticky; top: 0; z-index: 20; } .top-bar-right{ display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .role-badge{ display: inline-flex; align-items: center; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: .875rem; font-weight: 700; } .main-container{ padding: var(--sp-3) var(--sp-6) var(--sp-6); } /* Layout responsive */ @media (max-width: 960px){ .app-wrapper{ grid-template-columns: 1fr; } .sidebar{ position: relative; min-height: auto; border-right: 0; border-bottom: 1px solid var(--border); } .top-bar{ position: relative; top: auto; } } /* Pagine pubbliche / auth */ .page-shell{ max-width: 1100px; margin: 0 auto; } .page-hero{ text-align: center; margin-bottom: 2rem; } .page-actions{ display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; } .page-title{ margin: 0 0 .75rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); } .page-lead{ margin: 0; color: var(--text-muted); font-size: 1.05rem; } .page-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .page-card{ display: flex; flex-direction: column; overflow: hidden; } .page-card-footer{ margin-top: auto; padding: var(--sp-4); border-top: 1px solid var(--border); background: var(--surface-2); } .page-placeholder{ min-height: 22rem; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 2rem; } .page-muted-block{ color: var(--text-muted); } .auth-shell{ min-height: calc(100vh - 2rem); display: grid; place-items: center; padding: 2rem 1rem; } .auth-card{ width: min(100%, 420px); } .auth-title{ margin: 0 0 1rem; } .auth-actions{ margin-top: 1.25rem; } .dashboard-copy{ margin-top: .35rem; } .stats-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .stat-card{ text-align: center; } .stat-label{ margin: 0 0 .5rem; color: var(--text-muted); font-size: .95rem; } .stat-value{ font-size: clamp(2rem, 1.3rem + 2vw, 3rem); font-weight: 800; color: var(--brand); } .dashboard-columns{ display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: start; } .dashboard-section{ display: flex; flex-direction: column; gap: 1rem; } @media (max-width: 768px){ .page-grid, .stats-grid, .dashboard-columns{ grid-template-columns: 1fr; } .main-container{ padding: var(--sp-4); } .top-bar{ flex-direction: column; align-items: flex-start; } } /* 3) Header / Navbar / Breadcrumb */ /* .site-header{ border-bottom:1px solid var(--border); } */ .site-header .container{ max-width: 80%; margin:0 auto; padding:.75rem var(--sp-4) .75rem; } .site-title{ font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem); margin:0; } .site-title .site-subtitle{ display: block; font-size: 1rem; color: var(--text-muted); font-weight: 500; margin-top: .25rem; margin-bottom: 1rem; } .nav { margin-top: .5rem; margin-bottom: 1.5rem; } /* barra di navigazione */ .nav-list { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; justify-content: flex-start; } /* crea vuoto espandibile tra i tab "normali" e il gruppo sessione */ .nav-list .nav-spacer { flex: 1 1 auto; min-width: 2rem; height: 1.5rem; margin-left: .75rem; padding-left: .75rem; border-left: 1px solid var(--border); } /* gruppo Logout + Theme */ .nav-list .nav-session { display: flex; align-items: center; gap: .75rem; } /* larghezza minima coerente dei due bottoni finali */ .nav-list .nav-session .btn { min-width: 5rem; text-align: center; } /* stile generale bottoni nella nav */ .nav-list > li { margin: 0; padding: 0; } .nav-list form { display: inline; margin: 0; } .nav-list .btn { padding: .45rem .7rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; text-decoration: none; } .nav-list .btn:hover { text-decoration: none; transform: translateY(-1px); } /* --- NUOVO BLOCCO UNIVERSALE: TASTO ATTIVO ROSSO SEMPRE --- */ .nav-list .btn.is-current, .nav-list .btn[aria-current="page"] { background-color: var(--brand) !important; color: #ffffff !important; border-color: color-mix(in oklab, var(--brand) 75%, black) !important; opacity: 1 !important; filter: none !important; text-decoration: none !important; } .nav-list .btn.is-current:hover, .nav-list .btn[aria-current="page"]:hover { background-color: var(--brand-700) !important; color: #ffffff !important; } /* Sostituisci le righe 223-224 con questo blocco */ .breadcrumb { margin-top: .5rem; /* Brand su entrambi i temi: var(--brand) cambia automaticamente fra #d14124 (light) e #e9573b (dark). Tutti i figli (link, separatori "/", current page) ereditano questo colore. */ color: var(--brand); } .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; opacity: 0.5; } .breadcrumb a { color: inherit; text-decoration: none; /* Meglio togliere la sottolineatura di default */ } .breadcrumb a:hover { text-decoration: underline; } /* L'ultimo elemento (pagina corrente) */ .breadcrumb li:last-child { font-weight: 600; /* Opzionale: lo rende un po' più evidente */ pointer-events: none; } /* 4) Layout & utility */ body.page-graph .card { max-width: 1100px; margin-left: auto; margin-right: auto; } .main-title{ font-size:var(--fs-5); margin:0 0 var(--sp-4); } .muted{ color:var(--text-muted) } .nowrap{ white-space:nowrap } .w-1ch{width:1ch} .w-3ch{width:3ch} .w-5ch{width:5ch} .w-10ch{width:10ch} .mt-1{margin-top:var(--sp-4)} .mb-1{margin-bottom:var(--sp-4)} .mt-2{margin-top:var(--sp-6)} .mb-2{margin-bottom:var(--sp-6)} .fit{ width:100% } .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; } /* Grid */ .grid{display:grid; gap:var(--sp-4)} .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3, 1fr)} /* Split + Sidebar */ .split{display:grid; grid-template-columns:280px 1fr; gap:var(--sp-6)} aside.card.sidebar{ position:sticky; top:var(--sp-6); max-height:calc(100dvh - 2*var(--sp-6)); overflow:auto } aside.card.sidebar h3{ margin-top:0 } aside.card.sidebar ul{ list-style:none; margin:0; padding:0 } aside.card.sidebar li{ display:flex; align-items:center; gap:.5rem; padding:.25rem 0 } aside.card.sidebar a{ color:var(--text); text-decoration:none } aside.card.sidebar a:hover{ text-decoration:underline } /* 5) Card */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-5); box-shadow:var(--shadow); } .card + .card{ margin-top:var(--sp-4) } /* Container che dispongono .card affiancate in orizzontale: la spaziatura è data dal `gap` del grid, quindi annulliamo il margin-top fra siblings per evitare che la 2ª (e successive) card scendano disallineate. */ :is(.page-grid, .taxonomy-columns, .examples-grid) > .card + .card{ margin-top:0 } .card h2{ font-size:var(--fs-4); margin:.25rem 0 var(--sp-3) } .card h3{ font-size:var(--fs-3); margin:.25rem 0 var(--sp-3) } /* 6) Buttons */ .btn{ --btn-bg:var(--surface-2); --btn-fg:var(--text); --btn-bd:var(--border); appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem; border-radius:10px; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); cursor:pointer; font-weight:600; transition:transform .04s ease, background .15s ease, border-color .15s ease; line-height:1.1; text-decoration:none; } /* Uniforma