/* ============================================================ MYBIMED Webmail — skin Elastic Login: fundo PRETO por padrão + toggle Escuro/Claro (dentro do card). Escolha salva em localStorage (mb-dark / mb-light no ). ============================================================ */ :root { --mb-gold-1: #FBE9A6; --mb-gold-2: #E7C65A; --mb-gold-3: #C9A227; --mb-gold-4: #8A6A12; } /* ---------- TEMA ESCURO (padrão) ---------- */ :root, html.mb-dark { --page-bg: radial-gradient(1200px 800px at 20% -10%, #1b1f2b 0%, transparent 60%), radial-gradient(1000px 700px at 110% 120%, #201a10 0%, transparent 55%), linear-gradient(160deg, #0b0d12 0%, #0d0f14 45%, #060708 100%); --glow-1: rgba(231,198,90,.28); --glow-2: rgba(201,162,39,.22); --card-bg: linear-gradient(180deg, rgba(23,26,34,.90), rgba(13,15,20,.94)); --card-border: rgba(231,198,90,.32); --card-shadow: 0 24px 60px -18px rgba(0,0,0,.8), 0 0 40px -8px rgba(201,162,39,.25); --card-backdrop: blur(14px) saturate(1.1); --text: #f4e9c6; --input-bg: rgba(255,255,255,.05); --input-border: rgba(231,198,90,.24); --input-text: #f6f1e2; --placeholder: rgba(246,241,226,.42); --label-bg: transparent; --label: rgba(246,241,226,.8); --link: #f0e6c6; --foot: rgba(231,198,90,.5); --toggle-track: rgba(255,255,255,.06); } /* ---------- TEMA CLARO ---------- */ html.mb-light { --page-bg: radial-gradient(900px 620px at 15% -8%, rgba(231,198,90,.16) 0%, rgba(231,198,90,0) 60%), radial-gradient(820px 560px at 108% 115%, rgba(201,162,39,.14) 0%, rgba(201,162,39,0) 58%), linear-gradient(160deg, #ffffff 0%, #fdfbf4 55%, #ffffff 100%); --glow-1: rgba(231,198,90,.30); --glow-2: rgba(201,162,39,.24); --card-bg: #ffffff; --card-border: rgba(201,162,39,.35); --card-shadow: 0 26px 60px -22px rgba(138,106,18,.35), 0 4px 14px rgba(0,0,0,.06); --card-backdrop: none; --text: #2b2b2b; --input-bg: #faf9f5; --input-border: rgba(201,162,39,.28); --input-text: #2b2b2b; --placeholder: #9a927e; --label-bg: #ffffff; --label: #6b6450; --link: #8A6A12; --foot: rgba(138,106,18,.55); --toggle-track: #f3efe1; } /* ---------- animações ---------- */ @keyframes mb-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } @keyframes mb-drift-a { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,-4%) scale(1.15)} } @keyframes mb-drift-b { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7%,5%) scale(1.2)} } @keyframes mb-sheen { 0%{background-position:-160% 0} 100%{background-position:260% 0} } @keyframes mb-pop { 0%{opacity:0;transform:translateY(16px) scale(.98)} 100%{opacity:1;transform:none} } @keyframes mb-ring { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } /* ============================================================ TELA DE LOGIN ============================================================ */ body.task-login { background: var(--page-bg) !important; min-height: 100vh; overflow: hidden; color: var(--text) !important; transition: background .4s ease; } body.task-login::before, body.task-login::after { content:""; position:fixed; z-index:0; border-radius:50%; filter: blur(78px); pointer-events:none; } body.task-login::before { width:44vw; height:44vw; left:-8vw; top:-12vw; background: radial-gradient(circle, var(--glow-1), transparent 70%); animation: mb-drift-a 15s ease-in-out infinite; } body.task-login::after { width:40vw; height:40vw; right:-10vw; bottom:-14vw; background: radial-gradient(circle, var(--glow-2), transparent 70%); animation: mb-drift-b 19s ease-in-out infinite; } body.task-login #layout, body.task-login #layout-content, body.task-login .content, body.task-login .formcontainer { position:relative; z-index:1; background:transparent !important; } /* halo dourado girando atrás do card */ body.task-login .formcontainer::before { content:""; position:absolute; top:50%; left:50%; width:520px; height:520px; margin:-260px 0 0 -260px; background: conic-gradient(from 0deg, rgba(231,198,90,0), rgba(231,198,90,.20), rgba(201,162,39,0), rgba(231,198,90,.20), rgba(231,198,90,0)); border-radius:50%; filter:blur(30px); z-index:0; animation: mb-ring 22s linear infinite; pointer-events:none; } /* card (o próprio form) */ body.task-login #login-form .box-inner, body.task-login .login-form, body.task-login form.propform, body.task-login #layout-content form { position:relative; background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 18px !important; box-shadow: var(--card-shadow) !important; backdrop-filter: var(--card-backdrop); -webkit-backdrop-filter: var(--card-backdrop); padding: 30px 32px 30px !important; animation: mb-pop .6s cubic-bezier(.2,.7,.2,1) both; overflow:hidden; max-width:400px; z-index:1; transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; } /* brilho dourado deslizando no topo do card */ body.task-login #login-form .box-inner::before, body.task-login .login-form::before, body.task-login #layout-content form::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, transparent, var(--mb-gold-2), var(--mb-gold-3), transparent); background-size:45% 100%; animation: mb-sheen 4.5s linear infinite; } /* ---------- toggle Escuro/Claro (dentro do card) ---------- */ #mb-theme-toggle { display:flex; gap:4px; justify-content:center; width:max-content; margin:0 auto 20px; padding:4px; background: var(--toggle-track); border:1px solid var(--card-border); border-radius:999px; } #mb-theme-toggle button { border:0; background:transparent; color:var(--label); font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:6px 16px; border-radius:999px; cursor:pointer; transition: all .18s ease; line-height:1; } #mb-theme-toggle button.on { background: linear-gradient(180deg, var(--mb-gold-1), var(--mb-gold-3)); color:#3a2c07; box-shadow:0 4px 12px -4px rgba(201,162,39,.6); } /* logo (proporção travada — sem distorção) */ body.task-login img.logo, body.task-login .logo img, body.task-login #logo { width:auto !important; height:auto !important; max-width:180px !important; max-height:180px !important; min-height:0 !important; object-fit:contain !important; aspect-ratio:1/1; margin:4px auto 20px !important; display:block; filter: drop-shadow(0 8px 16px rgba(201,162,39,.4)); animation: mb-float 5s ease-in-out infinite; } /* textos */ body.task-login h1, body.task-login .header-title { color: var(--text) !important; } /* campos */ body.task-login input.form-control, body.task-login input[type="text"], body.task-login input[type="password"] { background: var(--input-bg) !important; border:1px solid var(--input-border) !important; color: var(--input-text) !important; border-radius:10px !important; transition: border-color .2s, box-shadow .2s, background .2s; } body.task-login input.form-control::placeholder { color: var(--placeholder) !important; } body.task-login input.form-control:focus, body.task-login input[type="text"]:focus, body.task-login input[type="password"]:focus { border-color: var(--mb-gold-3) !important; box-shadow:0 0 0 3px rgba(231,198,90,.22) !important; outline:none !important; } body.task-login label, body.task-login .input-group-text { color: var(--label) !important; background: var(--label-bg) !important; border-color: var(--input-border) !important; } body.task-login .input-group-text svg { color: var(--mb-gold-3) !important; fill: var(--mb-gold-3) !important; } /* botão entrar */ body.task-login button.btn-primary, body.task-login .btn.btn-primary, body.task-login input.btn-primary { background: linear-gradient(180deg, var(--mb-gold-1), var(--mb-gold-3)) !important; border:none !important; color:#3a2c07 !important; font-weight:700 !important; letter-spacing:.03em; border-radius:10px !important; box-shadow:0 12px 24px -10px rgba(201,162,39,.65) !important; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; width:100%; padding:12px 16px !important; } body.task-login button.btn-primary:hover, body.task-login .btn.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 18px 32px -12px rgba(201,162,39,.75) !important; } body.task-login button.btn-primary:active { transform:translateY(0); } /* links / select */ body.task-login select { color: var(--text) !important; background: var(--label-bg) !important; } body.task-login a { color: var(--link) !important; font-weight:600; } body.task-login a:hover { color: var(--mb-gold-3) !important; } /* rodapé com a marca */ body.task-login #layout-content::after { content:"MYBIMED · Assessoria de posicionamento digital e aceleramento comercial"; position:fixed; bottom:16px; left:0; right:0; text-align:center; font-size:11px; letter-spacing:.08em; color: var(--foot); z-index:1; pointer-events:none; } /* ============================================================ APP (pós-login) — colorido e alegre, cada ferramenta/pasta na sua cor ============================================================ */ :root { --c-inbox: #3b8bff; /* azul */ --c-drafts: #f2a94b; /* âmbar */ --c-sent: #2ecc71; /* verde */ --c-junk: #ff6b6b; /* coral */ --c-trash: #b98bff; /* roxo */ --c-archive: #2dd4bf; /* teal */ --c-mail: #3b8bff; --c-contacts: #2ecc71; --c-settings: #b98bff; --c-about: #2dd4bf; --c-logout: #ff6b6b; } /* botão primário dourado */ body:not(.task-login) .btn.btn-primary, body:not(.task-login) button.btn-primary { background: linear-gradient(180deg, var(--mb-gold-2), var(--mb-gold-3)) !important; border-color: var(--mb-gold-3) !important; color:#3a2c07 !important; font-weight:600 !important; } body:not(.task-login) .btn.btn-primary:hover { filter:brightness(1.06); } body:not(.task-login) img.logo { filter: drop-shadow(0 2px 6px rgba(201,162,39,.35)); } /* ---- ÍCONES DO MENU DE FERRAMENTAS (barra esquerda) ---- */ body:not(.task-login) #taskmenu a.compose:before { color: var(--mb-gold-2) !important; } body:not(.task-login) #taskmenu a.mail:before { color: var(--c-mail) !important; } body:not(.task-login) #taskmenu a.contacts:before { color: var(--c-contacts) !important; } body:not(.task-login) #taskmenu a.settings:before { color: var(--c-settings) !important; } body:not(.task-login) #taskmenu a.about:before { color: var(--c-about) !important; } body:not(.task-login) #taskmenu a.logout:before { color: var(--c-logout) !important; } /* botão selecionado ganha um leve realce dourado */ body:not(.task-login) #taskmenu a.selected { box-shadow: inset 3px 0 0 var(--mb-gold-3) !important; background: rgba(201,162,39,.10) !important; } /* ---- ÍCONES DAS PASTAS ---- */ body:not(.task-login) .folderlist li.inbox > a:before, body:not(.task-login) li.mailbox.inbox > a:before { color: var(--c-inbox) !important; } body:not(.task-login) .folderlist li.drafts > a:before, body:not(.task-login) li.mailbox.drafts > a:before { color: var(--c-drafts) !important; } body:not(.task-login) .folderlist li.sent > a:before, body:not(.task-login) li.mailbox.sent > a:before { color: var(--c-sent) !important; } body:not(.task-login) .folderlist li.junk > a:before, body:not(.task-login) li.mailbox.junk > a:before { color: var(--c-junk) !important; } body:not(.task-login) .folderlist li.trash > a:before, body:not(.task-login) li.mailbox.trash > a:before { color: var(--c-trash) !important; } body:not(.task-login) .folderlist li.archive> a:before, body:not(.task-login) li.mailbox.archive> a:before { color: var(--c-archive) !important; } /* pasta selecionada: realce dourado à esquerda */ body:not(.task-login) .folderlist li.selected > a, body:not(.task-login) .listing li.selected > a { box-shadow: inset 3px 0 0 var(--mb-gold-3) !important; } /* contador de não lidas em dourado */ body:not(.task-login) .folderlist .unreadcount, body:not(.task-login) .listing .unreadcount { background: var(--mb-gold-3) !important; color:#3a2c07 !important; font-weight:700 !important; }