/* ================================================================ MÁRCIO PEÇA A PEÇA — AUTH.CSS (cadastro/login de cliente) Cole isto no , logo depois de css/pro.css, nos dois arquivos HTML (index.html e ofertas/ofertas.html): ================================================================ */ /* Wrapper (dá âncora de posição pro dropdown) */ .auth-nav-wrapper{position:relative;display:inline-flex;margin-right:10px} .auth-nav-wrapper-mobile{display:block;width:100%;margin-right:0} /* Botão "Entrar" no menu desktop, ao lado do WhatsApp */ .btn-nav-auth{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px !important; border:1.5px solid rgba(255,214,0,.45) !important; border-radius:999px !important; background:rgba(255,214,0,.06); color:var(--yellow); font-family:var(--fb);font-weight:700;font-size:14px; cursor:pointer;transition:var(--t); white-space:nowrap; } .btn-nav-auth:hover{background:rgba(255,214,0,.16);border-color:var(--yellow);transform:translateY(-2px)} .btn-nav-auth.is-logged{ border:1px solid rgba(255,255,255,.2) !important; color:var(--white); background:rgba(255,255,255,.05); } .btn-nav-auth.is-logged:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); } /* Link no menu mobile (drawer) */ .auth-drawer-link{ display:flex;align-items:center;gap:10px; padding:14px 16px;margin-top:8px; border:1px solid rgba(255,214,0,.30);border-radius:12px; background:rgba(255,214,0,.05);color:var(--yellow); font-family:var(--fb);font-weight:600;font-size:15px; width:100%;cursor:pointer;text-align:left; } .auth-drawer-link.is-logged{border-color:rgba(37,211,102,.4);color:#6EE7A8} /* Dropdown "Sair da conta" — substitui o confirm() nativo do navegador */ .auth-dropdown{ display:none;position:absolute;top:calc(100% + 10px);right:0; width:100%;min-width:220px; background:linear-gradient(160deg,rgba(14,31,122,.95) 0%,rgba(7,15,69,.98) 60%); border:1.5px solid rgba(255,214,0,.4); border-radius:14px;box-shadow:var(--sh); padding:14px;z-index:1000; } .auth-dropdown.open{display:block;animation:authPop .2s cubic-bezier(.4,0,.2,1)} .auth-dropdown-email{font-family:var(--fb);font-size:12px;color:var(--w60);padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:10px;word-break:break-all} .auth-dropdown-logout{ width:100%;padding:10px 12px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15); border-radius:10px;color:var(--white);font-family:var(--fb);font-weight:700;font-size:13px; cursor:pointer;transition:var(--t); box-sizing: border-box; } .auth-dropdown-logout:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);} button.auth-dropdown-logout:hover{background:rgba(230,50,0,.20);border-color:#E63200;color:#FF8A65} /* No drawer mobile o dropdown flui na lista em vez de flutuar */ .mobile-drawer .auth-dropdown{position:static;top:auto;right:auto;margin-top:8px;box-shadow:none;width:100%;box-sizing:border-box} /* Mesmo breakpoint que .btn-nav-wa já usa em style.css */ @media(max-width:940px){ .auth-nav-wrapper:not(.auth-nav-wrapper-mobile){display:none} } /* Overlay + modal */ .auth-overlay{ position:fixed;inset:0;z-index:9999; background:rgba(4,11,56,.85); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center; padding:20px; } .auth-overlay.open{display:flex} .auth-modal{ width:100%;max-width:420px; background:linear-gradient(160deg,rgba(26,62,200,0.15) 0%,rgba(7,15,69,0.9) 55%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1.5px solid rgba(255,214,0,.3); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,0.6); padding:36px 30px 32px; position:relative; animation:authPop .3s cubic-bezier(.4,0,.2,1); max-height:90vh;overflow-y:auto; } @keyframes authPop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}} .auth-close{ position:absolute;top:14px;right:14px; width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid var(--line); color:var(--w80);font-size:15px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:var(--t); } .auth-close:hover{background:rgba(255,255,255,.14);color:var(--white)} .auth-tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);border-radius:12px;padding:4px;margin-bottom:26px} .auth-tab{flex:1;text-align:center;padding:10px;border:none;background:transparent;color:var(--w60);font-family:var(--fb);font-weight:700;font-size:14px;border-radius:9px;cursor:pointer;transition:var(--t)} .auth-tab.active{background:var(--grad-yel);color:#040B38;box-shadow:var(--sh-y)} .auth-title{font-family:var(--fh);font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--white);margin-bottom:6px} .auth-subtitle{font-family:var(--fb);font-size:14px;color:var(--w60);margin-bottom:22px} .auth-field{margin-bottom:16px} .auth-field label{display:block;font-family:var(--fb);font-size:13px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} .auth-field input{ width:100%;padding:14px 16px;box-sizing:border-box; background:rgba(4,11,56,0.6); border:1.5px solid rgba(255,214,0,0.3); border-radius:12px; color:#ffffff;font-family:var(--fb);font-size:15px;font-weight:500; transition:var(--t); box-shadow:inset 0 2px 8px rgba(0,0,0,0.3); } .auth-field input:focus{outline:none;border-color:var(--yellow);background:rgba(4,11,56,0.9);box-shadow:0 0 0 3px rgba(255,214,0,0.15), inset 0 2px 8px rgba(0,0,0,0.3)} .auth-field input::placeholder{color:rgba(255,255,255,.5)} .auth-submit{ width:100%;padding:15px; background:var(--grad-yel); border:none;border-radius:12px; color:#040B38;font-family:var(--fb);font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:.5px; cursor:pointer;transition:var(--t); box-shadow:var(--sh-y); margin-top:6px; } .auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,214,0,.5)} .auth-submit:disabled{opacity:.6;cursor:wait;transform:none} .auth-error{ background:rgba(230,50,0,.12);border:1px solid rgba(230,50,0,.4); color:#FF8A65;font-family:var(--fb);font-size:13px; padding:10px 14px;border-radius:10px;margin-bottom:16px; display:none; } .auth-error.show{display:block} /* Foco visível pra acessibilidade (teclado) */ .auth-tab:focus-visible, .auth-close:focus-visible, .auth-submit:focus-visible, .btn-nav-auth:focus-visible, .auth-drawer-link:focus-visible{outline:2px solid var(--yellow);outline-offset:2px} @media (prefers-reduced-motion: reduce){ .auth-modal{animation:none} }