/* ============================================================================ * ONIRIKA — SHELL CONSOLE (SPEC §3) * Layout a 3 zone per le pagine indice/operative (Domus / Esplora / Archivio). * Consuma solo i token di onirika-tokens.css. Nessun hex. * * Attivazione: la pagina imposta `$page_shell = 'console';` PRIMA di header.php, * che aggiunge la classe `.shell-console` al . * ========================================================================== */ /* Su pagine console, il chrome è la Console stessa: nascondo l'header globale e annullo il padding-top che esso impone (style.css + footer JS). */ .shell-console .onirika-map-header { display: none; } .shell-console.onirika-active { padding-top: 0 !important; } /* --- Contenitore ---------------------------------------------------------- */ .console { max-width: 1400px; margin: 0 auto; padding: var(--s4); color: var(--c-ink); } /* --- 3.1 Top bar ---------------------------------------------------------- */ .console-topbar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--c-hairline); background: var(--c-overlay-console); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; } .console-topbar__title { color: var(--c-ink-dim); } .console-topbar__title b { color: var(--c-ink-bright); font-weight: 400; } .console-topbar__spacer { flex: 1; } .console-topbar__cond { display: inline-flex; align-items: center; gap: var(--s2); color: var(--c-ink-dim); } .console-topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-domain); box-shadow: 0 0 8px var(--c-domain); } .console-topbar__login { color: var(--c-alert); opacity: 0.7; text-decoration: none; } .console-topbar__login:hover { opacity: 1; } /* --- Griglia 3 zone ------------------------------------------------------- */ .console-grid { display: grid; grid-template-columns: 190px 1fr 280px; grid-template-areas: "nav stage feed"; gap: var(--s5); margin-top: var(--s4); } .console-grid.no-feed { grid-template-columns: 190px 1fr; grid-template-areas: "nav stage"; } .console-nav { grid-area: nav; } .console-stage { grid-area: stage; min-width: 0; } .console-feed { grid-area: feed; } /* --- 3.2 NAV sinistra ----------------------------------------------------- */ .console-nav__brand { font-family: var(--font-mono); letter-spacing: 0.16em; color: var(--c-ink-bright); font-size: var(--fs-stat); text-transform: uppercase; } .console-nav__ver { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--c-ink-dim); margin-bottom: var(--s5); display: block; } .console-nav__group { list-style: none; margin: 0 0 var(--s5) 0; padding: 0; } .console-nav__label { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.16em; color: var(--c-ink-dim); text-transform: uppercase; margin: 0 0 var(--s2) 0; } .console-nav__link { display: block; padding: var(--s2) var(--s3); border-left: 2px solid transparent; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-dim); text-decoration: none; } .console-nav__link:hover { color: var(--c-ink); } .console-nav__link.is-active { border-left-color: var(--c-accent); color: var(--c-accent); } .console-nav__link--reserved { color: var(--c-alert); opacity: 0.75; } /* --- 3.3 STAGE ------------------------------------------------------------ */ .stage-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--c-hairline); font-family: var(--font-mono); } .stage-stat { display: inline-flex; align-items: baseline; gap: var(--s2); text-decoration: none; } .stage-stat + .stage-stat { border-left: 1px solid var(--c-hairline-2); padding-left: var(--s4); } .stage-stat__num { font-size: var(--fs-stat); color: var(--c-ink-bright); } .stage-stat__lbl { font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); } .stage-stat:hover .stage-stat__num { color: var(--c-accent); } /* Reperto in rilievo */ .stage-feature { margin: var(--s5) 0; padding: var(--s5); border: 1px solid var(--c-hairline-2); } .stage-feature__tag { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent); } .stage-feature__title { font-family: var(--font-serif); font-size: var(--fs-title); line-height: 1.1; color: var(--c-ink-bright); margin: var(--s2) 0 var(--s3) 0; } .stage-feature__meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--c-ink-dim); display: flex; gap: var(--s4); flex-wrap: wrap; } .stage-feature__cta { display: inline-block; margin-top: var(--s4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); text-decoration: none; } .stage-feature__cta:hover { text-shadow: 0 0 8px var(--c-accent); } /* Mappa relazionale: fallback a lista reale del grafo (SPEC §5.1). In Fase 5 un modulo JS la "promuove" a canvas. */ .stage-graph__head { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); margin: var(--s5) 0 var(--s3) 0; } .node-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .node-list__link { --node-color: var(--c-accent); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--c-hairline); border-left: 2px solid var(--node-color); text-decoration: none; } .node-list__link:hover { background: rgba(0,255,156,0.03); } .node-list__name { font-family: var(--font-serif); font-size: var(--fs-name); color: var(--c-ink-bright); } .node-list__count { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--node-color); } /* SPEC §6.2 — colore nodo derivato dal tipo (data-type), una sola fonte */ .node-list__link[data-type="domini"] { --node-color: var(--c-domain); } .node-list__link[data-type="presenze"] { --node-color: var(--c-presence); } .node-list__link[data-type="missioni"] { --node-color: var(--c-alert); } /* --- 3.4 FEED (Bollettino) ------------------------------------------------ */ .console-feed__head { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); padding-bottom: var(--s3); border-bottom: 1px solid var(--c-hairline); } .feed-item { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--c-hairline); text-decoration: none; } .feed-item__meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-dim); } .feed-item__title { font-family: var(--font-serif); font-size: var(--fs-name); color: var(--c-ink); margin-top: var(--s1); } .feed-item:hover .feed-item__title { color: var(--c-ink-bright); } .feed-item.is-active { border-left: 2px solid var(--c-accent); padding-left: var(--s2); } .feed-item.is-active .feed-item__title { color: var(--c-accent); } /* --- SPEC §6.1 — badge classificazione da enum reali (data-classif) ------- */ .classif { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-dim); /* default / NON CLASSIFICATO / ignoto */ } .classif[data-classif="riuscita"], .classif[data-classif="in corso"], .classif[data-classif="basso"], .classif[data-classif="medio"] { color: var(--c-accent); } .classif[data-classif="in sospeso"], .classif[data-classif="alto"] { color: var(--c-domain); } .classif[data-classif="fallita"], .classif[data-classif="critico"] { color: var(--c-alert); } /* --- 4. ARCHIVIO: filtri + lista a righe ---------------------------------- */ /* 4.1 Riga filtri (chip) */ .filtri { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--c-hairline); } .chip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--c-hairline-2); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-dim); text-decoration: none; } .chip:hover { color: var(--c-ink); } .chip.is-active { border-color: var(--c-accent); background: rgba(0,255,156,0.08); color: var(--c-accent); } .chip__count { font-size: var(--fs-meta); opacity: 0.8; } /* Filtri form (spirali) */ .spirali-filtri { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding-bottom: var(--s4); border-bottom: 1px solid var(--c-hairline); } .spirali-filtri__input, .spirali-filtri__select { background: rgba(0,0,0,0.3); border: 1px solid var(--c-hairline-2); color: var(--c-ink); font-family: var(--font-mono); font-size: var(--fs-label); padding: var(--s2) var(--s3); } .spirali-filtri__input:focus-visible, .spirali-filtri__select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; } /* Riga query decorativa */ .query-line { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--c-ink-dim); margin: var(--s4) 0; } .query-line__cursor { color: var(--c-accent); animation: onirika-blink 1.1s steps(1) infinite; } @keyframes onirika-blink { 50% { opacity: 0; } } /* 4.2 Lista a righe */ .record-list { display: flex; flex-direction: column; } .record { display: grid; grid-template-columns: 110px 100px 1fr auto; align-items: center; gap: var(--s4); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--c-hairline); text-decoration: none; } .record:hover { background: rgba(0,255,156,0.03); } .record__id { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--c-accent); } .record__tipo { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); } .record__main { min-width: 0; } .record__name { display: block; font-family: var(--font-serif); font-size: var(--fs-name); color: var(--c-ink-bright); } .record__sub { display: block; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; color: var(--c-ink-dim); } .record__classif { justify-self: end; text-align: right; } .record-empty { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-ink-dim); padding: var(--s6) 0; text-align: center; } @media (prefers-reduced-motion: reduce) { .query-line__cursor { animation: none; } } @media (max-width: 720px) { .record { grid-template-columns: 1fr auto; grid-template-areas: "id classif" "main main"; gap: var(--s2); } .record__id { grid-area: id; } .record__classif { grid-area: classif; } .record__main { grid-area: main; } .record__tipo { display: none; } } /* --- Barra minima (pagine senza shell: statiche/legacy/auth/admin) -------- */ .site-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--c-hairline); background: var(--c-overlay-console); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; } .site-bar__brand { color: var(--c-ink-bright); letter-spacing: 0.16em; text-decoration: none; } .site-bar__nav { display: flex; flex-wrap: wrap; gap: var(--s4); } .site-bar__nav a { color: var(--c-ink-dim); text-decoration: none; } .site-bar__nav a:hover { color: var(--c-ink); } .site-bar__spacer { flex: 1; } .site-bar__link { color: var(--c-ink-dim); text-decoration: none; } .site-bar__link:hover { color: var(--c-accent); } .site-bar a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* --- Indici Console (blog / team / bollettino) ---------------------------- */ .idx-list { display: flex; flex-direction: column; } .idx-item { display: block; padding: var(--s4) var(--s2); border-bottom: 1px solid var(--c-hairline); text-decoration: none; } .idx-item:hover { background: rgba(0,255,156,0.03); } .idx-item__meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-dim); } .idx-item__title { font-family: var(--font-serif); font-size: var(--fs-lede); color: var(--c-ink-bright); margin: var(--s1) 0; } .idx-item__excerpt { font-family: var(--font-serif); font-size: var(--fs-name); line-height: 1.6; color: var(--c-ink-dim); margin: var(--s2) 0 0 0; } .idx-item__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); } .idx-chip { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; padding: 2px var(--s2); border: 1px solid var(--c-hairline-2); color: var(--c-ink-dim); text-decoration: none; } a.idx-chip:hover { border-color: var(--c-accent); color: var(--c-accent); } /* Bollettino in chiaro (corpo HTML completo nello stage) */ .idx-article { padding: var(--s5) 0; border-bottom: 1px solid var(--c-hairline); } .idx-article__body { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink); margin-top: var(--s3); } .idx-article__body h2, .idx-article__body h3 { font-family: var(--font-mono); color: var(--c-ink-bright); letter-spacing: 0.04em; } /* Paginazione */ .idx-pag { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); font-family: var(--font-mono); font-size: var(--fs-label); } .idx-pag a, .idx-pag span { padding: var(--s2) var(--s3); border: 1px solid var(--c-hairline-2); color: var(--c-ink-dim); text-decoration: none; } .idx-pag a:hover { color: var(--c-ink); } .idx-pag .current { border-color: var(--c-accent); color: var(--c-accent); } /* ============================================================================ * SHELL B — VISTA DI LETTURA (SPEC §7) * Colonna unica centrata, niente pannello destro. Priorità leggibilità. * Attivazione: $page_shell = 'reading' -> body.shell-reading. * ========================================================================== */ /* Come la console, la pagina possiede il proprio chrome: nascondo l'header globale, annullo il padding e alzo l'overlay (--c-overlay-reading). */ .shell-reading .onirika-map-header { display: none; } .shell-reading.onirika-active { padding-top: 0 !important; background: linear-gradient(var(--c-overlay-reading), var(--c-overlay-reading)), var(--onirika-gradient); background-size: 100% 150%; background-attachment: fixed; } .lettura { max-width: 760px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); color: var(--c-ink); } /* Barra superiore sottile */ .lettura-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--c-hairline); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; } .lettura-bar__brand { color: var(--c-ink-bright); text-decoration: none; letter-spacing: 0.16em; } .lettura-bar__crumbs { display: flex; gap: var(--s2); flex-wrap: wrap; color: var(--c-ink-dim); } .lettura-bar__crumbs a { color: var(--c-ink-dim); text-decoration: none; } .lettura-bar__crumbs a:hover { color: var(--c-ink); } .lettura-bar__crumbs .here { color: var(--c-ink); } .lettura-bar__crumbs .sep { opacity: 0.4; } .lettura-bar__back { margin-left: auto; color: var(--c-ink-dim); text-decoration: none; } .lettura-bar__back:hover { color: var(--c-accent); } /* Scheda di classificazione */ .scheda { margin: var(--s5) 0; padding: var(--s4); border: 1px solid var(--c-hairline-2); } .scheda--estremo { border-color: var(--c-alert); } .scheda__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s4); margin: 0; } .scheda__grid dt { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); } .scheda__grid dd { margin: var(--s1) 0 0 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--c-ink-bright); } /* Testata */ .lettura-head { margin: var(--s6) 0 var(--s5); } .lettura-head__occhiello { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--s3) 0; } .lettura-head__title { font-family: var(--font-serif); font-size: var(--fs-title); line-height: 1.1; color: var(--c-ink-bright); margin: 0; } .lettura-head__lede { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lede); line-height: 1.5; color: var(--c-ink); margin: var(--s4) 0 0 0; } .lettura-head__byline { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-dim); margin: var(--s4) 0 0 0; } .lettura-img { display: block; width: 100%; height: auto; margin: var(--s5) 0; border: 1px solid var(--c-hairline); } /* Corpo */ .lettura-prosa { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.75; color: var(--c-ink); max-width: 680px; } .lettura-prosa p { margin: 0 0 var(--s5) 0; } .lettura-prosa > p:first-of-type:not(.lettura-sub)::first-letter { float: left; font-size: 3.2em; line-height: 0.8; padding: 0.05em var(--s2) 0 0; color: var(--c-accent); } .lettura-sub { font-family: var(--font-mono) !important; font-size: var(--fs-subhead) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim) !important; margin: var(--s6) 0 var(--s3) 0 !important; } /* Reperti collegati */ .collegati { margin-top: var(--s7); border-top: 1px solid var(--c-hairline); padding-top: var(--s5); } .collegati__head { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); margin: 0 0 var(--s4) 0; } .collegati__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .collegato { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4); border: 1px solid var(--c-hairline); text-decoration: none; } .collegato:hover { background: rgba(0,255,156,0.03); } .collegato__tipo { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); } .collegato__nome { font-family: var(--font-serif); font-size: var(--fs-name); color: var(--c-ink-bright); } .collegato__meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--c-ink-dim); } @media (max-width: 720px) { .lettura-head__title { font-size: 30px; } .collegati__grid { grid-template-columns: 1fr; } .lettura-bar { flex-wrap: wrap; } .lettura-bar__back { margin-left: 0; } } /* --- Nav: hamburger (visibile solo su mobile) ----------------------------- */ .console-nav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .console-nav__toggle { display: none; background: transparent; border: 1px solid var(--c-hairline-2); color: var(--c-ink); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--s1) var(--s3); cursor: pointer; } /* --- 8. Responsive (SPEC §8) ---------------------------------------------- */ /* 720–1024px: nav sinistra resta, feed destro sotto lo stage */ @media (max-width: 1024px) { .console-grid, .console-grid.no-feed { grid-template-columns: 190px 1fr; grid-template-areas: "nav stage" "feed feed"; } } /* < 720px: nav -> drawer/hamburger; stage piena larghezza; feed in fondo */ @media (max-width: 720px) { .console { padding: var(--s3); } .console-grid, .console-grid.no-feed { grid-template-columns: 1fr; grid-template-areas: "nav" "stage" "feed"; gap: var(--s4); } .console-nav { border-bottom: 1px solid var(--c-hairline); padding-bottom: var(--s3); } .console-nav__toggle { display: block; } .console-nav__ver { display: none; } .console-nav__menu { display: none; } .console-nav__menu.is-open { display: block; margin-top: var(--s3); } .console-topbar { flex-wrap: wrap; gap: var(--s2); } .stage-feature__title { font-size: 30px; } /* Lettura: padding ridotti, corpo mai sotto 17px */ .lettura { padding: var(--s4) var(--s3) var(--s6); } } /* --- Esplora: top bar Console sopra la mappa fullscreen ------------------- */ .esplora-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 300; /* sopra map-container (z 1) e controlli (z 100-101) */ display: flex; align-items: center; gap: var(--s4); height: 44px; padding: 0 var(--s4); background: var(--c-overlay-console); border-bottom: 1px solid var(--c-hairline); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; } .esplora-topbar .brand { color: var(--c-ink-bright); letter-spacing: 0.16em; text-decoration: none; } .esplora-topbar .title { color: var(--c-ink-dim); } .esplora-topbar__nav { display: flex; gap: var(--s4); } .esplora-topbar__nav a { color: var(--c-ink-dim); text-decoration: none; } .esplora-topbar__nav a:hover { color: var(--c-ink); } .esplora-topbar .login { margin-left: auto; color: var(--c-alert); opacity: 0.7; text-decoration: none; } .esplora-topbar .login:hover { opacity: 1; } .esplora-topbar a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* La mappa parte sotto la top bar (la map-container è absolute top:0) */ .shell-console .map-container { top: 44px; } @media (max-width: 768px) { /* Su mobile la mappa mostra già il proprio avviso: nascondo la top bar per non sovrapporre */ .esplora-topbar { display: none; } } /* --- 9. Accessibilità: focus visibile da tastiera (SPEC §9) --------------- */ .console-nav__link:focus-visible, .console-nav__toggle:focus-visible, .stage-stat:focus-visible, .stage-feature__cta:focus-visible, .node-list__link:focus-visible, .chip:focus-visible, .record:focus-visible, .feed-item:focus-visible, .idx-item:focus-visible, .idx-chip:focus-visible, .idx-pag a:focus-visible, .lettura-bar a:focus-visible, .collegato:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* ============================================================================ * SHELL ADMIN (backstage) — stesso layout della Console, sfondo piatto/pratico. * Attivazione: $page_shell = 'admin' -> body.shell-admin * Riusa .console / .console-topbar / .console-grid: cambia SOLO lo sfondo. * ========================================================================== */ .shell-admin .onirika-map-header { display: none; } .shell-admin.onirika-active { padding-top: 0 !important; } /* Sfondo piatto: niente gradiente orario, niente meteo animato */ .shell-admin.onirika-active, .shell-admin.onirika-weather-active { background: #0a0d0c !important; } .shell-admin::before, .shell-admin::after { display: none !important; } .shell-admin > canvas, .shell-admin .weather-layer, .shell-admin .weather-particles, .shell-admin #weatherCanvasGlobal, .shell-admin #weatherLayer { display: none !important; } /* --- Kit form template-driven (admin/template_form.php) -------------------- */ .tf { max-width: 900px; } .tf-sezione { margin: var(--s5) 0; padding: var(--s4); border: 1px solid var(--c-hairline-2); } .tf-sezione__head { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--s4) 0; } .tf-field { margin-bottom: var(--s4); } .tf-field__label { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-dim); margin-bottom: var(--s2); } .tf-field__req { color: var(--c-alert); } .tf-field__help { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--c-ink-dim); margin-top: var(--s1); opacity: 0.85; } .tf-input, .tf-textarea, .tf-select { width: 100%; box-sizing: border-box; background: rgba(0,0,0,0.35); border: 1px solid var(--c-hairline-2); color: var(--c-ink); font-family: var(--font-mono); font-size: var(--fs-label); padding: var(--s2) var(--s3); } .tf-textarea { min-height: 92px; line-height: 1.5; resize: vertical; } .tf-input:focus-visible, .tf-textarea:focus-visible, .tf-select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; } .tf-group { border-left: 2px solid var(--c-hairline-2); padding-left: var(--s3); margin-bottom: var(--s3); } .tf-group__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); } .tf-actions { margin-top: var(--s5); display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; } .tf-btn { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--s3) var(--s5); background: transparent; border: 1px solid var(--c-accent); color: var(--c-accent); cursor: pointer; } .tf-btn:hover { background: rgba(0,255,156,0.08); } .tf-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .tf-check { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-domain); display: inline-flex; gap: var(--s2); align-items: center; } .tf-msg { padding: var(--s4); border: 1px solid var(--c-accent); color: var(--c-ink-bright); font-family: var(--font-mono); font-size: var(--fs-label); margin: var(--s4) 0; line-height: 1.6; } .tf-msg--err { border-color: var(--c-alert); color: var(--c-alert); } .tf-msg code { color: var(--c-accent); background: rgba(0,0,0,0.4); padding: 0 var(--s1); } /* --- Form v2: roster picker, righe dinamiche, anteprima, nav sezioni ------ */ .tf-roster { display: flex; flex-wrap: wrap; gap: var(--s2); } .tf-roster__cb { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--c-hairline-2); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-dim); cursor: pointer; } .tf-roster__cb:hover { color: var(--c-ink); } .tf-roster__cb input { accent-color: var(--c-accent); } .tf-roster__cb.is-on { border-color: var(--c-accent); color: var(--c-accent); background: rgba(0,255,156,0.06); } .tf-input[readonly] { opacity: 0.8; cursor: default; } .tf-row-actions { display: flex; justify-content: flex-end; margin-top: var(--s1); } .tf-rm, .tf-add { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border: 1px solid var(--c-hairline-2); color: var(--c-ink-dim); padding: 2px var(--s2); cursor: pointer; } .tf-rm:hover { border-color: var(--c-alert); color: var(--c-alert); } .tf-add:hover { border-color: var(--c-accent); color: var(--c-accent); } .tf-preview { position: sticky; top: var(--s4); } .tf-preview__head { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-dim); padding-bottom: var(--s3); border-bottom: 1px solid var(--c-hairline); display: flex; align-items: center; gap: var(--s3); } .tf-preview__body { white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.55; color: var(--c-ink); background: rgba(0,0,0,0.35); border: 1px solid var(--c-hairline); padding: var(--s3); margin-top: var(--s3); max-height: 72vh; overflow: auto; } .tf-secnav { list-style: none; margin: 0; padding: 0; position: sticky; top: var(--s4); } .tf-secnav a { display: block; padding: var(--s2) var(--s3); border-left: 2px solid transparent; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--c-ink-dim); text-decoration: none; } .tf-secnav a:hover { color: var(--c-ink); } .tf-secnav a.is-active { border-left-color: var(--c-accent); color: var(--c-accent); } .tf-actionbar { position: sticky; bottom: 0; z-index: 5; background: var(--c-overlay-console); border-top: 1px solid var(--c-hairline-2); padding: var(--s3) 0; margin-top: var(--s5); display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; } .tf-switch { display: inline-flex; gap: var(--s2); flex-wrap: wrap; } .tf-switch a { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--s1) var(--s3); border: 1px solid var(--c-hairline-2); color: var(--c-ink-dim); text-decoration: none; } .tf-switch a.is-active { border-color: var(--c-accent); color: var(--c-accent); } .tf-result__actions { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; } .tf-result__actions details { width: 100%; } .tf-result__actions summary { cursor: pointer; color: var(--c-ink-dim); font-family: var(--font-mono); font-size: var(--fs-meta); } /* --- Indice artefatti esistenti (stato pipeline) -------------------------- */ .tf-index { border: 1px solid var(--c-hairline-2); margin-bottom: var(--s5); } .tf-index > summary { cursor: pointer; padding: var(--s3) var(--s4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-dim); } .tf-index[open] > summary { border-bottom: 1px solid var(--c-hairline); color: var(--c-ink); } .tf-index__list { display: flex; flex-direction: column; } .tf-index__row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--c-hairline); } .tf-index__row:last-child { border-bottom: 0; } .tf-index__code { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-accent); } .tf-index__title { font-family: var(--font-serif); font-size: var(--fs-name); color: var(--c-ink-bright); flex: 1; min-width: 8em; } .tf-index__meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-dim); } .tf-index__status { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; padding: 1px var(--s2); border: 1px solid currentColor; } .tf-index__status--ok { color: var(--c-accent); } .tf-index__status--pending { color: var(--c-domain); } .tf-index__act { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-dim); text-decoration: none; border: 1px solid var(--c-hairline-2); padding: 1px var(--s2); } .tf-index__act:hover { border-color: var(--c-accent); color: var(--c-accent); } /* --- Manuale d'uso (prosa documentazione, shell-admin) -------------------- */ .doc { max-width: 820px; color: var(--c-ink); } .doc h2 { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); margin: var(--s7) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--c-hairline); } .doc h2:first-child { margin-top: var(--s3); } .doc h3 { font-family: var(--font-serif); font-size: var(--fs-lede); color: var(--c-ink-bright); margin: var(--s5) 0 var(--s2); } .doc p, .doc li { font-family: var(--font-serif); font-size: var(--fs-name); line-height: 1.7; color: var(--c-ink); } .doc p { margin: 0 0 var(--s3); } .doc ul, .doc ol { margin: 0 0 var(--s4); padding-left: var(--s5); } .doc li { margin-bottom: var(--s2); } .doc strong { color: var(--c-ink-bright); } .doc code { font-family: var(--font-mono); font-size: 0.86em; color: var(--c-accent); background: rgba(0,0,0,0.4); padding: 1px 5px; } .doc a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid var(--c-hairline-2); } .doc a:hover { border-bottom-color: var(--c-accent); } /* callout regola d'oro / nota */ .doc-note { border: 1px solid var(--c-hairline-2); border-left: 2px solid var(--c-domain); padding: var(--s3) var(--s4); margin: var(--s4) 0; } .doc-note--gold { border-left-color: var(--c-alert); } .doc-note__tag { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-domain); display: block; margin-bottom: var(--s1); } .doc-note--gold .doc-note__tag { color: var(--c-alert); } /* scheda strumento */ .doc-tool { border: 1px solid var(--c-hairline); padding: var(--s4); margin: var(--s3) 0; } .doc-tool__name { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); } .doc-tool dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: var(--s2) 0 0; } .doc-tool dt { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-dim); } .doc-tool dd { margin: 0; font-family: var(--font-serif); font-size: var(--fs-name); line-height: 1.5; color: var(--c-ink); } /* diagramma pipeline (flusso testuale) */ .doc-flow { font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.9; background: rgba(0,0,0,0.3); border: 1px solid var(--c-hairline); padding: var(--s4); margin: var(--s4) 0; overflow-x: auto; white-space: pre; color: var(--c-ink); } .doc-flow b { color: var(--c-accent); font-weight: 400; } /* ricetta passo-passo */ .doc-recipe { border-left: 2px solid var(--c-hairline-2); padding-left: var(--s4); margin: var(--s4) 0; } .doc-recipe__title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-bright); margin-bottom: var(--s2); } /* --- Admin dashboard (shell-admin) ---------------------------------------- */ .aq { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0 var(--s6); } .aq__btn { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--s2) var(--s4); border: 1px solid var(--c-accent); color: var(--c-accent); text-decoration: none; } .aq__btn:hover { background: rgba(0,255,156,0.08); } .aq__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .aq__btn--alt { border-color: var(--c-hairline-2); color: var(--c-ink-dim); } .aq__btn--alt:hover { border-color: var(--c-ink); color: var(--c-ink); background: transparent; } .asection { font-family: var(--font-mono); font-size: var(--fs-subhead); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-dim); margin: var(--s6) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--c-hairline); } /* Voci a righe (stile listato/terminale, non card) */ .arow-list { display: flex; flex-direction: column; border-top: 1px solid var(--c-hairline); margin-bottom: var(--s5); } .arow { display: grid; grid-template-columns: 1.8em 2.6em 1fr auto; align-items: center; gap: var(--s4); padding: var(--s3); border-bottom: 1px solid var(--c-hairline); border-left: 2px solid transparent; text-decoration: none; } .arow:hover { background: rgba(0,255,156,0.03); border-left-color: var(--acc, var(--c-accent)); } .arow:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; } .arow__icon { font-size: 1rem; opacity: 0.85; } .arow__count { font-family: var(--font-mono); font-size: var(--fs-stat); color: var(--c-ink-bright); text-align: right; } .arow__main { min-width: 0; } .arow__name { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-bright); } .arow__label { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--c-ink-dim); margin-left: var(--s2); } .arow__go { font-family: var(--font-mono); color: var(--c-ink-dim); } .arow:hover .arow__go { color: var(--acc, var(--c-accent)); } @media (max-width: 560px) { .arow { grid-template-columns: 1.6em 2.4em 1fr auto; gap: var(--s3); } .arow__label { display: block; margin-left: 0; } }