/* ========================================================= Paula Vicente — CAMPANHA 2026 · DEPUTADA ESTADUAL 13333 PALETA OFICIAL, medida no arquivo do designer (a arte da bandeira, 11811x5906, do Drive) — não estimada, não tirada de print: roxo #681081 o "V" e a palavra "VICENTE" rosa #DE0049 "PAULA", a estrela dentro do V, o "PT" amarelo #F8BD00 o número 13333 verde #57A52A "DEPUTADA ESTADUAL" branco #FFFFFF fundo NÃO EXISTE azul, preto, creme nem vermelho nesta identidade. Saíram as duas paletas anteriores: a da pré-campanha (vermelho/creme/azul) e a que eu havia deduzido do wordmark velho (preto/creme/magenta). OS NOMES ANTIGOS DE VARIÁVEL FICARAM, COM VALOR NOVO. --red, --cream e --blue são usados em centenas de regras aqui embaixo e nos index1.php/indexantigo.php. Trocar o VALOR vira a identidade toda de uma vez; renomear geraria churn e o risco de esquecer uma regra pelo caminho. Leia --red como "rosa", --cream como "amarelo" e --blue como "verde". Os nomes reais estão logo abaixo, e é por eles que o código novo deve chamar. COMO ESCOLHER ENTRE OS DOIS TONS DE UMA MESMA COR: amarelo sobre branco dá 1,7:1 e verde sobre branco dá 3,2:1 — nenhum dos dois serve como letra. Para PREENCHER use --amarelo / --verde; para ESCREVER use --verde-txt (ou roxo, que lê em tudo). Amarelo nunca é letra. ========================================================= */ :root { --red: #DE0049; /* ROSA da marca */ --red-d: #B8003C; --red-deep: #4E0C63; --cream: #F8BD00; /* AMARELO da marca — campo dominante da página */ --cream-2: #E0A800; /* amarelo da banda alternada */ --ink: #681081; /* ROXO da marca — cor do texto */ --muted: #5A3168; /* roxo dessaturado p/ texto secundário */ --blue: #57A52A; /* VERDE da marca (era o azul da pré-campanha) */ --blue-d: #46881F; --white: #FFFFFF; --roxo: #681081; --roxo-d: #4E0C63; --rosa: #DE0049; --rosa-d: #B8003C; --amarelo: #F8BD00; --amarelo-d: #E0A800; --verde: #57A52A; --verde-txt: #3D7A18; /* verde no tom que dá para ler sobre branco */ --rosa-txt: #C4003F; /* rosa no tom que passa em texto grande sobre amarelo */ --radius: 22px; --radius-sm: 14px; --shadow: 0 18px 45px rgba(35,23,28,.16); --shadow-sm: 0 8px 22px rgba(35,23,28,.10); --maxw: 1180px; --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; } body { font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 800; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- Tipografia de seção ---------- */ .section-eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--red); margin-bottom: .6rem; } .section-eyebrow--light { color: var(--blue); } .section-title { font-size: clamp(1.9rem, 4.4vw, 3rem); color: var(--red); } .section-sub { color: var(--muted); max-width: 560px; margin: .8rem auto 0; font-size: 1.05rem; } .sobre__header, .ideias__text { margin-inline: auto; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: .95rem 1.8rem; border-radius: 999px; cursor: pointer; border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; text-align: center; } .btn--primary { background: var(--red); color: #fff; box-shadow: 0 10px 24px rgba(168,15,20,.35); } .btn--primary:hover { background: var(--red-d); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--red); border-color: var(--red); } .btn--ghost:hover { background: var(--red); color: #fff; transform: translateY(-2px); } .btn--blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(26, 110, 234, .35); } .btn--blue:hover { background: var(--blue-d); transform: translateY(-2px); } .btn--full { width: 100%; } /* "Vamos construir juntos" — pílula de contorno (referência do briefing) */ .btn--build { background: var(--cream); color: var(--red); border-color: var(--red); box-shadow: var(--shadow-sm); } .btn--build:hover { background: var(--red); color: #fff; transform: translateY(-2px); } .btn--build-light { background: #fff; color: var(--red); border-color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); } .btn--build-light:hover { background: var(--cream); transform: translateY(-2px); } /* Wrapper de CTA centralizado ao fim das seções */ .section-cta { max-width: var(--maxw); margin: 3.2rem auto 0; text-align: center; } .link-arrow { font-family: var(--font-display); font-weight: 600; color: var(--red); display: inline-block; margin-top: .6rem; transition: gap .2s; } .link-arrow:hover { color: var(--red-d); } /* ========================================================= MENU FIXO ========================================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(244,234,216,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(35,23,28,.08); transition: box-shadow .25s; transform: translateZ(0); -webkit-transform: translateZ(0); } .nav.is-scrolled { box-shadow: 0 6px 24px rgba(35,23,28,.12); } .nav__inner { max-width: var(--maxw); margin: auto; padding: .8rem 1.4rem; display: flex; align-items: center; justify-content: space-between; } .nav__brand { display: flex; flex-direction: column; line-height: 1; } .nav__brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--red); } .nav__brand-tag { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); font-weight: 600; } .nav__links { display: flex; align-items: center; gap: 1.8rem; } .nav__links a { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: .98rem; position: relative; } .nav__links a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--red); transition: width .25s; } .nav__links a:not(.nav__cta):hover::after, .nav__links a.is-active::after { width: 100%; } .nav__cta { background: var(--red); color: #fff!important; padding: .55rem 1.2rem; border-radius: 999px; } .nav__cta:hover { background: var(--red-d); } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .nav__toggle span { width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: .3s; } /* ========================================================= SEÇÃO 1 — HERO ========================================================= */ .hero { position: relative; /* ⚠️ 100 e não 120: quando o nome da candidata entrou no

, o hero cresceu 63px e os dois botões da primeira tela caíram para baixo da dobra num notebook de 800px de altura. Estes 20px, mais a entrelinha da pílula, devolvem quase tudo. Se mexer aqui, meça de novo onde começa o .hero__ctas em 1280x800. */ padding: 100px 0 0 0; background: radial-gradient(120% 90% at 85% 5%, rgba(168,15,20,.10) 0%, transparent 55%), linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); } .hero__stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 30%, var(--blue) 50%, transparent), radial-gradient(2px 2px at 70% 20%, var(--red) 50%, transparent), radial-gradient(1.5px 1.5px at 40% 70%, var(--blue) 50%, transparent), radial-gradient(1.5px 1.5px at 85% 60%, var(--red) 50%, transparent), radial-gradient(2px 2px at 12% 80%, var(--blue) 50%, transparent); opacity: .45; animation: twinkle 4s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .22; } to { opacity: .6; } } .hero__inner { max-width: var(--maxw); margin: auto; display: flex; align-items: stretch; position: relative; z-index: 2; padding: 0 1.4rem; } .hero__content-wrapper { flex: 1; position: relative; padding-left: 1.8rem; margin-top: 40px; margin-bottom: 100px; display: flex; flex-direction: column; justify-content: center; z-index: 10; } .hero__vertical-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red); border-radius: 6px; } /* Ele agora vive DENTRO do

(ver o comentário no index.php). Por isso o display virou block com largura de conteúdo: dentro do título, inline-block o deixaria na mesma linha de "Coragem". O font-size e o letter-spacing próprios são o que impedem que ele herde os 5rem do título. */ .hero__eyebrow { display: block; width: max-content; max-width: 100%; font-family: var(--font-display); font-weight: 600; background: #fff; color: var(--red); padding: .4rem 1rem; border-radius: 999px; /* clamp e não .82rem fixo: com o nome dentro, o texto passou de 25 para 44 caracteres e a pílula quebrava em duas linhas em tela de 375px (e pior em 320). O clamp encolhe a letra só nas telas estreitas — de 430px para cima ele já está no tamanho de sempre. */ font-size: clamp(.62rem, 2.9vw, .82rem); letter-spacing: .04em; box-shadow: var(--shadow-sm); /* line-height própria: dentro do

ele herdaria a entrelinha do título (que é de 5rem) e a pílula ficaria alta e solta. E a margem menor devolve parte da altura que o nome custou — ver a nota sobre os botões. */ line-height: 1.15; margin-bottom: .85rem; align-self: flex-start; } .hero__title { font-size: clamp(2.8rem, 7vw, 5.2rem); color: var(--red); letter-spacing: -.02em; } /* Em tela estreita a pílula ainda encostava no limite por 6px e quebrava em duas linhas. O respiro lateral dela diminui junto com a letra. */ @media (max-width: 520px) { /* Em 320px (iPhone SE antigo) o texto ainda não cabe numa linha. Em vez de encolher a letra para 9px, deixa quebrar — centrado, a pílula de duas linhas parece intencional em vez de defeito. */ .hero__eyebrow { padding: .38rem .7rem; text-align: center; line-height: 1.35; } } .hero__title span { color: var(--ink); } .hero__lead { font-size: 1.15rem; color: var(--muted); max-width: 460px; margin: 1.4rem 0 2rem; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; } .hero__figure { flex: 1.12; position: relative; display: flex; justify-content: flex-end; align-items: flex-end; margin-right: calc(-50vw + 50%); min-height: 580px; } .hero__blob { position: absolute; top: 45%; right: 0; /* 16%, não 8%: com 8% a ponta do braço esquerdo da estrela encostava no ponto final de "muda tudo.". Empurrando mais 8% da largura dela (~68px) a ponta sai de cima do texto e ainda abre espaço para o 13333 grande. */ transform: translate(16%, -50%); transform-origin: 50% 50%; width: min(800px, 148%); aspect-ratio: 1; background: radial-gradient(circle at 50% 38%, var(--red) 0%, var(--red-deep) 100%); clip-path: polygon(50% 2%,62% 34%,97% 36%,69% 58%,80% 92%,50% 71%,20% 92%,31% 58%,3% 36%,38% 34%); filter: drop-shadow(0 22px 40px rgba(106,3,0,.32)); z-index: 1; animation: heroStar 10s ease-in-out infinite; } .hero__blob-blue { position: absolute; /* acompanha a estrela quando ela anda para a direita: o blob vive ATRÁS dela e só aparece a lasca que sobra do braço. Deixando para trás, a lasca virava um círculo verde inteiro no meio do amarelo. */ top: 16%; left: 28%; width: min(300px, 50%); aspect-ratio: 1; background: radial-gradient(circle at 45% 40%, #2f80ff 0%, var(--blue) 70%); border-radius: 42% 58% 55% 45% / 55% 45% 55% 45%; filter: drop-shadow(0 18px 32px rgba(26, 110, 234, .32)); z-index: 0; animation: heroFloat 11s ease-in-out infinite; opacity: .82; } @keyframes heroStar { 0%, 100% { transform: translate(8%, -50%) rotate(-2.2deg) scale(1); } 50% { transform: translate(8%, -50%) rotate(2.2deg) scale(1.025); } } @keyframes heroFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-16px) scale(1.04); } } .hero__photo { position: relative; z-index: 2; width: 100%; max-width: 940px; object-fit: contain; object-position: bottom right; display: block; filter: drop-shadow(0 24px 40px rgba(35,23,28,.35)); } /* Elementos decorativos extras atrás da foto (briefing "se possível") */ .hero__sparkle { position: absolute; top: 6%; right: 6%; width: clamp(48px, 7vw, 92px); color: var(--blue); z-index: 1; animation: sparkleSpin 16s linear infinite; filter: drop-shadow(0 8px 16px rgba(26,110,234,.4)); } @keyframes sparkleSpin { to { transform: rotate(360deg); } } .hero__dot { position: absolute; bottom: 20%; left: 6%; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); opacity: .9; z-index: 1; animation: heroFloat 6.5s ease-in-out infinite; } .hero__dot--sm { width: 12px; height: 12px; /* 26% e não 14%: em 14% este pontinho caía embaixo do 13333 grande, e roxo em cima de verde parece sujeira. Ver .hero__numerao. */ bottom: auto; top: 26%; left: 3%; opacity: .8; animation-duration: 8s; animation-direction: reverse; } /* ---- O 13333 no vazio entre o texto e a estrela ------------------------ Só no desktop largo, porque só ali o vazio existe. Medi o buraco varrendo a página com elementsFromPoint (com as animações travadas no meio do ciclo, que é quando a estrela e o blob estão MAIORES) e o mapa em 1280px é este: y 130..210 livre de x 655 até ~886-916 <- é aqui que o número cabe y 220 o pontinho verde atravessa em x 670 y 230..340 o blob verde fecha de 838 para 751 y 350+ o braço da estrela toma tudo Daí o tamanho: 37% da figura ~ 233px de largura, 74 de altura, alinhado pelo alto com o "Deputada Estadual" e a primeira linha do título. ⚠️ O LIMITE É A DIAGONAL DA ESTRELA, e ela é implacável: cada 1px que o número desce, o braço avança ~0,375px para a esquerda. Aumentar a largura sem subir o topo joga o canto de baixo do número em cima do rosa — e roxo sobre rosa não se lê. Mexeu aqui? Repita a varredura em 1280, 1440 e 1920. z-index acima da estrela é escolha consciente: se um dia a conta falhar, é melhor ver o número por cima do que um número comido pela metade. */ /* ---- O 13333 na linha do título ---------------------------------------- Ele é uma "palavra" do

: `inline-block` com a altura em `em`, então cresce e encolhe junto com a fonte do título e fica sempre na mesma linha de base de "Coragem". Nada de coordenadas — a versão anterior era posicionada por px dentro da figura e brigava com a estrela, com o blob e com a foto, que se mexem conforme a largura E a altura da janela. 1,02em contra a altura da fonte deixa os algarismos um pouco MAIORES que as maiúsculas do título (a caixa alta da Poppins fica em ~0,72em), que é o efeito pedido: o número salta, sem parecer outro tamanho de peça. ⚠️ A linha estoura a coluna de texto de propósito. Ver `.hero__title` mais abaixo: `width: max-content` deixa a linha 1 passar por cima do amarelo da figura em vez de quebrar o número para a linha de baixo. A coluna é um item flex com base 0, então isso NÃO muda o layout, só o desenho. */ .hero__numerao { display: none; height: 1.02em; width: auto; margin-left: .3em; vertical-align: baseline; } /* Abaixo de 1200 não há amarelo livre à direita do título para a linha invadir, e em 900 o celular reempilha o hero inteiro. */ @media (min-width: 1200px) { .hero__numerao { display: inline-block; } .hero__title { width: max-content; max-width: none; } } /* ========================================================= SEÇÃO 2 — SOBRE (linha do tempo / relógio) ========================================================= */ .sobre { position: relative; padding: 90px 1.4rem 100px; background: linear-gradient(160deg, var(--red), var(--red-d)); color: #fff; overflow: hidden; } .sobre__stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 10% 20%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 80% 15%, var(--blue) 50%, transparent), radial-gradient(1.5px 1.5px at 30% 60%, #fff 50%, transparent), radial-gradient(2px 2px at 65% 75%, var(--cream) 50%, transparent), radial-gradient(1.5px 1.5px at 90% 50%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 50% 40%, var(--blue) 50%, transparent); opacity: .4; animation: drift 12s linear infinite; background-size: cover; } @keyframes drift { from { background-position: 0 0; } to { background-position: 0 60px; } } .sobre__header { position: relative; z-index: 2; text-align: center; max-width: 640px; } .sobre .section-eyebrow { color: var(--blue); } .sobre .section-title { color: #fff; } .sobre .section-sub { color: rgba(255,255,255,.85); } /* História — carrossel horizontal com medidor (relógio) */ .hist { position: relative; z-index: 2; max-width: 940px; margin: 52px auto 0; display: flex; align-items: center; gap: .8rem; } .hist__card { flex: 1; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 2.4rem 2rem 1.6rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hist__viewport { overflow: hidden; } .hist__track { display: flex; transition: transform .5s cubic-bezier(.25,.8,.25,1); will-change: transform; } .hist__slide { flex: 0 0 100%; min-height: 232px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 0 .4rem; } .hist__num { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--blue); letter-spacing: .15em; } .hist__title { font-size: clamp(1.6rem, 3vw, 2rem); color: #fff; margin: .25rem 0 .8rem; } .hist__slide p { color: rgba(255,255,255,.9); max-width: 580px; margin-inline: auto; } .hist__nav { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s, opacity .2s, border-color .2s; } .hist__nav:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); transform: scale(1.06); } .hist__nav:disabled { opacity: .3; cursor: default; } .hist__cta { position: relative; z-index: 2; text-align: center; margin-top: 1.8rem; } /* Medidor semicircular — o ponteiro passa conforme o tópico */ .gauge { position: relative; width: min(340px, 92%); margin: 1.6rem auto .2rem; aspect-ratio: 320 / 176; } .gauge__svg { width: 100%; height: 100%; overflow: visible; } .gauge__arc { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 3; stroke-linecap: round; } .gauge__ticks line { stroke: rgba(255,255,255,.45); stroke-width: 2; transition: stroke .3s; } .gauge__ticks line.is-on { stroke: var(--blue); stroke-width: 3; } .gauge__hand { transform-origin: 160px 160px; transition: transform .55s cubic-bezier(.25,.8,.25,1); } .gauge__hand line { stroke: #fff; stroke-width: 4; stroke-linecap: round; } .gauge__pin { fill: var(--blue); } .gauge__label { fill: rgba(255,255,255,.55); font-family: var(--font-display); font-weight: 600; font-size: 8.6px; letter-spacing: .3px; cursor: pointer; transition: fill .3s; } .gauge__label:hover { fill: rgba(255,255,255,.9); } .gauge__label.is-active { fill: #fff; } .gauge__label:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .trajetoria { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.8rem; } .traj-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-sm); padding: 1.2rem 1rem; text-align: center; } .traj-card__year { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--blue); display: block; } .traj-card__role { font-size: .9rem; color: rgba(255,255,255,.9); margin: .3rem 0; } .traj-card__votes { font-size: .95rem; color: #fff; } .traj-card__votes strong { color: var(--blue); font-size: 1.15rem; } .traj-card--highlight { background: var(--white); border-color: transparent; } .traj-card--highlight .traj-card__year { color: var(--red); } .traj-card--highlight .traj-card__role { color: var(--ink); font-weight: 600; } /* ========================================================= NOVA SEÇÃO — COMO POSSO APOIAR? ========================================================= */ .apoiar { padding: 90px 1.4rem; background: var(--cream); } .apoiar__header { max-width: var(--maxw); margin: 0 auto 3.4rem; } .apoiar__photo-wrap { margin: 0 -1.4rem 3.4rem; /* quebra o padding lateral da seção -> mosaico de fora a fora */ line-height: 0; } .apoiar__photo { display: block; width: 100%; height: auto; } .apoiar__header h2 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); color: var(--ink); text-align: center; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; } .apoiar__cards { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .apoiar-card { background: var(--white); border: 1px solid rgba(35,23,28,.05); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; } .apoiar-card h3 { font-size: 1.3rem; color: var(--red); margin-bottom: 1rem; } .apoiar-card p { color: var(--muted); margin-bottom: 1.5rem; font-size: .95rem; flex: 1; } .apoiar__footer { max-width: var(--maxw); margin: 3rem auto 0; text-align: center; } /* ========================================================= SEÇÃO 3 — COMPROMISSOS (Zigue-Zague) ========================================================= */ .causas { padding: 90px 1.4rem; text-align: center; background: var(--cream-2); } .causas__list { max-width: var(--maxw); margin: 56px auto 0; display: flex; flex-direction: column; gap: 2rem; } .causa { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; align-items: center; text-align: left; background: var(--white); border-radius: var(--radius); padding: 2rem 2.4rem; box-shadow: var(--shadow-sm); border: 1px solid rgba(35,23,28,.05); transition: transform .2s, box-shadow .2s; } .causa:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .causa--rev { grid-template-columns: 1fr 180px; } .causa--rev .causa__icon { order: 2; } .causa--rev .causa__body { order: 1; } .causa__icon { width: 150px; height: 150px; border-radius: 28px; margin: auto; color: var(--red); display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #f6ddd7, #efe2ce); } .causa__icon svg { width: 74px; height: 74px; } .causa__icon-img { height: 72px; width: auto; object-fit: contain; display: block; } .causa__body h3 { font-size: 1.55rem; color: var(--red); margin-bottom: .5rem; } .causa__body p { color: var(--muted); } /* ========================================================= NOVA SEÇÃO — CORTES (Scroll Horizontal) ========================================================= */ .cortes { padding: 90px 0 90px 1.4rem; background: var(--cream); overflow: hidden; } .cortes h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); margin-bottom: .4rem; max-width: var(--maxw); margin-inline: auto; padding-right: 1.4rem; } .cortes__star { color: var(--blue); } .cortes__hint { max-width: var(--maxw); margin: 0 auto 2rem; padding-right: 1.4rem; color: var(--muted); font-size: .95rem; } .cortes-scroll { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 2rem; scroll-snap-type: x mandatory; max-width: var(--maxw); margin: 0 auto; } .cortes-scroll::-webkit-scrollbar { height: 8px; } .cortes-scroll::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 4px; } .corte-item { flex: 0 0 280px; scroll-snap-align: start; color: #fff; border-radius: var(--radius-sm); height: 460px; display: flex; align-items: flex-end; text-align: left; padding: 1.4rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; background: linear-gradient(160deg, #2a1a20 0%, var(--ink) 58%, #120b0e 100%); border: 1px solid rgba(255,255,255,.06); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; font-family: var(--font-display); appearance: none; -webkit-appearance: none; } .corte-item:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .corte-item__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .corte-item::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 55% at 50% 0%, rgba(26,110,234,.28), transparent 60%), linear-gradient(180deg, transparent 38%, rgba(0,0,0,.66) 100%); } .corte-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .corte-item__play { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; z-index: 2; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: grid; place-items: center; transition: background .2s ease, transform .2s ease, border-color .2s ease; } .corte-item__play::before { content: ''; width: 0; height: 0; margin-left: 5px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .corte-item:hover .corte-item__play { background: var(--red); border-color: var(--red); transform: translate(-50%,-50%) scale(1.08); } .corte-item h3 { font-size: 1.02rem; line-height: 1.3; position: relative; z-index: 2; } .corte-item__idx { position: absolute; top: 1rem; left: 1.2rem; z-index: 2; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: rgba(255,255,255,.55); letter-spacing: .05em; } /* ---------- Modal de vídeo ---------- */ .video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.2rem; } .video-modal.is-open { display: flex; } .video-modal__backdrop { position: absolute; inset: 0; background: rgba(18,11,14,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .3s ease; } .video-modal__dialog { position: relative; z-index: 2; width: min(420px, 92vw); animation: fade .3s ease; } .video-modal__title { color: #fff; text-align: center; font-size: 1.05rem; margin-bottom: .9rem; padding: 0 2.4rem; } .video-modal__frame { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-modal__close { position: absolute; top: -3rem; right: 0; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; transition: background .2s; } .video-modal__close:hover { background: var(--red); } /* ========================================================= NOVA SEÇÃO — INSTAGRAM ========================================================= */ .instagram { padding: 90px 1.4rem; background: var(--white); text-align: center; } .ig { max-width: var(--maxw); margin: 0 auto; text-align: left; } .ig__profile { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.4rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(35,23,28,.10); } .ig__avatar { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex-shrink: 0; padding: 3px; background-image: linear-gradient(45deg,#f09433,#dc2743,#bc1888); } .ig__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #fff; background: var(--cream); } .ig__meta { display: flex; flex-direction: column; } .ig__name { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); } .ig__verified { width: 18px; height: 18px; } .ig__handle { color: var(--blue); font-weight: 500; font-size: .95rem; } .ig__handle:hover { text-decoration: underline; } .ig__follow { margin-left: auto; } .insta-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .insta-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); transition: transform .2s ease, box-shadow .2s ease; } .insta-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .insta-item__icon { width: 42px; height: 42px; opacity: .95; } .insta-item__cta { position: absolute; inset-inline: 0; bottom: 10px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; } .insta-item:hover .insta-item__cta { opacity: 1; transform: none; } .insta-item--photo { background: var(--igbg, var(--cream-2)); } .insta-item--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .insta-item__ov { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(18,11,14,.30); color: #fff; opacity: 0; transition: opacity .2s ease; } .insta-item--photo:hover .insta-item__ov { opacity: 1; } .insta-item__ov svg { width: 40px; height: 40px; } /* Grade do feed real (embeds oficiais do Instagram) */ .ig-feed { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(296px, 1fr)); gap: 1.2rem; align-items: start; } .ig-feed .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; } /* ========================================================= SEÇÃO 5 — PROJETOS EM AÇÃO ========================================================= */ .projetos { padding: 90px 1.4rem; text-align: center; background: linear-gradient(180deg, var(--cream-2), var(--cream)); } .pls { max-width: 920px; margin: 52px auto 0; display: flex; flex-direction: column; gap: 1rem; text-align: left; } .pl { background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); border: 1px solid rgba(35,23,28,.06); overflow: hidden; } .pl summary { list-style: none; cursor: pointer; padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pl summary::-webkit-details-marker { display: none; } .pl__head { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; } .pl__num { font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: .85rem; letter-spacing: .08em; } .pl__name { font-size: 1.15rem; color: var(--ink); font-weight: 700; font-family: var(--font-display); } .pl__area { font-size: .85rem; color: var(--muted); } .pl__meta { display: flex; align-items: center; gap: 1rem; } .pl__chev { width: 24px; height: 24px; color: var(--red); transition: transform .3s; flex-shrink: 0; } .pl[open] .pl__chev { transform: rotate(180deg); } .tag { font-family: var(--font-display); font-weight: 600; font-size: .78rem; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; } .tag--ok { background: #e4f5ec; color: #1f8f57; } .tag--wait { background: #fdf2e2; color: #c98a17; } .pl__content { padding: 0 1.6rem 1.6rem; color: var(--muted); animation: fade .3s ease; } .pl__content p { margin-bottom: .4rem; } @keyframes fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ========================================================= SEÇÃO 4 — IDEIAS ========================================================= */ .ideias { padding: 90px 1.4rem; background: var(--cream); } .ideias__inner { max-width: 1000px; margin: auto; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--red), var(--red-d)); color: #fff; border-radius: var(--radius); padding: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .ideias__stars { position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(2px 2px at 15% 25%, var(--blue) 50%, transparent), radial-gradient(1.5px 1.5px at 75% 70%, #fff 50%, transparent), radial-gradient(2px 2px at 45% 85%, #fff 50%, transparent); } .ideias__text { position: relative; z-index: 2; } .ideias__text h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1rem; color: #fff; } .ideias__text p { color: rgba(255,255,255,.85); } .form { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; } .field { display: flex; flex-direction: column; gap: .35rem; } .field label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; } .field input, .field textarea { font-family: var(--font-body); font-size: 1rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.6); } .field input:focus, .field textarea:focus { outline: 2px solid var(--blue); background: rgba(255,255,255,.18); } .ideias .btn--primary { background: var(--white); color: var(--red); box-shadow: 0 10px 24px rgba(0,0,0,.18); } .ideias .btn--primary:hover { background: var(--cream); } .form__feedback { margin-top: .2rem; min-height: 1.2em; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.9); } .form__feedback.ok { color: #d9ffe7; } .form__feedback.err { color: #ffe0e0; } /* ========================================================= SEÇÃO 6 — MOBILIZA AI (Existente) ========================================================= */ .mobiliza { padding: 90px 1.4rem; background: linear-gradient(180deg, var(--cream), var(--cream-2)); text-align: center; } .mobiliza__inner { max-width: 760px; margin: auto; } .mobiliza h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--red); margin: .4rem 0 1rem; } .mobiliza__sub { color: var(--muted); font-size: 1.08rem; } .mobiliza__card { margin-top: 2.4rem; background: var(--white); border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow); border: 1px solid rgba(168,15,20,.18); } .mobiliza__card h3 { font-size: 1.4rem; color: var(--red); margin-bottom: .7rem; } /* ========================================================= SEÇÃO 7 — RODAPÉ ========================================================= */ .footer { background: var(--ink); color: #fff; padding: 56px 1.4rem 40px; } .footer__inner { max-width: var(--maxw); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; } .footer__brand { display: flex; flex-direction: column; } .footer__name { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; } .footer__tag { color: var(--blue); font-family: var(--font-display); font-weight: 600; } .footer__social { display: flex; gap: 1rem; } .footer__social a { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff; transition: .2s; } .footer__social a:hover { background: var(--red); transform: translateY(-3px); } .footer__social svg { width: 22px; height: 22px; } .footer__copy { color: rgba(255,255,255,.6); font-size: .85rem; } /* Botão flutuante WhatsApp */ .whats { position: fixed; bottom: 22px; right: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.45); transition: transform .2s; transform: translateZ(0); } .whats:hover { transform: scale(1.08) translateZ(0); } /* ========================================================= REVEAL AO ROLAR (ativa somente quando o JS adiciona .has-reveal; se o JS não rodar, nada fica escondido — degrada com segurança) ========================================================= */ .has-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .has-reveal .reveal[data-reveal="left"] { transform: translateX(-30px); } .has-reveal .reveal[data-reveal="right"] { transform: translateX(30px); } .has-reveal .reveal[data-reveal="zoom"] { transform: scale(.9); } .has-reveal .reveal[data-reveal="scale"] { transform: scale(.96); } .has-reveal .reveal[data-reveal="up"] { transform: translateY(24px); } .has-reveal .reveal.reveal--in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-reveal .reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================= RESPONSIVO ========================================================= */ @media (max-width: 900px) { /* ========================================================================= NO CELULAR A FOTO E A ESTRELA ENTRAM NO MEIO DO TEXTO ------------------------------------------------------------------------- Ordem pedida: título, selo "DEPUTADA ESTADUAL 13333", **foto + estrela**, contador de dias, texto e botões. Para a figura ficar ENTRE dois blocos de texto ela precisa ser IRMÃ deles na mesma caixa flex — e não era: o texto mora em .hero__content, dentro de .hero__content-wrapper, e a figura é irmã do wrapper. Dois níveis de caixa separavam os dois. `display: contents` dissolve essas duas caixas só no celular: os filhos sobem e viram irmãos da figura dentro do .hero__inner. Aí o `order` funciona. É o mesmo recurso que a moldura.php usa para fundir as duas trilhas de redes numa lista só. O PREÇO, e por isso as regras abaixo: caixa dissolvida leva junto o padding e as margens dela. O recuo do texto vinha do .hero__content-wrapper, então é reposto item a item. A figura fica de fora do recuo de propósito — ela sangra de ponta a ponta. Consequência que vale saber: a foto deixa de ficar apoiada no rodapé do hero (ela era o último bloco). Agora ela é um bloco do meio, com o contador e os botões embaixo. É o que o pedido implica. ========================================================================= */ .hero__content-wrapper, .hero__content { display: contents; } .hero__inner { display: flex; flex-direction: column; padding: 40px 0 0; } .hero__title { order: 2; } .num-selo-linha { order: 3; } .hero__figure { order: 4; } .contador { order: 5; } .hero__lead { order: 6; } .hero__ctas { order: 7; } /* recompõe o recuo que era do .hero__content-wrapper (padding-left 1.8rem) */ /* .hero__eyebrow saiu desta lista: ele está DENTRO do .hero__title e já recebe o recuo do pai. Ficando aqui, o recuo entrava duas vezes. */ .hero__title, .num-selo-linha, .contador, .hero__lead, .hero__ctas { padding-left: 1.8rem; padding-right: 1.4rem; } /* o texto e os botões respiram embaixo, já que a foto não fecha mais o hero */ .hero__ctas { padding-bottom: 2.4rem; } /* a figura entra colada nos vizinhos; o espaço vem dela mesma */ .hero__figure { margin: 1.6rem 0 1.2rem; } .hist { gap: .3rem; } .hist__card { padding: 1.8rem 1.1rem 1.2rem; } .hist__nav { width: 40px; height: 40px; font-size: 1.5rem; } .gauge { width: min(300px, 94%); } .ideias__inner { grid-template-columns: 1fr; padding: 2.2rem; } } @media (max-width: 760px) { .nav__links { position: fixed; inset: 64px 0 auto 0; background: var(--cream); flex-direction: column; gap: 0; padding: 1rem 1.4rem 1.6rem; box-shadow: var(--shadow); transform: translateY(-140%) translateZ(0); } .nav__links.is-open { transform: translateY(0) translateZ(0); } .nav__toggle { display: flex; } .causa, .causa--rev { grid-template-columns: 1fr; text-align: center; gap: 1rem; } .causa--rev .causa__icon, .causa--rev .causa__body { order: 0; } } /* ========================================================= AJUSTE FINO PARA CELULARES (≤640px) Apenas otimização mobile — NÃO altera o layout desktop. ========================================================= */ @media (max-width: 640px) { /* Densidade vertical mais compacta (mantém o padding lateral de 1.4rem, preservando o mosaico "de fora a fora" da seção Apoiar) */ .sobre { padding-top: 64px; padding-bottom: 74px; } .apoiar { padding-top: 62px; padding-bottom: 62px; } .causas { padding-top: 62px; padding-bottom: 62px; } .cortes { padding-top: 62px; padding-bottom: 62px; } .instagram { padding-top: 62px; padding-bottom: 62px; } .projetos { padding-top: 62px; padding-bottom: 62px; } .ideias { padding-top: 62px; padding-bottom: 62px; } .mobiliza { padding-top: 62px; padding-bottom: 62px; } /* Carrossel "Sobre": as setas descem para baixo do card e o card passa a ocupar 100% da largura — nada mais é cortado */ .hist { flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 40px; } .hist__card { flex: 1 1 100%; order: 0; padding: 1.6rem 1.2rem 1.3rem; } .hist__slide { min-width: 0; min-height: 200px; padding: 0 .15rem; } .hist__nav { order: 1; width: 46px; height: 46px; font-size: 1.6rem; } /* Trajetória empilhada: cada cartão vira uma linha (ano + cargo) */ .trajetoria { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.5rem; } .traj-card { display: flex; align-items: center; gap: .95rem; text-align: left; padding: .85rem 1.1rem; } .traj-card__year { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; min-width: 2.7em; } .traj-card__role { margin: 0; } .traj-card__votes { margin-left: auto; } /* Instagram: uma coluna (o mínimo de 296px estouraria em telas ~320px) */ .ig-feed { grid-template-columns: 1fr; } /* Cortes: cartão um pouco menor, encaixa melhor no viewport do celular */ .corte-item { flex-basis: 258px; height: 420px; } /* Formulário de ideias e card do mobiliza mais enxutos */ .ideias__inner { padding: 1.8rem 1.4rem; gap: 1.6rem; } .mobiliza__card { padding: 1.9rem 1.4rem; } } /* ========================================================= CAMPANHA 2026 — IDENTIDADE OFICIAL 13333 --------------------------------------------------------- Bloco no FIM do arquivo de propósito: por cascata ele vence as regras da pré-campanha sem que ninguém precise caçar e reescrever as 800 linhas acima. O SISTEMA, em uma frase: AMARELO é o campo da página, BRANCO é onde se lê, ROXO é a letra e as faixas escuras, ROSA é o botão, VERDE é o detalhe. Foi montado a partir do que a marca faz: a arte oficial é roxo + rosa + amarelo + verde sobre branco. ========================================================= */ /* ---- Superfícies de leitura: BRANCAS ---- O amarelo #F8BD00 é ótimo como campo e péssimo como fundo de parágrafo: texto longo sobre amarelo saturado cansa. Então tudo que tem texto corrido virou branco, e o amarelo aparece em volta. Sem isto os cartões (que herdam var(--cream)) ficariam amarelos sobre fundo amarelo — ou seja, invisíveis. */ .mobiliza__card, .ig__avatar { background: var(--white); } /* A LISTA ACIMA É CURTA DE PROPÓSITO — e já foi longa demais uma vez. .apoiar-card, .pl e .causa JÁ eram var(--white) desde a pré-campanha: repetir aqui era regra morta. .hist__card e .corte-item são o oposto: nasceram para viver DENTRO de faixa escura. O .hist__card é rgba(255,255,255,.08) translúcido e o .corte-item é uma capa de vídeo escura — os dois com texto BRANCO. Pintar os dois de branco apagou o texto por completo (branco no branco). Ficam como estavam. Mesma coisa com .sobre e .ideias__inner: são faixas com gradiente de var(--red) e texto branco em cima. Como --red agora é o ROSA da marca, elas viraram faixas rosa sozinhas, que é uma cor da identidade. */ /* ---- Texto ---- Roxo lê sobre branco (9,5:1) e sobre amarelo (6,6:1), então serve de cor de texto em todo o site sem exceção. */ .section-title, .hero__title { color: var(--roxo); } /* "nossa vez." usa o rosa um tom abaixo. O #DE0049 puro sobre o amarelo dá 2,9:1 e o mínimo para texto grande é 3:1 — passa raspando por baixo. O --rosa-txt dá 3,6:1 e, num título de 5rem, a diferença de tom é imperceptível. Mesma ideia do --verde-txt. */ .hero__title span { color: var(--rosa-txt); } /* Olho-mágico de seção em ROXO, não em rosa: ele é texto pequeno (12,5px) e precisa de 4,5:1. Rosa sobre amarelo dá 2,9:1; roxo dá 6,6:1 sobre amarelo e 9,5:1 sobre branco, então serve nas duas superfícies claras. */ .section-eyebrow { color: var(--roxo); } /* Sobre as faixas ESCURAS o olho-mágico vira claro. */ .sobre .section-eyebrow { color: var(--white); } .section-eyebrow--light { color: var(--amarelo); } /* Verde escurecido onde o acento é LETRA sobre superfície CLARA (o verde puro dá 3,2:1 sobre branco, reprovado para texto). */ .hist__num { color: var(--verde-txt); } .cortes__star { color: var(--rosa); } /* Sobre superfície ESCURA o verde escuro desaparece — ali o acento é AMARELO. O .traj-card__votes fica: ele não existe no index atual, mas existe no index1/index3/indexantigo, que compartilham esta folha. */ .traj-card__year { color: var(--amarelo); } .traj-card__votes strong { color: var(--amarelo); } /* O @ do Instagram fica sobre AMARELO: verde escuro ali dá 3,1:1. Roxo dá 6,6. */ .ig__handle { color: var(--roxo); } /* ---- Botões ---- Primário ROSA com letra branca (4,6:1). Verde é o secundário, também com letra branca. Amarelo nunca é botão com letra branca: daria 1,4:1. */ .btn--primary { background: var(--rosa); color: var(--white); box-shadow: 0 10px 24px rgba(222,0,73,.32); } .btn--primary:hover { background: var(--rosa-d); } .btn--ghost { color: var(--roxo); border-color: var(--roxo); } .btn--ghost:hover { background: var(--roxo); color: var(--white); } /* O botão verde usa o VERDE ESCURO como fundo, não o verde da marca. Branco sobre #57A52A dá 3,1:1 e botão é texto normal, que precisa de 4,5:1. Sobre #3D7A18 dá 5,1:1. O verde puro segue sendo usado para preencher (bolinhas, tags de ícone), onde não há letra em cima. */ .btn--blue { background: var(--verde-txt); color: var(--white); box-shadow: 0 10px 24px rgba(61,122,24,.32); } .btn--blue:hover { background: var(--roxo); color: var(--white); } .btn--build { background: var(--white); color: var(--roxo); border-color: var(--roxo); } .btn--build:hover { background: var(--roxo); color: var(--white); } .btn--build-light { background: var(--white); color: var(--roxo); border-color: var(--white); } .btn--build-light:hover { background: var(--amarelo); color: var(--roxo); } .link-arrow { color: var(--verde-txt); } .link-arrow:hover { color: var(--roxo); } /* ---- Menu ---- Barra BRANCA, e não amarela: é onde a marca oficial mora, e a marca oficial foi desenhada sobre branco. */ .nav { background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(104,16,129,.14); } .nav__cta { background: var(--rosa); } .nav__cta:hover { background: var(--rosa-d); } .nav__links a:not(.nav__cta)::after { background: var(--rosa); } /* O lockup oficial é largo (V + nome + 13333), então precisa de espaço para o número não virar borrão. */ .nav__brand-logo { max-width: 230px !important; } @media (max-width: 760px) { .nav__brand-logo { max-width: 172px !important; } .nav__links { background: var(--white); } } /* ---- Hero ---- Amarelo chapado, sem o gradiente avermelhado que a pré-campanha punha por cima. */ .hero { background: linear-gradient(180deg, var(--amarelo) 0%, var(--amarelo-d) 100%); } .hero__eyebrow { background: var(--roxo); color: var(--white); box-shadow: none; } .hero__vertical-bar { background: var(--roxo); } .hero__lead { color: var(--roxo); opacity: .9; } /* A ESTRELA É SÓ A FORMA — A MARCA SAIU DE DENTRO DELA. Por um tempo a estrela foi um PNG com a marca recortada no meio. Não dá mais: a foto da Paula entrou no hero e fica na frente exatamente da faixa central da estrela, que é onde a marca ficava. No desktop o corpo dela partia o lockup ao meio — sobrava "PAULA VICENTE" de um lado e "33" do outro; no celular cobria de "PAUL/VICEN" para a direita. E não adianta deslocar: no celular a placa da marca tem 306px e ela tem 235px, numa tela de 390px. São 541px de conteúdo para 390 de espaço. Não existe posição que resolva — um dos dois tem que sair. Saiu a marca, que ganhou lugar próprio na faixa sobre as pernas (`.hero__faixa`), onde ela é lida inteira. A estrela voltou ao polígono em CSS da regra lá de cima: mesma forma, mesmo degradê da arte que era gerada, e sem imagem nenhuma para baixar. Por isso NÃO existe mais `clip-path: none` aqui — o polígono da regra de cima é justamente o que desenha a estrela. */ .hero__blob { background: radial-gradient(circle at 50% 38%, var(--rosa) 0%, var(--roxo-d) 100%); filter: drop-shadow(0 20px 34px rgba(78,12,99,.34)); animation: heroEstrelaMarca 3.6s ease-in-out infinite; } /* ---- A FAIXA DA MARCA: BRANCA, DE FORA A FORA, NO RODAPÉ DA HERO ---- Antes era uma etiqueta amarela dentro da foto, sobre as pernas. Virou faixa de ponta a ponta porque é assim que ela fecha a primeira tela: o olho desce pelo título, pelo número, pelos botões, e encontra a marca atravessando a página inteira. Continua usando a variação "_amarelo" do lockup mesmo com a faixa branca — o nome da variação diz para que FUNDO ela serve, e o que importa é que nela o 13333 é ROXO. Na versão padrão o número é amarelo: 1,7:1 sobre branco, invisível. Número de urna invisível é o pior defeito de uma peça de campanha. AS QUATRO MEDIDAS QUE ESTA REGRA TEM QUE RESPEITAR: 1. de fora a fora -> left/right 0, e por isso o elemento é filho do `.hero` (a caixa da foto tem 309-408px, nunca alcançaria as bordas da janela); 2. abaixo dos botões -> no desktop sobram ~100px entre o fim dos CTAs e o fim da hero (medido: 805->905 em 1280x800 e 755->880 em 1920x1080); a altura da faixa cabe aí com folga. No celular os botões são o último item da pilha, então lá a folga é reposta no padding deles; 3. nunca acima da cintura -> a blusa vermelha da foto termina em 58,9% da altura da imagem (medido pixel a pixel). A faixa ocupa os últimos ~10% da hero, muito abaixo disso; 4. nunca por cima do botão do WhatsApp -> ver o recuo lateral abaixo. */ .hero__foto-cx { position: relative; display: inline-block; line-height: 0; } .hero__faixa { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(64px, 8vh, 104px); display: flex; align-items: center; justify-content: center; /* ⚠️ O RECUO LATERAL É O BOTÃO DO WHATSAPP, NÃO ESTÉTICA. Ele é `position: fixed` no canto inferior direito (58px de lado, 37px da borda) e a faixa rola com a página: em alguma rolagem os dois SEMPRE se cruzam, e já medi que não existe altura de faixa que escape disso em todas as alturas de tela. A separação tem que ser horizontal — com este recuo o botão passa por cima de branco vazio, nunca por cima da marca. O mesmo valor dos dois lados para o logo ficar centrado de verdade. */ padding: 0 clamp(104px, 9vw, 168px); background: var(--white); border-top: 4px solid var(--rosa); box-shadow: 0 -8px 22px rgba(78,12,99,.14); line-height: 0; z-index: 3; /* acima da foto (2) e da estrela (1) */ } /* Altura manda, largura acompanha: assim a marca cresce com a faixa e nunca estica. O max-width impede que, em tela estreita, ela invada o recuo. */ .hero__faixa img { display: block; height: 62%; width: auto; max-width: 100%; } @media (max-width: 900px) { /* No empilhado os BOTÕES são o último item da pilha (order 7), então a faixa no rodapé passaria por cima deles. A folga é reposta aqui: o padding de baixo dos botões cresce exatamente a altura da faixa. Assim a regra de fora a fora vale igual no celular, sem cobrir botão nenhum. O recuo lateral (na regra base) resolve o botão do WhatsApp também aqui: numa tela de 390px o logo ocupa de 104 a 286, e o botão começa em 310. */ .hero__ctas { padding-bottom: calc(2.4rem + clamp(64px, 8vh, 104px)); } } /* PULSA, não balança. A versão anterior girava ±2,6 graus, e girar com a marca dentro deixava o nome e o número tortos indo e voltando — número de urna torto é o oposto do que a peça precisa. Pulso só cresce e volta: a marca fica sempre reta e legível. Escala pequena (5,5%) e 3,6s: pulso tem que dar batida, não susto. Em 11s, que era a duração do balanço, ninguém perceberia; abaixo de ~3s começa a parecer aviso de erro. O translate(8%,-50%) tem que ser repetido em TODOS os passos — é o posicionamento do elemento, não parte da animação. Esquecer isso joga a estrela para outro canto no meio do ciclo. */ @keyframes heroEstrelaMarca { 0%, 100% { transform: translate(16%, -50%) scale(1); } 50% { transform: translate(16%, -50%) scale(1.055); } } @media (prefers-reduced-motion: reduce) { .hero__blob, .hero__blob-blue, .hero__sparkle, .hero__stars { animation: none !important; } .hero__blob { transform: translate(16%, -50%); } } .hero__blob-blue { background: radial-gradient(circle at 45% 40%, var(--verde) 0%, #2F6A12 70%); } .hero__sparkle { color: var(--rosa); } .hero__dot { background: var(--verde); } /* ---- Selo do número ---- Repete a relação da marca: campo roxo, número amarelo. */ .num-selo { display: inline-flex; align-items: center; gap: .55rem; background: var(--roxo); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; padding: .5rem 1rem .5rem 1.05rem; border-radius: 8px; } .num-selo b { color: var(--amarelo); font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; } /* ---- Faixa da federação (dado legal no corpo da página) ---- */ .chapa { background: var(--roxo); color: rgba(255,255,255,.8); padding: 1.5rem 1.4rem; text-align: center; } .chapa__inner { max-width: var(--maxw); margin: auto; display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; align-items: center; justify-content: center; } .chapa__item { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .48rem .9rem; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; } .chapa__item b { color: var(--white); font-weight: 800; } .chapa__item--num b { color: var(--amarelo); font-size: 1.05rem; } /* ---- Seção da moldura ---- Faixa ROXA no meio da página amarela. É o bloco que a gente mais quer que a pessoa veja, e a troca de campo faz esse trabalho sozinha. */ .moldura-cta { background: var(--roxo); padding: clamp(56px,8vw,92px) 1.4rem; } .moldura-cta__inner { max-width: var(--maxw); margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px); align-items: center; } .moldura-cta__eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--amarelo); margin-bottom: .7rem; } .moldura-cta h2 { color: var(--white); font-size: clamp(1.9rem,4.4vw,3rem); line-height: 1.05; } .moldura-cta h2 b { color: var(--amarelo); } .moldura-cta p { color: rgba(255,255,255,.82); margin-top: 1rem; font-size: 1.04rem; max-width: 46ch; } .moldura-cta__lista { margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; } .moldura-cta__lista li { color: rgba(255,255,255,.88); font-size: .96rem; padding-left: 1.7rem; position: relative; margin-bottom: .5rem; } .moldura-cta__lista li::before { content: ""; position: absolute; left: 0; top: .48em; width: .62rem; height: .62rem; border-radius: 50%; background: var(--verde); } .moldura-cta__figura { display: flex; justify-content: center; } /* AMOSTRA REAL, gerada pela própria moldura.php. Antes aqui havia um anel desenhado em CSS; ele imitava a moldura mas mostrava um círculo chapado, e como argumento de venda não funcionava — a pessoa não via o que ia receber. A imagem já vem com o fundo roxo da campanha nos cantos, o que casa com a faixa e faz o círculo parecer recortado. */ .moldura-cta__amostra { width: min(340px, 76vw); height: auto; border-radius: 50%; box-shadow: 0 22px 60px rgba(0,0,0,.34); } @media (max-width: 900px) { .moldura-cta__inner { grid-template-columns: 1fr; text-align: center; } .moldura-cta p, .moldura-cta__lista { margin-inline: auto; } .moldura-cta__lista { display: inline-block; text-align: left; } .moldura-cta__figura { order: -1; } } /* ---- Ritmo das faixas ---- Sem isto a página vira um bloco só de amarelo, do topo ao rodapé. A sequência ficou: amarelo (hero) / roxo (faixa legal) / rosa (sobre) / branco / amarelo / branco / roxo (moldura) / amarelo / roxo (mobiliza) / branco / amarelo (ideias, com card rosa) / roxo (rodapé). A .sobre não aparece aqui porque o gradiente rosa dela já vem de cima. */ .causas { background: var(--amarelo); } .cortes { background: var(--white); } .instagram { background: var(--amarelo); } .projetos { background: var(--white); } .galeria { background: var(--white); } .apoiar { background: var(--white); } /* Mobiliza: faixa roxa */ .mobiliza { background: var(--roxo); } .mobiliza h2 { color: var(--white); } .mobiliza__sub { color: rgba(255,255,255,.84); } .mobiliza__card h3 { color: var(--roxo); } .mobiliza__card p { color: var(--muted); } /* Tags dos projetos de lei. Mesma regra do botão: letra branca pede o verde escuro. A tag "em tramitação" fica amarela com letra roxa (6,6:1). */ .tag--ok { background: var(--verde-txt); color: var(--white); } .tag--wait { background: var(--amarelo); color: var(--roxo); } /* ---- Consentimento LGPD no formulário ---- ELE VIVE DENTRO DO CARD ROSA (.ideias__inner), não numa superfície branca. Na primeira versão eu pintei o texto de roxo dessaturado e o link de rosa: o texto ficou em 2:1 e o link, rosa sobre rosa, ficou LITERALMENTE invisível. Num aceite de LGPD isso é grave — a pessoa tem que conseguir ler o que está aceitando e chegar na política. Aqui é texto claro sobre rosa. */ .consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: rgba(255,255,255,.92); line-height: 1.55; margin: .2rem 0 1rem; } .consent input { margin-top: .22rem; width: 1.05rem; height: 1.05rem; accent-color: var(--amarelo); flex-shrink: 0; } .consent a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .consent a:hover { color: var(--amarelo); } /* ---- Botão flutuante do WhatsApp ---- Era o verde do WhatsApp; virou o verde DA MARCA, que por sorte também é verde. Continua reconhecível pelo ícone. */ .whats { background: var(--verde) !important; color: var(--white) !important; } .whats:hover { background: var(--roxo) !important; color: var(--white) !important; } /* --------------------------------------------------------- AJUSTE DE LEGIBILIDADE SOBRE AS FAIXAS COLORIDAS --------------------------------------------------------- Rodei um verificador de contraste na página (compondo as camadas translúcidas sobre o pai, senão dá falso positivo em cartão de vidro). Tudo abaixo estava REPROVADO e é correção, não gosto. O padrão do problema é sempre o mesmo: texto branco com alpha baixo (.85, .9) herdado da pré-campanha. Sobre o vermelho antigo aquilo passava; sobre o ROSA da marca, que é mais claro, não passa mais. Onde o texto é corpo de leitura, virou branco cheio. --------------------------------------------------------- */ /* Faixa ROSA (.sobre e o card de ideias): corpo de texto em branco cheio */ .sobre .section-sub, .hist__slide p, .traj-card__role, .ideias__text p, .consent { color: var(--white); } /* VIDRO ESCURO, NÃO CLARO. Os cartões dentro da faixa rosa eram rgba(255,255,255,.08) e .1 — vidro CLAREADO. Sobre o vermelho antigo isso funcionava; sobre o rosa da marca deixava o fundo ainda mais claro, e aí nem o amarelo nem o branco cheio alcançavam contraste (o "01" ficava em 2,6:1 e o ano da trajetória em 2,5:1). Invertendo para vidro ESCURO o fundo desce, e as duas cores da marca voltam a ser usáveis ali: branco vai a 6,4:1 e amarelo a 3,7:1. Foi o ajuste que resolveu a causa em vez de ir trocando cor de letra. */ .hist__card { background: rgba(0,0,0,.14); border-color: rgba(255,255,255,.3); } /* ---- CARTÕES DA TRAJETÓRIA: UMA COR DA CAMPANHA EM CADA ---- Eram vidro translúcido sobre a faixa rosa. Agora cada um recebe uma cor chapada da marca. A escolha das três não é livre: a faixa atrás é ROSA, então rosa está fora (o cartão sumiria). Sobram roxo, verde e amarelo — e é exatamente o que entra, na ordem da linha do tempo. O amarelo fica no ÚLTIMO, que é o cartão em destaque ("2025, assume o mandato"): é a cor mais clara das três, então ele salta sozinho sem precisar de truque de borda ou sombra. Antes esse papel era do branco. Cor de letra em cada um foi medida, não escolhida a olho: - sobre roxo: branco 10,6:1 e o ano em amarelo 6,6:1 - sobre verde ESCURO (--verde-txt): branco 5,1:1. O verde puro #57A52A daria 3,1:1 com branco, que reprova em texto normal — daí o tom escuro. E o ano vai de BRANCO aqui, porque amarelo sobre esse verde dá 3,0:1, em cima do limite. - sobre amarelo: roxo 6,6:1 nos dois. */ .traj-card:nth-of-type(1) { background: var(--roxo); border-color: rgba(255,255,255,.26); } .traj-card:nth-of-type(2) { background: var(--verde-txt); border-color: rgba(255,255,255,.26); } .traj-card:nth-of-type(2) .traj-card__year { color: var(--white); } .traj-card--highlight { background: var(--amarelo); border-color: transparent; } .traj-card--highlight .traj-card__year { color: var(--roxo); } .traj-card--highlight .traj-card__role { color: var(--roxo); font-weight: 600; } /* Com o vidro escuro, o "01" e o ano podem ser AMARELO — a cor da marca. O "01" também cresceu: a 20px em peso 800 ele entra na régua de texto grande, onde o mínimo cai de 4,5:1 para 3:1. */ .hist__num { color: var(--amarelo); font-size: 1.25rem; } .traj-card__year { color: var(--amarelo); } /* O rodapé NÃO é ajustado daqui. Ele tem