/* Anais overrides leveraging global design system */ /* Content typography refinements (focus only on article page) */ /* Mantém cores do design system; ajusta tipografia/medidas para leitura confortável */ @import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,700&display=swap'); /* Container refinado apenas para páginas de ARTIGO (escopo via atributo do ) */ html[data-article-id] .page{ padding:24px 0 36px } html[data-article-id] .container{ width:min(100% - 2rem, var(--container, 1120px)); margin-inline:auto } /* Unify all boxes width to match reading column */ /* Outer box sets the width; inner body should not constrain width */ html[data-article-id] .section-box{ max-width:72ch !important; width:100%; margin-inline:auto } html[data-article-id] .section-box .section-box-body{ max-width:none; margin-inline:0 } /* Reading content width is controlled by section-box-body to keep all box borders aligned */ /* Use Literata for all text inside section boxes on article pages (but keep the box itself unstyled so 72ch width is measured with the default font). This ensures headings like "Introdução", "Como citar", "Sumário" and general metadata text render in Literata. */ html[data-article-id] .section-box .section-box-body, html[data-article-id] .section-box h1, html[data-article-id] .section-box h2, html[data-article-id] .section-box h3, html[data-article-id] .section-box .section-toggle{ font-family:"Literata", Georgia, "Times New Roman", serif; } /* Generic section box */ .section-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:0;margin:18px auto;box-shadow:var(--shadow-sm);max-width:72ch;transition:background-color var(--transition-fast), border-color var(--transition-fast)} .section-box a{text-decoration:none !important} .section-box a:hover,.section-box a:focus{ text-decoration:none !important } /* Realce de leitura (hover) apenas na página de artigo */ html[data-article-id]{ --read-hover: rgba(255,193,7,.10) } @media (prefers-color-scheme: dark){ html[data-article-id]{ --read-hover: rgba(255,193,7,.18) } } html[data-article-id] .section-box:hover{ background: var(--read-hover) } /* Intro meta badges (ano/eixo) — usar paleta azul primária, não vermelho */ .article-intro .intro-left .badge{ background: rgba(var(--color-primary-rgb),.12) !important; color: var(--color-primary) !important; border-color: rgba(var(--color-primary-rgb),.22) !important; border-radius: 999px } .article-intro .intro-left .badge, .article-intro .intro-left .badge-axis{ font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; line-height:1; padding:.25rem .6rem; border-radius:999px; } .article-intro .intro-left .badge-axis{ background: rgba(var(--color-primary-rgb),.12) !important; color: var(--color-primary) !important; border-color: rgba(var(--color-primary-rgb),.22) !important } /* Tempo de leitura já é azul por .badge-time */ /* Botão "voltar ao topo" — azul com degradê */ html[data-article-id] .back-to-top{ background: linear-gradient(45deg, var(--color-primary-600), var(--color-primary)) !important; border-color: var(--color-primary-600) !important; color: var(--color-inverse) !important; } html[data-article-id] .back-to-top:hover{ background: linear-gradient(45deg, var(--color-primary-700), var(--color-primary-500)) !important; } /* Botão "Solicitar ajuste" — azul com degradê */ .ajuste-box .btn-feedback{ background: linear-gradient(45deg, var(--color-primary-600), var(--color-primary)) !important; border-color: var(--color-primary-600) !important; color: #fff !important; box-shadow: 0 2px 8px -2px rgba(var(--color-primary-rgb),.45) !important; } .ajuste-box .btn-feedback:hover{ background: linear-gradient(45deg, var(--color-primary-700), var(--color-primary-500)) !important; text-decoration: none !important; } /* Apenas o hover do CONHEÇA TAMBÉM (no artigo) em azul com degradê; demais boxes ficam com amarelo suave */ html[data-article-id] .conheca-box:hover{ background: linear-gradient(145deg, rgba(var(--color-primary-rgb),.10), rgba(var(--color-primary-rgb),.20)) !important; } /* Refina também o comportamento do box CONHEÇA TAMBÉM (garante que não sublinhe) Colocado aqui (overrides) para vencer a cascata do anais.css */ .conheca-box a{ text-decoration:none !important } .conheca-box a:hover, .conheca-box a:focus{ text-decoration:none !important } .conheca-box a:hover .conheca-main{ text-decoration:none !important } /* Lista geral dos anais: evitar sublinhado nos títulos dos cards */ .list a.title:hover, a.title:hover{ text-decoration:none !important } .section-box-body{padding:16px 18px} .section-box h2{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 .85rem;font-size:1.1rem;letter-spacing:.02em;font-weight:600} .section-box h2 .icon{display:inline-flex} .section-box h2 .icon svg{width:18px;height:18px} /* Banner */ .banner-box .banner-img{display:block;width:100%;height:auto;border-radius:12px} /* Intro meta */ .intro-meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin:.1rem 0 .4rem} .intro-left{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} .badge-time{background:rgba(var(--color-primary-rgb),.12);color:var(--color-primary)} .intro-extra .resumo-block{margin-top:.6rem} .intro-extra .resumo-text{ text-align: justify } /* Author line emphasis */ .article-intro .autoria{ font-weight:700 } .notice.warning{padding:1rem;border:1px solid #d99;background:#fff8e5;border-radius:6px} .text-muted{color:var(--color-text-soft)} /* Print button */ .intro-actions{display:flex;align-items:center;gap:.6rem} .btn-print{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface);font:inherit;font-weight:700;font-size:.8rem;cursor:pointer} .btn-print:hover{background:rgba(var(--color-primary-rgb),.08)} .btn-print .icon svg{width:18px;height:18px} /* TOC inside section */ .toc-section .toc-box{border:none;box-shadow:none;padding:.2rem 0;margin:.4rem 0 0} .toc-section .toc-box a{font-size:.88rem;text-decoration:none} .toc-section .toc-box a:hover,.toc-section .toc-box a:focus{ text-decoration:none } .toc-section .toc-box ul{list-style:none;margin:0;padding:0} .toc-section .toc-box li{padding:.12rem .25rem;border-radius:8px;transition:background-color var(--transition-fast)} /* Sumário: não aplicar fundo no hover para não "branquear" o box */ .toc-section .toc-box li:hover{background:transparent} /* Desativa o realce de fundo no hover especificamente para o box do Sumário */ html[data-article-id] .toc-section:hover{ background: var(--color-surface) !important } /* Citation action */ .citation-box .citation-actions{margin-top:.6rem} .btn-copy-citation{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface);font:inherit;font-weight:700;font-size:.8rem;cursor:pointer} .btn-copy-citation:hover{background:rgba(var(--color-primary-rgb),.08)} .btn-copy-citation.is-copied{background:rgba(27,142,62,.10);border-color:var(--color-success);color:var(--color-success)} /* Ajuste CTA */ .ajuste-body{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} .btn-feedback{--_bg:var(--color-secondary);--_bg-hover:var(--color-secondary-800);--_ink:#fff;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .95rem;border-radius:12px;border:1px solid var(--_bg);background:var(--_bg);color:var(--_ink);font-size:.8rem;font-weight:800;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 8px -2px rgba(var(--color-secondary-rgb),.45);transition:var(--transition-fast)} .btn-feedback:hover{background:var(--_bg-hover);border-color:var(--_bg-hover);text-decoration:none} /* Collapsible content sections */ .content-section .section-toggle{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;padding:.2rem .2rem;border-radius:8px} .content-section .section-toggle:focus-visible{outline:3px solid var(--color-focus-outline);outline-offset:2px} .content-section .chev{margin-left:.25rem;transition:transform .2s ease} .section-box .section-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)} .content-section .section-content{margin-top:.3rem} .content-section.collapsed .section-content{display:none} @media (max-width:720px){ .section-box{margin:14px 0} .section-box-body{padding:14px} } /* Article reading block */ .article{max-width:72ch;margin:10px auto 0;font-size:1.0rem;line-height:1.7;font-family:"Literata", Georgia, "Times New Roman", serif;} .article, .toc-box{ font-feature-settings: "liga" 1, "clig" 1, "kern" 1, "onum" 1, "pnum" 1; -webkit-font-feature-settings: "liga" 1, "clig" 1, "kern" 1, "onum" 1, "pnum" 1; font-variant-ligatures: common-ligatures contextual; font-kerning: normal; hyphens: auto; } .article :where(h1,h2,h3){font-family:"Literata", Georgia, "Times New Roman", serif; color:var(--color-text)} .article h1{font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2rem); line-height:1.25} .article h2{margin-top: 1.25rem; font-size: 1.25rem; line-height:1.3; font-weight:600} .article h3{margin-top: .9rem; font-size: 1.06rem; line-height:1.3; font-weight:600} .article p{margin: .75rem 0} .article ul, .article ol{padding-left: 1.2rem; margin: .6rem 0 .9rem} .article blockquote{ margin: .9rem 0; padding: .6rem .9rem; background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); border-radius: 8px; color: var(--color-text); } .article figure{margin: 1rem auto; text-align:center} .article figcaption{font-size:.9rem; color:var(--color-text-soft); margin-top:.25rem} .article table{ width:100%; border-collapse: collapse; margin: .9rem 0; font-size:.96rem } .article table th, .article table td{ border:1px solid var(--color-border); padding:.5rem .6rem; vertical-align: top; text-align:left } .article table tr:nth-child(even){ background: var(--color-bg-alt) } /* TOC */ .toc-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:1rem 1.1rem;margin:1.9rem 0 1.6rem;box-shadow:var(--shadow-sm)} .toc-box .kicker{font-size:.65rem;letter-spacing:.08em;font-weight:700;color:var(--color-primary);text-transform:uppercase;margin-bottom:.5rem;font-variant-caps:small-caps} .toc-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem} .toc-box a{font-size:.8rem;font-weight:600;color:var(--color-text-soft);text-decoration:none} .toc-box a:hover{color:var(--color-primary);text-decoration:underline} /* Utility badges */ .badge-warn{background:var(--color-warning);color:#111} /* Suggestion spacing tweak (base styling in global.css) */ .conheca-box{margin:32px 0 30px} /* When used as section-box at article end */ .section-box.conheca-box h2{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 .85rem;font-size:1.1rem;letter-spacing:.02em;font-weight:600} .section-box.conheca-box h2 .icon svg{width:18px;height:18px} .section-box.conheca-box a{display:flex;flex-direction:column;gap:.25rem;text-decoration:none} .section-box.conheca-box a:hover{text-decoration:underline} .section-box.conheca-box .conheca-main{font-weight:600} .section-box.conheca-box .conheca-authors{color:var(--color-text-soft)} /* Feedback button temporary variant */ .btn-feedback{--_bg:var(--color-secondary);--_bg-hover:var(--color-secondary-800);--_ink:#fff;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .95rem;border-radius:12px;border:1px solid var(--_bg);background:var(--_bg);color:var(--_ink);font-size:.62rem;letter-spacing:.08em;font-weight:800;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 8px -2px rgba(var(--color-secondary-rgb),.45);transition:var(--transition-fast)} .btn-feedback:hover{background:var(--_bg-hover);border-color:var(--_bg-hover);text-decoration:none} .btn-feedback:focus-visible{outline:3px solid var(--color-focus-outline);outline-offset:2px} /* Like button micro adjustment in article header */ .like-btn-wrapper .like-btn{margin-left:.25rem} /* Ensure readable like button on article pages (mobile-safe) */ html[data-article-id] .like-btn{ --_bg:#fff; --_bd:var(--color-border); --_ink:var(--color-text-soft); --_ink-active:#fff; /* when liked */ --_accent:var(--color-primary); --_accent-hover:var(--color-primary-600); --_accent-active:var(--color-primary-700); background:var(--_bg) !important; border-color:var(--_bd) !important; color:var(--_ink) !important; } /* Keep strong contrast when liked */ html[data-article-id] .like-btn.is-liked{ background:var(--_accent) !important; border-color:var(--_accent) !important; color:var(--_ink-active) !important; } /* Apply Literata to inner reading content, not the outer box, to keep ch-based widths consistent */ .content-section .section-content, .content-section .section-content :where(p,li,blockquote,table,figcaption), .article-intro .title{font-family:"Literata", Georgia, "Times New Roman", serif} .content-section .section-content :where(h1,h2,h3){font-family:"Literata", Georgia, "Times New Roman", serif; color:var(--color-text)} .content-section .section-content p{margin:.75rem 0; line-height:1.7} .content-section .section-content ul, .content-section .section-content ol{padding-left:1.2rem; margin:.6rem 0 .9rem} .content-section .section-content blockquote{margin:.9rem 0; padding:.6rem .9rem; background:var(--color-bg-alt); border-left:4px solid var(--color-primary); border-radius:8px; color:var(--color-text)} .content-section .section-content table{width:100%; border-collapse:collapse; margin:.9rem 0; font-size:.96rem} .content-section .section-content table th, .content-section .section-content table td{border:1px solid var(--color-border); padding:.5rem .6rem; vertical-align:top; text-align:left} .content-section .section-content table tr:nth-child(even){background:var(--color-bg-alt)} /* Print rules */ @media print{ /* Ensure full document prints on mobile: no clipping by overflow */ html, body{ overflow:visible !important; height:auto !important } /* Hide header and interactive UI */ .site-header, .back-to-top, .like-btn, .btn-feedback, .btn-copy-citation, .ajuste-box, .mobile-nav, #mobile-menu, .nav-backdrop{ display:none !important } /* Expand all sections */ .content-section{ display:block !important; max-height:unset !important; overflow:visible !important } .content-section .section-content{ display:block !important; overflow:visible !important } .section-toggle{ pointer-events:none; cursor:default } .section-toggle .chev{ display:none } /* Ensure full-width boxes use readable width on paper */ html[data-article-id] .section-box .section-box-body{ max-width:85ch } /* Content pagination and readability */ .section-box{ overflow:visible !important; page-break-inside: avoid; break-inside: avoid } .article{ overflow:visible !important } h2, h3{ page-break-after: avoid; break-after: avoid-page } img, table, blockquote, pre{ page-break-inside: avoid; break-inside: avoid } p, li{ orphans:3; widows:3 } /* Page margins and pagination */ @page{ margin:20mm } .print-pagination{ position:fixed; bottom:0; left:0; right:0; text-align:center; font-size:12px; color:#666 } .print-pagination::after{ content: "Página " counter(page) " de " counter(pages) } } /* ===================== Feedback form (Anais) ===================== */ /* Container and headings */ .feedback-wrapper{max-width:900px;margin:32px auto 60px} .feedback-wrapper h1{font-size:1.9rem;margin:.2rem 0 1.2rem} .form-note{color:var(--color-text-soft);font-size:.95rem;margin:-.6rem 0 1.4rem} /* Fields */ .field{margin:0 0 1.05rem} .field-group{display:flex;flex-wrap:wrap;gap:1rem} .field label{font-weight:600;display:block;margin:0 0 .25rem;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-soft)} .field input[type=text], .field input[type=email], .field textarea, .field select{ width:100%;padding:.65rem .7rem;border:1px solid var(--color-border);border-radius:10px;background:#fff;font:inherit;font-size:.96rem;color:var(--color-text) } .field textarea{min-height:140px;resize:vertical;line-height:1.45} .options-inline{display:flex;flex-wrap:wrap;gap:.65rem .9rem;font-size:.9rem} .options-inline label{font-weight:500;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--color-text)} .error-msg{color:#b4231e;font-size:.75rem;margin:.3rem 0 0;font-weight:600} .error-summary{border:1px solid #b4231e;background:#fef3f2;color:#601410;padding:.85rem 1rem;border-radius:10px;margin:0 0 1.3rem} fieldset{border:1px solid var(--color-border);padding:1rem 1.1rem 1.2rem;border-radius:14px;margin:0 0 1.2rem;min-width:0;background:var(--color-surface)} fieldset legend{padding:0 .5rem;font-weight:800;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-soft)} .required-star{color:var(--color-primary);margin-left:2px} .attach-hint{font-size:.75rem;color:var(--color-text-soft);margin-top:.25rem} .hint{font-size:.72rem;color:var(--color-text-soft);font-weight:500;margin-top:.2rem} .hidden{display:none !important} /* File input */ .file-input{border:1px dashed var(--color-border);padding:.8rem .9rem;border-radius:12px;background:#fff} /* Steps progress */ .steps-progress{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0 0 1.4rem} .steps-progress li{flex:1 1 0;min-width:130px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:.55rem .7rem;display:flex;align-items:center;gap:.6rem;position:relative;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-soft);line-height:1.1} .steps-progress .num{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;background:var(--color-primary-100);color:var(--color-text);border:1px solid var(--color-border);font-size:.78rem} .steps-progress li[aria-current="step"], .steps-progress li.active{border-color:var(--color-primary);color:var(--color-primary);background:#fff} .steps-progress li[aria-current="step"] .num, .steps-progress li.active .num{background:var(--color-primary);color:#fff;border-color:var(--color-primary)} /* Wizard steps */ .form-step{display:none;animation:fadeIn .28s ease} .form-step.active{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .step-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:.4rem 0 1.2rem} .step-nav .spacer{flex:1} /* Buttons */ .btn-secondary{background:#fff;border:1px solid var(--color-border);color:var(--color-text);padding:.65rem .95rem;border-radius:10px;font-weight:700;cursor:pointer;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase} .btn-secondary:hover{background:var(--color-primary-50)} .btn-next{background:var(--color-primary);border:1px solid var(--color-primary);color:#fff;padding:.7rem 1.1rem;border-radius:12px;font-weight:800;cursor:pointer;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase} .btn-next:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)} .btn-submit{padding:.75rem 1.1rem;border:1px solid var(--color-primary);background:var(--color-primary);color:#fff;font-weight:800;border-radius:12px;font-size:.9rem;cursor:pointer;letter-spacing:.04em} .btn-submit:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)} @media (max-width:720px){ .steps-progress li{flex:1 1 calc(50% - .6rem)} .field-group{flex-direction:column} }