/* ========================================================================== VETRO UI — v1.34.0 Sistema di design modulare, leggero e senza dipendenze. -------------------------------------------------------------------------- Indice 01 · Token & temi (colori modulari: cambia una variabile, cambia tutto) 02 · Reset & base 03 · Tipografia 04 · Layout: container, sezioni, griglia 12 colonne, utilities 05 · Bottoni, badge, chip 06 · Form 07 · Navbar, dropdown, tabs, accordion 08 · Card, alert, modal, toast, tooltip, progress, skeleton 09 · Tabelle & DataTable 10 · Calendario 11 · Flow, timeline, KPI & dashboard 12 · Parallax, animazioni, reveal 13 · Stampa ========================================================================== */ /* ========================================================================== 01 · TOKEN & TEMI Personalizza SOLO le variabili --c-* : tinte hover, sfondi soft, bordi e testi colorati vengono derivati automaticamente con color-mix(). ========================================================================== */ :root { /* ---- Brand (variabili con valore di default) ------------------------- Ogni colore è un seme sovrascrivibile: definisci --vt-primary, --vt-secondary, … su :root (o inline) e tutta la UI si ricalcola. In alternativa sovrascrivi direttamente --c-primary ecc. A runtime: Vetro.theme.colors({ primary:"#…", secondary:"#…" }). */ --c-primary: var(--vt-primary, #0fa387); /* laguna */ --c-secondary: var(--vt-secondary, #64748b); /* ardesia */ --c-accent: var(--vt-accent, #f76b15); /* tramonto */ --c-success: var(--vt-success, #45a557); --c-warning: var(--vt-warning, #f5a524); --c-danger: var(--vt-danger, #e5484d); --c-info: var(--vt-info, #3a8bfd); --on-brand: var(--vt-on-brand, #ffffff); /* testo sopra colori pieni */ /* ---- Geometria ------------------------------------------------------- */ --radius-s: 9px; --radius-m: 14px; --radius-l: 22px; --radius-pill: 999px; --border-w: 1px; /* ---- Spaziatura (scala 4px) ------------------------------------------ */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* ---- Font ------------------------------------------------------------ */ --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; /* ---- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(.22,.8,.32,1); --ease-pop: cubic-bezier(.34,1.56,.5,1); --t-fast: 140ms; --t-med: 260ms; --t-slow: 480ms; /* ---- Z-index ---------------------------------------------------------- */ --z-nav: 100; --z-drop: 200; --z-modal: 500; --z-toast: 900; /* ---- Derivati brand (NON toccare: seguono --c-*) ---------------------- */ --grad-brand: linear-gradient(120deg, var(--c-primary), var(--c-accent)); --primary-hover: color-mix(in oklab, var(--c-primary) 84%, var(--ink)); --primary-soft: color-mix(in srgb, var(--c-primary) 13%, var(--surface)); --primary-soft-2: color-mix(in srgb, var(--c-primary) 22%, var(--surface)); --primary-border: color-mix(in srgb, var(--c-primary) 42%, var(--border)); --primary-text: color-mix(in oklab, var(--c-primary) 72%, var(--ink)); --accent-hover: color-mix(in oklab, var(--c-accent) 84%, var(--ink)); --accent-soft: color-mix(in srgb, var(--c-accent) 14%, var(--surface)); --accent-border: color-mix(in srgb, var(--c-accent) 42%, var(--border)); --accent-text: color-mix(in oklab, var(--c-accent) 72%, var(--ink)); --secondary-hover: color-mix(in oklab, var(--c-secondary) 84%, var(--ink)); --secondary-soft: color-mix(in srgb, var(--c-secondary) 14%, var(--surface)); --secondary-border: color-mix(in srgb, var(--c-secondary) 42%, var(--border)); --secondary-text: color-mix(in oklab, var(--c-secondary) 72%, var(--ink)); --success-hover: color-mix(in oklab, var(--c-success) 84%, var(--ink)); --success-soft: color-mix(in srgb, var(--c-success) 14%, var(--surface)); --success-border: color-mix(in srgb, var(--c-success) 42%, var(--border)); --success-text: color-mix(in oklab, var(--c-success) 72%, var(--ink)); --warning-hover: color-mix(in oklab, var(--c-warning) 84%, var(--ink)); --warning-soft: color-mix(in srgb, var(--c-warning) 16%, var(--surface)); --warning-border: color-mix(in srgb, var(--c-warning) 46%, var(--border)); --warning-text: color-mix(in oklab, var(--c-warning) 60%, var(--ink)); --danger-hover: color-mix(in oklab, var(--c-danger) 84%, var(--ink)); --danger-soft: color-mix(in srgb, var(--c-danger) 13%, var(--surface)); --danger-border: color-mix(in srgb, var(--c-danger) 42%, var(--border)); --danger-text: color-mix(in oklab, var(--c-danger) 74%, var(--ink)); --info-hover: color-mix(in oklab, var(--c-info) 84%, var(--ink)); --info-soft: color-mix(in srgb, var(--c-info) 13%, var(--surface)); --info-border: color-mix(in srgb, var(--c-info) 42%, var(--border)); --info-text: color-mix(in oklab, var(--c-info) 74%, var(--ink)); color-scheme: light dark; accent-color: var(--c-primary); } /* ---- Tema CHIARO (default) ---------------------------------------------- Ogni neutro è un seme sovrascrivibile: definisci --vt-bg, --vt-surface… (e le versioni --vt-*-dark) su :root per ricolorare ENTRAMBI i temi senza toccare questo file. I valori qui sotto sono i default. */ :root, html[data-theme="light"] { --bg: var(--vt-bg, #f3f5f6); --surface: var(--vt-surface, #ffffff); --surface-2: var(--vt-surface-2, #eceff1); --surface-3: var(--vt-surface-3, #e2e7ea); --text: var(--vt-text, #131c24); --text-2: var(--vt-text-2, #51606c); --text-3: var(--vt-text-3, #8b98a3); --border: var(--vt-border, #dde3e7); --border-2: var(--vt-border-2, #c6cfd6); --ink: var(--vt-ink, #0b1420); /* direzione del contrasto (testo) */ --paper: var(--vt-paper, #ffffff); /* direzione della superficie */ --glass-bg: color-mix(in srgb, #ffffff 68%, transparent); --glass-border: color-mix(in srgb, #ffffff 55%, transparent); --backdrop: rgb(15 23 32 / .45); --shadow-s: 0 1px 2px rgb(10 22 33 / .07), 0 1px 1px rgb(10 22 33 / .04); --shadow-m: 0 10px 28px -10px rgb(10 22 33 / .18), 0 2px 6px -2px rgb(10 22 33 / .08); --shadow-l: 0 28px 60px -18px rgb(10 22 33 / .26), 0 6px 18px -8px rgb(10 22 33 / .12); } html[data-theme="light"] { color-scheme: light; } /* ---- Tema SCURO ---------------------------------------------------------- */ html[data-theme="dark"] { --bg: var(--vt-bg-dark, #0c111e); --surface: var(--vt-surface-dark, #131a2b); --surface-2: var(--vt-surface-2-dark, #1a2335); --surface-3: var(--vt-surface-3-dark, #232e44); --text: var(--vt-text-dark, #e8eef7); --text-2: var(--vt-text-2-dark, #9aa8bd); --text-3: var(--vt-text-3-dark, #66758d); --border: var(--vt-border-dark, #27324a); --border-2: var(--vt-border-2-dark, #364361); --ink: var(--vt-ink-dark, #eef4ff); --paper: var(--vt-paper-dark, #0b1018); --glass-bg: color-mix(in srgb, #131a2b 62%, transparent); --glass-border: color-mix(in srgb, #aebcd8 16%, transparent); --backdrop: rgb(2 6 14 / .6); --shadow-s: 0 1px 2px rgb(0 0 0 / .35); --shadow-m: 0 12px 30px -12px rgb(0 0 0 / .55), 0 2px 8px -2px rgb(0 0 0 / .4); --shadow-l: 0 30px 70px -20px rgb(0 0 0 / .65), 0 8px 22px -10px rgb(0 0 0 / .5); color-scheme: dark; } /* ---- Tema AUTO: segue il sistema quando manca data-theme ----------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--vt-bg-dark, #0c111e); --surface: var(--vt-surface-dark, #131a2b); --surface-2: var(--vt-surface-2-dark, #1a2335); --surface-3: var(--vt-surface-3-dark, #232e44); --text: var(--vt-text-dark, #e8eef7); --text-2: var(--vt-text-2-dark, #9aa8bd); --text-3: var(--vt-text-3-dark, #66758d); --border: var(--vt-border-dark, #27324a); --border-2: var(--vt-border-2-dark, #364361); --ink: var(--vt-ink-dark, #eef4ff); --paper: var(--vt-paper-dark, #0b1018); --glass-bg: color-mix(in srgb, #131a2b 62%, transparent); --glass-border: color-mix(in srgb, #aebcd8 16%, transparent); --backdrop: rgb(2 6 14 / .6); --shadow-s: 0 1px 2px rgb(0 0 0 / .35); --shadow-m: 0 12px 30px -12px rgb(0 0 0 / .55), 0 2px 8px -2px rgb(0 0 0 / .4); --shadow-l: 0 30px 70px -20px rgb(0 0 0 / .65), 0 8px 22px -10px rgb(0 0 0 / .5); } } /* ========================================================================== 02 · RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; /* compensazione navbar sticky per gli anchor */ } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease); } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } iframe { border: 0; } :disabled { cursor: not-allowed; } ::selection { background: var(--primary-soft-2); color: var(--text); } :focus { outline: none; } :focus-visible { outline: 2px solid color-mix(in srgb, var(--c-primary) 80%, transparent); outline-offset: 2px; border-radius: var(--radius-s); } /* Scrollbar coerente con il tema */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } hr { border: 0; border-top: var(--border-w) solid var(--border); margin-block: var(--sp-5); } /* ========================================================================== 03 · TIPOGRAFIA ========================================================================== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; color: var(--text); text-wrap: balance; } h1, .h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem); } h2, .h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); } h3, .h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); } h4, .h4 { font-size: 1.125rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; } .display { font-size: clamp(2.5rem, 1.6rem + 4.6vw, 4.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.02; } p { margin-block: 0 var(--sp-4); } .lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.55; } .small, small { font-size: var(--fs-sm); } .tiny { font-size: var(--fs-xs); } a { color: var(--primary-text); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; } strong, b { font-weight: 640; } code, kbd, pre, .mono { font-family: var(--font-mono); } code { font-size: .85em; background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: 6px; padding: .12em .4em; color: var(--accent-text); } pre.code { background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: var(--radius-m); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); line-height: 1.7; overflow-x: auto; tab-size: 2; /* le righe lunghe vanno a capo invece di far scorrere il blocco in orizzontale; l'indentazione a inizio riga resta intatta (pre-wrap) */ white-space: pre-wrap; overflow-wrap: break-word; } pre.code.nowrap { white-space: pre; } pre.code code { background: none; border: 0; padding: 0; color: var(--text); } /* bottone "copia" automatico su ogni pre.code */ pre.code { position: relative; } .code-copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: .35em; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1; padding: .4em .6em; border-radius: 8px; cursor: pointer; color: var(--text-2); background: color-mix(in srgb, var(--surface) 80%, transparent); border: var(--border-w) solid var(--border-2); opacity: 0; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); backdrop-filter: blur(4px); } pre.code:hover .code-copy, .code-copy:focus-visible { opacity: 1; } .code-copy:hover { color: var(--c-primary); border-color: var(--c-primary); } .code-copy.is-done { color: var(--c-success); border-color: var(--c-success); opacity: 1; } .code-copy .icon { width: 14px; height: 14px; } @media (hover: none) { pre.code .code-copy { opacity: 1; } } /* lascia spazio all'eventuale tag lingua già presente in basso a destra */ .kbd { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface); border: var(--border-w) solid var(--border-2); border-bottom-width: 2px; border-radius: 7px; padding: .15em .5em; } /* Occhiello di sezione — firma tipografica di Vetro */ .eyebrow { display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-text); } .eyebrow::before { content: ""; width: .65em; height: .65em; border-radius: 3px; background: var(--grad-brand); transform: rotate(45deg); } .text-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Colori testuali */ .text-muted { color: var(--text-2); } .text-2 { color: var(--text-2); } /* testo secondario (usata in tutte le demo) */ .text-3 { color: var(--text-3); } /* testo terziario/didascalie */ .text-faint { color: var(--text-3); } .text-primary { color: var(--primary-text); } .text-accent { color: var(--accent-text); } .text-success { color: var(--success-text); } .text-warning { color: var(--warning-text); } .text-danger { color: var(--danger-text); } .text-info { color: var(--info-text); } .text-center { text-align: center; } .text-right { text-align: right; } .upper { text-transform: uppercase; letter-spacing: .06em; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* Icone SVG (sprite montato da vetro.js) */ .icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.28em; } .icon-s { width: 1em; height: 1em; } .icon-l { width: 1.6em; height: 1.6em; } /* ========================================================================== 04 · LAYOUT — container, sezioni, griglia, utilities Breakpoint: sm 640 · md 768 · lg 1024 · xl 1280 ========================================================================== */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .container-narrow { max-width: 880px; } .container-fluid { max-width: none; } .section { padding-block: clamp(56px, 9vw, 108px); } .section-s { padding-block: clamp(32px, 5vw, 56px); } .section-head { max-width: 640px; margin-bottom: var(--sp-6); } .section-head h2 { margin-block: .35em .35em; } /* ---- Griglia a 12 colonne (CSS Grid) ---- */ .grid { display: grid; gap: var(--gap, var(--sp-4)); } .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* su schermi stretti il column-gap di una griglia a 12 tracce (11 gap fissi) farebbe sforare la riga: lo limitiamo, lasciando intatto il row-gap (--gap) */ @media (max-width: 640px) { .grid-12 { column-gap: min(var(--gap, var(--sp-4)), var(--sp-3)); } } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Card responsive senza media query: si adattano da sole */ .grid-auto { display: grid; gap: var(--gap, var(--sp-4)); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 240px), 100%), 1fr)); } .grid-auto-fit { display: grid; gap: var(--gap, var(--sp-4)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 1fr), 1fr)); } .col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3} .col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6} .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9} .col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12} .col-full{grid-column:1/-1} @media (min-width:640px){ .col-sm-1{grid-column:span 1}.col-sm-2{grid-column:span 2}.col-sm-3{grid-column:span 3} .col-sm-4{grid-column:span 4}.col-sm-5{grid-column:span 5}.col-sm-6{grid-column:span 6} .col-sm-7{grid-column:span 7}.col-sm-8{grid-column:span 8}.col-sm-9{grid-column:span 9} .col-sm-10{grid-column:span 10}.col-sm-11{grid-column:span 11}.col-sm-12{grid-column:span 12} } @media (min-width:768px){ .col-md-1{grid-column:span 1}.col-md-2{grid-column:span 2}.col-md-3{grid-column:span 3} .col-md-4{grid-column:span 4}.col-md-5{grid-column:span 5}.col-md-6{grid-column:span 6} .col-md-7{grid-column:span 7}.col-md-8{grid-column:span 8}.col-md-9{grid-column:span 9} .col-md-10{grid-column:span 10}.col-md-11{grid-column:span 11}.col-md-12{grid-column:span 12} } @media (min-width:1024px){ .col-lg-1{grid-column:span 1}.col-lg-2{grid-column:span 2}.col-lg-3{grid-column:span 3} .col-lg-4{grid-column:span 4}.col-lg-5{grid-column:span 5}.col-lg-6{grid-column:span 6} .col-lg-7{grid-column:span 7}.col-lg-8{grid-column:span 8}.col-lg-9{grid-column:span 9} .col-lg-10{grid-column:span 10}.col-lg-11{grid-column:span 11}.col-lg-12{grid-column:span 12} } @media (min-width:1280px){ .col-xl-1{grid-column:span 1}.col-xl-2{grid-column:span 2}.col-xl-3{grid-column:span 3} .col-xl-4{grid-column:span 4}.col-xl-5{grid-column:span 5}.col-xl-6{grid-column:span 6} .col-xl-7{grid-column:span 7}.col-xl-8{grid-column:span 8}.col-xl-9{grid-column:span 9} .col-xl-10{grid-column:span 10}.col-xl-11{grid-column:span 11}.col-xl-12{grid-column:span 12} } /* ---- Flex utilities ---- */ .flex { display: flex; } .inline-flex { display: inline-flex; } .col-dir { flex-direction: column; } .wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1 1 0%; min-width: 0; } .shrink-0 { flex-shrink: 0; } .gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.gap-6{gap:var(--sp-6)}.gap-7{gap:var(--sp-7)} /* ---- Spaziatura ---- */ .m-0{margin:0}.mt-0{margin-top:0}.mb-0{margin-bottom:0} .m-1{margin:var(--sp-1)}.m-2{margin:var(--sp-2)}.m-3{margin:var(--sp-3)}.m-4{margin:var(--sp-4)}.m-5{margin:var(--sp-5)}.m-6{margin:var(--sp-6)} .mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)} .mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}.mb-7{margin-bottom:var(--sp-7)} .mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto} .my-1{margin-block:var(--sp-1)}.my-2{margin-block:var(--sp-2)}.my-3{margin-block:var(--sp-3)}.my-4{margin-block:var(--sp-4)}.my-5{margin-block:var(--sp-5)}.my-6{margin-block:var(--sp-6)} .p-0{padding:0} .p-1{padding:var(--sp-1)}.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)} .pt-2{padding-top:var(--sp-2)}.pt-4{padding-top:var(--sp-4)}.pt-6{padding-top:var(--sp-6)} .pb-2{padding-bottom:var(--sp-2)}.pb-4{padding-bottom:var(--sp-4)}.pb-6{padding-bottom:var(--sp-6)} .px-2{padding-inline:var(--sp-2)}.px-3{padding-inline:var(--sp-3)}.px-4{padding-inline:var(--sp-4)}.px-5{padding-inline:var(--sp-5)} .py-2{padding-block:var(--sp-2)}.py-3{padding-block:var(--sp-3)}.py-4{padding-block:var(--sp-4)}.py-5{padding-block:var(--sp-5)} /* margin per lato sinistro/destro (logici: start/end) */ .ml-0{margin-left:0}.ml-1{margin-left:var(--sp-1)}.ml-2{margin-left:var(--sp-2)}.ml-3{margin-left:var(--sp-3)}.ml-4{margin-left:var(--sp-4)}.ml-5{margin-left:var(--sp-5)}.ml-6{margin-left:var(--sp-6)} .mr-0{margin-right:0}.mr-1{margin-right:var(--sp-1)}.mr-2{margin-right:var(--sp-2)}.mr-3{margin-right:var(--sp-3)}.mr-4{margin-right:var(--sp-4)}.mr-5{margin-right:var(--sp-5)}.mr-6{margin-right:var(--sp-6)} .ms-1{margin-inline-start:var(--sp-1)}.ms-2{margin-inline-start:var(--sp-2)}.ms-3{margin-inline-start:var(--sp-3)}.ms-4{margin-inline-start:var(--sp-4)} .me-1{margin-inline-end:var(--sp-1)}.me-2{margin-inline-end:var(--sp-2)}.me-3{margin-inline-end:var(--sp-3)}.me-4{margin-inline-end:var(--sp-4)} /* padding per lato sinistro/destro */ .pl-0{padding-left:0}.pl-1{padding-left:var(--sp-1)}.pl-2{padding-left:var(--sp-2)}.pl-3{padding-left:var(--sp-3)}.pl-4{padding-left:var(--sp-4)}.pl-5{padding-left:var(--sp-5)}.pl-6{padding-left:var(--sp-6)} .pr-0{padding-right:0}.pr-1{padding-right:var(--sp-1)}.pr-2{padding-right:var(--sp-2)}.pr-3{padding-right:var(--sp-3)}.pr-4{padding-right:var(--sp-4)}.pr-5{padding-right:var(--sp-5)}.pr-6{padding-right:var(--sp-6)} /* bordi per lato, spessore, colore e raggi per lato */ .border-0{border:0}.border-2{border-width:calc(var(--border-w) * 2)} .border-t{border-top:var(--border-w) solid var(--border)}.border-r{border-right:var(--border-w) solid var(--border)} .border-b{border-bottom:var(--border-w) solid var(--border)}.border-l{border-left:var(--border-w) solid var(--border)} .border-primary{border-color:var(--c-primary)}.border-accent{border-color:var(--c-accent)}.border-info{border-color:var(--c-info)} .border-success{border-color:var(--c-success)}.border-warning{border-color:var(--c-warning)}.border-danger{border-color:var(--c-danger)} .rounded-none{border-radius:0}.rounded-t{border-radius:var(--radius-m) var(--radius-m) 0 0}.rounded-b{border-radius:0 0 var(--radius-m) var(--radius-m)} .rounded-l-s{border-radius:var(--radius-s) 0 0 var(--radius-s)}.rounded-r-s{border-radius:0 var(--radius-s) var(--radius-s) 0} /* ---- Display & helpers ---- */ .block{display:block}.inline-block{display:inline-block}.hidden{display:none!important} .relative{position:relative}.sticky-top{position:sticky;top:84px} .w-full{width:100%}.h-full{height:100%} .maxw-prose{max-width:62ch} .overflow-hidden{overflow:hidden} .rounded{border-radius:var(--radius-m)}.rounded-s{border-radius:var(--radius-s)}.rounded-l{border-radius:var(--radius-l)}.rounded-full{border-radius:var(--radius-pill)} .border{border:var(--border-w) solid var(--border)} .shadow-s{box-shadow:var(--shadow-s)}.shadow-m{box-shadow:var(--shadow-m)}.shadow-l{box-shadow:var(--shadow-l)} .bg-surface{background:var(--surface)}.bg-surface-2{background:var(--surface-2)}.bg-soft{background:var(--primary-soft)} /* livelli di opacità (decili) */ .opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-100{opacity:1} /* visibilità & interazione */ .invisible{visibility:hidden}.visible{visibility:visible} .pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto} .select-none{user-select:none;-webkit-user-select:none} .cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-grab{cursor:grab}.cursor-wait{cursor:wait} /* Responsive show/hide */ @media (max-width:767.98px){ .hide-mobile{display:none!important} } @media (min-width:768px){ .only-mobile{display:none!important} } @media (max-width:1023.98px){ .hide-tablet{display:none!important} } @media (min-width:1024px){ .only-tablet-down{display:none!important} } /* Superficie "vetro" — la firma del kit */ .vetro { background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: var(--border-w) solid var(--glass-border); } /* Nastro sfumato sul bordo superiore */ .ribbon { position: relative; } .ribbon::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); border-radius: var(--radius-m) var(--radius-m) 0 0; } .divider-label { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; } .divider-label::before, .divider-label::after { content:""; flex:1; border-top: var(--border-w) solid var(--border); } /* ========================================================================== 05 · BOTTONI, BADGE, CHIP Ogni variante imposta solo --btn-c: il resto si deriva da solo. ========================================================================== */ .btn { --btn-c: var(--c-primary); --btn-on: var(--on-brand); display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .62em 1.15em; border: var(--border-w) solid transparent; border-radius: var(--radius-s); font-weight: 600; font-size: var(--fs-base); line-height: 1.2; color: var(--btn-on); background: linear-gradient(180deg, color-mix(in oklab, var(--btn-c) 90%, #fff) 0%, var(--btn-c) 55%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 4px 14px -6px color-mix(in srgb, var(--btn-c) 55%, transparent); text-decoration: none; user-select: none; white-space: nowrap; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease); } .btn:hover { filter: brightness(1.05) saturate(1.05); text-decoration: none; color: var(--btn-on); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 8px 20px -8px color-mix(in srgb, var(--btn-c) 65%, transparent); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); filter: brightness(.97); } .btn:disabled, .btn.is-disabled { opacity: .55; pointer-events: none; box-shadow: none; } .btn-secondary { --btn-c: var(--c-secondary); } .btn-accent { --btn-c: var(--c-accent); } .btn-success { --btn-c: var(--c-success); } .btn-warning { --btn-c: var(--c-warning); --btn-on: #271a02; } .btn-danger { --btn-c: var(--c-danger); } .btn-info { --btn-c: var(--c-info); } .btn-dark { --btn-c: var(--ink); --btn-on: var(--paper); } .btn-soft { background: color-mix(in srgb, var(--btn-c) 14%, var(--surface)); color: color-mix(in oklab, var(--btn-c) 72%, var(--ink)); box-shadow: none; } .btn-soft:hover { background: color-mix(in srgb, var(--btn-c) 22%, var(--surface)); color: color-mix(in oklab, var(--btn-c) 78%, var(--ink)); filter:none; } .btn-outline { background: transparent; border-color: color-mix(in srgb, var(--btn-c) 55%, var(--border)); color: color-mix(in oklab, var(--btn-c) 72%, var(--ink)); box-shadow: none; } .btn-outline:hover { background: color-mix(in srgb, var(--btn-c) 10%, transparent); filter:none; color: color-mix(in oklab, var(--btn-c) 80%, var(--ink)); } .btn-ghost { background: transparent; box-shadow: none; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); filter: none; } .btn-grad { background: var(--grad-brand); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--c-accent) 60%, transparent); } .btn-sm { padding: .4em .8em; font-size: var(--fs-sm); border-radius: 8px; } .btn-lg { padding: .78em 1.5em; font-size: var(--fs-md); border-radius: 12px; } .btn-pill { border-radius: var(--radius-pill); } .btn-icon { padding: .58em; aspect-ratio: 1; } .btn-icon.btn-sm { padding: .42em; } .btn-block { width: 100%; } .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border: 2px solid color-mix(in srgb, var(--btn-on) 35%, transparent); border-top-color: var(--btn-on); border-radius: 50%; animation: vt-spin .7s linear infinite; } .btn-soft.is-loading::after, .btn-outline.is-loading::after, .btn-ghost.is-loading::after { border-color: color-mix(in srgb, var(--btn-c) 30%, transparent); border-top-color: var(--btn-c); } .btn-group { display: inline-flex; } .btn-group > .btn { border-radius: 0; } .btn-group > .btn:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); } .btn-group > .btn:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; } .btn-group > .btn + .btn { margin-left: 1px; } /* Segmented control (usato anche per lo switch tema) */ .seg { display: inline-flex; gap: 2px; background: var(--surface-2); border: var(--border-w) solid var(--border); border-radius: var(--radius-pill); padding: 3px; } .seg > button { border: 0; background: transparent; color: var(--text-2); padding: .35em .9em; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: .45em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .seg > button:hover { color: var(--text); } .seg > button.is-active { background: var(--surface); color: var(--primary-text); box-shadow: var(--shadow-s); } /* ---- Badge ---- */ .badge { --bd-c: var(--badge-c, var(--c-primary)); /* ricolora inline con --badge-c (come --btn-c per i bottoni) */ display: inline-flex; align-items: center; gap: .35em; font-size: var(--fs-xs); font-weight: 600; line-height: 1; padding: .38em .65em; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bd-c) 14%, var(--surface)); color: color-mix(in oklab, var(--bd-c) 72%, var(--ink)); border: var(--border-w) solid color-mix(in srgb, var(--bd-c) 26%, transparent); white-space: nowrap; } .badge-secondary{--bd-c:var(--c-secondary)}.badge-accent{--bd-c:var(--c-accent)}.badge-success{--bd-c:var(--c-success)} .badge-warning{--bd-c:var(--c-warning)}.badge-danger{--bd-c:var(--c-danger)} .badge-info{--bd-c:var(--c-info)}.badge-neutral{--bd-c:var(--text-3)} .badge-solid { background: var(--bd-c); color: var(--on-brand); border-color: transparent; } .badge-dot::before { content:""; width:.5em; height:.5em; border-radius:50%; background: var(--bd-c); } .badge-lg { font-size: var(--fs-sm); padding: .5em .9em; } /* ---- Chip (rimovibile) ---- */ .chip { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-sm); font-weight: 500; padding: .35em .5em .35em .8em; border-radius: var(--radius-pill); background: var(--surface-2); border: var(--border-w) solid var(--border); } .chip button { border: 0; background: var(--surface-3); color: var(--text-2); width: 1.35em; height: 1.35em; border-radius: 50%; display: grid; place-items: center; font-size: .8em; line-height: 1; } .chip button:hover { background: var(--danger-soft); color: var(--danger-text); } /* Avatar */ .avatar { --av: 38px; width: var(--av); height: var(--av); border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft-2); color: var(--primary-text); font-weight: 700; font-size: calc(var(--av) * .38); border: 2px solid var(--surface); box-shadow: var(--shadow-s); overflow: hidden; flex: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-stack { display: inline-flex; } .avatar-stack .avatar + .avatar { margin-left: calc(var(--av) * -.32); } /* ========================================================================== 06 · FORM ========================================================================== */ .field { display: flex; flex-direction: column; gap: .4rem; } .field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); } .field .help { font-size: var(--fs-xs); color: var(--text-3); } .input { width: 100%; padding: .6em .85em; background: var(--surface); border: var(--border-w) solid var(--border-2); border-radius: var(--radius-s); color: var(--text); font-size: var(--fs-base); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .input::placeholder { color: var(--text-3); } .input:hover { border-color: var(--border-2); } .input:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--primary-soft); } textarea.input { min-height: 96px; resize: vertical; } select.input { appearance: none; padding-right: 2.4em; background-image: linear-gradient(45deg, transparent 49%, var(--text-2) 50%), linear-gradient(-45deg, transparent 49%, var(--text-2) 50%); background-position: calc(100% - 1.15em) 55%, calc(100% - .8em) 55%; background-size: .38em .38em; background-repeat: no-repeat; } .input-sm { padding: .4em .65em; font-size: var(--fs-sm); } .input-lg { padding: .8em 1em; font-size: var(--fs-md); } /* Gruppo con icona/addon */ .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: 0; flex: 1; min-width: 0; } .input-group > :first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); } .input-group > :last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; } .input-group .addon { display: inline-flex; align-items: center; gap: .4em; padding: 0 .8em; background: var(--surface-2); border: var(--border-w) solid var(--border-2); color: var(--text-2); font-size: var(--fs-sm); } .input-group .addon + .input, .input-group .input + .addon, .input-group .input + .btn { margin-left: calc(var(--border-w) * -1); } /* Input con icona interna */ .input-icon { position: relative; } .input-icon > .icon { position: absolute; left: .8em; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .input-icon > .input { padding-left: 2.5em; } /* Stati disabled / readonly */ .input:disabled, select.input:disabled, textarea.input:disabled { opacity: .55; background: var(--surface-2); cursor: not-allowed; } .input[readonly]:not(:disabled) { background: var(--surface-2); color: var(--text-2); } .field.is-disabled > label, label.is-disabled { opacity: .55; cursor: not-allowed; } .switch:disabled { opacity: .55; cursor: not-allowed; } /* Password con occhio (auto-init: input[type=password][data-password]) */ .pw-wrap { position: relative; } .pw-wrap .input { width: 100%; padding-right: 2.8em; } .pw-toggle { position: absolute; right: .35em; top: 50%; translate: 0 -50%; display: inline-grid; place-items: center; width: 2em; height: 2em; padding: 0; border: 0; border-radius: var(--radius-s); background: none; color: var(--text-3); cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .pw-toggle:hover { color: var(--text); background: var(--surface-2); } .pw-toggle .icon { width: 17px; height: 17px; } /* Dropzone — area drag & drop per file */ .dropzone { border: 2px dashed var(--border-2); border-radius: var(--radius-m); background: var(--surface); padding: var(--sp-5); text-align: center; cursor: pointer; user-select: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .dropzone:hover, .dropzone:focus-visible { border-color: var(--c-primary); outline: none; } .dropzone.is-over { border-color: var(--c-primary); background: var(--primary-soft); } .dropzone .dz-icon { width: 26px; height: 26px; color: var(--c-primary); } .dropzone .dz-text { margin: var(--sp-2) 0 0; font-size: var(--fs-base); } .dropzone .dz-text b { color: var(--primary-text); } .dropzone .dz-or { color: var(--text-3); } .dropzone .dz-hint { margin: .25em 0 0; font-size: var(--fs-xs); color: var(--text-3); } .dz-list { list-style: none; margin: 0; padding: 0; text-align: left; } .dropzone.has-files .dz-list { margin-top: var(--sp-4); } .dz-item { display: flex; align-items: center; gap: .6em; padding: .45em .6em; border-radius: var(--radius-s); background: var(--surface-2); border: var(--border-w) solid var(--border); font-size: var(--fs-sm); } .dz-item + .dz-item { margin-top: var(--sp-2); } .dz-item .icon { width: 15px; height: 15px; color: var(--text-3); flex: none; } .dz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-size { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; flex: none; } .dz-remove { display: inline-grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; padding: 0; border: 0; border-radius: var(--radius-s); background: none; color: var(--text-3); cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .dz-remove:hover { color: var(--danger-text); background: var(--danger-soft); } .dz-remove .icon { width: 13px; height: 13px; } /* Validazione */ .is-valid .input, .input.is-valid { border-color: var(--c-success); } .is-valid .input:focus-visible { box-shadow: 0 0 0 4px var(--success-soft); } .is-invalid .input, .input.is-invalid { border-color: var(--c-danger); } .is-invalid .input:focus-visible { box-shadow: 0 0 0 4px var(--danger-soft); } .field .feedback { font-size: var(--fs-xs); display: none; } .is-valid .feedback.valid { display: block; color: var(--success-text); } .is-invalid .feedback.invalid { display: block; color: var(--danger-text); } /* Check / radio nativi accentati */ input[type="checkbox"]:not(.switch), input[type="radio"] { appearance: none; -webkit-appearance: none; width: 1.18em; height: 1.18em; flex: none; display: inline-grid; place-content: center; background: var(--surface); border: var(--border-w) solid var(--border-2); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } input[type="checkbox"]:not(.switch) { border-radius: .3em; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:not(.switch)::before { content: ""; width: .58em; height: .32em; border-left: 2.5px solid var(--on-brand); border-bottom: 2.5px solid var(--on-brand); transform: rotate(-45deg) translate(.02em, -.1em) scale(0); transition: transform var(--t-fast) var(--ease-pop); } input[type="radio"]::before { content: ""; width: .52em; height: .52em; border-radius: 50%; background: var(--on-brand); scale: 0; transition: scale var(--t-fast) var(--ease-pop); } input[type="checkbox"]:not(.switch):checked, input[type="radio"]:checked { background: var(--c-primary); border-color: var(--c-primary); } input[type="checkbox"]:not(.switch):checked::before { transform: rotate(-45deg) translate(.02em, -.1em) scale(1); } input[type="radio"]:checked::before { scale: 1; } input[type="checkbox"]:not(.switch):focus-visible, input[type="radio"]:focus-visible, .switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; } .check { display: inline-flex; align-items: center; gap: .55em; font-size: var(--fs-base); cursor: pointer; } /* Switch */ .switch { appearance: none; -webkit-appearance: none; width: 2.7em; height: 1.5em; border-radius: var(--radius-pill); background: var(--surface-3); border: var(--border-w) solid var(--border-2); position: relative; transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease); cursor: pointer; flex: none; } .switch::after { content: ""; position: absolute; top: 50%; left: .14em; width: 1.12em; height: 1.12em; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-s); transform: translateY(-50%); transition: left var(--t-med) var(--ease-pop), background var(--t-med) var(--ease); } .switch:checked { background: var(--c-primary); border-color: var(--c-primary); } .switch:checked::after { left: calc(100% - 1.26em); background: #fff; } /* Range */ input[type="range"].range { appearance: none; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--c-primary) calc(var(--p, 50) * 1%), var(--surface-3) 0); outline-offset: 4px; } input[type="range"].range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c-primary); box-shadow: var(--shadow-s); cursor: grab; } input[type="range"].range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c-primary); box-shadow: var(--shadow-s); cursor: grab; } input[type="color"].swatch { appearance: none; -webkit-appearance: none; width: 44px; height: 32px; padding: 0; border: var(--border-w) solid var(--border-2); border-radius: var(--radius-s); background: none; cursor: pointer; } input[type="color"].swatch::-webkit-color-swatch-wrapper { padding: 3px; } input[type="color"].swatch::-webkit-color-swatch { border: 0; border-radius: 6px; } input[type="color"].swatch::-moz-color-swatch { border: 0; border-radius: 6px; } /* ========================================================================== 07 · NAVBAR, DROPDOWN, TABS, ACCORDION ========================================================================== */ .navbar { position: relative; z-index: var(--z-nav); background: transparent; transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); border-bottom: var(--border-w) solid transparent; } .navbar-sticky { position: sticky; top: 0; } .navbar.is-scrolled, .navbar-solid { background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom-color: var(--glass-border); box-shadow: var(--shadow-s); } .navbar-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-display); font-weight: 750; font-size: 1.15rem; color: var(--text); letter-spacing: -.02em; } .brand:hover { text-decoration: none; color: var(--text); } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c-primary) 70%, transparent); } .brand-mark .icon { width: 1.05em; height: 1.05em; } .navbar-menu { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; } .nav-link { display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em; border-radius: var(--radius-s); color: var(--text-2); font-weight: 550; font-size: var(--fs-base); } .nav-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .nav-link.is-active { color: var(--primary-text); background: var(--primary-soft); } .nav-toggle { display: none; margin-left: auto; } @media (max-width: 1023.98px) { .nav-toggle { display: inline-flex; } .navbar-menu { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 2px; max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3); margin-left: 0; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-l); opacity: 0; transform: translateY(-8px) scale(.99); pointer-events: none; transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); } .navbar-menu.open { opacity: 1; transform: none; pointer-events: auto; } .navbar-menu .nav-link { padding: .7em .9em; width: 100%; justify-content: flex-start; } /* il dropdown "Altro" si espande IN LINEA, non come riquadro fluttuante */ .navbar-menu .dropdown { width: 100%; } .navbar-menu .dropdown > [data-dropdown] { width: 100%; justify-content: space-between; } .navbar-menu .dropdown > [data-dropdown] .icon { transition: transform var(--t-fast) var(--ease); } .navbar-menu .dropdown.open > [data-dropdown] .icon { transform: rotate(180deg); } .navbar-menu .menu { position: static; min-width: 0; margin: 2px 0 4px; padding: 2px 0 2px var(--sp-3); background: none; border: 0; border-left: 2px solid var(--border); border-radius: 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; display: none; } .navbar-menu .dropdown.open > .menu { display: block; } /* ricerca a tutta larghezza dentro il menu mobile */ .navbar-menu .nav-search { display: block; width: 100%; margin-top: 4px; } .navbar-menu .nav-search input { width: 100%; } .navbar-menu .nav-search kbd { display: none; } /* segmented tema a tutta larghezza */ .navbar-menu .seg { width: 100%; } .navbar-menu .seg button { flex: 1; } } /* ---- Dropdown ---- */ .dropdown { position: relative; display: inline-block; } .menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: .4rem; z-index: var(--z-drop); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-pop); } .menu.menu-end { left: auto; right: 0; transform-origin: top right; } .dropdown.open > .menu { opacity: 1; transform: none; pointer-events: auto; } .menu-item { display: flex; align-items: center; gap: .6em; width: 100%; padding: .55em .7em; border: 0; background: none; border-radius: var(--radius-s); color: var(--text); font-size: var(--fs-base); text-align: left; } .menu-item:hover { background: var(--surface-2); text-decoration: none; color: var(--text); } .menu-item.danger { color: var(--danger-text); } .menu-item.danger:hover { background: var(--danger-soft); } .menu-sep { border: 0; border-top: var(--border-w) solid var(--border); margin: .35rem .2rem; } .menu-label { padding: .4em .7em .2em; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } /* ---- Tabs ---- */ .tabs { display: flex; flex-direction: column; gap: var(--sp-4); } .tab-list { display: flex; gap: var(--sp-1); border-bottom: var(--border-w) solid var(--border); overflow-x: auto; scrollbar-width: none; } .tab-list::-webkit-scrollbar { display: none; } .tab-list [role="tab"], .tab-btn { border: 0; background: none; padding: .6em .95em; font-weight: 600; font-size: var(--fs-base); color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: .45em; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .tab-list [role="tab"]:hover { color: var(--text); } .tab-list [role="tab"].is-active { color: var(--primary-text); border-bottom-color: var(--c-primary); } .tab-panel { display: none; } .tab-panel.is-active { display: block; animation: vt-fade-up var(--t-med) var(--ease) both; } /* Tabs "pill" alternative */ .tab-list.pills { border: 0; gap: .35rem; } .tab-list.pills [role="tab"] { border: var(--border-w) solid transparent; border-radius: var(--radius-pill); margin: 0; padding: .45em .95em; } .tab-list.pills [role="tab"].is-active { background: var(--primary-soft); border-color: var(--primary-border); } /* ---- Accordion (nativo
) ---- */ .accordion { border: var(--border-w) solid var(--border); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; } .accordion + .accordion { margin-top: var(--sp-2); } .accordion > summary { list-style: none; display: flex; align-items: center; gap: .7em; padding: var(--sp-4) var(--sp-5); font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease); } .accordion > summary::-webkit-details-marker { display: none; } .accordion > summary:hover { background: var(--surface-2); } .accordion > summary::after { content: ""; margin-left: auto; width: .55em; height: .55em; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform var(--t-med) var(--ease); flex: none; } .accordion[open] > summary { color: var(--primary-text); } .accordion[open] > summary::after { transform: rotate(225deg); } .accordion .accordion-body { padding: 0 var(--sp-5) var(--sp-4); color: var(--text-2); } /* Breadcrumb — markup valido: