/* Cesar Segatto Advocacia — cabeçalho, menu, rodapé e barra de ação móvel. Carregue depois de base.css. O cabeçalho antigo tinha duas faixas empilhadas (assinatura + menu) e comia perto de 120px do alto da tela em toda rolagem. Aqui é uma faixa só, de 68px, que condensa ainda mais assim que a página sai do topo. */ /* ══ cabeçalho ══════════════════════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 80; background: rgba(0, 0, 0, .72); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease); } /* js/main.js põe .is-scrolled no depois dos primeiros pixels de rolagem. No topo da página o cabeçalho é quase transparente; sobre o conteúdo ele fecha, para o texto não atravessar por baixo. Na home essa mesma classe faz o cabeçalho inteiro entrar — ver o bloco "abertura" em css/home.css. */ .is-scrolled .site-header { background: rgba(0, 0, 0, .92); border-bottom-color: var(--line); } .site-header__inner { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 30px; } /* ——— assinatura ——— */ .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: inherit; min-width: 0; } .brand:hover { color: inherit; } /* O monograma é a única marca gráfica do site: amarelo chapado, letras pretas e um fio escuro por dentro, que lê como quina gravada. O fio é escuro, e não claro, porque sobre amarelo um realce branco não aparece. */ .brand__mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); font-family: var(--font-display); font-size: 17px; letter-spacing: .02em; color: var(--accent-ink); transition: background var(--fast) var(--ease); } .brand:hover .brand__mark { background: var(--accent-hi); } .brand__name { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; color: var(--text); white-space: nowrap; } .brand__sub { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } /* ——— menu horizontal ——— */ .nav { display: flex; align-items: center; gap: 28px; } /* aria-current="page" está escrito no HTML de cada página — não há JavaScript marcando o item ativo. */ .nav__link { position: relative; padding: 8px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); transition: color var(--fast) var(--ease); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease); } .nav__link:hover, .nav__link[aria-current] { color: var(--text); } .nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); } /* ——— lado direito ——— */ .site-header__actions { display: flex; align-items: center; gap: 14px; } .header-tel { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; } .header-tel:hover { color: var(--text); } /* ——— botão do menu de celular ——— */ .burger { display: none; /* vira grid abaixo de 1080px */ place-items: center; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); cursor: pointer; transition: border-color var(--fast) var(--ease); } .burger:hover { border-color: var(--line-strong); } .burger__lines { display: block; width: 20px; } .burger__lines span { display: block; height: 1.5px; background: currentColor; transition: transform var(--mid) var(--ease), opacity var(--fast) var(--ease); } .burger__lines span + span { margin-top: 5px; } /* Vira X quando o painel abre. */ .burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__lines span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ══ painel de menu (celular e tablet) ══════════════════════════════════ Antes o menu empurrava a página para baixo; agora é um painel lateral sobreposto. js/main.js cuida de abrir, fechar no Esc, travar a rolagem do fundo e marcar o resto da página como inert. */ .drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s linear var(--mid); } .drawer.is-open { visibility: visible; transition-delay: 0s; } .drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--mid) var(--ease); } .drawer.is-open .drawer__scrim { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 88vw); display: flex; flex-direction: column; padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--surface-1); border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform var(--mid) var(--ease); } .drawer.is-open .drawer__panel { transform: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(var(--header-h) - 20px); margin-bottom: 20px; } .drawer__close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 18px; line-height: 1; color: var(--text-2); cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .drawer__close:hover { border-color: var(--line-strong); color: var(--text); } .drawer__link { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); font-size: 27px; line-height: 1.15; color: var(--text-2); transition: color var(--fast) var(--ease); } .drawer__link:hover { color: var(--text); } .drawer__link[aria-current] { color: var(--text); } .drawer__link[aria-current] .drawer__num { color: var(--accent); } .drawer__num { flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-4); transition: color var(--fast) var(--ease); } .drawer__foot { margin-top: auto; padding-top: 28px; } .drawer__contact { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 14px; color: var(--text-2); } .drawer__contact a { color: var(--text-2); } .drawer__contact a:hover { color: var(--text); } .drawer__contact span { color: var(--text-3); font-size: 13px; } /* ══ barra de ação no celular ═══════════════════════════════════════════ Num site de advogado quase todo o contato sai do telefone. Em vez de deixar o visitante rolar até o rodapé atrás do número, as duas ações ficam fixas no rodapé da tela. Só existe abaixo de 760px. */ .action-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); gap: 10px; background: rgba(13, 13, 13, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .action-bar .btn { flex: 1; padding: 14px 12px; } /* ══ rodapé ═════════════════════════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--line); } /* Última chamada antes do fim da página. */ .footer-cta { background: var(--surface-1); border-bottom: 1px solid var(--line); } .footer-cta__inner { max-width: var(--page); margin: 0 auto; padding: 52px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .footer-cta__text { font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.02em; color: var(--text); max-width: 18ch; text-wrap: balance; } .footer-cta__text em { font-style: italic; color: var(--accent); } .footer-cta__note { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .footer-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .site-footer__cols { max-width: var(--page); margin: 0 auto; padding: 56px var(--gutter); display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px; align-items: start; } .site-footer__brand { font-family: var(--font-display); font-size: 26px; letter-spacing: .07em; text-transform: uppercase; color: var(--text); } .site-footer__brand-sub { margin-top: 12px; font-size: 13.5px; line-height: 1.85; color: var(--text-3); max-width: 34ch; } .site-footer__title { margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); } .site-footer__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .site-footer__list a { color: var(--text-2); } .site-footer__list a:hover { color: var(--text); } .site-footer__list span { color: var(--text-3); } .site-footer__legal { border-top: 1px solid var(--line-soft); } .site-footer__legal-inner { max-width: var(--page); margin: 0 auto; padding: 22px var(--gutter); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .06em; /* --text-3, e não o --text-4 do resto do miúdo: aqui mora o aviso do Provimento 205/2021 da OAB, que precisa ser legível de verdade (5,8:1 contra o preto, contra os 3,1:1 do --text-4). */ color: var(--text-3); } /* ══ pontos de quebra ═══════════════════════════════════════════════════ */ /* O telefone do topo é a primeira coisa a sair: o menu e a barra o repetem. */ @media (max-width: 1200px) { .header-tel { display: none; } } /* O menu horizontal não cabe mais — entra o painel lateral. */ @media (max-width: 1080px) { .nav { display: none; } .burger { display: grid; } .site-header__actions .btn { display: none; } } @media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr; gap: 40px; } .footer-cta__inner { padding-block: 44px; } .footer-cta__actions { width: 100%; } .footer-cta__actions .btn { flex: 1; } } @media (max-width: 760px) { .brand__sub { display: none; } .action-bar { display: flex; } /* Sem isto a barra fixa cobre a última linha do rodapé. */ body { padding-bottom: 74px; } } @media (max-width: 420px) { .brand__name { font-size: 19px; } .brand__mark { width: 32px; height: 32px; font-size: 15px; } }