/* ==========================================================================
SITE NOVO · RODRIGO MIGUEL
--------------------------------------------------------------------------
Visual do site. As cores, fontes, espaços e tempos vêm do design system
(rm.css). Este arquivo só compõe: nunca inventa cor nova.
01 · Base
02 · Menu
03 · Menu do celular
04 · Abertura (hero)
05 · Cortina (seções que sobem por cima da abertura)
06 · Botão fixo do celular
07 · Entrada animada
08 · Celular e tablet em pé
09 · Quem sou
10 · Faixa de ferramentas (divisão entre Quem sou e O que faço)
11 · O que faço
12 · Prazo e preço
13 · Como funciona (fica entre O que faço e Prazo e preço na página)
14 · Mapa · onde já atendi (entre O que faço e Como funciona)
15 · Trabalhos (grade com filtro)
16 · Páginas de projeto e rodapé
17 · Depoimentos
18 · Transição "bora fechar?"
19 · Faixinha de ferramentas + Contato
20 · Rodapé
========================================================================== */
:root {
--nav-h: 5.5rem;
--wide: 100rem; /* 1600px: menu e abertura usam a tela mais larga */
--hero-title: clamp(2.125rem, 4.1vw, 4.75rem); /* o site.js ajusta pra alinhar com o "Quem sou" */
--hero-side: clamp(22rem, 29vw, 26.5rem); /* texto da direita: vai até a gola da camiseta */
--hold: 0px; /* rolagem livre antes da cortina subir */
--cover: 0; /* 0 → abertura livre · 1 → coberta (site.js) */
}
/* --------------------------------------------------------------------------
01 · BASE
-------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
background: var(--rm-void);
color: var(--rm-text);
font-family: var(--rm-font);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
body.is-locked { overflow: hidden; }
.wrap {
width: 100%;
max-width: calc(var(--rm-container) + var(--rm-gutter) * 2);
margin-inline: auto;
padding-inline: var(--rm-gutter);
}
.wrap--wide { max-width: calc(var(--wide) + var(--rm-gutter) * 2); }
.nowrap { white-space: nowrap; }
/* Da segunda seção em diante: conteúdo com no máximo 1140px no desktop e
margem lateral fixa de 30px no celular. A abertura continua na .wrap--wide. */
.wrap--section { max-width: calc(71.25rem + var(--rm-gutter) * 2); } /* 1140px */
@media (max-width: 767px) {
.wrap--section { padding-inline: 1.875rem; /* 30px */ }
}
.skip:focus {
position: fixed; top: var(--rm-sp-4); left: var(--rm-sp-4);
width: auto; height: auto; clip: auto; margin: 0;
padding: var(--rm-sp-3) var(--rm-sp-4);
background: var(--rm-green); color: var(--rm-void);
border-radius: var(--rm-r-full);
z-index: var(--rm-z-toast);
}
/* --------------------------------------------------------------------------
02 · MENU
-------------------------------------------------------------------------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--rm-z-nav);
height: var(--nav-h);
display: flex;
align-items: center;
transition:
background-color var(--rm-dur-slow) var(--rm-ease-out),
border-color var(--rm-dur-slow) var(--rm-ease-out),
backdrop-filter var(--rm-dur-slow) var(--rm-ease-out);
border-bottom: var(--rm-bw-hair) solid transparent;
}
.nav.is-solid {
background: rgb(var(--rm-void-rgb) / 0.62);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: var(--rm-border-soft);
}
.nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--rm-sp-6);
}
/* O menu acompanha a rolagem: na abertura usa a largura larga (1600px) e,
conforme a cortina sobe (--cover de 0 a 1, site.js), vai estreitando até
alinhar logo e botão com o conteúdo das seções (1140px). */
.nav .nav__inner {
max-width: min(
calc(var(--wide) + var(--rm-gutter) * 2),
calc(100% - (100% - (71.25rem + var(--rm-gutter) * 2)) * var(--cover))
);
}
@media (max-width: 767px) {
/* celular: a margem lateral vai dos 20px da abertura pros 30px das seções */
.nav .nav__inner { padding-inline: calc(var(--rm-gutter) + (1.875rem - var(--rm-gutter)) * var(--cover)); }
}
.nav__logo { justify-self: start; display: inline-flex; }
.nav__logo img { width: 8.25rem; height: auto; }
.nav__links { display: flex; gap: var(--rm-sp-6); }
.nav__links a {
position: relative;
font-size: var(--rm-fs-body-s);
color: var(--rm-text-muted);
padding-block: var(--rm-sp-2);
transition: color var(--rm-dur-fast) var(--rm-ease-out);
}
.nav__links a::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0.25rem;
height: var(--rm-bw-hair);
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--rm-dur-base) var(--rm-ease-out);
}
.nav__links a:hover { color: var(--rm-text); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
/* "Pedir orçamento" do topo: link sublinhado com seta, no estilo da referência */
/* botão do menu: usa o .bridge (azul suave, igual ao "Solicitar orçamento" das agências) */
.nav__cta { justify-self: end; }
.nav__burger {
display: none;
justify-self: end;
width: 3rem; height: 3rem;
margin-right: calc(var(--rm-sp-3) * -1);
background: none; border: 0; cursor: pointer;
position: relative;
}
.nav__burger span {
position: absolute; left: 50%; top: 50%;
width: 1.375rem; height: var(--rm-bw-base);
background: var(--rm-text);
border-radius: var(--rm-r-full);
transition: transform var(--rm-dur-base) var(--rm-ease-out);
}
.nav__burger span:first-child { transform: translate(-50%, -4px); }
.nav__burger span:last-child { transform: translate(-50%, 3px); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translate(-50%, 0) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translate(-50%, 0) rotate(-45deg); }
/* --------------------------------------------------------------------------
03 · MENU DO CELULAR
-------------------------------------------------------------------------- */
.menu {
position: fixed;
inset: 0;
z-index: calc(var(--rm-z-nav) - 1);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: calc(var(--nav-h) + var(--rm-sp-6));
padding-bottom: calc(var(--rm-sp-6) + env(safe-area-inset-bottom));
background: rgb(var(--rm-void-rgb) / 0.9);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
opacity: 0;
transition: opacity var(--rm-dur-base) var(--rm-ease-out);
}
.menu[hidden] { display: none; } /* sem isso o menu invisível cobria a página e roubava os cliques */
.menu.is-open { opacity: 1; }
.menu__inner { display: flex; flex-direction: column; }
.menu__inner a {
font-size: var(--rm-fs-display-m);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-heading);
padding-block: var(--rm-sp-3);
border-bottom: var(--rm-bw-hair) solid var(--rm-border-soft);
opacity: 0;
transform: translateY(12px);
transition:
opacity var(--rm-dur-slow) var(--rm-ease-out),
transform var(--rm-dur-slow) var(--rm-ease-out);
}
.menu.is-open .menu__inner a { opacity: 1; transform: none; }
.menu.is-open .menu__inner a:nth-child(2) { transition-delay: 40ms; }
.menu.is-open .menu__inner a:nth-child(3) { transition-delay: 80ms; }
.menu.is-open .menu__inner a:nth-child(4) { transition-delay: 120ms; }
.menu.is-open .menu__inner a:nth-child(5) { transition-delay: 160ms; }
/* --------------------------------------------------------------------------
04 · ABERTURA
Desktop: título à esquerda, números embaixo dele, texto e botão no canto
direito, longe do rosto.
-------------------------------------------------------------------------- */
.hero {
position: sticky;
top: var(--hero-top, 0px); /* negativo quando a abertura é mais alta que a tela (site.js) */
z-index: 0;
min-height: 100vh;
min-height: 100svh;
display: flex;
overflow: hidden;
isolation: isolate;
background: var(--rm-void);
}
/* Foto — sem zoom: ela ocupa a tela do jeito que foi fotografada */
.hero__media {
position: absolute;
inset: 0;
z-index: -5;
}
.hero__media picture,
.hero__media img {
display: block;
width: 100%;
height: 100%;
}
.hero__media img {
object-fit: cover;
object-position: 58% 22%; /* em tela mais larga que a foto, corta mais embaixo e preserva a cabeça */
}
/* Sombra pra leitura: a foto nunca recebe texto sem ao menos 55% de escuro por baixo */
.hero__shade {
position: absolute;
inset: 0;
z-index: -4;
background:
linear-gradient(180deg, rgb(var(--rm-void-rgb) / 0.6) 0%, rgb(var(--rm-void-rgb) / 0) 22%),
linear-gradient(90deg, rgb(var(--rm-void-rgb) / 0.82) 0%, rgb(var(--rm-void-rgb) / 0.5) 30%, rgb(var(--rm-void-rgb) / 0) 56%),
linear-gradient(270deg, rgb(var(--rm-void-rgb) / 0.55) 0%, rgb(var(--rm-void-rgb) / 0) 30%),
linear-gradient(0deg, rgb(var(--rm-void-rgb) / 0.92) 0%, rgb(var(--rm-void-rgb) / 0.55) 24%, rgb(var(--rm-void-rgb) / 0) 50%);
}
/* Brilho azul de atmosfera, atrás do título */
.hero__glow {
position: absolute;
z-index: -3;
left: -22vw;
bottom: -38vw;
width: 72vw;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side,
rgb(var(--rm-blue-rgb) / 0.42), rgb(var(--rm-blue-deep-rgb) / 0.18) 46%, transparent 74%);
filter: blur(90px);
pointer-events: none;
}
/* Grão sutil que junta foto e interface */
.hero__grain {
position: absolute;
inset: -50%;
z-index: -2;
opacity: 0.07;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
/* Escurece a abertura enquanto a cortina sobe */
.hero__dim {
position: absolute;
inset: 0;
z-index: 3;
background: var(--rm-void);
opacity: calc(var(--cover) * 0.85);
pointer-events: none;
}
/* Conteúdo */
.hero__lead { display: contents; } /* no desktop, título e texto entram direto na grade */
.hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-side));
grid-template-rows: 1fr auto;
grid-template-areas:
"title answer"
"facts answer";
column-gap: var(--rm-sp-9);
row-gap: var(--rm-sp-8);
padding-top: calc(var(--nav-h) + var(--rm-sp-8));
padding-bottom: var(--rm-sp-8);
}
.hero__title {
grid-area: title;
align-self: center; /* no meio do espaço entre o menu e os números */
font-size: var(--hero-title);
font-weight: var(--rm-w-regular);
line-height: var(--rm-lh-snug);
letter-spacing: 0;
color: var(--rm-text);
}
.hero__title b { font-weight: var(--rm-w-semibold); }
.hero__title .line {
display: block;
overflow: hidden;
/* espaço pra não cortar a perna do "p" e do "ç" na máscara */
padding-bottom: 0.1em;
margin-bottom: -0.1em;
}
.hero__title .line > span { display: inline-block; }
/* Faixa de números */
.hero__facts {
grid-area: facts;
list-style: none;
display: flex;
flex-wrap: wrap;
align-self: end;
}
.hero__facts li {
display: flex;
flex-direction: column;
gap: var(--rm-sp-1);
padding-inline: var(--rm-sp-6);
border-left: var(--rm-bw-hair) solid var(--rm-border);
}
.hero__facts li:first-child { padding-left: 0; border-left: 0; }
.hero__facts span {
font-size: var(--rm-fs-caption);
color: var(--rm-text-muted);
}
.hero__facts strong {
font-size: var(--rm-fs-h3);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-heading);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Resposta + botão */
.hero__answer {
grid-area: answer;
align-self: end;
}
.hero__answer p {
font-size: var(--rm-fs-body-l);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-loose);
color: var(--rm-text);
text-wrap: pretty;
margin-bottom: var(--rm-sp-6);
}
/* Enquanto a cortina sobe, o conteúdo da abertura recua de leve.
A foto não se mexe: só escurece (camada .hero__dim). */
@media (prefers-reduced-motion: no-preference) {
.hero__inner {
transform: translate3d(0, calc(var(--cover) * -6vh), 0);
opacity: calc(1 - var(--cover) * 0.85);
}
}
/* --------------------------------------------------------------------------
05 · CORTINA
-------------------------------------------------------------------------- */
.curtain {
position: relative;
z-index: 1;
margin-top: var(--hold);
background: var(--rm-void);
border-radius: var(--rm-r-xl) var(--rm-r-xl) 0 0;
box-shadow: 0 -40px 80px rgb(var(--rm-void-rgb) / 0.55);
}
/* fio de luz no topo da cortina, o mesmo dos cards de vidro */
.curtain::before {
content: "";
position: absolute;
top: 0; left: 14%; right: 14%;
height: var(--rm-bw-hair);
background: linear-gradient(90deg, transparent, rgb(var(--rm-light-rgb) / 0.45), transparent);
}
.section { position: relative; }
/* --------------------------------------------------------------------------
06 · BOTÃO FIXO DO CELULAR
-------------------------------------------------------------------------- */
.dock {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--rm-z-sticky);
padding: var(--rm-sp-3) var(--rm-gutter) calc(var(--rm-sp-3) + env(safe-area-inset-bottom));
background: linear-gradient(0deg, rgb(var(--rm-void-rgb) / 0.9) 30%, transparent);
transform: translateY(110%);
transition: transform var(--rm-dur-slow) var(--rm-ease-out);
}
.dock.is-on { transform: none; }
.dock.is-on.is-muted { transform: translateY(110%); } /* do "bora fechar?" até o fim: o verde do contato já basta */
/* --------------------------------------------------------------------------
07 · ENTRADA ANIMADA
Só começa quando a fonte carregou (html.is-ready, marcado pelo site.js):
assim o título entra inteiro, de uma vez, sem trocar de letra no meio.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* estado inicial, enquanto a fonte carrega */
.js:not(.is-ready) .hero__media img,
.js:not(.is-ready) .nav,
.js:not(.is-ready) .hero__answer,
.js:not(.is-ready) .hero__facts li { opacity: 0; }
.js:not(.is-ready) .hero__title .line > span { transform: translateY(110%); }
.is-ready .hero__media img { animation: photo-in 1.2s var(--rm-ease-out) both; }
.is-ready .nav { animation: fade-down var(--rm-dur-reveal) var(--rm-ease-out) 0.1s both; }
.is-ready .hero__title .line > span { animation: line-up 0.8s var(--rm-ease-entry) both; }
.is-ready .hero__title .line:nth-child(1) > span { animation-delay: 0.15s; }
.is-ready .hero__title .line:nth-child(2) > span { animation-delay: 0.21s; }
.is-ready .hero__title .line:nth-child(3) > span { animation-delay: 0.27s; }
.is-ready .hero__answer { animation: fade-up var(--rm-dur-reveal) var(--rm-ease-out) 0.5s both; }
.is-ready .hero__facts li { animation: fade-up var(--rm-dur-reveal) var(--rm-ease-out) both; }
.is-ready .hero__facts li:nth-child(1) { animation-delay: 0.6s; }
.is-ready .hero__facts li:nth-child(2) { animation-delay: 0.68s; }
.is-ready .hero__facts li:nth-child(3) { animation-delay: 0.76s; }
.is-ready .hero__facts li:nth-child(4) { animation-delay: 0.84s; }
}
@keyframes photo-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes fade-down {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: none; }
}
@keyframes line-up {
from { transform: translateY(110%); }
to { transform: none; }
}
/* --------------------------------------------------------------------------
08 · CELULAR E TABLET EM PÉ
A foto fica no alto (rosto livre) e o texto desce pra metade de baixo.
-------------------------------------------------------------------------- */
@media (max-width: 1079px) {
.nav__links { display: none; }
.nav__inner { grid-template-columns: 1fr auto auto; }
}
@media (max-width: 767px), (max-width: 1079px) and (orientation: portrait) {
:root {
--nav-h: 4.5rem;
--hero-title: clamp(2rem, 8.6vw, 3.75rem);
--hold: 32svh; /* dá tempo de ver os números antes da cortina subir */
}
.bridge.nav__cta { display: none; } /* .bridge vem depois no arquivo e reexibia o botão */
.nav__burger { display: block; }
.nav__inner { grid-template-columns: 1fr auto; }
.nav__logo img { width: 7.25rem; }
.hero { display: block; }
.hero__media { top: -2.5svh; bottom: auto; height: 76svh; }
.hero__media img { object-position: 50% 0%; }
.hero__shade {
background:
linear-gradient(180deg, rgb(var(--rm-void-rgb) / 0.55) 0%, rgb(var(--rm-void-rgb) / 0) 16%),
linear-gradient(0deg, var(--rm-void) 24%, rgb(var(--rm-void-rgb) / 0.62) 46%, rgb(var(--rm-void-rgb) / 0) 64%);
}
.hero__glow { width: 140vw; left: -60vw; bottom: -70vw; }
/* Primeira tela: título, texto e botão encostados embaixo, com folga pra
barra do Safari. Os números ficam logo depois, fora da primeira tela. */
.hero__inner {
display: block;
padding-top: 0;
padding-bottom: var(--rm-sp-10);
}
.hero__lead {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 100svh;
padding-top: var(--nav-h);
/* folga pra barra do Safari; menor que antes pra o título começar na altura da gola */
padding-bottom: calc(var(--rm-sp-8) + env(safe-area-inset-bottom));
}
.hero__title { align-self: stretch; } /* no desktop ele centraliza; aqui fica colado à esquerda */
.hero__answer { margin-top: var(--rm-sp-4); }
.hero__answer p {
font-size: var(--rm-fs-body);
line-height: var(--rm-lh-body);
margin-bottom: var(--rm-sp-4);
}
.hero__cta { width: 100%; }
.hero__facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rm-sp-5) var(--rm-sp-5);
padding-top: var(--rm-sp-6);
border-top: var(--rm-bw-hair) solid var(--rm-border);
}
.hero__facts li,
.hero__facts li:first-child { padding: 0; border: 0; }
.hero__facts strong { font-size: var(--rm-fs-body-l); }
.curtain { border-radius: var(--rm-r-lg) var(--rm-r-lg) 0 0; }
.dock { display: block; }
}
/* Tablet em pé: mesma ordem do celular, com o texto numa largura confortável */
@media (min-width: 768px) and (max-width: 1079px) and (orientation: portrait) {
.hero__answer { max-width: 34rem; }
.hero__cta { width: auto; }
.hero__facts { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: var(--rm-sp-8); }
}
/* ==========================================================================
09 · QUEM SOU
--------------------------------------------------------------------------
Diagramação da referência Ouder:
┌──────────────┐
│ │ QUEM SOU
│ │ Sem agência no meio.
│ foto │ É comigo mesmo.
│ │
│ │ Sou Rodrigo Miguel, … (texto corrido)
│ │ [👤 Hoje, quem conversa… sou eu.] ← card cinza
│ RODRIGO │ ( Mas chega de falar de mim… ↓ ) ← botão azul suave
└──────────────┘
No desktop a seção ocupa uma tela e fica centralizada na altura.
========================================================================== */
.section { scroll-margin-top: var(--nav-h); }
.about {
padding-top: clamp(var(--rm-sp-10), 9vw, var(--rm-sp-12));
padding-bottom: clamp(var(--rm-sp-10), 8vw, var(--rm-sp-11));
}
.about__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: center;
gap: clamp(var(--rm-sp-8), 6vw, var(--rm-sp-10));
}
/* ---- Foto: card vertical, nome centralizado no pé --------------------- */
.about__photo {
position: relative;
isolation: isolate;
margin: 0;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 18px;
border: var(--rm-bw-hair) solid rgb(var(--rm-light-rgb) / 0.08);
background: var(--rm-ink);
overflow: hidden;
transition:
translate var(--rm-dur-slow) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
.about__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 26%;
transition: filter var(--rm-dur-slow) var(--rm-ease-out);
}
.about__photo::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(0deg, rgb(var(--rm-void-rgb) / 0.8) 0%, rgb(var(--rm-void-rgb) / 0) 34%),
radial-gradient(90% 60% at 0% 100%, rgb(var(--rm-blue-rgb) / 0.22), transparent 70%);
pointer-events: none;
}
.about__photo figcaption {
position: absolute;
left: 0; right: 0;
bottom: clamp(var(--rm-sp-5), 2.4vw, var(--rm-sp-7));
z-index: 2;
text-align: center;
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
text-transform: uppercase;
color: var(--rm-text);
}
@media (hover: hover) {
.about__photo:hover {
translate: 0 -4px;
border-color: rgb(var(--rm-light-rgb) / 0.18);
box-shadow: 0 28px 56px -28px rgb(var(--rm-void-rgb) / 0.9);
}
.about__photo:hover img { filter: brightness(1.08); }
}
/* ---- Textos ----------------------------------------------------------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--rm-sp-3);
margin-bottom: var(--rm-sp-5);
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
text-transform: uppercase;
color: var(--rm-text-muted);
}
.eyebrow i {
width: 0.375rem; height: 0.375rem;
border-radius: 50%;
background: var(--rm-blue);
box-shadow: 0 0 12px rgb(var(--rm-blue-rgb) / 0.9);
}
.about__title {
font-size: clamp(2.25rem, 4vw, 3.5rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
letter-spacing: 0;
color: var(--rm-text);
}
.about__title span { display: block; }
@media (max-width: 767px) {
/* 2 linhas: cada frase inteira numa linha, fonte acompanha a largura */
.about__title { font-size: min(8vw, 2.25rem); }
}
/* Parágrafo: tamanho de leitura, cinza, palavras-chave em off-white */
.about__lead {
margin-top: clamp(var(--rm-sp-5), 2.4vw, var(--rm-sp-6));
max-width: 56ch;
font-size: clamp(1.125rem, 1.5vw, 1.3125rem); /* um pouco maior desde que o card e o botão saíram */
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
.about__lead strong {
font-weight: var(--rm-w-regular);
color: var(--rm-text);
}
/* Frase principal: card cinza com ícone à esquerda (referência "Trusted by…").
Cinza = off-white da marca a 10% sobre o preto, o mesmo dos cards anteriores. */
.about__highlight {
display: flex;
align-items: center;
gap: var(--rm-sp-4);
margin-top: var(--rm-sp-6);
padding: 1.125rem 1.5rem;
border-radius: 18px;
background: rgb(var(--rm-light-rgb) / 0.1);
font-size: clamp(1rem, 1.3vw, 1.125rem);
font-weight: var(--rm-w-regular);
line-height: 1.45;
color: var(--rm-text);
text-wrap: pretty;
transition: background-color var(--rm-dur-base) var(--rm-ease-out);
}
.about__highlight-icon {
flex: none;
width: 1.5rem; height: 1.5rem;
color: var(--rm-text-muted);
}
.about__mark { font-weight: var(--rm-w-medium); white-space: nowrap; }
@media (hover: hover) {
.about__highlight:hover { background-color: rgb(var(--rm-light-rgb) / 0.13); }
}
/* Botão da transição: azul suave (ação secundária). A cor parada é a que ele
aprovou no hover; o hover agora só reforça um pouco. */
:is(.about__bridge, .bridge) {
display: inline-flex;
align-items: center;
gap: var(--rm-sp-3);
margin-top: clamp(var(--rm-sp-6), 3vw, var(--rm-sp-7));
padding: 0.875rem 1.25rem 0.875rem 1.5rem;
min-height: 3rem;
border-radius: 1.5rem;
border: var(--rm-bw-hair) solid rgb(var(--rm-blue-rgb) / 0.8);
background: rgb(var(--rm-blue-rgb) / 0.28);
font-size: var(--rm-fs-body-s);
font-weight: var(--rm-w-regular);
line-height: 1.35;
color: var(--rm-text);
text-decoration: none;
transition:
background-color var(--rm-dur-base) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
.about__bridge-muted { color: var(--rm-text-muted); }
:is(.about__bridge, .bridge) svg { flex: none; width: 1rem; height: 1rem; transition: translate var(--rm-dur-base) var(--rm-ease-out); }
:is(.about__bridge, .bridge):hover,
:is(.about__bridge, .bridge):focus-visible {
background: rgb(var(--rm-blue-rgb) / 0.38);
border-color: var(--rm-blue);
box-shadow: 0 12px 32px -14px rgb(var(--rm-blue-rgb) / 0.55);
}
:is(.about__bridge, .bridge):hover svg { translate: 0 2px; }
@media (prefers-reduced-motion: no-preference) {
:is(.about__bridge, .bridge) svg { animation: nudge 2.4s var(--rm-ease-inout) infinite; }
}
@keyframes nudge {
0%, 60%, 100% { transform: none; }
30% { transform: translateY(3px); }
}
/* ---- Revelação ao rolar ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--rm-dur-reveal) var(--rm-ease-out) calc(var(--i, 0) * 80ms),
transform var(--rm-dur-reveal) var(--rm-ease-out) calc(var(--i, 0) * 80ms);
}
.js .about__photo.reveal {
transition:
opacity var(--rm-dur-reveal) var(--rm-ease-out),
transform var(--rm-dur-reveal) var(--rm-ease-out),
translate var(--rm-dur-slow) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }
}
/* ---- DESKTOP: uma tela, conteúdo centralizado na altura --------------- */
@media (min-width: 1080px) {
.about {
display: flex;
align-items: center;
min-height: 100vh;
min-height: 100svh;
padding-top: calc(var(--nav-h) + clamp(var(--rm-sp-4), 3vh, var(--rm-sp-8)));
padding-bottom: clamp(var(--rm-sp-6), 4vh, var(--rm-sp-8));
scroll-margin-top: 0; /* o respiro do menu já está no padding */
}
.about > .wrap { width: 100%; }
/* a foto nunca passa da altura da tela */
.about__photo { max-height: calc(100svh - var(--nav-h) - 4.5rem); }
}
/* ---- CELULAR: foto em cima, texto embaixo ----------------------------- */
@media (max-width: 767px) {
.about__grid { grid-template-columns: 1fr; gap: var(--rm-sp-7); }
.about__lead { font-size: 1.0625rem; }
:is(.about__bridge, .bridge) { align-items: center; } /* seta centralizada na altura do botão */
}
/* ==========================================================================
10 · FAIXA DE FERRAMENTAS
--------------------------------------------------------------------------
Divisão em largura total entre "Quem sou" e "O que faço".
Um "piso" de cards inclinado em perspectiva; cada linha tem os cards
repetidos 3 vezes e desliza 1/3 da própria largura, então o loop não
tem emenda. Cores de marca (Claude, Figma, ChatGPT, WordPress) entram
como logo, igual a uma foto; o brilho usa o azul da marca.
========================================================================== */
.floor {
--floor-gap: clamp(0.5rem, 0.9vw, 0.8125rem);
position: relative;
isolation: isolate;
overflow: hidden;
height: clamp(16rem, 34vw, 32rem);
}
.floor__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.floor__glow {
position: absolute;
z-index: 0;
top: 62%;
left: 50%;
width: min(58rem, 90vw);
height: min(27rem, 44vw);
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(closest-side,
rgb(var(--rm-blue-rgb) / 0.4), rgb(var(--rm-blue-deep-rgb) / 0.16) 55%, transparent 100%);
filter: blur(24px);
pointer-events: none;
}
/* some nas quatro bordas — em cima e embaixo na mesma medida (24%) */
.floor__deck {
position: absolute;
inset: 0;
z-index: 1;
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, rgb(var(--rm-void-rgb)) 24%, rgb(var(--rm-void-rgb)) 76%, transparent 100%),
linear-gradient(90deg, transparent 0%, rgb(var(--rm-void-rgb)) 14%, rgb(var(--rm-void-rgb)) 86%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(180deg, transparent 0%, rgb(var(--rm-void-rgb)) 24%, rgb(var(--rm-void-rgb)) 76%, transparent 100%),
linear-gradient(90deg, transparent 0%, rgb(var(--rm-void-rgb)) 14%, rgb(var(--rm-void-rgb)) 86%, transparent 100%);
mask-composite: intersect;
}
/* o piso inclinado */
.floor__grid {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 180vw;
margin-left: -90vw;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--floor-gap);
transform-origin: 50% 56%;
transform: perspective(1000px) rotateX(58deg) rotate(-12deg) scale(1.15);
backface-visibility: hidden;
}
.floor__row { display: flex; overflow: hidden; }
.floor__track {
flex: none;
display: flex;
gap: var(--floor-gap);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.floor__track--r { animation-name: floor-r; }
.floor__track--l { animation-name: floor-l; }
.floor.is-live .floor__track { animation-play-state: running; will-change: transform; }
.floor__row:hover .floor__track { animation-play-state: paused; }
@keyframes floor-r { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
@keyframes floor-l { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
.floor__track { animation: none; }
}
/* cards */
.floor__tile {
flex: none;
display: grid;
place-items: center;
/* tamanho em variável: o ícone usa a mesma medida (porcentagem não resolvia dentro da grade) */
--tile: clamp(3.5rem, 7.2vw, 7rem);
width: var(--tile);
height: var(--tile);
border-radius: 12px;
color: rgb(var(--rm-light-rgb) / 0.34);
background: rgb(var(--rm-light-rgb) / 0.04);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.08);
transition:
color var(--rm-dur-slow) var(--rm-ease-out),
background-color var(--rm-dur-slow) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
/* hover dos cinza: o ícone clareia */
.floor__tile:not(.floor__tile--on):hover {
color: rgb(var(--rm-light-rgb) / 0.72);
background: rgb(var(--rm-light-rgb) / 0.08);
}
/* aceso: cor da marca no ícone, fundo e borda tingidos, brilho leve */
.floor__tile--on {
color: var(--k);
background: rgba(var(--krgb), 0.12);
box-shadow: inset 0 0 0 1px rgba(var(--krgb), 0.45), 0 0 18px -8px var(--k);
}
/* hover dos coloridos: a cor da marca continua, só o brilho aumenta */
.floor__tile--on:hover {
color: var(--k);
background: rgba(var(--krgb), 0.16);
box-shadow: inset 0 0 0 1px rgba(var(--krgb), 0.8), 0 0 32px -4px var(--k);
}
.floor__ico { width: calc(var(--tile) * 0.46); height: calc(var(--tile) * 0.46); overflow: visible; }
.floor__tile--on .floor__ico { width: calc(var(--tile) * 0.54); height: calc(var(--tile) * 0.54); }
/* celular: perspectiva mais suave, cards menores e a faixa mais perto do "Quem sou"
(antes eram ~120px entre o botão e os primeiros cards) */
@media (max-width: 767px) {
.about { padding-bottom: var(--rm-sp-4); }
.floor { height: clamp(14rem, 62vw, 21rem); margin-top: -1.5rem; }
.floor__grid {
width: 220vw;
margin-left: -110vw;
transform-origin: 50% 54%;
transform: perspective(620px) rotateX(52deg) rotate(-10deg) scale(1.05);
}
}
/* ==========================================================================
11 · O QUE FAÇO
--------------------------------------------------------------------------
┌ O QUE FAÇO ───────────────────┬────────────────────────┐
│ Sites, vídeos e identidade │ A maior parte dos meus │
│ visual. É o que mais aparece… │ clientes é da área… │
├─────────────┬─────────────┬───┴─────────┐ │
│ [site] 01 │ [vídeo] 02 │ [marca] 03 │ cards cinza │
├─────────────┴─────────────┴─────────────┤ │
│ E TAMBÉM · Social · Criativos · Apresentações │
├──────────────────────┬──────────────────┤
│ 🌐 Design pra… │ 💼 Pra agências │
└──────────────────────┴──────────────────┘
( Isso é o quê. Agora vem o como… ↓ )
Os cards reaproveitam .tile (cinza, hover, luz do mouse) do Quem sou.
========================================================================== */
.services {
padding-top: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
padding-bottom: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
}
/* ---- Card base (.tile): cinza chapado, hover sem clique ----------------
Off-white da marca a 10% sobre o preto. No hover sobe, clareia, a borda
acende e uma luz segue o mouse (site.js, seção 6, via data-tile). */
.tile {
--mx: 50%;
--my: 0%;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
margin: 0;
padding: clamp(var(--rm-sp-5), 2.2vw, var(--rm-sp-7));
border-radius: 18px;
border: var(--rm-bw-hair) solid transparent;
background: rgb(var(--rm-light-rgb) / 0.1);
overflow: hidden;
transition:
translate var(--rm-dur-slow) var(--rm-ease-out),
background-color var(--rm-dur-base) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
.tile::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--rm-light-rgb) / 0.07), transparent 60%);
opacity: 0;
transition: opacity var(--rm-dur-slow) var(--rm-ease-out);
pointer-events: none;
}
@media (hover: hover) {
.tile:hover {
translate: 0 -4px;
background-color: rgb(var(--rm-light-rgb) / 0.13);
border-color: rgb(var(--rm-light-rgb) / 0.18);
box-shadow: 0 28px 56px -28px rgb(var(--rm-void-rgb) / 0.9);
}
.tile:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
/* a cascata da revelação vale só pra entrada; o hover responde sem atraso */
.js .tile.reveal {
transition:
opacity var(--rm-dur-reveal) var(--rm-ease-out) calc(var(--i, 0) * 80ms),
transform var(--rm-dur-reveal) var(--rm-ease-out) calc(var(--i, 0) * 80ms),
translate var(--rm-dur-slow) var(--rm-ease-out),
background-color var(--rm-dur-base) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
}
/* ---- Cabeçalho -------------------------------------------------------- */
.services__head {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: end;
gap: var(--rm-sp-6) clamp(var(--rm-sp-8), 6vw, var(--rm-sp-10));
margin-bottom: clamp(var(--rm-sp-8), 5vw, var(--rm-sp-10));
}
.services__title {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
letter-spacing: 0;
color: var(--rm-text);
text-wrap: balance;
}
.services__title span { color: var(--rm-text-muted); }
.services__intro {
max-width: 48ch;
font-size: clamp(1rem, 1.25vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
.services__intro strong { font-weight: var(--rm-w-regular); color: var(--rm-text); }
/* ---- 3 serviços principais: animação ocupando o card todo -------------
Card preto com borda fina; a cena animada fica no fundo e o texto por
cima, embaixo, sobre um degradê. Anima sem parar enquanto a seção está
na tela (site.js, seção 8). */
.services__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--rm-sp-4);
}
.svc {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
border-radius: 18px;
background: var(--rm-void);
overflow: hidden;
transition:
translate var(--rm-dur-slow) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
/* atmosfera azul no alto do card */
.svc::before {
content: "";
position: absolute;
left: -20%; right: -20%; top: -30%;
height: 70%;
z-index: -1;
background: radial-gradient(closest-side, rgb(var(--rm-blue-rgb) / 0.28), transparent);
pointer-events: none;
}
/* borda em degradê, igual às linhas finas da faixa: acende no meio de baixo
e some nas pontas e subindo pelas laterais */
.svc::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
padding: 1px;
border-radius: inherit;
background: radial-gradient(75% 100% at 50% 100%, rgb(var(--rm-light-rgb) / 0.2), rgb(var(--rm-light-rgb) / 0.12) 45%, transparent 90%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
}
.svc__body {
position: relative;
padding: 0 clamp(var(--rm-sp-5), 2.2vw, var(--rm-sp-7)) clamp(var(--rm-sp-5), 2.2vw, var(--rm-sp-7));
}
.svc__num {
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
color: var(--rm-text-muted);
font-variant-numeric: tabular-nums;
}
.svc__name {
margin-top: var(--rm-sp-2);
font-size: clamp(1.375rem, 2vw, 1.625rem);
font-weight: var(--rm-w-regular);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
}
.svc__line {
margin-top: var(--rm-sp-3);
font-size: var(--rm-fs-body);
font-weight: var(--rm-w-regular);
line-height: 1.5;
color: var(--rm-text);
}
.svc__text {
margin-top: var(--rm-sp-3);
font-size: var(--rm-fs-body-s);
font-weight: var(--rm-w-light);
line-height: 1.65;
color: var(--rm-text-muted);
text-wrap: pretty;
}
@media (hover: hover) {
.svc:hover {
translate: 0 -6px;
box-shadow: 0 30px 60px -30px rgb(var(--rm-blue-rgb) / 0.55);
}
.svc:hover::after { background: radial-gradient(75% 100% at 50% 100%, var(--rm-blue), rgb(var(--rm-blue-rgb) / 0.5) 45%, transparent 90%); }
.svc:hover .scene { filter: brightness(1.22) saturate(1.1); }
}
@media (prefers-reduced-motion: no-preference) {
.js .svc.reveal {
transition:
opacity var(--rm-dur-reveal) var(--rm-ease-out) calc(var(--i, 0) * 80ms),
transform var(--rm-dur-reveal) var(--rm-ease-out) calc(var(--i, 0) * 80ms),
translate var(--rm-dur-slow) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
}
/* ---- Cenas (decorativas) ----------------------------------------------
A cena ocupa todo o alto do card, acima do texto, e some em degradê
no pé pra emendar com ele. Posições em % da própria cena. */
.scene {
position: relative;
flex: none;
height: clamp(16rem, 21vw, 19rem); /* altura fixa: os textos dos 3 cards começam na mesma linha */
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
mask-image: linear-gradient(180deg, #000 78%, transparent);
transition: filter var(--rm-dur-slow) var(--rm-ease-out);
}
.scene b, .scene i { display: block; }
/* pausa fora da tela e pra quem pede menos movimento */
.services__grid:not(.is-live) .scene *,
.services__grid:not(.is-live) .scene *::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.scene *, .scene *::before { animation: none !important; }
}
/* 01 · site sendo montado */
.s-browser {
position: absolute;
left: 7%; top: 11%;
width: 70%; height: 70%;
border-radius: 12px;
background: rgb(var(--rm-light-rgb) / 0.05);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.12);
overflow: hidden;
}
.s-bar { display: flex; align-items: center; gap: 5px; height: 1.5rem; padding: 0 0.625rem; border-bottom: 1px solid rgb(var(--rm-light-rgb) / 0.08); }
.s-bar i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: rgb(var(--rm-light-rgb) / 0.24); }
.s-url { flex: 1; height: 0.375rem; margin-left: 0.5rem; border-radius: var(--rm-r-full); background: rgb(var(--rm-light-rgb) / 0.08); }
.s-page { display: grid; gap: 0.5rem; padding: 0.875rem 0.875rem; }
.s-hero, .s-line { border-radius: var(--rm-r-full); transform-origin: left center; animation: svc-build 6s var(--rm-ease-inout) infinite; }
.s-hero { width: 72%; height: 0.875rem; background: rgb(var(--rm-light-rgb) / 0.3); }
.s-line { height: 0.4375rem; background: rgb(var(--rm-light-rgb) / 0.16); }
.s-line--1 { width: 92%; animation-delay: 0.25s; }
.s-line--2 { width: 62%; animation-delay: 0.5s; }
.s-btn {
display: block;
width: 32%; height: 0.75rem;
margin-top: 0.25rem;
border-radius: var(--rm-r-full);
background: linear-gradient(90deg, var(--rm-blue), var(--rm-blue-deep));
animation: svc-click 5s ease-out infinite;
}
.s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.s-cards i { height: 2.25rem; border-radius: 6px; background: rgb(var(--rm-light-rgb) / 0.07); box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.08); animation: svc-pop 6s var(--rm-ease-out) infinite; }
.s-cards i:nth-child(1) { animation-delay: 0.9s; }
.s-cards i:nth-child(2) { animation-delay: 1.1s; }
.s-cards i:nth-child(3) { animation-delay: 1.3s; }
.s-phone {
position: absolute;
right: 6%; top: 22%;
width: 25%; height: 66%;
padding: 0.625rem 0.5rem;
border-radius: 14px;
background: var(--rm-ink);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.18), 0 20px 40px -18px rgb(var(--rm-void-rgb));
overflow: hidden;
}
.s-phone__scroll { display: grid; gap: 0.4375rem; animation: svc-scroll 9s linear infinite; }
.p-img { height: 2.75rem; border-radius: 6px; background: linear-gradient(135deg, rgb(var(--rm-blue-deep-rgb) / 0.7), rgb(var(--rm-blue-rgb) / 0.35)); }
.p-img--sm { height: 2rem; }
.p-l { height: 0.3125rem; border-radius: var(--rm-r-full); background: rgb(var(--rm-light-rgb) / 0.18); }
.p-btn { width: 60%; height: 0.5rem; border-radius: var(--rm-r-full); background: var(--rm-blue); }
.s-cursor {
position: absolute;
z-index: 1;
width: 1.125rem; height: 1.125rem;
color: var(--rm-light);
filter: drop-shadow(0 4px 8px rgb(var(--rm-void-rgb) / 0.6));
animation: svc-cursor 5s var(--rm-ease-inout) infinite;
}
.s-cursor svg { width: 100%; height: 100%; }
@keyframes svc-build { 0%, 6% { transform: scaleX(0); } 28%, 82% { transform: scaleX(1); } 94%, 100% { transform: scaleX(0); } }
@keyframes svc-pop { 0%, 22% { opacity: 0; transform: translateY(8px); } 36%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes svc-click {
0%, 40% { box-shadow: 0 0 0 0 rgb(var(--rm-blue-rgb) / 0); }
44% { box-shadow: 0 0 0 0 rgb(var(--rm-blue-rgb) / 0.7); }
70%, 100% { box-shadow: 0 0 0 14px rgb(var(--rm-blue-rgb) / 0); }
}
@keyframes svc-cursor {
0% { left: 64%; top: 74%; transform: scale(1); }
38% { left: 24%; top: 50%; transform: scale(1); }
42% { left: 24%; top: 50%; transform: scale(0.82); }
48%, 72% { left: 24%; top: 50%; transform: scale(1); }
100% { left: 64%; top: 74%; transform: scale(1); }
}
@keyframes svc-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* 02 · tela de edição de vídeo */
.v-frame {
position: absolute;
left: 7%; right: 7%; top: 10%;
height: 44%;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, var(--rm-ink), rgb(var(--rm-blue-deep-rgb) / 0.4));
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.1);
}
.v-light {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 55%;
background: linear-gradient(90deg, transparent, rgb(var(--rm-light-rgb) / 0.14), transparent);
animation: svc-sweep 5.5s var(--rm-ease-inout) infinite;
}
.v-rec { position: absolute; top: 0.75rem; left: 0.875rem; }
.v-rec i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--rm-blue); box-shadow: 0 0 10px rgb(var(--rm-blue-rgb) / 0.9); animation: svc-blink 1.4s ease-in-out infinite; }
.v-play {
position: absolute;
left: 50%; top: 50%;
display: grid; place-items: center;
width: 2.625rem; height: 2.625rem;
transform: translate(-50%, -50%);
border-radius: 50%;
color: var(--rm-text);
background: rgb(var(--rm-light-rgb) / 0.08);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.26);
}
.v-play svg { width: 0.9375rem; height: 0.9375rem; margin-left: 2px; }
.v-wave {
position: absolute;
left: 7%; right: 7%; top: 59%;
height: 11%;
display: flex; align-items: center; gap: 3px;
}
.v-wave i {
flex: 1;
height: 100%;
border-radius: var(--rm-r-full);
background: rgb(var(--rm-light-rgb) / 0.24);
transform-origin: center;
animation: svc-eq var(--s) ease-in-out var(--d) infinite;
}
.v-track { position: absolute; left: 7%; right: 7%; top: 76%; height: 1.375rem; }
.v-clip { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.v-clip--1 { left: 0; width: 34%; background: rgb(var(--rm-blue-deep-rgb) / 0.6); }
.v-clip--2 { left: 36%; width: 26%; background: rgb(var(--rm-blue-rgb) / 0.45); }
.v-clip--3 { left: 64%; width: 36%; background: rgb(var(--rm-light-rgb) / 0.12); }
.v-head {
position: absolute;
top: -0.375rem; bottom: -0.375rem;
width: 2px;
margin-left: -1px;
border-radius: 2px;
background: var(--rm-light);
box-shadow: 0 0 10px rgb(var(--rm-light-rgb) / 0.6);
animation: svc-playhead 6s linear infinite;
}
.v-head::before { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--rm-light); }
@keyframes svc-sweep { from { transform: translateX(-70%); } to { transform: translateX(190%); } }
@keyframes svc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes svc-eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes svc-playhead { from { left: 0%; } to { left: 100%; } }
/* 03 · construção de marca */
.b-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgb(var(--rm-light-rgb) / 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgb(var(--rm-light-rgb) / 0.05) 1px, transparent 1px);
background-size: 1.75rem 1.75rem;
-webkit-mask-image: radial-gradient(closest-side, rgb(var(--rm-void-rgb)), transparent);
mask-image: radial-gradient(closest-side, rgb(var(--rm-void-rgb)), transparent);
}
.b-aa {
position: absolute;
left: 8%; top: 12%;
font-size: clamp(2.5rem, 4.2vw, 3.25rem);
font-weight: var(--rm-w-thin);
line-height: 1;
color: var(--rm-text);
animation: svc-weight 4s var(--rm-ease-inout) infinite;
}
.b-guide {
position: absolute;
left: 62%; top: 44%;
width: 34%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px dashed rgb(var(--rm-blue-rgb) / 0.6);
}
.b-guide { animation: svc-spin 18s linear infinite; }
.b-square {
position: absolute;
left: 62%; top: 44%;
width: 14%; aspect-ratio: 1;
margin: -7% 0 0 -7%;
border-radius: 6px;
background: linear-gradient(135deg, var(--rm-blue), var(--rm-blue-deep));
box-shadow: 0 0 30px -6px rgb(var(--rm-blue-rgb) / 0.8);
animation: svc-tilt 6s var(--rm-ease-inout) infinite;
}
.b-swatches { position: absolute; left: 8%; top: 70%; display: flex; gap: 0.5rem; }
.b-swatches i { width: 1.25rem; height: 1.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.22); animation: svc-swatch 3s var(--rm-ease-inout) infinite; }
.b-swatches i:nth-child(1) { background: var(--rm-void); }
.b-swatches i:nth-child(2) { background: var(--rm-ink); animation-delay: 0.15s; }
.b-swatches i:nth-child(3) { background: var(--rm-blue); animation-delay: 0.3s; }
.b-swatches i:nth-child(4) { background: var(--rm-light); animation-delay: 0.45s; }
@keyframes svc-weight { 0%, 100% { font-weight: 200; } 50% { font-weight: 600; } }
@keyframes svc-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes svc-tilt { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(135deg) scale(0.8); } }
@keyframes svc-swatch { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* ---- E também --------------------------------------------------------- */
.also { margin-top: clamp(var(--rm-sp-7), 4vw, var(--rm-sp-9)); } /* mesmo respiro da faixa abaixo */
.also__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.also__item { padding-inline: clamp(var(--rm-sp-5), 2.4vw, var(--rm-sp-7)); border-left: 1px solid rgb(var(--rm-light-rgb) / 0.1); }
.also__item:first-child { padding-left: 0; border-left: 0; }
.also__item:last-child { padding-right: 0; }
.also__icon { width: 1.5rem; height: 1.5rem; color: var(--rm-text-muted); }
.also__name {
margin-top: var(--rm-sp-4);
font-size: var(--rm-fs-body-l);
font-weight: var(--rm-w-regular);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
}
.also__text {
margin-top: var(--rm-sp-2);
font-size: var(--rm-fs-body-s);
font-weight: var(--rm-w-light);
line-height: 1.65;
color: var(--rm-text-muted);
text-wrap: pretty;
}
/* ---- Destaque e agências: faixa editorial ---------------------------- */
.reach {
position: relative;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: center;
gap: var(--rm-sp-6) 0;
margin-top: clamp(var(--rm-sp-7), 4vw, var(--rm-sp-9));
padding-block: clamp(var(--rm-sp-6), 3.4vw, var(--rm-sp-8));
}
/* linhas finas em cima e embaixo, somem nas pontas */
.reach::before,
.reach::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgb(var(--rm-light-rgb) / 0.16) 20%, rgb(var(--rm-light-rgb) / 0.16) 80%, transparent);
}
.reach::before { top: 0; }
.reach::after { bottom: 0; }
.reach__statement {
padding-right: clamp(var(--rm-sp-6), 4vw, var(--rm-sp-9));
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
text-wrap: balance;
}
.reach__muted { color: var(--rm-text-muted); }
/* marcador de localização pulsando */
.reach__pulse {
position: relative;
display: inline-block;
width: 0.625rem; height: 0.625rem;
margin-right: 0.75rem;
vertical-align: 0.2em;
border-radius: 50%;
background: var(--rm-blue);
box-shadow: 0 0 12px rgb(var(--rm-blue-rgb) / 0.9);
}
.reach__pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 0 rgb(var(--rm-blue-rgb) / 0.6);
animation: reach-ping 2.2s var(--rm-ease-out) infinite;
}
@keyframes reach-ping {
0% { box-shadow: 0 0 0 0 rgb(var(--rm-blue-rgb) / 0.6); }
80%, 100% { box-shadow: 0 0 0 14px rgb(var(--rm-blue-rgb) / 0); }
}
@media (prefers-reduced-motion: reduce) { .reach__pulse::after { animation: none; } }
.reach__agency {
padding-left: clamp(var(--rm-sp-6), 4vw, var(--rm-sp-9));
border-left: 1px solid rgb(var(--rm-light-rgb) / 0.12);
}
.reach__label { margin-bottom: var(--rm-sp-3); }
.reach__agency p {
font-size: var(--rm-fs-body);
font-weight: var(--rm-w-light);
line-height: 1.65;
color: var(--rm-text-muted);
text-wrap: pretty;
}
/* botão pro WhatsApp das agências: mesmo azul suave da transição */
.bridge.reach__cta { margin-top: var(--rm-sp-5); }
.bridge.nav__cta { margin-top: 0; white-space: nowrap; }
:is(.reach__cta, .nav__cta) svg { animation: none !important; }
:is(.reach__cta, .nav__cta):hover svg { translate: 2px -2px; }
/* ---- TABLET: um serviço por linha, cena centralizada ------------------ */
@media (max-width: 1079px) {
.services__head { grid-template-columns: 1fr; }
.services__grid { grid-template-columns: 1fr; }
.scene { align-self: center; width: min(100%, 34rem); }
.svc__body { max-width: 40rem; }
}
/* ---- CELULAR: uma coluna ---------------------------------------------- */
@media (max-width: 767px) {
.services__head { margin-bottom: var(--rm-sp-7); }
.services__grid { gap: var(--rm-sp-3); }
.also__grid { grid-template-columns: 1fr; }
.also__item,
.also__item:first-child,
.also__item:last-child { padding: var(--rm-sp-5) 0 0; border-left: 0; }
.also__item:first-child { padding-top: 0; }
.also__item + .also__item { margin-top: var(--rm-sp-5); border-top: 1px solid rgb(var(--rm-light-rgb) / 0.1); }
.reach { grid-template-columns: 1fr; }
.reach__statement { padding-right: 0; text-align: center; }
.reach__agency { padding-left: 0; padding-top: var(--rm-sp-6); border-left: 0; border-top: 1px solid rgb(var(--rm-light-rgb) / 0.12); text-align: center; }
.reach__agency p { margin-inline: auto; }
}
/* ==========================================================================
12 · PRAZO E PREÇO
--------------------------------------------------------------------------
┌ PRAZO E PREÇO ──────────────────────────────────────┐
│ O prazo é curto. E o valor vem fechado… │
├──── Prazo (card alto) ───────┬──── Preço ───────┤
│ a partir de 3 dias úteis. │ │
│ [1][2][3][4][5] ├──── Pagamento ───┤
└──────────────────────────────┴──────────────────┘ pele dos cards do O que faço
┌ Outras dúvidas ─────┬ 01 E se eu pagar e você sumir? (×) ┐
│ [selo Garantia] │ resposta… (sem fundo/borda) │
│ Eu não vou sumir. … │ 02 E se eu não gostar? (+) │
└─────────────────────┴────────────────────────────────────┘
Os cards reaproveitam a pele do .svc (preto, brilho azul, borda em degradê, hover).
========================================================================== */
.pricing {
padding-top: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
padding-bottom: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
}
.pricing__head { max-width: 44rem; margin-bottom: clamp(var(--rm-sp-8), 5vw, var(--rm-sp-10)); }
.pricing__title {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
letter-spacing: 0;
color: var(--rm-text);
text-wrap: balance;
}
.pricing__title span { color: var(--rm-text-muted); }
/* ---- Bento: mesma pele dos cards do "O que faço" (.svc) ---------------- */
.pricing__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--rm-sp-4);
}
.pricing__card { padding: clamp(var(--rm-sp-5), 2.2vw, var(--rm-sp-7)); }
.pricing__card--time { grid-row: span 2; }
/* no card alto, a sobra de altura divide em cima e embaixo do número */
.pricing__card--time .pricing__text { margin-top: auto; padding-top: var(--rm-sp-6); }
.pricing__label {
display: flex;
align-items: center;
gap: var(--rm-sp-3);
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
text-transform: uppercase;
color: var(--rm-text-muted);
}
.pricing__label svg { flex: none; width: 1.125rem; height: 1.125rem; }
.pricing__big {
margin-top: auto;
padding-top: var(--rm-sp-6);
font-size: clamp(2.75rem, 5.6vw, 4.75rem);
font-weight: var(--rm-w-light);
line-height: 1;
color: var(--rm-text);
}
.pricing__big small {
display: block;
margin-bottom: var(--rm-sp-3);
font-size: clamp(1rem, 1.25vw, 1.0625rem);
font-weight: var(--rm-w-regular);
line-height: 1.4;
color: var(--rm-text-muted);
}
.pricing__lead {
margin-top: var(--rm-sp-6);
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
text-wrap: pretty;
}
.pricing__lead span { color: var(--rm-text-muted); }
.pricing__text {
margin-top: var(--rm-sp-5);
max-width: 52ch;
font-size: clamp(0.9375rem, 1.1vw, 1rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
/* pele "planta": células pretas separadas por linhas finas (o fundo da grade
aparece no vão de 1px), pontilhado no Prazo, cruz no encontro das linhas e
luz azul seguindo o mouse (site.js, seção 6, via data-tile) */
.pricing__grid[data-skin="blueprint"] {
position: relative;
gap: 1px;
padding: 1px;
border-radius: 20px;
background: rgb(var(--rm-light-rgb) / 0.12);
overflow: hidden;
}
[data-skin="blueprint"] .pricing__card {
--mx: 50%;
--my: 0%;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
background: var(--rm-void);
overflow: hidden;
}
[data-skin="blueprint"] .pricing__card--time { grid-column: 1; grid-row: 1 / span 2; }
[data-skin="blueprint"] .pricing__card--price { grid-column: 2; grid-row: 1; }
[data-skin="blueprint"] .pricing__card--pay { grid-column: 2; grid-row: 2; }
[data-skin="blueprint"] .pricing__card--time::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(rgb(var(--rm-light-rgb) / 0.26) 1.1px, transparent 1.6px);
background-size: 1.25rem 1.25rem;
-webkit-mask-image: radial-gradient(100% 95% at 100% 0%, #000 10%, transparent 80%);
mask-image: radial-gradient(100% 95% at 100% 0%, #000 10%, transparent 80%);
pointer-events: none;
}
[data-skin="blueprint"] .pricing__card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(360px circle at var(--mx) var(--my), rgb(var(--rm-blue-rgb) / 0.16), transparent 70%);
opacity: 0;
transition: opacity var(--rm-dur-slow) var(--rm-ease-out);
pointer-events: none;
}
@media (hover: hover) {
[data-skin="blueprint"] .pricing__card:hover::after { opacity: 1; }
}
.bp-mark {
grid-column: 2;
grid-row: 2;
align-self: start;
justify-self: start;
z-index: 1;
width: 0.875rem; height: 0.875rem;
translate: calc(-50% - 0.5px) calc(-50% - 0.5px);
background:
linear-gradient(rgb(var(--rm-light-rgb) / 0.6), rgb(var(--rm-light-rgb) / 0.6)) center / 100% 1px no-repeat,
linear-gradient(rgb(var(--rm-light-rgb) / 0.6), rgb(var(--rm-light-rgb) / 0.6)) center / 1px 100% no-repeat;
pointer-events: none;
}
/* dias úteis: os 3 primeiros acendem em sequência, no azul suave */
.days { display: flex; gap: 0.5rem; margin-top: var(--rm-sp-6); }
.days i {
flex: 1;
max-width: 3.5rem;
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 10px;
font-style: normal;
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
color: var(--rm-text-muted);
background: rgb(var(--rm-light-rgb) / 0.06);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.1);
}
.days i:nth-child(-n+3) { animation: day-on 4.8s var(--rm-ease-out) infinite; }
.days i:nth-child(2) { animation-delay: 0.35s; }
.days i:nth-child(3) { animation-delay: 0.7s; }
@keyframes day-on {
0%, 6%, 90%, 100% {
color: var(--rm-text-muted);
background: rgb(var(--rm-light-rgb) / 0.06);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.1);
}
16%, 78% {
color: var(--rm-text);
background: rgb(var(--rm-blue-rgb) / 0.28);
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.8), 0 0 18px -6px rgb(var(--rm-blue-rgb) / 0.8);
}
}
@media (prefers-reduced-motion: reduce) {
.days i:nth-child(-n+3) {
animation: none;
color: var(--rm-text);
background: rgb(var(--rm-blue-rgb) / 0.28);
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.8);
}
}
/* formas de pagamento */
.pay { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--rm-sp-6) 0 0; padding: 0; list-style: none; }
.pay li {
padding: 0.4375rem 0.875rem;
border-radius: var(--rm-r-full);
font-size: var(--rm-fs-body-s);
line-height: 1.3;
color: var(--rm-text);
/* azul mais leve que o botão (lá: fundo 28% e borda 80%) */
background: rgb(var(--rm-blue-rgb) / 0.14);
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.4);
}
/* ---- Outras dúvidas --------------------------------------------------- */
.faq {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
align-items: start;
gap: var(--rm-sp-7) clamp(var(--rm-sp-8), 6vw, var(--rm-sp-10));
margin-top: clamp(var(--rm-sp-9), 7vw, var(--rm-sp-11));
}
.faq__aside { position: sticky; top: 6rem; }
.faq__title {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
color: var(--rm-text);
}
/* selo: as bordas escuras da imagem somem no preto da página */
.faq__seal {
width: min(100%, 24rem);
margin: var(--rm-sp-4) 0 var(--rm-sp-5) -1.5rem; /* compensa a sobra escura da imagem à esquerda */
-webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}
.faq__seal img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
.faq__seal img { animation: seal-float 6s var(--rm-ease-inout) infinite; }
}
@keyframes seal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* sanfona clean: sem fundo e sem borda, só linhas finas entre as perguntas */
.faq__list { display: grid; border-top: 1px solid rgb(var(--rm-light-rgb) / 0.1); }
.faq__item { border-bottom: 1px solid rgb(var(--rm-light-rgb) / 0.1); }
.faq__item summary {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr) auto;
align-items: center;
gap: var(--rm-sp-3);
padding: 1.125rem 0;
list-style: none;
cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: 2px; }
.faq__num {
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
font-variant-numeric: tabular-nums;
color: var(--rm-text-muted);
transition: color var(--rm-dur-base) var(--rm-ease-out);
}
.faq__q {
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
font-weight: var(--rm-w-light);
line-height: 1.35;
color: rgb(var(--rm-light-rgb) / 0.78);
transition:
color var(--rm-dur-base) var(--rm-ease-out),
translate var(--rm-dur-slow) var(--rm-ease-out);
}
.faq__item[open] .faq__num,
.faq__item[open] .faq__q { color: var(--rm-text); }
.faq__icon {
position: relative;
width: 2.25rem; height: 2.25rem;
border-radius: 50%;
border: var(--rm-bw-hair) solid rgb(var(--rm-light-rgb) / 0.18);
color: var(--rm-text);
transition:
rotate var(--rm-dur-slow) var(--rm-ease-out),
background-color var(--rm-dur-base) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out);
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 0.75rem; height: 1.5px;
margin: -0.75px 0 0 -0.375rem;
border-radius: 2px;
background: currentColor;
}
.faq__icon::after { rotate: 90deg; }
.faq__item[open] .faq__icon {
rotate: 45deg;
background: rgb(var(--rm-blue-rgb) / 0.28);
border-color: rgb(var(--rm-blue-rgb) / 0.8);
}
@media (hover: hover) {
.faq__item:not([open]):hover .faq__q { color: var(--rm-text); translate: 4px 0; }
.faq__item:not([open]):hover .faq__icon { border-color: rgb(var(--rm-light-rgb) / 0.4); }
}
.faq__answer { padding: 0.25rem 3.25rem 1.5rem calc(2rem + var(--rm-sp-3)); }
.faq__answer p {
max-width: 58ch;
font-size: clamp(1rem, 1.2vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
/* abre e fecha deslizando onde o navegador suporta; nos outros, abre direto */
@supports (interpolate-size: allow-keywords) {
.faq__list { interpolate-size: allow-keywords; }
.faq__item::details-content {
block-size: 0;
overflow: hidden;
transition:
block-size var(--rm-dur-slow) var(--rm-ease-out),
content-visibility var(--rm-dur-slow) allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
.faq__item::details-content { transition: none; }
}
/* ---- TABLET ----------------------------------------------------------- */
@media (max-width: 1079px) {
.faq { grid-template-columns: 1fr; }
.faq__aside { position: static; }
}
/* ---- CELULAR ---------------------------------------------------------- */
@media (max-width: 767px) {
.pricing__grid { grid-template-columns: 1fr; gap: var(--rm-sp-3); }
.pricing__card--time { grid-row: auto; }
.pricing__grid[data-skin="blueprint"] { gap: 1px; }
[data-skin="blueprint"] .pricing__card { grid-column: auto; grid-row: auto; }
.bp-mark { display: none; }
.pricing__big { padding-top: var(--rm-sp-7); }
.pricing__card--time .pricing__text { padding-top: 0; margin-top: var(--rm-sp-5); }
.faq__item summary { grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--rm-sp-3); padding: 1rem 0; }
/* celular: título escondido (continua pra leitor de tela), selo maior e no centro */
.faq__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.faq__seal { width: min(100%, 24rem); margin: 0 auto var(--rm-sp-5); }
.faq__icon { width: 2rem; height: 2rem; }
.faq__answer { padding: 0 0 1.5rem calc(1.75rem + var(--rm-sp-3)); }
}
/* ==========================================================================
13 · COMO FUNCIONA
--------------------------------------------------------------------------
┌ COMO FUNCIONA ─────────────┬ (ícone)─ Passo 1 · Primeira conversa ┐
│ Do primeiro oi ao │ │ card acende quando chega │
│ projeto no ar. │ (ícone)─ Passo 2 · … no meio da tela│
│ Quase tudo… WhatsApp… │ ┆ linha enche de azul │
│ [📄 Nada começa no confia] │ (ícone)─ Passo 3 … │
│ (fica parado ao rolar) ├──────────────────┬───────────────────┤
│ │ Depois da entrega│ E no vídeo? │
└────────────────────────────┴──────────────────┴───────────────────┘
Inspiração: seção "Process" do sevora.framer.website.
========================================================================== */
.process {
padding-top: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
padding-bottom: clamp(var(--rm-sp-6), 4vw, var(--rm-sp-8));
}
.process__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: var(--rm-sp-8) clamp(var(--rm-sp-8), 6vw, var(--rm-sp-10));
}
.process__head { position: sticky; top: 7rem; }
.process__title {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
letter-spacing: 0;
color: var(--rm-text);
text-wrap: balance;
}
.process__intro {
margin-top: var(--rm-sp-5);
max-width: 36ch;
font-size: clamp(1rem, 1.25vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
.process__intro strong { font-weight: var(--rm-w-regular); color: var(--rm-text); }
.process__promise { max-width: 26rem; }
/* ---- Linha do tempo ---------------------------------------------------- */
.steps {
--icon: 3rem;
--pad: 1.5rem; /* laterais do card aceso */
--pad-y: clamp(2.25rem, 3vw, 2.75rem); /* em cima e embaixo, com mais respiro */
position: relative;
}
.steps__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
/* trilho e parte cheia; início e tamanho vêm do site.js (seção 9) */
.steps__line {
position: absolute;
z-index: 0;
left: calc(var(--pad) + var(--icon) / 2 - 1px);
top: var(--line-start, 3rem);
width: 2px;
height: var(--line-len, 0px);
border-radius: 2px;
background: rgb(var(--rm-light-rgb) / 0.1);
overflow: hidden;
}
.steps__line i {
display: block;
height: 100%;
background: linear-gradient(180deg, var(--rm-blue), rgb(var(--rm-blue-rgb) / 0.7));
box-shadow: 0 0 12px rgb(var(--rm-blue-rgb) / 0.8);
transform-origin: top center;
transform: scaleY(var(--progress, 1));
}
.step {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--icon) minmax(0, 1fr);
gap: var(--rm-sp-5);
padding: var(--pad-y) var(--pad);
border-radius: 18px;
background-color: rgb(var(--rm-blue-rgb) / 0.16); /* passo aceso: fundo azul */
transition: background-color var(--rm-dur-slow) var(--rm-ease-out);
}
.step__icon {
display: grid;
place-items: center;
width: var(--icon); height: var(--icon);
border-radius: 50%;
color: var(--rm-text);
/* fundo sólido pra esconder o trilho por trás */
background: linear-gradient(rgb(var(--rm-blue-rgb) / 0.28), rgb(var(--rm-blue-rgb) / 0.28)), var(--rm-void);
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.8), 0 0 24px -6px rgb(var(--rm-blue-rgb) / 0.9);
transition:
color var(--rm-dur-slow) var(--rm-ease-out),
background-color var(--rm-dur-slow) var(--rm-ease-out),
box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
.step__icon svg { width: 1.25rem; height: 1.25rem; }
/* título alinhado ao centro do ícone */
.step__body { padding-top: calc((var(--icon) - 2rem) / 2); }
.step__name {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-weight: var(--rm-w-regular);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
transition: color var(--rm-dur-slow) var(--rm-ease-out);
}
.step__text {
margin-top: var(--rm-sp-3);
max-width: 52ch;
font-size: clamp(0.9375rem, 1.1vw, 1rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
transition: color var(--rm-dur-slow) var(--rm-ease-out);
}
/* com JS: passo ainda não alcançado fica apagado, sem card */
.js .step:not(.is-active) { background-color: rgb(var(--rm-blue-rgb) / 0); }
.js .step:not(.is-active) .step__icon {
color: var(--rm-text-muted);
background: linear-gradient(rgb(var(--rm-light-rgb) / 0.06), rgb(var(--rm-light-rgb) / 0.06)), var(--rm-void);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.14);
}
.js .step:not(.is-active) .step__name { color: rgb(var(--rm-light-rgb) / 0.55); }
.js .step:not(.is-active) .step__text { color: rgb(var(--rm-light-rgb) / 0.4); }
/* ---- Depois da entrega · E no vídeo? ----------------------------------- */
.process__extra {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rm-sp-6);
margin-top: clamp(var(--rm-sp-7), 4vw, var(--rm-sp-9));
}
/* parado: texto com linha fina em cima; hover: preenche de azul igual ao passo aceso */
.extra {
position: relative;
padding: clamp(2.25rem, 3vw, 2.75rem) 1.5rem; /* mesmo respiro dos passos */
border-radius: 18px;
background-color: rgb(var(--rm-blue-rgb) / 0);
transition: background-color var(--rm-dur-slow) var(--rm-ease-out);
}
.extra::before {
content: "";
position: absolute;
top: 0; left: 1.5rem; right: 1.5rem;
height: 1px;
background: rgb(var(--rm-light-rgb) / 0.12);
transition: opacity var(--rm-dur-base) var(--rm-ease-out);
}
@media (hover: hover) {
.extra:hover { background-color: rgb(var(--rm-blue-rgb) / 0.16); }
.extra:hover::before { opacity: 0; }
.extra:hover .extra__icon { color: var(--rm-text); }
}
.extra__name {
display: flex;
align-items: center;
gap: var(--rm-sp-3);
font-size: clamp(1.125rem, 1.5vw, 1.25rem);
font-weight: var(--rm-w-regular);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
}
.extra__icon { display: grid; color: var(--rm-text-muted); transition: color var(--rm-dur-base) var(--rm-ease-out); }
.extra__icon svg { width: 1.25rem; height: 1.25rem; }
.extra__text {
margin-top: var(--rm-sp-3);
font-size: 0.875rem; /* menor que o texto dos passos, pra ficar discreto */
font-weight: var(--rm-w-light);
line-height: 1.65;
color: var(--rm-text-muted);
text-wrap: pretty;
}
/* ---- TABLET ----------------------------------------------------------- */
@media (max-width: 1079px) {
.process__grid { grid-template-columns: 1fr; }
.process__head { position: static; }
}
/* ---- CELULAR ---------------------------------------------------------- */
@media (max-width: 767px) {
.steps { --icon: 2.5rem; --pad: 1rem; --pad-y: 1.75rem; }
.steps__list { gap: 0.5rem; }
.step { gap: var(--rm-sp-4); }
.step__icon svg { width: 1.125rem; height: 1.125rem; }
.process__extra { grid-template-columns: 1fr; gap: 0; }
.extra { padding: 1.75rem 1rem; }
.extra::before { left: 1rem; right: 1rem; }
}
/* ==========================================================================
14 · DIVISÃO · MAPA (sem título, igual à faixa de ferramentas)
--------------------------------------------------------------------------
· · · ·· ··· [mapa de pontos, bordas somem] ··· ·· · ·
Países atendidos acesos em azul e parados; em cima, a bandeira em círculo
fazendo zoom in/out suave, uma depois da outra; linhas finas saindo do
Brasil. Sem hover e sem nomes. Mais baixo que uma tela: é só uma divisão.
No celular o mapa fica ampliado nas Américas e Europa.
========================================================================== */
.world {
position: relative;
overflow: hidden;
padding-block: clamp(var(--rm-sp-4), 2vw, var(--rm-sp-6));
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-composite: intersect;
}
.world__map { position: relative; width: min(100%, 62rem); margin-inline: auto; aspect-ratio: 2200 / 1080; }
.world__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.world__c {
fill: none;
stroke: rgb(var(--rm-light-rgb) / 0.16);
stroke-width: 6;
stroke-linecap: round;
}
.world__c.is-served { stroke: var(--rm-blue); filter: drop-shadow(0 0 3px rgb(var(--rm-blue-rgb) / 0.9)); }
/* linhas curvas do Brasil até os outros países */
.world__arcs path {
fill: none;
stroke: rgb(var(--rm-light-rgb) / 0.35);
stroke-width: 1;
stroke-dasharray: 3 4;
vector-effect: non-scaling-stroke;
}
/* bandeira: círculo com aro claro, zoom in/out suave */
.world__flag {
--size: clamp(2.25rem, 3.4vw, 3rem);
position: absolute;
z-index: 1;
width: var(--size); height: var(--size);
margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 0 2px var(--rm-light), 0 8px 24px -6px rgb(var(--rm-void-rgb) / 0.9), 0 0 28px -4px rgb(var(--rm-blue-rgb) / 0.8);
animation: flag-zoom 2.6s var(--rm-ease-inout) infinite;
animation-delay: var(--d, 0s);
animation-play-state: paused;
}
.world__flag svg { display: block; width: 100%; height: 100%; }
.world.is-live .world__flag { animation-play-state: running; }
@keyframes flag-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .world__flag { animation: none; } }
/* ---- CELULAR: ampliado nas Américas e Europa --------------------------- */
@media (max-width: 767px) {
.world__map { width: 180%; margin-left: -14.4%; }
.world__c { stroke-width: 8; }
.world__flag { --size: 1.75rem; box-shadow: 0 0 0 1.5px var(--rm-light), 0 6px 16px -4px rgb(var(--rm-void-rgb) / 0.9), 0 0 20px -4px rgb(var(--rm-blue-rgb) / 0.8); }
}
/* ==========================================================================
15 · TRABALHOS
--------------------------------------------------------------------------
TRABALHOS
Alguns trabalhos, e o que veio depois deles.
(Sites e landing pages) (Vídeo e fotografia) (Identidade) (Social media)
[card] [card] [card] ← troca a cada clique, entrada em cascata
========================================================================== */
.work {
padding-top: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
padding-bottom: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
}
.work__head { max-width: 44rem; margin-bottom: clamp(var(--rm-sp-8), 5vw, var(--rm-sp-10)); }
.work__title {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
color: var(--rm-text);
text-wrap: balance;
}
.work__title strong { font-weight: var(--rm-w-semibold); }
.work__lead {
margin-top: var(--rm-sp-5);
max-width: 44rem;
font-size: clamp(1rem, 1.25vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
/* ---- Grade com filtro --------------------------------------------------- */
.work__grid-area { margin-top: 0; }
.wcard__meta {
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
text-transform: uppercase;
color: var(--rm-text-muted);
}
.work__filters { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: var(--rm-sp-6); }
.work__pill {
padding: 0.75rem 1.375rem;
border-radius: var(--rm-r-full);
border: var(--rm-bw-hair) solid rgb(var(--rm-light-rgb) / 0.16);
background: transparent;
font: inherit;
font-size: var(--rm-fs-body-s);
font-weight: var(--rm-w-regular);
color: var(--rm-text);
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--rm-dur-base) var(--rm-ease-out),
border-color var(--rm-dur-base) var(--rm-ease-out);
}
.work__pill:hover { border-color: rgb(var(--rm-light-rgb) / 0.4); }
.work__pill:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: 2px; }
.work__pill.is-on { background: var(--rm-blue); border-color: var(--rm-blue); }
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rm-sp-4); }
.wcard {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
border: 0;
font: inherit;
text-align: left;
color: inherit;
text-decoration: none;
cursor: pointer;
border-radius: 18px;
overflow: hidden;
background: rgb(var(--rm-light-rgb) / 0.05);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.08);
animation: wcard-in 0.55s var(--rm-ease-out) both;
animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes wcard-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wcard { animation: none; } }
.wcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rm-ink); }
.wcard img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--rm-dur-slow) var(--rm-ease-out); }
@media (hover: hover) { .wcard:hover img { transform: scale(1.04); } }
.wcard__body { padding: var(--rm-sp-5) var(--rm-sp-5) var(--rm-sp-6); }
.wcard__name {
display: block;
margin-top: var(--rm-sp-2);
font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
font-weight: var(--rm-w-regular);
line-height: var(--rm-lh-heading);
color: var(--rm-text);
}
.wcard__link {
display: inline-flex;
align-items: center;
gap: var(--rm-sp-2);
margin-top: var(--rm-sp-4);
font-size: var(--rm-fs-body-s);
color: var(--rm-text-muted);
text-decoration: none;
transition: color var(--rm-dur-base) var(--rm-ease-out);
}
.wcard__link svg { width: 0.875rem; height: 0.875rem; transition: translate var(--rm-dur-base) var(--rm-ease-out); }
.wcard:hover .wcard__link { color: var(--rm-text); }
.wcard:hover .wcard__link svg { translate: 2px -2px; }
.wcard:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: 3px; }
/* social: só a peça, em pé; a lupa aparece no hover */
.wcard--post { aspect-ratio: 4 / 5; }
.wcard__zoom {
position: absolute;
right: var(--rm-sp-4); bottom: var(--rm-sp-4);
display: grid;
place-items: center;
width: 2.75rem; height: 2.75rem;
border-radius: 50%;
color: var(--rm-text);
background: rgb(var(--rm-void-rgb) / 0.7);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.2);
opacity: 0;
transform: translateY(6px);
transition: opacity var(--rm-dur-base) var(--rm-ease-out), transform var(--rm-dur-base) var(--rm-ease-out);
}
.wcard__zoom svg { width: 1.125rem; height: 1.125rem; }
.wcard--post:hover .wcard__zoom,
.wcard--post:focus-visible .wcard__zoom { opacity: 1; transform: none; }
/* vídeo: capa do YouTube em pé (9:16), só com o play */
.wcard--video { aspect-ratio: 9 / 16; }
.wcard--video img { object-position: center; }
.wcard--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--rm-void-rgb) / 0.55), transparent 45%); pointer-events: none; }
.wcard__play {
position: absolute;
z-index: 1;
left: 50%; top: 50%;
display: grid;
place-items: center;
width: 3.5rem; height: 3.5rem;
transform: translate(-50%, -50%);
border-radius: 50%;
color: var(--rm-text);
background: rgb(var(--rm-blue-rgb) / 0.28);
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.8), 0 0 24px -6px rgb(var(--rm-blue-rgb) / 0.9);
backdrop-filter: blur(6px);
transition: background-color var(--rm-dur-base) var(--rm-ease-out);
}
.wcard--video:hover .wcard__play { background: rgb(var(--rm-blue-rgb) / 0.5); }
.wcard__play svg { width: 1.125rem; height: 1.125rem; margin-left: 2px; }
.work__grid[data-view="video"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ---- Caixa por cima da página: vídeo e post ------------------------------
Atenção: o palco NÃO pode ter overflow hidden + border-radius + transform
juntos: o Chrome para de desenhar o iframe do YouTube. O arredondamento
fica no próprio iframe. */
.vbox {
position: fixed;
inset: 0;
z-index: var(--rm-z-modal);
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgb(var(--rm-void-rgb) / 0.92);
opacity: 0;
visibility: hidden;
transition: opacity var(--rm-dur-base) var(--rm-ease-out), visibility 0s linear var(--rm-dur-base);
}
.vbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.vbox__stage {
position: relative;
width: min(100%, 1100px);
aspect-ratio: 16 / 9;
background: var(--rm-void);
border-radius: var(--rm-r-lg);
box-shadow: var(--rm-shadow-lg);
transform: scale(0.97);
transition: transform var(--rm-dur-base) var(--rm-ease-out);
}
.vbox.is-open .vbox__stage { transform: scale(1); }
/* vídeo em pé: quem manda é a altura da tela */
.vbox__stage--vertical { width: auto; height: min(86vh, 900px); max-width: 100%; aspect-ratio: 9 / 16; }
.vbox__stage--image { width: auto; height: auto; aspect-ratio: auto; background: transparent; box-shadow: none; }
.vbox__stage--image img {
display: block;
max-width: min(100%, 720px);
max-height: 86vh;
width: auto; height: auto;
border-radius: var(--rm-r-lg);
box-shadow: var(--rm-shadow-lg);
}
.vbox__stage iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; border-radius: var(--rm-r-lg); }
/* rede de segurança atrás do iframe, se o player não carregar */
.vbox__fallback {
position: absolute;
inset: 0;
display: grid;
place-content: center;
gap: var(--rm-sp-3);
padding: var(--rm-sp-5);
text-align: center;
font-size: var(--rm-fs-body-s);
color: var(--rm-text-muted);
}
.vbox__fallback a { color: var(--rm-text); text-decoration: underline; }
.vbox__close {
position: absolute;
top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
display: grid;
place-items: center;
width: 3rem; height: 3rem;
border-radius: 50%;
border: var(--rm-bw-hair) solid rgb(var(--rm-blue-rgb) / 0.8);
background: rgb(var(--rm-blue-rgb) / 0.28);
color: var(--rm-text);
cursor: pointer;
transition: background-color var(--rm-dur-base) var(--rm-ease-out);
}
.vbox__close:hover { background: rgb(var(--rm-blue-rgb) / 0.5); }
.vbox__close svg { width: 1.25rem; height: 1.25rem; }
/* ---- TABLET ----------------------------------------------------------- */
@media (max-width: 1079px) {
.work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work__grid[data-view="video"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- CELULAR ---------------------------------------------------------- */
@media (max-width: 767px) {
/* pílulas em 2 × 2, as quatro visíveis */
.work__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.work__pill { padding: 0.75rem 0.5rem; font-size: 0.8125rem; white-space: normal; text-align: center; }
.work__grid { grid-template-columns: 1fr; gap: var(--rm-sp-3); }
.work__grid[data-view="video"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work__grid[data-view="social"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rm-sp-2); }
.work__grid[data-view="social"] .wcard { border-radius: 10px; }
.work__grid[data-view="social"] .wcard__zoom { display: none; }
.wcard__zoom { opacity: 1; transform: none; width: 2.25rem; height: 2.25rem; right: var(--rm-sp-3); bottom: var(--rm-sp-3); }
.wcard__play { width: 3rem; height: 3rem; }
}
/* ==========================================================================
16 · PÁGINAS DE PROJETO
--------------------------------------------------------------------------
real.html · site em tamanho real: só o print da página inteira e uma
barra fixa embaixo com "Voltar para os projetos".
projeto.html · identidade visual: menu e rodapé do site novo; no miolo,
igual ao site atual: título, Serviço · Cliente · Ano, capa,
texto do projeto e as peças uma embaixo da outra.
========================================================================== */
.real { background: var(--rm-void); }
.real__stage { display: block; padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.real__stage img { display: block; width: 100%; max-width: 1400px; height: auto; margin-inline: auto; }
.real__empty { padding: 30vh 1.5rem; text-align: center; color: var(--rm-text-muted); }
.realbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--rm-z-modal);
padding-bottom: env(safe-area-inset-bottom);
background: rgb(var(--rm-void-rgb) / 0.94);
border-top: 1px solid rgb(var(--rm-light-rgb) / 0.1);
backdrop-filter: blur(12px);
}
.realbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rm-sp-4);
min-height: 4.5rem;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.realbar .bridge { margin-top: 0; }
.realbar__back svg { animation: none !important; }
.realbar__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--rm-fs-body-s);
color: var(--rm-text-muted);
}
@media (max-width: 519px) { .realbar__title { display: none; } }
.page { --cover: 1; } /* sem abertura: menu já na largura das seções */
.proj { padding-top: clamp(7.5rem, 12vw, 10rem); padding-bottom: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11)); }
.proj__back {
display: flex;
width: fit-content;
align-items: center;
gap: var(--rm-sp-2);
margin-bottom: var(--rm-sp-7);
font-size: var(--rm-fs-body-s);
color: var(--rm-text-muted);
text-decoration: none;
transition: color var(--rm-dur-base) var(--rm-ease-out);
}
.proj__back svg { width: 1rem; height: 1rem; transition: translate var(--rm-dur-base) var(--rm-ease-out); }
.proj__back:hover { color: var(--rm-text); }
.proj__back:hover svg { translate: -3px 0; }
.proj__title {
margin-top: var(--rm-sp-3);
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: var(--rm-w-light);
line-height: 1.05;
color: var(--rm-text);
text-wrap: balance;
}
.proj__meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--rm-sp-5);
margin: var(--rm-sp-7) 0 0;
padding-top: var(--rm-sp-5);
border-top: 1px solid rgb(var(--rm-light-rgb) / 0.1);
}
.proj__meta dt {
margin-bottom: 0.25rem;
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
text-transform: uppercase;
color: var(--rm-text-muted);
}
.proj__meta dd { margin: 0; font-size: var(--rm-fs-body-s); color: var(--rm-text); }
.proj__cover {
margin-top: clamp(var(--rm-sp-7), 5vw, var(--rm-sp-9));
overflow: hidden;
border-radius: 18px;
background: var(--rm-ink);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.08);
}
.proj__cover img { display: block; width: 100%; height: auto; }
.proj__text { display: grid; gap: var(--rm-sp-4); margin-top: clamp(var(--rm-sp-7), 5vw, var(--rm-sp-9)); }
.proj__text p {
font-size: clamp(1rem, 1.25vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.8;
color: var(--rm-text-muted);
text-wrap: pretty;
}
.proj__stack { display: grid; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(var(--rm-sp-7), 5vw, var(--rm-sp-9)); }
.proj__stack img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.08); }
.proj__empty { padding-block: 20vh; text-align: center; }
@media (max-width: 767px) {
.proj__meta { grid-template-columns: 1fr 1fr; }
}
}
/* ==========================================================================
17 · DEPOIMENTOS
--------------------------------------------------------------------------
DEPOIMENTOS
Deixa quem já trabalhou comigo contar.
[vídeo][vídeo][vídeo] ← começam empilhados no centro e abrem (--spread)
▱ ▱ ▱ ▱ ▱ ▱ prints andando numa faixa só ← começa na largura das seções
e abre até a tela toda (--grow)
Inspiração da entrada dos vídeos: utomic.framer.website.
========================================================================== */
.testi {
padding-top: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
padding-bottom: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11));
overflow-x: clip;
}
.testi__head { max-width: 44rem; margin: 0 0 clamp(var(--rm-sp-8), 5vw, var(--rm-sp-10)); }
.testi__title {
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: var(--rm-w-light);
line-height: var(--rm-lh-snug);
color: var(--rm-text);
text-wrap: balance;
}
/* ---- Vídeos ------------------------------------------------------------ */
.tvids {
--spread: 1;
--gap: var(--rm-sp-4);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap);
max-width: 60rem;
margin-inline: auto;
}
.tvid {
position: relative;
aspect-ratio: 9 / 16;
margin: 0;
overflow: hidden;
border-radius: 18px;
background: var(--rm-ink);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.1), 0 30px 60px -30px rgb(var(--rm-void-rgb) / 0.9);
}
.tvid__poster,
.tvid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tvid video { z-index: 3; background: var(--rm-void); }
.tvid::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(0deg, rgb(var(--rm-void-rgb) / 0.85), transparent 45%);
pointer-events: none;
}
.tvid__play {
position: absolute;
z-index: 2;
left: 50%; top: 50%;
display: grid;
place-items: center;
width: 4rem; height: 4rem;
padding: 0;
transform: translate(-50%, -50%);
border: 0;
border-radius: 50%;
color: var(--rm-text);
background: rgb(var(--rm-blue-rgb) / 0.28);
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.8), 0 0 28px -6px rgb(var(--rm-blue-rgb) / 0.9);
backdrop-filter: blur(6px);
cursor: pointer;
transition: background-color var(--rm-dur-base) var(--rm-ease-out), transform var(--rm-dur-base) var(--rm-ease-out);
}
.tvid__play svg { width: 1.25rem; height: 1.25rem; margin-left: 3px; }
.tvid__play:hover { background: rgb(var(--rm-blue-rgb) / 0.5); transform: translate(-50%, -50%) scale(1.06); }
.tvid__play:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: 3px; }
.tvid__cap {
position: absolute;
z-index: 2;
left: var(--rm-sp-5); right: var(--rm-sp-5); bottom: var(--rm-sp-5);
display: grid;
gap: 0.125rem;
font-size: var(--rm-fs-body-s);
line-height: 1.35;
color: var(--rm-text-muted);
}
.tvid__cap strong { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: var(--rm-w-regular); color: var(--rm-text); }
.tvid.is-playing .tvid__play,
.tvid.is-playing .tvid__cap { opacity: 0; pointer-events: none; }
/* entrada: os de fora começam atrás do do meio e abrem pros lados */
@media (min-width: 768px) {
.tvid { will-change: transform; }
.tvid:nth-child(1) {
transform:
translateX(calc((1 - var(--spread)) * (100% + var(--gap))))
rotate(calc((1 - var(--spread)) * -5deg))
scale(calc(0.9 + 0.1 * var(--spread)));
}
.tvid:nth-child(2) { z-index: 2; }
.tvid:nth-child(3) {
transform:
translateX(calc((1 - var(--spread)) * (-100% - var(--gap))))
rotate(calc((1 - var(--spread)) * 5deg))
scale(calc(0.9 + 0.1 * var(--spread)));
}
}
/* ---- Mural de prints ---------------------------------------------------
Faixa única de prints (sem a borda clara do original), sem fundo, que abre
com a rolagem (--grow) da largura das seções até a tela toda. Cards
levemente inclinados; no hover o card endireita e cresce. */
.mural { --grow: 1; margin-top: clamp(var(--rm-sp-9), 7vw, var(--rm-sp-11)); }
.mural__frame {
--from: min(71.25rem, 100% - 3.75rem);
width: calc(var(--from) + (100% - var(--from)) * var(--grow));
margin-inline: auto;
overflow: hidden;
}
.mural__rows {
display: grid;
gap: var(--rm-sp-2);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mural__row { padding-block: var(--rm-sp-3); }
.mural__track {
display: flex;
width: max-content;
animation: mural-run 60s linear infinite;
animation-play-state: paused;
}
.mural.is-live .mural__track { animation-play-state: running; }
.mural__rows:hover .mural__track { animation-play-state: paused; }
.mural__item {
flex: none;
margin: 0 var(--rm-sp-4) 0 0;
overflow: hidden;
border-radius: 16px;
background: var(--rm-void);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.12), 0 24px 40px -24px rgb(var(--rm-void-rgb) / 0.9);
rotate: -1.5deg;
transition: rotate var(--rm-dur-slow) var(--rm-ease-out), scale var(--rm-dur-slow) var(--rm-ease-out), box-shadow var(--rm-dur-slow) var(--rm-ease-out);
}
.mural__item:nth-child(even) { rotate: 1.5deg; }
.mural__item img { display: block; width: auto; height: clamp(8.5rem, 12vw, 11rem); }
@media (hover: hover) {
.mural__item:hover {
rotate: 0deg;
scale: 1.04;
box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.7), 0 24px 48px -20px rgb(var(--rm-blue-rgb) / 0.6);
}
}
@keyframes mural-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.mural__track { animation: none; }
.mural__row { overflow-x: auto; }
}
/* ---- CELULAR: vídeos lado a lado, arrastando pro lado ------------------- */
@media (max-width: 767px) {
.tvids {
display: flex;
gap: var(--rm-sp-3);
max-width: none;
margin-inline: -1.875rem;
padding-inline: 1.875rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.tvids::-webkit-scrollbar { display: none; }
.tvid { flex: 0 0 72%; scroll-snap-align: center; }
.mural__item { margin-right: var(--rm-sp-3); border-radius: 12px; }
/* título em 2 linhas: cada parte inteira numa linha, fonte acompanha a largura */
.testi__title { font-size: min(7.4vw, 2rem); }
.testi__line { display: block; white-space: nowrap; }
.mural__item img { height: 7rem; }
}
/* ==========================================================================
18 · TRANSIÇÃO "BORA FECHAR?"
--------------------------------------------------------------------------
SE VOCÊ LEU ATÉ AQUI, ← a seção fica parada (sticky) enquanto rola:
SÓ FALTA UMA PERGUNTA: a tela vira branca, as palavras acendem em
[BORA FECHAR?] marca-texto azul preto uma a uma e a tela volta pro preto
Referência: tejotaweb.com.br.
========================================================================== */
.closer { --light: 0; position: relative; height: 300vh; }
.closer__pin {
position: sticky;
top: 0;
display: grid;
align-items: center;
height: 100vh;
height: 100svh;
/* do preto ao branco e de volta (--light, site.js seção 13) */
background: color-mix(in srgb, var(--rm-light) calc(var(--light) * 100%), var(--rm-void));
}
.closer__text {
font-size: clamp(2.5rem, 6.2vw, 6rem);
font-weight: var(--rm-w-medium);
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
text-wrap: balance;
color: var(--rm-text);
}
/* cor base: off-white no preto, preto no branco; a palavra ainda não lida
fica bem transparente (--w 0) e vai ficando sólida (--w 1) */
.closer__word {
--base: color-mix(in srgb, var(--rm-void) calc(var(--light) * 100%), var(--rm-light));
color: color-mix(in srgb, var(--base) calc((0.05 + 0.95 * var(--w, 0)) * 100%), transparent); /* não lida: 5% */
}
/* "bora fechar?": marca-texto azul que cresce da esquerda (--m) e letra branca */
.closer__mark {
padding-inline: 0.12em;
margin-inline: -0.04em;
border-radius: 0.08em;
background: linear-gradient(var(--rm-blue), var(--rm-blue)) left center / calc(var(--m, 0) * 100%) 100% no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.closer__word--hl {
color: color-mix(in srgb, var(--rm-light) calc(var(--w, 0) * 100%), rgb(var(--rm-blue-rgb) / 0.05));
}
/* menos movimento: sem ficar parada, tudo aceso */
.closer.is-static { height: auto; }
.closer.is-static .closer__pin { position: static; height: auto; padding-block: clamp(var(--rm-sp-9), 8vw, var(--rm-sp-11)); }
@media (max-width: 767px) {
.closer { height: 260vh; }
.closer__text { font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.02; }
}
/* ==========================================================================
19 · FAIXINHA DE FERRAMENTAS + CONTATO
--------------------------------------------------------------------------
░░ [ic][ic][ic][ic][ic][ic][ic][ic] ░░ ← largura total, duas linhas em
░░ [ic][ic][ic][ic][ic][ic][ic][ic] ░░ sentidos opostos, brilho azul atrás
CONTATO
O próximo passo Me chama no WhatsApp…
é o mais fácil. Não precisa preencher formulário…
[ Pedir meu orçamento → ] • Respondo em…
========================================================================== */
.toolstrip {
position: relative;
isolation: isolate;
padding-top: clamp(var(--rm-sp-8), 6vw, var(--rm-sp-10));
}
/* brilho azul atrás, como o da faixa do Quem sou */
.toolstrip::before {
content: "";
position: absolute;
z-index: -1;
left: 50%; top: 58%;
width: min(58rem, 90vw);
height: min(16rem, 40vw);
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(closest-side, rgb(var(--rm-blue-rgb) / 0.4), rgb(var(--rm-blue-deep-rgb) / 0.16) 55%, transparent 100%);
filter: blur(24px);
pointer-events: none;
}
.toolstrip__rows {
display: grid;
gap: 0.875rem;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.toolstrip__track {
display: flex;
width: max-content;
animation: tool-run 70s linear infinite;
animation-play-state: paused;
}
.toolstrip__track--r { animation-direction: reverse; }
.toolstrip.is-live .toolstrip__track { animation-play-state: running; }
.toolstrip__tile { --tile: clamp(3.25rem, 4.6vw, 4.25rem); margin-right: 0.875rem; border-radius: 14px; }
@keyframes tool-run { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .toolstrip__track { animation: none; } }
.contact {
padding-top: clamp(var(--rm-sp-10), 10vw, calc(var(--rm-sp-11) + 2rem)); /* respiro depois da faixinha de ferramentas */
padding-bottom: clamp(var(--rm-sp-10), 10vw, calc(var(--rm-sp-11) + 2rem)); /* um pouco mais de respiro antes do rodapé */
}
.contact__grid {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: end;
gap: var(--rm-sp-7) clamp(var(--rm-sp-8), 6vw, var(--rm-sp-10));
}
.contact__title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: var(--rm-w-light);
line-height: 1.05;
color: var(--rm-text);
text-wrap: balance;
}
.contact__text {
max-width: 46ch;
font-size: clamp(1rem, 1.25vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.7;
color: var(--rm-text-muted);
text-wrap: pretty;
}
.contact__text + .contact__text { margin-top: var(--rm-sp-4); }
.contact__action { display: grid; justify-items: start; gap: var(--rm-sp-4); margin-top: var(--rm-sp-7); }
.contact__note {
display: flex;
align-items: center;
gap: var(--rm-sp-3);
font-size: var(--rm-fs-body-s);
color: var(--rm-text-muted);
}
.contact__dot {
position: relative;
flex: none;
width: 0.5rem; height: 0.5rem;
border-radius: 50%;
background: var(--rm-green);
}
.contact__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 0 rgb(var(--rm-green-rgb) / 0.6);
animation: reach-ping 2.2s var(--rm-ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .contact__dot::after { animation: none; } }
/* ==========================================================================
20 · RODAPÉ
--------------------------------------------------------------------------
[logo] frase CONTATO
(●)(●)(●)(●) (31) 98873-9768 · e-mail · site
R O D R I G O ← gigante, luz segue o mouse (efeito tejotaweb.com.br)
─────────────────────────────────────────────────────────────────────
© 2026 Rodrigo Miguel — CNPJ. Todos os direitos reservados. (↑)
========================================================================== */
@property --mx { syntax: ""; inherits: false; initial-value: -40%; }
@property --my { syntax: ""; inherits: false; initial-value: 50%; }
/* position + z-index: sem isso a foto da abertura (fixa atrás de tudo) cobria o rodapé */
.foot {
position: relative;
z-index: 1;
padding-top: clamp(var(--rm-sp-9), 7vw, var(--rm-sp-10));
border-top: 1px solid rgb(var(--rm-light-rgb) / 0.08);
background: var(--rm-void);
}
.foot__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--rm-sp-8) clamp(var(--rm-sp-7), 5vw, var(--rm-sp-9));
}
.foot__logo img { display: block; width: 8.75rem; height: auto; }
.foot__line {
margin-top: var(--rm-sp-5);
max-width: 34ch;
font-size: clamp(1rem, 1.2vw, 1.0625rem);
font-weight: var(--rm-w-light);
line-height: 1.6;
color: var(--rm-text-muted);
}
/* redes: bolinha branca com o ícone preto */
.foot__social { display: flex; flex-wrap: wrap; gap: var(--rm-sp-3); margin-top: var(--rm-sp-6); }
.foot__social a {
display: grid;
place-items: center;
width: 3rem; height: 3rem;
border-radius: 50%;
color: var(--rm-void);
background: var(--rm-light);
transition: transform var(--rm-dur-base) var(--rm-ease-out), background-color var(--rm-dur-base) var(--rm-ease-out), color var(--rm-dur-base) var(--rm-ease-out);
}
.foot__social svg { width: 1.25rem; height: 1.25rem; }
.foot__social a:hover { transform: translateY(-3px); background: var(--rm-blue); color: var(--rm-light); }
.foot__social a:focus-visible { outline: 2px solid var(--rm-blue); outline-offset: 3px; }
.foot__label {
margin-bottom: var(--rm-sp-4);
font-size: var(--rm-fs-micro);
font-weight: var(--rm-w-medium);
letter-spacing: var(--rm-ls-label);
text-transform: uppercase;
color: var(--rm-text-muted);
}
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col a {
padding-block: 0.4375rem;
font-size: clamp(1rem, 1.2vw, 1.0625rem);
color: var(--rm-text);
text-decoration: none;
overflow-wrap: anywhere;
transition: color var(--rm-dur-base) var(--rm-ease-out);
}
.foot__col a:hover { color: rgb(var(--rm-light-rgb) / 0.6); }
/* contato alinhado à direita (no celular volta pra esquerda) */
.foot__col--contact { align-items: flex-end; text-align: right; }
/* "RODRIGO" gigante: letra quase apagada e uma luz que acompanha o mouse */
.foot__word {
margin-top: clamp(var(--rm-sp-9), 7vw, var(--rm-sp-11));
overflow: hidden;
text-align: center;
line-height: 0.78;
user-select: none;
}
.foot__word span {
display: inline-block;
padding-bottom: 0.02em;
font-size: 15vw;
font-weight: var(--rm-w-medium);
letter-spacing: -0.03em;
white-space: nowrap;
color: transparent;
background-image: radial-gradient(circle at var(--mx) var(--my),
rgb(var(--rm-light-rgb) / 0.95) 0%,
rgb(var(--rm-light-rgb) / 0.35) 9%,
rgb(var(--rm-light-rgb) / 0.05) 24%); /* letra parada: 5% (uma camada só, sem background-color por baixo) */
-webkit-background-clip: text;
background-clip: text;
transition: --mx 0.25s linear, --my 0.25s linear;
}
/* sem mouse: a luz atravessa a palavra sozinha */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
.foot__word span { --my: 45%; animation: foot-shine 5s var(--rm-ease-inout) infinite; }
}
@keyframes foot-shine { 0% { --mx: -30%; } 60%, 100% { --mx: 130%; } }
.foot__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rm-sp-5);
padding-block: var(--rm-sp-5) calc(var(--rm-sp-5) + env(safe-area-inset-bottom));
border-top: 1px solid rgb(var(--rm-light-rgb) / 0.08);
}
.foot__legal { font-size: var(--rm-fs-body-s); color: var(--rm-text-muted); }
.foot__top {
flex: none;
display: grid;
place-items: center;
width: 3rem; height: 3rem;
border-radius: 50%;
color: var(--rm-text);
box-shadow: inset 0 0 0 1px rgb(var(--rm-light-rgb) / 0.16);
transition: background-color var(--rm-dur-base) var(--rm-ease-out), box-shadow var(--rm-dur-base) var(--rm-ease-out);
}
.foot__top svg { width: 1.125rem; height: 1.125rem; transition: translate var(--rm-dur-base) var(--rm-ease-out); }
.foot__top:hover { background: rgb(var(--rm-blue-rgb) / 0.28); box-shadow: inset 0 0 0 1px rgb(var(--rm-blue-rgb) / 0.8); }
.foot__top:hover svg { translate: 0 -2px; }
@media (max-width: 1079px) {
.contact__grid { grid-template-columns: 1fr; align-items: start; }
.foot__grid { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
/* celular: a frase do "bora fechar?" fica no meio da tela e sobra um vazio
embaixo dela; a faixinha sobe pra dentro desse vazio */
.toolstrip { margin-top: -22svh; padding-top: 0; }
.toolstrip__rows { gap: 0.625rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.toolstrip__tile { --tile: 3rem; margin-right: 0.625rem; border-radius: 12px; }
.contact__action { justify-items: stretch; }
.contact__cta { width: 100%; justify-content: center; }
.foot__grid { grid-template-columns: 1fr; gap: var(--rm-sp-7); }
.foot__col--contact { align-items: flex-start; text-align: left; }
.foot__bottom { align-items: flex-end; }
.foot__legal { max-width: 26ch; }
/* botão fixo do celular não cobre a linha legal */
.foot { padding-bottom: 5.5rem; }
}