/* ═══════════════════════════════════════════════════════════════════════════
DESIGN SYSTEM CORRIGIDO — NR Arquitetura
═══════════════════════════════════════════════════════════════════════════
Princípios:
– Variáveis CSS centralizadas para fácil manutenção
– Classes reutilizáveis em lugar de inline styles
– WCAG AA contrast compliance (mín 4.5:1 para texto)
– Responsividade mobile-first
– Estados hover/focus/active padronizados
– Escala tipográfica rem-based (1rem = 16px)
– Sistema de spacing consistente (4px base)
═══════════════════════════════════════════════════════════════════════════ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, ‘Helvetica Neue’, Arial, sans-serif;
line-height: 1.6;
color: var(–nr-text);
background: var(–nr-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root {
–nr-primary: #546E8F;
–nr-cta: #D9744D;
–nr-cta-hover: #CC6333;
–nr-cta-active: #B8563F;
–nr-text: #333333;
–nr-text-light: #666666;
–nr-text-lighter: #999999;
–nr-bg: #ffffff;
–nr-bg-alt: #f8f8f8;
–nr-border: #eeeeee;
–nr-border-dark: #dddddd;
–nr-footer-bg: #1a1a1a;
–nr-footer-text: #e0e0e0;
–nr-footer-muted: #999999;
–nr-radius: 0.5rem;
–nr-radius-lg: 1rem;
–nr-radius-full: 50px;
–shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
–shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
–shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
–shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
–transition-fast: 150ms ease-out;
–transition-normal: 300ms ease-out;
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Outfit’, sans-serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: var(–nr-primary);
}
h1 { font-size: 2.5rem; font-weight: 900; }
h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 3rem; }
h3 { font-size: 1.5rem; font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
p { margin-bottom: 1.5rem; line-height: 1.9; }
a {
color: var(–nr-cta);
text-decoration: none;
transition: color var(–transition-fast);
}
a:hover { color: var(–nr-cta-hover); text-decoration: underline; }
a:active { color: var(–nr-cta-active); }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
section { padding: 6rem 0; }
/* ═══════════════════════════════════════════════════════════════════════════
HEADER & NAV
═══════════════════════════════════════════════════════════════════════════ */
header {
position: sticky;
top: 0;
z-index: 100;
background: white;
border-bottom: 1px solid var(–nr-border);
padding: 1.5rem 0;
box-shadow: var(–shadow-sm);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.25rem;
font-weight: 700;
color: var(–nr-primary);
text-decoration: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.logo:hover { text-decoration: none; }
.logo-sub {
font-size: 0.6875rem;
color: var(–nr-text-lighter);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
nav { display: flex; align-items: center; gap: 2rem; }
.nav {
display: flex;
gap: 2rem;
list-style: none;
}
.nav a {
color: var(–nr-text-light);
font-weight: 500;
font-size: 0.9375rem;
transition: color var(–transition-fast);
}
.nav a:hover { color: var(–nr-primary); text-decoration: none; }
.nav .cta-button {
background: var(–nr-cta);
color: white;
padding: 0.75rem 1.75rem;
border-radius: var(–nr-radius);
font-weight: 600;
font-size: 0.875rem;
transition: all var(–transition-normal);
border: none;
cursor: pointer;
}
.nav .cta-button:hover {
background: var(–nr-cta-hover);
transform: translateY(-2px);
text-decoration: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-secondary {
display: inline-block;
padding: 1.25rem 2.75rem;
border-radius: var(–nr-radius);
text-decoration: none;
font-weight: 700;
font-size: 1rem;
border: none;
cursor: pointer;
transition: all var(–transition-normal);
font-family: inherit;
letter-spacing: 0.5px;
}
.btn-primary {
background: var(–nr-cta);
color: white;
}
.btn-primary:hover {
background: var(–nr-cta-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(217, 116, 77, 0.3);
text-decoration: none;
}
.btn-primary:active {
background: var(–nr-cta-active);
transform: translateY(0);
}
.btn-secondary {
background: transparent;
color: var(–nr-primary);
border: 2px solid var(–nr-primary);
}
.btn-secondary:hover {
background: var(–nr-primary);
color: white;
text-decoration: none;
}
.btn-secondary:active { background: #455a7a; }
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════════════════ */
footer {
background: linear-gradient(135deg, var(–nr-footer-bg) 0%, #0a0a0a 100%);
color: var(–nr-footer-text);
padding: 6rem 0 2rem;
margin-top: 6rem;
position: relative;
}
footer::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(–nr-primary) 0%, var(–nr-cta) 100%);
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.footer-column h4 {
margin-bottom: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: white;
}
.footer-column ul { list-style: none; }
.footer-column a {
color: var(–nr-footer-muted);
text-decoration: none;
display: block;
padding: 0.5rem 0;
transition: color var(–transition-fast);
font-size: 0.875rem;
}
.footer-column a:hover {
color: var(–nr-cta);
text-decoration: underline;
}
.footer-contact {
font-size: 0.875rem;
line-height: 1.8;
color: var(–nr-footer-muted);
}
.footer-contact strong { color: var(–nr-footer-text); }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.5rem;
text-align: center;
color: var(–nr-footer-muted);
font-size: 0.8125rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
GRID & CARDS
═══════════════════════════════════════════════════════════════════════════ */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
background: var(–nr-bg);
border: 1px solid var(–nr-border);
padding: 3rem;
border-radius: 1rem;
transition: all var(–transition-normal);
box-shadow: var(–shadow-md);
}
.card:hover {
box-shadow: var(–shadow-xl);
transform: translateY(-8px);
border-color: var(–nr-cta);
}
/* ═══════════════════════════════════════════════════════════════════════════
UTILITY & HELPER CLASSES
═══════════════════════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 2rem; }
.mt-2xl { margin-top: 3rem; }
.mb-lg { margin-bottom: 1.5rem; }
.hero-subtitle {
font-style: italic;
font-weight: 300;
opacity: 0.95;
letter-spacing: 0.3px;
}
/* ═══════════════════════════════════════════════════════════════════════════
HERO & SPECIAL SECTIONS
═══════════════════════════════════════════════════════════════════════════ */
.hero {
background: linear-gradient(135deg, var(–nr-primary) 0%, #3d4f6d 100%);
color: white;
padding: 8rem 0;
position: relative;
}
.hero h1 {
color: white;
font-size: 3.5rem;
margin-bottom: 2rem;
}
.hero h2 {
color: white;
margin-bottom: 2rem;
}
.hero p {
color: rgba(255, 255, 255, 0.95);
margin-bottom: 1.5rem;
font-size: 1.25rem;
}
.bg-alt { background: var(–nr-bg-alt); }
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; margin-bottom: 2rem; }
.hero h1 { font-size: 2.5rem; }
.nav { display: none; }
.footer-content { grid-template-columns: repeat(2, 1fr); }
section { padding: 4rem 0; }
.grid.cols-3 { grid-template-columns: 1fr; }
.card { padding: 2rem; }
.grid { gap: 2rem; }
}
@media (max-width: 480px) {
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
.hero h1 { font-size: 2rem; }
.footer-content { grid-template-columns: 1fr; }
.container { padding: 0 1rem; }
.btn-primary, .btn-secondary { width: 100%; text-align: center; }
section { padding: 3rem 0; }
.card { padding: 1.5rem; }
footer { margin-top: 4rem; padding: 4rem 0 1.5rem; }
}
Termos de Uso
Última atualização: Abril de 2026
1. Aceitação dos Termos
Ao acessar e usar o site NR Arquitetura, você aceita estar vinculado por estes Termos de Uso. Se você não concordar com qualquer parte, não acesse o site.
2. Uso Permitido
Você concorda em usar este site apenas para fins legais e de forma que não viola direitos de terceiros.
3. Conteúdo do Site
Todo o conteúdo do site (textos, imagens, projetos, artigos) é propriedade de NR Arquitetura ou de seus licenciadores. Você não pode reproduzir, distribuir ou transmitir este conteúdo sem autorização prévia.
4. Propriedade Intelectual
Todos os direitos de propriedade intelectual relacionados ao site pertencem a NR Arquitetura. Isso inclui marcas registradas, direitos autorais, desenhos e patentes.
5. Limitação de Responsabilidade
NR Arquitetura não é responsável por danos diretos, indiretos, incidentais ou consequentes resultantes do uso ou incapacidade de uso do site.
6. Isenção de Garantias
O site é fornecido “como está” sem garantias de qualquer tipo. NR Arquitetura não garante que o site será ininterrupto, seguro ou livre de erros.
7. Links Externos
O site pode conter links para sites de terceiros. NR Arquitetura não é responsável pelo conteúdo desses sites externos.
8. Modificações nos Termos
Reservamo-nos o direito de modificar estes Termos a qualquer momento. Mudanças significativas serão notificadas no site.
9. Lei Aplicável
Estes Termos são regidos pelas leis da República Federativa do Brasil, com foro competente na Comarca de Macapá, Estado do Amapá.
10. Contato
Para dúvidas sobre estes Termos, entre em contato conosco:
NR Arquitetura
R. José Serafim, 691 – Laguinho, Macapá – AP, 68908-150
Telefone: (96) 98102-4338
Email: contato@nrarq.com