Capacitação
<style>
:root {
--decidim-red: #ef0e4b;
--decidim-red-dark: #c2003a;
--decidim-red-light: #fde8ef;
--decidim-dark: #1a1a2e;
--decidim-gray: #6b7280;
--decidim-border: #e5e7eb;
--decidim-surface: #f9fafb;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Source Sans 3", sans-serif;
background-color: #f3f4f6;
color: var(--decidim-dark);
min-height: 100vh;
}
.layout {
display: flex;
max-width: 1200px;
margin: 32px auto;
padding: 0 24px;
gap: 24px;
align-items: flex-start;
}
.sidebar {
width: 220px;
flex-shrink: 0;
background: #fff;
border-radius: 12px;
border: 1px solid var(--decidim-border);
overflow: hidden;
position: sticky;
top: 80px;
}
.sidebar-header {
padding: 16px 18px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--decidim-gray);
border-bottom: 1px solid var(--decidim-border);
}
.sidebar-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
font-size: 14px;
font-weight: 500;
color: #374151;
cursor: pointer;
border-left: 3px solid transparent;
transition:
background 0.12s,
color 0.12s,
border-color 0.12s;
text-decoration: none;
}
.sidebar-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.6;
}
.sidebar-item:hover {
background: var(--decidim-surface);
color: var(--decidim-red);
}
.sidebar-item:hover svg {
opacity: 1;
}
.sidebar-item.active {
background: var(--decidim-red-light);
color: var(--decidim-red);
border-left-color: var(--decidim-red);
font-weight: 600;
}
.sidebar-item.active svg {
opacity: 1;
}
.sidebar-badge {
margin-left: auto;
background: var(--decidim-red-light);
color: var(--decidim-red);
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 20px;
}
.sidebar-item.active .sidebar-badge {
background: rgba(239, 14, 75, 0.15);
}
.main {
flex: 1;
min-width: 0;
width: 100%;
}
.page-header {
margin-bottom: 24px;
}
.page-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--decidim-gray);
margin-bottom: 8px;
}
.page-breadcrumb a {
color: var(--decidim-red);
text-decoration: none;
}
.page-breadcrumb a:hover {
text-decoration: underline;
}
.page-title {
font-family: "Source Serif 4", serif;
font-size: 26px;
font-weight: 700;
color: var(--decidim-dark);
letter-spacing: -0.3px;
}
.page-subtitle {
font-size: 14px;
color: var(--decidim-gray);
margin-top: 4px;
}
.category-card {
background: #fff;
border: 1px solid var(--decidim-border);
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
transition: box-shadow 0.15s;
}
.category-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.category-header {
display: flex;
align-items: center;
padding: 16px 20px;
cursor: pointer;
user-select: none;
gap: 12px;
transition: background 0.12s;
}
.category-header:hover {
background: var(--decidim-surface);
}
.category-info {
flex: 1;
min-width: 0;
}
.category-name {
font-size: 15px;
font-weight: 600;
color: var(--decidim-dark);
}
.category-count {
font-size: 12px;
color: var(--decidim-gray);
margin-top: 1px;
}
.category-chevron {
width: 20px;
height: 20px;
color: var(--decidim-gray);
flex-shrink: 0;
transition: transform 0.2s;
}
transform: rotate(180deg);
}
.category-body {
border-top: 1px solid var(--decidim-border);
padding: 20px;
display: none;
}
display: block;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
}
.item-card {
cursor: pointer;
}
.video-thumb {
width: 100%;
aspect-ratio: 16/9;
background: var(--thumb) no-repeat center/cover;
border-radius: 8px;
border: 1px solid var(--decidim-border);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition:
border-color 0.15s,
transform 0.15s;
}
.item-card:hover .video-thumb {
border-color: var(--decidim-red);
transform: translateY(-2px);
}
.play-btn {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--decidim-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition:
background 0.15s,
border-color 0.15s;
}
.item-card:hover .play-btn {
background: var(--decidim-red);
border-color: var(--decidim-red);
}
.play-icon {
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent var(--decidim-gray);
margin-left: 3px;
transition: border-color 0.15s;
}
.item-card:hover .play-icon {
border-color: transparent transparent transparent #fff;
}
.video-label {
margin-top: 8px;
font-size: 13px;
font-weight: 500;
color: #374151;
line-height: 1.4;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-meta {
font-size: 11px;
color: var(--decidim-gray);
margin-top: 3px;
}
.doc-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.doc-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--decidim-border);
border-radius: 8px;
cursor: pointer;
background: var(--decidim-surface);
transition:
background 0.12s,
border-color 0.12s,
transform 0.12s;
}
.doc-item:hover {
background: #fff;
border-color: var(--decidim-red);
transform: translateX(2px);
}
.doc-info {
flex: 1;
min-width: 0;
}
.doc-name {
font-size: 14px;
font-weight: 600;
color: var(--decidim-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-meta {
font-size: 12px;
color: var(--decidim-gray);
margin-top: 2px;
}
#video-modal {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 99;
display: none;
}
display: flex;
align-items: center;
justify-content: center;
background-color: #00000050;
}
#video-modal iframe[src^="https"] {
width: 50%;
aspect-ratio: 16/9;
}
@media (max-width: 768px) {
.layout {
flex-direction: column;
padding: 0 16px;
margin: 16px auto;
}
.sidebar {
width: 100%;
position: static;
}
#video-modal.open iframe {
width: 80%;
}
}
</style>
<!-- LAYOUT -->
<div class="layout">
<!-- MAIN -->
<div class="main">
<!-- HEADER -->
<div class="page-header">
<h1 class="page-title">Recursos</h1>
<p class="page-subtitle">Acesse documentos, vídeos e materiais de apoio.</p>
</div>
<!-- /header -->
<!-- CARDS -->
<div id="section-itens">
<div class="category-card">
<div class="category-header" onclick="toggleCategory(this)">
<div class="category-info">
<div class="category-name">Conselho Regional</div>
<div class="category-count"></div>
</div>
<svg class="category-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6l4 4 4-4" />
</svg>
</div>
<div class="category-body">
<div class="video-grid">
<div class="item-card">
<div
class="video-thumb"
data-url="https://www.youtube-nocookie.com/embed/Z1wtLlJlXuM?si=Xt4iFHUAunXkuvF5"
style="--thumb: url("https://i.ytimg.com/vi/Z1wtLlJlXuM/maxresdefault.jpg")"
![https://i.ytimg.com/vi/Z1wtLlJlXuM/maxresdefault.jpg"](https://i.ytimg.com/vi/Z1wtLlJlXuM/maxresdefault.jpg"){kind=link}
>
<div class="play-btn">
<div class="play-icon"></div>
</div>
</div>
<div class="video-label">Conheça o SISTEMA MUNICIPAL DE PARTICIPAÇÃO POPULAR E CIDADÃ (SMPPC)</div>
<div class="video-meta">Vídeo</div>
</div>
<a
class="item-card"
>
<div
class="video-thumb"
style="
![https://decidimtreinamento.contagem.mg.gov.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NTMsInB1ciI6ImJsb2JfaWQifX0=--a0e432baceb9e5c94ef655f4da77fa562f370ae4/capacitacao_thumbnail_doc.png"](https://decidimtreinamento.contagem.mg.gov.br/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NTMsInB1ciI6ImJsb2JfaWQifX0=--a0e432baceb9e5c94ef655f4da77fa562f370ae4/capacitacao_thumbnail_doc.png"){kind=link}
"
></div>
<div class="video-label">Manual do conselheiro regional</div>
<div class="video-meta">Documento</div>
</a>
</div>
</div>
</div>
<div class="category-card">
<div class="category-header" onclick="toggleCategory(this)">
<div class="category-info">
<div class="category-name">Capacitação de Gestores</div>
<div class="category-count"></div>
</div>
<svg class="category-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6l4 4 4-4" />
</svg>
</div>
<div class="category-body">
<div class="video-grid">
<a
class="item-card"
>
<div
class="video-thumb"
style="
"
></div>
<div class="video-label">Organização, condução e registro de reuniões</div>
<div class="video-meta">Documento</div>
</a>
</div>
</div>
</div>
</div>
<!-- /cards -->
</div>
</div>
<!-- /layout -->
<!-- VIDEO MODAL -->
<div id="video-modal">
<iframe
src=""
title="Video player"
style="background: #ccc"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
<p>Seu navegador não suporta iframes. Por favor, acesse o site diretamente.</p>
</iframe>
</div>
<!-- /video modal -->
<script>
function toggleCategory(header) {
const body = header.nextElementSibling;
const chevron = header.querySelector(".category-chevron");
const isOpen = body.classList.contains("open");
body.classList.toggle("open", !isOpen);
chevron.classList.toggle("open", !isOpen);
}
document.querySelectorAll("#section-itens .category-card").forEach((cardEl) => {
const childQty = cardEl.querySelectorAll(".item-card").length;
cardEl.querySelector(".category-count").innerText = childQty + " arquivos";
});
function toggleVideoModal(videoUrl) {
const modal = document.getElementById("video-modal");
const iframe = modal.querySelector("iframe");
modal.classList.toggle("open");
iframe.setAttribute("src", videoUrl);
}
document.querySelectorAll("div > .video-thumb").forEach((thumbEl) => {
thumbEl.addEventListener("click", (e) => toggleVideoModal(thumbEl.dataset.url));
});
document.getElementById("video-modal").addEventListener("click", (e) => toggleVideoModal(""));
</script>