/* ==========================================================================
Estilos compartilhados dos artigos do blog + páginas de serviço da Trapping.
Editar aqui reflete em TODAS as páginas que o incluem.
Incluir no :
========================================================================== */
/* Moldura CMY nas imagens — três quadros de LINHA FINA, cantos arredondados,
cada um levemente girado em um ângulo diferente (desalinho proposital) e com
um leve movimento contínuo. Ecoa o registro de cores ("trapping") do objeto
da página inicial.
ATENÇÃO: a classe é .cmyk-frame (NÃO .cmyk — esse nome já é usado pela
barrinha decorativa perto do título).
Como usar: envolva a imagem em
![]()
(o vazio é a 3ª moldura; o max-width define a largura da imagem). */
.cmyk-frame {
position: relative;
display: block;
width: 100%;
margin: 30px auto;
}
.cmyk-frame > img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
border-radius: 16px;
position: relative;
z-index: 1;
}
/* As três molduras (ciano = ::before, magenta = ::after, amarelo = ) */
.cmyk-frame::before,
.cmyk-frame::after,
.cmyk-frame > i {
content: "";
position: absolute;
pointer-events: none;
border: 1.5px solid;
z-index: 0;
}
.cmyk-frame::before { /* ciano */
inset: -6px;
border-radius: 20px;
border-color: #00AFF0;
animation: trp-frame-c 9s ease-in-out infinite;
}
.cmyk-frame::after { /* magenta */
inset: -10px;
border-radius: 23px;
border-color: #EA278E;
animation: trp-frame-m 11s ease-in-out infinite;
}
.cmyk-frame > i { /* amarelo */
inset: -13px;
border-radius: 26px;
border-color: #FEF10F;
animation: trp-frame-y 10s ease-in-out infinite;
}
/* Ângulos levemente diferentes + leve balanço (giro sutil de ida e volta). */
@keyframes trp-frame-c { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(0.3deg); } }
@keyframes trp-frame-m { 0%,100% { transform: rotate(1.5deg); } 50% { transform: rotate(0.4deg); } }
@keyframes trp-frame-y { 0%,100% { transform: rotate(-0.6deg); } 50% { transform: rotate(-1.8deg); } }
/* Afasta a legenda para as molduras não passarem por cima dela. */
figure .cmyk-frame { margin-bottom: 34px; }
/* Par de imagens (artigo de Braille): os wrappers preenchem as colunas. */
.duo { gap: 30px !important; }
.duo .cmyk-frame { margin: 0; }
.duo .cmyk-frame > img { aspect-ratio: 3/4; object-fit: cover; }
/* Acessibilidade: sem movimento para quem prefere movimento reduzido
(as molduras continuam giradas em ângulos diferentes, apenas paradas). */
@media (prefers-reduced-motion: reduce) {
.cmyk-frame::before { transform: rotate(-1.2deg); animation: none; }
.cmyk-frame::after { transform: rotate(1.5deg); animation: none; }
.cmyk-frame > i { transform: rotate(-0.6deg); animation: none; }
}