/*
KING GROUP BACKGROUND — fundo e subfundos reutilizáveis
Baseado no visual oficial da página Guia de Tamanhos.
Versão: 1.0
USO RÁPIDO
1. Inclua no :
...
...
*/
:root {
--kgb-red: #ec1c24;
--kgb-red-light: #ff3d34;
--kgb-red-dark: #9d0710;
--kgb-yellow: #efe718;
--kgb-black: #0d0d0d;
--kgb-white: #ffffff;
--kgb-line: rgba(255, 255, 255, 0.18);
--kgb-radius: 26px;
--kgb-radius-card: 22px;
--kgb-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
--kgb-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.14);
}
html {
min-height: 100%;
}
body.kg-background {
min-height: 100vh;
margin: 0;
color: #ffffff;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.10), transparent 16%),
radial-gradient(circle at 85% 10%, rgba(239, 231, 24, 0.18), transparent 14%),
linear-gradient(135deg, #ff2d2d 0%, #ff3030 36%, #f21d24 62%, #cf0f18 100%);
background-attachment: fixed;
position: relative;
overflow-x: hidden;
}
body.kg-background,
body.kg-background * {
box-sizing: border-box;
}
/* Textura diagonal sobre o fundo */
body.kg-background::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: repeating-linear-gradient(
122deg,
rgba(255, 255, 255, 0.045) 0 160px,
rgba(255, 255, 255, 0) 160px 420px
);
}
/* Marca d'água KING */
body.kg-background::after {
content: "KING";
position: fixed;
right: -30px;
bottom: -24px;
z-index: 0;
pointer-events: none;
font-size: clamp(140px, 22vw, 360px);
font-weight: 900;
line-height: 1;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.08);
}
/* Mantém o conteúdo acima do fundo decorativo */
.kg-bg-page,
.kg-background > header,
.kg-background > main,
.kg-background > footer {
position: relative;
z-index: 1;
}
/* Container opcional */
.kg-bg-container {
width: min(1180px, calc(100% - 40px));
margin-inline: auto;
}
/* Subfundo principal — seções e painéis */
.kg-sub-bg {
position: relative;
z-index: 1;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--kgb-radius);
background: rgba(82, 0, 8, 0.21);
box-shadow: var(--kgb-shadow-soft);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Subfundo mais leve — introduções e blocos de apoio */
.kg-sub-soft {
position: relative;
z-index: 1;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--kgb-radius);
background: rgba(88, 0, 8, 0.22);
box-shadow: var(--kgb-shadow);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Card interno */
.kg-sub-card {
position: relative;
z-index: 1;
padding: 16px;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--kgb-radius-card);
background: rgba(104, 0, 10, 0.30);
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.11);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform 0.2s ease, background 0.2s ease,
border-color 0.2s ease, box-shadow 0.2s ease;
}
.kg-sub-card:hover,
.kg-sub-card:focus-within {
transform: translateY(-3px);
background: rgba(112, 0, 11, 0.40);
border-color: rgba(255, 255, 255, 0.38);
box-shadow: 0 22px 38px rgba(0, 0, 0, 0.16);
}
/* Subfundo escuro — avisos, CTA e destaques */
.kg-sub-dark {
position: relative;
z-index: 1;
padding: 20px;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--kgb-radius-card);
background: rgba(10, 10, 10, 0.76);
box-shadow: var(--kgb-shadow);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* CTA em preto e vermelho profundo */
.kg-sub-cta {
position: relative;
z-index: 1;
padding: 24px;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 24px;
background: linear-gradient(135deg, rgba(10, 10, 10, 0.88), rgba(48, 0, 4, 0.82));
box-shadow: var(--kgb-shadow);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
/* Pequeno bloco translúcido interno */
.kg-sub-mini {
padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 17px;
background: rgba(255, 255, 255, 0.09);
}
/* Utilitários */
.kg-bg-stack {
display: grid;
gap: 20px;
}
.kg-bg-text-muted {
color: rgba(255, 255, 255, 0.82);
}
.kg-bg-yellow {
color: #111111;
background: var(--kgb-yellow);
}
@media (max-width: 760px) {
.kg-bg-container {
width: min(100% - 22px, 1180px);
}
body.kg-background::after {
right: -14px;
bottom: -4px;
font-size: 138px;
}
.kg-sub-bg,
.kg-sub-soft {
padding: 13px;
border-radius: 20px;
}
.kg-sub-card,
.kg-sub-dark {
padding: 13px;
border-radius: 18px;
}
.kg-sub-cta {
padding: 17px;
border-radius: 20px;
}
.kg-sub-mini {
padding: 12px 13px;
border-radius: 15px;
}
.kg-bg-stack {
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.kg-sub-card {
transition: none;
}
}