Struttura: il sito esistente si sposta sotto apps/sito
Primo passo della separazione sito / piattaforme decisa da Adriano il 03/09: due applicazioni autosufficienti, senza workspace di root, cosi' che ognuna resti un progetto Astro completo ed estraibile. Qui non cambia niente del codice: solo la radice. I pattern del .gitignore che avevano una barra erano ancorati alla radice e dopo lo spostamento non avrebbero piu' coperto niente (data/*.db*, uploads/*): resi validi a qualunque profondita'. Suite: 45 file, 347 test verdi prima e dopo lo spostamento. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EndnceRA5WnA6rvA5iV9WL
This commit is contained in:
AdrianoDev
@@ -0,0 +1,92 @@
|
||||
/* === Design tokens (valori campionati da Figma) === */
|
||||
:root {
|
||||
--c-accent: #b8a98c;
|
||||
--c-accent-dark: #9c8b70;
|
||||
--c-dark: #3a2929;
|
||||
--c-dark-2: #4a3a30;
|
||||
--c-heading: #2b2b2b;
|
||||
--c-text: #4b4b4b;
|
||||
--c-text-light: #8a8a8a;
|
||||
--c-bg: #ffffff;
|
||||
--c-bg-alt: #f5f3f0;
|
||||
--font-heading: 'Montserrat', sans-serif;
|
||||
--font-body: 'Open Sans', sans-serif;
|
||||
--header-h: 70px;
|
||||
}
|
||||
|
||||
/* === Reset === */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
body { margin: 0; font-family: var(--font-body); color: var(--c-text); font-size: 16px; line-height: 1.7; background: var(--c-bg); }
|
||||
img { max-width: 100%; height: auto; display: block; }
|
||||
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--c-heading); font-weight: 500; letter-spacing: .04em; line-height: 1.2; margin: 0 0 .5em; }
|
||||
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
|
||||
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
|
||||
h3 { font-size: 1.3rem; }
|
||||
a { color: inherit; }
|
||||
p { margin: 0 0 1em; }
|
||||
|
||||
/* === Utility === */
|
||||
.container { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
|
||||
.section { padding-block: 90px; }
|
||||
.section--alt { background: var(--c-bg-alt); }
|
||||
.section--dark { background: var(--c-dark); color: #cfc6bd; }
|
||||
.section--dark h2, .section--dark h3 { color: #fff; }
|
||||
.eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .25em; font-size: .75rem; color: var(--c-accent-dark); }
|
||||
.section-heading { text-align: center; max-width: 640px; margin: 0 auto 56px; }
|
||||
.section-heading h2 { text-transform: uppercase; letter-spacing: .12em; }
|
||||
|
||||
.btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; padding: 16px 26px; background: var(--c-accent); color: #fff; transition: background .2s; }
|
||||
.btn:hover { background: var(--c-accent-dark); }
|
||||
.btn::after { content: '→'; font-size: .9rem; }
|
||||
.btn--dark { background: var(--c-dark); }
|
||||
.btn--dark:hover { background: var(--c-dark-2); }
|
||||
.btn--light { background: #fff; color: var(--c-heading); }
|
||||
|
||||
/* === Form === */
|
||||
.field { width: 100%; border: 1px solid #ddd; background: #fff; padding: 14px 16px; font-family: var(--font-body); font-size: .95rem; color: var(--c-text); margin-bottom: 14px; }
|
||||
.field:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
|
||||
textarea.field { min-height: 120px; resize: vertical; }
|
||||
.form-msg { font-size: .9rem; margin-top: 8px; }
|
||||
.form-msg--ok { color: #3c7a3c; }
|
||||
.form-msg--err { color: #b03030; }
|
||||
|
||||
/* honeypot */
|
||||
.hp { position: absolute; left: -9999px; opacity: 0; }
|
||||
|
||||
/* === Animazioni (stile template Prowess) === */
|
||||
/* Lo stato nascosto vale solo con JS attivo (html.js): senza JS tutto resta visibile. */
|
||||
html.js [data-reveal], html.js .section-heading { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; transition-delay: var(--reveal-delay, 0s); }
|
||||
html.js [data-reveal="left"] { transform: translateX(-60px); }
|
||||
html.js [data-reveal="right"] { transform: translateX(60px); }
|
||||
html.js [data-reveal="fade"] { transform: none; }
|
||||
html.js [data-reveal].is-inview, html.js .section-heading.is-inview { opacity: 1; transform: none; }
|
||||
|
||||
.btn::after { transition: transform .3s ease; }
|
||||
.btn:hover::after { transform: translateX(5px); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html.js [data-reveal], html.js .section-heading { opacity: 1; transform: none; transition: none; }
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
|
||||
/* === Stili contenuto (preset pannello /admin/content) === */
|
||||
.cs-size-s { font-size: .85em; }
|
||||
.cs-size-m { font-size: 1em; }
|
||||
.cs-size-l { font-size: 1.25em; }
|
||||
.cs-size-xl { font-size: 1.5em; }
|
||||
.cs-size-xxl { font-size: 2em; }
|
||||
.cs-color-accent { color: var(--c-accent); }
|
||||
.cs-color-accent-dark { color: var(--c-accent-dark); }
|
||||
.cs-color-dark { color: var(--c-dark); }
|
||||
.cs-color-heading { color: var(--c-heading); }
|
||||
.cs-color-text { color: var(--c-text); }
|
||||
.cs-color-text-light { color: var(--c-text-light); }
|
||||
.cs-color-white { color: #fff; }
|
||||
.cs-weight-normal { font-weight: 400; }
|
||||
.cs-weight-bold { font-weight: 700; }
|
||||
.cs-style-normal { font-style: normal; }
|
||||
.cs-style-italic { font-style: italic; }
|
||||
.cs-align-left { text-align: left; }
|
||||
.cs-align-center { text-align: center; }
|
||||
.cs-align-right { text-align: right; }
|
||||
.cs-align-justify { text-align: justify; }
|
||||
@@ -0,0 +1,141 @@
|
||||
/* Stile della piattaforma Longevity.
|
||||
Vive in un foglio globale, non in <style> scoped, perché le stesse classi servono sia
|
||||
ai componenti Astro sia alle isole React (questionario e radar), che lo scope di Astro
|
||||
non raggiungerebbe. Tutto è prefissato `.lg` e usa i token del sito.
|
||||
|
||||
A differenza di Stress Index qui non c'è semaforo verde/ambra/mattone sui punteggi:
|
||||
il servizio è premium ma non clinico, e un rosso su un punteggio del corpo sarebbe un
|
||||
giudizio, non un'informazione. L'intensità di un punteggio si legge nell'opacità
|
||||
dell'accento del sito (var(--lg-intensita), impostata inline dal componente che disegna
|
||||
il punteggio), mai in un colore diverso. I due soli colori di segnale locali sono:
|
||||
- --lg-tratteggio: il perimetro di ciò che non sappiamo ancora (un asse senza dati
|
||||
sufficienti), non un errore;
|
||||
- --lg-fuori-range: SOLO per una misura sospetta (es. un valore fisiologicamente
|
||||
improbabile), mai per un punteggio — segnala un problema della misura, non della
|
||||
persona. Riusa il mattone di Stress Index (--si-bad: #b05a4e). */
|
||||
|
||||
.lg {
|
||||
--lg-line: #e4dfd7;
|
||||
--lg-surface: #ffffff;
|
||||
--lg-tratteggio: #d8d2c8;
|
||||
--lg-fuori-range: #b05a4e;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: var(--c-bg-alt);
|
||||
}
|
||||
|
||||
/* --- guscio del referto: una colonna che scorre, senza navigazione --- */
|
||||
.lg-shell {
|
||||
width: 100%;
|
||||
max-width: 760px;
|
||||
min-height: 100vh;
|
||||
background: var(--lg-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- intestazione --- */
|
||||
.lg-top {
|
||||
padding: 18px 32px;
|
||||
border-bottom: 1px solid var(--lg-line);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: var(--lg-surface);
|
||||
}
|
||||
.lg-top p { margin: 0; }
|
||||
.lg-top__crumbs {
|
||||
font-family: var(--font-heading); font-size: .74rem; letter-spacing: .14em;
|
||||
text-transform: uppercase; color: var(--c-text-light);
|
||||
}
|
||||
.lg-top__crumbs strong { color: var(--c-heading); font-weight: 600; }
|
||||
|
||||
.lg-main { flex: 1; padding: 34px 32px 70px; }
|
||||
|
||||
/* --- intestazione di pagina --- */
|
||||
.lg-head { margin-bottom: 28px; }
|
||||
.lg-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: none; letter-spacing: .02em; margin-bottom: .25em; }
|
||||
.lg-head p { margin: 0; color: var(--c-text-light); font-size: .9rem; }
|
||||
|
||||
/* --- la carta di un punteggio ---
|
||||
Nessun colore «buono» o «cattivo»: l'intensità si legge nell'opacità dell'accento
|
||||
(--lg-intensita, 0..1, impostata inline dal componente in base al punteggio). */
|
||||
.lg-card { background: var(--lg-surface); border: 1px solid var(--lg-line); padding: 20px 22px; }
|
||||
.lg-card--incompleto { border-style: dashed; border-color: var(--lg-tratteggio); }
|
||||
|
||||
.lg-score { display: flex; align-items: baseline; gap: 8px; }
|
||||
.lg-score__value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; color: var(--c-heading); }
|
||||
.lg-score__max { font-size: .82rem; color: var(--c-text-light); }
|
||||
.lg-score__label {
|
||||
font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
|
||||
letter-spacing: .16em; text-transform: uppercase; color: var(--c-heading);
|
||||
}
|
||||
|
||||
.lg-score__bar { height: 6px; background: var(--c-bg-alt); overflow: hidden; }
|
||||
.lg-score__bar-fill { height: 100%; background: var(--c-accent); opacity: var(--lg-intensita, 1); }
|
||||
|
||||
.lg-misura--fuori-range { color: var(--lg-fuori-range); font-weight: 600; }
|
||||
|
||||
.lg-muted { color: var(--c-text-light); }
|
||||
|
||||
/* i numeri che si confrontano nel tempo non devono ballare a ogni cifra */
|
||||
.lg-num { font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* --- il referto: colonna di sezioni --- */
|
||||
.lg-referto { display: flex; flex-direction: column; gap: 24px; }
|
||||
|
||||
/* --- il radar dei sette assi: area piena + perimetro tratteggiato ---
|
||||
Il disegno vive nell'isola React (Radar.tsx); qui solo il testo sotto al grafico —
|
||||
l'elenco di ciò che manca, che è la parte che rende il buco un invito. */
|
||||
.lg-radar { display: flex; flex-direction: column; gap: 20px; }
|
||||
.lg-radar__grafico { width: 100%; }
|
||||
.lg-radar__intro { margin: 0; font-size: .86rem; color: var(--c-text-light); }
|
||||
.lg-radar__mancano { display: flex; flex-direction: column; gap: 14px; }
|
||||
.lg-radar__voce { border-top: 1px dashed var(--lg-tratteggio); padding-top: 12px; }
|
||||
.lg-radar__voce-nome {
|
||||
margin: 0 0 6px; font-family: var(--font-heading); font-size: .82rem; font-weight: 600;
|
||||
color: var(--c-heading);
|
||||
}
|
||||
.lg-radar__lista { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--c-text-light); }
|
||||
.lg-radar__lista li { margin-bottom: 2px; }
|
||||
|
||||
/* --- le carte dei macro-score --- */
|
||||
.lg-macro { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
|
||||
.lg-macro__nota { margin: 8px 0 0; font-size: .78rem; }
|
||||
|
||||
/* --- il questionario: un blocco alla volta, avanti/indietro --- */
|
||||
.lg-form { display: flex; flex-direction: column; gap: 24px; }
|
||||
.lg-form__passo {
|
||||
font-family: var(--font-heading); font-size: .74rem; letter-spacing: .12em;
|
||||
text-transform: uppercase; color: var(--c-text-light); margin: 0;
|
||||
}
|
||||
.lg-form__blocco { display: flex; flex-direction: column; gap: 16px; }
|
||||
.lg-form__blocco h2 { font-size: 1.1rem; margin: 0; }
|
||||
|
||||
.lg-field { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
|
||||
.lg-field > span { color: var(--c-heading); font-weight: 500; }
|
||||
.lg-field input[type="number"],
|
||||
.lg-field textarea {
|
||||
border: 1px solid var(--lg-line); padding: 9px 11px; font: inherit; background: var(--lg-surface);
|
||||
}
|
||||
.lg-field textarea { min-height: 68px; resize: vertical; }
|
||||
|
||||
.lg-field--consenso { border: 1px solid var(--lg-line); padding: 16px 18px; gap: 10px; }
|
||||
.lg-field--consenso legend { padding: 0 4px; font-weight: 500; color: var(--c-heading); }
|
||||
.lg-field--consenso label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
|
||||
|
||||
.lg-form__errore { color: var(--c-heading); font-weight: 600; margin: 0; }
|
||||
|
||||
.lg-form__nav { display: flex; justify-content: space-between; gap: 12px; }
|
||||
.lg-form__nav button {
|
||||
font-family: var(--font-heading); font-size: .78rem; font-weight: 600; letter-spacing: .08em;
|
||||
text-transform: uppercase; padding: 11px 22px; border: 1px solid var(--c-heading);
|
||||
background: transparent; color: var(--c-heading); cursor: pointer;
|
||||
}
|
||||
.lg-form__nav button:disabled { opacity: .35; cursor: not-allowed; }
|
||||
.lg-form__nav button:last-child:not(:only-child) { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lg-top, .lg-main { padding-left: 20px; padding-right: 20px; }
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
/* Stile della piattaforma Stress Index.
|
||||
Vive in un foglio globale, non in <style> scoped, perché le stesse classi servono sia
|
||||
ai componenti Astro sia alle isole React (grafici e viste interattive), che lo scope
|
||||
di Astro non raggiungerebbe. Tutto è prefissato `.si` e usa i token del sito. */
|
||||
|
||||
.si {
|
||||
--si-line: #e4dfd7;
|
||||
--si-surface: #ffffff;
|
||||
--si-ok: #6f8f6a;
|
||||
--si-warn: #c08a3e;
|
||||
--si-bad: #b05a4e;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background: var(--c-bg-alt);
|
||||
}
|
||||
|
||||
/* --- sidebar --- */
|
||||
.si-side {
|
||||
width: 250px; flex: 0 0 250px; height: 100vh; position: sticky; top: 0; overflow-y: auto;
|
||||
background: var(--c-dark); color: #cfc6bd; padding: 28px 20px 40px;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.si-brand {
|
||||
display: block; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600;
|
||||
letter-spacing: .1em; text-transform: uppercase; color: #fff; text-decoration: none; line-height: 1.1;
|
||||
}
|
||||
.si-brand .eyebrow { display: block; font-size: .7rem; letter-spacing: .18em; color: var(--c-accent); margin-bottom: 5px; }
|
||||
.si-home {
|
||||
display: inline-block; margin: 16px 0 22px; font-family: var(--font-heading); font-size: .68rem;
|
||||
font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent);
|
||||
text-decoration: none; border-bottom: 1px solid transparent;
|
||||
}
|
||||
.si-home:hover { border-bottom-color: var(--c-accent); }
|
||||
|
||||
.si-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
|
||||
.si-nav__link {
|
||||
display: flex; align-items: center; gap: 8px; padding: 9px 12px; text-decoration: none;
|
||||
font-family: var(--font-heading); font-size: .74rem; font-weight: 600; letter-spacing: .12em;
|
||||
text-transform: uppercase; color: #b6ada3; border-left: 3px solid transparent;
|
||||
}
|
||||
.si-nav__link:hover { color: #fff; background: rgba(255,255,255,.06); }
|
||||
.si-nav__link.is-active { color: #fff; background: rgba(184,169,140,.22); border-left-color: var(--c-accent); }
|
||||
.si-nav__badge {
|
||||
margin-left: auto; background: var(--c-accent); color: var(--c-dark); border-radius: 999px;
|
||||
padding: 1px 7px; font-size: .58rem; letter-spacing: .1em;
|
||||
}
|
||||
|
||||
/* --- shell contenuto --- */
|
||||
.si-body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
|
||||
.si-top {
|
||||
display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
|
||||
background: var(--si-surface); border-bottom: 1px solid var(--si-line); padding: 16px 32px;
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.si-top p { margin: 0; }
|
||||
.si-top__crumbs { font-family: var(--font-heading); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-light); }
|
||||
.si-top__crumbs strong { color: var(--c-heading); font-weight: 600; }
|
||||
.si-top__studio { font-size: .8rem; color: var(--c-text-light); }
|
||||
.si-main { padding: 34px 32px 70px; }
|
||||
|
||||
/* --- intestazione di pagina --- */
|
||||
.si-head { margin-bottom: 28px; }
|
||||
.si-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: none; letter-spacing: .02em; margin-bottom: .25em; }
|
||||
.si-head p { margin: 0; color: var(--c-text-light); font-size: .9rem; }
|
||||
|
||||
/* --- griglie --- */
|
||||
.si-grid { display: grid; gap: 20px; }
|
||||
.si-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
|
||||
.si-grid--2 { grid-template-columns: 2fr 1fr; align-items: start; }
|
||||
.si-grid--halves { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
||||
.si-stack { display: flex; flex-direction: column; gap: 20px; }
|
||||
.si-mt { margin-top: 20px; }
|
||||
|
||||
/* --- card --- */
|
||||
.si-card { background: var(--si-surface); border: 1px solid var(--si-line); padding: 20px 22px; }
|
||||
.si-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
|
||||
.si-card__title {
|
||||
margin: 0; font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
|
||||
letter-spacing: .16em; text-transform: uppercase; color: var(--c-heading);
|
||||
}
|
||||
.si-card__action { font-family: var(--font-heading); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-dark); text-decoration: none; }
|
||||
.si-card__action:hover { text-decoration: underline; }
|
||||
|
||||
/* --- kpi --- */
|
||||
.si-kpi__label { font-size: .78rem; color: var(--c-text-light); letter-spacing: .04em; }
|
||||
.si-kpi__value { font-family: var(--font-heading); font-size: 2rem; font-weight: 500; color: var(--c-heading); margin: 6px 0 4px; }
|
||||
.si-kpi__delta { font-size: .78rem; font-weight: 600; }
|
||||
.si-kpi__delta--up { color: var(--si-ok); }
|
||||
.si-kpi__delta--down { color: var(--si-bad); }
|
||||
|
||||
/* --- liste e tabelle --- */
|
||||
.si-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
|
||||
.si-list--rows > li { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .88rem; }
|
||||
.si-list--defs .si-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: .88rem; }
|
||||
.si-list--defs dd { margin: 0; color: var(--c-heading); }
|
||||
.si-muted { color: var(--c-text-light); }
|
||||
.si-small { font-size: .78rem; }
|
||||
.si-note p { margin: 0; font-size: .84rem; }
|
||||
.si-note__meta { margin-top: 2px; font-size: .76rem; color: var(--c-text-light); }
|
||||
|
||||
.si-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
|
||||
.si-table th, .si-table td { border-bottom: 1px solid var(--si-line); padding: 11px 10px; text-align: left; vertical-align: middle; }
|
||||
.si-table th {
|
||||
font-family: var(--font-heading); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
|
||||
text-transform: uppercase; color: var(--c-text-light);
|
||||
}
|
||||
.si-table tbody tr:hover { background: var(--c-bg-alt); }
|
||||
.si-table a { color: var(--c-accent-dark); font-weight: 600; text-decoration: none; }
|
||||
.si-table a:hover { text-decoration: underline; }
|
||||
.si-table__num { font-family: var(--font-heading); }
|
||||
|
||||
/* --- elementi --- */
|
||||
.si-avatar {
|
||||
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
|
||||
border-radius: 50%; background: var(--c-accent); color: #fff; font-family: var(--font-heading);
|
||||
font-size: .74rem; font-weight: 600; letter-spacing: .04em; flex: 0 0 34px;
|
||||
}
|
||||
.si-tag {
|
||||
display: inline-block; border: 1px solid var(--si-line); padding: 2px 9px; margin-right: 5px;
|
||||
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-light);
|
||||
}
|
||||
.si-badge { display: inline-block; padding: 2px 9px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.si-badge--ok { background: rgba(111,143,106,.16); color: var(--si-ok); }
|
||||
.si-badge--warn { background: rgba(192,138,62,.16); color: var(--si-warn); }
|
||||
.si-badge--bad { background: rgba(176,90,78,.16); color: var(--si-bad); }
|
||||
|
||||
.si-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--si-line); }
|
||||
.si-alert:last-child { border-bottom: 0; }
|
||||
.si-alert__mark { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: 0 0 7px; background: var(--si-warn); }
|
||||
.si-alert--error .si-alert__mark { background: var(--si-bad); }
|
||||
.si-alert__text { font-size: .88rem; font-weight: 600; color: var(--c-heading); }
|
||||
.si-alert__meta { font-size: .76rem; color: var(--c-text-light); }
|
||||
|
||||
.si-btn {
|
||||
display: inline-block; border: 1px solid var(--si-line); background: none; cursor: pointer;
|
||||
padding: 6px 14px; font-family: var(--font-heading); font-size: .66rem; font-weight: 600;
|
||||
letter-spacing: .14em; text-transform: uppercase; color: var(--c-heading); text-decoration: none;
|
||||
}
|
||||
.si-btn:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
|
||||
.si-btn--solid { background: var(--c-dark); border-color: var(--c-dark); color: #fff; }
|
||||
.si-btn--solid:hover { background: var(--c-dark-2); color: #fff; }
|
||||
|
||||
.si-field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--c-text-light); }
|
||||
.si-field input, .si-field select, .si-field textarea {
|
||||
border: 1px solid var(--si-line); background: #fff; padding: 9px 11px; font: inherit;
|
||||
font-size: .88rem; color: var(--c-text); border-radius: 0;
|
||||
}
|
||||
.si-field input:focus, .si-field select:focus, .si-field textarea:focus { outline: 2px solid var(--c-accent); outline-offset: -2px; }
|
||||
|
||||
/* --- misura, barre --- */
|
||||
.si-bar { height: 6px; background: var(--c-bg-alt); overflow: hidden; }
|
||||
.si-bar__fill { height: 100%; background: var(--c-accent); }
|
||||
.si-bar__fill--ok { background: var(--si-ok); }
|
||||
.si-bar__fill--warn { background: var(--si-warn); }
|
||||
.si-bar__fill--bad { background: var(--si-bad); }
|
||||
|
||||
.si-score { display: flex; align-items: baseline; gap: 8px; }
|
||||
.si-score__value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; color: var(--c-heading); }
|
||||
.si-score__max { font-size: .82rem; color: var(--c-text-light); }
|
||||
|
||||
/* --- tab (isole React) --- */
|
||||
.si-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--si-line); margin-bottom: 22px; }
|
||||
.si-tabs__btn {
|
||||
background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 10px 2px;
|
||||
font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .14em;
|
||||
text-transform: uppercase; color: var(--c-text-light);
|
||||
}
|
||||
.si-tabs__btn[aria-selected='true'] { color: var(--c-heading); border-bottom-color: var(--c-accent); }
|
||||
|
||||
.si-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
||||
.si-chip {
|
||||
background: none; border: 1px solid var(--si-line); cursor: pointer; padding: 5px 12px;
|
||||
font-family: var(--font-heading); font-size: .66rem; font-weight: 600; letter-spacing: .12em;
|
||||
text-transform: uppercase; color: var(--c-text-light);
|
||||
}
|
||||
.si-chip[aria-pressed='true'] { border-color: var(--c-accent); background: var(--c-bg-alt); color: var(--c-accent-dark); }
|
||||
|
||||
.si-chart { width: 100%; }
|
||||
.si-chart__empty { font-size: .85rem; color: var(--c-text-light); }
|
||||
|
||||
/* --- mobile --- */
|
||||
.si-menu-btn { display: none; }
|
||||
@media (max-width: 900px) {
|
||||
.si { display: block; }
|
||||
.si-menu-btn {
|
||||
display: block; position: sticky; top: 0; z-index: 20; background: var(--c-dark); color: #fff;
|
||||
font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .18em;
|
||||
text-transform: uppercase; padding: 14px 20px; cursor: pointer;
|
||||
}
|
||||
.si-side { display: none; width: auto; flex: none; height: auto; position: static; }
|
||||
.si-menu-toggle:checked ~ .si-side { display: flex; }
|
||||
.si-top { padding: 14px 20px; flex-direction: column; gap: 4px; }
|
||||
.si-main { padding: 24px 20px 60px; }
|
||||
.si-grid--2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* --- elenco clienti --- */
|
||||
.si-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
|
||||
.si-toolbar p { margin: 0; }
|
||||
.si-field--inline { flex-direction: row; align-items: center; }
|
||||
.si-field--inline input { min-width: 260px; }
|
||||
.si-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
.si-client { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
||||
.si-client__name { display: block; font-weight: 600; color: var(--c-heading); }
|
||||
.si-client__mail { display: block; font-size: .76rem; color: var(--c-text-light); font-weight: 400; }
|
||||
.si-client:hover .si-client__name { color: var(--c-accent-dark); }
|
||||
.si-meter { display: flex; align-items: center; gap: 10px; }
|
||||
.si-meter .si-bar { width: 74px; flex: 0 0 74px; }
|
||||
.si-empty { margin: 16px 0 0; }
|
||||
|
||||
/* --- scheda cliente --- */
|
||||
.si-client-head { display: flex; align-items: center; gap: 16px; }
|
||||
.si-client-head h1 { margin: 0 0 2px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); text-transform: none; letter-spacing: .02em; }
|
||||
.si-client-head p { margin: 0; }
|
||||
.si-avatar--lg { width: 52px; height: 52px; flex: 0 0 52px; font-size: .95rem; }
|
||||
|
||||
.si-gauges { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; }
|
||||
.si-gauge { width: 150px; text-align: center; }
|
||||
.si-gauge__svg { width: 100%; height: auto; }
|
||||
.si-gauge__value { margin: 2px 0 0; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 500; color: var(--c-heading); }
|
||||
.si-gauge__max { font-size: .78rem; color: var(--c-text-light); }
|
||||
.si-gauge__label { margin: 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-light); }
|
||||
|
||||
.si-insight { background: var(--c-dark); color: #cfc6bd; padding: 22px 24px; }
|
||||
.si-insight p { margin: 0; font-size: .9rem; }
|
||||
.si-insight__title {
|
||||
font-family: var(--font-heading); font-size: .7rem; font-weight: 600; letter-spacing: .18em;
|
||||
text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.si-scroll-x { overflow-x: auto; }
|
||||
.si-note-card { border: 1px solid var(--si-line); padding: 12px 14px; }
|
||||
.si-note-card p { margin: 0; font-size: .86rem; }
|
||||
|
||||
.si-chat { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
||||
.si-chat__row { display: flex; }
|
||||
.si-chat__row--professionista { justify-content: flex-end; }
|
||||
.si-chat__bubble { max-width: 70%; padding: 10px 14px; background: var(--c-bg-alt); border: 1px solid var(--si-line); }
|
||||
.si-chat__row--professionista .si-chat__bubble { background: var(--c-dark); border-color: var(--c-dark); color: #efe9e1; }
|
||||
.si-chat__bubble p { margin: 0; font-size: .86rem; }
|
||||
.si-chat__when { margin-top: 4px !important; font-size: .7rem; opacity: .7; }
|
||||
.si-chat__compose { display: flex; align-items: center; gap: 10px; }
|
||||
.si-chat__compose .si-field { flex: 1; }
|
||||
.si-chat__compose input { width: 100%; }
|
||||
|
||||
.si-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
|
||||
.si-tag--removable { display: inline-flex; align-items: center; gap: 7px; margin-right: 0; }
|
||||
.si-tag--removable button { background: none; border: 0; cursor: pointer; color: inherit; font-size: .7rem; padding: 0; }
|
||||
|
||||
/* --- analytics, sport, impostazioni --- */
|
||||
.si-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
|
||||
.si-segment { border: 1px solid var(--si-line); padding: 16px 18px; }
|
||||
.si-segment__label { margin: 0; font-weight: 600; color: var(--c-heading); font-size: .9rem; }
|
||||
.si-segment p { margin: 0; }
|
||||
.si-segment .si-kpi__value { margin: 6px 0 2px; }
|
||||
.si-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
|
||||
.si-prefs > li { align-items: flex-start; }
|
||||
.si-prefs strong { display: block; font-size: .88rem; color: var(--c-heading); }
|
||||
.si-prefs .si-small { display: block; }
|
||||
|
||||
/* --- team live --- */
|
||||
.si-live { text-align: center; padding: 54px 26px; }
|
||||
.si-live__title { font-family: var(--font-heading); font-size: 1.05rem; color: var(--c-heading); margin: 0 0 6px; }
|
||||
.si-live__how { max-width: 560px; margin: 32px auto 0; border: 1px solid var(--si-line); padding: 20px 22px; text-align: left; background: var(--c-bg-alt); }
|
||||
.si-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
|
||||
.si-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--c-text); }
|
||||
.si-steps__num {
|
||||
flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: #fff;
|
||||
display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading);
|
||||
font-size: .72rem; font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- organizzazione --- */
|
||||
.si-center { display: flex; justify-content: center; padding: 40px 0; }
|
||||
.si-org { width: 100%; max-width: 460px; text-align: center; padding: 34px 32px; }
|
||||
.si-org h1 { font-size: 1.4rem; text-transform: none; letter-spacing: .02em; margin-bottom: .4em; }
|
||||
.si-org p { margin: 0; }
|
||||
.si-org .si-field { text-align: left; }
|
||||
.si-org__cta:disabled { opacity: .45; cursor: not-allowed; }
|
||||
|
||||
/* --- analytics: intervallo e classifiche --- */
|
||||
.si-range { display: flex; align-items: center; gap: 8px; }
|
||||
.si-range__sep { color: var(--c-text-light); }
|
||||
.si-range input { padding: 7px 10px; }
|
||||
.si-card__head p { margin: 4px 0 0; }
|
||||
.si-rank { list-style: none; margin: 0; padding: 0; }
|
||||
.si-rank li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--si-line); }
|
||||
.si-rank li:last-child { border-bottom: 0; }
|
||||
.si-rank a { text-decoration: none; color: var(--c-heading); font-weight: 600; font-size: .9rem; }
|
||||
.si-rank a:hover { color: var(--c-accent-dark); }
|
||||
.si-rank__value { display: block; text-align: right; font-family: var(--font-heading); font-size: 1.05rem; }
|
||||
.si-rank__value--ok { color: var(--si-ok); }
|
||||
.si-rank__value--bad { color: var(--si-bad); }
|
||||
.si-rank__count { display: block; text-align: right; font-size: .72rem; color: var(--c-text-light); }
|
||||
|
||||
/* --- modulo sport --- */
|
||||
.si-badge--pro { background: var(--c-accent); color: #fff; vertical-align: middle; margin-left: 8px; }
|
||||
.si-filters { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
|
||||
.si-filters__count { margin: 0 0 8px auto; }
|
||||
.si-athlete__name { font-size: 1.05rem; text-transform: none; letter-spacing: .02em; margin: 0 0 2px; }
|
||||
.si-athlete__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
||||
.si-athlete__stats > div { background: var(--c-bg-alt); padding: 14px 10px; text-align: center; }
|
||||
.si-athlete__stats p { margin: 0; }
|
||||
.si-athlete__num { font-family: var(--font-heading); font-size: 1.3rem; color: var(--c-heading); }
|
||||
.si-athlete__foot {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;
|
||||
padding-top: 14px; border-top: 1px solid var(--si-line); text-decoration: none;
|
||||
font-size: .82rem; color: var(--c-text-light);
|
||||
}
|
||||
.si-athlete__foot:hover { color: var(--c-accent-dark); }
|
||||
Reference in New Issue
Block a user