/* ========================================================================== Customização Vilarouca — HOME DO PORTAL DO CLIENTE (theme/hesk3/customer/index.php) Tela bespoke PCL (Plataforma de Chamados Logísticos). Escopada em .page-index (classe no ) + .gv-portal, para não afetar as demais telas do portal. Coeso com o login do admin (mesmo navy/laranja/PCL + motivo do caminhão). Referência: _gv_preview/portal-cliente-preview.html ========================================================================== */ .gv-portal{ --p:#074866; --pl:#0A5F84; --pd:#053447; --ac:#E05E3B; --acd:#C04A2A; --cream:#f0e6d6; --ink:#1f2d3d; --mut:#6b7280; --line:rgba(7,72,102,.10); --g200:#e5e7eb; font-family:"Montserrat",system-ui,sans-serif; color:var(--ink); } /* Na home, o topbar navy padrão e o breadcrumb dão lugar ao hero PCL */ .page-index .header, .page-index .breadcrumbs{ display:none !important; } .page-index .main{ background:#eef1f4; } .page-index .main__content.gv-portal{ padding:0 !important; } /* ─────────── Faixas de mensagem (logout/serviço) ─────────── */ .gv-portal .gvp-msgs{ max-width:1000px; margin:0 auto; padding:16px 24px 0; } .gv-portal .gvp-msgs:empty{ display:none; } /* ─────────── Hero navy ─────────── */ .gv-portal .gvp-hero{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(157deg,var(--pl) 0%,var(--p) 42%,var(--pd) 100%); padding:26px 0 90px; } .gv-portal .gvp-hero::before{ content:""; position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:420px; height:480px; opacity:.5; pointer-events:none; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='3'%3E%3Cpath d='M100 8 L188 40 V120 C188 180 148 210 100 224 C52 210 12 180 12 120 V40 Z'/%3E%3C/svg%3E"); } .gv-portal .gvp-wrap{ max-width:1000px; margin:0 auto; padding:0 24px; position:relative; z-index:1; } .gv-portal .gvp-hero__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .gv-portal .gvp-logo{ height:66px; width:auto; display:block; } .gv-portal .gvp-admin{ color:rgba(226,238,245,.85); text-decoration:none; font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.22); border-radius:9px; padding:8px 14px; transition:background .15s; } .gv-portal .gvp-admin:hover{ background:rgba(255,255,255,.08); } .gv-portal .gvp-admin svg{ width:16px; height:16px; } .gv-portal .gvp-hero__c{ margin-top:40px; max-width:560px; } .gv-portal .gvp-hero__c h1{ font-size:2.2rem; font-weight:700; line-height:1.12; margin:0 0 12px; letter-spacing:-.02em; color:#fff; } .gv-portal .gvp-hero__c h1 .hl{ color:var(--ac); } .gv-portal .gvp-hero__c p{ font-size:1rem; font-weight:300; line-height:1.6; color:rgba(226,238,245,.85); margin:0; } .gv-portal .gvp-truck{ position:absolute; right:40px; bottom:24px; width:230px; opacity:.9; z-index:1; pointer-events:none; } @media(max-width:820px){ .gv-portal .gvp-truck{ display:none; } } /* ─────────── Cards flutuando sobre a borda do hero ─────────── */ .gv-portal .gvp-cards{ margin:-60px auto 0; position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media(max-width:720px){ .gv-portal .gvp-cards{ grid-template-columns:1fr; } } .gv-portal .gvp-card{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 50px -30px rgba(5,52,71,.45); padding:26px; display:flex; flex-direction:column; gap:6px; text-decoration:none; transition:transform .15s, box-shadow .15s; } .gv-portal .gvp-card:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -30px rgba(5,52,71,.5); } .gv-portal .gvp-card__ico{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:10px; } .gv-portal .gvp-card--primary .gvp-card__ico{ background:var(--ac); color:#fff; } .gv-portal .gvp-card--ghost .gvp-card__ico{ background:#e1eaee; color:var(--p); } .gv-portal .gvp-card__ico svg{ width:28px; height:28px; } .gv-portal .gvp-card h2{ font-size:1.25rem; font-weight:700; color:var(--p); margin:0; } .gv-portal .gvp-card p{ font-size:.9rem; color:var(--mut); margin:0 0 14px; line-height:1.5; } .gv-portal .gvp-cta{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; border-radius:12px; font-family:inherit; font-size:.95rem; font-weight:600; } .gv-portal .gvp-card--primary .gvp-cta{ background:var(--ac); color:#fff; box-shadow:0 14px 26px -12px rgba(224,94,59,.6); } .gv-portal .gvp-card--primary:hover .gvp-cta{ background:var(--acd); } .gv-portal .gvp-card--ghost .gvp-cta{ background:#fff; color:var(--p); border:1.5px solid var(--g200); } .gv-portal .gvp-card--ghost:hover .gvp-cta{ background:#f9fafb; border-color:var(--p); } .gv-portal .gvp-cta svg{ width:18px; height:18px; } /* ─────────── Consulta por código ─────────── */ .gv-portal .gvp-track{ margin:26px auto 0; } .gv-portal .gvp-track__box{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(7,72,102,.05); padding:18px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .gv-portal .gvp-track__box .t{ font-size:.92rem; font-weight:600; color:var(--p); } .gv-portal .gvp-track__box .s{ font-size:.8rem; color:var(--mut); } .gv-portal .gvp-track__box form{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; } .gv-portal .gvp-track__box input{ height:46px; padding:0 14px; border:1px solid var(--g200); border-radius:10px; background:#fbfbfc; font-family:inherit; font-size:.9rem; color:var(--p); min-width:220px; letter-spacing:.04em; } .gv-portal .gvp-track__box input:focus{ outline:0; border-color:var(--ac); box-shadow:0 0 0 3px rgba(224,94,59,.13); } .gv-portal .gvp-track__box button{ height:46px; padding:0 20px; border:0; border-radius:10px; background:var(--p); color:#fff; font-family:inherit; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .15s; } .gv-portal .gvp-track__box button:hover{ background:var(--pd); } /* ─────────── Rodapé de apoio ─────────── */ .gv-portal .gvp-help{ max-width:1000px; margin:40px auto 0; padding:26px 24px 44px; text-align:center; color:var(--mut); font-size:.8rem; } /* ─────────── Acessibilidade ─────────── */ .gv-portal a:focus-visible, .gv-portal button:focus-visible, .gv-portal input:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; } @media(prefers-reduced-motion:reduce){ .gv-portal .gvp-card{ transition:none; } .gv-portal .gvp-card:hover{ transform:none; } }