/* * King Group Background * Arquivo oficial reutilizável de background * Versão: 1.0.0 * * Uso recomendado: * 1) Adicione a classe "king-group-page" ao ou ao wrapper principal. * 2) Carregue este arquivo antes do CSS específico da página. */ :root { --kg-red-950: #5f070b; --kg-red-900: #7f0a10; --kg-red-800: #a60d15; --kg-red-700: #c91019; --kg-red-600: #e01822; --kg-red-500: #f0242d; --kg-yellow: #ffea00; --kg-black: #0b0b0d; --kg-white: #ffffff; --kg-glass-bg: rgba(255, 255, 255, 0.075); --kg-glass-bg-strong: rgba(35, 3, 5, 0.42); --kg-glass-border: rgba(255, 255, 255, 0.18); --kg-radius-lg: 28px; --kg-radius-md: 20px; --kg-radius-sm: 14px; --kg-shadow: 0 18px 50px rgba(64, 0, 4, 0.22); } body.king-group-page, .king-group-page { min-height: 100vh; position: relative; isolation: isolate; color: var(--kg-white); background: radial-gradient(circle at 14% 12%, rgba(255,255,255,.10), transparent 23%), radial-gradient(circle at 88% 28%, rgba(255,201,0,.05), transparent 25%), linear-gradient( 145deg, var(--kg-red-500) 0%, var(--kg-red-700) 42%, var(--kg-red-800) 72%, var(--kg-red-900) 100% ); background-attachment: fixed; } body.king-group-page::before, .king-group-page::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: repeating-linear-gradient( 124deg, rgba(255,255,255,.028) 0, rgba(255,255,255,.028) 2px, transparent 2px, transparent 54px ), repeating-linear-gradient( 34deg, rgba(0,0,0,.018) 0, rgba(0,0,0,.018) 1px, transparent 1px, transparent 78px ); } body.king-group-page::after, .king-group-page::after { content: "KING"; position: fixed; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-8deg); z-index: -3; pointer-events: none; user-select: none; font-family: Arial, Helvetica, sans-serif; font-size: clamp(130px, 30vw, 480px); font-weight: 900; line-height: .78; letter-spacing: -.09em; color: rgba(255,255,255,.026); text-shadow: 0 0 80px rgba(0,0,0,.025); white-space: nowrap; } .king-glass { background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border: 1px solid var(--kg-glass-border); border-radius: var(--kg-radius-lg); box-shadow: var(--kg-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .king-glass-dark { background: linear-gradient(145deg, rgba(36,2,4,.70), rgba(19,1,2,.54)); border: 1px solid rgba(255,255,255,.15); border-radius: var(--kg-radius-lg); box-shadow: var(--kg-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .king-btn-yellow { appearance: none; border: 0; border-radius: 999px; padding: 13px 20px; background: var(--kg-yellow); color: var(--kg-black); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 10px 28px rgba(255,234,0,.14); } .king-btn-dark { appearance: none; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 13px 20px; background: var(--kg-black); color: var(--kg-white); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; } @media (max-width: 768px) { body.king-group-page, .king-group-page { background-attachment: scroll; } body.king-group-page::after, .king-group-page::after { top: 48%; font-size: clamp(110px, 45vw, 260px); opacity: .95; } .king-glass, .king-glass-dark { border-radius: 20px; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); } } @media (prefers-reduced-transparency: reduce) { .king-glass, .king-glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ========================================================= Compatibilidade interna — King Catálogos Mantém o painel e componentes legados usando a skin atual. ========================================================= */ .kg-bg-container{ width:min(1180px,calc(100% - 40px)); margin-inline:auto; } .kg-sub-bg, .kg-sub-soft{ position:relative; z-index:1; padding:20px; border:1px solid var(--kg-glass-border); border-radius:var(--kg-radius-lg); background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(78,2,7,.22)); box-shadow:var(--kg-shadow); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .kg-sub-card{ position:relative; z-index:1; padding:16px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--kg-radius-md); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(64,2,6,.28)); box-shadow:0 16px 34px rgba(64,0,4,.15); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .kg-sub-dark{ position:relative; z-index:1; padding:20px; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:var(--kg-radius-md); background:linear-gradient(145deg,rgba(36,2,4,.78),rgba(11,1,2,.68)); box-shadow:var(--kg-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .kg-sub-mini{ padding:15px; border:1px solid rgba(255,255,255,.16); border-radius:var(--kg-radius-sm); background:rgba(255,255,255,.075); } @media(max-width:768px){ .kg-bg-container{width:min(100% - 22px,1180px)} .kg-sub-bg,.kg-sub-soft{padding:13px;border-radius:20px} .kg-sub-card,.kg-sub-dark{padding:13px;border-radius:18px} .kg-sub-mini{padding:12px 13px;border-radius:15px} }