/* ===================================================================== Friggitoria Esposito — Gestionale ordini all'ingrosso Brand "Laboratorio napoletano dal 1931": crema, rosso, verde oliva, rombi oro; wordmark e titoli in Lilita One, testo in Montserrat. Back-office: skin gestionale professionale (sidebar, densità dati). Temi: chiaro/scuro via [data-theme] sull'elemento . ===================================================================== */ @font-face { font-family: 'Lilita One'; src: url('../fonts/lilita-one.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } :root { --carta: #fdf1e0; --carta-2: #f4e4c9; --avorio: #fff9ec; --inchiostro: #3a3f26; --inchiostro-2: #757753; --acc: #c8293a; /* rosso Esposito */ --acc-2: #de6b74; /* rosso chiaro (hover, dettagli) */ --acc-cupo: #98212a; /* rosso scuro dell'estrusione */ --rombo: #9f8038; /* oro dei rombi ◆ */ --oliva: #495032; /* verde oliva del lettering */ --linea: #ecd9b8; --linea-forte: #cdb187; --campo: #fffbf1; --campo-focus: #ffffff; --verde: #3f6b39; --verde-bg: #e6ecda; --rosso: #8e2f21; --rosso-bg: #f2ded7; --blu: #2f4f66; --blu-bg: #dee7ec; --ambra: #96661a; --ambra-bg: #f3e6c8; --grigio: #6f675a; --grigio-bg: #ede3cf; --nav-bg: #b42434; --nav-fg: #fdf1e0; --btn-bg: #c8293a; --btn-fg: #fdf1e0; --sb-bg: #262a16; --sb-bg-2: #1a1d0e; --sb-fg: #ece5d0; --sb-muted: #9aa07e; --ombra-card: 0 0 0 4px var(--avorio), 0 0 0 5px var(--linea); --display: 'Lilita One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif; --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* --------- Tema scuro (front) --------- */ :root[data-theme="dark"] { --carta: #201913; --carta-2: #2b2218; --avorio: #282017; --inchiostro: #f2e7d0; --inchiostro-2: #b1a385; --acc: #e0525e; --acc-2: #ee848c; --acc-cupo: #7e1b26; --rombo: #c9ab5c; --oliva: #b9bd90; --linea: #443826; --linea-forte: #64553c; --campo: #2e251a; --campo-focus: #382e1f; --verde: #96c583; --verde-bg: #223019; --rosso: #e69078; --rosso-bg: #3a221b; --blu: #92b8d4; --blu-bg: #1f2c37; --ambra: #dcae52; --ambra-bg: #34290f; --grigio: #a89e8d; --grigio-bg: #2b271f; --nav-bg: #6d1620; --nav-fg: #f4e6cd; --btn-bg: #d64752; --btn-fg: #fff6e8; --ombra-card: 0 0 0 4px var(--avorio), 0 0 0 5px var(--linea); } ::selection { background: var(--acc); color: #fdf1e0; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--carta); color: var(--inchiostro); font-family: var(--sans); font-size: 14px; line-height: 1.5; } img { max-width: 100%; } a { color: var(--inchiostro); } h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .015em; } strong, b { font-weight: 700; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; } /* ------------------------------------------------ Barra superiore (front) */ .topbar { background: var(--carta); border-bottom: 3px solid var(--acc); } .topbar-in { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 12px; gap: 12px; } .brand { text-decoration: none; display: block; line-height: 1.15; } .brand-name { display: block; font-family: var(--display); font-weight: 400; font-size: 23px; letter-spacing: .035em; text-transform: uppercase; color: var(--acc); } .brand-sub { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--oliva); margin-top: 2px; } .topbar-user { display: flex; align-items: center; gap: 10px; } .topbar-who { font-style: italic; color: var(--inchiostro-2); } .brand { display: flex; align-items: center; gap: 13px; } .brand-logo { height: 46px; width: auto; max-width: 150px; object-fit: contain; display: block; } .brand-logo.tonda { border-radius: 50%; box-shadow: 0 0 0 2px var(--acc); background: #fdf1e0; } .sb-logo-img { width: 38px; height: 38px; flex: none; object-fit: contain; border-radius: 8px; display: block; } .sb-logo-img.tonda { border-radius: 50%; box-shadow: 0 0 0 2px rgba(253, 241, 224, .35); } .brand-preview { max-height: 56px; max-width: 220px; border: 1px solid var(--linea-forte); border-radius: 6px; padding: 5px 8px; background: var(--campo); } .brand-preview-sm { max-height: 40px; } .mainnav { background: var(--nav-bg); } .mainnav-in { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 10px; } .navlink { color: var(--nav-fg); text-decoration: none; padding: 10px 14px 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 8px; } .navlink i { font-size: 12px; opacity: .75; } .navlink:hover { color: #ffffff; } .navlink.active { border-bottom-color: #fdf1e0; color: #ffffff; } .navlink-cc { background: rgba(253, 241, 224, .16); color: #fff6e8; border-radius: 7px 7px 0 0; } .navlink-cc i { opacity: 1; } .navlink-cc:hover { background: rgba(253, 241, 224, .26); } .navbadge { background: #fdf1e0; color: #b42434; font-weight: 700; border-radius: 10px; font-size: 11px; line-height: 1; padding: 3px 7px; letter-spacing: 0; } .main { padding: 26px 18px 60px; } .foot { border-top: 3px solid var(--acc); padding: 16px 0 26px; margin-top: 30px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); text-align: center; background: var(--carta); } /* ------------------------------------------------ Bottone-icona e tema */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 7px; cursor: pointer; border: 1px solid var(--linea-forte); background: transparent; color: var(--inchiostro); font-size: 14px; text-decoration: none; } .icon-btn:hover { border-color: var(--acc); color: var(--acc); } /* !important: il CSS del kit Font Awesome (display su .fa-solid) ha pari specificità e viene dopo */ .th-ic-sun { display: none !important; } :root[data-theme="dark"] .th-ic-moon { display: none !important; } :root[data-theme="dark"] .th-ic-sun { display: inline-block !important; } .auth-theme { position: fixed; top: 14px; right: 14px; z-index: 20; } /* ------------------------------------------------ Banner impersonificazione */ .imp-bar { background: var(--acc); color: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } :root[data-theme="dark"] .imp-bar { color: #fff6e8; } .imp-bar .imp-btn { margin-left: auto; } /* ------------------------------------------------ Intestazioni pagina */ .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 20px; } .page-title { font-size: 26px; margin: 0; letter-spacing: .02em; } .page-title small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--inchiostro-2); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ------------------------------------------------ Card */ .card { background: var(--avorio); border: 1px solid var(--linea-forte); box-shadow: var(--ombra-card); margin: 0 0 24px; border-radius: 1px; } .card-h { padding: 12px 18px 10px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .card-h h2 { margin: 0; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; } .card-h h2::before { content: '◆'; color: var(--rombo); font-size: 9px; vertical-align: 2px; margin-right: 9px; } .card-h h2 i { color: var(--acc); margin-right: 7px; font-size: 13px; } .card-b { padding: 16px 18px; } .card-b.tight { padding: 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; } /* ------------------------------------------------ KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; } .kpi { background: var(--avorio); border: 1px solid var(--linea-forte); padding: 14px 16px 12px; box-shadow: var(--ombra-card); } .kpi .n { font-family: var(--display); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--inchiostro-2); margin-top: 4px; } .kpi .l i { margin-right: 5px; color: var(--acc); } .kpi.alert .n { color: var(--ambra); } .kpi a { text-decoration: none; } /* ------------------------------------------------ Timbri di stato */ .stamp { display: inline-block; padding: 2.5px 9px 2px; border: 1.5px solid currentColor; border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 700; white-space: nowrap; } .stamp-ok { color: var(--verde); background: var(--verde-bg); } .stamp-done { color: var(--verde); background: transparent; } .stamp-attesa { color: var(--ambra); background: var(--ambra-bg); } .stamp-prep { color: var(--grigio); background: var(--grigio-bg); } .stamp-sped { color: var(--blu); background: var(--blu-bg); } .stamp-ko { color: var(--rosso); background: var(--rosso-bg); } /* Chip codice catalogo, come i tag scuri del catalogo */ .cod { display: inline-block; background: #3a3f26; color: #fdf1e0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2.5px 7px 2px; border-radius: 2px; white-space: nowrap; } .tag-sconto { display: inline-block; border: 1px solid var(--acc); color: var(--acc); font-size: 10.5px; font-weight: 600; padding: 2px 7px 1px; border-radius: 2px; letter-spacing: .04em; white-space: nowrap; } .chip { display: inline-block; border: 1px solid var(--linea-forte); border-radius: 99px; background: var(--carta-2); font-size: 11px; padding: 2px 9px; white-space: nowrap; } .chip b { color: var(--acc); } .promo-badge { display: inline-block; background: var(--acc); color: #fff6e8; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 2.5px 8px 2px; text-transform: uppercase; vertical-align: 2px; font-family: var(--sans); } .promo-badge i { font-size: 9px; } tr.riga-esaurita .prod-thumb, tr.riga-esaurita .cell-unit { opacity: .5; } /* ------------------------------------------------ Bottoni */ .btn { display: inline-flex; align-items: center; gap: 7px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); cursor: pointer; text-decoration: none; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 9px 18px 8px; border-radius: 2px; } .btn:hover { filter: brightness(1.12); } :root[data-theme="dark"] .btn:hover { filter: brightness(.94); } .btn-oro { background: transparent; color: var(--inchiostro); border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); } .btn-oro:hover { background: var(--acc); color: #fff; border-color: var(--acc); filter: none; } :root[data-theme="dark"] .btn-oro:hover { color: #fff6e8; } .btn-ghost { background: transparent; color: var(--inchiostro); border-color: var(--linea-forte); } .btn-ghost:hover { background: var(--carta-2); color: var(--inchiostro); border-color: var(--inchiostro); filter: none; } .btn-danger { background: transparent; color: var(--rosso); border-color: var(--rosso); } .btn-danger:hover { background: var(--rosso); color: var(--avorio); border-color: var(--rosso); filter: none; } .btn-sm { padding: 5px 10px 4px; font-size: 11px; letter-spacing: .07em; gap: 5px; } .btn[disabled] { opacity: .45; cursor: not-allowed; } /* ------------------------------------------------ Tabelle */ .tbl-scroll { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--inchiostro-2); font-weight: 600; padding: 9px 10px 7px; border-bottom: 2px solid var(--inchiostro); white-space: nowrap; } .tbl td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; } .tbl tr:hover td { background: rgba(200, 41, 58, .045); } :root[data-theme="dark"] .tbl tr:hover td { background: rgba(224, 82, 94, .08); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl .ctr { text-align: center; } .tbl a { text-decoration: none; border-bottom: 1px solid var(--acc-2); } .tbl a:hover { color: var(--acc); } .tbl .muted, .muted { color: var(--inchiostro-2); } .tbl-sub { font-size: 12px; color: var(--inchiostro-2); } .thead-cat td { background: var(--carta-2); font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; border-bottom: 1px solid var(--linea-forte); } /* ------------------------------------------------ Form */ label.fl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--inchiostro-2); margin: 0 0 4px; font-weight: 600; } .fi, textarea.fi, select.fi { width: 100%; background: var(--campo); color: var(--inchiostro); border: 1px solid var(--linea-forte); border-radius: 2px; padding: 8px 10px; font-family: var(--sans); font-size: 14px; } .fi:focus, textarea.fi:focus, select.fi:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(200, 41, 58, .16); } .fi-sm { padding: 5px 7px; font-size: 13px; } .fi-num { text-align: right; font-variant-numeric: tabular-nums; } .frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 14px; } .frow-1 { display: block; margin-bottom: 14px; } .fhelp { font-size: 12px; color: var(--inchiostro-2); margin-top: 4px; } fieldset { border: 1px solid var(--linea); padding: 14px 16px 12px; margin: 0 0 18px; border-radius: 2px; } legend { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--acc); font-weight: 700; padding: 0 8px; } /* Interruttore on/off (toggle) */ .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; user-select: none; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch .sw { width: 40px; height: 22px; border-radius: 99px; background: var(--linea-forte); position: relative; transition: background .15s ease; flex: none; } .switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .switch input:checked + .sw { background: var(--verde); } .switch input:checked + .sw::after { left: 21px; } .switch input:focus-visible + .sw { box-shadow: 0 0 0 3px rgba(200, 41, 58, .3); } .switch .sw-l { font-weight: 600; } /* ------------------------------------------------ Tab */ .tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--linea); margin: 0 0 16px; flex-wrap: wrap; } .tab-btn { border: 0; background: none; padding: 9px 14px 8px; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; color: var(--inchiostro-2); border-bottom: 2px solid transparent; margin-bottom: -2px; } .tab-btn:hover { color: var(--inchiostro); } .tab-btn.active { color: var(--acc); border-bottom-color: var(--acc); } .tab-btn .pill-count { margin-left: 6px; } .tab-panel[hidden] { display: none; } /* ------------------------------------------------ Editor listino */ .icon-btn-sm { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; vertical-align: middle; } tr.has-ov td { background: rgba(200, 41, 58, .06); } :root[data-theme="dark"] tr.has-ov td { background: rgba(224, 82, 94, .1); } tr.subrow > td { background: var(--carta-2); padding: 0; border-bottom: 1px solid var(--linea-forte); } .subrow-in { padding: 12px 16px 14px; } .subrow-t { display: block; font-size: 12px; letter-spacing: .05em; margin-bottom: 8px; } .subrow-t i { color: var(--acc); margin-right: 6px; } .tbl-mini { max-width: 420px; } .tbl-mini th, .tbl-mini td { padding: 5px 8px; } tr.subrow .tbl tr:hover td, tr.subrow:hover td { background: var(--carta-2); } /* ------------------------------------------------ Barra "modifiche non salvate" */ .savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--nav-bg); color: var(--nav-fg); border-top: 3px solid var(--acc-cupo); transform: translateY(110%); transition: transform .28s cubic-bezier(.2, .9, .3, 1.15); box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .5); } .savebar.show { transform: none; } body.bo .savebar { left: 238px; } .savebar-in { display: flex; align-items: center; gap: 10px; padding: 10px 22px; flex-wrap: wrap; } .savebar-sp { flex: 1; } .savebar-msg { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .04em; } .savebar-msg i { color: rgba(253, 241, 224, .85); animation: sb-blink 1.6s ease-in-out infinite; } @keyframes sb-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .savebar .icon-btn { color: var(--nav-fg); border-color: rgba(255, 255, 255, .3); } .savebar .icon-btn:hover { color: #ffffff; border-color: #ffffff; } .savebar .icon-btn[disabled] { opacity: .35; cursor: not-allowed; } .savebar .btn-salva { background: #fdf1e0; color: #b42434; border-color: #fdf1e0; box-shadow: none; animation: sb-pulse 2.2s infinite; } .savebar .btn-salva:hover { background: #ffffff; border-color: #ffffff; color: #98212a; filter: none; } @keyframes sb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 241, 224, .5); } 55% { box-shadow: 0 0 0 10px rgba(253, 241, 224, 0); } } body.has-savebar .main { padding-bottom: 130px; } @media (prefers-reduced-motion: reduce) { .savebar { transition: none; } .savebar-msg i, .savebar .btn-salva { animation: none; } } /* ------------------------------------------------ Popup conferma (stile gestionale) */ .dlg-back { position: fixed; inset: 0; z-index: 70; background: rgba(12, 10, 6, .55); display: flex; align-items: center; justify-content: center; padding: 20px; } .dlg-back[hidden] { display: none; } .dlg { background: var(--avorio); color: var(--inchiostro); border: 1px solid var(--linea-forte); border-radius: 10px; max-width: 460px; width: 100%; box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6); animation: dlg-in .16s ease; } @keyframes dlg-in { from { transform: translateY(14px) scale(.98); opacity: 0; } } .dlg-h { padding: 15px 18px 11px; font-weight: 700; font-size: 15px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--linea); } .dlg-h i { color: var(--ambra); } .dlg-b { padding: 14px 18px; font-size: 13.5px; } .dlg-f { padding: 2px 18px 16px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* tabelle fasce sconto */ .tiers-tbl input.fi { min-width: 84px; } .tiers-tbl td { border-bottom: 1px solid var(--linea); } /* ------------------------------------------------ Flash */ .flash-zone { margin-bottom: 18px; } .flash { padding: 11px 16px; border: 1px solid; margin-bottom: 8px; font-size: 13.5px; border-radius: 2px; } .flash-ok { color: var(--verde); border-color: var(--verde); background: var(--verde-bg); } .flash-err { color: var(--rosso); border-color: var(--rosso); background: var(--rosso-bg); } .flash-warn { color: var(--ambra); border-color: var(--ambra); background: var(--ambra-bg); } /* ------------------------------------------------ Login / registrazione */ .auth-body { background: var(--carta); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 14px; } .auth-card { width: 100%; max-width: 430px; background: var(--avorio); border: 1px solid var(--linea-forte); box-shadow: 0 0 0 5px var(--avorio), 0 0 0 6px var(--acc), 0 22px 44px -18px rgba(0, 0, 0, .45); padding: 34px 34px 28px; } .auth-card.wide { max-width: 760px; } .auth-brand { text-align: center; border-bottom: 3px solid var(--acc); padding-bottom: 20px; margin-bottom: 22px; } .auth-logo { display: block; margin: 0 auto; height: 170px; width: auto; } .auth-brand .b1 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); } .auth-brand .b2 { font-size: 10px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--oliva); margin-top: 5px; } .auth-brand .b3 { font-style: italic; color: var(--inchiostro-2); margin-top: 12px; font-size: 13.5px; } .auth-links { text-align: center; margin-top: 18px; font-size: 13px; } .auth-title { font-size: 18px; margin: 0 0 14px; } /* ------------------------------------------------ Catalogo cliente */ .cat-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .cat-toolbar .fi { max-width: 320px; } .tiers-banner { border: 1px solid var(--acc); background: var(--carta-2); padding: 10px 14px; margin-bottom: 18px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .prod-thumb { width: 58px; height: 58px; object-fit: cover; object-position: center 32%; border: 1px solid var(--linea-forte); display: block; background: #fff; } .prod-name { font-weight: 700; font-size: 14px; } .qty-box { display: inline-flex; align-items: stretch; border: 1px solid var(--linea-forte); border-radius: 2px; overflow: hidden; background: var(--campo); } .qty-box button { border: 0; background: var(--carta-2); width: 30px; cursor: pointer; font-size: 16px; color: var(--inchiostro); } .qty-box button:hover { background: var(--acc); color: #fff6e8; } .qty-box input { width: 56px; border: 0; text-align: center; font-size: 14px; background: transparent; font-variant-numeric: tabular-nums; color: var(--inchiostro); } .qty-box input:focus { outline: none; background: var(--campo-focus); } .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--nav-bg); color: var(--nav-fg); border-top: 3px solid var(--acc-cupo); transform: translateY(110%); transition: transform .18s ease; } .stickybar.show { transform: none; } .stickybar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; flex-wrap: wrap; } .stickybar .tot { font-family: var(--display); font-size: 19px; letter-spacing: .02em; } .stickybar .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: rgba(253, 241, 224, .75); } /* ------------------------------------------------ Pagamenti */ .pay-opts { display: grid; gap: 10px; margin: 6px 0 14px; } .pay-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid var(--linea-forte); border-radius: 8px; padding: 12px 14px; background: var(--campo); } .pay-opt input { margin-top: 3px; accent-color: var(--acc); } .pay-opt .pi { font-size: 19px; width: 28px; text-align: center; color: var(--acc); flex: none; margin-top: 1px; } .pay-opt .pt b { display: block; font-size: 13.5px; } .pay-opt .pt small { color: var(--inchiostro-2); font-size: 12px; } .pay-opt:hover { border-color: var(--acc-2); } .pay-opt.sel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); background: var(--campo-focus); } .pay-badge-test { background: var(--ambra-bg); color: var(--ambra); border: 1px dashed var(--ambra); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; } .bank-box { border: 1px dashed var(--acc); background: var(--ambra-bg); border-radius: 6px; padding: 14px 16px; font-size: 13.5px; margin: 10px 0; } .bank-box .iban { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 15px; letter-spacing: .06em; font-weight: 700; } /* Pagina pagamento simulato */ .fakepay { max-width: 460px; margin: 40px auto; text-align: center; } .fakepay .fp-logo { font-size: 40px; color: var(--acc); margin-bottom: 10px; } /* ------------------------------------------------ Messaggi */ .msg-thread { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding: 4px 2px; } .msg { max-width: 78%; padding: 10px 14px; border: 1px solid var(--linea-forte); background: var(--campo); border-radius: 2px; } .msg .msg-meta { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--inchiostro-2); margin-bottom: 4px; } .msg-mio { align-self: flex-end; background: var(--carta-2); border-color: var(--acc); } .msg-corpo { white-space: pre-wrap; word-wrap: break-word; } .msg-thread.compact { max-height: 320px; } /* ------------------------------------------------ Timeline stato ordine */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 14px 26px; border-left: 1px solid var(--linea-forte); margin-left: 8px; } .timeline li:last-child { border-left-color: transparent; } .timeline li::before { content: '◆'; position: absolute; left: -6.5px; top: -2px; color: var(--rombo); background: var(--avorio); font-size: 12px; line-height: 1; } .timeline .t-quando { font-size: 11.5px; color: var(--inchiostro-2); } /* ------------------------------------------------ Modal scheda */ .modal-back { position: fixed; inset: 0; background: rgba(12, 10, 6, .66); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-back[hidden] { display: none; } .modal-box { position: relative; max-width: 620px; width: 100%; } .modal-box img { width: 100%; max-height: 88vh; object-fit: contain; border: 4px solid var(--avorio); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); } .modal-x { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--inchiostro); background: var(--carta); font-size: 20px; cursor: pointer; line-height: 1; color: var(--inchiostro); } /* ------------------------------------------------ Grafico a barre (SVG) */ .chart-wrap { overflow-x: auto; } .chart-note { font-size: 11px; color: var(--inchiostro-2); letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; } .ch-bar { fill: var(--acc); } .ch-grid { stroke: var(--linea); } .ch-lbl { fill: var(--inchiostro-2); } .ch-val { fill: var(--inchiostro); } /* ------------------------------------------------ Utility */ .tr { text-align: right; } .tc { text-align: center; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .hr-oro { border: 0; border-top: 3px solid var(--acc); margin: 22px 0; } .big-money { font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .pill-count { background: var(--carta-2); border: 1px solid var(--linea-forte); border-radius: 10px; padding: 2px 9px; font-size: 11.5px; } .nowrap { white-space: nowrap; } .w-90 { width: 90px; } .w-120 { width: 120px; } .inline-form { display: inline; } .actions-cell { display: flex; gap: 6px; flex-wrap: wrap; } /* ===================================================================== BACK-OFFICE — skin gestionale professionale ===================================================================== */ body.bo { /* tavolozza neutra professionale (chiaro), scaldata sui toni crema del brand */ --carta: #f6f1e6; --carta-2: #ede5d4; --avorio: #fffdf7; --inchiostro: #2b2c1d; --inchiostro-2: #767256; --linea: #e9e1cf; --linea-forte: #cfc3a5; --campo: #fbf8f0; --campo-focus: #ffffff; --btn-bg: #c8293a; --btn-fg: #fdf1e0; --ombra-card: 0 1px 2px rgba(30, 28, 20, .05); /* nel BO il font display resta solo nel marchio in sidebar */ --display: var(--sans); font-size: 13.5px; } :root[data-theme="dark"] body.bo { --carta: #16140e; --carta-2: #201d14; --avorio: #1e1b13; --inchiostro: #ebe6d8; --inchiostro-2: #9e977c; --linea: #2f2c20; --linea-forte: #4a4531; --campo: #1a1710; --campo-focus: #242017; --btn-bg: #d64752; --btn-fg: #fff6e8; --ombra-card: 0 1px 2px rgba(0, 0, 0, .3); } .bo-shell { min-height: 100vh; } .bo-main { margin-left: 238px; min-height: 100vh; display: flex; flex-direction: column; } .bo .main { padding: 24px 28px 70px; width: 100%; max-width: 1500px; } /* --------- Sidebar --------- */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 238px; z-index: 50; background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-2) 100%); color: var(--sb-fg); display: flex; flex-direction: column; } :root[data-theme="dark"] .sidebar { --sb-bg: #191c0d; --sb-bg-2: #101207; } .sb-brand { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; text-decoration: none; color: var(--sb-fg); border-bottom: 1px solid rgba(255,255,255,.07); } .sb-seal { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--acc-2); border-radius: 8px; color: var(--acc-2); font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: 16px; letter-spacing: .05em; } .sb-title { font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: 13.5px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; } .sb-title small { display: block; font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .16em; color: #cdb472; margin-top: 3px; white-space: nowrap; } .sb-search { position: relative; margin: 12px 12px 6px; } .sb-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--sb-muted); pointer-events: none; } .sb-search input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--sb-fg); border-radius: 7px; padding: 7px 10px 7px 32px; font-size: 12.5px; font-family: var(--sans); } .sb-search input::placeholder { color: var(--sb-muted); } .sb-search input:focus { outline: none; border-color: var(--acc-2); background: rgba(255,255,255,.09); } .sb-nav { flex: 1; overflow-y: auto; padding: 8px 12px 12px; } .sb-sec { display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sb-muted); margin: 16px 6px 6px; font-weight: 600; } .sb-link { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--sb-fg); font-size: 13px; font-weight: 500; padding: 8.5px 10px; border-radius: 7px; margin-bottom: 2px; border-left: 3px solid transparent; } .sb-link i { width: 17px; text-align: center; font-size: 13.5px; color: var(--sb-muted); flex: none; } .sb-link span { flex: 1; } .sb-link:hover { background: rgba(255,255,255,.06); } .sb-link:hover i { color: var(--acc-2); } .sb-link.active { background: rgba(200, 41, 58, .28); color: #fff3e2; border-left-color: #e0525e; } .sb-link.active i { color: var(--acc-2); } .sb-link .navbadge { flex: none; } .sb-foot { border-top: 1px solid rgba(255,255,255,.07); padding: 12px 14px; } .sb-user { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .sb-user i { color: var(--acc-2); font-size: 14px; } .sb-user span { line-height: 1.3; overflow: hidden; } .sb-user small { display: block; color: var(--sb-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; } .sb-overlay[hidden] { display: none; } /* --------- Barra superiore BO --------- */ .bo-top { position: sticky; top: 0; z-index: 30; height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: var(--avorio); border-bottom: 1px solid var(--linea); } .bo-top-title { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--inchiostro-2); text-transform: uppercase; } .bo-top-sp { flex: 1; } .sb-burger { display: none; } /* --------- Componenti in versione BO --------- */ .bo .card { border: 1px solid var(--linea); border-radius: 10px; } .bo .card-h { padding: 11px 16px 9px; } .bo .card-h h2 { font-size: 12px; letter-spacing: .1em; font-weight: 700; } .bo .card-h h2::before { content: none; } .bo .card-b { padding: 14px 16px; } .bo .kpi { border: 1px solid var(--linea); border-radius: 10px; } .bo .kpi .n { font-size: 24px; } .bo .page-title { font-size: 21px; letter-spacing: 0; } .bo .btn { border-radius: 7px; letter-spacing: .05em; } .bo .fi, .bo textarea.fi, .bo select.fi { border-radius: 7px; border-color: var(--linea-forte); } .bo .qty-box, .bo fieldset { border-radius: 7px; } .bo .tbl { font-size: 13px; } .bo .tbl th { font-size: 10px; border-bottom: 1px solid var(--linea-forte); padding: 8px 10px 6px; } .bo .tbl td { padding: 7.5px 10px; } .bo .thead-cat td { letter-spacing: .1em; font-size: 12px; } .bo .stamp { border-width: 0; border-radius: 99px; padding: 3.5px 11px 3px; letter-spacing: .06em; font-size: 10.5px; } .bo .stamp::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: .5px; } .bo .stamp-done { background: var(--verde-bg); } .bo .flash { border-radius: 8px; } .bo .modal-x { border-radius: 8px; } .bo .pill-count { border-radius: 99px; } /* ===================================================================== Stampa ===================================================================== */ @media print { .topbar, .mainnav, .foot, .page-actions, .stickybar, .no-print, .flash-zone, .sidebar, .bo-top, .imp-bar, .sb-overlay, .auth-theme { display: none !important; } body, body.bo { background: #fff; font-size: 12px; color: #000; } .bo-main { margin-left: 0; } .card { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; } .main, .bo .main { padding: 0; } a { text-decoration: none; color: #000; } } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1000px) { .sidebar { transform: translateX(-105%); transition: transform .18s ease; width: 258px; } body.sb-open .sidebar { transform: none; } .bo-main { margin-left: 0; } .sb-burger { display: inline-flex; } .bo .main { padding: 18px 16px 60px; } body.bo .savebar { left: 0; } } @media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .auth-card { padding: 24px 20px; } } @media (max-width: 640px) { .brand-name { font-size: 17px; } .prod-thumb { display: none; } .main { padding-top: 18px; } .page-title { font-size: 21px; } .bo-top { padding: 0 12px; } } /* ------------------------------------------------ Sito pubblico */ .pub-main { min-height: 55vh; } .pub-flash { padding-top: 16px; } .pub-nav { display: flex; gap: 2px; margin: 0 auto 0 26px; } .pub-link { text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 13px 7px; color: var(--inchiostro); border-bottom: 2px solid transparent; } .pub-link:hover { color: var(--acc); } .pub-link.active { border-bottom-color: var(--acc); color: var(--acc); } .hero { padding: 52px 0 44px; } .hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .hero-eyebrow, .sez-eyebrow { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--acc); margin: 0 0 14px; } .hero h1 { font-size: clamp(34px, 5vw, 55px); line-height: 1.05; margin: 0 0 18px; } .hero-lede { font-style: italic; font-size: 16px; line-height: 1.7; color: var(--inchiostro-2); max-width: 50ch; margin: 0 0 28px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero-foto { aspect-ratio: 4 / 5; background: var(--avorio); padding: 10px; border: 1px solid var(--linea-forte); box-shadow: 0 16px 34px rgba(33, 28, 19, .14); } .hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; border: 1px solid var(--rombo); filter: sepia(.14); } .hero-did { text-align: center; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--inchiostro-2); margin-top: 11px; } @media (prefers-reduced-motion: no-preference) { .hero-txt, .hero-cornice { animation: pub-su .5s ease-out both; } .hero-cornice { animation-delay: .12s; } @keyframes pub-su { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } .strip-dati { border-top: 3px solid var(--acc); border-bottom: 3px solid var(--acc); background: var(--avorio); } .strip-in { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; } .strip-cell { padding: 20px 10px 17px; } .strip-cell + .strip-cell { border-left: 1px solid var(--linea); } .strip-n { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; } .strip-l { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--inchiostro-2); margin-top: 6px; } .sez { padding: 58px 0 34px; } .sez-titolo { font-size: clamp(25px, 3.2vw, 34px); margin: 0 0 16px; } .doc .sez-titolo::before { content: none; } .sez-avorio { background: var(--avorio); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .sez-testo { max-width: 72ch; font-size: 15px; line-height: 1.75; } .sez-testo p { margin: 0 0 14px; } .capolettera::first-letter { font-family: var(--display); font-size: 46px; line-height: .8; font-weight: 700; color: var(--acc); float: left; padding: 5px 9px 0 0; } /* Striscia delle illustrazioni in dialetto (a' frittatina, o' crocchè, l'arancino) */ .dialetto { display: flex; gap: 40px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 30px 0 6px; } .dialetto img { height: 104px; width: auto; } :root[data-theme="dark"] .dialetto img { filter: brightness(1.4) saturate(.9); } .prod3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; } .pcard { background: var(--campo); border: 1px solid var(--linea-forte); box-shadow: var(--ombra-card); } .pcard-img { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--acc); } .pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pcard-b { padding: 18px 20px 20px; } .pcard-b h3 { margin: 0 0 6px; font-size: 21px; } .pcard-fmt { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin: 0 0 10px; } .pcard-b p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--inchiostro-2); } .pcard-gusti { font-style: italic; font-size: 13px; line-height: 1.55; color: var(--oliva); } .prod-nota { margin-top: 26px; font-size: 13.5px; color: var(--inchiostro-2); max-width: 78ch; } .passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; counter-reset: passo; } .passo { background: var(--avorio); border: 1px solid var(--linea); padding: 20px 20px 18px; } .passo::before { counter-increment: passo; content: counter(passo) "."; font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--acc); display: block; margin-bottom: 8px; } .passo h3 { margin: 0 0 7px; font-size: 16px; } .passo p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--inchiostro-2); } .sez-area { background: #b42434; color: #fdf1e0; padding: 58px 0 54px; } .sez-area .sez-eyebrow { color: rgba(253, 241, 224, .8); } .sez-area .sez-titolo { color: #fdf1e0; } .sez-area-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: center; } .sez-area .sez-testo { color: rgba(253, 241, 224, .86); } .area-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; } .area-lista li { display: flex; gap: 11px; align-items: baseline; font-size: 13.5px; line-height: 1.5; } .area-lista i { color: #fdf1e0; font-size: 13px; flex: none; } .sez-area .btn { background: #fdf1e0; color: #b42434; border-color: #fdf1e0; } .sez-area .btn:hover { background: #ffffff; border-color: #ffffff; filter: none; } .sez-area .btn-ghost { background: transparent; color: var(--nav-fg); border-color: rgba(253, 241, 224, .5); } /* Banda a onde del brand (crema su rosso, come la copertina) */ .wave-band { height: 130px; background: #b42434 url('../img/brand/onde.svg') center bottom / auto 118% repeat-x; } .pub-foot { background: var(--carta); padding: 34px 0 26px; } .pub-foot-logo { display: block; height: 148px; width: auto; margin-bottom: 4px; } /* sul tema scuro il lettering verde del logo sparirebbe: sticker crema */ :root[data-theme="dark"] .pub-foot-logo { background: #fdf1e0; padding: 12px 16px; border-radius: 12px; height: 160px; } .pub-foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 34px; } .pub-foot-brand p { font-style: italic; color: var(--inchiostro-2); font-size: 13px; margin: 12px 0 0; max-width: 34ch; } .pub-foot-t { display: block; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); margin-bottom: 12px; } .pub-foot a, .pub-foot-r { display: block; font-size: 13px; margin-bottom: 8px; text-decoration: none; color: var(--inchiostro); } .pub-foot a:hover { color: var(--acc); } .pub-foot a i, .pub-foot-r i { color: var(--acc); width: 17px; } .pub-foot-line { border-top: 1px solid var(--linea); margin-top: 28px; padding-top: 14px; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-2); } .foot-links { display: block; margin-top: 7px; letter-spacing: .06em; } /* Pagine documento (privacy, cookie) e contatti */ .wrap-doc { max-width: 800px; } .doc-data { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-2); margin: -6px 0 26px; } .doc h2 { font-size: 20px; margin: 34px 0 10px; } .doc h2::before { content: '◆'; color: var(--rombo); font-size: 9px; vertical-align: 3px; margin-right: 9px; } .doc h3 { font-size: 15.5px; margin: 22px 0 8px; } .doc p, .doc li { font-size: 14px; line-height: 1.75; } .doc ul { padding-left: 22px; } .doc-tab { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 13px; } .doc-tab th { text-align: left; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 2px solid var(--inchiostro); padding: 7px 10px; } .doc-tab td { border-bottom: 1px solid var(--linea); padding: 8px 10px; vertical-align: top; } .doc-tab code { font-size: 12px; background: var(--carta-2); padding: 1px 5px; } .cont-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: start; margin-top: 26px; } .cont-rec { list-style: none; margin: 0; padding: 0; } .cont-rec li { display: flex; gap: 12px; align-items: baseline; margin-bottom: 13px; font-size: 14px; } .cont-rec i { color: var(--acc); width: 17px; text-align: center; flex: none; } .cont-rec a { text-decoration: none; } .cont-rec a:hover { color: var(--acc); } .hp-campo { position: absolute; left: -6000px; top: -6000px; height: 1px; overflow: hidden; } @media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; gap: 30px; } .hero-cornice { max-width: 420px; } .sez-area-in { grid-template-columns: 1fr; gap: 28px; } .prod3 { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .passi { grid-template-columns: 1fr 1fr; } .cont-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .pub-nav { display: none; } .strip-in { grid-template-columns: 1fr 1fr; } .strip-cell:nth-child(3) { border-left: none; } .strip-cell:nth-child(n+3) { border-top: 1px solid var(--linea); } .area-lista { grid-template-columns: 1fr; } .passi { grid-template-columns: 1fr; } .pub-foot-grid { grid-template-columns: 1fr; gap: 26px; } .wave-band { height: 96px; } } /* Sezione "su misura" della home */ .sumisura-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; } .sumisura-esempi { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .sumisura-esempi li { display: flex; gap: 14px; align-items: flex-start; background: var(--campo); border: 1px solid var(--linea-forte); box-shadow: var(--ombra-card); padding: 15px 17px; font-size: 13.5px; line-height: 1.55; } .sumisura-esempi i { color: var(--acc); font-size: 17px; margin-top: 3px; flex: none; width: 20px; text-align: center; } @media (max-width: 960px) { .sumisura-in { grid-template-columns: 1fr; gap: 26px; } } /* Scadenze dei promemoria (CRM) */ .scad { font-weight: 700; white-space: nowrap; font-size: 12.5px; } .scad-oggi { color: var(--ambra); } .scad-tardi { color: var(--rosso); }