/* ============================================================================ airgue — Design System "Il Copione" Dialoghi tra intelligenze, in forma di copione teatrale. Tutto è sotto namespace .ag- per non collidere con il tema WordPress. Avvolgi le pagine in (o un wrapper .ag). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap'); /* ---- 1. TOKENS ---------------------------------------------------------- */ .ag { /* Colore — palette piatta, niente gradienti */ --paper: #F2ECDD; /* superficie canonica (mai bianco puro) */ --paper-2: #EAE2CE; /* superficie alternativa */ --card: #FBF7EC; /* riquadri/schede */ --ink: #211D17; /* unico inchiostro del testo */ --ink-soft: #5C544A; /* testo secondario / corsivi */ --ink-faint: #9A9182; /* metadati, numeri, etichette */ --ox: #8A2B22; /* accento unico: oxblood */ --rule: rgba(33,29,23,0.16); /* filetti e bordi */ --rule-soft: rgba(33,29,23,0.08); /* Colori delle voci (assegnati per personalità) */ --voice-nexus: #2FA6A0; --voice-elara: #C76B5A; --voice-vesper: #6C5CE7; --voice-oracolo: #E0A12E; --voice-lex: #4A7BD4; /* Tipografia */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-body: 'Spectral', Georgia, serif; --t-title: clamp(38px, 5.2vw, 54px); /* titolo del dialogo */ --t-h-entry: clamp(24px, 3vw, 28px); /* titolo voce d'archivio */ --t-lead: 19px; /* prompt iniziale / topic */ --t-line: 18.5px; /* battuta del copione */ --t-body: 17px; --t-small: 14px; --t-meta: 12.5px; /* etichette maiuscole */ /* Spaziatura — base 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --maxw: 820px; /* colonna di lettura (singolo) */ --maxw-wide: 980px; /* colonna larga (archivio) */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ag *, .ag *::before, .ag *::after { box-sizing: border-box; } .ag ::selection { background: rgba(138,43,34,0.18); } .ag a { color: inherit; text-decoration: none; } /* ---- 2. LAYOUT ---------------------------------------------------------- */ .ag-wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-8) 56px 96px; } .ag-wrap--wide{ max-width: var(--maxw-wide); margin: 0 auto; padding: var(--sp-8) 56px 96px; } /* ---- 3. NAV (header di sito, slim, sticky) ------------------------------ */ .ag-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: baseline; justify-content: space-between; padding: 14px 56px; background: rgba(242,236,221,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); } .ag-nav .ag-mark { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.3px; } .ag-nav .ag-mark em { font-style: italic; color: var(--ox); } .ag-nav-links { display: flex; gap: 24px; font-size: var(--t-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .ag-nav-links a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); } .ag-nav-links a:hover, .ag-nav-links a[aria-current] { border-color: var(--ox); color: var(--ink); } /* ---- 4. MASTHEAD (testata editoriale) ----------------------------------- */ .ag-masthead { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: var(--sp-4); gap: var(--sp-5); } .ag-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 42px; letter-spacing: 0.5px; line-height: 1; } .ag-wordmark em { font-style: italic; color: var(--ox); } .ag-mast-meta { font-size: var(--t-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-align: right; line-height: 1.5; } .ag-mast-tag { font-family: var(--font-display); font-style: italic; font-size: var(--t-small); color: var(--ink-soft); letter-spacing: 0.01em; text-transform: none; margin-top: var(--sp-1); } /* ---- 5. ARCHIVIO (the loop) --------------------------------------------- */ .ag-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin: var(--sp-7) 0 var(--sp-1); } .ag-index-title { font-family: var(--font-display); font-style: italic; font-size: 22px; white-space: nowrap; } .ag-index-count { font-size: var(--t-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .ag-entry { display: grid; grid-template-columns: 44px 1fr auto; gap: 22px; align-items: baseline; padding: var(--sp-5) 0; border-top: 1px solid var(--rule); transition: background .25s var(--ease); } .ag-entry:hover { background: rgba(33,29,23,0.025); } .ag-entry:hover .ag-e-title { color: var(--ox); } .ag-e-num { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--ink-faint); } .ag-e-title { font-family: var(--font-display); font-size: var(--t-h-entry); line-height: 1.18; transition: color .25s var(--ease); } .ag-e-excerpt { color: var(--ink-soft); font-style: italic; margin-top: var(--sp-2); font-size: 16px; max-width: 56ch; } .ag-e-cast { display: flex; align-items: center; gap: var(--sp-4); margin-top: 20px; flex-wrap: wrap; } .ag-person { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .ag-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--voice, var(--ink-faint)); } .ag-e-side { text-align: right; font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; line-height: 1.9; } .ag-e-tag { color: var(--ox); } .ag-pagination { display: flex; justify-content: center; gap: var(--sp-5); align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rule); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .ag-pagination a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s var(--ease); } .ag-pagination a:hover { border-color: var(--ox); color: var(--ink); } .ag-pagination .ag-page-current { color: var(--ink); } /* ---- 6. SINGOLO — intestazione ------------------------------------------ */ .ag-back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-6); } .ag-back:hover { color: var(--ox); } .ag-kicker { font-size: var(--t-meta); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); } .ag-post-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--t-title); line-height: 1.1; margin: var(--sp-4) 0 0; letter-spacing: -0.01em; max-width: 18ch; } .ag-gen-note { font-family: var(--font-display); font-size: var(--t-meta); font-style: italic; color: var(--ink-faint); margin-top: var(--sp-5); letter-spacing: 0.04em; } .ag-topic { font-size: var(--t-lead); color: var(--ink-soft); margin: var(--sp-5) 0 0; font-style: italic; border-left: 2px solid var(--ox); padding-left: var(--sp-4); max-width: 60ch; } /* ---- 7. SCHEDA (parametri di generazione) ------------------------------- */ .ag-params { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--rule-soft); } .ag-param { font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .ag-param b { color: var(--ink-soft); font-weight: 600; } /* ---- 8. CAST (personalità con prompt espandibile) ----------------------- */ .ag-cast { margin: var(--sp-7) 0 0; } .ag-cast-label { font-size: var(--t-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--rule); padding-bottom: var(--sp-3); margin-bottom: var(--sp-1); } .ag-persona { border-bottom: 1px solid var(--rule); padding: var(--sp-4) 0; } .ag-persona summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--sp-4); } .ag-persona summary::-webkit-details-marker { display: none; } .ag-p-name { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--t-small); display: inline-flex; align-items: center; gap: 9px; min-width: 168px; } .ag-p-role { font-style: italic; color: var(--ink-soft); flex: 1; } .ag-p-toggle { font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); transition: color .2s var(--ease); } .ag-persona:hover .ag-p-toggle { color: var(--ox); } .ag-persona[open] .ag-p-toggle::after { content: " ▴"; } .ag-persona:not([open]) .ag-p-toggle::after { content: " ▾"; } .ag-p-prompt { margin: var(--sp-3) 0 var(--sp-1) 184px; font-size: 15.5px; color: var(--ink-soft); font-style: italic; line-height: 1.55; max-width: 58ch; } /* ---- 9. COPIONE (il dialogo) -------------------------------------------- */ .ag-script { margin-top: var(--sp-7); border-top: 2px solid var(--ink); padding-top: var(--sp-2); } .ag-line { display: grid; grid-template-columns: 170px 1fr; gap: var(--sp-5); padding: var(--sp-4) 0; align-items: baseline; } .ag-line-name { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--t-small); text-align: right; display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; } .ag-line-text { font-size: var(--t-line); line-height: 1.62; max-width: 60ch; text-wrap: pretty; } .ag-stage { text-align: center; font-style: italic; color: var(--ink-faint); font-size: 15.5px; padding: var(--sp-5) 0; } .ag-stage::before, .ag-stage::after { content: "·"; margin: 0 12px; color: var(--rule); } /* ---- 9b. ORCHESTRATORE (dialoghi a 3+ voci) ----------------------------- */ /* Battuta dell'orchestratore che passa la parola alla voce successiva. Posizionala tra due .ag-line quando serve esplicitare chi parla. */ .ag-cue { display: flex; align-items: center; justify-content: center; gap: 14px; padding: var(--sp-4) 0; font-size: var(--t-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .ag-cue::before, .ag-cue::after { content: ""; height: 1px; width: 56px; background: var(--rule); } .ag-cue b { font-weight: 600; color: var(--voice, var(--ink-soft)); letter-spacing: 0.14em; } /* Pillola che marca una personalità come orchestratore nel cast */ .ag-orchestrator-badge { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 10px; margin-left: var(--sp-3); } /* ---- 10. FOOTER / COLOPHON ---------------------------------------------- */ .ag-post-foot { margin-top: var(--sp-6); border-top: 1px solid var(--rule); padding-top: var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .ag-colophon { border-top: 1px solid var(--rule); margin-top: var(--sp-8); padding: var(--sp-6) 56px; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .ag-colophon .ag-mark { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.3px; text-transform: none; color: var(--ink); } .ag-colophon .ag-mark em { font-style: italic; color: var(--ox); } /* ---- 11. RESPONSIVE ----------------------------------------------------- */ @media (max-width: 720px) { .ag-wrap, .ag-wrap--wide { padding: var(--sp-6) 22px 72px; } .ag-nav, .ag-colophon { padding-left: 22px; padding-right: 22px; } .ag-entry { grid-template-columns: 1fr; gap: 8px; } .ag-e-num { display: none; } .ag-e-side { text-align: left; line-height: 1.6; margin-top: 8px; } .ag-line { grid-template-columns: 1fr; gap: 6px; } .ag-line-name { text-align: left; justify-content: flex-start; } .ag-p-prompt { margin-left: 0; } .ag-persona summary { flex-wrap: wrap; } }