/* ===================================================================== MR START — gradient.css · O FUNDO DA MARCA Decisão (dono): usar as FOTOS oficiais de BG, não gradiente em código. Escolhidas por medição de luminância (as mais pretas do kit): start → BG-MR-START-03.jpg (média 18/255 · 280 KB) pratica → BG-PRATICA-4.jpg (média 18/255 · 262 KB) Por cima, a segunda assinatura das peças da marca: hairlines diagonais formando chevrons/"M" gigantes (SVG inline, traço steel a ~5%). Uso: como 1º filho do . Variantes: body[data-bg="start"|"pratica"]. Fallback: .mr-bg--css usa gradiente em código (sem rede/arquivo). ===================================================================== */ .mr-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; background-color:var(--bg); background-image:url('../assets/bg/start/BG-MR-START-03.jpg'); background-size:cover; background-position:center; } body[data-bg="pratica"] .mr-bg{ background-image:url('../assets/bg/pratica/BG-PRATICA-4.jpg'); background-color:#0A0503; } /* --- Hairlines diagonais (chevrons "M" das peças da marca) --- SVG inline: dois chevrons grandes, traço 1px steel ~5%. Cobrem a tela inteira e ficam SOB o conteúdo, sobre a foto. */ .mr-bg::before{ content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%2376A8B3' stroke-opacity='0.055' stroke-width='1.2'%3E%3Cpath d='M170 -80 L640 390 L1110 -80'/%3E%3Cpath d='M480 980 L1010 450 L1540 980'/%3E%3Cpath d='M-200 560 L120 240'/%3E%3Cpath d='M1200 760 L1520 440'/%3E%3C/g%3E%3C/svg%3E"); background-size:cover; background-position:center; } /* Vinheta leve nas bordas — assenta o conteúdo sobre a foto */ .mr-bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.42) 100%); } /* --- Fallback em código (sem a foto) — replica a START-03: quase preta, brilho teal só no canto inferior esquerdo --- */ .mr-bg--css{ background-image: radial-gradient(70% 58% at 4% 92%, rgba(24,97,109,0.55) 0%, rgba(24,97,109,0) 62%), radial-gradient(42% 34% at 16% 72%, rgba(118,168,179,0.14) 0%, rgba(118,168,179,0) 58%), radial-gradient(75% 65% at 70% 30%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%) !important; } body[data-bg="pratica"] .mr-bg--css{ background-image: radial-gradient(64% 52% at 6% 88%, rgba(196,77,19,0.5) 0%, rgba(196,77,19,0) 62%), radial-gradient(70% 62% at 80% 16%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 70%) !important; } /* (o glow radial atrás do título saiu — a placa chanfrada do título já assina a tela; glow era ruído de template) */ @media (prefers-reduced-motion:no-preference){ .mr-bg{ transition:background-image 0.5s ease; } }