/* ========================================================================== UENF Tutorial WordPress — Folha de estilo escopada Todas as regras vivem dentro de .uenf-tutorial-root para não vazar para outras páginas do site que usam o tema institucional. COMPATIBILIDADE COM O TEMA (uenf-geral) — pontos onde precisamos vencer o tema com `!important`/escopo (procure pelos comentários "tema uenf-geral" no arquivo): 1. Item ativo da sidebar/TOC: tema aplica `body a { color: ... !important }` → forçamos `color:#fff !important` (senão fica azul-sobre-azul ilegível). 2. Sticky da sidebar: tema põe `overflow-x:hidden` no (vira scrollport e quebra position:sticky) → `body.page-template-tutorial-3col { overflow:clip }`. Assets versionados por filemtime no enqueue (tutoriais-wordpress.php) → editar este arquivo já invalida o cache; não precisa bump manual de versão. ========================================================================== */ @import url('./fonts.css'); /* Design tokens — fonte de verdade em _design-system/tokens.json. NÃO edite o arquivo importado abaixo à mão; rode _build/build_tokens.py. */ @import url('./_tokens.generated.css'); .uenf-tutorial-root { color: var(--ut-ink); line-height: 1.65; font-size: 15px; } .uenf-tutorial-root * { box-sizing: border-box; } .uenf-tutorial-root a { color: var(--ut-blue); text-decoration: none; } .uenf-tutorial-root a:hover { text-decoration: underline; } /* =========================== BODY (template self-contained) =========================== */ .uenf-tutorial-root { margin: 0; /* Override das variáveis do tema (Twenty Twenty-Four injeta theme.json com `Inter` para body e `Cardo` para heading via !important). Redefinindo aqui no escopo do body do tutorial, todas as regras do tema que usam var(--wp--preset--font-family--*) passam a usar Open Sans. */ --wp--preset--font-family--body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --wp--preset--font-family--heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 15px; line-height: 1.65; color: #1f2937; background: #ffffff; -webkit-font-smoothing: antialiased; } .uenf-tutorial-root * { font-family: inherit; } .uenf-tutorial-root code, .uenf-tutorial-root pre, .uenf-tutorial-root kbd, .uenf-tutorial-root samp { font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace !important; } .uenf-tutorial-root .module-card-meta, .uenf-tutorial-root .status-badge { font-family: 'Roboto', 'Open Sans', sans-serif !important; } .uenf-tutorial-root * { box-sizing: border-box; } .uenf-tutorial-root html { scroll-behavior: smooth; } /* =========================== SITE HEADER =========================== */ .uenf-tutorial-root .site-header { position: sticky; top: 0; z-index: 50; background: #0a4a6b; color: white; height: 64px; box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); } .uenf-tutorial-root .site-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; height: 100%; } .uenf-tutorial-root .brand { display: flex; align-items: center; gap: 12px; color: white; font-weight: 600; font-size: 16px; text-decoration: none; } .uenf-tutorial-root .brand:hover { text-decoration: none; } .uenf-tutorial-root .brand-logo { width: 36px; height: 36px; background: #d4a017; color: #063853; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; } .uenf-tutorial-root .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .uenf-tutorial-root .brand-text small { font-weight: 400; font-size: 11px; opacity: 0.75; } .uenf-tutorial-root .site-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; } .uenf-tutorial-root .site-nav a { color: white; opacity: 0.85; padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; } .uenf-tutorial-root .site-nav a:hover { opacity: 1; background: rgba(255,255,255,0.08); text-decoration: none; } .uenf-tutorial-root .site-nav a.active { opacity: 1; background: rgba(255,255,255,0.12); } /* =========================== SITE FOOTER =========================== */ .uenf-tutorial-root .uenf-tutorial-site-footer { margin-top: 48px; padding: 24px; background: #f8fafc; border-top: 1px solid #e2e8f0; text-align: center; color: #64748b; font-size: 13px; } .uenf-tutorial-root .uenf-tutorial-site-footer-inner { max-width: 1400px; margin: 0 auto; } .uenf-tutorial-root .uenf-tutorial-site-footer p { margin: 0; } /* Compatibilidade com admin bar do WordPress (logado) */ .uenf-tutorial-root.admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .uenf-tutorial-root.admin-bar .site-header { top: 46px; } } /* Mobile: nav vira coluna debaixo do brand */ @media (max-width: 768px) { .uenf-tutorial-root .site-header { height: auto; padding: 12px 0; position: static; } .uenf-tutorial-root .site-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .uenf-tutorial-root .site-nav { margin-left: 0; gap: 2px; } .uenf-tutorial-root .site-nav a { padding: 6px 10px; font-size: 13px; } } /* =========================== LAYOUT =========================== */ /* Sticky da sidebar exige que NENHUM ancestral seja "scroll container". O tema uenf-geral põe `overflow-x: hidden` no , o que o torna um scrollport e desativa o position:sticky da sidebar. `overflow: clip` evita o scroll horizontal SEM criar scrollport. Escopado ao template do tutorial (body.page-template-tutorial-3col) para não alterar as demais páginas. */ body.page-template-tutorial-3col { overflow-x: clip !important; overflow-y: visible !important; } .uenf-tutorial-page { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: var(--ut-sidebar-w) minmax(0, 1fr); gap: 32px; padding: 32px 24px; } .uenf-tutorial-page--no-sidebar { grid-template-columns: minmax(0, 1fr); } .uenf-tutorial-sidebar { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 8px; } /* =========================== SIDEBAR NAV =========================== */ .uenf-tutorial-sidebar-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ut-ink-muted); font-weight: 700; margin: 20px 0 8px 0; padding: 0 12px; } .uenf-tutorial-sidebar-title:first-child { margin-top: 0; } .uenf-tutorial-modules ul { list-style: none; padding: 0; margin: 0; } /* Filhos diretos apenas — não atingir da TOC aninhada (scroll-spy) */ .uenf-tutorial-modules > ul > li > a { display: block; padding: 8px 12px; border-radius: var(--ut-radius); color: var(--ut-ink); font-size: 14px; line-height: 1.4; } .uenf-tutorial-modules > ul > li > a:hover { background: var(--ut-bg-sunken); text-decoration: none; } /* color com !important: o tema uenf-geral injeta `body a { color: var(--link-color) !important }`, que sobreporia o branco do item ativo (fundo azul) deixando texto azul-sobre-azul ilegível. */ .uenf-tutorial-modules > ul > li > a.active { background: var(--ut-blue); color: #fff !important; font-weight: 500; } /* =========================== TOC =========================== */ .uenf-tutorial-toc { margin-top: 4px; } .uenf-tutorial-toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--ut-border); } .uenf-tutorial-toc li a { display: block; padding: 4px 12px; font-size: 13px; color: var(--ut-ink-muted); border-left: 2px solid transparent; margin-left: -2px; line-height: 1.4; } .uenf-tutorial-toc li a:hover { color: var(--ut-ink); text-decoration: none; } .uenf-tutorial-toc li a.active { background: var(--ut-blue); color: #fff !important; border-left-color: var(--ut-blue); border-radius: var(--ut-radius); font-weight: 500; } .uenf-tutorial-toc li a.active:hover { color: #fff !important; } .uenf-tutorial-toc li.level-3 a { padding-left: 24px; font-size: 12.5px; } .uenf-tutorial-toc-loading { color: var(--ut-ink-muted); padding: 4px 12px; font-size: 13px; list-style: none; } /* "Nesta página" como cortina dentro do

ativo (visual de submenu) */ .uenf-tutorial-modules > ul > li > .uenf-tutorial-sidebar-title--nested { font-size: 10px; margin: 10px 0 4px 0; padding-left: 14px; } .uenf-tutorial-modules > ul > li > .uenf-tutorial-toc--nested { margin: 0 0 10px 8px; padding-left: 8px; border-left: 2px solid var(--ut-blue); } .uenf-tutorial-modules > ul > li > .uenf-tutorial-toc--nested ol { border-left: none; padding-left: 0; } .uenf-tutorial-modules > ul > li > .uenf-tutorial-toc--nested li a { padding: 3px 10px; font-size: 13px; border-left: none; margin-left: 0; } /* =========================== CONTENT =========================== */ .uenf-tutorial-content { min-width: 0; max-width: var(--ut-content-max); } .uenf-tutorial-content h1 { font-size: 32px; line-height: 1.2; color: var(--ut-blue); margin: 0 0 12px 0; font-weight: 700; } .uenf-tutorial-content .lead, .uenf-tutorial-content .uenf-tutorial-lead { font-size: 17px; color: var(--ut-ink-muted); margin: 0 0 24px 0; line-height: 1.55; } .uenf-tutorial-content h2 { font-size: 24px; color: var(--ut-blue); margin: 48px 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid var(--ut-border); font-weight: 700; scroll-margin-top: 20px; } .uenf-tutorial-content h3 { font-size: 19px; color: var(--ut-blue-light); margin: 32px 0 12px 0; font-weight: 600; scroll-margin-top: 20px; } .uenf-tutorial-content h4 { font-size: 16px; color: var(--ut-ink); margin: 20px 0 8px 0; font-weight: 600; } .uenf-tutorial-content p { margin: 0 0 16px 0; } .uenf-tutorial-content ul, .uenf-tutorial-content ol { margin: 0 0 20px 0; padding-left: 24px; } .uenf-tutorial-content li { margin: 4px 0; } .uenf-tutorial-content code { font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; background: var(--ut-code-bg); color: var(--ut-code-ink); padding: 1px 6px; border-radius: 3px; font-size: 0.88em; } .uenf-tutorial-content pre { background: var(--ut-bg-alt); border: 1px solid var(--ut-border); border-left: 4px solid var(--ut-blue); padding: 14px 18px; border-radius: var(--ut-radius); font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; font-size: 13px; line-height: 1.55; overflow-x: auto; margin: 20px 0; } .uenf-tutorial-content pre code { background: transparent; color: var(--ut-ink); padding: 0; font-size: inherit; } /* =========================== TABLES =========================== */ .uenf-tutorial-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; border-radius: var(--ut-radius); overflow: hidden; box-shadow: var(--ut-shadow-sm); } .uenf-tutorial-content th { background: var(--ut-blue); color: white; text-align: left; padding: 12px 14px; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; } .uenf-tutorial-content td { padding: 10px 14px; border-bottom: 1px solid var(--ut-border); vertical-align: top; } .uenf-tutorial-content tr:nth-child(even) td { background: var(--ut-bg-alt); } .uenf-tutorial-content tr:last-child td { border-bottom: none; } /* =========================== CALLOUTS =========================== */ .uenf-tutorial-content .callout { margin: 20px 0; padding: 14px 18px; border-radius: var(--ut-radius); border-left: 4px solid; display: flex; gap: 12px; align-items: flex-start; } .uenf-tutorial-content .callout-icon { flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 2px; font-weight: 700; } .uenf-tutorial-content .callout-body { flex: 1; } .uenf-tutorial-content .callout-body p:first-child { margin-top: 0; } .uenf-tutorial-content .callout-body p:last-child { margin-bottom: 0; } .uenf-tutorial-content .callout-body > strong:first-child { display: block; margin-bottom: 4px; } .uenf-tutorial-content .callout.tip { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; } .uenf-tutorial-content .callout.tip .callout-icon { color: #3b82f6; } .uenf-tutorial-content .callout.warn { background: var(--ut-warn-bg); border-color: var(--ut-warn-border); color: var(--ut-warn-ink); } .uenf-tutorial-content .callout.warn .callout-icon { color: var(--ut-warn-border); } .uenf-tutorial-content .callout.info { background: var(--ut-bg-alt); border-color: var(--ut-ink-subtle); color: var(--ut-ink); } .uenf-tutorial-content .callout.info .callout-icon { color: var(--ut-ink-muted); } /* =========================== STEPS =========================== */ .uenf-tutorial-content .steps { counter-reset: step; } .uenf-tutorial-content .step { margin: 24px 0; padding: 20px 22px 20px 60px; background: var(--ut-bg-alt); border-radius: var(--ut-radius-lg); position: relative; counter-increment: step; } .uenf-tutorial-content .step::before { content: counter(step); position: absolute; left: 16px; top: 18px; width: 32px; height: 32px; background: var(--ut-blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: 'JetBrains Mono', monospace; } .uenf-tutorial-content .step-title { font-weight: 600; color: var(--ut-blue); margin: 0 0 8px 0; font-size: 16px; } .uenf-tutorial-content .step p { margin: 0 0 10px 0; } .uenf-tutorial-content .step p:last-child { margin-bottom: 0; } .uenf-tutorial-content .step-result { margin-top: 12px; padding: 10px 14px; background: white; border-left: 3px solid var(--ut-gold); border-radius: var(--ut-radius-sm); font-size: 14px; color: var(--ut-ink-muted); } .uenf-tutorial-content .step-result strong { color: var(--ut-blue); } /* =========================== SCREENSHOTS =========================== */ .uenf-tutorial-content .screenshot { margin: 20px 0 24px 0; border: 1px solid var(--ut-border); border-radius: var(--ut-radius-lg); overflow: hidden; background: var(--ut-bg-alt); box-shadow: var(--ut-shadow); } .uenf-tutorial-content .screenshot img { display: block; width: 100%; height: auto; } .uenf-tutorial-content .screenshot-caption { padding: 10px 16px; font-size: 13px; color: var(--ut-ink-muted); background: white; border-top: 1px solid var(--ut-border); } .uenf-tutorial-content .screenshot-caption strong { color: var(--ut-ink); } .uenf-tutorial-content .step .screenshot { margin-left: -60px; margin-right: -22px; border-radius: 0; border-left: none; border-right: none; } /* Capturas anotadas: SVG sobreposto à com setas/realces. O