/* * Mateus e Rosa — Design tokens * Extraídos do design Figma (node 160:2). Alterações centralizadas aqui refletem * em todo o tema. Nomes seguem padrão --mer-{categoria}-{papel}-{modifier}. */ :root { /* ─── Cores — marca ─────────────────────────────────────────────── */ --mer-color-primary: #00244d; /* Azul-marinho institucional (nav, texto principal) */ --mer-color-primary-800: #0d3461; /* Azul dos cards de testemunhos, botão Saiba mais */ --mer-color-primary-700: #143866; /* Azul do CTA Showroom */ --mer-color-primary-600: #1c315f; /* Azul do hero e bloco Profissionais */ --mer-color-primary-500: #264d73; /* Divider em cards escuros */ --mer-color-primary-100: #b2bfcc; /* Texto muted sobre azul escuro */ --mer-color-accent: #f5821f; /* Laranja accent principal (labels, texto CTA) */ --mer-color-accent-600: #e36b1e; /* Laranja CTA preenchido (Pedir Orçamento) */ --mer-color-accent-700: #e85d04; /* Laranja outline (borda + texto) */ --mer-color-accent-800: #924808; /* Laranja escuro — fim do gradiente do CTA final */ --mer-color-success: #3fb84f; /* Verde do badge Orçamento enviado */ --mer-color-success-soft: rgba(72, 191, 88, 0.7); /* ─── Cores — neutros ───────────────────────────────────────────── */ --mer-color-bg: #ffffff; --mer-color-bg-soft: #f7f6f4; /* Fundo bege/off-white da página */ --mer-color-bg-muted: #fafafa; /* Cards claros */ --mer-color-bg-placeholder: #e3e3e3; /* Placeholder de imagens */ --mer-color-bg-showroom: #aab0bc; /* Bloco Showroom */ --mer-color-text: #1a1a1a; --mer-color-text-strong: var(--mer-color-primary); --mer-color-text-muted: #9ca3af; --mer-color-text-subtle: #b8b7bc; /* Labels footer e "MARCAS PARCEIRAS" */ --mer-color-text-invert: #ffffff; --mer-color-text-invert-muted: rgba(255, 255, 255, 0.6); --mer-color-text-showroom: #3d3d40; --mer-color-text-copyright: #737278; --mer-color-border: #e6e6e6; --mer-color-border-dark: #1a2e52; /* Divider no footer azul */ --mer-color-overlay-hero: rgba(28, 49, 95, 0.4); /* Overlay da imagem do hero */ /* ─── Tipografia ────────────────────────────────────────────────── */ --mer-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mer-font-heading: var(--mer-font-body); --mer-fw-regular: 400; --mer-fw-medium: 500; --mer-fw-semibold: 600; --mer-fw-bold: 700; --mer-fw-extrabold: 800; /* Escala tipográfica — extraída dos tamanhos usados no design. */ --mer-fs-3xs: 10px; /* Copyright, links footer */ --mer-fs-2xs: 11px; /* Labels overline ("MARCAS PARCEIRAS", "SEDE") */ --mer-fs-xs: 12px; /* Top-bar, nav secundária */ --mer-fs-sm: 13px; /* Texto de apoio em cards */ --mer-fs-md: 14px; /* Meta, badges */ --mer-fs-base: 16px; /* Corpo padrão */ --mer-fs-lg: 17px; /* Título de category-card medium */ --mer-fs-xl: 18px; /* Subtítulo do hero */ --mer-fs-2xl: 20px; /* Subtítulo bloco Profissionais */ --mer-fs-3xl: 26px; /* Título de category-card large */ --mer-fs-4xl: 32px; /* Subtítulo Showroom */ --mer-fs-5xl: 42px; /* H2 de seção */ --mer-fs-6xl: 48px; /* Título Showroom */ --mer-fs-7xl: 64px; /* H1 hero, aspas dos testemunhos */ --mer-lh-tight: 1.1; --mer-lh-snug: 1.2; --mer-lh-normal: 1.5; --mer-lh-loose: 1.7; --mer-tracking-tight: -0.01em; --mer-tracking-normal: 0; --mer-tracking-caps: 0.2em; /* TESTEMUNHOS label */ --mer-tracking-caps-sm: 0.05em; /* "MARCAS PARCEIRAS" */ /* ─── Espaçamento — escala de múltiplos de 4 usada no design ────── */ --mer-space-0: 0; --mer-space-1: 4px; --mer-space-2: 6px; --mer-space-3: 8px; --mer-space-4: 12px; --mer-space-5: 16px; --mer-space-6: 20px; --mer-space-7: 24px; --mer-space-8: 32px; --mer-space-9: 48px; --mer-space-10: 64px; --mer-space-11: 80px; /* ─── Raios ─────────────────────────────────────────────────────── */ --mer-radius-xs: 4px; /* Botões outline no header */ --mer-radius-sm: 6px; /* CTA Pedir Orçamento */ --mer-radius-md: 8px; /* Ícones em cards small */ --mer-radius-lg: 16px; /* Cards de testemunhos */ --mer-radius-xl: 24px; /* Hero blocks, category cards */ --mer-radius-2xl: 32px; /* Wrapper do bloco Profissionais e CTA final */ --mer-radius-pill: 999px; /* ─── Breakpoints ─────────────────────────────────────────────────── * Escala responsiva canónica do tema. Fonte ÚNICA — todo @media usa * estes literais px, precedidos de um comentário de tier: * /* bp-lg *​/ @media (max-width: 1024px) { … } * * IMPORTANTE: custom properties NÃO funcionam dentro de @media (e não há * build step / PostCSS aqui). Logo estas variables servem apenas para o * JS (main.js lê --mer-bp-lg via getComputedStyle para o matchMedia do * drawer não divergir do CSS). Nos @media escreve-se o valor px literal. * * xl → 1200px laptop grande (gutters do container) * lg → 1024px tablet landscape — hambúrguer activa; grelhas 4→2 col * md → 768px tablet portrait * sm → 480px telemóvel — empilha tudo, botões full-width */ --mer-bp-xl: 1200px; --mer-bp-lg: 1024px; --mer-bp-md: 768px; --mer-bp-sm: 480px; /* ─── Layout ────────────────────────────────────────────────────── */ --mer-space-nav-h: 76px; /* espaço ocupado pela pill flutuante de ambientes (top + altura) — offset de scroll/scrollspy */ --mer-container-max: 1440px; --mer-container-pad: var(--mer-space-8); /* 32px lateral padrão */ --mer-section-pad-y: var(--mer-space-10); /* 64px vertical em blocos internos */ /* ─── Sombras / efeitos ─────────────────────────────────────────── */ --mer-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04); --mer-shadow-elevated:0 8px 24px rgba(0, 36, 77, 0.12); /* ─── Transições ────────────────────────────────────────────────── */ --mer-transition-fast: 120ms ease-out; --mer-transition-base: 200ms ease-out; /* ─── Gradientes recorrentes ────────────────────────────────────── */ --mer-gradient-cta: linear-gradient(180deg, var(--mer-color-accent) 0%, var(--mer-color-accent) 64%, var(--mer-color-accent-800) 100%); --mer-gradient-category-earth: linear-gradient(113deg, #b06138 29%, rgba(217, 217, 217, 0) 40%); --mer-gradient-category-slate: linear-gradient(113deg, #667185 29%, rgba(217, 217, 217, 0) 40%); }