/* ========================================================================== SPELL — Software Process and Education Lab (DCC/UFLA) Design System — css/style.css HTML5 semântico + CSS3 puro. Mobile-first. WCAG 2.1 AA. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Cores (identidade oficial — extraídas do logo do SPELL: chama teal, miolo dourado e wordmark verde) */ --color-primary: #006982; /* teal — contorno da chama do logo */ --color-secondary: #407724; /* verde — wordmark "Spell" (ajustado p/ contraste AA) */ --color-accent: #EBB000; /* dourado — miolo da chama (uso decorativo/realce) */ --color-text: #0B2027; --color-bg: #F6FAFA; --color-surface: #FFFFFF; --color-border: #DCE8E8; /* Cores derivadas / semânticas */ --color-primary-hover: #00596E; --color-primary-light: #39A4AF; /* teal claro — gotas decorativas do logo */ --color-hero-gradient-end: #0D7A8E; /* stop mais escuro que --color-primary-light — garante contraste AA (4.5:1+) do texto branco no hero em toda a extensão do degradê */ --color-secondary-hover: #35621E; --color-accent-dark: #8A6600; /* variante escura do dourado, segura p/ texto pequeno */ --color-text-muted: #52696D; --color-text-inverse: #F8FAFC; --color-success: #15803D; --color-danger: #B91C1C; --color-focus: #407724; --color-link: var(--color-secondary); /* Tipografia */ --font-main: 'Inter', system-ui, -apple-system, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 2.75rem; --lh-base: 1.6; --lh-tight: 1.25; /* Espaçamento */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; /* Bordas / sombras */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.15); /* Layout */ --container-max: 1200px; --header-height: 72px; --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* Tema escuro — alternância via atributo data-theme no , controlado por js/main.js Tons mais claros/saturados de teal e verde para manter contraste AA sobre fundo escuro; texto em botões passa a ser escuro (mais legível sobre cores vivas do que branco). */ [data-theme="dark"] { --color-primary: #39A4AF; --color-secondary: #7CC154; --color-accent: #EBB000; --color-text: #E6F1F1; --color-bg: #07171A; --color-surface: #0F2226; --color-border: #1B3236; --color-primary-hover: #4FB8C4; --color-primary-light: #6FC7D1; --color-hero-gradient-end: #6FC7D1; /* no dark mode o texto do hero já é escuro (--color-text-inverse), então o degradê original mantém contraste AA */ --color-secondary-hover: #93D06E; --color-accent-dark: #F5C542; --color-text-muted: #9FB8BC; --color-text-inverse: #071219; --color-focus: #7CC154; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.6); } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-main); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); background-color: var(--color-bg); min-height: 100vh; transition: background-color var(--transition-base), color var(--transition-base); } img, picture, svg { max-width: 100%; display: block; } img { height: auto; } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-secondary-hover); } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 700; color: var(--color-text); } /* Foco visível — acessibilidade (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Skip link */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-3) var(--space-5); z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. LAYOUT / CONTAINERS -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-8); } .section-header { max-width: 640px; margin-bottom: var(--space-6); } .section-header .eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-2); } .section-header h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); } .section-header p { color: var(--color-text-muted); font-size: var(--fs-md); } .section-alt { background-color: var(--color-surface); border-block: 1px solid var(--color-border); } /* -------------------------------------------------------------------------- 4. BOTÕES -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600; font-size: var(--fs-base); text-decoration: none; border: 2px solid transparent; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--color-primary); color: var(--color-text-inverse); } .btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-text-inverse); } .btn-secondary { background-color: transparent; border-color: var(--color-surface); color: var(--color-text-inverse); } .btn-secondary:hover { background-color: rgba(255,255,255,0.12); color: var(--color-text-inverse); } .btn-outline { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn-outline:hover { background-color: var(--color-primary); color: var(--color-text-inverse); } .btn-block { width: 100%; } /* -------------------------------------------------------------------------- 5. HEADER / NAVEGAÇÃO -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-4); } .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); flex-shrink: 0; } .brand img { height: 40px; width: auto; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text strong { font-size: var(--fs-md); font-weight: 800; color: var(--color-primary); } .brand-text span { font-size: var(--fs-xs); color: var(--color-text-muted); } /* Navegação principal */ .main-nav { position: fixed; inset: var(--header-height) 0 0 0; background-color: var(--color-surface); overflow-y: auto; transform: translateX(100%); transition: transform var(--transition-base); border-top: 1px solid var(--color-border); } .main-nav.is-open { transform: translateX(0); } .nav-list { display: flex; flex-direction: column; padding: var(--space-4); } .nav-list a { display: block; padding: var(--space-4) var(--space-2); text-decoration: none; color: var(--color-text); font-weight: 600; border-bottom: 1px solid var(--color-border); } .nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--color-secondary); } .header-actions { display: flex; align-items: center; gap: var(--space-3); } /* Botão hamburguer */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border-radius: var(--radius-sm); } .nav-toggle:hover { background-color: var(--color-bg); } .nav-toggle-bar { display: block; width: 22px; height: 2px; background-color: var(--color-text); transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Alternador de tema */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); font-size: var(--fs-md); } .theme-toggle:hover { background-color: var(--color-bg); } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (min-width: 768px) { .nav-toggle { display: none; } .main-nav { position: static; inset: auto; transform: none; background: none; border-top: none; overflow: visible; } .nav-list { flex-direction: row; padding: 0; gap: var(--space-5); } .nav-list a { padding: var(--space-2) 0; border-bottom: none; position: relative; } .nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background-color: var(--color-secondary); transform: scaleX(0); transition: transform var(--transition-fast); } .nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 6. HERO -------------------------------------------------------------------------- */ .hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-hero-gradient-end) 100%); color: var(--color-text-inverse); padding-block: var(--space-8); } .hero-inner { display: grid; gap: var(--space-6); align-items: center; } .hero-content h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); color: var(--color-text-inverse); } .hero-content p { font-size: var(--fs-md); color: var(--color-text-inverse); margin-bottom: var(--space-6); max-width: 60ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } @media (min-width: 900px) { .hero-inner { grid-template-columns: 1.2fr 1fr; } } /* -------------------------------------------------------------------------- 7. CARDS — PILARES -------------------------------------------------------------------------- */ .card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } .pillar-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .pillar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .pillar-card .pillar-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background-color: color-mix(in srgb, var(--color-secondary) 15%, transparent); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xl); margin-bottom: var(--space-4); } .pillar-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); } .pillar-card p { color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 8. MÉTRICAS -------------------------------------------------------------------------- */ .metrics-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); text-align: center; } @media (min-width: 640px) { .metrics-grid { grid-template-columns: repeat(3, 1fr); } } .metric-item .metric-number { font-size: var(--fs-3xl); font-weight: 800; color: var(--color-primary); display: block; font-variant-numeric: tabular-nums; } .metric-item .metric-label { color: var(--color-text-muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; } /* -------------------------------------------------------------------------- 9. SEMINÁRIOS — FEED -------------------------------------------------------------------------- */ .seminar-list { display: flex; flex-direction: column; gap: var(--space-4); } .seminar-item { display: flex; gap: var(--space-4); align-items: flex-start; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); } .seminar-date { flex-shrink: 0; width: 64px; text-align: center; /* Dourado do miolo da chama do logo — texto escuro garante contraste AA */ background-color: var(--color-accent); color: var(--color-text); border-radius: var(--radius-sm); padding: var(--space-2); } .seminar-date .day { display: block; font-size: var(--fs-lg); font-weight: 800; line-height: 1; } .seminar-date .month { display: block; font-size: var(--fs-xs); text-transform: uppercase; } .seminar-info h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); } .seminar-info p { color: var(--color-text-muted); font-size: var(--fs-sm); } .seminar-info .seminar-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-secondary); } /* -------------------------------------------------------------------------- 10. RODAPÉ INSTITUCIONAL -------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-text); color: var(--color-text-inverse); padding-block: var(--space-7) var(--space-5); margin-top: var(--space-8); } [data-theme="dark"] .site-footer { background-color: #05070C; } .footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand p { color: rgba(248,250,252,0.75); margin-top: var(--space-3); max-width: 45ch; } .footer-brand strong { color: rgba(248,250,252,0.6); } .footer-col h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(248,250,252,0.6); margin-bottom: var(--space-3); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); } .footer-col a { color: rgba(248,250,252,0.85); text-decoration: none; } .footer-col a:hover { color: var(--color-text-inverse); text-decoration: underline; } .footer-institutions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid rgba(248,250,252,0.15); } .footer-institutions img { height: 48px; width: auto; opacity: 0.9; } .footer-institutions-text { font-size: var(--fs-sm); color: rgba(248,250,252,0.75); border-left: 1px solid rgba(248,250,252,0.25); padding-left: var(--space-4); } .footer-bottom { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid rgba(248,250,252,0.15); font-size: var(--fs-xs); color: rgba(248,250,252,0.6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* -------------------------------------------------------------------------- 11. PUBLICAÇÕES — BUSCA, FILTROS E LISTA -------------------------------------------------------------------------- */ .publications-toolbar, .filter-toolbar { display: flex; flex-direction: column; gap: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); } @media (min-width: 768px) { .publications-toolbar, .filter-toolbar { flex-direction: row; align-items: flex-end; } } .search-field { flex: 2; display: flex; flex-direction: column; gap: var(--space-2); } .filter-field { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } .field-label { font-size: var(--fs-sm); font-weight: 600; } .search-input-wrap { position: relative; } .search-input-wrap svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-muted); } input[type="text"], input[type="search"], input[type="email"], input[type="tel"], select, textarea { width: 100%; padding: 0.65rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-bg); color: var(--color-text); } .search-input-wrap input { padding-left: 2.5rem; } input:focus, select:focus, textarea:focus { border-color: var(--color-secondary); } .results-count { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); } .results-count strong { color: var(--color-text); } .publication-list { display: flex; flex-direction: column; gap: var(--space-4); } .publication-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); } .publication-card .pub-type { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: var(--space-2); } .publication-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-2); } .publication-card .pub-authors { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-1); } .publication-card .pub-venue { color: var(--color-text-muted); font-size: var(--fs-sm); font-style: italic; margin-bottom: var(--space-3); } .publication-card .pub-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .pub-actions button, .pub-actions a { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-1); } .pub-actions button:hover, .pub-actions a:hover { text-decoration: underline; } .bibtex-block { display: none; margin-top: var(--space-3); padding: var(--space-4); background-color: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); font-family: 'Courier New', monospace; font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-word; } .bibtex-block.is-visible { display: block; } .empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); } .empty-state[hidden] { display: none; } /* -------------------------------------------------------------------------- 12. FORMULÁRIOS (contato / junte-se) -------------------------------------------------------------------------- */ .form-grid { display: grid; gap: var(--space-4); } .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .form-group label { font-weight: 600; font-size: var(--fs-sm); } .required-mark { color: var(--color-danger); } .form-error { font-size: var(--fs-xs); color: var(--color-danger); display: none; } .form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--color-danger); } .form-group.has-error .form-error { display: block; } .form-status { padding: var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); display: none; } .form-status.is-success { display: block; background-color: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); } .form-status.is-error { display: block; background-color: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); } .form-status.is-pending { display: block; background-color: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); } /* -------------------------------------------------------------------------- 13. SOBRE — VALORES E SELO OFICIAL -------------------------------------------------------------------------- */ .value-card { text-align: center; } .value-card .pillar-icon { margin-inline: auto; } .value-card h3 { font-size: var(--fs-md); } .brand-showcase { display: flex; justify-content: flex-start; margin-block: var(--space-6); } .brand-showcase img { width: 100%; max-width: 340px; height: auto; } .official-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); } .official-badge .badge-icon { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background-color: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-dark); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); } .official-badge h3 { margin-bottom: var(--space-2); } .official-badge p { color: var(--color-text-muted); margin-bottom: var(--space-3); } /* -------------------------------------------------------------------------- 14. PROJETOS — ÁREAS E FICHAS -------------------------------------------------------------------------- */ .project-area { margin-bottom: var(--space-8); } .project-area-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-border); } .project-area-header h2 { font-size: var(--fs-xl); } .project-area-header .area-count { font-size: var(--fs-sm); color: var(--color-text-muted); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem 0.75rem; } /* .projects-grid é o CONTAINER (id="projects-grid") usado como raiz de busca pelo JS (initProjectsPage em js/main.js); o layout em grade de cada área fica em .project-cards-grid, para não confundir id x classe. */ .project-cards-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 720px) { .project-cards-grid { grid-template-columns: repeat(2, 1fr); } } .project-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); } .project-card h3 { font-size: var(--fs-md); margin: var(--space-2) 0 var(--space-3); } .project-card .project-summary { color: var(--color-text-muted); margin-bottom: var(--space-4); } .project-meta { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); border-top: 1px solid var(--color-border); padding-top: var(--space-3); } .project-meta dt { font-weight: 600; display: inline; } .project-meta dd { display: inline; margin: 0; color: var(--color-text-muted); } .project-meta div + div { margin-top: var(--space-1); } /* -------------------------------------------------------------------------- 15. EQUIPE — CARDS DE MEMBROS -------------------------------------------------------------------------- */ .team-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-bottom: var(--space-8); } @media (min-width: 560px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } .team-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: center; } .avatar-placeholder { width: 88px; height: 88px; margin: 0 auto var(--space-4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 800; color: var(--color-text-inverse); background-color: var(--color-primary); } .avatar-placeholder.tone-secondary { background-color: var(--color-secondary); } .avatar-placeholder.tone-accent { background-color: var(--color-accent); color: var(--color-text); } .avatar-placeholder.tone-primary-light { background-color: var(--color-primary-light); } .team-avatar { width: 88px; height: 88px; margin: 0 auto var(--space-4); border-radius: 50%; object-fit: cover; display: block; } .team-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); } .team-card .team-role { font-size: var(--fs-sm); color: var(--color-secondary); font-weight: 600; margin-bottom: var(--space-3); } .team-card .team-bio { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); } .team-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); } .team-links a { font-weight: 600; text-decoration: none; } .team-links a:hover { text-decoration: underline; } .team-section-title { font-size: var(--fs-xl); margin-bottom: var(--space-5); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); } /* -------------------------------------------------------------------------- 16. RECURSOS — VITRINE -------------------------------------------------------------------------- */ .resource-card { display: flex; flex-direction: column; gap: var(--space-5); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); } @media (min-width: 800px) { .resource-card { flex-direction: row; align-items: center; } } .resource-card .resource-visual { flex-shrink: 0; width: 100%; max-width: 220px; aspect-ratio: 1; margin-inline: auto; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); display: flex; align-items: center; justify-content: center; font-size: 4rem; } @media (min-width: 800px) { .resource-card .resource-visual { margin-inline: 0; } } .resource-card .resource-content h2, .resource-card .resource-content h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); } .resource-card .resource-content p { color: var(--color-text-muted); margin-bottom: var(--space-4); } .resource-card .resource-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .resource-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .resource-tag-list li { font-size: var(--fs-xs); font-weight: 600; background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent); color: var(--color-secondary-hover); padding: 0.2rem 0.65rem; border-radius: 999px; } /* -------------------------------------------------------------------------- 17. SEMINÁRIOS — TABELA E ACERVO -------------------------------------------------------------------------- */ .schedule-banner { display: flex; align-items: center; gap: var(--space-4); background-color: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); } .schedule-banner .schedule-icon { font-size: var(--fs-2xl); } .schedule-banner strong { display: block; } .schedule-banner span { color: var(--color-text-muted); font-size: var(--fs-sm); } .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-7); } .seminars-table { width: 100%; min-width: 560px; } .seminars-table th, .seminars-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); } .seminars-table thead th { background-color: var(--color-surface); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .seminars-table tbody tr:last-child td { border-bottom: none; } .seminars-table tbody tr:hover { background-color: var(--color-bg); } .archive-list { display: flex; flex-direction: column; gap: var(--space-3); } .archive-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); } .archive-item .archive-title { font-weight: 600; } .archive-item .archive-date { font-size: var(--fs-sm); color: var(--color-text-muted); } /* -------------------------------------------------------------------------- 18. JUNTE-SE — TRILHAS DE INGRESSO -------------------------------------------------------------------------- */ .pathway-card .pathway-steps { margin-top: var(--space-3); padding-left: var(--space-5); list-style: decimal; color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-1); } .pathway-card .pathway-steps li { padding-left: var(--space-1); } /* -------------------------------------------------------------------------- 19. CONTATO — INFORMAÇÕES E FORMULÁRIO -------------------------------------------------------------------------- */ .contact-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.4fr; } } .contact-info-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); height: fit-content; } .contact-info-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); } .contact-info-item:last-child { margin-bottom: 0; } .contact-info-item .contact-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); background-color: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); } .contact-info-item h3 { font-size: var(--fs-base); margin-bottom: var(--space-1); } .contact-info-item p { color: var(--color-text-muted); font-size: var(--fs-sm); } .contact-form-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); } /* -------------------------------------------------------------------------- 20. UTILITÁRIOS -------------------------------------------------------------------------- */ .text-center { text-align: center; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mb-4 { margin-bottom: var(--space-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* -------------------------------------------------------------------------- 21. NUVEM DE PALAVRAS (HOME) -------------------------------------------------------------------------- */ .word-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-4) var(--space-5); list-style: none; padding: 0; margin: 0; text-align: center; } .cloud-word { line-height: 1.25; transition: color 0.15s ease; } .cloud-word--xl { font-size: var(--fs-3xl); font-weight: 800; } .cloud-word--lg { font-size: var(--fs-2xl); font-weight: 700; } .cloud-word--md { font-size: var(--fs-xl); font-weight: 700; } .cloud-word--sm { font-size: var(--fs-lg); font-weight: 600; } .cloud-word--primary { color: var(--color-primary); } .cloud-word--secondary { color: var(--color-secondary); } .cloud-word--accent { color: var(--color-accent-dark); } @media (max-width: 600px) { .cloud-word--xl { font-size: var(--fs-2xl); } .cloud-word--lg { font-size: var(--fs-xl); } .cloud-word--md { font-size: var(--fs-lg); } .cloud-word--sm { font-size: var(--fs-md); } } /* -------------------------------------------------------------------------- 22. BASE DE CONHECIMENTO -------------------------------------------------------------------------- */ .kb-toc { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); } .kb-toc a { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.45rem 1rem; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); } .kb-toc a:hover { background-color: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .kb-category { margin-bottom: var(--space-8); scroll-margin-top: var(--space-8); } .kb-category h2 { font-size: var(--fs-xl); margin-bottom: var(--space-5); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); } .kb-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); } .kb-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); } .kb-card-head h3 { font-size: var(--fs-md); } .kb-type { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); } .kb-meta { font-size: var(--fs-sm); font-style: italic; color: var(--color-text-muted); margin-bottom: var(--space-3); } .kb-card .resource-tag-list { margin-bottom: var(--space-3); } .kb-card p:not(.kb-meta) { color: var(--color-text-muted); margin-bottom: var(--space-4); } .kb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .kb-card-placeholder { border-style: dashed; background-color: transparent; } /* -------------------------------------------------------------------------- 23. NOTÍCIAS — GRID (HOME E PÁGINA DE NOTÍCIAS) -------------------------------------------------------------------------- */ .news-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } @media (min-width: 700px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } .news-card { display: flex; flex-direction: column; box-sizing: border-box; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-height) + var(--space-4)); } .news-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-4); } /* Cards compactos (home): resumo limitado a 3 linhas para manter os 3 cards com altura parecida, mesmo com textos de tamanhos diferentes. */ #news-grid-home .news-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-date { display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary); margin-bottom: var(--space-2); } .news-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-3); } .news-card p { color: var(--color-text-muted); margin-bottom: var(--space-4); flex-grow: 1; } .news-links-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding-left: var(--space-4); } .news-links-list li { font-size: var(--fs-sm); } .news-links-list a { color: var(--color-primary); text-decoration: none; } .news-links-list a:hover { text-decoration: underline; } .news-link { font-weight: 600; color: var(--color-primary); text-decoration: none; } /* -------------------------------------------------------------------------- 24. NAV — SUBMENUS SUSPENSOS (DROPDOWNS) -------------------------------------------------------------------------- */ /* Mobile / padrão: o botão de grupo se comporta como os demais links de .nav-list, e o submenu abre como acordeão embutido, empurrando o conteúdo abaixo dele — sem posicionamento absoluto. */ .nav-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; padding: var(--space-4) var(--space-2); background: none; border: none; border-bottom: 1px solid var(--color-border); font: inherit; font-weight: 600; color: var(--color-text); cursor: pointer; text-align: left; } .nav-dropdown-toggle:hover { color: var(--color-secondary); } .nav-dropdown.has-active > .nav-dropdown-toggle { color: var(--color-secondary); } .nav-caret { font-size: 0.8em; transition: transform var(--transition-fast); } .nav-dropdown.is-open > .nav-dropdown-toggle .nav-caret { transform: rotate(-180deg); } .nav-dropdown-menu { display: none; flex-direction: column; padding-left: var(--space-4); } .nav-dropdown.is-open > .nav-dropdown-menu { display: flex; } .nav-dropdown-menu a { display: block; padding: var(--space-3) var(--space-2); text-decoration: none; color: var(--color-text-muted); font-weight: 600; border-bottom: 1px solid var(--color-border); } .nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { color: var(--color-secondary); } @media (min-width: 768px) { /* Desktop: o botão de grupo passa a se parecer com um link comum da .nav-list, e o submenu vira um painel flutuante posicionado sob ele. */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { width: auto; padding: var(--space-2) 0; border-bottom: none; position: relative; } .nav-dropdown-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background-color: var(--color-secondary); transform: scaleX(0); transition: transform var(--transition-fast); } .nav-dropdown-toggle:hover::after, .nav-dropdown.has-active > .nav-dropdown-toggle::after { transform: scaleX(1); } .nav-dropdown-menu { position: absolute; top: calc(100% + var(--space-3)); left: 50%; transform: translateX(-50%); min-width: 220px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); z-index: 20; } .nav-dropdown-menu a { border-bottom: none; border-radius: var(--radius-sm); padding: var(--space-3); } .nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"] { background-color: var(--color-bg); } } .news-link:hover { text-decoration: underline; }