/* cityplanner-2026 — stile base del sito (PLN-001 T-13; PLN-017 T-01). Vanilla CSS, nessun framework. Fondazione del design system "editorial press" (bozza cityplanner-biz-home): palette cream, display serif Newsreader + body Geist + Geist Mono, righe tipografiche sottili. Questo file ospita SOLO token + tipografia di base: la chrome di sistema (header/nav/footer) sarà riscritta in T-03. */ /* ------------------------------- TOKEN ------------------------------- */ /* Il default è la palette cream sul solo :root (DA-01): nessun attributo data-* viene impostato su . Le varianti più sotto sono CSS dormiente per un futuro toggle. */ :root { /* palette — cream (default) */ --bg: #ebe4d2; --bg-soft: #e0d8c1; --bg-code: #f1ead7; --ink: #16140f; /* testo primario — ≈14.5:1 su --bg */ --ink-2: #5f574a; /* testo secondario — ≈5.6:1 su --bg */ /* DA-03 — i toni chiari della bozza (--ink-3 #968d78 ≈2.6:1, --mark #d98a8a ≈2.1:1) sono sotto la soglia AA 4.5:1: per ogni uso TESTUALE valgono le versioni scurite (stessa tonalità, luminanza abbassata). I toni chiari originali restano nei gemelli *-decor, ammessi SOLO per usi decorativi (crosshair, hairline), mai per testo. */ --ink-3: #6b6353; /* micro-label, meta — ≈4.68:1 su --bg */ --ink-3-decor: #968d78; /* tono chiaro bozza — solo decorativo */ --rule: rgba(22, 20, 15, 0.18); --rule-soft: rgba(22, 20, 15, 0.10); /* accents */ /* T-10: --live misura ≈4.13:1 su --bg — sotto AA per testo normale. Oggi nessuna regola lo consuma: resta riservato a usi NON testuali (dot "live", decorazioni); per un futuro uso testuale va scurito. */ --live: #2f7a4b; /* the now-printing dot */ --mark: #9c4343; /* accento (coral scurito) — ≈5.0:1 su --bg */ --mark-decor: #d98a8a; /* register coral bozza — solo decorativo */ /* Focus ring dei link (T-10): inchiostro sul canvas cream. Il token resta ridefinibile da una radice d'area (cambierebbe solo il valore ereditato, la regola a:focus-visible resta una sola) ma dal rework T-13 nessuna app lo fa più: .geodata-app e .mapchat-app sono entrambe sul canvas cream e usano il default. */ --focus-outline: var(--ink); /* type stacks — switchabili via [data-serif] */ --font-display: "Newsreader", "Source Serif 4", Georgia, serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* rhythm — switchabile via [data-density] */ --pad-x: clamp(28px, 6vw, 96px); --section-y: 96px; --gap: 24px; } @media (max-width: 640px) { :root { --section-y: 64px; } } /* ---------------------- VARIANTI DORMIENTI (DA-01) ---------------------- */ /* Nessuna UI le attiva: un futuro toggle sarà un cambio di attributo su , zero riscrittura CSS. Valori verbatim dalla bozza (i gemelli *-decor sono allineati per coerenza): prima di attivarne una serve un audit AA dedicato — qui --ink-3 e --mark NON sono ricalcolati per il contrasto testuale come nel default cream. */ [data-palette="stone"] { --bg: #e3e1da; --bg-soft: #d4d1c5; --bg-code: #ecebe3; --ink: #15171a; --ink-2: #565a60; --ink-3: #8b8e93; --ink-3-decor: #8b8e93; --rule: rgba(21, 23, 26, 0.18); --rule-soft: rgba(21, 23, 26, 0.10); } [data-palette="dark"] { --bg: #15140f; --bg-soft: #1f1d17; --bg-code: #1b1914; --ink: #f0ead6; --ink-2: #a59d87; --ink-3: #6e6857; --ink-3-decor: #6e6857; --rule: rgba(240, 234, 214, 0.22); --rule-soft: rgba(240, 234, 214, 0.10); --live: #6dd198; } [data-accent="green"] { --mark: #8cb98c; --mark-decor: #8cb98c; } [data-accent="blue"] { --mark: #8aa8d9; --mark-decor: #8aa8d9; } [data-accent="ink"] { --mark: var(--ink); --mark-decor: var(--ink); } [data-serif="source"] { --font-display: "Source Serif 4", "Newsreader", Georgia, serif; } [data-serif="cormorant"] { --font-display: "Cormorant Garamond", "Newsreader", Georgia, serif; } [data-density="compact"] { --section-y: 60px; --gap: 16px; } /* ----------------------------- BASE ----------------------------- */ /* Niente reset globale di margin/padding (la bozza lo fa): il contenuto migrato dal WP legacy dipende dai margini di default di paragrafi, heading e liste. */ * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--ink); } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; font-feature-settings: "ss01", "ss02", "cv01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--mark); color: var(--bg); } /* --------------------------- TIPOGRAFIA --------------------------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); } h1, h2 { text-wrap: balance; } p { line-height: 1.65; color: var(--ink-2); } p strong, p b { color: var(--ink); font-weight: 500; } /* Link: il testo resta in --ink, la sottolineatura sottile in --rule si accende sull'accento in hover. */ a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule); text-underline-offset: 0.2em; } a:hover { text-decoration-color: var(--mark); } a:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { a { transition: text-decoration-color 160ms ease; } } /* ------------------------ CHROME DI SISTEMA (T-03) ------------------------ */ /* Header/nav/footer condivisi (partial site-header.ejs / site-footer.ejs), stile "editorial press" della bozza cityplanner-biz-home: masthead full-bleed su hairline --rule, brand con glifo, nav a 4 voci con micro-label mono uppercase (--ink-3, versione testuale AA — DA-03), register mark decorativi in --mark-decor. Nessun JS: le voci a gruppo sono link sempre visibili, il wrap responsive è flex-wrap puro. Lo stato :focus-visible dei link della chrome è la regola base `a:focus-visible` sopra (nessun outline: none da sostituire). */ .site-header { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2.5rem; padding: 1.625rem var(--pad-x) 1.5rem; border-bottom: 1px solid var(--rule); } .site-brand { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .site-brand-glyph { width: 16px; height: 16px; color: var(--ink); } .site-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2rem; row-gap: 0.5rem; } .site-nav-item { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.875rem; row-gap: 0.25rem; } /* Micro-label dei gruppi ("Aree applicative", "CV/Profilo"): testuale, quindi --ink-3 nella versione AA — mai il gemello -decor (DA-03). */ .site-nav-label { font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* Link di nav: niente underline (idioma nav della bozza), hairline inferiore che si accende sull'accento in hover; il focus resta l'outline della regola base `a:focus-visible`. */ .site-nav-link { font-size: 0.875rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .site-nav-link:hover { border-bottom-color: var(--mark); } @media (prefers-reduced-motion: no-preference) { .site-nav-link { transition: border-color 160ms ease; } } /* Indicatore di stato utente (PLN-018 T-12, DA-06): placeholder hidden del partial site-user.ejs, idratato da /js/site-user.js via /api/auth/session. Registro dei nav-link/micro-label ma classi DEDICATE — non è una voce di nav (il conteggio dei site-nav-link resta delle 4 voci di sistema). */ .site-user, .site-user-state { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.875rem; } /* L'attributo hidden deve vincere sul display dichiarato qui: site-user.js commuta radice e stati SOLO via attributo, mai classi di visibilità (stesso idioma dei pannelli di site-login.ejs). */ .site-user[hidden], .site-user-state[hidden] { display: none; } /* "Accedi": stesso idioma dei site-nav-link — niente underline, hairline inferiore che si accende sull'accento in hover; focus = outline base. */ .site-user-login { font-size: 0.875rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .site-user-login:hover { border-bottom-color: var(--mark); } @media (prefers-reduced-motion: no-preference) { .site-user-login { transition: border-color 160ms ease; } } /* Username autenticato: micro-label mono nel registro di site-nav-label, ma SENZA uppercase — è un nome proprio, non una label di gruppo. */ .site-user-name { font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: 0.08em; color: var(--ink-3); } /* "Esci": un