/* ============================================================ Campus Eventi — Design token WPP (tema chiaro + scuro) Uso: Tema: chiaro di default; scuro con [data-theme="dark"] su o automatico via prefers-color-scheme se non forzato. Lo switch è gestito da _core/theme.js (localStorage 'ce-theme'). ============================================================ */ /* ---------------- Font WPP (brand) ---------------- 5 pesi statici; Medium copre anche il 600 (WPP non ha SemiBold), Black l'800-900. */ @font-face { font-family: "WPP"; src: url("fonts/WPP-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "WPP"; src: url("fonts/WPP-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "WPP"; src: url("fonts/WPP-Medium.otf") format("opentype"); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: "WPP"; src: url("fonts/WPP-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "WPP"; src: url("fonts/WPP-Black.otf") format("opentype"); font-weight: 800 900; font-style: normal; font-display: swap; } /* ---------------- Token: tema chiaro (default, stile wpp.com) ---------------- */ :root { /* superfici */ --bg: #ffffff; /* fondo pagina */ --card: #ffffff; /* card / pannelli */ --card-line: #e9e9f1; /* bordo card */ --field-bg: #f6f6fb; /* sfondo campi input (soft, mai nero) */ --field-line: #e4e4ef; /* bordo campi */ /* inchiostri */ --ink: #000050; /* WPP Blue: testo primario e titoli */ --ink-soft: #6b6b86; /* testo secondario */ --ink-faint: #a2a2bb; /* placeholder / note */ /* accento e interazione */ --accent: #000050; /* CTA: nel chiaro coincide con l'ink (stile WPP) */ --accent-hover: #1a1a70; --accent-contrast: #ffffff; /* testo sopra l'accento */ --focus-ring: rgba(0,0,80,.18); /* stati */ --red: #bc0113; --red-bg: rgba(188,1,19,.08); --red-line: rgba(188,1,19,.25); --green: #0e7a45; --green-bg: rgba(14,122,69,.08); --green-line: rgba(14,122,69,.25); /* header e tile brand: navy WPP in entrambi i temi (contenuto sempre bianco) */ --header-bg: #000050; --header-line: rgba(255,255,255,.1); --tile-bg: #000050; /* accento "documenti" (ambra) */ --gold-ink: #8a6500; --gold-bg: rgba(200,160,0,.12); --gold-line: rgba(200,160,0,.3); /* tipografia */ --font: "WPP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } /* ---------------- Token: tema scuro (famiglia navy, accento periwinkle) ---------------- */ :root[data-theme="dark"] { --bg: #0a0a2e; --card: #10103a; --card-line: #24274f; --field-bg: rgba(255,255,255,.07); --field-line: rgba(255,255,255,.14); --ink: #f1f2fc; --ink-soft: #9aa0cf; --ink-faint: #7d83b4; --accent: #5b64d6; --accent-hover: #6f78e6; --accent-contrast: #ffffff; --focus-ring: rgba(91,100,214,.3); --red: #ff7b8a; --red-bg: rgba(188,1,19,.18); --red-line: rgba(188,1,19,.4); --green: #4ddb8a; --green-bg: rgba(0,180,80,.12); --green-line: rgba(0,180,80,.3); --header-bg: #10103a; --header-line: rgba(255,255,255,.08); --tile-bg: #10103a; --gold-ink: #d9b64a; --gold-bg: rgba(217,182,74,.12); --gold-line: rgba(217,182,74,.3); color-scheme: dark; } /* Scuro automatico se l'utente non ha forzato un tema (theme.js imposta data-theme solo dopo una scelta esplicita). Blocco duplicato di proposito: i custom property non si possono riusare tra selettori diversi. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0a0a2e; --card: #10103a; --card-line: #24274f; --field-bg: rgba(255,255,255,.07); --field-line: rgba(255,255,255,.14); --ink: #f1f2fc; --ink-soft: #9aa0cf; --ink-faint: #7d83b4; --accent: #5b64d6; --accent-hover: #6f78e6; --accent-contrast: #ffffff; --focus-ring: rgba(91,100,214,.3); --red: #ff7b8a; --red-bg: rgba(188,1,19,.18); --red-line: rgba(188,1,19,.4); --green: #4ddb8a; --green-bg: rgba(0,180,80,.12); --green-line: rgba(0,180,80,.3); --header-bg: #10103a; --header-line: rgba(255,255,255,.08); --tile-bg: #10103a; --gold-ink: #d9b64a; --gold-bg: rgba(217,182,74,.12); --gold-line: rgba(217,182,74,.3); color-scheme: dark; } } /* ---------------- Base condivisa (stile WPP) ---------------- */ .ce-body { font-family: var(--font); background: var(--bg); color: var(--ink); transition: background .25s, color .25s; } /* Titolo hero: grande, leggero, maiuscolo — la firma tipografica WPP */ .ce-hero { font-weight: 300; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; color: var(--ink); } /* Wordmark spaziato (es. CAMPUS EVENTI) */ .ce-wordmark { font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); } /* Etichette campo */ .ce-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } /* Campi input: riempimento soft, mai blocchi neri */ .ce-input { width: 100%; padding: 11px 14px; background: var(--field-bg); border: 1px solid var(--field-line); border-radius: 10px; color: var(--ink); font-family: var(--font); font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s; } .ce-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .ce-input::placeholder { color: var(--ink-faint); } /* Bottone a pillola con freccia (CTA stile wpp.com) */ .ce-btn { width: 100%; padding: 14px; background: var(--accent); border: none; border-radius: 999px; color: var(--accent-contrast); font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, transform .1s; } .ce-btn:hover { background: var(--accent-hover); } .ce-btn:active { transform: scale(.98); } /* Variante secondaria (ghost) */ .ce-btn.ghost { background: transparent; border: 1px solid var(--card-line); color: var(--ink-soft); } .ce-btn.ghost:hover { border-color: var(--ink-soft); color: var(--ink); background: transparent; } /* Card */ .ce-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; } /* Messaggi di stato */ .ce-msg { border-radius: 10px; padding: 10px 14px; font-size: 13px; } .ce-msg.error { background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); } .ce-msg.success { background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green); } /* Toggle tema (pillola flottante, in basso a destra) */ .ce-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 100; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--card-line); background: var(--card); color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s; } .ce-theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }