Cookies

Deixe um comentário / Uncategorized / Por

Política de Cookies — NR Arquitetura

/* ═══════════════════════════════════════════════════════════════════════════
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 Cookies

Entenda como usamos cookies no nosso site.

O Que São Cookies?

Cookies são pequenos arquivos armazenados no seu navegador para melhorar sua experiência no site.

Tipos de Cookies que Usamos

Tipo Finalidade
Essenciais Funcionamento básico do site
Analíticos Entender como você usa o site
Marketing Personalizar conteúdo e anúncios

Sua Privacidade

Você pode controlar cookies nas configurações do seu navegador. Alguns cookies são essenciais; outros são opcionais.

Contato

Dúvidas? Contate: contato@nrarq.com

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *