/* ============================================================================
REDE — DESIGN SYSTEM
v1.0
Sistema visual para escritório de arquitetura e interiores.
Todas as cores foram extraídas por amostragem das fotografias do
escritório — nenhuma foi escolhida arbitrariamente.
Prefixo de classe: .rs-
Atributos de comportamento: data-rs-*
Dependência única (colar no ):
============================================================================ */
/* ----------------------------------------------------------------------------
1. TOKENS
---------------------------------------------------------------------------- */
:root {
/* --- Superfícies ------------------------------------------------------- */
--rs-papel: oklch(0.947 0.012 82); /* #F4EDE2 off-white quente, fundo padrão */
--rs-papel-2: oklch(0.889 0.021 78); /* #E4D8C6 bege de marcenaria, blocos */
--rs-papel-3: oklch(0.828 0.026 76); /* #D2C1A9 areia, vazios e placeholders */
/* --- Tinta ------------------------------------------------------------- */
--rs-tinta: oklch(0.245 0.018 55); /* #362D27 preto quente. Nunca use #000 */
--rs-meio: oklch(0.505 0.012 58); /* texto secundário e rótulos */
/* --- Materiais --------------------------------------------------------- */
--rs-madeira: oklch(0.752 0.056 74); /* #C8A87C tauari / carvalho claro */
--rs-concreto: oklch(0.628 0.008 60); /* #918C90 concreto de fôrma */
/* --- Acentos: cada um existe fisicamente em alguma obra ---------------- */
--rs-terra: oklch(0.478 0.104 47); /* #824B34 mesa de pedra, madeira escura */
--rs-verde: oklch(0.598 0.070 145); /* #6B986F grama ao sol */
--rs-ceu: oklch(0.582 0.146 262); /* #467ED8 céu de meio-dia */
--rs-vinho: oklch(0.435 0.113 18); /* #8C2F3E parede vermelha */
/* Acento ativo. Trocado em tempo de execução por seção — ver rede-ds.js.
Sempre referencie --rs-acento, nunca a cor final direta. */
--rs-acento: var(--rs-terra);
/* --- Fios: derivados da tinta, nunca cinzas soltos --------------------- */
--rs-fio: color-mix(in oklch, var(--rs-tinta) 16%, transparent);
--rs-fio-leve: color-mix(in oklch, var(--rs-tinta) 8%, transparent);
/* --- Sobre fotografia -------------------------------------------------- */
--rs-claro: #F6EFE4; /* texto sobre imagem escura */
--rs-veu: linear-gradient(to top,
rgba(20,16,12,0.72) 0%,
rgba(20,16,12,0.14) 45%,
rgba(20,16,12,0.26) 100%);
/* --- Espaço ------------------------------------------------------------ */
--rs-margem: clamp(14px, 3vw, 34px); /* recuo da moldura de prancha */
--rs-gut: clamp(22px, 4.2vw, 68px); /* medianiz entre colunas */
--rs-bloco: clamp(64px, 11vh, 148px); /* respiro vertical entre seções */
--rs-borda: calc(var(--rs-margem) + var(--rs-gut)); /* recuo útil do conteúdo */
/* --- Tipografia -------------------------------------------------------- */
--rs-voz: "Fraunces", Georgia, "Times New Roman", serif;
--rs-dado: "Archivo", system-ui, -apple-system, sans-serif;
--rs-t-micro: 11px;
--rs-t-corpo: clamp(16px, 1.0vw, 18px);
--rs-t-fala: clamp(21px, 2.3vw, 34px);
--rs-t-titulo: clamp(28px, 3.4vw, 52px);
--rs-t-nome: clamp(52px, 13.0vw, 200px);
/* --- Motion ------------------------------------------------------------ */
--rs-ease: cubic-bezier(0.16, 1, 0.30, 1); /* saída expo: peças grandes */
--rs-ease-estado: cubic-bezier(0.65, 0, 0.35, 1); /* troca de estado */
--rs-dur-micro: 160ms; /* cor de link, sublinhado */
--rs-dur-curto: 280ms; /* hover, foco, item de lista */
--rs-dur-medio: 600ms; /* entrada de bloco */
--rs-dur-lento: 1000ms; /* troca de acento, inversão de superfície */
--rs-dur-capa: 1200ms; /* revelação de abertura */
}
/* ----------------------------------------------------------------------------
2. RESET E BASE
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--rs-papel);
color: var(--rs-tinta);
font-family: var(--rs-dado);
font-variation-settings: "wdth" 100, "wght" 400;
font-size: var(--rs-t-corpo);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
transition: background-color var(--rs-dur-lento) var(--rs-ease),
color var(--rs-dur-lento) var(--rs-ease);
}
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rs-acento); color: var(--rs-papel); }
:focus-visible { outline: 2px solid var(--rs-acento); outline-offset: 3px; }
/* ----------------------------------------------------------------------------
3. TIPOGRAFIA
Duas famílias, dois papéis. Fraunces fala, Archivo informa.
Nunca use Fraunces em texto corrido nem Archivo em título de obra.
---------------------------------------------------------------------------- */
.rs-nome, .rs-titulo, .rs-fala { font-family: var(--rs-voz); font-weight: 400; margin: 0; }
/* Nome do escritório / abertura. Um por página. */
.rs-nome {
font-size: var(--rs-t-nome);
font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
line-height: 0.84;
letter-spacing: -0.035em;
}
/* Título de seção ou de obra. */
.rs-titulo {
font-size: var(--rs-t-titulo);
font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1;
line-height: 1.0;
letter-spacing: -0.028em;
}
/* Frase de posicionamento. Máximo 27 caracteres por linha. */
.rs-fala {
font-size: var(--rs-t-fala);
font-weight: 300;
font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1;
line-height: 1.24;
letter-spacing: -0.015em;
max-width: 27ch;
}
/* Carimbo técnico. Condensada, caixa alta, tracking largo.
É a peça que faz o site soar como arquitetura. Use para
metadados: LOCAL / ANO / ÁREA / ESCOPO / SITUAÇÃO. */
.rs-micro {
font-family: var(--rs-dado);
font-variation-settings: "wdth" 80, "wght" 500;
font-size: var(--rs-t-micro);
letter-spacing: 0.17em;
text-transform: uppercase;
line-height: 1.3;
color: var(--rs-meio);
margin: 0;
}
.rs-micro[data-rs-acesa] { color: var(--rs-acento); }
/* Texto corrido. Medida travada — nunca ultrapasse 56ch. */
.rs-prosa { max-width: 56ch; }
.rs-prosa > p { margin: 0 0 1.1em; }
.rs-prosa > p:last-child { margin-bottom: 0; }
/* Números de dado (ano, área, metragem) sempre tabulares. */
.rs-num { font-variant-numeric: tabular-nums; }
/* Sobre fotografia */
[data-rs-sobre-foto] { color: var(--rs-claro); }
[data-rs-sobre-foto] .rs-micro { color: rgba(246,239,228,0.72); }
/* ----------------------------------------------------------------------------
4. LAYOUT
---------------------------------------------------------------------------- */
/* Bloco padrão de seção. */
.rs-bloco {
padding-inline: var(--rs-borda);
padding-block: var(--rs-bloco);
}
/* Grade assimétrica 1:2 — rótulo à esquerda, conteúdo à direita.
É a grade base do sistema. Colapsa em coluna única abaixo de 900px. */
.rs-grade {
display: grid;
gap: var(--rs-gut);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.rs-grade { grid-template-columns: 3fr 6fr; }
}
/* Duas colunas iguais — para pares de sócias, pares de imagem. */
.rs-par {
display: grid;
gap: var(--rs-gut);
grid-template-columns: 1fr;
}
@media (min-width: 820px) { .rs-par { grid-template-columns: 1fr 1fr; } }
/* Coluna que acompanha a rolagem enquanto o conteúdo ao lado corre. */
@media (min-width: 900px) {
.rs-fixa { position: sticky; top: 22vh; align-self: start; }
}
.rs-fio-topo { border-top: 1px solid var(--rs-fio); }
/* ----------------------------------------------------------------------------
5. MOLDURA DE PRANCHA
Assinatura do sistema. Fica fixa sobre tudo, não recebe clique.
Os cantos assumem a cor do acento ativo.
---------------------------------------------------------------------------- */
.rs-moldura {
position: fixed;
inset: var(--rs-margem);
border: 1px solid var(--rs-fio);
pointer-events: none;
z-index: 60;
transition: border-color var(--rs-dur-lento) var(--rs-ease);
}
.rs-moldura > i {
position: absolute;
width: 8px; height: 8px;
border: 1px solid var(--rs-acento);
transition: border-color var(--rs-dur-lento) var(--rs-ease);
}
.rs-moldura > i:nth-child(1) { top: -4px; left: -4px; }
.rs-moldura > i:nth-child(2) { top: -4px; right: -4px; }
.rs-moldura > i:nth-child(3) { bottom: -4px; left: -4px; }
.rs-moldura > i:nth-child(4) { bottom: -4px; right: -4px; }
/* Régua de escala — indicador de progresso lido como cota de desenho.
Um por seção marcada com data-rs-cor. */
.rs-regua {
position: fixed;
z-index: 61;
left: calc(var(--rs-margem) + 13px);
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 8px;
}
.rs-regua > b {
width: 13px; height: 2px;
background: var(--rs-tinta);
opacity: 0.2;
transition: width var(--rs-dur-curto) var(--rs-ease),
opacity var(--rs-dur-curto) var(--rs-ease),
background-color var(--rs-dur-curto) var(--rs-ease);
}
.rs-regua > b[data-rs-on] {
width: 30px;
opacity: 1;
background: var(--rs-acento);
}
@media (max-width: 900px) { .rs-regua { display: none; } }
/* ----------------------------------------------------------------------------
6. CABEÇALHO
---------------------------------------------------------------------------- */
.rs-topo {
position: fixed;
z-index: 62;
top: calc(var(--rs-margem) + 17px);
left: var(--rs-borda);
right: var(--rs-borda);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 20px;
transition: color var(--rs-dur-medio) var(--rs-ease);
}
.rs-topo .rs-marca { font-variation-settings: "wdth" 80, "wght" 600; color: var(--rs-tinta); }
.rs-topo nav { display: flex; gap: 24px; }
.rs-topo nav a { transition: color var(--rs-dur-micro) var(--rs-ease); }
.rs-topo nav a:hover { color: var(--rs-acento); }
/* Estado sobre fotografia — aplicado por JS enquanto a capa está visível. */
.rs-topo[data-rs-sobre-foto] .rs-marca,
.rs-topo[data-rs-sobre-foto] nav a { color: var(--rs-claro); }
@media (max-width: 620px) { .rs-topo nav a:not(:last-child) { display: none; } }
/* ----------------------------------------------------------------------------
7. MÍDIA
O contêiner recorta, a imagem escala por dentro. Nunca escale o contêiner.
---------------------------------------------------------------------------- */
.rs-media {
margin: 0;
overflow: hidden;
background: var(--rs-papel-3); /* cor de espera antes da imagem carregar */
}
.rs-media[data-rs-r="3-4"] { aspect-ratio: 3 / 4; }
.rs-media[data-rs-r="4-5"] { aspect-ratio: 4 / 5; }
.rs-media[data-rs-r="1-1"] { aspect-ratio: 1 / 1; }
.rs-media[data-rs-r="3-2"] { aspect-ratio: 3 / 2; }
.rs-media[data-rs-r="16-10"]{ aspect-ratio: 16 / 10; }
.rs-media[data-rs-r="21-9"] { aspect-ratio: 21 / 9; }
/* Capa fotográfica de altura total, com véu para o texto ficar legível. */
.rs-capa { position: relative; height: 100svh; min-height: 540px; overflow: hidden; }
.rs-capa > img { position: absolute; inset: 0; }
.rs-capa::after { content: ""; position: absolute; inset: 0; background: var(--rs-veu); }
.rs-capa > .rs-capa-texto {
position: absolute;
z-index: 2;
left: var(--rs-borda);
right: var(--rs-borda);
bottom: clamp(38px, 8vh, 92px);
color: var(--rs-claro);
}
/* ----------------------------------------------------------------------------
8. COMPONENTES
---------------------------------------------------------------------------- */
/* Ficha técnica — lista de definição em duas colunas. */
.rs-ficha { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.rs-ficha > dt {
font-variation-settings: "wdth" 80, "wght" 500;
font-size: var(--rs-t-micro);
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--rs-meio);
}
.rs-ficha > dd { margin: 0; font-size: 14px; font-variation-settings: "wdth" 92; }
/* Amostra de cor — declara publicamente de onde saiu o acento da obra. */
.rs-amostra { display: flex; align-items: center; gap: 9px; }
.rs-amostra > span { flex: none; width: 15px; height: 15px; background: var(--rs-acento); }
/* Voz — bloco de sócia/autor, com barra na cor do acento. */
.rs-voz { border-left: 2px solid var(--rs-acento); padding-left: 20px; }
.rs-voz + .rs-voz { border-left-color: var(--rs-concreto); }
.rs-voz > h3 {
font-family: var(--rs-voz);
font-variation-settings: "SOFT" 40, "WONK" 1;
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 400;
letter-spacing: -0.02em;
margin: 0 0 4px;
}
/* Índice — lista tipográfica. Irmãos esmaecem no hover. */
.rs-indice ol { list-style: none; margin: 0; padding: 0; }
.rs-indice li { border-bottom: 1px solid var(--rs-fio-leve); }
.rs-indice a {
display: grid;
grid-template-columns: 40px 12px 1fr auto;
gap: 16px;
align-items: baseline;
padding-block: clamp(15px, 2.2vh, 26px);
transition: opacity var(--rs-dur-curto) var(--rs-ease),
padding-left var(--rs-dur-curto) var(--rs-ease);
}
.rs-indice a:hover { padding-left: 12px; }
.rs-indice ol:hover a { opacity: 0.4; }
.rs-indice ol:hover a:hover { opacity: 1; }
.rs-indice a > i { width: 10px; height: 10px; align-self: center; } /* chip de cor da obra */
.rs-indice a > em {
font-style: normal;
font-family: var(--rs-voz);
font-variation-settings: "SOFT" 40, "WONK" 1;
font-size: clamp(20px, 2.3vw, 33px);
font-weight: 400;
letter-spacing: -0.022em;
}
/* Link grande — e-mail, telefone, chamada final. */
.rs-link-grande {
display: inline-block;
font-family: var(--rs-voz);
font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
font-size: clamp(28px, 5.6vw, 82px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.03em;
border-bottom: 2px solid var(--rs-fio);
transition: color var(--rs-dur-curto) var(--rs-ease),
border-color var(--rs-dur-curto) var(--rs-ease);
}
.rs-link-grande:hover { color: var(--rs-acento); border-color: var(--rs-acento); }
/* Rodapé */
.rs-rodape {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 18px var(--rs-borda) calc(var(--rs-margem) + 18px);
border-top: 1px solid var(--rs-fio-leve);
}
/* ----------------------------------------------------------------------------
9. MOTION
Três mecanismos, nesta ordem de preferência:
a) máscara de linha — entrada de abertura, controlada por classe
b) escala por scroll — nativa, animation-timeline: view()
c) troca de acento — variável CSS trocada por JS
Regra de ouro do sistema: peças grandes andam devagar (1000–1200ms),
microinterações andam rápido (160–280ms). Lentidão comunica cuidado;
300ms em tudo comunica template.
---------------------------------------------------------------------------- */
/* a) Máscara de linha. A linha sobe de dentro do próprio corpo.
Estrutura: Texto
Nunca aplique letra a letra em texto corrido. */
.rs-mascara { display: block; overflow: hidden; }
.rs-mascara > * {
display: block;
transform: translateY(104%);
transition: transform var(--rs-dur-capa) var(--rs-ease);
}
[data-rs-pronto] .rs-mascara > * { transform: translateY(0); }
/* Escalonamento: 100ms entre linhas. Acima de 3 linhas, use 80ms. */
[data-rs-pronto] .rs-mascara:nth-of-type(2) > * { transition-delay: 100ms; }
[data-rs-pronto] .rs-mascara:nth-of-type(3) > * { transition-delay: 200ms; }
[data-rs-pronto] [data-rs-atraso] { transition-delay: 300ms; }
/* b) Escala acoplada ao scroll, nativa. Sem suporte, a imagem
simplesmente aparece estática — degradação limpa, zero JS. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes rs-entra {
from { transform: scale(1.12); }
to { transform: scale(1); }
}
.rs-media > img,
.rs-media > video {
animation: rs-entra linear both;
animation-timeline: view();
animation-range: entry 0% cover 58%;
}
}
}
/* Fallback opcional por JS, caso precise suportar navegador antigo:
marque o elemento com data-rs-revelar e o script cuida. */
[data-rs-revelar] {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--rs-dur-medio) var(--rs-ease),
transform var(--rs-dur-medio) var(--rs-ease);
}
[data-rs-revelar][data-rs-visivel] { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------------
10. ACESSIBILIDADE
Piso não negociável do sistema.
---------------------------------------------------------------------------- */
.rs-sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
.rs-mascara > * { transform: none; }
[data-rs-revelar] { opacity: 1; transform: none; }
}