/* COMM-IT — design tokens condivisi (tema chiaro = default, scuro via toggle). Palette e font allineati all'app (lib/theme.ts): paper #F7F4EF, ink #1B1815, orange #E8622E; font logo = Special Elite (la "Olivetti Lettera 32"), serif = Newsreader, mono/label = Space Mono. NB: i font si caricano via nel di ogni pagina (prima di theme.css), non più via @import qui — l'@import era render-blocking a catena. */ :root { /* CHIARO — default, palette app LIGHT */ --bg: #F7F4EF; /* paper */ --surface: #FFFFFF; /* card, topbar */ --surface-2: #F1ECE3; /* input, blocchi tenui (inputBg) */ --text: #1B1815; /* ink */ --text-2: #6B6258; /* bodyAlt */ --muted: #6F675C; /* metaGray — AA su paper/surface2 (era #8A8278, 3.4:1) */ --border: #E7E1D8; /* hairline */ --orange: #B23A0E; /* AA in tema chiaro (era #E8622E; brand esatto pinnato sotto) */ --on-orange: #FFFFFF; /* testo su arancio (come l'app) */ --topbar-bg: rgba(247,244,239,0.85); --hero-a: #FFF6F1; /* alto gradiente hero */ --hero-b: #F7F4EF; --hero-glow: rgba(232,98,46,0.10); --shadow: rgba(27,24,21,0.12); --green: #1F8A5B; --banner-bg: #FBEDE6; --banner-tx: #1B1815; --device: #201B16; /* cornice mockup telefono (scura in entrambi i temi) */ --err: #C0392B; --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --f-mono: 'Space Mono', ui-monospace, 'Courier New', monospace; --f-logo: 'Special Elite', 'Courier New', monospace; } :root[data-theme="dark"] { /* SCURO — tema storico del sito, conservato */ --bg: #0d0d0d; --surface: #141414; --surface-2: #1a1a1a; --text: #F2EFEA; --text-2: #b8b8b8; --muted: #8a8a8a; --border: #222222; --orange: #E8622E; --on-orange: #0d0d0d; --topbar-bg: rgba(13,13,13,0.85); --hero-a: #1a0a00; --hero-b: #0d0d0d; --hero-glow: rgba(232,98,46,0.12); --shadow: rgba(0,0,0,0.55); --green: #3DBA7E; --banner-bg: #1a0a00; --banner-tx: #ffffff; --device: #000000; --err: #ff8a80; } /* Marchio COMM·IT nel font dell'app (typewriter). */ .wordmark, .nav-logo, footer .brand { font-family: var(--f-logo); } /* Toggle tema (sole/luna). Un solo handler in theme.js via delega eventi. */ .theme-toggle { background: none; border: 1px solid var(--border); color: var(--text); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; padding: 0; transition: border-color .2s, color .2s; } .theme-toggle:hover { border-color: var(--orange); color: var(--orange); } .theme-toggle .i-dark { display: none; } .theme-toggle .i-light { display: inline; } :root[data-theme="dark"] .theme-toggle .i-dark { display: inline; } :root[data-theme="dark"] .theme-toggle .i-light { display: none; } @media (prefers-reduced-motion: reduce) { * , *::before, *::after { transition-duration: .001ms !important; } } /* Waitlist email (modale home) */ .wl-wrap { margin-top: 20px; } .wl-intro { font-family: var(--f-mono); font-size: 13px; color: var(--muted); margin: 0 0 10px; } .wl-form { display: flex; gap: 8px; flex-wrap: wrap; } .wl-form input[type=email] { flex: 1; min-width: 180px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: var(--f-mono); font-size: 14px; } .wl-form input[type=email]:focus { outline: none; border-color: var(--orange); } .wl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .wl-btn { padding: 12px 18px; border: none; border-radius: 10px; background: var(--orange); color: var(--on-orange); font-family: var(--f-mono); font-size: 14px; font-weight: 700; cursor: pointer; } .wl-btn:disabled { opacity: .6; cursor: default; } .wl-msg { font-family: var(--f-mono); font-size: 13px; margin-top: 10px; min-height: 1em; } .wl-msg.ok { color: var(--green); } .wl-msg.err { color: var(--err); } /* Brand esatto: l'icona-app (quadrato arancio) e il puntino del marchio COMM·IT restano #E8622E anche in tema chiaro, dove --orange è scurito per contrasto AA. (Le CSS per-pagina caricano dopo theme.css → serve !important per vincere.) */ .icon, .modal-icon { background-color: #E8622E !important; } .nav-logo span, .brand span, .logo span, .wordmark span { color: #E8622E !important; } /* ══════════════════════════════════════════════════════════════════ FX v2 — embossing (letterpress) + profondità 3D + movimento. Pilotato da classi messe da motion.js su PRIMA del paint: .fx = rilievo/emboss/tilt statici — sempre attivi .anim = animazioni d'ingresso/parallax — solo senza prefers-reduced-motion Vive qui (condiviso) → vale per tutte le lingue senza toccare gli