/* ===================================================================== HOME — hero e seções ===================================================================== */ /* ---------- Scroll reveal ---------- O estado escondido só vale quando o JS ativa .js-reveal no . Sem JS (fallback) ou com prefers-reduced-motion, tudo fica visível. */ @media (prefers-reduced-motion: no-preference) { .js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); will-change: opacity, transform; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } } /* ---------- HERO (banner full-width) ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); /* Fallback sem imagem: fundo paper claro (a seção não quebra sem o banner). */ background: radial-gradient(120% 90% at 100% 0%, rgba(31,95,166,0.06), transparent 55%), var(--paper); } /* Quando existe o banner, a seção vira faixa escura com imagem + overlay. */ .hero--banner { background: var(--navy-900); } .hero--banner::before { /* imagem */ content: ""; position: absolute; inset: 0; background-image: var(--hero-bg); background-size: cover; background-position: center right; z-index: 0; } .hero--banner::after { /* overlay navy: esquerda opaca → direita transparente */ content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(11, 37, 69, 0.92) 0%, rgba(11, 37, 69, 0.72) 38%, rgba(11, 37, 69, 0.30) 100% ); z-index: 1; } .hero__inner { position: relative; z-index: 2; /* conteúdo acima da imagem e do overlay */ display: flex; align-items: center; min-height: min(78vh, 760px); padding-block: clamp(3.5rem, 8vw, 7rem); } .hero__content { max-width: 40rem; } .hero__title { margin: 1.1rem 0 1.25rem; } .hero__accent { /* sublinhado de "cota" técnica que acompanha a quebra de linha */ color: var(--blue-600); background-image: linear-gradient( color-mix(in srgb, var(--signal) 35%, transparent), color-mix(in srgb, var(--signal) 35%, transparent) ); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hero__lead { color: var(--steel-600); font-size: var(--step-1); line-height: 1.6; margin-bottom: 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.25rem; } .hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; list-style: none; margin: 0; padding: 0; } .hero__tags li { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel-600); border: 1px solid var(--line); background: var(--white); padding: 0.4rem 0.7rem; border-radius: 999px; } /* ---- Texto claro quando o hero é banner escuro ---- */ .hero--banner .hero__title { color: #fff; } .hero--banner .hero__accent { /* branco sobre o escuro, mantendo o traço âmbar de "cota" */ color: #fff; background-image: linear-gradient(var(--signal), var(--signal)); } .hero--banner .hero__lead { color: var(--steel-300); } .hero--banner .eyebrow { color: #fff; } .hero--banner .hero__tags li { color: #fff; background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.30); } /* Botão ghost precisa de contraste no escuro. */ .hero--banner .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); } .hero--banner .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } /* Ficha técnica (usada em Sobre/Contato — não mais no hero) */ .ficha__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px dashed var(--line); } .ficha__row:last-of-type { border-bottom: 0; } .ficha__k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-500); flex: none; } .ficha__v { font-weight: 600; color: var(--navy-900); text-align: right; font-size: 0.95rem; } /* colchetes de canto (marcador técnico) */ .ficha__corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--signal); } .ficha__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .ficha__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } @media (max-width: 860px) { .hero__inner { min-height: min(72vh, 620px); } /* Overlay reforçado: horizontal + vertical, garantindo contraste do texto. */ .hero--banner::after { background: linear-gradient(180deg, rgba(11, 37, 69, 0.55) 0%, rgba(11, 37, 69, 0.80) 100%), linear-gradient(90deg, rgba(11, 37, 69, 0.92) 0%, rgba(11, 37, 69, 0.55) 100%); } } /* ---------- STUBS DE SEÇÃO (temporário) ---------- */ #servicos, #sobre, #portfolio { border-bottom: 1px solid var(--line-soft); } #portfolio h2 { margin-top: 0.5rem; } /* ================= SERVIÇOS ================= */ .servicos__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); } .servicos__head h2 { margin: 0.6rem 0 0; } .servicos__intro { color: var(--steel-600); font-size: var(--step-1); line-height: 1.6; margin-top: 0.85rem; } .servicos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.5rem); align-items: stretch; /* padrão do grid — explícito pra garantir alturas iguais */ } @media (max-width: 860px) { .servicos__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .servicos__grid { grid-template-columns: 1fr; } } .servico-card { display: flex; flex-direction: column; height: 100%; /* ocupa toda a altura da célula da grade (fileiras iguais) */ background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; /* pra imagem/zoom respeitarem o canto arredondado */ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Mídia — foto real ou placeholder com ícone, ambos em 4/3 */ .servico-card__media { flex: none; /* não estica: mantém o aspect-ratio 4/3 igual em todos os cards */ aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-900); } .servico-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .servico-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--navy-900); color: var(--steel-300); } .servico-card__placeholder svg { width: 34%; max-width: 88px; height: auto; } .servico-card__body { flex: 1 1 auto; /* cresce pra igualar a altura dos cards da mesma fileira */ padding: clamp(1.2rem, 2.2vw, 1.6rem); } .servico-card__title { color: var(--navy-900); font-size: var(--step-1); margin: 0 0 0.5rem; } .servico-card__desc { color: var(--steel-600); line-height: 1.6; margin: 0; } .servico-card:hover, .servico-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-600); } .servico-card:hover .servico-card__img, .servico-card:focus-within .servico-card__img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .servico-card { transition: box-shadow 0.2s ease, border-color 0.2s ease; } .servico-card:hover, .servico-card:focus-within { transform: none; } .servico-card__img { transition: none; } .servico-card:hover .servico-card__img, .servico-card:focus-within .servico-card__img { transform: none; } } /* ================= DIFERENCIAIS (faixa navy) ================= */ .section--navy { position: relative; background: var(--navy-900); color: #fff; } /* Malha de planta um pouco mais visível sobre o navy que o padrão claro. */ .section--navy.blueprint { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 44px 44px; background-color: var(--navy-900); } /* Eyebrow em tom âmbar pra ler no fundo escuro (o tick já é --signal). */ .eyebrow--light { color: var(--signal); } .diferenciais__head { max-width: 44rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .diferenciais__title { color: #fff; margin: 0.7rem 0 0; } .diferenciais__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 4vw, 3rem); } @media (max-width: 620px) { .diferenciais__grid { grid-template-columns: 1fr; } } .diferencial { max-width: 34rem; } .diferencial__icon { display: inline-flex; color: var(--signal); margin-bottom: 1rem; } .diferencial__icon svg { width: 40px; height: 40px; } /* Título com tick âmbar fino antes (motivo do .eyebrow, com parcimônia). */ .diferencial__title { display: flex; align-items: baseline; gap: 0.7rem; color: #fff; font-size: var(--step-2); margin: 0 0 0.6rem; } .diferencial__title::before { content: ""; flex: none; width: 20px; height: 2px; background: var(--signal); transform: translateY(-0.35em); } .diferencial__desc { color: var(--steel-300); font-size: var(--step-1); line-height: 1.65; margin: 0; } /* ================= SOBRE ================= */ /* --- Parte 1: intro + card do responsável --- */ .sobre__intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 860px) { .sobre__intro { grid-template-columns: 1fr; } } .sobre__texto h2 { margin: 0.6rem 0 1.1rem; } .sobre__texto p { color: var(--steel-600); line-height: 1.7; margin: 0 0 1.1rem; } .sobre__texto p:last-child { margin-bottom: 0; } /* Card "Responsável técnico" */ .responsavel { position: relative; /* ancora os .ficha__corner */ background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } @media (max-width: 860px) { .responsavel { max-width: 22rem; } } .responsavel__media { aspect-ratio: 4 / 3; background: var(--navy-900); overflow: hidden; } .responsavel__img { display: block; width: 100%; height: 100%; object-fit: cover; } .responsavel__mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 9vw, 5.5rem); letter-spacing: 0.04em; color: var(--steel-300); background: var(--navy-900); } .responsavel__body { padding: 1.2rem clamp(1.2rem, 2.2vw, 1.6rem) 1.4rem; } .responsavel__nome { color: var(--navy-900); font-size: var(--step-1); margin: 0 0 0.35rem; } .responsavel__cargo { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-600); margin: 0; } /* --- Parte 2: "Como trabalhamos" (processo) --- */ .processo { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); } .processo__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .processo__title { color: var(--navy-900); margin: 0.6rem 0 0; } .processo__etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3rem); } @media (max-width: 720px) { .processo__etapas { grid-template-columns: 1fr; } } .etapa { position: relative; } /* Linha sutil ligando as etapas no desktop (reforça a sequência). */ .etapa:not(:last-child)::after { content: ""; position: absolute; top: 0.7em; left: calc(100% + 0.4rem); width: calc(clamp(1.75rem, 4vw, 3rem) - 0.8rem); height: 2px; background: var(--line); } @media (max-width: 720px) { .etapa:not(:last-child)::after { display: none; } } .etapa__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--steel-300); margin-bottom: 0.6rem; } .etapa__title { color: var(--navy-900); font-size: var(--step-1); margin: 0 0 0.5rem; } .etapa__desc { color: var(--steel-600); line-height: 1.65; margin: 0; } /* ================= CONTATO ================= */ .contato__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 860px) { .contato__grid { grid-template-columns: 1fr; } } .contato__intro h2 { margin: 0.6rem 0 1.1rem; } .contato__lead { color: var(--steel-600); line-height: 1.7; margin: 0 0 1.75rem; } /* Lista de contatos diretos */ .contato__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .contato__item { display: flex; align-items: center; gap: 0.9rem; } .contato__icon { display: inline-flex; flex: none; color: var(--navy-900); } .contato__icon svg { width: 24px; height: 24px; } .contato__data { display: flex; flex-direction: column; line-height: 1.4; } .contato__k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-500); } .contato__data a, .contato__data span:last-child { color: var(--navy-900); font-weight: 600; } .contato__data a { text-decoration: none; } .contato__data a:hover { color: var(--blue-600); text-decoration: underline; } /* Card do formulário */ .contato__card { position: relative; /* ancora os .ficha__corner */ background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3vw, 2.25rem); } .contato__card-title { color: var(--navy-900); font-size: var(--step-1); margin: 0 0 1.25rem; } /* Formulário de orçamento (client-side → WhatsApp) */ .orcamento-form { display: flex; flex-direction: column; gap: 1.1rem; } .campo { display: flex; flex-direction: column; gap: 0.4rem; } .campo__label { font-size: 0.9rem; font-weight: 600; color: var(--navy-900); } .campo__opcional { font-weight: 400; color: var(--steel-500); } .campo__input { font-family: var(--font-body); font-size: 1rem; color: var(--navy-900); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.65rem 0.8rem; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .campo__input::placeholder { color: var(--steel-500); } textarea.campo__input { resize: vertical; min-height: 4.5rem; } .campo__input:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(233, 162, 59, 0.28); } .campo__input[aria-invalid="true"] { border-color: var(--danger); } .campo__erro { margin: 0; font-size: 0.82rem; color: var(--danger); } .campo__erro[hidden] { display: none; } .orcamento-form__enviar { margin-top: 0.4rem; width: 100%; justify-content: center; } @media (prefers-reduced-motion: reduce) { .campo__input { transition: none; } } /* ================= PORTFÓLIO ================= */ .section--branco { background: #fff; } .portfolio__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); } .portfolio__head h2 { margin: 0.6rem 0 0; } .portfolio__intro { color: var(--steel-600); font-size: var(--step-1); line-height: 1.6; margin-top: 0.85rem; } .portfolio__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.8vw, 1.25rem); } @media (max-width: 1000px) { .portfolio__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .portfolio__grid { grid-template-columns: 1fr; } } .portfolio__item { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--navy-900); } .portfolio__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; } .portfolio__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .portfolio__item:hover, .portfolio__item:focus-within { box-shadow: var(--shadow-md); } .portfolio__item:hover .portfolio__img, .portfolio__link:focus-visible .portfolio__img { transform: scale(1.04); } .portfolio__vazio { color: var(--steel-500); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; } @media (prefers-reduced-motion: reduce) { .portfolio__img { transition: none; } .portfolio__item:hover .portfolio__img, .portfolio__link:focus-visible .portfolio__img { transform: none; } }