/** * EnvieAqui – foglio base (layout + header). * Incluso da resources/views/components/header.blade.php. * Pagine senza : aggiungere in * */ :root { --ea-primary: #800080; --ea-primary-dark: #660066; --ea-font-sans: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; /** Sidebar utente loggato: larghezza fissa (aside + offset header/contenuto). */ --ea-sidebar-width: 300px; /* Extra larghezza area contenuto (somma sul max-width di .container / griglie; usata in molte viste) */ --ea-page-container-bump: 280px; /* * Back office (viste sotto /backoffice): contenitore unico + tipi base. * Aumentare --ea-bo-font-base / --ea-bo-font-table in un solo punto per tutto il BO. */ --ea-bo-container-max: min(100%, calc(1540px + var(--ea-page-container-bump, 160px))); --ea-bo-font-base: 15px; --ea-bo-font-table: 14px; } html { -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--ea-font-sans); } button, input, textarea, select { font-family: inherit; } /* ---------- Header ---------- */ header.custom-header { height: 80px; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1); display: flex; align-items: stretch; padding: 0; position: sticky; top: 0; z-index: 1000; box-sizing: border-box; } header.custom-header.custom-header--with-sidebar { margin-left: var(--ea-sidebar-width); width: calc(100% - var(--ea-sidebar-width)); max-width: none; } .header-brand-guest { flex: 0 0 var(--ea-sidebar-width); width: var(--ea-sidebar-width); box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 80px; padding: 0 16px; border-right: 1px solid rgba(0, 0, 0, 0.08); } .header-brand-guest .logo-top { display: flex; justify-content: center; align-items: center; width: 100%; } .header-container { flex: 1; min-width: 0; width: auto; max-width: none; margin: 0; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; } .header-left { display: flex; align-items: center; gap: 30px; } .logo-top img { height: 30px; width: auto; display: block; } nav.main-nav, nav.auth-nav { display: flex; align-items: center; gap: 20px; } header.custom-header nav a { text-decoration: none !important; color: var(--ea-primary); font-size: 18px; font-weight: 400; white-space: nowrap; } .header-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8px; margin-right: 4px; color: var(--ea-primary); border-radius: 10px; line-height: 0; transition: background 0.2s ease; } .header-cart-link:hover { background: rgba(128, 0, 128, 0.08); color: var(--ea-primary-dark); } .header-cart-link svg { display: block; } .header-bell-link, .header-bo-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px; color: var(--ea-primary); border-radius: 10px; line-height: 0; transition: background 0.2s ease; } .header-bell-link:hover, .header-bo-link:hover { background: rgba(128, 0, 128, 0.08); color: var(--ea-primary-dark); } .header-bell-link i, .header-bo-link i { font-size: 20px; } .header-bo-link.is-active { background: rgba(128, 0, 128, 0.12); color: var(--ea-primary-dark); } .header-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-right: 8px; font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; border-radius: 10px; background: rgba(128, 0, 128, 0.08); border: 1px solid rgba(128, 0, 128, 0.2); } .header-wallet-label { color: var(--ea-primary); font-weight: 700; font-size: 13px; } .header-wallet-value { font-variant-numeric: tabular-nums; } .header-user-name { color: #5f2b8a; font-size: 18px; font-weight: 500; white-space: nowrap; } .header-cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #fff; background: var(--ea-primary); border-radius: 999px; border: 2px solid #fff; box-sizing: border-box; } .btn-cadastre { background: var(--ea-primary); color: white !important; padding: 8px 16px; border-radius: 6px; transition: 0.3s; } .btn-cadastre:hover { filter: brightness(1.2); } .header-logout-link { color: #c0392b !important; font-weight: 600; font-size: 15px; } .header-logout-link:hover { text-decoration: underline !important; } .header-profile-menu { position: relative; } .header-profile-trigger { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ea-primary); font-weight: 600; font-size: 15px; padding: 8px 10px; border-radius: 10px; } .header-profile-trigger::-webkit-details-marker { display: none; } .header-profile-trigger:hover { background: rgba(128, 0, 128, 0.08); } .header-profile-caret { font-size: 11px; } .header-profile-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); padding: 8px; z-index: 1200; display: none; } .header-profile-menu[open] .header-profile-dropdown { display: block; } .header-profile-dropdown a { display: block; font-size: 14px !important; font-weight: 500 !important; color: #333 !important; padding: 8px 10px; border-radius: 8px; } .header-profile-dropdown a:hover { background: #f6eff8; color: var(--ea-primary) !important; } .header-profile-dropdown .header-logout-link { color: #c0392b !important; } /* ---------- Page banner (cliente + back office) ---------- */ .page-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; background: #a040a0; color: #fff; border-radius: 0; width: calc(100vw - var(--page-banner-sidebar-offset, 0px)); max-width: none; flex-shrink: 0; box-sizing: border-box; padding: 10px 14px; margin: 0 0 20px calc(50% - 50vw + (var(--page-banner-sidebar-offset, 0px) / 2)); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .page-banner--backoffice { background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%); color: #f9fafb; border-bottom: 1px solid #374151; } .page-banner__lead { display: flex; align-items: center; gap: 10px; min-width: 0; } .page-banner__icon { font-size: 1rem; width: 18px; text-align: center; color: #fff; flex-shrink: 0; } .page-banner__title { margin: 0; font-size: 1.02rem; line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; color: #fff; } .page-banner__trailing { flex-shrink: 0; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; } .page-banner__trailing-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 100%; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); } .page-banner__bo-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } .page-banner__bo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; font-family: inherit; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2; transition: background 0.15s ease, border-color 0.15s ease; } .page-banner__bo-btn:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.55); color: #fff; } .page-banner__bo-btn:focus-visible { outline: 2px solid #e5e7eb; outline-offset: 2px; } .page-banner__trailing a.page-banner__link, .page-banner__link { color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .page-banner__trailing a.page-banner__link:hover, .page-banner__link:hover { text-decoration-thickness: 2px; }