/* ============================================================ Club Scrivere — Redesign 2026 — Design tokens & component classes Fonte: handoff/GUIDA-SVILUPPATORE.md §1 NB: convivenza con Ocean. Namespace .cs2026 sul per evitare collisioni con gli stili legacy (stylesheet.css, stylemenusito.css). ============================================================ */ :root { /* --- Colori: primario mattone --- */ --cs-brick: #B4552F; --cs-brick-dark: #9A4526; /* hover bottoni primari */ --cs-brick-tint: #F6E7E0; /* sfondo chip/badge */ --cs-brick-tintbd: #EAD3C8; /* bordo box tint */ /* --- Secondario blu (solo tag/link info) --- */ --cs-blue: #2E6E9E; --cs-blue-tint: #E7EEF4; --cs-blue-tintbd: #D3E0EA; /* --- Inchiostro / testo --- */ --cs-ink: #26303A; /* titoli, testo forte, fasce scure */ --cs-ink-darker: #1F2830; /* footer, topbar admin */ --cs-text: #63707C; /* paragrafi */ --cs-muted: #8B98A4; /* meta, date */ --cs-muted-light: #A9B4BE; /* testo su fondo scuro */ /* --- Bordi / superfici --- */ --cs-border: #E3E9EF; /* bordo card */ --cs-border-input: #D6DEE6; /* bordo campi/bottoni sec. */ --cs-divider: #EDF1F5; /* linee interne card */ --cs-bg: #F1F4F7; /* sfondo pagina */ --cs-surface: #FFFFFF; /* card, header */ /* --- Su fondo scuro --- */ --cs-on-dark-accent: #C99B87; --cs-on-dark-text: #EDF1F5; --cs-on-dark-text2: #AEB9C3; /* --- Stato --- */ --cs-ok-t: #1F7A4D; --cs-ok-bg: #E1F1E8; --cs-info-t: #2E6E9E; --cs-info-bg: #E7EEF4; --cs-warn-t: #8A6D3B; --cs-warn-bg: #F6EEDC; --cs-err-t: #B4402F; --cs-err-bg: #F6E1DC; --cs-open-t: #B4552F; --cs-open-bg: #F6E7E0; /* --- Tipografia --- */ --cs-serif: 'Newsreader', Georgia, serif; --cs-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif; /* --- Layout --- */ --cs-container: 1180px; --cs-radius-card: 16px; --cs-radius-lg: 20px; --cs-radius-input:12px; --cs-radius-pill: 100px; /* --- Ombre --- */ --cs-shadow-brick: 0 8px 20px -8px rgba(180,85,47,.7); --cs-shadow-drop: 0 30px 50px -30px rgba(30,45,60,.5); --cs-shadow-hero: 0 30px 60px -35px rgba(30,45,60,.4); } /* ---- Reset mirato dentro il namespace cs2026 (non tocca il legacy) ---- */ .cs2026 { margin:0; background:var(--cs-bg); color:var(--cs-text); font-family:var(--cs-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .cs2026 *, .cs2026 *::before, .cs2026 *::after { box-sizing:border-box; } .cs2026 img { max-width:100%; display:block; } /* ---- Contenitore ---- */ .cs-container { max-width:var(--cs-container); margin:0 auto; padding:0 32px; } /* ---- Tipografia utility ---- */ .cs-h1 { font-family:var(--cs-serif); font-weight:600; font-size:44px; line-height:1.14; color:var(--cs-ink); margin:0; } .cs-h2 { font-family:var(--cs-serif); font-weight:600; font-size:29px; line-height:1.2; color:var(--cs-ink); margin:0; } .cs-h3 { font-family:var(--cs-serif); font-weight:500; font-size:21px; line-height:1.2; color:var(--cs-ink); margin:0; } .cs-eyebrow { font-family:var(--cs-sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cs-brick); } .cs-lead { font-size:17px; line-height:1.6; color:var(--cs-text); } .cs-meta { font-size:13px; color:var(--cs-muted); } .cs-serif { font-family:var(--cs-serif); } .cs-poembody { font-family:var(--cs-serif); font-weight:400; font-size:19px; line-height:1.9; color:var(--cs-ink); } /* ---- Bottoni ---- */ .cs-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--cs-sans); font-weight:600; font-size:15px; line-height:1; padding:12px 22px; border-radius:var(--cs-radius-pill); text-decoration:none; cursor:pointer; border:1px solid transparent; min-height:44px; transition:background .15s,border-color .15s; } .cs-btn-primary { background:var(--cs-brick); color:#fff; box-shadow:var(--cs-shadow-brick); } .cs-btn-primary:hover { background:var(--cs-brick-dark); } .cs-btn-secondary { background:var(--cs-surface); color:var(--cs-ink); border-color:var(--cs-border-input); } .cs-btn-secondary:hover { border-color:var(--cs-brick); color:var(--cs-brick); } .cs-btn-sm { padding:8px 14px; font-size:13px; min-height:auto; } /* ---- Card ---- */ .cs-card { background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius-card); padding:24px; } .cs-card-lg { border-radius:var(--cs-radius-lg); } /* ---- Tag categoria (blu) e chip ---- */ .cs-tag { display:inline-block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cs-blue); font-weight:600; background:var(--cs-blue-tint); border:1px solid var(--cs-blue-tintbd); padding:4px 10px; border-radius:var(--cs-radius-pill); text-decoration:none; } .cs-pill { display:inline-block; font-size:13.5px; padding:8px 16px; border-radius:var(--cs-radius-pill); background:var(--cs-bg); border:1px solid var(--cs-border-input); color:var(--cs-text); text-decoration:none; cursor:pointer; } .cs-pill.is-active { background:var(--cs-brick); border-color:var(--cs-brick); color:#fff; } /* ---- Badge di stato ---- */ .cs-badge { display:inline-block; font-size:12px; font-weight:600; padding:4px 11px; border-radius:var(--cs-radius-pill); } .cs-badge-ok { color:var(--cs-ok-t); background:var(--cs-ok-bg); } .cs-badge-info { color:var(--cs-info-t); background:var(--cs-info-bg); } .cs-badge-warn { color:var(--cs-warn-t); background:var(--cs-warn-bg); } .cs-badge-err { color:var(--cs-err-t); background:var(--cs-err-bg); } .cs-badge-open { color:var(--cs-open-t); background:var(--cs-open-bg); } /* ---- Avatar-iniziale ---- */ .cs-avatar { width:44px; height:44px; border-radius:50%; background:var(--cs-blue-tint); color:var(--cs-blue); font-family:var(--cs-serif); font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* ---- Input/select/textarea ---- */ .cs-input, .cs-select, .cs-textarea { width:100%; font-family:var(--cs-sans); font-size:15px; color:var(--cs-ink); border:1px solid var(--cs-border-input); border-radius:var(--cs-radius-input); padding:13px 15px; background:#fff; } .cs-input:focus, .cs-select:focus, .cs-textarea:focus { outline:none; border-color:var(--cs-brick); box-shadow:0 0 0 3px rgba(180,85,47,.12); } /* ---- Tabella dati (admin) §1.5 ---- */ .cs-table-wrap { background:var(--cs-surface); border:1px solid var(--cs-border); border-radius:var(--cs-radius-card); overflow:hidden; } .cs-table { width:100%; border-collapse:collapse; } .cs-table th { text-align:left; font-family:var(--cs-sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cs-muted); padding:14px 18px; background:var(--cs-bg); border-bottom:1px solid var(--cs-border); } .cs-table td { padding:14px 18px; font-size:14.5px; color:#48535E; border-top:1px solid var(--cs-divider); } .cs-table tr:hover td, .cs-table tbody tr:hover td { background:#F7F9FB; } .cs-table td:first-child { font-family:var(--cs-serif); font-size:16px; color:var(--cs-ink); } /* ---- Sezione scura ---- */ .cs-dark { background:var(--cs-ink); color:var(--cs-on-dark-text); } .cs-dark .cs-eyebrow { color:var(--cs-on-dark-accent); }