/* ============================================================ /brasileirospelomundo — cadastro de apoiadores no exterior Herda do styles.css global (fontes, cores, header, formulário, botão .btn-doe). Escala em rem do artboard de 1920px (design.md). ============================================================ */ .bpm-kicker, .bpm-abertura h1 { font-family: 'Anybody', sans-serif; } /* header de página interna, mais baixo que o da home */ .site-header { height: 1.4rem; } .header-logo img { width: 1.35rem; } /* ---------- Abertura (azul) ---------- */ .bpm-abertura { position: relative; z-index: 3; background: var(--azul); border-radius: 0 0 1rem 1rem; padding: 0.8rem 0 1.1rem; text-align: center; } .bpm-kicker { color: var(--amarelo); font-size: 0.42rem; font-weight: 900; font-stretch: 90%; letter-spacing: 0.22em; } .bpm-abertura h1 { margin-top: 0.2rem; color: var(--creme); font-size: 1.5rem; font-weight: 900; font-stretch: 64%; line-height: 0.94; } .bpm-texto { width: 13rem; max-width: 100%; margin: 0.45rem auto 0; color: var(--creme); font-size: 0.4rem; font-weight: 500; line-height: 1.3; } .bpm-texto:first-of-type { margin-top: 0.6rem; } /* ---------- Cadastro (creme) ---------- */ /* sobe por trás da abertura; o padding extra fica escondido sob o azul */ .bpm-cadastro { margin-top: -1rem; padding-top: 1.7rem; } /* ---------- WhatsApp internacional (intl-tel-input) ---------- */ /* o plugin embrulha o input num .iti: ele vira a célula do grid. A fonte precisa ser declarada aqui — sem isso, o código do país herda o 1rem da escala do artboard e aparece gigante. */ .form-grid .iti { width: 100%; font-size: 0.33rem; --iti-border-color: var(--preto); --iti-icon-color: var(--preto); --iti-hover-color: rgba(231, 194, 78, 0.35); --iti-flag-width: 0.28rem; --iti-arrow-size: 0.05rem; --iti-arrow-padding: 0.08rem; --iti-spacer-horizontal: 0.14rem; --iti-globe-icon-size: 0.24rem; } /* bandeira + código ocupam o início da cápsula, alinhados com o texto dos outros campos */ .form-grid .iti__selected-country, .form-grid .iti__selected-country-primary { border-radius: 1rem 0 0 1rem; } .form-grid .iti__selected-country-primary { padding-left: 0.24rem; } .form-grid .iti__selected-dial-code { color: var(--preto); font-weight: 500; } .form-grid .iti__flag { box-shadow: 0 0 0 0.01rem rgba(19, 19, 18, 0.25); } /* sem país escolhido: o campo inteiro fica com cara de desabilitado */ .form-grid .iti:has(input:disabled) .iti__selected-country { cursor: not-allowed; opacity: 0.55; } /* aviso de que a bandeira do WhatsApp é independente do país onde a pessoa mora. No desktop fica embaixo da 3ª coluna (a do WhatsApp); no celular, logo abaixo do campo. */ .tel-dica { margin-top: 0.16rem; margin-left: auto; width: calc((100% - 0.7rem) / 3); padding-left: 0.38rem; color: var(--preto); opacity: 0.75; font-size: 0.26rem; font-weight: 500; line-height: 1.35; } /* lista de países: card branco com borda preta e sombra dura, como o resto do site */ .form-grid .iti__country-selector { font-size: 0.3rem; color: var(--preto); border: 0.022rem solid var(--preto); border-radius: 0.2rem; box-shadow: 0.1rem 0.1rem 0 var(--amarelo); overflow: hidden; } /* desktop: largura fixa, cabe "Países Baixos Caribenhos (+599)" sem quebrar. O plugin grava a largura do campo inline no elemento; o !important vence. */ .form-grid .iti--inline-country-selector .iti__country-selector { width: 5.6rem !important; } /* no celular a lista abre em tela cheia, pendurada no : sem fonte explícita ela herda o 1rem da escala e fica gigante */ .iti--fullscreen-popup { font-family: 'PP Neue Machina', sans-serif; font-size: 0.36rem; color: var(--preto); } .iti__search-input { font-family: 'PP Neue Machina', sans-serif; } .iti__country.iti__highlight { background: rgba(231, 194, 78, 0.35); } .iti__dial-code { color: rgba(19, 19, 18, 0.6); } /* ---------- Mobile ---------- */ @media (max-width: 720px) { .site-header .wrap { padding: 0 0.35rem; } .header-logo img { width: 1.1rem; } .bpm-abertura { border-radius: 0 0 0.6rem 0.6rem; padding: 0.6rem 0.45rem 0.9rem; } .bpm-kicker { font-size: 0.3rem; letter-spacing: 0.16em; } .bpm-abertura h1 { font-size: 0.8rem; } .bpm-abertura h1 br { display: none; } .bpm-texto { width: auto; font-size: 0.38rem; } .bpm-cadastro { margin-top: -0.6rem; padding-top: 1.3rem; } .form-grid .iti { font-size: 0.34rem; --iti-flag-width: 0.42rem; --iti-arrow-size: 0.08rem; --iti-arrow-padding: 0.12rem; --iti-spacer-horizontal: 0.2rem; } .form-grid .iti__selected-country-primary { padding-left: 0.3rem; } .tel-dica { width: auto; padding-left: 0.3rem; font-size: 0.28rem; } }