/* ══════════════════════════════════════════════════════════════════ LA FACCIA DAVINCI PROGRAM: «la sala buia» (docs/piano.md A14, fase 2) Caricato SOLO sulla faccia DaVinci (services/brand.py, `css_tema`), dopo i quattro fogli di base: a parità di specificità vince lui. Le regole stanno comunque sotto :root[data-brand="dvp"], così un foglio finito per sbaglio su Iris non cambia niente. Da dove vengono i valori: il sistema del sito davinciprogram.it (repo davinci-site, DESIGN.md e src/sezioni/styles.css), scelto da Francesco il 22/09. In una riga: fondo nero caldo, un solo accento (il mattone), Inter leggera per i titoli, JetBrains Mono per le etichette, la CTA a pillola vuota. Gli angoli restano quelli di Iris. Decisioni di Francesco del 23/09 sulla vetrina (gruppo 15): angoli tondi come Iris, bottoni e selezioni neutri, etichette in mono. ⛔ Il mattone è TESTO e BORDO, mai un campo pieno grande (sul sito il campo mattone del prezzo è stato bocciato: «orripilante»). Per questo le tinte dei bottoni e delle selezioni qui sono neutre (sotto). ⛔ Si ridefiniscono TOKEN; una regola di componente si scrive qui solo dove il sistema della sala buia è diverso da quello di Iris (i titoli leggeri, le etichette in mono, la CTA a pillola vuota). ══════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); } :root[data-brand="dvp"] { /* superfici: il nero caldo del sito e due gradini sopra, con lo stesso passo di Iris (+8/+9 su ogni canale) */ --ink: #0e0d0c; --surface: #171514; --surface-2: #1f1d1b; --line: rgba(243, 236, 228, .08); --text: #f3ece4; /* --c-dim del sito: 7,5:1 sul nero */ --muted: #a3a3a3; /* l'accento: --c-mattone del sito (4,9:1 sul nero). I nomi restano «purple» perché sono quelli dei quattro fogli: il tema sta nei valori, non nei nomi */ --purple: #c9664f; --accent-rgb: 201, 102, 79; --purple-hi: #d9826d; --brand-light: #e6a896; --brand-light-rgb: 230, 168, 150; --brand-mid: #d48d7b; --body-text: #d8d1c9; --btn-sec-fg: #cfc8c0; /* ⭐ le TINTE dei bottoni e delle selezioni sono NEUTRE (il bianco caldo del testo a bassa opacità), non nel mattone: il mattone al 15% sul nero fa marrone, ed è un campo di colore. Il mattone resta nel testo, nei bordi e nelle icone (--brand-light, --purple). */ --btn-tint: rgba(243, 236, 228, .07); --btn-tint-hover: rgba(243, 236, 228, .11); --btn-tint-active: rgba(243, 236, 228, .15); --sel-tint: rgba(243, 236, 228, .12); --sel-tint-hover: rgba(243, 236, 228, .16); --sel-fg: #f3ece4; --purple-mute: #8f3a2b; --purple-mute-hi: #a04a3a; --accent-testo: #efc6b9; --accent-testo-hi: #f6ddd4; --accent-etichetta: #d9826d; --accent-vivo: #e0755b; --accent-lampo: #2a1c18; --accent-inchiostro: #0e0d0c; --sheet-cta-bg: #1f1917; --sheet-cta-bg-hover: #29201d; --tinta-sez-b: #d9826d; --tinta-sez-c: #b98a7c; --tinta-sez-d: #a09992; /* i grigi: la stessa scala di Iris, senza la punta di viola */ --grigio-93: #efebe6; --grigio-91: #e9e5e0; --grigio-80: #cfc8c0; --grigio-66: #aaa39c; --grigio-62: #a09992; --grigio-51: #837d77; --grigio-44: #736d67; --grigio-35: #5b5651; --grigio-22: #3b3835; --rail-off: #262321; --dim: #4f4a45; /* tipografia: Inter per tutto, leggera nei titoli; il mono per le etichette */ --font-display: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; /* sul sito il mono non scende sotto gli 11 px */ --fs-eyebrow: 11px; /* gli ANGOLI restano quelli di Iris (deciso da Francesco il 23/09, vetrina 15.x: fra «a zero come il sito» e «tondi come Iris» ha scelto i tondi). Qui non si ridefinisce nessun --r-* */ } :root[data-brand="dvp"] ::selection { background: var(--text); color: var(--ink); } /* ── Titoli: Inter leggera, niente maiuscolo ─────────────────────── */ :root[data-brand="dvp"] :is(h1.display, h2.display) { font-weight: 300; text-transform: none; letter-spacing: -0.03em; line-height: 1.02; } :root[data-brand="dvp"] :is(.tl-card-title, .tl-mini-title, .board-title, .tm-wod-title, .err-tit) { text-transform: none; font-weight: 500; letter-spacing: -0.01em; } :root[data-brand="dvp"] :is(.home-head-box, .pf-nome, body.home-timeline.rm-page .home-head-sub) { font-weight: 300; text-transform: none; letter-spacing: -0.02em; } :root[data-brand="dvp"] :is(.board-pos, .set-row-num, .set-edit-num, .iv-station-num, .err-cod) { font-weight: 300; font-variant-numeric: tabular-nums; } /* ── Etichette: il mono maiuscolo del sito ───────────────────────── */ /* ⚠️ qui le lettere spaziate ci sono, al contrario di Iris (design-system.md, «Mai lettere spaziate»): sono la firma della sala buia (.c-mono del sito, .14em a 12 px) */ :root[data-brand="dvp"] :is(.eyebrow, .sheet-eyebrow, .sheet-section-title, h2.section-title, .field > label, .data-table th, .flabel, .nlab, .tl-day-heading, .day-heading, .auth-field label, .lb-gtitle, .pf-sez, .tm-eyebrow, .tm-wod-eyebrow, .tm-num-et, .ab-oppure, .stx-tag, .brand-app) { font-family: var(--font-mono); font-weight: 400; letter-spacing: .12em; } /* ── I badge delle statistiche: il livello sta nel BORDO ─────────── */ /* su Iris argento e oro sono il viola al 10% e al 28% di fondo; qui il mattone al 28% faceva un campo marrone, e la scelta del 23/09 (bottoni neutri) vale anche per loro: fondo neutro, il mattone nel bordo e nell'icona */ :root[data-brand="dvp"] .stx-badge--silver { background: rgba(243, 236, 228, .04); } :root[data-brand="dvp"] .stx-badge--gold { background: rgba(243, 236, 228, .08); } /* ── La CTA: pillola vuota, piena al passaggio (il sito) ─────────── */ :root[data-brand="dvp"] .btn-primary { background: transparent; color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); border-radius: var(--r-pill); } :root[data-brand="dvp"] .btn-primary:hover { background: var(--purple); color: var(--ink); }