/* ============================================================= servico.css — folha compartilhada pelas 16 páginas de serviço individual (servicos//index.html). O que varia entre páginas é só o conteúdo do ; layout, ritmo e movimento vivem aqui e em assets/js/pages/servico.js. Linguagem: mesma da home — Inter (--font-primary) só em display, Familjen Grotesk (--font-interface) em texto/interface, Martian Mono (--font-mono) em rótulos/micro. Seções alternam fundo escuro e claro; a classe de contexto .svc-section--light inverte os tokens locais. ============================================================= */ :root { --svc-ink: #ffffff; --svc-dim: rgba(255, 255, 255, 0.62); --svc-faint: rgba(255, 255, 255, 0.40); --svc-line: rgba(255, 255, 255, 0.16); --svc-surface: rgba(255, 255, 255, 0.04); --svc-surface-hover: rgba(255, 255, 255, 0.08); } .svc-page { background: var(--color-background); color: var(--svc-ink); overflow: clip; } .svc-page * { box-sizing: border-box; } .svc-page section { position: relative; padding-block: clamp(6rem, 12vw, 11rem); padding-inline: var(--page-padding); } .svc-shell { width: min(100%, var(--container-max)); margin-inline: auto; } /* ---------------------------------------- Contexto de seção clara Inverte os tokens locais para as seções de fundo claro, sem tocar em tokens.css (padrão "classe de contexto" do registry). */ .svc-section--light { background: #f1f1f0; color: #393939; --svc-ink: #1c1c1c; --svc-dim: rgba(10, 10, 10, 0.66); --svc-faint: rgba(10, 10, 10, 0.50); --svc-line: rgba(10, 10, 10, 0.14); --svc-surface: rgba(10, 10, 10, 0.04); --svc-surface-hover: rgba(10, 10, 10, 0.07); } .svc-section--light .svc-pillar { background: #f1f1f0; } .svc-eyebrow { margin: 0; font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-faint); } /* --------------------------------------------------------- Hero */ .svc-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: clamp(5rem, 10vh, 8rem); overflow: hidden; } .svc-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.05), transparent 48%), radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.04), transparent 55%); pointer-events: none; } .svc-hero .svc-shell { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.5rem, 3vw, 2.5rem); } .svc-hero__title { margin: 0 auto; max-width: 18ch; font: 400 clamp(3rem, 5.5vw, 6.6rem)/0.92 var(--font-primary); letter-spacing: -0.07em; } .svc-hero__lead { margin: 0 auto; max-width: 46ch; font: 400 clamp(1rem, 1.15vw, 1.15rem)/1.4 var(--font-interface); letter-spacing: -0.02em; color: var(--svc-dim); } .svc-hero__actions { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; } .svc-hero__scroll { margin: clamp(1.25rem, 3.5vw, 2.75rem) auto 0; align-self: center; font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-faint); display: inline-flex; align-items: center; gap: 0.6rem; } .svc-hero__scroll span { display: inline-block; } /* ----------------------------------------------------- Problema */ .svc-problem .svc-shell { text-align: center; } .svc-problem__statement { margin: 0 auto; max-width: 16.5ch; font: 400 clamp(3rem, 5.35vw, 5.4rem)/0.96 var(--font-primary); letter-spacing: -0.065em; } .svc-problem__statement .svc-char { color: rgba(255, 255, 255, 0.16); } .svc-section--light .svc-problem__statement .svc-char { color: rgba(10, 10, 10, 0.18); } .svc-problem__support { margin: clamp(2rem, 5vw, 3.5rem) auto 0; max-width: 52ch; font: 400 clamp(1rem, 1.3vw, 1.2rem)/1.55 var(--font-interface); color: var(--svc-dim); } /* ------------------------------------------------------ Pilares */ .svc-section__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto clamp(3rem, 6vw, 5rem); max-width: 46rem; text-align: center; } .svc-section__head h2 { margin: 0; font: 500 clamp(2.6rem, 4.6vw, 4rem)/0.98 var(--font-primary); letter-spacing: -0.055em; } .svc-pillars .svc-media { margin: 0 0 clamp(3rem, 6vw, 5rem); border: 1px solid var(--svc-line); border-radius: var(--radius-medium); overflow: hidden; aspect-ratio: 1000 / 725; } .svc-pillars .svc-media img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; display: block; } @media (prefers-reduced-motion: reduce) { .svc-pillars .svc-media img { height: 100%; margin-top: 0; } } .svc-pillars__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 1.5vw, 1.4rem); } .svc-pillar { background: var(--color-background); border: 1px solid var(--svc-line); border-radius: 0.45rem; padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: 0.9rem; transition: background-color 0.4s ease; } .svc-pillar:is(:hover, :focus-within) { background: var(--svc-surface); } .svc-pillar__index { font: 500 0.7rem/1 var(--font-mono); color: var(--svc-faint); letter-spacing: 0.04em; } .svc-pillar h3 { margin: 0; font: 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.1 var(--font-primary); letter-spacing: -0.02em; } .svc-pillar p { margin: 0; font: 400 0.98rem/1.5 var(--font-interface); color: var(--svc-dim); } /* ------------------------------------------------- Capacidades */ .svc-caps { margin: 0 auto; padding: 0; list-style: none; max-width: 52rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } .svc-caps li { padding: 1rem 0; border-top: 1px solid var(--svc-line); font: 400 0.82rem/1.4 var(--font-interface); } .svc-caps li:first-child, .svc-caps li:nth-child(2) { border-top: 0; } /* --------------------------------------------------- Processo */ .svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } .svc-step { display: flex; flex-direction: column; } .svc-step__line { position: relative; height: 1px; background: var(--svc-line); margin-bottom: 2rem; } .svc-step__line i { position: absolute; inset: 0 auto 0 0; display: block; width: 100%; height: 3px; transform: translateY(-1px) scaleX(0); transform-origin: 0 50%; background: var(--svc-ink); } .svc-step__tag { margin: 0 0 0.9rem; font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-faint); } .svc-step h3 { margin: 0 0 0.75rem; font: 400 clamp(1.4rem, 2.2vw, 2rem)/1 var(--font-primary); letter-spacing: -0.02em; } .svc-step p { margin: 0; font: 400 0.95rem/1.5 var(--font-interface); color: var(--svc-dim); max-width: 34ch; } /* ------------------------------------------------ Prova / números */ .svc-metrics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--svc-line); padding-top: clamp(2.5rem, 5vw, 4rem); } .svc-metric { text-align: center; } .svc-metric strong { display: block; font: 400 clamp(2.6rem, 4vw, 3.9rem)/0.85 var(--font-primary); letter-spacing: -0.05em; } .svc-metric span { display: block; margin-top: 0.85rem; font: 500 0.68rem/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-faint); } .svc-metric small { display: block; margin-top: 0.6rem; font: 400 0.9rem/1.45 var(--font-interface); color: var(--svc-dim); } .svc-segments { margin-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; border-block: 1px solid var(--svc-line); padding-block: 1.6rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .svc-segments__track { display: flex; width: max-content; gap: 3.5rem; white-space: nowrap; will-change: transform; } .svc-segments__track span { font: 400 1rem/1 var(--font-interface); color: var(--svc-dim); text-transform: uppercase; letter-spacing: 0.04em; } .svc-segments__track span::after { content: "+"; margin-left: 3.5rem; color: var(--svc-faint); } /* ---------------------------------------------------------- FAQ Fundo preto igual ao rodapé e à FAQ aprovada de /servicos/. */ .svc-faq { background: #000; color: #f3f3f3; --svc-ink: #f3f3f3; --svc-dim: rgba(255, 255, 255, 0.66); --svc-faint: rgba(255, 255, 255, 0.46); --svc-line: rgba(255, 255, 255, 0.16); } .svc-faq__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); max-width: 46rem; text-align: center; } .svc-faq__head h2 { margin: 0; font: 500 clamp(2.6rem, 4.6vw, 4rem)/0.98 var(--font-primary); letter-spacing: -0.055em; } .svc-faq__head p { margin: 0; color: var(--svc-dim); line-height: 1.55; } .svc-faq__list { border-top: 1px solid var(--svc-line); max-width: 60rem; margin-inline: auto; } .svc-faq__item { border-bottom: 1px solid var(--svc-line); } .svc-faq__item h3 { margin: 0; } .svc-faq__item button { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: clamp(1.4rem, 2.5vw, 2rem) 0; background: none; color: inherit; text-align: left; cursor: pointer; font: 500 clamp(1.35rem, 2.2vw, 2.3rem)/1.03 var(--font-primary); letter-spacing: -0.045em; } .svc-faq__icon { position: relative; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--svc-line); border-radius: var(--radius-pill); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .svc-faq__icon::before, .svc-faq__icon::after { content: ""; position: absolute; inset: 50% 25% auto 25%; height: 1.5px; background: var(--svc-ink); transition: transform 0.4s ease; } .svc-faq__icon::after { transform: rotate(90deg); } .svc-faq__item.is-open .svc-faq__icon { transform: rotate(180deg); } .svc-faq__item.is-open .svc-faq__icon::after { transform: rotate(0deg); } .svc-faq__answer { height: 0; overflow: hidden; opacity: 0; visibility: hidden; } .svc-faq__answer > div { padding-bottom: clamp(1.4rem, 2.5vw, 2rem); } .svc-faq__answer p { margin: 0; max-width: 62ch; font: 400 1rem/1.6 var(--font-interface); color: var(--svc-dim); } /* -------------------------------------------------- CTA de fecho */ .svc-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3rem); } .svc-cta__eyebrow { margin: 0; font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--svc-faint); } .svc-cta h2 { margin: 0; max-width: 18ch; font: 500 clamp(2.75rem, 5.4vw, 5.5rem)/0.92 var(--font-primary); letter-spacing: -0.07em; } .svc-cta__inner .motion-link { margin-inline: auto; } /* --------------------------------------------------- Responsivo */ @media (max-width: 900px) { .svc-caps { grid-template-columns: 1fr; max-width: 34rem; } .svc-caps li:nth-child(2) { border-top: 1px solid var(--svc-line); } } @media (max-width: 640px) { .svc-hero__title { font-size: clamp(3rem, 10.2vw, 4rem); line-height: 0.98; letter-spacing: -0.065em; } .svc-pillars__grid { grid-template-columns: 1fr; } } /* --------------------------------------------- Movimento reduzido */ @media (prefers-reduced-motion: reduce) { .svc-problem__statement .svc-char { color: var(--svc-ink); } .svc-step__line i { transform: translateY(-1px) scaleX(1); } .svc-segments__track { animation: none !important; } .svc-hero__scroll span:first-child { animation: none; } }