/* ========================================================================== Casa Conexão — folha de estilo única Fontes auto-hospedadas em /fontes (regra 9.1 do protocolo: nada de CDN). ========================================================================== */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fontes/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fontes/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fontes/marcellus-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fontes/marcellus-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- tokens ------------------------------------------------------------- */ :root { --verde: #2E3A2C; --verde-fundo: #1f2a1e; --carvao: #262420; --creme: #F4EFE6; --creme-claro: #FDFBF6; --linho: #EDE5D4; --areia: #E3D9C6; --borda: #DDD2BF; --cobre: #B4643C; --cobre-fundo: #9a5330; --cobre-texto: #8f4c2c; /* O cobre do design (#B4643C) dá 4,21:1 com o creme, abaixo do mínimo de 4,5:1 para texto. Escurecido só no preenchimento de botão: 4,72:1. */ --cobre-botao: #AA5C36; /* Quem decide a cor do acento é a SUPERFÍCIE, não o componente (regra 9.8). Claro por padrão; as seções escuras redefinem logo abaixo. */ --acento-texto: #8f4c2c; --texto: #262420; --texto-suave: #55503f; --texto-fraco: #6b6455; --claro-70: rgba(244, 239, 230, 0.78); --claro-60: rgba(244, 239, 230, 0.72); /* 1240 e não 1120: alargar o container é o que move o conteúdo para a esquerda SEM desalinhar nada. Menu, sobrancelha, título, botões, títulos de seção e rodapé saem todos do mesmo `--largura`, e por isso nasciam todos na mesma vertical. Empurrar só a hero teria quebrado essa coluna, que é do desenho e não coincidência. Em 1422px de janela, o conteúdo sai de x=175 para x=115. */ --largura: 1240px; --respiro: 24px; --raio: 6px; --curva: cubic-bezier(0.23, 1, 0.32, 1); --tempo: 180ms; } /* --- base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--creme); color: var(--texto); font-family: 'Jost', system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; } a { color: var(--cobre-texto); text-decoration: none; } a:hover { color: var(--cobre-fundo); } *:focus-visible { outline: 3px solid var(--cobre); outline-offset: 2px; border-radius: 2px; } img, svg { max-width: 100%; } /* --- barra de rolagem ---------------------------------------------------- * A nativa sai e entra a nossa (js/barra.js), que aparece ao rolar, some sozinha e não tem setinha nas pontas — as três coisas que a nativa não faz. A nativa só some quando `tem-js` está no , e quem põe essa classe é um script no . Sem JavaScript ela fica: nunca existe página sem forma de rolar. Estar no também evita o pulo de 10px que apareceria se a classe entrasse depois da primeira pintura. No toque nada disso liga: a barra nativa do celular já se esconde sozinha. * ------------------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { html.tem-js { scrollbar-width: none; -ms-overflow-style: none; } html.tem-js::-webkit-scrollbar { display: none; } } .barra-rolagem { /* Recuo das duas pontas para a barra não encostar na borda da janela e parecer que continua para fora do site. Simétrico de propósito: com recuo só em cima, o polegar encostaria embaixo ao chegar no fim da página e leria como erro. Quem manda na conta do polegar é a altura real do trilho, lida pelo JS — mudar este valor aqui basta. */ --recuo: 8px; position: fixed; top: var(--recuo); right: 0; bottom: var(--recuo); z-index: 70; width: 14px; opacity: 0; pointer-events: none; transition: opacity 240ms var(--curva); } .barra-rolagem--visivel { opacity: 1; pointer-events: auto; } .barra-rolagem--sem-uso { display: none; } .barra-rolagem__polegar { position: absolute; top: 0; right: 4px; width: 7px; border-radius: 999px; /* Ela flutua sobre o conteúdo, então passa por cima do creme, do verde escuro e do vidro claro da hero. Nenhuma cor sozinha dá 3:1 nos três, que é o mínimo da WCAG para componente de interface. O corpo resolve o fundo claro; o halo creme de 1px resolve os escuros. */ background: #7f7c6a; box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.75); cursor: grab; } .barra-rolagem--arrastando { pointer-events: auto; } .barra-rolagem--arrastando .barra-rolagem__polegar { background: var(--verde); cursor: grabbing; } .pular { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--verde); color: var(--creme); padding: 12px 20px; } .pular:focus-visible { left: 12px; top: 12px; color: var(--creme); } /* --- blocos compartilhados ---------------------------------------------- */ .faixa { max-width: var(--largura); margin: 0 auto; padding: 84px var(--respiro); } .faixa--duas { display: grid; gap: 56px; align-items: start; } .faixa--contato { grid-template-columns: 1fr 1.2fr; } .sobrancelha { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 12px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--acento-texto); } .sobrancelha--hero { margin: 0; font-size: 12.5px; letter-spacing: 0.3em; color: var(--claro-70); } .titulo-secao { margin: 0 0 44px; font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.2; color: var(--texto); } .titulo-secao--claro { color: var(--creme); } .simbolo { position: relative; display: inline-block; flex: 0 0 auto; width: 34px; height: 22px; } .simbolo__a, .simbolo__b { position: absolute; top: 0; width: 22px; height: 22px; border: 2px solid var(--verde); border-radius: 50%; } .simbolo__a { left: 0; } .simbolo__b { right: 0; border-color: var(--cobre); } .simbolo--claro { width: 30px; height: 19px; } .simbolo--claro .simbolo__a, .simbolo--claro .simbolo__b { width: 19px; height: 19px; border-width: 1.5px; } .simbolo--claro .simbolo__a { border-color: var(--creme); } .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 13px 24px; border: 1.5px solid transparent; border-radius: 999px; font-family: 'Jost', system-ui, sans-serif; font-size: 15px; letter-spacing: 0.04em; cursor: pointer; transition: background-color var(--tempo) var(--curva), border-color var(--tempo) var(--curva), color var(--tempo) var(--curva); } .botao--verde { background: var(--verde); color: var(--creme); font-size: 14.5px; padding: 12px 22px; } .botao--verde:hover { background: var(--verde-fundo); color: var(--creme); } .botao--cobre { background: var(--cobre-botao); color: var(--creme-claro); font-size: 15.5px; padding: 15px 28px; } .botao--cobre:hover { background: var(--cobre-fundo); color: var(--creme-claro); } .botao--contorno { border-color: rgba(244, 239, 230, 0.5); color: var(--creme); font-size: 15.5px; padding: 15px 28px; } .botao--contorno:hover { border-color: var(--creme); color: var(--creme); } .botao--largo { width: 100%; min-height: 48px; font-size: 16px; padding: 16px 28px; } .icone-wa { flex: 0 0 auto; } /* --- moldura de foto pendente ------------------------------------------- */ .moldura { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 20px; background: var(--linho); border: 1px dashed var(--borda); border-radius: var(--raio); } .moldura__aviso { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; color: var(--texto-fraco); } .moldura--retrato { min-height: 220px; border-radius: 0; border-width: 0 0 1px; } /* --- cabeçalho ---------------------------------------------------------- */ .cabecalho { position: sticky; top: 0; z-index: 50; background: rgba(244, 239, 230, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); } .cabecalho__interno { max-width: var(--largura); margin: 0 auto; padding: 0 var(--respiro); min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .marca { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--verde); } .marca:hover { color: var(--verde); } .marca__nome { font-family: 'Marcellus', Georgia, serif; font-size: 19px; letter-spacing: 0.08em; } .cabecalho__links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .link-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 15px; color: var(--texto); transition: color var(--tempo) var(--curva); } .link-menu:hover { color: var(--cobre-texto); } /* --- inversão do menu por superfície ------------------------------------ */ /* A transição fica no estado de repouso, não na classe: assim ela vale nos dois sentidos, inverter e desinverter. É transição e não keyframe de propósito — quem rola rápido cruza duas fronteiras em meio segundo, e transição reaponta do valor atual em vez de recomeçar do zero. */ .cabecalho, .cabecalho .marca, .cabecalho .link-menu, .cabecalho .botao--verde, .cabecalho .simbolo__a, .cabecalho .simbolo__b { transition: background-color 260ms var(--curva), border-color 260ms var(--curva), color 260ms var(--curva); } .cabecalho--invertido { background: rgba(46, 58, 44, 0.95); border-bottom-color: rgba(244, 239, 230, 0.18); /* o acento também é decidido pela superfície (regra 9.8) */ --acento-texto: #D99A72; } .cabecalho--invertido .marca, .cabecalho--invertido .marca:hover, .cabecalho--invertido .link-menu { color: var(--creme); } .cabecalho--invertido .link-menu:hover { color: var(--acento-texto); } .cabecalho--invertido .simbolo__a { border-color: var(--creme); } .cabecalho--invertido .simbolo__b { border-color: var(--acento-texto); } /* o botão do WhatsApp inverte junto: fundo creme, texto verde */ .cabecalho--invertido .botao--verde { background: var(--creme); color: var(--verde); } .cabecalho--invertido .botao--verde:hover { background: var(--creme-claro); color: var(--verde-fundo); } /* --- hero: a luz da janela ---------------------------------------------- */ /* ATENÇÃO: a metade DIREITA desta seção não é área de texto. O vidro da janela chega perto de #87764C e não sustenta 4,5:1 com o creme. Qualquer selo, preço ou etiqueta que for parar ali precisa de fundo sólido próprio. É a regra 9.8 aplicada antes do problema, não depois. */ .hero { position: relative; isolation: isolate; overflow: hidden; color: var(--creme); --acento-texto: #D99A72; /* o brilho em CSS continua depois que o desenho acaba: em tela ultralarga é ele que sustenta o canto direito, sem esticar o SVG */ background: radial-gradient(118% 128% at 88% 46%, rgba(180, 100, 60, 0.20) 0%, rgba(138, 122, 68, 0.10) 38%, rgba(46, 58, 44, 0) 68%), var(--verde); } .hero__luz { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* o véu: garante o contraste do lado do texto por construção, não por sorte */ .hero__luz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(97deg, rgba(24, 33, 23, 0.80) 0%, rgba(24, 33, 23, 0.74) 28%, rgba(26, 35, 25, 0.42) 48%, rgba(28, 38, 27, 0.10) 64%, rgba(28, 38, 27, 0) 77%); } .luz { position: absolute; inset: 0; width: 100%; height: 100%; /* a regra global `img, svg { max-width: 100% }` travaria o desenho na largura da tela; aqui ele precisa ser maior que ela de propósito. */ max-width: none; display: block; } /* O desenho só nasce escondido quando o `revelar.js` está vivo para revelá-lo. Sem JavaScript a classe não entra, o desenho aparece inteiro e parado, e nenhuma animação existe. É a mesma trava do `tem-js` da barra de rolagem: animação nunca pode custar o conteúdo. A troca de opacidade é seca, sem transição: quem conta a entrada é a sequência dos filhos, e uma transição aqui competiria com ela. */ .revelacao-pronta .luz { opacity: 0; } .revelacao-pronta .luz.entrou { opacity: 1; } .hero__interno { position: relative; z-index: 1; max-width: var(--largura); margin: 0 auto; padding: 104px var(--respiro) 96px; min-height: clamp(540px, 74vh, 720px); display: flex; align-items: center; } .hero__texto { display: flex; flex-direction: column; gap: 26px; max-width: 600px; } .hero__titulo { margin: 0; font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(38px, 4.5vw, 58px); line-height: 1.12; text-wrap: balance; } .hero__linha { margin: 0; max-width: 500px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(244, 239, 230, 0.9); } .hero__acoes { display: flex; gap: 14px; flex-wrap: wrap; } .hero__endereco { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--claro-60); } .ponto { color: var(--acento-texto); } /* --- surgimento --------------------------------------------------------- * Só transform e opacity. Curva de entrada do manual em tudo. Nenhum elemento nasce com opacity:0 na regra base — quem zera é o quadro inicial da animação, com fill-mode both. Se a animação não rodar, o conteúdo aparece parado, que é o comportamento certo. * ------------------------------------------------------------------------ */ @keyframes cc-surge { from { opacity: 0; } to { opacity: 1; } } @keyframes cc-surge-lado { from { opacity: 0; transform: translate3d(46px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes cc-surge-feixe { from { opacity: 0; transform: translate3d(54px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes cc-surge-baixo { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .luz.entrou > * { animation-duration: 820ms; animation-timing-function: var(--curva); animation-fill-mode: both; } .luz.entrou .luz__brilho { animation-name: cc-surge; animation-duration: 1100ms; } .luz.entrou .luz__janela { animation-name: cc-surge-lado; animation-delay: 120ms; } .luz.entrou .luz__piso { animation-name: cc-surge-baixo; animation-delay: 560ms; animation-duration: 700ms; } .luz.entrou .luz__silhueta { animation-name: cc-surge-baixo; animation-delay: 620ms; animation-duration: 700ms; } .luz.entrou .luz__planta { animation-name: cc-surge-baixo; animation-delay: 700ms; animation-duration: 700ms; } .luz.entrou .luz__marca { animation-name: cc-surge; animation-delay: 700ms; animation-duration: 760ms; } /* os três feixes entram escalonados, um atrás do outro, como a luz abrindo */ .luz.entrou .luz__feixe { animation: cc-surge-feixe 900ms var(--curva) both; } .luz.entrou .luz__feixe--1 { animation-delay: 260ms; } .luz.entrou .luz__feixe--2 { animation-delay: 400ms; } .luz.entrou .luz__feixe--3 { animation-delay: 540ms; } /* O TEXTO NÃO ANIMA, e isso é decisão, não esquecimento. Subida escalonada de 16px em cinco elementos é a assinatura genérica de site gerado por IA, e faz o conteúdo depender da animação para existir. A narrativa correta é a inversa: o texto já estava lá, quem entra é a luz. */ @keyframes cc-tracar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* O estado escondido mora INTEIRO dentro de no-preference. Se a animação não rodar (movimento reduzido, falha, navegador antigo), não existe dasharray nenhum e a linha aparece desenhada. Um traço com dashoffset:1 e a animação bloqueada seria uma linha invisível para sempre. */ @media (prefers-reduced-motion: no-preference) { .luz.entrou .luz__traco { stroke-dasharray: 1; animation: cc-tracar 700ms var(--curva) both; } .luz.entrou .luz__traco--arco { animation-delay: 420ms; } .luz.entrou .luz__traco--brilho { animation-delay: 500ms; } .luz.entrou .luz__traco--a { animation-delay: 540ms; } .luz.entrou .luz__traco--b { animation-delay: 600ms; } .luz.entrou .luz__traco--c { animation-delay: 640ms; } .luz.entrou .luz__traco--m1 { animation-delay: 760ms; animation-duration: 900ms; } .luz.entrou .luz__traco--m2 { animation-delay: 820ms; animation-duration: 900ms; } } /* --- telas menores ------------------------------------------------------ */ @media (max-width: 1080px) { .hero__texto { max-width: 500px; } .hero__luz::after { background: linear-gradient(97deg, rgba(24, 33, 23, 0.90) 0%, rgba(24, 33, 23, 0.84) 30%, rgba(26, 35, 25, 0.50) 52%, rgba(28, 38, 27, 0.12) 68%, rgba(28, 38, 27, 0) 80%); } } /* Abaixo de 860px a caixa da seção fica retrato demais para o "meet": o desenho passa a ser escalado pela largura e ancorado no rodapé da seção, maior que a tela, com o texto apoiado em cima dele. */ @media (max-width: 860px) { .hero__interno { padding: 76px var(--respiro) calc(46vw + 40px); min-height: 0; } .hero__texto { max-width: 560px; } .luz { inset: auto 0 0 auto; width: 124%; height: auto; } .hero__luz::after { background: linear-gradient(180deg, rgba(24, 33, 23, 0.80) 0%, rgba(24, 33, 23, 0.74) 34%, rgba(26, 35, 25, 0.40) 58%, rgba(28, 38, 27, 0.06) 80%, rgba(28, 38, 27, 0) 94%); } .hero { background: radial-gradient(100% 56% at 62% 94%, rgba(180, 100, 60, 0.22) 0%, rgba(138, 122, 68, 0.10) 42%, rgba(46, 58, 44, 0) 74%), var(--verde); } } @media (max-width: 620px) { .hero__interno { padding: 44px var(--respiro) calc(56vw + 40px); } .luz { width: 176%; } } /* --- movimento reduzido ------------------------------------------------- * Reduz, não zera: o surgimento continua (é ele que explica que a luz entra), só perde o deslocamento e encurta. Nada some. * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .luz.entrou > *, .luz.entrou .luz__feixe, .luz.entrou .luz__traco { animation-name: cc-surge; animation-duration: 420ms; } .luz.entrou .luz__brilho { animation-duration: 520ms; } .luz.entrou .luz__janela { animation-delay: 60ms; } .luz.entrou .luz__feixe--1 { animation-delay: 120ms; } .luz.entrou .luz__feixe--2 { animation-delay: 180ms; } .luz.entrou .luz__feixe--3 { animation-delay: 240ms; } .luz.entrou .luz__piso, .luz.entrou .luz__silhueta, .luz.entrou .luz__planta { animation-delay: 300ms; } .luz.entrou .luz__marca { animation-delay: 360ms; } } /* --- o espaço: abertura da seção fundida --------------------------------- * Propósito e "o espaço" eram duas seções separadas por uma linha. Agora são uma só, e a abertura mantém a leitura em duas colunas que já existia: o enunciado à esquerda, a explicação à direita. Sem a divisória, o que segura a hierarquia é o espaço vertical, não a régua. * ------------------------------------------------------------------------ */ .espaco__abertura { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; /* 44 e não 72: sem o subtítulo que ficava entre os dois blocos, o respiro antigo virava um buraco. Os atributos são a continuação do enunciado, e não uma parte nova — a distância agora diz isso. */ margin-bottom: 44px; } .espaco__titulo .sobrancelha { margin-bottom: 14px; } .espaco__titulo .titulo-secao { margin: 0; } .espaco__prosa { display: flex; flex-direction: column; gap: 18px; font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--texto-suave); } .espaco__prosa p { margin: 0; } .assinatura { font-size: 14px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acento-texto); } /* --- o espaço ----------------------------------------------------------- */ .espaco { border-bottom: 1px solid var(--borda); } .atributos { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .atributo { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--creme-claro); border: 1px solid var(--areia); border-radius: var(--raio); } .atributo__numero { font-family: 'Marcellus', Georgia, serif; color: var(--cobre-texto); } .atributo__nome { font-weight: 500; font-size: 16.5px; } .atributo__texto { font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--texto-suave); } .galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; } /* --- como funciona ------------------------------------------------------ */ .como { background: var(--linho); border-bottom: 1px solid var(--borda); } .passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .passo { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--creme); border: 1px solid var(--borda); border-radius: var(--raio); } .passo__numero { font-family: 'Marcellus', Georgia, serif; font-size: 30px; color: var(--cobre-texto); } .passo__nome { font-weight: 500; font-size: 17px; } .passo__texto { font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--texto-suave); } /* --- profissionais ------------------------------------------------------ */ .profissionais { border-bottom: 1px solid var(--borda); } .cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .cartao { display: flex; flex-direction: column; background: var(--creme-claro); border: 1px solid var(--areia); border-radius: 8px; overflow: hidden; } .cartao__texto { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; } .cartao__nome { font-family: 'Marcellus', Georgia, serif; font-size: 21px; } .cartao__titulo { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobre-texto); } .cartao__resumo { font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--texto-suave); } .profissionais__nota { margin: 32px 0 0; font-weight: 300; font-size: 15px; color: var(--texto-suave); } /* --- contato ------------------------------------------------------------ */ .contato { background: var(--verde); color: var(--creme); --acento-texto: #D99A72; } .contato__texto { display: flex; flex-direction: column; gap: 22px; } .faixa--contato .titulo-secao { margin: 0; } .contato__linha { margin: 0; font-weight: 300; font-size: 16.5px; line-height: 1.65; color: rgba(244, 239, 230, 0.88); } .contato__endereco { margin: 0; padding-top: 22px; border-top: 1px solid rgba(244, 239, 230, 0.2); font-style: normal; font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--claro-70); } /* inline-flex com 44px: medido, o link do Instagram tinha 22px de altura de toque. Vale para a home e para as páginas de profissional, que reusam este mesmo endereço. */ .contato__insta { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme); transition: color var(--tempo) var(--curva); } .contato__insta:hover { color: var(--acento-texto); } .formulario { display: flex; flex-direction: column; gap: 20px; padding: 36px; background: var(--creme); border-radius: 10px; color: var(--texto); } .abas { display: flex; gap: 8px; padding: 5px; background: var(--areia); border-radius: 999px; } .aba { flex: 1; min-height: 44px; padding: 11px 16px; border: none; border-radius: 999px; background: transparent; color: var(--texto); font-family: 'Jost', system-ui, sans-serif; font-size: 14.5px; cursor: pointer; transition: background-color var(--tempo) var(--curva), color var(--tempo) var(--curva); } .aba--ativa { background: var(--verde); color: var(--creme); } .formulario__descricao { margin: 0; font-weight: 300; font-size: 14px; color: var(--texto-suave); } .campo { display: flex; flex-direction: column; gap: 8px; } .campo__rotulo { font-size: 14px; font-weight: 500; } .campo__opcional { font-weight: 300; color: var(--texto-fraco); } .campo__entrada { min-height: 44px; padding: 13px 16px; background: var(--creme-claro); border: 1px solid var(--borda); border-radius: var(--raio); font-family: 'Jost', system-ui, sans-serif; font-size: 15.5px; color: var(--texto); transition: border-color var(--tempo) var(--curva); } .campo__entrada:hover { border-color: var(--cobre); } textarea.campo__entrada { resize: vertical; } .campo__entrada::placeholder { color: var(--texto-fraco); } .formulario__aviso { margin: 0; font-weight: 300; font-size: 12.5px; text-align: center; color: var(--texto-fraco); } /* --- rodapé ------------------------------------------------------------- */ .rodape { background: var(--carvao); color: rgba(244, 239, 230, 0.75); } .rodape__interno { max-width: var(--largura); margin: 0 auto; padding: 36px var(--respiro); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; letter-spacing: 0.05em; } .rodape__marca { display: flex; align-items: center; gap: 10px; } /* --- botão flutuante ---------------------------------------------------- */ .wa-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--verde); color: var(--creme); box-shadow: 0 6px 20px rgba(38, 36, 32, 0.35); transition: background-color var(--tempo) var(--curva), color var(--tempo) var(--curva); } .wa-flutuante:hover { background: var(--cobre); color: var(--creme-claro); } /* --- telas menores ------------------------------------------------------ */ @media (max-width: 960px) { .espaco__abertura { grid-template-columns: 1fr; gap: 24px; margin-bottom: 34px; } .faixa--contato { grid-template-columns: 1fr; gap: 32px; } .atributos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .galeria { grid-template-columns: 1fr 1fr; } .moldura--grande { grid-column: 1 / -1; min-height: 240px; } .passos { grid-template-columns: 1fr; } .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .faixa { padding: 60px var(--respiro); } .cabecalho__interno { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px var(--respiro); } .cabecalho__links { justify-content: space-between; gap: 8px 14px; } /* No celular o menu tinha três linhas e comia 184px de altura, empurrando o segundo botão da hero para baixo da dobra de um iPhone SE. O botão do WhatsApp sai daqui porque o botão flutuante, fixo no canto, já está na tela o tempo todo e faz exatamente a mesma coisa: era duplicata cara. */ .cabecalho__links .botao--verde { display: none; } .hero__texto { gap: 20px; } .titulo-secao { font-size: 28px; margin-bottom: 32px; } .atributos, .galeria, .cartoes { grid-template-columns: 1fr; } .moldura, .moldura--grande { min-height: 200px; } .formulario { padding: 24px; } .rodape__interno { flex-direction: column; align-items: flex-start; } .wa-flutuante { right: 16px; bottom: 16px; } } /* --- movimento reduzido -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 80ms !important; } } /* ========================================================================== Páginas de profissional — site/profissionais/*.html Escrito depois das regras acima de propósito: nada aqui redefine componente existente por acidente, e as consultas de mídia deste bloco vêm por último. ========================================================================== */ /* --- texto só para leitor de tela ---------------------------------------- */ .oculto-visual { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- botão "Ver mais" dentro do cartão da home --------------------------- */ /* O texto cresce, o botão fica colado no rodapé do cartão: assim os três botões alinham entre si mesmo com resumos de alturas diferentes. */ .cartao__texto { flex: 1; } .cartao__acao { margin-top: auto; padding-top: 16px; } .botao--cartao { position: relative; background: transparent; border-color: var(--borda); color: var(--cobre-texto); font-size: 15px; padding: 12px 20px; } .botao--cartao:hover, .botao--cartao:focus-visible { background: var(--linho); border-color: var(--cobre); color: var(--cobre-fundo); } .seta { flex: 0 0 auto; transition: transform var(--tempo) var(--curva); } .botao--cartao:hover .seta, .botao--cartao:focus-visible .seta { transform: translateX(3px); } /* --- aviso de página de demonstração ------------------------------------- */ /* Sai junto com o conteúdo fictício. Enquanto existir, precisa parecer o que é: caixa tracejada, igual às molduras de foto pendente. */ .aviso-demo { margin: 0; padding: 14px var(--respiro); background: var(--linho); border-bottom: 1px dashed var(--borda); font-weight: 300; font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--texto-suave); } .aviso-demo strong { font-weight: 500; color: var(--texto); } /* --- cabeçalho da página do profissional --------------------------------- */ .perfil { background: var(--verde); color: var(--creme); --acento-texto: #D99A72; } .perfil__interno { max-width: var(--largura); margin: 0 auto; padding: 36px var(--respiro) 76px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px 52px; align-items: center; } .perfil__voltar { grid-column: 1 / -1; justify-self: start; } .voltar { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--claro-70); transition: color var(--tempo) var(--curva); } .voltar:hover, .voltar:focus-visible { color: var(--creme); } .voltar:hover .seta, .voltar:focus-visible .seta { transform: translateX(-3px); } .perfil__foto .moldura { min-height: 360px; background: rgba(244, 239, 230, 0.08); border-color: rgba(244, 239, 230, 0.4); border-radius: var(--raio); } .perfil__foto .moldura__aviso { color: var(--claro-70); } .perfil__texto { display: flex; flex-direction: column; gap: 20px; } .perfil__texto .sobrancelha { margin: 0; } .perfil__nome { margin: 0; font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.14; } .perfil__resumo { margin: 0; max-width: 520px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(244, 239, 230, 0.88); } .perfil__acoes { display: flex; gap: 14px; flex-wrap: wrap; } /* --- seções de conteúdo da página do profissional ------------------------ */ .secao-perfil { border-bottom: 1px solid var(--borda); } .secao-perfil--linho { background: var(--linho); } .faixa--perfil { padding: 64px var(--respiro); } .secao-perfil .titulo-secao { margin: 0 0 22px; } .secao-perfil .sobrancelha { margin: 0 0 10px; } /* --- marcador de conteúdo a preencher ------------------------------------ */ /* Mesma linguagem da .moldura: linho, tracejado, rótulo em versalete. Quem olhar a página tem que ver na hora que ali falta texto do profissional. */ .pendente { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: var(--linho); border: 1px dashed var(--borda); border-radius: var(--raio); } .secao-perfil--linho .pendente { background: var(--creme); } .pendente__rotulo { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-fraco); } .pendente__texto { margin: 0; font-weight: 300; font-size: 15.5px; line-height: 1.65; color: var(--texto-suave); } .pendentes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .pendente--dado { padding: 20px; gap: 8px; } .pendente--dado .pendente__texto { font-size: 14.5px; } /* --- bloco de contato da página do profissional -------------------------- */ .perfil-cta { display: flex; flex-direction: column; gap: 18px; padding: 32px; background: rgba(244, 239, 230, 0.07); border: 1px solid rgba(244, 239, 230, 0.22); border-radius: 10px; } .perfil-cta__linha { margin: 0; font-weight: 300; font-size: 15.5px; line-height: 1.65; color: var(--claro-70); } /* Os dois secundários ficam lado a lado, dividindo a largura em partes iguais. São de contorno, e não sólidos: o botão do WhatsApp logo acima é o primário da caixa, e dois sólidos embaixo dele disputariam a mesma atenção. Contorno sobre sólido é a hierarquia que o site já usa na hero. `flex: 1 1 0` com `min-width: 0` é o que os faz medir igual mesmo com rótulos de tamanhos diferentes. Abaixo de 420px eles empilham, porque dois botões nessa largura viram duas colunas de texto quebrado. */ .perfil-cta__links { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(244, 239, 230, 0.2); } .botao--par { flex: 1 1 0; min-width: 148px; padding: 13px 16px; font-size: 14.5px; text-align: center; } /* --- telas menores (páginas de profissional) ----------------------------- */ @media (max-width: 960px) { .perfil__interno { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px var(--respiro) 60px; } .perfil__foto { max-width: 420px; } .perfil__foto .moldura { min-height: 300px; } .pendentes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .faixa--perfil { padding: 48px var(--respiro); } .pendentes { grid-template-columns: minmax(0, 1fr); } .perfil__acoes .botao { width: 100%; } .botao--cartao { width: 100%; } .perfil-cta { padding: 24px; } } /* --- movimento reduzido (páginas de profissional) ------------------------ */ /* Reduz, não zera: a cor continua mudando, o deslocamento é que sai. */ @media (prefers-reduced-motion: reduce) { .botao--cartao:hover .seta, .botao--cartao:focus-visible .seta, .voltar:hover .seta, .voltar:focus-visible .seta { transform: none; } } /* --- cartão de vídeo e caixa de reprodução ------------------------------- * O vídeo foi gravado em pé, mas um bloco vertical no meio da página empurra tudo para baixo e come a leitura. Então o cartão é horizontal, com a capa recortada, e o vídeo só aparece no formato original quando alguém clica. * ------------------------------------------------------------------------ */ .video-cartao { margin-top: 36px; max-width: 560px; display: flex; align-items: stretch; gap: 0; background: var(--creme-claro); border: 1px solid var(--areia); border-radius: var(--raio); overflow: hidden; color: var(--texto); transition: border-color var(--tempo) var(--curva), background-color var(--tempo) var(--curva); } .video-cartao:hover, .video-cartao:focus-visible { background: var(--linho); border-color: var(--cobre); color: var(--texto); } .video-cartao__capa { position: relative; flex: 0 0 190px; align-self: stretch; min-height: 132px; overflow: hidden; background: var(--verde); } /* A capa sai do fluxo: a imagem é vertical (9:16) e, no fluxo, era ELA que ditava a altura do cartão — 300px, o dobro do necessário. Fora do fluxo, quem manda na altura é o texto, e o cartão fica com cara de faixa. */ .video-cartao__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* a placa com o nome dela fica na metade de cima do quadro vertical */ object-position: center 38%; display: block; } .video-cartao__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; padding-left: 3px; border-radius: 50%; background: rgba(38, 36, 32, 0.62); color: var(--creme); box-shadow: 0 0 0 1px rgba(244, 239, 230, 0.5); } .video-cartao__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 20px 22px; } .video-cartao__rotulo { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--acento-texto); } .video-cartao__titulo { font-family: 'Marcellus', Georgia, serif; font-size: 20px; line-height: 1.25; } .video-cartao__nota { font-weight: 300; font-size: 14px; color: var(--texto-suave); } /* --- a caixa que abre ---------------------------------------------------- */ .lightbox { padding: 0; border: none; border-radius: var(--raio); background: transparent; overflow: visible; max-width: min(92vw, 420px); max-height: 92vh; } .lightbox::backdrop { background: rgba(20, 26, 19, 0.82); } .lightbox__video { display: block; width: 100%; max-height: 92vh; aspect-ratio: 9 / 16; border-radius: var(--raio); background: #000; } .lightbox__fechar { position: absolute; right: -6px; top: -46px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(244, 239, 230, 0.14); color: var(--creme); cursor: pointer; transition: background-color var(--tempo) var(--curva); } .lightbox__fechar:hover { background: rgba(244, 239, 230, 0.28); } @media (max-width: 620px) { .video-cartao { flex-direction: column; max-width: none; } .video-cartao__capa { flex: 0 0 150px; } .video-cartao__capa img { object-position: center 34%; } .lightbox { max-width: 94vw; } .lightbox__fechar { top: -44px; right: 0; } } /* --- prosa da página do profissional ------------------------------------ */ .perfil__prosa { max-width: 640px; display: flex; flex-direction: column; gap: 18px; font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--texto-suave); } .perfil__prosa p { margin: 0; } /* --- capa do cartão, quando já existe imagem ---------------------------- * Substitui a `.moldura` tracejada nos cartões que já têm o que mostrar. */ .cartao__capa { height: 220px; overflow: hidden; border-bottom: 1px solid var(--areia); } .cartao__capa img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Com um ou dois profissionais, três colunas deixariam buracos do tamanho de um cartão. `auto-fill` com largura máxima resolve os dois casos com a mesma regra: enche o que couber e para. */ .cartoes--poucos { grid-template-columns: repeat(auto-fill, minmax(0, 340px)); }