/* ========================================================================== THE CASTRO — Design System Valores extraídos do _elementor_data da página 3199 (ver ESPECIFICACAO-PAGINA-ATUAL.md). As classes são as mesmas do site no ar, para o porte de volta ser cópia direta. Breakpoints do Elementor neste site: laptop → max-width: 1366px tablet → max-width: 1024px (viewport_lg 1025) mobile → max-width: 767px (viewport_md 768) ========================================================================== */ :root { /* Cores do kit */ --tc-primario: #011C1D; --tc-secundario: #012627; --tc-texto: #02383A; --tc-realce: #036163; --tc-teal: #328F92; --tc-verde: #51AA96; --tc-claro: #F5F7F7; /* Fundo real da página e texto no escuro */ --tc-fundo: #F5F3EF; --tc-fundo-cor: #011C1D; --tc-texto-dark: #F2F0EC; /* Fontes */ --tc-serif: "PP Editorial New", Georgia, "Times New Roman", serif; --tc-sans: "Degular", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Layout */ --tc-max: 1200px; --tc-ease: cubic-bezier(.16, 1, .3, 1); /* -------------------------------------------------------------------- ESCALA DE ESPAÇAMENTO — regra única para o site inteiro. Nunca usar um px avulso fora dessa escala. Se faltar um degrau, criar aqui, não inventar valor solto no meio do CSS. --space-1 8px micro-ajustes (ícone <-> texto ao lado) --space-2 16px título de card <-> descrição · eyebrow <-> título --space-2h 20px título de seção (h2) <-> subtítulo, especificamente --space-3 24px entre parágrafos de um mesmo bloco de texto --space-4 32px título de seção <-> subtítulo --space-5 48px gap de grid entre cards --space-6 64px bloco de cabeçalho (eyebrow+título+sub) <-> conteúdo --space-7 96px entre seções muito distintas (raramente usado; o respiro entre seções normalmente já vem do padding em vw de cada .tc-secao) -------------------------------------------------------------------- */ --space-1: 8px; --space-2: 16px; --space-2h: 20px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; } /* -------------------------------------------------------------------------- Reset e base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; overflow-x: clip; } /* "hidden" quebra position:sticky (EVR); "clip" não */ html { background: var(--tc-fundo); transition: background .6s ease; scroll-behavior: smooth; } body { margin: 0; background: transparent !important; font-family: var(--tc-sans); font-size: 17px; line-height: 1.5; color: var(--tc-primario); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; } p { margin: 0 0 var(--space-3) 0; } p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Modo escuro por scroll Uma seção .dark na viewport liga .cor no e a página inteira escurece. -------------------------------------------------------------------------- */ html.cor { background: var(--tc-fundo-cor); } .dark, .dark > .tc-container { background: transparent !important; } html.cor .dark h1, html.cor .dark h2, html.cor .dark h3, html.cor .dark p, html.cor .dark li, html.cor .dark .tc-texto-editor { color: var(--tc-texto-dark) !important; transition: color .6s ease; } /* -------------------------------------------------------------------------- Estruturas base -------------------------------------------------------------------------- */ .tc-secao { position: relative; } .tc-container { max-width: var(--tc-max); margin: 0 auto; width: 100%; } /* -------------------------------------------------------------------------- Tipografia — escala exata do site -------------------------------------------------------------------------- */ /* H1 do hero: 65 / 60 / 60 / 42 */ .tc-h1 { font-family: var(--tc-serif); font-weight: 300; font-size: 65px; line-height: 1em; letter-spacing: -2px; } /* H2 de seção: 45 / 35 */ .tc-h2 { font-family: var(--tc-serif); font-weight: 300; font-size: 45px; line-height: 1em; letter-spacing: -2px; } /* Título de card: 26 / 24 / 22, itálico */ .tc-h3 { font-family: var(--tc-serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1em; letter-spacing: -0.5px; } /* Subtítulo de seção: Degular 20 / 18 */ .tc-h2x { font-family: var(--tc-sans); font-weight: 400; font-size: 20px; line-height: 1.2em; } /* Descrição de card: Degular 17 / 15 */ .tc-desc { font-family: var(--tc-sans); font-weight: 400; font-size: 17px; line-height: 1.2em; } /* Palavra com gradiente dentro do título — igual ao site */ .titulo-degrade { font-family: "PP Editorial New", Georgia, serif; font-weight: 400; font-style: italic; line-height: 110%; background: linear-gradient(90deg, #328F92 0%, #51AA96 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .12em; margin-right: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Variante do gradiente — realce → verde (usado em Sobre) */ .titulo-degrade-b { font-family: "PP Editorial New", Georgia, serif; font-weight: 400; font-style: italic; line-height: 110%; background: linear-gradient(90deg, #328F92 0%, #51AA96 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .12em; margin-right: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Rótulo pequeno acima do título (usado nas seções novas) */ .tc-eyebrow { display: inline-block; font-family: var(--tc-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-realce); margin-bottom: var(--space-2); } .dark .tc-eyebrow { color: var(--tc-verde); } /* -------------------------------------------------------------------------- Botão — receita exata do site (custom CSS por widget no Elementor) -------------------------------------------------------------------------- */ .botao-wrap { display: inline-block; transform: translateY(0) scale(1); transition: transform .65s var(--tc-ease), filter .65s var(--tc-ease); will-change: transform; } .botao-wrap:hover { transform: translateY(-5px) scale(1.025); filter: drop-shadow(0 12px 24px #328F9250); } .botao { position: relative; display: inline-flex; flex-direction: row; /* ícone à direita do texto */ align-items: center; justify-content: center; gap: 11px; overflow: hidden; isolation: isolate; padding: 22px 60px; font-family: var(--tc-serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1; color: #fff; text-decoration: none; border-radius: 10px; border: solid 1px #ffffff40; background: linear-gradient(-45deg, #328F92, #51AA96, #328F92, #51AA96, #328F92, #51AA96, #328F92, #51AA96); background-size: 800% 400%; animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99); transition: box-shadow .65s var(--tc-ease), border-color .65s var(--tc-ease); will-change: box-shadow; } .botao:hover { border-color: #ffffff70; box-shadow: 0 0 0 1px #ffffff15, 0 0 25px #328F9240, 0 12px 35px #328F9235; } @keyframes gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* brilho passando pelo botão */ .botao::before { content: ""; position: absolute; z-index: 0; inset: -100%; background: linear-gradient(115deg, transparent 35%, #ffffff08 42%, #ffffff35 50%, #ffffff08 58%, transparent 65%); transform: translateX(-35%) rotate(8deg); animation: shine 4.5s infinite ease-in-out; pointer-events: none; } @keyframes shine { 0%, 55% { transform: translateX(-55%) rotate(8deg); opacity: 0; } 65% { opacity: 1; } 85%,100% { transform: translateX(55%) rotate(8deg); opacity: 0; } } /* pulso externo (era o "pisca") */ .botao-wrap .botao::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; border: 1px solid #328F92; opacity: 0; animation: pulso 2.8s infinite var(--tc-ease); pointer-events: none; } @keyframes pulso { 0% { transform: scale(1); opacity: 0; } 15% { opacity: .65; } 70% { transform: scale(1.12); opacity: 0; } 100% { transform: scale(1.12); opacity: 0; } } .botao-texto { position: relative; z-index: 2; margin-top: -1px; align-self: center; white-space: nowrap; /* nunca quebra em 2 linhas, ver ajuste de tamanho no mobile */ } .botao-icone { position: relative; z-index: 2; width: 15px; height: 15px; filter: brightness(0) invert(1); /* seta.svg é escura, botão precisa dela branca */ transform: translate(0, 0); transition: transform .6s var(--tc-ease), filter .4s ease; } .botao:hover .botao-icone { transform: translate(5px, -5px); } /* respiração leve no hover, por cima da animação de fundo que já roda sempre */ .botao-wrap:hover .botao { animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99), respira 2s infinite ease-in-out; } @keyframes respira { 0%, 100% { box-shadow: 0 0 0 1px #ffffff15, 0 0 25px #328F9240, 0 12px 35px #328F9235; } 50% { box-shadow: 0 0 0 1px #ffffff20, 0 0 38px #328F9255, 0 15px 42px #328F9245; } } /* Botão pequeno, dos cards de projeto: 16px / padding 20px 30px */ .botao--sm { padding: 20px 30px; font-size: 16px; } /* -------------------------------------------------------------------------- Card branco — icon-box dos benefícios e do método -------------------------------------------------------------------------- */ .card-branco { background: #FFFFFF; border: 1px solid #FFFFFF0F; border-radius: 10px; padding: 30px; box-shadow: 0 17px 15px rgba(0, 0, 0, 0.07); } .card-branco .tc-h3 { margin-bottom: var(--space-2); } .card-icone { width: 46px; height: 46px; margin-bottom: var(--space-2); } /* Card com borda, do método EVR */ .card-borda { background: transparent; border: 1px solid rgba(242, 240, 236, .18); border-radius: 10px; padding: 30px; box-shadow: 0 17px 15px rgba(0, 0, 0, 0.07); } /* -------------------------------------------------------------------------- Reveal ao scroll — sistema "vai e vem" do site Classes idênticas: scroll-left / scroll-right / scroll-top / scroll-bottom / blur, e a classe .ativo que o JS liga e desliga. -------------------------------------------------------------------------- */ .scroll-left { opacity: 0; transition: 0.5s !important; transform: translate(-30px, 0); } .scroll-right { opacity: 0; transition: 0.5s !important; transform: translate(30px, 0); } .scroll-top { opacity: 0; transition: 0.5s !important; transform: translate(0, -30px); } .scroll-bottom { opacity: 0; transition: 0.5s !important; transform: translate(0, 30px); } .blur { transform: scale(0.9); opacity: 0; filter: blur(20px); transition: 0.5s !important; } .ativo { opacity: 1; transition: 0.5s ease all; transform: translate(0, 0); filter: blur(0); } @media (prefers-reduced-motion: reduce) { .scroll-left, .scroll-right, .scroll-top, .scroll-bottom, .blur { opacity: 1 !important; transform: none !important; filter: none !important; } .botao, .botao::before, .botao::after, .botao-wrap, .botao-icone { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- Hover dos cards: passar o mouse num desfoca os outros (classe blur2) Só a partir de 768px, igual ao site. -------------------------------------------------------------------------- */ @media (min-width: 768px) { .conteiner-blur { transition: all 0.5s; } .conteiner-blur:hover .blur2 { filter: blur(3px); transform: scale(0.99); } .blur2 { transform: scale(1); transition: all .5s; } .blur2:hover { transform: scale(1.03) !important; filter: blur(0px) !important; box-shadow: 0 0 60px 0 #011C1D30 !important; } .conteiner-blur { pointer-events: none; } .blur2 { pointer-events: visible !important; } } /* -------------------------------------------------------------------------- Faixa de blur fixa no rodapé da janela -------------------------------------------------------------------------- */ .faixa-blur { background: transparent; position: fixed; bottom: 0; left: 0; width: 100vw; height: 200px; backdrop-filter: blur(70px); -webkit-backdrop-filter: blur(70px); z-index: 999; -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); mask-repeat: no-repeat; mask-size: 100% 100%; pointer-events: none; } @media (max-width: 1024px) { .faixa-blur { height: 130px; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } } @media (max-width: 767px) { .faixa-blur { height: 80px; backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); } } h1, h2, h3, h4, h5, h6, .tc-h1, .tc-h2, .tc-h3, .tc-h2x, .tc-eyebrow { text-wrap: balance; } p, li, .tc-desc { text-wrap: pretty; } /* ========================================================================== RESPONSIVO DA TIPOGRAFIA ========================================================================== */ @media (max-width: 1366px) { /* laptop */ .tc-h1 { font-size: 60px; } .tc-h3 { font-size: 24px; } .botao { font-size: 20px; } } @media (max-width: 1024px) { /* tablet */ .tc-h1 { font-size: 60px; } .botao { padding: 20px 50px; font-size: 19px; } } @media (max-width: 767px) { /* mobile */ .tc-h1 { font-size: 42px; line-height: 1.2em; } .tc-h2 { font-size: 32px; } /* quebra de linha manual (pensada pro desktop) sai no mobile — o text-wrap:balance escolhe melhor sozinho na largura menor, evita palavra viúva sobrando por causa de um
que não faz mais sentido */ .quebra-desktop { display: none; } .tc-h3 { font-size: 22px; } .tc-h2x { font-size: 18px; } .tc-desc { font-size: 15px; } .botao { padding: 16px 24px; font-size: 15px; } .botao--sm { padding: 16px 24px; font-size: 15px; } } /* -------------------------------------------------------------------------- Widget flutuante do WhatsApp — presente em toda página (site inteiro). Estrutura/comportamento vindos de um widget já testado em outro site do Gabriel (ACE/CDL), só re-pele com as cores e fonte do The Castro. -------------------------------------------------------------------------- */ #whatsappWidget { position: fixed; right: 16px; bottom: 20px; z-index: 999; cursor: pointer; } #whatsappWidget img { width: 60px; height: 60px; display: block; filter: drop-shadow(0 4px 14px rgba(1, 28, 29, .35)); transition: transform .3s var(--tc-ease); } #whatsappWidget:hover img { transform: scale(1.06); } #alertWapp { position: fixed; right: 20px; bottom: 70px; width: 17px; height: 17px; z-index: 1000; background: #E63946; color: #fff; font-size: 11px; text-align: center; border-radius: 50%; font-weight: bold; line-height: 17px; visibility: hidden; } #msgTooltip { position: fixed; right: 95px; width: 150px; bottom: 28px; background: #fff; color: var(--tc-primario); padding: 10px 14px; font-size: 13px; line-height: 1.3em; border-radius: 12px; border: 1px solid rgba(1, 28, 29, .1); box-shadow: 0 6px 20px rgba(1, 28, 29, .18); font-family: var(--tc-sans); transform: translateX(20px); opacity: 0; visibility: hidden; transition: transform .5s var(--tc-ease), opacity .5s ease; z-index: 999; text-wrap: balance; cursor: pointer; } #msgTooltip::after { content: ''; position: absolute; right: -7px; bottom: 14px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #fff; } @media (max-width: 767px) { #whatsappWidget { right: 12px; bottom: 16px; } #whatsappWidget img { width: 52px; height: 52px; } #alertWapp { right: 15px; bottom: 60px; } #msgTooltip { right: 74px; bottom: 22px; width: 130px; font-size: 12px; } }