/* ═══════════════════════════════════════════════════════════════════════════
DESIGN SYSTEM PREMIUM — Baseado em Padrões Internacionais
Referências: Shape Studio, Minale+Mann, BVN, Clarity Arts
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* CORES (Paleta Minimalista com Accent Warm) */
–color-primary: #222222; /* Charcoal escuro */
–color-secondary: #ffffff; /* Branco puro */
–color-neutral-light: #f8f8f8; /* Cinza muito claro */
–color-neutral-medium: #9c9c9c; /* Cinza médio */
–color-neutral-dark: #666666; /* Cinza escuro */
–color-accent: #fa5d29; /* Laranja (CTAs, accents) */
–color-accent-hover: #e8501f; /* Laranja mais escuro */
/* TIPOGRAFIA */
–font-primary: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, ‘Inter Tight’, sans-serif;
–font-display: ‘Playfair Display’, serif;
/* TAMANHOS (Escaláveis via clamp) */
–text-h1: clamp(2.25rem, 8vw, 4.5rem); /* 36px → 72px */
–text-h2: clamp(1.75rem, 5vw, 3rem); /* 28px → 48px */
–text-h3: clamp(1.25rem, 3vw, 1.75rem); /* 20px → 28px */
–text-body: 1rem; /* 16px */
–text-small: 0.875rem; /* 14px */
/* ESPAÇAMENTO (8px Grid) */
–sp-xs: 0.5rem; /* 8px */
–sp-sm: 1rem; /* 16px */
–sp-md: 1.5rem; /* 24px */
–sp-lg: 2rem; /* 32px */
–sp-xl: 3rem; /* 48px */
–sp-2xl: 4rem; /* 64px */
–sp-3xl: 5rem; /* 80px */
/* RADIUS */
–radius-sm: 0.25rem; /* 4px */
–radius-md: 0.5rem; /* 8px */
–radius-lg: 1rem; /* 16px */
/* SOMBRAS (Sutis, realistas) */
–shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.08);
–shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.1);
–shadow-lg: 0px 8px 24px rgba(0, 0, 0, 0.12);
–shadow-xl: 0px 16px 40px rgba(0, 0, 0, 0.15);
/* TRANSIÇÕES */
–trans-fast: 0.2s ease-in-out;
–trans-normal: 0.3s ease-in-out;
–trans-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
/* CONTAINER */
–container-max: 1400px;
–container-pad-lg: 4rem; /* Desktop */
–container-pad-md: 2rem; /* Tablet */
–container-pad-sm: 1.25rem; /* Mobile */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(–font-primary);
line-height: 1.6;
color: var(–color-primary);
background: var(–color-secondary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ═══════════════════════════════════════════════════════════════════════════
TIPOGRAFIA
═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-family: var(–font-display);
font-weight: 700;
line-height: 1.2;
color: var(–color-primary);
margin-bottom: var(–sp-lg);
}
h1 {
font-size: var(–text-h1);
font-weight: 800;
letter-spacing: -2px;
}
h2 {
font-size: var(–text-h2);
letter-spacing: -1px;
margin-bottom: var(–sp-xl);
}
h3 {
font-size: var(–text-h3);
font-weight: 600;
}
p {
margin-bottom: var(–sp-md);
line-height: 1.8;
color: var(–color-neutral-dark);
}
a {
color: var(–color-accent);
text-decoration: none;
transition: color var(–trans-normal);
}
a:hover {
color: var(–color-accent-hover);
}
/* ═══════════════════════════════════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════════════════════════════════ */
.container {
max-width: var(–container-max);
margin: 0 auto;
padding: 0 var(–container-pad-lg);
}
section {
padding: var(–sp-2xl) 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
HEADER & NAVIGATION
═══════════════════════════════════════════════════════════════════════════ */
header {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
background: var(–color-secondary);
border-bottom: 1px solid var(–color-neutral-light);
transition: all var(–trans-normal);
}
header.scrolled {
box-shadow: var(–shadow-md);
padding: 0.75rem var(–container-pad-lg);
}
header:not(.scrolled) {
padding: 1.5rem var(–container-pad-lg);
}
.header-content {
max-width: var(–container-max);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -1px;
}
.logo a {
color: var(–color-primary);
transition: color var(–trans-normal);
}
.logo a:hover {
color: var(–color-accent);
}
nav {
display: flex;
gap: 3rem;
list-style: none;
}
nav a {
font-size: 0.95rem;
font-weight: 400;
color: var(–color-primary);
position: relative;
padding-bottom: 0.25rem;
}
nav a::after {
content: ”;
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(–color-accent);
transition: width var(–trans-normal);
}
nav a:hover::after {
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════════
HERO SECTION (Premium, com Imagem)
═══════════════════════════════════════════════════════════════════════════ */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
padding: var(–sp-3xl) 0;
}
.hero-content {
z-index: 10;
}
.hero h1 {
margin-bottom: var(–sp-lg);
line-height: 1.1;
}
.hero > p {
font-size: var(–text-h3);
color: var(–color-neutral-dark);
margin-bottom: var(–sp-xl);
max-width: 90%;
}
.hero-image {
width: 100%;
height: 100%;
min-height: 600px;
overflow: hidden;
border-radius: var(–radius-lg);
box-shadow: var(–shadow-xl);
background: var(–color-neutral-light);
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ═══════════════════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.btn {
display: inline-block;
padding: 1rem 2rem;
font-size: 0.95rem;
font-weight: 600;
border: none;
border-radius: var(–radius-md);
cursor: pointer;
transition: all var(–trans-normal);
text-decoration: none;
letter-spacing: 0.5px;
}
.btn–primary {
background: var(–color-accent);
color: white;
}
.btn–primary:hover {
background: var(–color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(250, 93, 41, 0.25);
}
.btn–secondary {
background: var(–color-primary);
color: white;
}
.btn–secondary:hover {
background: var(–color-neutral-dark);
transform: translateY(-2px);
}
/* ═══════════════════════════════════════════════════════════════════════════
CARDS & GRID
═══════════════════════════════════════════════════════════════════════════ */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(–sp-xl);
margin-top: var(–sp-2xl);
}
.grid–3col {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.card {
background: var(–color-secondary);
border: 1px solid var(–color-neutral-light);
padding: var(–sp-lg);
border-radius: var(–radius-lg);
transition: all var(–trans-normal);
box-shadow: var(–shadow-sm);
}
.card:hover {
box-shadow: var(–shadow-lg);
transform: translateY(-4px);
border-color: var(–color-accent);
}
.card h3 {
color: var(–color-primary);
margin-bottom: var(–sp-md);
}
/* ═══════════════════════════════════════════════════════════════════════════
SECTIONS COM BACKGROUND
═══════════════════════════════════════════════════════════════════════════ */
.bg-light {
background: var(–color-neutral-light);
}
.bg-dark {
background: var(–color-primary);
color: var(–color-secondary);
}
.bg-dark h2,
.bg-dark h3 {
color: var(–color-secondary);
}
.bg-dark p {
color: rgba(255, 255, 255, 0.9);
}
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════════════════ */
footer {
background: var(–color-primary);
color: var(–color-secondary);
padding: var(–sp-2xl) 0 var(–sp-lg);
margin-top: var(–sp-3xl);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
footer h4 {
color: var(–color-secondary);
margin-bottom: var(–sp-md);
font-size: 0.95rem;
}
footer a {
color: rgba(255, 255, 255, 0.7);
}
footer a:hover {
color: var(–color-accent);
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(–sp-xl);
margin-bottom: var(–sp-2xl);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(–sp-lg);
text-align: center;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
–container-pad-lg: var(–container-pad-md);
}
.hero {
grid-template-columns: 1fr;
gap: var(–sp-2xl);
padding: var(–sp-2xl) 0;
}
.hero-image {
min-height: 400px;
}
nav {
display: none;
}
section {
padding: var(–sp-xl) 0;
}
.grid {
gap: var(–sp-lg);
}
}
@media (max-width: 480px) {
:root {
–container-pad-lg: var(–container-pad-sm);
}
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.5rem;
}
.btn {
width: 100%;
text-align: center;
}
section {
padding: var(–sp-lg) 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
ANIMAÇÕES
═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s var(–trans-slow) forwards;
}
/* Reduz movimentos se preferir-reduced-motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
// Adicionar classe ‘scrolled’ ao header
document.addEventListener(‘DOMContentLoaded’, function() {
const header = document.querySelector(‘header’);
if (header) {
window.addEventListener(‘scroll’, function() {
if (window.scrollY > 10) {
header.classList.add(‘scrolled’);
} else {
header.classList.remove(‘scrolled’);
}
});
}
// Smooth scroll para links internos
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
const href = this.getAttribute(‘href’);
if (href !== ‘#’ && document.querySelector(href)) {
e.preventDefault();
document.querySelector(href).scrollIntoView({ behavior: ‘smooth’ });
}
});
});
});
Política de Privacidade
Última atualização: Abril de 2026
1. Introdução
A NR Arquitetura (“nós”, “nosso” ou “empresa”) respeita a privacidade de todos os usuários de nosso site. Esta Política de Privacidade descreve como coletamos, usamos e protegemos suas informações pessoais em conformidade com a Lei Geral de Proteção de Dados (LGPD).
2. Coleta de Dados
Coletamos informações que você fornece voluntariamente, como nome, email, telefone e mensagens enviadas através do formulário de contato.
3. Uso de Dados
Suas informações são usadas apenas para responder suas consultas e melhorar nossa comunicação. Nunca compartilharemos seus dados com terceiros sem consentimento.
4. Segurança
Implementamos medidas técnicas e organizacionais para proteger seus dados pessoais contra acesso não autorizado.
5. Seus Direitos
Você tem direito a acessar, corrigir ou solicitar a exclusão de seus dados pessoais. Entre em contato conosco para exercer seus direitos.
6. Contato
Para dúvidas sobre esta política, contate: contato@nrarq.com