:root { --preto: #111111; --branco: #FFFFFF; --cinza-claro: #F5F5F5; --cinza-medio: #CCCCCC; --accent: #FBCA01; /* sobrescrito por curso via data-curso no */ --sidebar: 240px; --topbar: 80px; } /* Accent por trilha — aplicado via atributo data-curso no */ body[data-curso="arrais"] { --accent: #FBCA01; } body[data-curso="motonauta"] { --accent: #C9A848; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', Arial, sans-serif; background: var(--branco); color: var(--preto); } h1, h2, h3, .titulo-impact { font-family: 'Impact', 'Arial Narrow', sans-serif; letter-spacing: 1px; } /* ---------- TOPBAR ---------- */ .topbar { height: var(--topbar); background: var(--preto); border-bottom: 4px solid var(--accent); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: var(--branco); } .topbar .curso-badge { background: var(--accent); color: var(--preto); font-family: 'Impact', sans-serif; padding: 4px 12px; border-radius: 3px; letter-spacing: 1px; font-size: 12px; } /* ---------- SIDEBAR ---------- */ .sidebar { width: var(--sidebar); background: var(--cinza-claro); border-right: 1px solid var(--cinza-medio); min-height: calc(100vh - var(--topbar)); padding: 16px 0; } .sidebar .sb-link { display: block; padding: 10px 20px; color: var(--preto); text-decoration: none; font-size: 13px; border-left: 3px solid transparent; } .sidebar .sb-link.ativo, .sidebar .sb-link:hover { border-left-color: var(--accent); background: rgba(0,0,0,0.03); font-weight: 600; } .sidebar .sb-link.concluido::after { content: " ✓"; color: #1A7C40; } /* ---------- SELETOR DE TRILHA (aluno com 2 matrículas) ---------- */ .seletor-trilha { display: flex; gap: 16px; padding: 40px; justify-content: center; flex-wrap: wrap; } .card-trilha { border: 2px solid var(--cinza-medio); border-radius: 8px; padding: 32px; width: 260px; text-align: center; cursor: pointer; text-decoration: none; color: var(--preto); transition: border-color .15s; } .card-trilha:hover { border-color: var(--accent); } .card-trilha.arrais { border-top: 6px solid #FBCA01; } .card-trilha.motonauta { border-top: 6px solid #C9A848; } /* ---------- BOTÕES ---------- */ .btn { background: var(--accent); color: var(--preto); border: none; padding: 10px 20px; border-radius: 4px; font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; } .btn:hover { opacity: .9; } .btn-secundario { background: transparent; border: 1px solid var(--cinza-medio); color: var(--preto); } /* ---------- PROTEÇÃO DE CONTEÚDO ---------- */ .conteudo-protegido { user-select: none; -webkit-user-select: none; -moz-user-select: none; position: relative; } .conteudo-protegido img { pointer-events: none; } .marca-dagua { position: fixed; pointer-events: none; z-index: 9999; color: rgba(17,17,17,0.12); font-size: 14px; font-family: 'Poppins', sans-serif; white-space: nowrap; transform: rotate(-25deg); transition: top 8s linear, left 8s linear; } /* ---------- FORM (login, reset, etc.) ---------- */ .form-box { max-width: 380px; margin: 60px auto; padding: 32px; border: 1px solid var(--cinza-medio); border-radius: 8px; } .form-box input { width: 100%; padding: 10px; margin-bottom: 14px; border: 1px solid var(--cinza-medio); border-radius: 4px; font-family: 'Poppins', sans-serif; }