/* ========================================================== INFOCORP BRANDING FOR GLPI 11 Version: 1.0 ========================================================== */ :root { --infocorp-yellow: #fbbb00; --infocorp-yellow-rgb: 251, 187, 0; --infocorp-gray: #585857; --infocorp-dark: #20242a; --infocorp-dark-2: #171a1f; } /* ========================================================== 1. LOGO - INTERFACES AUTENTICADAS ========================================================== */ .navbar-brand .glpi-logo { background: url('../pics/infocorp-on-dark.png') no-repeat left center / contain !important; width: 165px !important; min-width: 165px !important; height: 52px !important; } /* Sidebar recolhida */ @media (min-width: 992px) { body.navbar-collapsed .navbar-brand .glpi-logo { width: 42px !important; min-width: 42px !important; height: 42px !important; background: url('../pics/infocorp-on-dark.png') no-repeat left center / auto 42px !important; } } /* ========================================================== 2. SIDEBAR - INTERFACE TÉCNICA ========================================================== */ .sidebar { background-color: var(--infocorp-dark) !important; } .sidebar .navbar-brand, .sidebar .menu-label, .sidebar .nav-link { color: #ffffff !important; } .sidebar .nav-link:hover, .sidebar .nav-link:focus, .sidebar .nav-link.active, .sidebar .nav-item.active > .nav-link { color: var(--infocorp-yellow) !important; background-color: rgba(var(--infocorp-yellow-rgb), .10) !important; } /* Ícones */ .sidebar .nav-link:hover .nav-link-icon, .sidebar .nav-link:focus .nav-link-icon, .sidebar .nav-link.active .nav-link-icon, .sidebar .nav-item.active > .nav-link .nav-link-icon { color: var(--infocorp-yellow) !important; } /* Marca lateral do item ativo */ .sidebar .nav-link.active, .sidebar .nav-item.active > .nav-link { box-shadow: inset 3px 0 0 var(--infocorp-yellow); } /* ========================================================== 3. NAVEGAÇÃO SUPERIOR Self-Service + interface técnica ========================================================== */ header.navbar { background-color: var(--infocorp-dark) !important; border-color: rgba(255, 255, 255, .08) !important; } header.navbar .nav-link, header.navbar .navbar-brand, header.navbar .text-secondary { color: #ffffff !important; } header.navbar .nav-link:hover, header.navbar .nav-link:focus, header.navbar .nav-link.active, header.navbar .nav-item.active > .nav-link { color: var(--infocorp-yellow) !important; background-color: rgba(var(--infocorp-yellow-rgb), .08) !important; } header.navbar .nav-link:hover .icon, header.navbar .nav-link:focus .icon, header.navbar .nav-link.active .icon { color: var(--infocorp-yellow) !important; } /* Navegação secundária */ .nav-bordered .nav-link.active, .nav-bordered .nav-item.show .nav-link { border-color: var(--infocorp-yellow) !important; } /* ========================================================== 4. LOGIN / PÁGINAS ANÔNIMAS ========================================================== */ body.welcome-anonymous { background: radial-gradient( circle at top right, rgba(251, 187, 0, .10), transparent 32% ), #f4f5f7 !important; } body.welcome-anonymous .page-anonymous { min-height: 100vh; } /* * O GLPI 11 usa: * content: var(--logo) * na logo da página anônima. * * Removemos esse conteúdo nativo e usamos somente * a imagem InfoCorp como background. */ body.welcome-anonymous .page-anonymous .container-tight > .text-center .glpi-logo { --logo: none !important; --glpi-logo-dark-login: none !important; content: normal !important; display: inline-block !important; visibility: visible !important; width: 240px !important; min-width: 240px !important; height: 80px !important; margin: 0 auto .5rem auto !important; background: url('../pics/infocorp-on-light.png') no-repeat center center / contain !important; mask: none !important; -webkit-mask: none !important; } body.welcome-anonymous .page-anonymous .container-tight > .text-center .glpi-logo::before, body.welcome-anonymous .page-anonymous .container-tight > .text-center .glpi-logo::after { content: none !important; display: none !important; } /* Título institucional */ body.welcome-anonymous .container-tight > .text-center::after { content: "Bem-vindo ao InfoDesk"; display: block; margin-top: .4rem; margin-bottom: 1.5rem; color: var(--infocorp-dark); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; } /* Card de autenticação */ body.welcome-anonymous .main-content-card { background-color: #ffffff !important; border: 1px solid rgba(32, 36, 42, .10) !important; border-top: 4px solid var(--infocorp-yellow) !important; border-radius: 10px !important; box-shadow: 0 12px 35px rgba(32, 36, 42, .09) !important; } /* Títulos */ body.welcome-anonymous .main-content-card h1, body.welcome-anonymous .main-content-card h2, body.welcome-anonymous .main-content-card h3, body.welcome-anonymous .main-content-card h4 { color: var(--infocorp-dark) !important; } /* Campos */ body.welcome-anonymous .form-control, body.welcome-anonymous .form-select { border-color: #d8dce2 !important; } body.welcome-anonymous .form-control:focus, body.welcome-anonymous .form-select:focus { border-color: var(--infocorp-yellow) !important; box-shadow: 0 0 0 .20rem rgba(var(--infocorp-yellow-rgb), .18) !important; } /* Checkbox */ body.welcome-anonymous .form-check-input:checked { background-color: var(--infocorp-yellow) !important; border-color: var(--infocorp-yellow) !important; } /* Botão de login */ body.welcome-anonymous .btn-primary, body.welcome-anonymous button[type="submit"] { background-color: var(--infocorp-yellow) !important; border-color: var(--infocorp-yellow) !important; color: var(--infocorp-dark) !important; font-weight: 600; } body.welcome-anonymous .btn-primary:hover, body.welcome-anonymous button[type="submit"]:hover { background-color: #e5aa00 !important; border-color: #e5aa00 !important; color: var(--infocorp-dark-2) !important; } /* Rodapé */ body.welcome-anonymous .text-muted { color: #747b85 !important; } /* ========================================================== 5. RESPONSIVIDADE ========================================================== */ @media (max-width: 767.98px) { body.welcome-anonymous .page-anonymous .container-tight > .text-center .glpi-logo { width: 200px !important; min-width: 200px !important; height: 68px !important; } body.welcome-anonymous .container-tight > .text-center::after { font-size: 1.25rem; } } /* ========================================================== INFOCORP - MICROSOFT ENTRA ID / SSO ========================================================== */ /* Título corporativo: evita aperto entre as duas colunas */ body.welcome-anonymous .main-content-card h2, body.welcome-anonymous .main-content-card h3, body.welcome-anonymous .main-content-card h4 { line-height: 1.35; } /* Card clicável do Microsoft Entra ID */ body.welcome-anonymous .infocorp-sso-provider { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 190px !important; min-width: 190px !important; min-height: 150px !important; padding: 1.15rem 1rem !important; border: 1px solid rgba(32, 36, 42, .08) !important; border-radius: 10px !important; background: #ffffff !important; text-align: center !important; text-decoration: none !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Hover */ body.welcome-anonymous .infocorp-sso-provider:hover { border-color: var(--infocorp-yellow) !important; box-shadow: 0 8px 22px rgba(32, 36, 42, .10) !important; transform: translateY(-1px); } /* Logo Microsoft */ body.welcome-anonymous .infocorp-microsoft-logo { display: block !important; width: 58px !important; height: 58px !important; margin: 0 auto .85rem auto !important; object-fit: contain !important; } /* Nome completo */ body.welcome-anonymous .infocorp-sso-provider, body.welcome-anonymous .infocorp-sso-provider span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; } body.welcome-anonymous .infocorp-sso-label { display: block !important; margin-top: .35rem; color: var(--infocorp-dark) !important; font-weight: 600; line-height: 1.25; } /* Evita corte do texto dentro do card */ body.welcome-anonymous .infocorp-sso-provider * { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; } /* ========================================================== INFOCORP - REMOVE ÍCONE MICROSOFT ORIGINAL DO SAML ========================================================== */ body.welcome-anonymous .infocorp-sso-provider i.fa-microsoft, body.welcome-anonymous .infocorp-sso-provider i.fa-brands.fa-microsoft { display: none !important; visibility: hidden !important; } /* ========================================================== INFOCORP - FOOTER DO LOGIN ========================================================== */ body.welcome-anonymous .infocorp-login-footer { color: #6b7078 !important; font-size: .82rem; font-weight: 500; letter-spacing: .01em; } /* ========================================================== INFOCORP - LOGIN FOOTER BRANDING ========================================================== */ body.welcome-anonymous .copyright { font-size: 0 !important; text-decoration: none !important; cursor: default !important; } body.welcome-anonymous .copyright::after { content: "InfoDesk • Info Tecnologia e Sistemas • 2026"; font-size: 0.875rem !important; color: #405070 !important; } /* ========================================================== INFOCORP - INFODESK HOME / HERO ========================================================== */ /* * Hero principal do portal * A imagem é usada apenas como composição visual. * Todo o texto e pesquisa continuam sendo HTML nativo do GLPI. */ .helpdesk-home-container .search-banner { position: relative !important; min-height: 360px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #f7f5ef !important; background-image: url('../pics/infodesk-hero.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; border: 0 !important; overflow: hidden !important; } /* * Oculta as ilustrações nativas do GLPI. * A composição visual passa a ser controlada * pelo nosso Hero corporativo. */ .helpdesk-home-container .search-banner .scene-left, .helpdesk-home-container .search-banner .scene-right { display: none !important; } /* * Área central do Hero */ .helpdesk-home-container .search-banner-content { position: relative !important; z-index: 2 !important; width: 100% !important; padding-top: 55px !important; padding-bottom: 55px !important; } /* * Título principal */ .helpdesk-home-container .search-banner h1 { color: #20242a !important; font-weight: 700 !important; font-size: clamp(2rem, 4vw, 3rem) !important; line-height: 1.15 !important; text-shadow: 0 1px 2px rgba(255,255,255,.35) !important; margin-bottom: 28px !important; } /* * Barra de pesquisa */ .helpdesk-home-container .search-bar-container { position: relative !important; max-width: 760px !important; margin: 0 auto !important; } .helpdesk-home-container .home-search { min-height: 58px !important; padding-left: 52px !important; padding-right: 24px !important; border: 0 !important; border-radius: 14px !important; background: #ffffff !important; color: #20242a !important; font-size: 1rem !important; box-shadow: 0 8px 30px rgba(32,36,42,.16) !important; transition: box-shadow .2s ease, transform .2s ease !important; } .helpdesk-home-container .home-search:focus { border-color: #fbbb00 !important; box-shadow: 0 0 0 3px rgba(251,187,0,.22), 0 10px 32px rgba(32,36,42,.18) !important; transform: translateY(-1px); } /* * Ícone da pesquisa */ .helpdesk-home-container .search-bar-container .input-icon-addon { left: 18px !important; color: #585857 !important; z-index: 3 !important; } .helpdesk-home-container .search-bar-container .input-icon-addon .ti { font-size: 1.25rem !important; } /* * Placeholder */ .helpdesk-home-container .home-search::placeholder { color: #777777 !important; opacity: 1 !important; } /* ========================================================== QUICK ACCESS / CARDS ========================================================== */ .helpdesk-home-container .tiles-banner { background: #f5f5f3 !important; padding-top: 24px !important; padding-bottom: 28px !important; } .helpdesk-home-container .tiles-banner .card { background: #ffffff !important; border: 1px solid rgba(32,36,42,.08) !important; border-radius: 14px !important; box-shadow: 0 3px 14px rgba(32,36,42,.07) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } .helpdesk-home-container .tiles-banner .card:hover { transform: translateY(-3px) !important; border-color: rgba(251,187,0,.65) !important; box-shadow: 0 10px 28px rgba(32,36,42,.12) !important; } .helpdesk-home-container .tiles-banner .card-title { color: #20242a !important; font-weight: 700 !important; } .helpdesk-home-container .tiles-banner .text-secondary { color: #585857 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767.98px) { .helpdesk-home-container .search-banner { min-height: 330px !important; background-position: center center !important; } .helpdesk-home-container .search-banner-content { padding: 42px 20px !important; } .helpdesk-home-container .search-banner h1 { font-size: 1.8rem !important; margin-bottom: 22px !important; } .helpdesk-home-container .home-search { min-height: 54px !important; padding-left: 48px !important; } .helpdesk-home-container .tiles-banner { padding-top: 16px !important; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .helpdesk-home-container .home-search, .helpdesk-home-container .tiles-banner .card { transition: none !important; } } /* ========================================================= * InfoDesk - Refinamento visual InfoCorp * ========================================================= */ /* --------------------------------------------------------- * HERO * --------------------------------------------------------- */ .helpdesk-home-container .search-banner { min-height: 320px !important; height: 320px !important; background-size: cover !important; background-position: center center !important; } /* Conteúdo central do Hero */ .helpdesk-home-container .search-banner-content { display: flex; flex-direction: column; justify-content: center; padding-top: 10px; padding-bottom: 10px; } /* Título do Hero */ .helpdesk-home-container .search-banner-content h1 { margin-bottom: 28px !important; } /* --------------------------------------------------------- * CAMPO DE PESQUISA * --------------------------------------------------------- */ .helpdesk-home-container .search-bar-container { width: 850px; max-width: 90%; margin-left: auto; margin-right: auto; } /* Campo de pesquisa */ .helpdesk-home-container .home-search { min-height: 54px; border-radius: 12px; font-size: 16px; } /* --------------------------------------------------------- * CARDS DE ACESSO RÁPIDO * --------------------------------------------------------- */ .helpdesk-home-container .tiles-banner .card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; border: 1px solid transparent; } /* Efeito ao passar o mouse */ .helpdesk-home-container .tiles-banner .card:hover { transform: translateY(-3px); border-color: #fdbb05; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10); } /* Títulos dos cards */ .helpdesk-home-container .tiles-banner .card-title { transition: color 0.18s ease; } /* Título amarelo no hover */ .helpdesk-home-container .tiles-banner .card:hover .card-title { color: #fdbb05; } /* --------------------------------------------------------- * RESPONSIVIDADE - TABLETS * --------------------------------------------------------- */ @media (max-width: 992px) { .helpdesk-home-container .search-banner { min-height: 300px !important; height: 300px !important; } .helpdesk-home-container .search-bar-container { width: 80%; } } /* --------------------------------------------------------- * RESPONSIVIDADE - CELULARES * --------------------------------------------------------- */ @media (max-width: 768px) { .helpdesk-home-container .search-banner { min-height: 280px !important; height: 280px !important; } .helpdesk-home-container .search-banner-content h1 { font-size: 28px; margin-bottom: 20px !important; } .helpdesk-home-container .search-bar-container { width: 90%; max-width: 90%; } .helpdesk-home-container .home-search { min-height: 50px; font-size: 15px; } } /* ============================================================ * INFODESK - CUSTOM HOME FINAL BRANDING * InfoCorp / InfoDesk * ============================================================ */ /* ------------------------------------------------------------ * 1. HERO - POSICIONAMENTO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner { position: relative; overflow: hidden; } /* ------------------------------------------------------------ * 2. LABEL "INFODESK" * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content { position: relative; z-index: 10; } .helpdesk-home-container .search-banner-content::before { content: "INFODESK"; display: block; margin-bottom: 6px; color: #f5b800; font-size: 16px; font-weight: 700; letter-spacing: 7px; line-height: 1.2; text-align: center; } /* ------------------------------------------------------------ * 3. TÍTULO PRINCIPAL * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1 { color: #172033; font-weight: 800; letter-spacing: -1px; } /* ------------------------------------------------------------ * 4. SUBTÍTULO DO INFODESK * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1::after { content: "Encontre respostas, solicite serviços ou acompanhe seus chamados."; display: block; margin-top: 8px; color: #667085; font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1.4; } /* ------------------------------------------------------------ * 5. FRASE LATERAL ESQUERDA * ------------------------------------------------------------ */ .helpdesk-home-container .scene-left { position: relative; z-index: 5; } .helpdesk-home-container .scene-left::after { content: "Juntos\A facilitamos\A o seu dia"; white-space: pre-line; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-4deg); width: 210px; color: #26334f; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 27px; font-weight: 600; line-height: 1.15; text-align: center; pointer-events: none; } /* pequeno detalhe amarelo abaixo da frase */ .helpdesk-home-container .scene-left::before { content: ""; position: absolute; left: 50%; top: 69%; width: 48px; height: 4px; background: #f5b800; transform: translateX(-50%) rotate(-4deg); border-radius: 10px; z-index: 2; pointer-events: none; } /* ------------------------------------------------------------ * 6. BLOCO DIREITO * ------------------------------------------------------------ */ .helpdesk-home-container .scene-right { position: relative; z-index: 5; } .helpdesk-home-container .scene-right::after { content: "SOLUÇÕES\A PESSOAS\A RESULTADOS"; white-space: pre-line; position: absolute; right: 35px; top: 38px; width: 135px; color: #667085; font-size: 13px; font-weight: 700; line-height: 1.65; letter-spacing: 4px; text-align: center; pointer-events: none; } /* linha amarela abaixo do bloco direito */ .helpdesk-home-container .scene-right::before { content: ""; position: absolute; right: 80px; top: 122px; width: 38px; height: 3px; background: #f5b800; border-radius: 10px; pointer-events: none; } /* ------------------------------------------------------------ * 7. BARRA DE PESQUISA * ------------------------------------------------------------ */ .helpdesk-home-container .home-search { border: none !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 8px 30px rgba(31, 41, 55, 0.10) !important; min-height: 56px; padding-left: 52px; color: #344054; } .helpdesk-home-container .home-search::placeholder { color: #667085; opacity: 1; } /* ------------------------------------------------------------ * 8. CARDS DE SERVIÇO * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner .card { position: relative; border: 1px solid transparent; border-radius: 16px; background: #ffffff; box-shadow: 0 5px 18px rgba(16, 24, 40, 0.06); transition: transform 0.20s ease, box-shadow 0.20s ease, border-color 0.20s ease; } /* hover */ .helpdesk-home-container .tiles-banner .card:hover { transform: translateY(-3px); border-color: #f5c13d; box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12); } /* ------------------------------------------------------------ * 9. SETA AMARELA DOS CARDS * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner .card::after { content: "›"; position: absolute; right: 20px; top: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; background: #f5b800; color: #ffffff; font-size: 27px; font-weight: 400; line-height: 1; transition: transform 0.20s ease, background 0.20s ease; } /* movimento da seta no hover */ .helpdesk-home-container .tiles-banner .card:hover::after { transform: translateY(-50%) translateX(3px); background: #e9aa00; } /* ------------------------------------------------------------ * 10. ESPAÇO PARA A SETA * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner .card-body { padding-right: 62px; } /* ------------------------------------------------------------ * 11. TÍTULOS DOS CARDS * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner .card-title { color: #172033; font-weight: 700; } /* ------------------------------------------------------------ * 12. DESCRIÇÃO DOS CARDS * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner .text-secondary { color: #667085 !important; line-height: 1.45; } /* ------------------------------------------------------------ * 13. ÍCONES DOS CARDS * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner .aspect-ratio-1 { flex-shrink: 0; } /* ------------------------------------------------------------ * 14. ÁREA DOS CHAMADOS * ------------------------------------------------------------ */ .helpdesk-home-container .tickets-banner { background: #ffffff; padding-top: 12px; } /* ------------------------------------------------------------ * 15. RESPONSIVIDADE * ------------------------------------------------------------ */ @media (max-width: 1200px) { .helpdesk-home-container .scene-left::after { font-size: 23px; width: 175px; } .helpdesk-home-container .scene-right::after { right: 20px; font-size: 11px; letter-spacing: 3px; } } @media (max-width: 900px) { .helpdesk-home-container .scene-left::after, .helpdesk-home-container .scene-left::before, .helpdesk-home-container .scene-right::after, .helpdesk-home-container .scene-right::before { display: none; } .helpdesk-home-container .search-banner-content::before { font-size: 14px; letter-spacing: 5px; } .helpdesk-home-container .search-banner-content h1::after { font-size: 15px; } } @media (max-width: 576px) { .helpdesk-home-container .search-banner-content::before { font-size: 12px; letter-spacing: 4px; } .helpdesk-home-container .search-banner-content h1 { font-size: 28px; } .helpdesk-home-container .search-banner-content h1::after { font-size: 14px; } .helpdesk-home-container .tiles-banner .card::after { right: 12px; width: 27px; height: 27px; font-size: 24px; } .helpdesk-home-container .tiles-banner .card-body { padding-right: 48px; } } /* ============================================================ * FIM - INFODESK CUSTOM HOME * ============================================================ */ /* ============================================================ INFODESK - REFINAMENTO VISUAL INFOCORP Elementos laterais do Hero + refinamentos ============================================================ */ /* ------------------------------------------------------------ HERO / SEARCH BANNER ------------------------------------------------------------ */ .search-banner { position: relative !important; overflow: hidden !important; } /* ------------------------------------------------------------ BLOCO ESQUERDO "Juntos facilitamos o seu dia" ------------------------------------------------------------ */ .search-banner::before { content: "Juntos\A facilitamos\A o seu dia"; white-space: pre; position: absolute; left: 3.2%; top: 50%; transform: translateY(-50%); width: 220px; min-height: 105px; display: flex; align-items: center; justify-content: center; padding: 22px 24px; box-sizing: border-box; font-family: "Segoe Script", "Brush Script MT", "Segoe Print", cursive; font-size: 25px; line-height: 1.15; font-weight: 600; text-align: center; color: #27354d; background: rgba(255, 255, 255, 0.32); border: 2px solid rgba(245, 178, 0, 0.85); border-radius: 2px; z-index: 5; pointer-events: none; } /* Pequeno detalhe amarelo abaixo do texto */ .search-banner::after { content: "SOLUÇÕES • PESSOAS • RESULTADOS"; position: absolute; right: 3.2%; top: 50%; transform: translateY(-50%); width: 205px; min-height: 105px; display: flex; align-items: center; justify-content: center; padding: 22px 18px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.8; letter-spacing: 3px; font-weight: 700; text-align: center; color: #66758d; background: rgba(255, 255, 255, 0.32); border: 2px solid rgba(245, 178, 0, 0.85); border-radius: 2px; z-index: 5; pointer-events: none; } /* ------------------------------------------------------------ TÍTULO CENTRAL ------------------------------------------------------------ */ .search-banner-content { position: relative; z-index: 10; } .search-banner-content h1 { position: relative; font-size: clamp(32px, 3vw, 52px) !important; font-weight: 700 !important; color: #182536 !important; letter-spacing: -1px; text-shadow: 0 1px 0 rgba(255,255,255,0.35); } /* ------------------------------------------------------------ INFODESK ACIMA DO TÍTULO ------------------------------------------------------------ */ .search-banner-content h1::before { content: "INFODESK"; display: block; margin-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 6px; color: #f2b300; } /* ------------------------------------------------------------ SUBTÍTULO ------------------------------------------------------------ */ .search-banner-content h1::after { content: "Encontre respostas, solicite serviços ou acompanhe seus chamados."; display: block; margin-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #66758d; } /* ------------------------------------------------------------ BARRA DE PESQUISA ------------------------------------------------------------ */ .search-bar-container { position: relative; z-index: 10; margin-top: 26px !important; } .search-bar-container .home-search { min-height: 58px; border: 1px solid rgba(255,255,255,0.85) !important; border-radius: 30px !important; background: rgba(255,255,255,0.94) !important; box-shadow: 0 8px 25px rgba(39,53,77,0.10), 0 2px 8px rgba(39,53,77,0.06); font-size: 16px; padding-left: 52px; } .search-bar-container .home-search:focus { border-color: #f5b400 !important; box-shadow: 0 0 0 3px rgba(245,180,0,0.18), 0 8px 25px rgba(39,53,77,0.10); } /* ------------------------------------------------------------ CARDS DE ACESSO RÁPIDO ------------------------------------------------------------ */ .tiles-banner { background: #f6f7f8 !important; } .tiles-banner .card { position: relative; border: 1px solid rgba(40,55,75,0.08) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 5px 16px rgba(30,45,65,0.07); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .tiles-banner .card:hover { transform: translateY(-3px); border-color: rgba(245,180,0,0.60) !important; box-shadow: 0 10px 24px rgba(30,45,65,0.12); } /* ------------------------------------------------------------ SETA AMARELA NOS CARDS ------------------------------------------------------------ */ .tiles-banner .card::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f5b400; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 27px; line-height: 27px; font-weight: 400; box-shadow: 0 3px 8px rgba(245,180,0,0.25); transition: transform 0.18s ease, background 0.18s ease; } .tiles-banner .card:hover::after { background: #e5a900; transform: translateY(-50%) translateX(2px); } /* ------------------------------------------------------------ ÁREA DE CHAMADOS ------------------------------------------------------------ */ .tickets-banner { background: #ffffff !important; } .tickets-banner .container-xl { padding-top: 18px; } /* ------------------------------------------------------------ RESPONSIVIDADE ------------------------------------------------------------ */ @media (max-width: 1200px) { .search-banner::before { left: 1.5%; width: 180px; font-size: 21px; } .search-banner::after { right: 1.5%; width: 170px; font-size: 11px; letter-spacing: 2px; } } @media (max-width: 992px) { .search-banner::before, .search-banner::after { display: none; } .search-banner-content h1 { font-size: 38px !important; } } @media (max-width: 576px) { .search-banner-content h1 { font-size: 30px !important; } .search-banner-content h1::before { font-size: 11px; letter-spacing: 4px; } .search-banner-content h1::after { font-size: 14px; } .search-bar-container { margin-top: 18px !important; } .search-bar-container .home-search { min-height: 52px; font-size: 14px; } .tiles-banner .card::after { right: 12px; width: 26px; height: 26px; font-size: 23px; } } /* ============================================================ * INFOCORP - CORREÇÃO DE ELEMENTOS DUPLICADOS * ============================================================ */ /* Remove o primeiro INFODESK criado acima do título */ .helpdesk-home-container .search-banner-content::before { display: none !important; } /* Mantém somente o INFODESK criado no bloco final */ .search-banner-content h1::before { display: block !important; } /* Remove a primeira versão da caixa esquerda */ .helpdesk-home-container .scene-left::after { display: none !important; } /* Mantém a caixa esquerda principal */ .search-banner::before { display: flex !important; } /* Mantém a caixa direita */ .search-banner::after { display: flex !important; } /* ============================================================ * INFOCORP / INFODESK * HERO FINAL - LAYOUT CORPORATIVO * ============================================================ */ /* ------------------------------------------------------------ * HERO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner { position: relative !important; overflow: hidden !important; min-height: 325px !important; background-size: cover !important; background-position: center center !important; } /* ------------------------------------------------------------ * CONTEÚDO CENTRAL * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content { position: relative !important; z-index: 20 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding-top: 28px !important; } /* ------------------------------------------------------------ * INFODESK * Apenas uma ocorrência * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content::before { content: "INFODESK" !important; display: block !important; margin: 0 0 8px 0 !important; color: #f2b300 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 7px !important; line-height: 1 !important; text-align: center !important; } /* Remove o INFODESK duplicado */ .helpdesk-home-container .search-banner-content h1::before { content: none !important; display: none !important; } /* ------------------------------------------------------------ * TÍTULO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1 { margin: 0 !important; color: #172033 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: clamp(32px, 3vw, 50px) !important; font-weight: 800 !important; letter-spacing: -1.5px !important; line-height: 1.05 !important; text-align: center !important; } /* ------------------------------------------------------------ * SUBTÍTULO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1::after { content: "Encontre respostas, solicite serviços ou acompanhe seus chamados." !important; display: block !important; margin-top: 10px !important; color: #667085 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.4 !important; text-align: center !important; } /* ------------------------------------------------------------ * CAMPO DE PESQUISA * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container { position: relative !important; z-index: 30 !important; width: min(820px, 60vw) !important; margin-top: 26px !important; } .helpdesk-home-container .search-bar-container .home-search { height: 60px !important; padding-left: 52px !important; padding-right: 25px !important; border: none !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 8px 25px rgba(23, 32, 51, 0.10) !important; color: #27354d !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; } .helpdesk-home-container .search-bar-container .home-search::placeholder { color: #667085 !important; opacity: 1 !important; } .helpdesk-home-container .search-bar-container .input-icon-addon { left: 20px !important; color: #27354d !important; font-size: 20px !important; } /* ------------------------------------------------------------ * CAIXA ESQUERDA * Juntos facilitamos o seu dia * ------------------------------------------------------------ */ .helpdesk-home-container .scene-left::after { content: "Juntos\A facilitamos\A o seu dia" !important; white-space: pre !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 220px !important; padding: 22px 24px !important; box-sizing: border-box !important; color: #27354d !important; background: rgba(255, 255, 255, 0.28) !important; border: 1.5px solid rgba(242, 179, 0, 0.85) !important; border-radius: 2px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.15 !important; text-align: center !important; letter-spacing: -0.5px !important; z-index: 15 !important; pointer-events: none !important; } /* ------------------------------------------------------------ * NEGRITO VISUAL DA PALAVRA "facilitamos" * ------------------------------------------------------------ */ .helpdesk-home-container .scene-left::before { content: "" !important; position: absolute !important; left: calc(50% - 47px) !important; top: calc(50% + 56px) !important; width: 62px !important; height: 3px !important; background: #f2b300 !important; z-index: 16 !important; } /* ------------------------------------------------------------ * REMOVE A VERSÃO ANTIGA DA CAIXA ESQUERDA * ------------------------------------------------------------ */ .search-banner::before { content: none !important; display: none !important; } /* ------------------------------------------------------------ * TEXTO DIREITO * SOLUÇÕES / PESSOAS / RESULTADOS * ------------------------------------------------------------ */ .search-banner::after { content: "SOLUÇÕES\A PESSOAS\A RESULTADOS" !important; white-space: pre !important; position: absolute !important; right: 4.2% !important; top: 30% !important; transform: none !important; width: auto !important; min-height: 0 !important; padding: 0 !important; display: block !important; box-sizing: border-box !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: #27354d !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 4px !important; line-height: 1.65 !important; text-align: left !important; z-index: 18 !important; pointer-events: none !important; } /* ------------------------------------------------------------ * REMOVE QUALQUER ESTILO ANTIGO DOS ELEMENTOS LATERAIS * ------------------------------------------------------------ */ .helpdesk-home-container .scene-left { position: relative !important; z-index: 10 !important; } .helpdesk-home-container .scene-right { position: relative !important; z-index: 5 !important; } /* ------------------------------------------------------------ * AJUSTE DOS CARDS * ------------------------------------------------------------ */ .helpdesk-home-container .tiles-banner { position: relative !important; } .helpdesk-home-container .tiles-banner .card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important; } .helpdesk-home-container .tiles-banner .card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 22px rgba(23, 32, 51, 0.12) !important; border-color: rgba(242, 179, 0, 0.55) !important; } /* ------------------------------------------------------------ * RESPONSIVIDADE * ------------------------------------------------------------ */ @media (max-width: 1200px) { .helpdesk-home-container .search-bar-container { width: min(720px, 58vw) !important; } .helpdesk-home-container .scene-left::after { width: 190px !important; font-size: 21px !important; } .search-banner::after { right: 2.5% !important; font-size: 11px !important; letter-spacing: 3px !important; } } @media (max-width: 900px) { .helpdesk-home-container .search-banner { min-height: 300px !important; } .helpdesk-home-container .scene-left::after { width: 155px !important; padding: 18px !important; font-size: 18px !important; } .search-banner::after { right: 2% !important; font-size: 9px !important; letter-spacing: 2px !important; } .helpdesk-home-container .search-bar-container { width: 55vw !important; } } @media (max-width: 700px) { .helpdesk-home-container .scene-left::after, .search-banner::after { display: none !important; } .helpdesk-home-container .search-bar-container { width: 85vw !important; } .helpdesk-home-container .search-banner-content { padding-top: 25px !important; } } /* ============================================================ * INFODESK - BANNER OFICIAL * Banner estático 2048x257 * ============================================================ */ .helpdesk-home-container .search-banner { position: relative !important; overflow: hidden !important; height: 257px !important; min-height: 257px !important; padding: 0 !important; margin: 0 !important; background-image: url('../pics/infodesk-hero-exact.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 257px !important; } /* ============================================================ * REMOVE AS ILUSTRAÇÕES NATIVAS DO GLPI * ============================================================ */ .helpdesk-home-container .search-banner .scene { display: none !important; } /* ============================================================ * REMOVE ELEMENTOS DECORATIVOS CRIADOS PELOS CSS ANTIGOS * ============================================================ */ .helpdesk-home-container .search-banner::before, .helpdesk-home-container .search-banner::after { content: none !important; display: none !important; } /* ============================================================ * CONTAINER CENTRAL * ============================================================ */ .helpdesk-home-container .search-banner-content { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 257px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; } /* ============================================================ * REMOVE O TÍTULO ORIGINAL DO GLPI * * O título já está dentro do banner. * ============================================================ */ .helpdesk-home-container .search-banner-content h1 { display: none !important; } .helpdesk-home-container .search-banner-content h1::before, .helpdesk-home-container .search-banner-content h1::after { content: none !important; display: none !important; } /* ============================================================ * CAMPO DE PESQUISA REAL DO GLPI * ============================================================ */ .helpdesk-home-container .search-bar-container { position: absolute !important; top: 63.5% !important; left: 28.8% !important; width: 42.5% !important; height: 56px !important; margin: 0 !important; padding: 0 !important; z-index: 50 !important; } /* ============================================================ * INPUT * ============================================================ */ .helpdesk-home-container .search-bar-container .home-search { width: 100% !important; height: 56px !important; padding-left: 48px !important; padding-right: 20px !important; border: 0 !important; border-radius: 30px !important; background: transparent !important; box-shadow: none !important; color: #26334f !important; font-size: 16px !important; } /* ============================================================ * ÍCONE DE PESQUISA * ============================================================ */ .helpdesk-home-container .search-bar-container .input-icon-addon { background: transparent !important; border: 0 !important; color: #263b5c !important; z-index: 60 !important; } /* ============================================================ * PLACEHOLDER * ============================================================ */ .helpdesk-home-container .search-bar-container .home-search::placeholder { color: #667085 !important; opacity: 1 !important; } /* ============================================================ * RESULTADOS DA PESQUISA * ============================================================ */ .helpdesk-home-container .search-result-container { z-index: 100 !important; } /* ============================================================ * OVERLAY * ============================================================ */ .helpdesk-home-container #search-overlay { z-index: 90 !important; } /* ============================================================ * RESPONSIVIDADE * ============================================================ */ @media (max-width: 900px) { .helpdesk-home-container .search-banner { background-size: auto 257px !important; background-position: center center !important; } .helpdesk-home-container .search-bar-container { left: 20% !important; width: 60% !important; } } @media (max-width: 600px) { .helpdesk-home-container .search-banner { background-size: auto 257px !important; background-position: center center !important; } .helpdesk-home-container .search-bar-container { top: 63% !important; left: 10% !important; width: 80% !important; } } /* ============================================================ * INFODESK - BANNER EXACT FINAL * ============================================================ */ /* ------------------------------------------------------------ * 1. BANNER * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner { position: relative !important; overflow: hidden !important; height: 257px !important; min-height: 257px !important; margin: 0 !important; padding: 0 !important; background-image: url('../pics/infodesk-hero-exact.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; } /* ------------------------------------------------------------ * 2. REMOVE AS ILUSTRAÇÕES NATIVAS * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner .scene, .helpdesk-home-container .scene-left, .helpdesk-home-container .scene-right { display: none !important; } /* ------------------------------------------------------------ * 3. REMOVE TODOS OS ELEMENTOS DECORATIVOS ANTIGOS * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner::before, .helpdesk-home-container .search-banner::after, .helpdesk-home-container .search-banner-content::before, .helpdesk-home-container .search-banner-content::after, .helpdesk-home-container .search-banner-content h1::before, .helpdesk-home-container .search-banner-content h1::after { content: none !important; display: none !important; } /* ------------------------------------------------------------ * 4. CONTAINER DO CONTEÚDO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 257px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; } /* ------------------------------------------------------------ * 5. REMOVE O TÍTULO ORIGINAL * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1 { display: none !important; } /* ------------------------------------------------------------ * 6. CAMPO DE PESQUISA * * O banner já contém: * - fundo branco * - lupa * - placeholder * * Portanto o campo real fica transparente. * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container { position: absolute !important; top: 63.5% !important; left: 28.8% !important; width: 42.5% !important; height: 56px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; z-index: 50 !important; } /* ------------------------------------------------------------ * 7. INPUT REAL DO GLPI * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search { width: 100% !important; height: 56px !important; padding: 0 20px !important; border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important; color: #26334f !important; font-size: 16px !important; } /* ------------------------------------------------------------ * 8. REMOVE A LUPA REAL * * A lupa já existe dentro do banner. * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .input-icon-addon { display: none !important; } /* ------------------------------------------------------------ * 9. REMOVE O PLACEHOLDER REAL * * O placeholder já está desenhado na imagem. * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search::placeholder { color: transparent !important; opacity: 0 !important; } /* ------------------------------------------------------------ * 10. TEXTO DIGITADO * * Quando o usuário começar a escrever, * o texto real do GLPI aparecerá normalmente. * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search { color: #26334f !important; } /* ------------------------------------------------------------ * 11. RESULTADOS DA PESQUISA * ------------------------------------------------------------ */ .helpdesk-home-container .search-result-container { z-index: 100 !important; } /* ------------------------------------------------------------ * 12. OVERLAY * ------------------------------------------------------------ */ .helpdesk-home-container #search-overlay { z-index: 90 !important; } /* ============================================================ * RESPONSIVIDADE * ============================================================ */ @media (max-width: 900px) { .helpdesk-home-container .search-banner { background-size: cover !important; background-position: center center !important; } .helpdesk-home-container .search-bar-container { left: 20% !important; width: 60% !important; } } @media (max-width: 600px) { .helpdesk-home-container .search-banner { background-size: cover !important; background-position: center center !important; } .helpdesk-home-container .search-bar-container { top: 63% !important; left: 10% !important; width: 80% !important; } } /* ============================================================ * INFODESK - PESQUISA DINÂMICA SOBRE BANNER ESTÁTICO * ============================================================ */ /* ------------------------------------------------------------ * BANNER * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner { position: relative !important; overflow: hidden !important; height: 257px !important; min-height: 257px !important; margin: 0 !important; padding: 0 !important; background-image: url('../pics/infodesk-hero-exact.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; } /* ------------------------------------------------------------ * REMOVE AS ILUSTRAÇÕES NATIVAS * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner .scene, .helpdesk-home-container .scene-left, .helpdesk-home-container .scene-right { display: none !important; } /* ------------------------------------------------------------ * REMOVE OS ELEMENTOS DECORATIVOS CRIADOS PELO CSS ANTIGO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner::before, .helpdesk-home-container .search-banner::after, .helpdesk-home-container .search-banner-content::before, .helpdesk-home-container .search-banner-content::after, .helpdesk-home-container .search-banner-content h1::before, .helpdesk-home-container .search-banner-content h1::after { content: none !important; display: none !important; } /* ------------------------------------------------------------ * CONTAINER * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 257px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; } /* ------------------------------------------------------------ * REMOVE TÍTULO REAL DO GLPI * O título já está dentro da imagem. * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1 { display: none !important; } /* ============================================================ * PESQUISA REAL DO GLPI * ============================================================ */ .helpdesk-home-container .search-bar-container { position: absolute !important; top: 63.5% !important; left: 28.8% !important; width: 42.5% !important; height: 56px !important; margin: 0 !important; padding: 0 !important; z-index: 50 !important; } /* ------------------------------------------------------------ * CAIXA REAL DE PESQUISA * * Ela fica exatamente sobre a caixa branca que existe * dentro da imagem. * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search { width: 100% !important; height: 56px !important; box-sizing: border-box !important; padding: 0 22px 0 48px !important; border: none !important; border-radius: 18px !important; background: #ffffff !important; color: #26334f !important; font-size: 16px !important; font-weight: 400 !important; outline: none !important; box-shadow: 0 5px 18px rgba(30, 40, 60, 0.08) !important; } /* ------------------------------------------------------------ * PLACEHOLDER REAL * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search::placeholder { color: #667085 !important; opacity: 1 !important; } /* ------------------------------------------------------------ * LUPA REAL * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .input-icon-addon { display: flex !important; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; align-items: center !important; justify-content: center !important; z-index: 5 !important; pointer-events: none !important; } .helpdesk-home-container .search-bar-container .input-icon-addon i { font-size: 20px !important; color: #26334f !important; } /* ------------------------------------------------------------ * RESULTADOS * ------------------------------------------------------------ */ .helpdesk-home-container .search-result-container { z-index: 100 !important; } /* ------------------------------------------------------------ * OVERLAY DA PESQUISA * ------------------------------------------------------------ */ .helpdesk-home-container #search-overlay { z-index: 90 !important; } /* ============================================================ * RESPONSIVO * ============================================================ */ @media (max-width: 900px) { .helpdesk-home-container .search-bar-container { left: 20% !important; width: 60% !important; } } @media (max-width: 600px) { .helpdesk-home-container .search-bar-container { top: 63% !important; left: 10% !important; width: 80% !important; } } /* ============================================================ * INFODESK - SEARCH FINAL FIX * Banner estático + pesquisa nativa GLPI * ============================================================ */ /* ------------------------------------------------------------ * BANNER * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner { position: relative !important; overflow: hidden !important; height: 257px !important; min-height: 257px !important; margin: 0 !important; padding: 0 !important; background-image: url('../pics/infodesk-hero-exact.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; } /* ------------------------------------------------------------ * REMOVE AS ILUSTRAÇÕES NATIVAS * ------------------------------------------------------------ */ .helpdesk-home-container .scene, .helpdesk-home-container .scene-left, .helpdesk-home-container .scene-right { display: none !important; } /* ------------------------------------------------------------ * REMOVE ELEMENTOS ANTIGOS DO NOSSO CSS * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner::before, .helpdesk-home-container .search-banner::after, .helpdesk-home-container .search-banner-content::before, .helpdesk-home-container .search-banner-content::after, .helpdesk-home-container .search-banner-content h1::before, .helpdesk-home-container .search-banner-content h1::after { content: none !important; display: none !important; } /* ------------------------------------------------------------ * CONTAINER DO CONTEÚDO * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content { position: absolute !important; inset: 0 !important; width: 100% !important; height: 257px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; pointer-events: none !important; } /* ------------------------------------------------------------ * O TÍTULO JÁ EXISTE NA IMAGEM * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content h1 { display: none !important; } /* ============================================================ * PESQUISA REAL DO GLPI * ============================================================ */ .helpdesk-home-container .search-bar-container { position: absolute !important; top: 63.5% !important; left: 28.8% !important; width: 42.5% !important; height: 56px !important; margin: 0 !important; padding: 0 !important; z-index: 200 !important; pointer-events: auto !important; } /* ------------------------------------------------------------ * INPUT * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search { position: relative !important; width: 100% !important; height: 56px !important; box-sizing: border-box !important; padding: 0 22px 0 48px !important; border: 0 !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.96) !important; color: #26334f !important; font-size: 16px !important; font-weight: 400 !important; outline: none !important; box-shadow: 0 5px 18px rgba(30, 40, 60, 0.08) !important; pointer-events: auto !important; } /* ------------------------------------------------------------ * PLACEHOLDER * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search::placeholder { color: #667085 !important; opacity: 1 !important; } /* ------------------------------------------------------------ * LUPA * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .input-icon-addon { display: flex !important; position: absolute !important; left: 18px !important; top: 50% !important; width: 22px !important; height: 22px !important; transform: translateY(-50%) !important; align-items: center !important; justify-content: center !important; z-index: 210 !important; pointer-events: none !important; } .helpdesk-home-container .search-bar-container .input-icon-addon i { color: #26334f !important; font-size: 20px !important; } /* ============================================================ * OVERLAY NATIVO DO GLPI * * Ele deve ficar ATRÁS da pesquisa e dos resultados. * ============================================================ */ .helpdesk-home-container #search-overlay { z-index: 100 !important; pointer-events: none !important; } /* ============================================================ * RESULTADOS DA PESQUISA * ============================================================ */ .helpdesk-home-container .search-result-container { position: absolute !important; z-index: 300 !important; pointer-events: auto !important; } /* ============================================================ * RESULTADOS INTERNOS * ============================================================ */ .helpdesk-home-container .search-result-container a, .helpdesk-home-container .search-result-container button { pointer-events: auto !important; } /* ============================================================ * EVITA QUE O BANNER INTERFIRA NOS CLIQUES * ============================================================ */ .helpdesk-home-container .search-banner-content { pointer-events: none !important; } .helpdesk-home-container .search-bar-container { pointer-events: auto !important; } /* ============================================================ * RESPONSIVO * ============================================================ */ @media (max-width: 900px) { .helpdesk-home-container .search-bar-container { left: 20% !important; width: 60% !important; } } @media (max-width: 600px) { .helpdesk-home-container .search-bar-container { top: 63% !important; left: 10% !important; width: 80% !important; } } /* ============================================================ * INFODESK - SEARCH FUNCTIONALITY FIX * Não altera o banner. * Restaura a interação nativa da pesquisa do GLPI. * ============================================================ */ /* O container da pesquisa deve ficar acima do overlay */ .helpdesk-home-container .search-banner-content { position: relative !important; z-index: 200 !important; } /* A caixa de pesquisa permanece totalmente interativa */ .helpdesk-home-container .search-bar-container { position: relative !important; z-index: 210 !important; pointer-events: auto !important; } /* Campo nativo do GLPI */ .helpdesk-home-container #search-input { position: relative !important; z-index: 220 !important; pointer-events: auto !important; } /* Ícone não pode bloquear o campo */ .helpdesk-home-container .search-bar-container .input-icon-addon { pointer-events: none !important; } /* Resultados precisam ficar acima do banner e do overlay */ .helpdesk-home-container #search-results { position: absolute !important; z-index: 9999 !important; pointer-events: auto !important; } /* Links e elementos internos dos resultados continuam clicáveis */ .helpdesk-home-container #search-results a, .helpdesk-home-container #search-results button, .helpdesk-home-container #search-results [role="button"] { pointer-events: auto !important; position: relative !important; z-index: 10000 !important; cursor: pointer !important; } /* Overlay escurece o restante da página, mas NÃO bloqueia a pesquisa */ .helpdesk-home-container #search-overlay { z-index: 100 !important; pointer-events: none !important; } /* ============================================================ * FIM - SEARCH FUNCTIONALITY FIX * ============================================================ */ /* ============================================================ * INFODESK - SEARCH FINAL OVERRIDE * Pesquisa nativa GLPI * ============================================================ */ /* ------------------------------------------------------------ * CONTAINER DA PESQUISA * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container { position: absolute !important; top: 63.5% !important; left: 28.8% !important; width: 42.5% !important; height: 56px !important; margin: 0 !important; padding: 0 !important; z-index: 500 !important; pointer-events: auto !important; } /* ------------------------------------------------------------ * INPUT * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search { position: relative !important; display: block !important; width: 100% !important; height: 56px !important; box-sizing: border-box !important; padding: 0 22px 0 48px !important; border: 0 !important; border-radius: 28px !important; background: rgba(255,255,255,0.96) !important; color: #26334f !important; font-size: 16px !important; font-weight: 400 !important; outline: none !important; box-shadow: 0 5px 18px rgba(30,40,60,0.08) !important; pointer-events: auto !important; } /* ------------------------------------------------------------ * PLACEHOLDER * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .home-search::placeholder { color: #667085 !important; opacity: 1 !important; } /* ------------------------------------------------------------ * LUPA * ------------------------------------------------------------ */ .helpdesk-home-container .search-bar-container .input-icon-addon { display: flex !important; position: absolute !important; left: 18px !important; top: 50% !important; width: 22px !important; height: 22px !important; transform: translateY(-50%) !important; align-items: center !important; justify-content: center !important; z-index: 510 !important; pointer-events: none !important; } .helpdesk-home-container .search-bar-container .input-icon-addon i { color: #26334f !important; font-size: 20px !important; } /* ============================================================ * RESULTADOS * ============================================================ */ .helpdesk-home-container .search-result-container { position: absolute !important; top: 56px !important; left: 0 !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; z-index: 1000 !important; pointer-events: auto !important; } /* ------------------------------------------------------------ * LINKS / RESULTADOS CLICÁVEIS * ------------------------------------------------------------ */ .helpdesk-home-container .search-result-container a, .helpdesk-home-container .search-result-container button, .helpdesk-home-container .search-result-container [role="button"] { position: relative !important; z-index: 1001 !important; pointer-events: auto !important; cursor: pointer !important; } /* ------------------------------------------------------------ * OVERLAY NATIVO * * Fica atrás da pesquisa e dos resultados. * ------------------------------------------------------------ */ .helpdesk-home-container #search-overlay { position: fixed !important; z-index: 400 !important; pointer-events: auto !important; } /* ------------------------------------------------------------ * PESQUISA ACIMA DO OVERLAY * ------------------------------------------------------------ */ .helpdesk-home-container .search-banner-content { position: relative !important; z-index: 450 !important; } /* A caixa de pesquisa fica acima do overlay */ .helpdesk-home-container .search-bar-container { z-index: 500 !important; } /* Os resultados ficam acima de tudo */ .helpdesk-home-container .search-result-container { z-index: 1000 !important; } /* ============================================================ * RESPONSIVIDADE * ============================================================ */ @media (max-width: 900px) { .helpdesk-home-container .search-bar-container { left: 20% !important; width: 60% !important; } } @media (max-width: 600px) { .helpdesk-home-container .search-bar-container { top: 63% !important; left: 10% !important; width: 80% !important; } } /* ============================================================ INFOCORP / INFODESK BANNER LIMPO + PESQUISA NATIVA GLPI ============================================================ */ /* ============================================================ 1. BANNER ============================================================ */ .helpdesk-home-container .search-banner { position: relative !important; width: 100% !important; height: 257px !important; min-height: 257px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background-color: #fff7df !important; background-image: url('../pics/infodesk-hero-new.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; } /* ============================================================ 2. REMOVER CUSTOMIZAÇÕES ANTIGAS ============================================================ */ .helpdesk-home-container .search-banner::before, .helpdesk-home-container .search-banner::after, .helpdesk-home-container .search-banner-content::before, .helpdesk-home-container .search-banner-content::after, .helpdesk-home-container .search-banner-content h1::before, .helpdesk-home-container .search-banner-content h1::after, .helpdesk-home-container .scene-left::before, .helpdesk-home-container .scene-left::after, .helpdesk-home-container .scene-right::before, .helpdesk-home-container .scene-right::after { content: none !important; display: none !important; } /* ============================================================ 3. ESCONDER AS ILUSTRAÇÕES ORIGINAIS DO GLPI O nosso banner já contém todas as ilustrações. ============================================================ */ .helpdesk-home-container .scene { display: none !important; } /* ============================================================ 4. CONTEÚDO ORIGINAL DO GLPI ============================================================ */ .helpdesk-home-container .search-banner-content { position: relative !important; z-index: 20 !important; width: 100% !important; height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ============================================================ 5. NÃO ALTERAR O TÍTULO NATIVO O texto já está dentro do banner. ============================================================ */ .helpdesk-home-container .search-banner-content h1 { visibility: hidden !important; } /* ============================================================ 6. BARRA NATIVA DO GLPI ============================================================ */ .helpdesk-home-container .search-bar-container { position: absolute !important; z-index: 50 !important; left: 50% !important; top: 63% !important; transform: translateX(-50%) !important; width: 50% !important; padding: 0 !important; margin: 0 !important; } /* ============================================================ 7. INPUT NATIVO ============================================================ */ .helpdesk-home-container .search-bar-container form, .helpdesk-home-container .search-bar-container .input-group { width: 100% !important; } .helpdesk-home-container .search-bar-container input { position: relative !important; z-index: 55 !important; width: 100% !important; height: 56px !important; border-radius: 30px !important; background: rgba(255,255,255,0.96) !important; border: 0 !important; box-shadow: 0 5px 18px rgba(0,0,0,0.10) !important; pointer-events: auto !important; } /* ============================================================ 8. GARANTIR QUE A PESQUISA SEJA CLICÁVEL ============================================================ */ .helpdesk-home-container .search-bar-container, .helpdesk-home-container .search-bar-container *, .helpdesk-home-container .search-bar-container input, .helpdesk-home-container .search-bar-container button { pointer-events: auto !important; } /* ============================================================ 9. OVERLAY NATIVO DO GLPI NÃO BLOQUEAR O CAMPO DE PESQUISA ============================================================ */ .helpdesk-home-container .search-overlay { z-index: 40 !important; } /* ============================================================ 10. RESULTADOS NATIVOS ============================================================ */ .helpdesk-home-container .search-results { position: relative !important; z-index: 60 !important; pointer-events: auto !important; } /* ============================================================ 11. RESPONSIVO ============================================================ */ @media (max-width: 1200px) { .helpdesk-home-container .search-bar-container { width: 55% !important; } } @media (max-width: 900px) { .helpdesk-home-container .search-bar-container { width: 65% !important; top: 62% !important; } } @media (max-width: 700px) { .helpdesk-home-container .search-bar-container { width: 80% !important; top: 60% !important; } .helpdesk-home-container .search-bar-container input { height: 50px !important; } } /* ============================================================ CORREÇÃO PROPORÇÃO DO BANNER ============================================================ */ .helpdesk-home-container .search-banner { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* ============================================================ * INFOCORP / INFODESK /* ============================================================ * INFOCORP / INFODESK * HERO COM PESQUISA NATIVA GLPI * ============================================================ */ /* Banner */ .helpdesk-home-container .search-banner { position: relative !important; width: 100% !important; height: 320px !important; min-height: 320px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background-image: url('../pics/infodesk-hero-glpi.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } /* Não mostrar as ilustrações nativas do GLPI, pois elas já fazem parte do nosso banner */ .helpdesk-home-container .search-banner .scene { display: none !important; } /* Conteúdo do GLPI */ .helpdesk-home-container .search-banner-content { position: relative !important; z-index: 10 !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } /* * O título/subtítulo originais do GLPI permanecem ativos. * Como eles estão presentes no banner que criamos, * vamos torná-los visualmente transparentes sem remover * o elemento da página. */ .helpdesk-home-container .search-banner-content h1 { color: transparent !important; font-size: 1px !important; line-height: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Pesquisa NATIVA do GLPI */ .helpdesk-home-container .search-bar-container { position: absolute !important; z-index: 50 !important; top: 195px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(800px, 48vw) !important; margin: 0 !important; padding: 0 !important; } /* Campo nativo */ .helpdesk-home-container .search-bar-container .home-search { position: relative !important; z-index: 51 !important; width: 100% !important; height: 58px !important; border-radius: 30px !important; background: #ffffff !important; border: 1px solid rgba(20, 35, 55, 0.08) !important; box-shadow: 0 8px 25px rgba(20, 35, 55, 0.12) !important; font-size: 16px !important; } /* Ícone nativo */ .helpdesk-home-container .search-bar-container .input-icon-addon { z-index: 52 !important; } /* Resultados da busca */ .helpdesk-home-container #search-results { z-index: 100 !important; position: absolute !important; width: 100% !important; top: 58px !important; left: 0 !important; } /* Nunca bloquear cliques no campo ou nos resultados */ .helpdesk-home-container .search-bar-container, .helpdesk-home-container .search-bar-container *, .helpdesk-home-container #search-results * { pointer-events: auto !important; } /* Responsivo */ @media (max-width: 1200px) { .helpdesk-home-container .search-bar-container { width: 55vw !important; } } @media (max-width: 768px) { .helpdesk-home-container .search-banner { height: 280px !important; min-height: 280px !important; } .helpdesk-home-container .search-bar-container { width: 80vw !important; top: 175px !important; } } /* ============================================================ INFOCORP / INFODESK DASHBOARD TÉCNICO ============================================================ */ /* * Fundo geral somente quando a página contém * o dashboard central do GLPI. */ body:has([id^="home-dashboard"]) .page-wrapper, body:has([id^="home-dashboard"]) .page-body { background-color: #fffaf0 !important; background-image: radial-gradient( circle at 5% 8%, rgba(255, 193, 7, 0.18) 0%, rgba(255, 193, 7, 0.07) 22%, transparent 40% ), radial-gradient( circle at 95% 12%, rgba(255, 213, 79, 0.15) 0%, rgba(255, 213, 79, 0.05) 25%, transparent 42% ), linear-gradient( 135deg, #fffef9 0%, #fff9e8 42%, #fffdf5 72%, #f7e7ad 100% ) !important; background-attachment: fixed; } /* * Wrapper principal do dashboard. */ [id^="home-dashboard"] { padding: 14px 18px 28px 18px !important; } /* * Área principal do grid. */ [id^="home-dashboard"] .dashboard { background: transparent !important; } /* * Cards/widgets do dashboard. */ [id^="home-dashboard"] .dashboard .card, [id^="home-dashboard"] [data-testid="dashboard-widget"] { border-radius: 14px !important; border: 1px solid rgba(8, 35, 64, 0.10) !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 5px 18px rgba(8, 35, 64, 0.07) !important; overflow: hidden; transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease; } /* * Hover suave INFOCORP. */ [id^="home-dashboard"] .dashboard .card:hover, [id^="home-dashboard"] [data-testid="dashboard-widget"]:hover { border-color: rgba(245, 183, 0, 0.48) !important; box-shadow: 0 10px 26px rgba(8, 35, 64, 0.11), 0 0 0 1px rgba(245, 183, 0, 0.07) !important; } /* * Cabeçalhos dos widgets. */ [id^="home-dashboard"] .card-header { background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid rgba(8, 35, 64, 0.07) !important; } /* * Textos principais. */ [id^="home-dashboard"] .card-title, [id^="home-dashboard"] .dashboard-card-title { color: #102a43 !important; } /* * Toolbar superior do dashboard. */ [id^="home-dashboard"] .dashboard-toolbar, [id^="home-dashboard"] .dashboard-actions, [id^="home-dashboard"] .change-dashboard { border-radius: 12px; } /* * Selects e campos da toolbar. */ [id^="home-dashboard"] select, [id^="home-dashboard"] .form-select, [id^="home-dashboard"] .form-control { border-radius: 9px !important; } /* * Evita que widgets transparentes deixem aparecer * cores estranhas do fundo. */ [id^="home-dashboard"] .grid-stack-item-content { border-radius: 14px; } /* * Melhora a leitura de widgets com gráficos. */ [id^="home-dashboard"] .g-chart { background: rgba(255, 255, 255, 0.97) !important; } /* * Espaço visual nas áreas internas. */ [id^="home-dashboard"] .card-body { padding: 14px !important; } /* * Responsividade. */ @media (max-width: 991px) { [id^="home-dashboard"] { padding: 10px !important; } [id^="home-dashboard"] .dashboard .card:hover, [id^="home-dashboard"] [data-testid="dashboard-widget"]:hover { transform: none; } } /* ============================================================ INFOCORP / INFODESK DASHBOARD TÉCNICO - ACABAMENTO FINAL ============================================================ */ /* ------------------------------------------------------------ FUNDO GERAL DA PÁGINA DO DASHBOARD ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .page-wrapper, body:has([id^="home-dashboard"]) .page-body { background-color: #fffaf0 !important; background-image: radial-gradient( circle at 5% 8%, rgba(255, 193, 7, 0.26) 0%, rgba(255, 193, 7, 0.10) 22%, transparent 42% ), radial-gradient( circle at 95% 12%, rgba(255, 213, 79, 0.22) 0%, rgba(255, 213, 79, 0.08) 25%, transparent 44% ), linear-gradient( 135deg, #fffdf5 0%, #fff5d6 42%, #fffaf0 70%, #f7e3a5 100% ) !important; background-repeat: no-repeat !important; background-size: cover !important; min-height: 100vh; } /* ------------------------------------------------------------ REMOVE OS FUNDOS BRANCOS QUE ESCONDEM O DEGRADÊ ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .page-body > .container, body:has([id^="home-dashboard"]) .page-body > .container-fluid, body:has([id^="home-dashboard"]) .tab-content, body:has([id^="home-dashboard"]) .tab-pane, body:has([id^="home-dashboard"]) [id^="home-dashboard"], body:has([id^="home-dashboard"]) [id^="home-dashboard"] .dashboard, body:has([id^="home-dashboard"]) [id^="home-dashboard"] .grid-stack { background: transparent !important; } /* ------------------------------------------------------------ CONTAINER PRINCIPAL ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) [id^="home-dashboard"] { padding: 18px 20px 28px 20px !important; border-radius: 18px; background: rgba(255, 255, 255, 0.18) !important; } /* ------------------------------------------------------------ ÁREA DO GRID ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .grid-stack { border-radius: 16px; } /* ------------------------------------------------------------ WIDGETS BRANCOS / GRÁFICOS ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) [data-testid="dashboard-widget"] { border-radius: 13px !important; border: 1px solid rgba(8, 35, 64, 0.09) !important; box-shadow: 0 5px 16px rgba(8, 35, 64, 0.055) !important; overflow: hidden; } /* ------------------------------------------------------------ GRÁFICOS ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .g-chart { border-radius: 13px !important; border: 1px solid rgba(8, 35, 64, 0.08) !important; box-shadow: 0 5px 16px rgba(8, 35, 64, 0.05) !important; } /* ------------------------------------------------------------ HOVER DOS WIDGETS ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) [data-testid="dashboard-widget"]:hover, body:has([id^="home-dashboard"]) .g-chart:hover { border-color: rgba(245, 183, 0, 0.45) !important; box-shadow: 0 9px 22px rgba(8, 35, 64, 0.09), 0 0 0 1px rgba(245, 183, 0, 0.06) !important; } /* ------------------------------------------------------------ CABEÇALHO / ABAS DO DASHBOARD ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .nav-tabs { background: rgba(255, 255, 255, 0.72) !important; border-radius: 12px 12px 0 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ------------------------------------------------------------ TOOLBAR SUPERIOR ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) [id^="home-dashboard"] > .d-flex, body:has([id^="home-dashboard"]) .change-dashboard { background: rgba(255, 255, 255, 0.78); border-radius: 11px; } /* ------------------------------------------------------------ SELECT CENTRAL ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .dashboard_select, body:has([id^="home-dashboard"]) .form-select { border-radius: 9px !important; background-color: rgba(255, 255, 255, 0.95) !important; } /* ------------------------------------------------------------ TEXTOS DOS GRÁFICOS ------------------------------------------------------------ */ body:has([id^="home-dashboard"]) .g-chart .card-title, body:has([id^="home-dashboard"]) .dashboard .card-title { color: #102a43 !important; font-weight: 600; } /* ------------------------------------------------------------ RESPONSIVIDADE ------------------------------------------------------------ */ @media (max-width: 991px) { body:has([id^="home-dashboard"]) [id^="home-dashboard"] { padding: 12px 10px 20px 10px !important; } } /* ============================================================ INFOCORP / INFODESK CORREÇÃO DEFINITIVA DO FUNDO DO DASHBOARD ============================================================ */ /* * Remove o grande painel branco criado pelo GLPI * ao redor do dashboard. */ body:has([id^="home-dashboard"]) .dashboard-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* * Aplica o amarelo diretamente no container visível * do Dashboard Central. */ body:has([id^="home-dashboard"]) [id^="home-dashboard"] { background-color: #fff8df !important; background-image: radial-gradient( circle at 5% 5%, rgba(255, 193, 7, 0.30) 0%, rgba(255, 193, 7, 0.13) 22%, transparent 43% ), radial-gradient( circle at 95% 15%, rgba(255, 215, 80, 0.25) 0%, rgba(255, 215, 80, 0.10) 25%, transparent 45% ), linear-gradient( 135deg, #fffdf5 0%, #fff3c7 38%, #fff9e8 68%, #f5dfa0 100% ) !important; background-repeat: no-repeat !important; background-size: cover !important; border-radius: 16px !important; } /* * O grid precisa ser transparente para deixar * o fundo amarelo acima aparecer. */ body:has([id^="home-dashboard"]) [id^="home-dashboard"] .dashboard, body:has([id^="home-dashboard"]) [id^="home-dashboard"] .grid-stack, body:has([id^="home-dashboard"]) [id^="home-dashboard"] .grid-stack-item { background-color: transparent !important; } /* * Fundo geral da área central. */ body:has([id^="home-dashboard"]) .page-wrapper, body:has([id^="home-dashboard"]) .page-body, body:has([id^="home-dashboard"]) .tab-content, body:has([id^="home-dashboard"]) .tab-pane { background-color: #fff8df !important; background-image: linear-gradient( 135deg, #fffdf6 0%, #fff5d1 45%, #fffaf0 72%, #f5e0a2 100% ) !important; } /* * Mantém os gráficos claros e destacados sobre o amarelo. */ body:has([id^="home-dashboard"]) .g-chart, body:has([id^="home-dashboard"]) [data-testid="dashboard-widget"] { border-radius: 12px !important; box-shadow: 0 4px 14px rgba(8, 35, 64, 0.06) !important; } /* ============================================================ INFOCORP / INFODESK DASHBOARD TÉCNICO - BACKGROUND CORRETO GLPI 11 ============================================================ */ /* Página que contém o dashboard principal */ body:has(.dashboard[id^="dashboard-"]) .page-wrapper, body:has(.dashboard[id^="dashboard-"]) .page-body { background: linear-gradient( 135deg, #fffdf6 0%, #fff4cc 38%, #fff9e9 67%, #f5dfa0 100% ) !important; min-height: 100vh !important; } /* Container externo que hoje aparece branco */ body:has(.dashboard[id^="dashboard-"]) .dashboard-card { background: transparent !important; box-shadow: none !important; border-color: transparent !important; } /* DASHBOARD REAL DO GLPI */ .dashboard[id^="dashboard-"] { background: radial-gradient( circle at 5% 7%, rgba(255, 193, 7, 0.25) 0%, rgba(255, 193, 7, 0.10) 22%, transparent 42% ), radial-gradient( circle at 94% 12%, rgba(255, 213, 79, 0.22) 0%, rgba(255, 213, 79, 0.08) 25%, transparent 45% ), linear-gradient( 135deg, #fffdf6 0%, #fff3c4 42%, #fff9e8 70%, #f5dfa0 100% ) !important; border-radius: 16px !important; padding: 18px !important; min-height: 100% !important; } /* Grid interno deve ficar transparente */ .dashboard[id^="dashboard-"] .grid-stack { background: transparent !important; } /* Área entre os widgets */ .dashboard[id^="dashboard-"] .grid-stack-item { background: transparent !important; } /* Gráficos brancos destacados sobre o amarelo */ .dashboard[id^="dashboard-"] .g-chart { border-radius: 12px !important; border: 1px solid rgba(8, 35, 64, 0.08) !important; box-shadow: 0 5px 16px rgba(8, 35, 64, 0.055) !important; } /* Hover discreto INFOCORP */ .dashboard[id^="dashboard-"] .g-chart:hover { border-color: rgba(245, 183, 0, 0.50) !important; box-shadow: 0 9px 22px rgba(8, 35, 64, 0.09), 0 0 0 1px rgba(245, 183, 0, 0.07) !important; } /* Também colore a área das abas ao redor do dashboard */ body:has(.dashboard[id^="dashboard-"]) .tab-content, body:has(.dashboard[id^="dashboard-"]) .tab-pane { background: transparent !important; } /* Mobile */ @media (max-width: 991px) { .dashboard[id^="dashboard-"] { padding: 10px !important; } } /* ========================================================= HELPDESK HOME - FUNDO AMARELO NA ÁREA DOS CHAMADOS ========================================================= */ body.front.helpdesk, body[class*="helpdesk"] { background: linear-gradient( 180deg, #f7f0c8 0%, #fbf7e6 22%, #f6efcc 50%, #fcf9ec 78%, #f7f0c8 100% ) !important; } /* área principal abaixo dos cards */ body[class*="helpdesk"] .helpdesk-home, body[class*="helpdesk"] main, body[class*="helpdesk"] .central, body[class*="helpdesk"] .page-content, body[class*="helpdesk"] .content-main, body[class*="helpdesk"] .itil-layout, body[class*="helpdesk"] .itil-container { background: transparent !important; } /* bloco onde ficam as tabelas/listas */ body[class*="helpdesk"] .card, body[class*="helpdesk"] .tabs, body[class*="helpdesk"] .tab-content, body[class*="helpdesk"] .list-group, body[class*="helpdesk"] .table-responsive, body[class*="helpdesk"] .table, body[class*="helpdesk"] .ticket-summary, body[class*="helpdesk"] .ticket-last, body[class*="helpdesk"] .table-card { background-color: #ffffff !important; border-radius: 14px !important; } /* área cinza geral logo abaixo dos atalhos */ body[class*="helpdesk"] section, body[class*="helpdesk"] .row, body[class*="helpdesk"] .container-fluid, body[class*="helpdesk"] .container-lg, body[class*="helpdesk"] .container-xl { background-color: transparent !important; } /* tabela mais limpa */ body[class*="helpdesk"] .table th, body[class*="helpdesk"] .table td { background-color: #ffffff !important; } /* abas acima da tabela */ body[class*="helpdesk"] .nav-tabs, body[class*="helpdesk"] .nav-tabs .nav-link { background-color: #ffffff !important; } /* ============================================================ INFOCORP / INFODESK HOME - FUNDO AMARELO DA ÁREA DE ACESSOS RÁPIDOS ============================================================ */ .helpdesk-home-container .tiles-banner { background-color: #fff8df !important; background-image: radial-gradient( circle at 8% 15%, rgba(255, 193, 7, 0.24) 0%, rgba(255, 193, 7, 0.09) 24%, transparent 44% ), radial-gradient( circle at 92% 20%, rgba(255, 213, 79, 0.20) 0%, rgba(255, 213, 79, 0.07) 26%, transparent 46% ), linear-gradient( 135deg, #fffdf6 0%, #fff4cf 42%, #fff9e9 70%, #f6e2a5 100% ) !important; border: 0 !important; } /* Mantém os três cards brancos */ .helpdesk-home-container .tiles-banner .card { background: rgba(255, 255, 255, 0.97) !important; border: 1px solid rgba(8, 35, 64, 0.08) !important; box-shadow: 0 5px 18px rgba(8, 35, 64, 0.07) !important; border-radius: 14px !important; } /* Hover amarelo discreto */ .helpdesk-home-container .tiles-banner .card:hover { border-color: rgba(245, 183, 0, 0.55) !important; box-shadow: 0 9px 24px rgba(8, 35, 64, 0.10), 0 0 0 1px rgba(245, 183, 0, 0.07) !important; } /* ============================================================ INFOCORP / INFODESK HOME - FUNDO AMARELO DA ÁREA DE CHAMADOS ============================================================ */ /* * Mantém toda a parte inferior da Home no mesmo padrão * amarelo/creme dos atalhos. */ .helpdesk-home-container, .helpdesk-home-container .tickets-banner { background-color: #fff8df !important; background-image: radial-gradient( circle at 8% 10%, rgba(255, 193, 7, 0.20) 0%, rgba(255, 193, 7, 0.07) 25%, transparent 45% ), radial-gradient( circle at 92% 15%, rgba(255, 213, 79, 0.18) 0%, rgba(255, 213, 79, 0.06) 27%, transparent 47% ), linear-gradient( 135deg, #fffdf6 0%, #fff4cf 42%, #fff9e9 70%, #f6e2a5 100% ) !important; } /* * Espaço da área dos chamados. */ .helpdesk-home-container .tickets-banner { padding-top: 30px !important; padding-bottom: 60px !important; flex-grow: 1; } /* * Container da tabela continua transparente para mostrar * o amarelo ao redor. */ .helpdesk-home-container .tickets-banner > .container-xl { background: transparent !important; } /* * Mantém a tabela e abas brancas. */ .helpdesk-home-container .tickets-banner .card, .helpdesk-home-container .tickets-banner .tab-content, .helpdesk-home-container .tickets-banner .table-responsive, .helpdesk-home-container .tickets-banner table { background-color: #ffffff !important; } /* * Cabeçalho das abas. */ .helpdesk-home-container .tickets-banner .nav-tabs, .helpdesk-home-container .tickets-banner .nav-tabs .nav-link { background-color: #ffffff !important; } /* * Linhas da tabela continuam brancas para máxima legibilidade. */ .helpdesk-home-container .tickets-banner table th, .helpdesk-home-container .tickets-banner table td { background-color: #ffffff !important; } /* * Acabamento visual do bloco dos chamados. */ .helpdesk-home-container .tickets-banner .tab-content, .helpdesk-home-container .tickets-banner .table-responsive { border-radius: 0 0 12px 12px; }