| |
| |
| |
| :root { |
| --bg: #ffffff; |
| --alt: #f8f9fb; |
|
|
| --text-primary: #0b132b; |
| --text-secondary: #6b7280; |
| --body: #1f2937; |
|
|
| --accent: #1e3a8a; |
|
|
| --max-width: 1200px; |
| --page-gutter: clamp(3rem, 8vw, 6rem); |
| --menu-height: 72px; |
|
|
| |
| --baseline: 0.5rem; |
|
|
| |
| --motion-fast: 0.15s ease; |
| --motion-base: 0.2s ease; |
| --motion-slow: 0.25s ease; |
|
|
| |
| --icon-size: 22px; |
| } |
|
|
| |
| |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| img { |
| display: block; |
| max-width: 100%; |
| } |
|
|
| body { |
| font-family: Inter, sans-serif; |
| color: var(--body); |
| background: var(--bg); |
| line-height: 1.75; |
| padding-top: var(--menu-height); |
| } |
|
|
| |
| |
| |
| .container { |
| max-width: var(--max-width); |
| margin: 0 auto; |
| padding-left: var(--page-gutter); |
| padding-right: var(--page-gutter); |
| } |
|
|
| |
| |
| |
| a { |
| color: var(--accent); |
| text-decoration: none; |
| } |
|
|
| a:hover { |
| text-decoration: underline; |
| } |
|
|
| a:focus-visible { |
| outline: 2px solid var(--accent); |
| outline-offset: 3px; |
| border-radius: 4px; |
| } |
|
|
| |
| |
| |
| .skip-link { |
| position: absolute; |
| top: -40px; |
| left: 1rem; |
| background: #fff; |
| color: var(--text-primary); |
| padding: 0.5rem 0.75rem; |
| border-radius: 6px; |
| z-index: 2000; |
| } |
|
|
| .skip-link:focus { |
| top: 1rem; |
| } |
|
|
| |
| |
| |
| .menu-global { |
| position: fixed; |
| top: 0; |
| width: 100%; |
| height: var(--menu-height); |
| background: rgba(255, 255, 255, 0.92); |
| backdrop-filter: blur(6px); |
| border-bottom: 1px solid rgba(0,0,0,0.06); |
| z-index: 1000; |
| } |
|
|
| .menu-inner { |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .menu-brand { |
| font-weight: 700; |
| font-size: 1.4rem; |
| color: var(--text-primary); |
| } |
|
|
| .menu-links { |
| list-style: none; |
| display: flex; |
| gap: 1.6rem; |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
|
|
| .menu-links a { |
| color: var(--text-primary); |
| font-weight: 500; |
| text-decoration: none; |
| } |
|
|
| .menu-links a:hover { |
| text-decoration: underline; |
| } |
|
|
| |
| |
| |
| .hero { |
| position: relative; |
| height: 100vh; |
| overflow: hidden; |
| } |
|
|
| .hero-img { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
|
|
| .hero-inner { |
| position: relative; |
| height: 100%; |
| display: flex; |
| align-items: flex-end; |
| } |
|
|
| .hero-content { |
| padding-bottom: clamp(6rem, 14vh, 10rem); |
| max-width: 720px; |
| color: #f2f4f6; |
| } |
|
|
| .hero h1 { |
| font-size: clamp(3rem, 5vw, 4.5rem); |
| line-height: 1.08; |
| font-weight: 500; |
| margin-bottom: calc(var(--baseline) * 3); |
| } |
|
|
| .hero p { |
| font-size: 1.25rem; |
| opacity: 0.85; |
| } |
|
|
| |
| |
| |
| .assinatura { |
| padding: 2.5rem 0 1.5rem; |
| } |
|
|
| .assinatura .container { |
| display: flex; |
| gap: 0.4rem; |
| font-family: "Source Serif 4", serif; |
| font-size: clamp(1.8rem, 3vw, 2.2rem); |
| font-weight: 500; |
| color: var(--text-primary); |
| } |
|
|
| |
| |
| |
| .section { |
| padding: calc(var(--baseline) * 9) 0; |
| scroll-margin-top: var(--menu-height); |
| } |
|
|
| .section-alt { |
| background: var(--alt); |
| } |
|
|
| .section-title { |
| font-family: "Source Serif 4", serif; |
| font-size: 1.35rem; |
| font-weight: 500; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| margin-bottom: calc(var(--baseline) * 4); |
| } |
|
|
| |
| |
| |
| p + p { |
| margin-top: calc(var(--baseline) * 3); |
| } |
|
|
| |
| |
| |
| .disciplinas-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); |
| gap: 24px; |
| } |
|
|
| .disciplina-card { |
| background: #fff; |
| padding: 1.6rem; |
| border-radius: 12px; |
| box-shadow: 0 4px 14px rgba(0,0,0,0.08); |
| transition: transform var(--motion-base); |
| } |
|
|
| .disciplina-card:hover { |
| transform: translateY(-4px); |
| } |
| .disciplina-card a { |
| display: block; |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
|
|
| |
| |
| |
| .livros-grade { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| gap: 2.4rem; |
| justify-items: center; |
| } |
|
|
| .livro-frame { |
| height: 300px; |
| display: flex; |
| } |
|
|
| .livro-capa { |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| transition: transform var(--motion-slow); |
| } |
|
|
| .livros-grade a:hover .livro-capa { |
| transform: scale(1.06); |
| } |
|
|
| |
| .livros-grade a:nth-child(3) .livro-capa { |
| transform: scale(1.06); |
| } |
|
|
| .livros-grade a:nth-child(3):hover .livro-capa { |
| transform: scale(1.18); |
| } |
|
|
| |
| |
| |
| .contato-nome { |
| font-weight: 500; |
| margin-bottom: calc(var(--baseline) * 1.5); |
| } |
|
|
| .contato-instituicao { |
| font-size: 0.95rem; |
| line-height: 1.6; |
| color: var(--text-secondary); |
| } |
|
|
| .contact-email { |
| display: inline-block; |
| margin-top: calc(var(--baseline) * 1); |
| font-size: 0.95rem; |
| color: var(--text-secondary); |
| text-decoration: none; |
| } |
|
|
| .contact-email:hover { |
| text-decoration: underline; |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
| |
| |
| .logos-institucionais { |
| display: flex; |
| gap: 32px; |
| align-items: center; |
| margin-top: calc(var(--baseline) * 4); |
| padding-bottom: calc(var(--baseline) * 2); |
| margin-bottom: calc(var(--baseline) * 1.5); |
| position: relative; |
| } |
|
|
|
|
|
|
| |
| .logos-institucionais::after { |
| display: none; |
| } |
|
|
| .logos-institucionais img { |
| height: 48px; |
| filter: grayscale(100%); |
| opacity: 0.85; |
| transition: transform var(--motion-base), |
| opacity var(--motion-base), |
| filter var(--motion-base); |
| } |
|
|
| .logos-institucionais img:hover { |
| transform: translateY(-3px); |
| filter: grayscale(0%); |
| opacity: 1; |
| } |
|
|
| |
| |
| |
| .footer { |
| background: #070a0f; |
| } |
|
|
| .footer-inner { |
| padding: 3.5rem 0 3rem; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
|
|
| .footer p { |
| margin-top: 2.2rem; |
| font-size: 0.9rem; |
| color: #9ca3af; |
| } |
|
|
| |
| |
| |
| .social-icons { |
| display: flex; |
| gap: 1.2rem; |
| } |
|
|
| .social-link { |
| display: inline-flex; |
| } |
|
|
| .social-link svg { |
| width: var(--icon-size); |
| height: var(--icon-size); |
| color: #9aa0a6; |
| transition: transform var(--motion-fast), |
| color var(--motion-fast), |
| opacity var(--motion-fast); |
| } |
|
|
| .social-link:hover svg { |
| transform: translateY(-1px); |
| color: #ffffff; |
| } |
|
|
| |
| |
| |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| transition: none !important; |
| transform: none !important; |
| } |
| } |
|
|
| |
| |
| |
| .academic-link { |
| display: inline-flex; |
| align-items: center; |
| } |
|
|
| .academic-link img, |
| .academic-link svg { |
| width: var(--icon-size); |
| height: var(--icon-size); |
| filter: grayscale(100%) brightness(0.6); |
| opacity: 0.9; |
| transition: |
| filter var(--motion-base), |
| opacity var(--motion-base), |
| transform var(--motion-fast); |
| } |
|
|
| .academic-link:hover img, |
| .academic-link:focus-visible img, |
| .academic-link:hover svg, |
| .academic-link:focus-visible svg { |
| filter: none; |
| opacity: 1; |
| transform: translateY(-1px); |
| } |
|
|
|
|
| |
| .icon-orcid { |
| width: 22px; |
| height: 22px; |
| display: block; |
| } |
|
|
|
|
|
|
|
|
