/* ═══════════════════════════════════════════════ BLOCO: PROCESSO / LINHA DO TEMPO HORIZONTAL Paleta: preto, branco, cinza Fonte: DM Serif Display + DM Sans @import no : https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap ═══════════════════════════════════════════════ */ /* ── variáveis ── */ #processo { --proc-preto: #0c0c0b; --proc-branco: #f4f3ef; --proc-cinza-1: #eceae5; --proc-cinza-2: #d0cec8; --proc-cinza-3: #9e9c97; --proc-cinza-4: #4a4946; --proc-fonte-titulo: 'DM Serif Display', Georgia, serif; --proc-fonte-corpo: 'DM Sans', sans-serif; --proc-duracao: .55s; --proc-ease: cubic-bezier(.4, 0, .2, 1); } /* ── seção ── */ #processo { background: var(--proc-branco); padding: 96px 0 104px; overflow: hidden; position: relative; } #processo::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--proc-cinza-2) 1px, transparent 1px), linear-gradient(90deg, var(--proc-cinza-2) 1px, transparent 1px); background-size: 48px 48px; opacity: .18; pointer-events: none; } /* ── caixa central ── */ .proc-caixa { max-width: 1200px; margin: 0 auto; padding: 0 48px; position: relative; } /* ── cabeçalho ── */ .proc-cabecalho { margin-bottom: 72px; display: flex; flex-direction: column; text-align: center; align-items: center; gap: 16px; } .proc-rotulo { font-family: var(--proc-fonte-corpo); font-size: 1rem ; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--proc-cinza-3); } .proc-titulo { font-family: var(--proc-fonte-titulo); font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 400; color: var(--proc-preto); line-height: 1.1; max-width: 580px; } /* ── trilho externo ── */ .proc-trilho-externo { position: relative; padding-bottom: 8px; } /* ── linha de progresso ── */ .proc-linha-base { position: absolute; top: 28px; left: 28px; right: 28px; height: 1px; background: var(--proc-cinza-1); overflow: hidden; z-index: 0; } .proc-linha-progresso { position: absolute; inset: 0; background: var(--proc-preto); width: 0%; transition: width 1.6s var(--proc-ease); } /* ── grade de etapas ── */ .proc-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; position: relative; z-index: 1; } /* ── etapa ── */ .proc-etapa { display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform: translateY(28px); transition: opacity var(--proc-duracao) var(--proc-ease), transform var(--proc-duracao) var(--proc-ease); } .proc-etapa.visivel { opacity: 1; transform: translateY(0); } /* ── marcador ── */ .proc-marcador { position: relative; margin-bottom: 28px; flex-shrink: 0; } .proc-circulo { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--proc-cinza-2); background: var(--proc-branco); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: background .5s, border-color .5s; } .proc-etapa.visivel .proc-circulo { background: var(--proc-preto); border-color: var(--proc-preto); } .proc-etapa--final.visivel .proc-circulo { background: var(--proc-branco); border-color: var(--proc-preto); } .proc-numero { font-family: var(--proc-fonte-titulo); font-size: 17px; color: var(--proc-cinza-3); line-height: 1; transition: color .5s; } .proc-etapa.visivel .proc-numero { color: var(--proc-branco); } .proc-etapa--final.visivel .proc-numero { color: var(--proc-preto); } /* anel pulsante */ .proc-pulso { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--proc-preto); opacity: 0; z-index: 1; } .proc-etapa.visivel .proc-pulso { animation: proc-pulsar 2.8s ease-out infinite; } .proc-etapa--final.visivel .proc-pulso { animation: none; } @keyframes proc-pulsar { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } } /* ── conteúdo ── */ .proc-conteudo { display: flex; flex-direction: column; gap: 10px; padding-right: 16px; } .proc-etiqueta { font-family: var(--proc-fonte-corpo); font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--proc-cinza-3); opacity: 0; transition: opacity .4s ease .25s; } .proc-etapa.visivel .proc-etiqueta { opacity: 1; } .proc-etiqueta--destaque { color: var(--proc-preto); } .proc-nome { font-family: var(--proc-fonte-titulo); font-size: clamp(2rem, 2vw, 3rem); font-weight: 400; color: var(--proc-preto); line-height: 1.2; opacity: 0; transform: translateY(8px); transition: opacity .45s ease .15s, transform .45s ease .15s; } .proc-etapa.visivel .proc-nome { opacity: 1; transform: translateY(0); } .proc-descricao { font-family: var(--proc-fonte-corpo); font-size: 16px; font-weight: 300; color: var(--proc-preto); line-height: 1.65; opacity: 0; transition: opacity .45s ease .3s; } .proc-etapa.visivel .proc-descricao { opacity: 1; } /* detalhes */ .proc-detalhes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .proc-detalhe { font-family: var(--proc-fonte-corpo); background-color: #0c0c0b; font-size:1.1rem; font-weight: 400; color: var(--proc-branco); padding: 4px 12px; border: 2px solid var(--proc-cinza-2); border-radius: 15px; opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; display: inline-block; } .proc-detalhe:hover { /* 0.2s é a velocidade da vibração. infinite faz com que continue vibrando enquanto o mouse estiver em cima */ animation: vibrar 0.2s linear infinite; } .proc-etapa.visivel .proc-detalhe:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: .38s; } .proc-etapa.visivel .proc-detalhe:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: .5s; } /* ── rodapé de resultado ── */ .proc-rodape { margin-top: 72px; padding: 36px 40px; border: 1px solid var(--proc-preto); display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 40px; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--proc-ease), transform .7s var(--proc-ease); } .proc-rodape.visivel { opacity: 1; transform: translateY(0); } .proc-stat { display: flex; flex-direction: column; gap: 6px; } .proc-stat-numero { font-family: var(--proc-fonte-titulo); font-size: 38px; color: var(--proc-preto); line-height: 1; } .proc-stat-legenda { font-family: var(--proc-fonte-corpo); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--proc-cinza-3); max-width: 140px; } .proc-divisor { width: 1px; height: 52px; background: var(--proc-cinza-2); } .proc-stat--acao { margin-left: auto; align-items: flex-end; gap: 14px; } .proc-aviso { font-family: var(--proc-fonte-corpo); font-size: 13px; font-weight: 300; color: var(--proc-cinza-4); text-align: right; line-height: 1.55; } .proc-botao { display: inline-flex; align-items: center; gap: 10px; font-family: var(--proc-fonte-corpo); font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--proc-branco); background: var(--proc-preto); padding: 14px 28px; border: 1px solid var(--proc-preto); transition: background .25s, color .25s; } .proc-botao:hover { background: transparent; color: var(--proc-preto); } .proc-botao:hover svg { stroke: var(--proc-preto); } .proc-botao svg { width: 14px; height: 14px; stroke: var(--proc-branco); flex-shrink: 0; transition: stroke .25s; } /* ── responsivo ── */ @media (max-width: 900px) { .proc-etapas { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; } .proc-linha-base { display: none; } .proc-rodape { grid-template-columns: 1fr 1fr; gap: 28px; } .proc-stat--acao { grid-column: 1 / -1; align-items: flex-start; } .proc-aviso { text-align: left; } .proc-divisor:last-of-type { display: none; } } @media (max-width: 580px) { .proc-caixa { padding: 0 24px; } .proc-etapas { grid-template-columns: 1fr; gap: 40px; } .proc-rodape { grid-template-columns: 1fr; } .proc-divisor { width: 40px; height: 1px; } .proc-stat--acao { margin-left: 0; } } @keyframes vibrar { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }