/* =================================================================== E-MIKE — Design system condiviso del portale gestione.e-mike.it Tema chiaro/scuro via . =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap'); @font-face { font-family:'Bebas Neue'; src:url('fonts/BebasNeue-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('fonts/DMSans-Light.ttf') format('truetype'); font-weight:300; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('fonts/DMSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('fonts/DMSans-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; } @font-face { font-family:'Inversionz'; src:url('fonts/Inversionz.ttf') format('truetype'); font-display:swap; } /* ---- TEMA SCURO (default) ---- */ :root { --bg:#0e0f11; --surf:#16181c; --surf2:#1e2026; --surf3:#252830; --border:#2a2d35; --border2:#353a44; --accent:#e8ff47; --accent-text:#e8ff47; --accent-soft:rgba(232,255,71,.14); --btn-bg:#e8ff47; --btn-ink:#11130a; --chip-bg:rgba(232,255,71,.12); --chip-text:#f0f1f3; --active-bg:rgba(232,255,71,.12); --link:#e8ff47; --text:#f0f1f3; --text2:#8b8f9a; --text3:#5b6470; --danger:#ff4757; --danger-soft:rgba(255,71,87,.14); --success:#2ed573; --warn:#ff6b35; --shadow:0 10px 30px rgba(0,0,0,.40); --radius:10px; --radius-sm:6px; --radius-lg:14px; --maxw:1400px; --col:860px; --font-head:'Bebas Neue',sans-serif; --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } /* ---- TEMA CHIARO ---- */ html[data-tema="light"] { --bg:#f2f3f6; --surf:#ffffff; --surf2:#f6f7f9; --surf3:#eceef2; --border:#e4e6ec; --border2:#d3d6df; --accent:#e3f72b; --accent-text:#1f2530; --accent-soft:rgba(31,37,48,.10); --btn-bg:#23272f; --btn-ink:#ffffff; --chip-bg:#eceef2; --chip-text:#1b1d22; --active-bg:#eaecf0; --link:#1f2530; --text:#1b1d22; --text2:#5d626d; --text3:#9aa0ad; --danger:#d8323f; --danger-soft:rgba(216,50,63,.10); --success:#1c9e57; --warn:#d35400; --shadow:0 10px 28px rgba(25,28,36,.12); } * { box-sizing:border-box; margin:0; padding:0; } body { font-family:var(--font-body); background:var(--bg); color:var(--text); font-size:15px; line-height:1.55; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; } a { color:var(--link); text-decoration:none; } /* Schermi molto larghi (2K/4K): si ingrandisce TUTTO in proporzione, così i caratteri non restano minuscoli. Sotto i 1960px (Full HD incluso) nulla cambia. */ @media (min-width: 1960px) { body { zoom: 1.12; } } @media (min-width: 2500px) { body { zoom: 1.25; } } @media (min-width: 3500px) { body { zoom: 1.5; } } /* ====================== HEADER / NAV ====================== */ .topbar { position:sticky; top:0; z-index:30; height:60px; background:var(--surf); border-bottom:1px solid var(--border); } .topbar-inner { max-width:var(--maxw); margin:0 auto; height:100%; display:flex; align-items:center; gap:18px; padding:0 clamp(16px,3vw,32px); } .brand { display:flex; align-items:baseline; gap:9px; font-family:'Inversionz', var(--font-head); font-size:26px; letter-spacing:1px; text-transform:lowercase; color:var(--text); line-height:1; flex-shrink:0; } .brand .mark { width:11px; height:18px; background:var(--accent); border-radius:2px; align-self:center; } .brand small { font-family:var(--font-body); font-weight:300; font-size:12px; letter-spacing:1px; color:var(--text2); text-transform:none; } .topnav { display:flex; gap:4px; align-items:center; margin-left:6px; flex:1; flex-wrap:wrap; } .nav-link { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--text2); white-space:nowrap; transition:background .15s,color .15s; } .nav-link .ico { font-size:15px; } .nav-link:hover { background:var(--surf2); color:var(--text); } .nav-link.active { background:var(--active-bg); color:var(--text); box-shadow:inset 0 0 0 1px var(--border2); } .topbar-actions { display:flex; gap:8px; margin-left:auto; flex-shrink:0; } .icon-btn { width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; transition:all .15s; text-decoration:none; } .icon-btn:hover { border-color:var(--accent-text); color:var(--text); } .nav-toggle { display:none; } .nav-back { display:none; } /* Voce di nav con sottomenu (es. Impostazioni) */ .nav-drop { position:relative; display:flex; } .nav-drop > button.nav-link { background:none; border:none; font:inherit; cursor:pointer; } .nav-drop > button.nav-link .freccia { font-size:9px; margin-left:2px; opacity:.7; } .nav-menu { display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:180px; background:var(--surf); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:6px; z-index:40; flex-direction:column; gap:2px; } .nav-drop.aperto .nav-menu { display:flex; } .nav-menu .nav-link { width:100%; } /* ====================== LAYOUT PAGINA ====================== */ .page { width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(20px,3vw,38px) clamp(16px,3vw,32px) 60px; flex:1; } .page-head { margin-bottom:22px; } .page-title { font-family:var(--font-head); font-size:clamp(28px,3.2vw,40px); letter-spacing:2px; color:var(--text); line-height:1; } .page-title b { color:var(--accent-text); font-weight:400; } .page-sub { color:var(--text2); font-size:14px; margin-top:8px; max-width:60ch; } .stretto { max-width:var(--col); margin:0 auto; } .page.col { max-width:var(--col); } /* ====================== CARD ====================== */ .card { background:var(--surf); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; } .card + .card { margin-top:18px; } /* ====================== FORM ====================== */ label, .lbl { display:block; font-size:12.5px; font-weight:500; color:var(--text2); margin-bottom:5px; } input[type=text], input[type=number], input[type=password], input[type=search], select, textarea { width:100%; background:var(--surf2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font-body); font-size:14px; padding:9px 11px; outline:none; transition:border-color .15s, box-shadow .15s; } input.mono, .mono input, input[inputmode=decimal] { font-family:var(--font-mono); } input:focus, select:focus, textarea:focus { border-color:var(--accent-text); box-shadow:0 0 0 3px var(--accent-soft); } textarea { resize:vertical; min-height:70px; } select { appearance:none; cursor:pointer; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b8f9a'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } /* ====================== BOTTONI ====================== */ button, input[type=submit], .btn { font-family:var(--font-body); cursor:pointer; border-radius:var(--radius-sm); font-size:14px; font-weight:600; padding:10px 18px; border:1px solid transparent; background:var(--btn-bg); color:var(--btn-ink); transition:all .15s; } button:hover, input[type=submit]:hover, .btn:hover { filter:brightness(1.10); } .btn-primary { background:var(--btn-bg); color:var(--btn-ink); font-weight:700; } .btn-ghost { background:transparent; color:var(--text2); border-color:var(--border); } .btn-ghost:hover { color:var(--text); border-color:var(--text3); background:var(--surf2); } .btn-danger { background:transparent; color:var(--danger); border-color:var(--danger-soft); } .btn-danger:hover { background:var(--danger-soft); } /* ====================== BADGE ====================== */ .badge { display:inline-block; font-family:var(--font-mono); font-size:11.5px; padding:3px 9px; border-radius:var(--radius-sm); background:var(--chip-bg); color:var(--chip-text); } /* ====================== TABELLE ====================== */ table.dati { width:100%; border-collapse:collapse; background:var(--surf); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } table.dati th { background:var(--surf2); color:var(--text2); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; text-align:left; } table.dati td { border-top:1px solid var(--border); padding:9px 12px; font-size:13px; } table.dati tr:hover td { background:var(--surf2); } /* ====================== UTILITY ====================== */ .muted { color:var(--text2); } .row { display:flex; gap:14px; flex-wrap:wrap; } .row > * { flex:1; min-width:140px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } /* ====================== MOBILE ====================== */ @media (max-width:820px) { .topnav { display:none; } /* su mobile la nav orizzontale sparisce: si naviga dall'hub Home + tasto indietro */ .nav-back { display:flex; } } /* ====================== DASHBOARD (tile app) ====================== */ .app-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; } .app-card { display:block; background:var(--surf); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; } .app-card:hover { border-color:var(--accent-text); transform:translateY(-2px); } .app-card .ico { font-size:34px; line-height:1; } .app-card .nome { font-family:var(--font-head); font-size:22px; letter-spacing:1px; margin:14px 0 5px; color:var(--text); } .app-card .desc { font-size:13px; color:var(--text2); line-height:1.5; } /* ====================== HUB MOBILE (griglia voci sulla Home) ====================== */ .hub { display:none; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; } .hub a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:96px; background:var(--surf); border:1px solid var(--border); border-radius:var(--radius-lg); text-decoration:none; color:var(--text); font-size:14px; font-weight:500; text-align:center; } .hub a .ico { font-size:28px; line-height:1; } .hub a:active { background:var(--surf2); } /* ====================== VISIBILITÀ MENU SU MOBILE ====================== */ @media (max-width:820px) { .nav-link.solo-desktop { display:none; } .hub { display:grid; } }