/** * Skin Anderson Siqueira — FILHA da skin `multicloud` (S80/F8). * * ⚠️ PROPOSTA — aprovar com o dono do projeto antes de publicar. Nada aqui * foi validado ao vivo contra um Roundcube de verdade (ver a nota de ponto * cego no relatório da F8). * * --------------------------------------------------------------------- * POR QUE FILHA DA `multicloud`, NÃO DA `elastic` DIRETO (decisão 2 da spec) * * `meta.json` desta skin declara `"extends": "multicloud"`. Isso resolve * template/asset por CASCATA (elastic → multicloud → anderson), mas o * Roundcube NÃO encadeia `styles.css` de skins-pai automaticamente — cada * skin ativa carrega só a SUA PRÓPRIA folha (é por isso que a skin * `multicloud` já faz `@import` manual da `elastic`). Para herdar também os * ajustes de marca da `multicloud` (raio, sombra do cartão, layout do * seletor de tema, painel de recuperação embutido — nada disso é específico * de cor), esta folha importa as DUAS, na ordem, e sobrescreve só o que * muda: os 5 tokens de cor e um pequeno número de literais que a * `multicloud` não tokenizou (gradiente do login, alguns `rgba()` fixos). * --------------------------------------------------------------------- * DE ONDE VEIO CADA COR — extraído de https://andersonsiqueira.com/ em * 2026-09-24 (leitura pública, HTML + `build/assets/app-ChYNczc1.css`; sem * login, sem escrita). O site é Tailwind CSS (classes utilitárias, sem * variáveis CSS próprias de marca) — por isso as fontes abaixo são * trechos do HTML servido, não uma "paleta" declarada num arquivo só: * * --mc-navy-900 #020617 <- , , e o gradiente * inline do hero (`#020617,#07111f_52%,#020617`) * --mc-sky #22d3ee <- cor do favicon inline (`stroke='%2322d3ee'`, * em data-URI) — o MESMO tom * que o botão principal do site usa * (`bg-cyan-400`) e a paleta Tailwind chama * `cyan-400`. É o acento primário de fato do * site: usado no botão de CTA, na borda do * badge "AS" do cabeçalho e no stroke do * favicon. * --mc-ice #ecfeff <- fill do texto "AS" no MESMO favicon inline * (`fill='%23ecfeff'`) — o único tom quase- * branco que o site declara explicitamente * (Tailwind chama `cyan-50`). * --mc-royal #0e7490 <- NÃO extraído literalmente do site: o site só * usa cyan-400 (#22d3ee) como acento, e SEMPRE * como FUNDO sob texto escuro * (`bg-cyan-400 text-slate-950`), nunca como * cor de TEXTO/link sobre fundo claro — e * cyan-400 sobre branco mede 1,81:1 de * contraste, reprovando AA (mín. 4,5:1) de * sobra. `--mc-royal` faz esse papel na skin * `multicloud` (link/botão sobre fundo BRANCO * no tema claro do login). Escolhido * `cyan-700` (#0e7490), o degrau mais próximo * da MESMA família Tailwind que o site já usa * (cyan-200/300/400/500 aparecem no HTML) que * passa AA: 5,36:1 contra branco, e 5,36:1 * também para texto branco sobre este tom como * fundo (mesma medida, o par é simétrico). * --mc-navy-800 #164e63 <- idem: sem literal no site para este papel * (fundo escuro sob texto quase-branco, ex. o * botão primário no tema escuro). `cyan-900` * (#164e63) da MESMA paleta Tailwind, 9,11:1 * contra branco/ice — folga grande de AA. * --mc-radius / --mc-radius-sm -> MANTIDOS iguais à skin multicloud * (14px/9px). Geometria não é identidade de * marca aqui — a instrução da spec foi trocar * tokens de COR/LOGO, não a forma dos cantos. * * Contraste calculado (fórmula WCAG 2.x, luminância relativa) e registrado * no relatório da sessão que criou este arquivo — refaça a conta se algum * destes 5 valores mudar. * --------------------------------------------------------------------- */ @import url("../../elastic/styles/styles.min.css"); @import url("../../multicloud/styles/styles.min.css"); :root { --mc-navy-900: #020617; --mc-navy-800: #164e63; --mc-royal: #0e7490; --mc-sky: #22d3ee; --mc-ice: #ecfeff; /* Geometria: igual à multicloud, de propósito — ver o comentário acima. */ --mc-radius: 14px; --mc-radius-sm: 9px; /* --------------------------------------------------------------- * S87 — tokens de COR que a camada de design nova (multicloud/ * styles.css) introduziu e que DEPENDEM de marca. --mc-radius-md, * --mc-radius-pill, --mc-shadow-*, --mc-transition e --mc-font não * entram aqui de propósito — são geometria/movimento/tipografia, * herdados de graça pelo @import acima (mesma decisão já registrada * para --mc-radius/--mc-radius-sm). Só o que muda com a marca: * --------------------------------------------------------------- */ /* Mesma família cyan do site do Anderson (ver o cabeçalho acima) — um degrau entre --mc-royal (cyan-700) e --mc-sky (cyan-400): cyan-500 (#06b6d4), para compor --mc-grad com o mesmo espírito do --mc-royal-400 -> --mc-sky da multicloud. */ --mc-royal-400: #06b6d4; /* Espelha --mc-sky (cyan-400, #22d3ee) — mesmo papel que a multicloud dá ao dela. Trocar os dois juntos se --mc-sky mudar aqui. */ --mc-focus-ring: 0 0 0 3px rgba(34, 211, 238, .38); --mc-grad: linear-gradient(135deg, var(--mc-royal-400), var(--mc-sky)); } /* A `multicloud` não tokenizou o degradê de fundo do login (é literal em #f8fafc/#eef3fb/#e2eaf7, um azul-gelo) nem alguns `rgba()` fixos que reproduzem --mc-sky "a mão" em vez de usar var(). Como este arquivo só SOBRESCREVE por cima do @import, os seletores abaixo precisam repetir os mesmos seletores da multicloud para vencer a especificidade/ordem — ver deploy/roundcube/skin/multicloud/styles/styles.css para o original de cada um. */ .task-login #layout, .task-login #layout-content { background: linear-gradient(160deg, #f0fbfd 0%, #e3f6fa 55%, #cdeef6 100%); } html.dark-mode .task-login #layout, html.dark-mode .task-login #layout-content { background: linear-gradient(160deg, var(--mc-navy-900) 0%, #07111f 55%, var(--mc-navy-800) 100%); } html.dark-mode .task-login #login-form { border-color: rgba(34, 211, 238, .18); /* era rgba(56,189,248,.18) -- mesmo alpha, tom cyan */ } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.dark-mode .task-login #login-form { background: #07111f; /* mesmo papel do #132043 da multicloud, no tom da marca */ } } html.dark-mode .task-login #login-form input.form-control:-webkit-autofill, html.dark-mode .task-login #login-form input.form-control:-webkit-autofill:hover, html.dark-mode .task-login #login-form input.form-control:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 1000px #07111f; } /* Botão primário: a multicloud tem um `box-shadow` de foco com azul literal (rgba(0,85,255,.45), já divergente do próprio --mc-royal dela -- ver docs/WEBMAIL.md S34, dívida existente e não desta sessão). Aqui o anel de foco usa o tom da marca em vez de herdar o azul errado. */ .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .45); }