/* ═══════════════════════════════════════════════════════════════════════════
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’ });
}
});
});
});
Termos de Uso
Última atualização: Abril de 2026
1. Aceitar os Termos
Ao acessar nosso site, você concorda em aceitar integralmente estes Termos de Uso.
2. Uso Permitido
Você concorda em usar este site apenas para fins legítimos e de forma que não infrinja os direitos de terceiros.
3. Propriedade Intelectual
Todo conteúdo do site, incluindo textos, imagens e projetos, é propriedade de NR Arquitetura ou de seus licenciadores.
4. Limitação de Responsabilidade
O site é fornecido “como está”. NR Arquitetura não se responsabiliza por danos diretos ou indiretos resultantes do uso do site.
5. Lei Aplicável
Estes Termos são regidos pelas leis da República Federativa do Brasil, com foro de Macapá, AP.
6. Contato
Para dúvidas, contate: contato@nrarq.com