/* ===================================================== HOME.CSS Carregado SOMENTE no index.html. Contém: hero de tela cheia, logo, tagline, divisor, menu vertical e ícones sociais da página inicial. ===================================================== */ /* ---------- Hero ---------- */ .hero { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 80px 24px 40px; } .hero__content { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: 1100px; margin: 0 auto; gap: 64px; } .hero__brand { text-align: right; } .logo { font-family: "IM Fell English", serif; font-style: italic; font-weight: 400; font-size: 4.1rem; line-height: 1; color: var(--text); letter-spacing: 0.5px; } .logo__cap { font-family: "US Declaration", cursive; font-style: normal; } .tagline { margin-top: 10px; font-family: "Spectral", serif; font-weight: 200; font-size: 1.9rem; color: var(--text-dim); letter-spacing: 0.3px; } .divider { width: 2px; height: 500px; background: var(--purple); } .nav ul { list-style: none; display: flex; flex-direction: column; gap: 30px; } .nav a { font-family: "Spectral", serif; font-style: italic; font-weight: 300; font-size: 2.1rem; color: var(--text); text-decoration: none; position: relative; transition: color 0.25s ease; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--text); transition: width 0.3s ease; } .nav a:hover, .nav a:focus-visible { color: var(--text); } .nav a:hover::after, .nav a:focus-visible::after { width: 100%; } /* ---------- Social ---------- */ .social { display: flex; justify-content: center; gap: 14px; margin-top: 32px; } .social__icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0.85; } .social__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .social__icon:hover, .social__icon:focus-visible { opacity: 1; transform: translateY(-2px); } /* ---------- Footer ---------- */ /* Regra idêntica à do layout.css: repetida aqui porque o index.html não carrega layout.css (usa só base.css + home.css). */ .footer { text-align: center; padding: 28px 24px; font-family: "Spectral", serif; font-weight: 200; font-size: 1.3rem; color: var(--text-dim); } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .hero__content { grid-template-columns: 1fr; flex-direction: column; gap: 36px; } .hero__brand { text-align: center; } .divider { width: 60%; max-width: 240px; height: 1px; justify-self: center; margin: 0 auto; } .logo { font-size: 4rem; } .nav ul { align-items: center; gap: 22px; } .nav a { font-size: 1.3rem; } } @media (max-width: 480px) { .hero { padding: 56px 20px 32px; } .logo { font-size: 2.9rem; } .tagline { font-size: 1.35rem; } .nav a { font-size: 1.15rem; } .nav ul { gap: 16px; } .social { margin-top: 24px; } } @media (prefers-reduced-motion: reduce) { .nav a, .social__icon, .nav a::after { transition: none; } } /* ===================================================== ANIMAÇÃO DE ABERTURA (INTRO) Só roda no index.html. O começa com a classe "js-intro" (feita no HTML), que aplica os estados "escondidos" abaixo. O js/home.js vai adicionando as classes "show-*" uma a uma, na ordem certa, revelando cada elemento. ===================================================== */ /* 1) Logo: começa bem apagado e vai clareando */ body.js-intro .logo { opacity: 0.12; transition: opacity 0.9s ease; } body.js-intro.show-logo .logo { opacity: 1; } /* 2) Tagline: revelada da esquerda para a direita */ body.js-intro .tagline { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s ease; } body.js-intro.show-tagline .tagline { clip-path: inset(0 0 0 0); } /* 3) Bloco logo+tagline: desliza da posição centralizada até a posição final (o deslocamento inicial é calculado e aplicado via JS) */ body.js-intro .hero__brand { transition: transform 0.8s ease; } /* 4) Barra roxa: cresce a partir do centro */ body.js-intro .divider { transform: scaleY(0); opacity: 0; transition: transform 0.7s ease, opacity 0.3s ease; } body.js-intro.show-divider .divider { transform: scaleY(1); opacity: 1; } /* 5) Links do menu: revelados da esquerda para a direita, um após o outro */ body.js-intro .nav a { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0.5s ease; } body.js-intro.show-nav .nav li:nth-child(1) a { clip-path: inset(0 0 0 0); } body.js-intro.show-nav .nav li:nth-child(2) a { clip-path: inset(0 0 0 0); transition-delay: 0.12s; } body.js-intro.show-nav .nav li:nth-child(3) a { clip-path: inset(0 0 0 0); transition-delay: 0.24s; } body.js-intro.show-nav .nav li:nth-child(4) a { clip-path: inset(0 0 0 0); transition-delay: 0.36s; } body.js-intro.show-nav .nav li:nth-child(5) a { clip-path: inset(0 0 0 0); transition-delay: 0.48s; } /* 6) Ícones sociais: aparecem com fade */ body.js-intro .social { opacity: 0; transition: opacity 0.6s ease; } body.js-intro.show-social .social { opacity: 1; } /* 7) Rodapé: aparece com fade por último */ body.js-intro .footer { opacity: 0; transition: opacity 0.6s ease; } body.js-intro.show-footer .footer { opacity: 1; } /* Quem prefere menos movimento na tela: pula a animação e mostra tudo pronto */ @media (prefers-reduced-motion: reduce) { body.js-intro .logo, body.js-intro .tagline, body.js-intro .hero__brand, body.js-intro .divider, body.js-intro .nav a, body.js-intro .social, body.js-intro .footer { opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important; } }