/* PERK · Duda Perkles — identidade "estúdio de redes sociais" por cima da base de aço (base.css).
Paleta da Duda (oliva + dourado; os nomes das variáveis --marinho e --amarelo foram mantidos). Fontes Saira/Barlow, cantos retos. O que entra aqui é a linguagem
de foto, vídeo e Instagram, usada para ORIENTAR a pessoa, não para enfeitar:
- ícones (sprite /img/icones.svg, nomes em português, ver docs/identidade-visual.md);
- visor de câmera (cantoneiras) em volta do que é imagem: prévia, área de envio, estado vazio;
- ponto REC piscando = "a IA está trabalhando";
- barra de stories = em que etapa o post está;
- selos de formato com a proporção desenhada (Feed 4:5, quadrado, Story 9:16, Reels, carrossel);
- selos de situação com ícone + cor (rascunho, revisão, aprovado, agendado, publicado, falhou);
- degradê do Instagram SÓ onde a ação é de fato no Instagram (Fase 2: publicar/agendar/conectar). */
:root {
--ig-1: #feda75; --ig-2: #fa7e1e; --ig-3: #d62976; --ig-4: #962fbf; --ig-5: #4f5bd5;
--ig-degrade: linear-gradient(45deg, var(--ig-1) 0%, var(--ig-2) 22%, var(--ig-3) 50%, var(--ig-4) 75%, var(--ig-5) 100%);
--rec: #e5342b;
--visor-cor: var(--amarelo);
--visor-tam: 14px;
--visor-esp: 2px;
/* situação do post (ícone + cor; nunca só cor) */
--st-rascunho: var(--tinta-3);
--st-revisao: #2f6fd0;
--st-aprovacao: #9a5c00;
--st-aprovado: var(--sucesso);
--st-agendado: #6d48b0;
--st-publicado: #c1356f;
--st-falhou: var(--perigo);
}
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) { --st-revisao: #7fb0ff; --st-aprovacao: #ffb547; --st-agendado: #b79cf0; --st-publicado: #ff7eb3; }
}
:root[data-tema="escuro"] { --st-revisao: #7fb0ff; --st-aprovacao: #ffb547; --st-agendado: #b79cf0; --st-publicado: #ff7eb3; }
/* ---------- ícones ----------
ou PG.icone('foto') */
.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; stroke-width: 1.8; }
.ic-p { width: 1em; height: 1em; }
.ic-g { width: 1.6em; height: 1.6em; }
.ic-gg { width: 2.6em; height: 2.6em; stroke-width: 1.4; }
.ic-amarelo { color: var(--amarelo); }
.ic-destaque { color: var(--destaque-texto); }
.ic-ig { color: var(--ig-3); }
/* ícone nas abas: pequeno, à esquerda do nome; no celular só o ícone + nome curto continua */
.aba-ic { width: 18px; height: 18px; margin-right: .45rem; vertical-align: -3px; opacity: .8; transition: opacity var(--t-medio), transform var(--t-medio) var(--ease); }
.aba[aria-selected="true"] .aba-ic { opacity: 1; color: var(--amarelo); }
.aba:hover .aba-ic { transform: translateY(-1px); }
/* ícone em quadrado (cards do início, atalhos): chapa marinho com ícone amarelo, como os cards de valor da marca */
.ic-caixa { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-p);
background: var(--marinho); color: var(--amarelo); box-shadow: inset 0 0 0 1px rgba(201, 168, 118, .25); }
.ic-caixa .ic { width: 22px; height: 22px; }
.ic-caixa.invertida { background: var(--amarelo); color: #1f1510; box-shadow: none; }
.ic-caixa.ig { background: var(--ig-degrade); color: #fff; box-shadow: none; }
/* ---------- visor de câmera ----------
Quatro cantoneiras em volta de qualquer imagem. Sem elementos extras: 4 gradientes no fundo do ::after. */
.visor { position: relative; isolation: isolate; }
.visor::after {
content: ''; position: absolute; inset: calc(var(--visor-esp) * -3); pointer-events: none; z-index: 2;
--c: var(--visor-cor); --t: var(--visor-tam); --e: var(--visor-esp);
background:
linear-gradient(var(--c), var(--c)) top left / var(--t) var(--e), linear-gradient(var(--c), var(--c)) top left / var(--e) var(--t),
linear-gradient(var(--c), var(--c)) top right / var(--t) var(--e), linear-gradient(var(--c), var(--c)) top right / var(--e) var(--t),
linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--e), linear-gradient(var(--c), var(--c)) bottom left / var(--e) var(--t),
linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--e), linear-gradient(var(--c), var(--c)) bottom right / var(--e) var(--t);
background-repeat: no-repeat;
transition: inset var(--t-medio) var(--ease), opacity var(--t-medio);
}
.visor.discreto::after { --c: var(--risco-forte); }
.visor:hover::after, .visor.foco::after, .visor:focus-within::after { inset: calc(var(--visor-esp) * -5); --c: var(--amarelo); }
/* grade dos terços por cima da imagem (ligar com .com-grade; aparece no hover/arrastar) */
.visor.com-grade::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--t-medio);
background:
linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px));
mix-blend-mode: difference;
}
.visor.com-grade:hover::before, .visor.com-grade.arrastando::before { opacity: 1; }
/* área de soltar arquivos com visor (substitui borda tracejada genérica) */
.soltar {
display: grid; justify-items: center; gap: .5rem; padding: 1.8rem 1rem; text-align: center; cursor: pointer;
background: repeating-linear-gradient(135deg, transparent 0 10px, var(--linha-hover) 10px 11px), var(--chapa-2);
border-radius: var(--r-p); color: var(--tinta-2);
}
.soltar .ic-gg { color: var(--destaque-texto); }
.soltar b { font: 600 1rem/1.2 var(--f-texto); color: var(--tinta); }
.soltar small { color: var(--tinta-4); }
.soltar.arrastando { background-color: var(--linha-hover); }
.soltar.arrastando .ic-gg { animation: sobe 600ms var(--ease) infinite alternate; }
@keyframes sobe { to { transform: translateY(-4px); } }
/* ---------- REC: "a IA está trabalhando" ---------- */
.rec { display: inline-flex; align-items: center; gap: .45rem; font: 700 .72rem/1 var(--f-rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.rec::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0 rgba(229, 52, 43, .5); animation: rec 1.2s ease-out infinite; }
.rec.parado::before { animation: none; background: var(--tinta-4); }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(229, 52, 43, .55); opacity: 1; } 60% { opacity: .55; } 100% { box-shadow: 0 0 0 7px rgba(229, 52, 43, 0); opacity: 1; } }
/* ---------- barra de stories: em que etapa o post está ----------
- …
- …
- …
*/
.stories-barra { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.stories-barra li { display: grid; gap: .4rem; font: 600 .7rem/1.1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-4); }
.stories-barra li::before { content: ''; height: 3px; border-radius: 2px; background: var(--risco-forte); }
.stories-barra li.feita::before { background: var(--amarelo); }
.stories-barra li.atual { color: var(--tinta); }
.stories-barra li.atual::before { background: linear-gradient(90deg, var(--amarelo) 50%, var(--risco-forte) 50%) 100% 0 / 200% 100%; animation: enche 2.4s linear infinite; }
@keyframes enche { to { background-position: 0 0; } }
/* ---------- anel de story (avatar, item novo) ---------- */
.anel { display: inline-grid; place-items: center; padding: 2px; border-radius: 50%; background: conic-gradient(var(--amarelo), var(--azul-vivo), var(--amarelo)); }
.anel > * { border-radius: 50%; box-shadow: 0 0 0 2px var(--chapa); }
.anel.visto { background: var(--risco-forte); }
.anel.ig { background: var(--ig-degrade); }
/* ---------- selo de formato: a proporção desenhada ao lado do nome ---------- */
.fmt-selo { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem .25rem .4rem; border-radius: var(--r-p);
background: var(--chapa-2); box-shadow: inset 0 0 0 1px var(--risco); font: 600 .74rem/1 var(--f-rotulo); letter-spacing: .06em; color: var(--tinta-2); white-space: nowrap; }
.fmt-selo i { display: inline-block; width: 10px; border: 1.5px solid currentColor; border-radius: 1.5px; }
.fmt-selo.feed i { height: 12.5px; } /* 4:5 */
.fmt-selo.quadrado i { height: 10px; } /* 1:1 */
.fmt-selo.story i, .fmt-selo.reels i { width: 8px; height: 14px; } /* 9:16 */
.fmt-selo.carrossel i { height: 12.5px; box-shadow: 3px -3px 0 -1.5px var(--chapa-2), 3px -3px 0 0 currentColor; margin-right: 3px; }
.fmt-selo.reels i { background: linear-gradient(currentColor, currentColor) center / 0 0 no-repeat; position: relative; }
.fmt-selo.reels i::after { content: ''; position: absolute; left: 1.5px; top: 3.5px; border: 2.5px solid transparent; border-left: 3.5px solid currentColor; border-right: 0; }
/* ---------- selo de situação do post: ícone + cor + texto ---------- */
.st { --c: var(--st-rascunho); display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem .3rem .45rem; border-radius: 999px;
font: 600 .76rem/1 var(--f-texto); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.st .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.st.revisao { --c: var(--st-revisao); } .st.aprovacao { --c: var(--st-aprovacao); } .st.aprovado { --c: var(--st-aprovado); }
.st.agendado { --c: var(--st-agendado); } .st.publicado { --c: var(--st-publicado); } .st.falhou { --c: var(--st-falhou); }
/* ---------- prévia "como vai aparecer no Instagram" ----------
Melhora o .ig existente: moldura de celular, ações com ícones reais, curtidas e hora. */
.celular {
width: min(100%, 380px); margin-inline: auto; padding: 10px; border-radius: 34px; background: #1a110d;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 0 2px #2a1d16, 0 30px 60px -30px rgba(31, 21, 16, .6);
}
.celular-tela, .celular .celular-tela.ig { border-radius: 26px; overflow: hidden; background: #fff; color: #1f1510; position: relative; } /* .ig (revisao.css) pintava a tela com a cor do tema escuro */
.celular-tela::before { content: ''; display: block; height: 26px; background: #fff; } /* barra de status */
.celular-tela::after { content: ''; position: absolute; top: 8px; left: 50%; width: 84px; height: 20px; margin-left: -42px; border-radius: 12px; background: #1a110d; } /* câmera */
.celular .ig-topo b { font-weight: 600; font-size: .88rem; }
.celular .ig-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--amarelo); }
.ig-acoes-ic { display: flex; align-items: center; gap: .95rem; padding: .6rem .8rem .2rem; color: #1f1510; }
.ig-acoes-ic .ic { width: 24px; height: 24px; stroke-width: 1.7; }
.ig-acoes-ic .ic:last-child { margin-left: auto; }
.ig-curtidas { padding: .1rem .8rem 0; font: 600 .84rem/1.4 var(--f-texto); }
.ig-hora { padding: 0 .8rem .8rem; font-size: .7rem; letter-spacing: .02em; color: #8a8478; text-transform: uppercase; }
.celular .ig-legenda { color: #1f1510; }
.celular .ig-legenda .tag { color: #2f3524; }
.celular.story .celular-tela { aspect-ratio: 9 / 19.5; background: #000; }
/* ---------- estado vazio com visor ---------- */
.vazio-visor { display: grid; justify-items: center; gap: .55rem; padding: 2.4rem 1rem; text-align: center; color: var(--tinta-3); }
.vazio-visor .quadro { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: .5rem; color: var(--destaque-texto); }
.vazio-visor .quadro::after { inset: 0; --t: 18px; }
.vazio-visor b { font: 700 1.05rem/1.2 var(--f-titulo); font-stretch: 108%; color: var(--tinta); }
.vazio-visor p { margin: 0; max-width: 38ch; }
/* ---------- botões de rede social ---------- */
.bt-instagram { background: var(--ig-degrade); color: #fff; border-color: transparent; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
.bt-instagram:hover { filter: saturate(1.15) brightness(1.05); border-color: transparent; }
.bt .ic { width: 18px; height: 18px; }
/* ---------- cabeçalho de seção com ícone (sobretítulo + ícone) ---------- */
.titulo-ic { display: flex; align-items: center; gap: .75rem; }
.titulo-ic .ic-caixa { width: 44px; height: 44px; }
/* ---------- textura de fundo do hero: grade de contato (folha de fotos) bem discreta ---------- */
.fundo-contato {
background-image:
linear-gradient(rgba(201, 168, 118, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 118, .05) 1px, transparent 1px),
radial-gradient(120% 80% at 85% -10%, rgba(201, 168, 118, .22), transparent 60%);
background-size: 64px 80px, 64px 80px, auto; /* células 4:5, a proporção do feed */
}
@media (prefers-reduced-motion: reduce) {
.rec::before, .stories-barra li.atual::before, .soltar.arrastando .ic-gg { animation: none; }
.stories-barra li.atual::before { background: var(--amarelo); }
}