/* ========================================================================= MINI DESIGN SYSTEM — Nyame dos Passos Nogueira · Psicólogo Extraído do layout de referência (PDF). Cores amostradas dos pixels. Como usar: 1. Importe este arquivo no topo do seu CSS/global. 2. Prefira SEMPRE os tokens semânticos (--color-*, --font-*, --space-*) no seu código. As "primitivas" (--green-900 etc.) são a fonte de verdade; troque o valor num lugar só e o site inteiro acompanha. ========================================================================= */ /* Fontes (Google Fonts). Se preferir, mova para o do HTML como — é ligeiramente mais rápido que o @import. */ @import url('https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Rethink+Sans:wght@400;500;600&display=swap'); :root { /* ---------------------------------------------------------------------- 1. PRIMITIVAS DE COR (valores amostrados do layout) ---------------------------------------------------------------------- */ /* Verdes de marca — usados como grandes fundos escuros */ --green-950: #1F2E26; /* borda/topo mais profundo do hero */ --green-900: #25372E; /* fundo escuro principal (hero, "Quem sou") */ --green-700: #37483F; /* verde intermediário (hover em fundo escuro) */ /* Sálvia — verde de destaque / interativo */ --sage-600: #446554; /* CTA/pílula sobre fundo escuro, ícones ativo */ --sage-400: #58685F; /* verde-acinzentado suave */ --sage-300: #68756E; /* borda discreta sobre escuro */ /* Neutros quentes (quase-preto) */ --ink-900: #242422; /* texto principal, botões escuros, rodapé */ --ink-700: #45372A; /* marrom-escuro sutil (detalhes) */ /* Cinzas neutros de texto */ --stone-500: #595954; /* texto secundário / ícones no fundo claro */ --stone-400: #83807A; /* texto terciário / legendas */ /* Cremes — fundos e superfícies claras */ --cream-50: #EAE8DC; /* fundo de página (claro) */ --cream-100: #E0DECC; /* superfície quente (cards, painéis) */ --cream-200: #E6E4D6; /* creme alternativo (hover/realce sutil) */ --cream-border: #D8D6C6;/* borda hairline sobre creme */ /* Claros sobre fundo escuro */ --on-dark-50: #E3E8E5; /* título/heading sobre escuro (mais claro) */ --on-dark-100: #E0DECC; /* texto/título sobre escuro */ --on-dark-300: #B6C3BB; /* texto secundário sobre escuro */ --on-dark-500: #8F9D95; /* texto terciário sobre escuro */ /* Sálvias adicionais */ --sage-500: #789185; /* eyebrow ativo sobre fundo escuro */ --sage-200: #B6CEC1; /* CTA claro sobre fundo escuro */ /* Stone extra */ --stone-450: #878578; /* eyebrow em fundo claro (warm muted) */ /* Cream border variante forte */ --cream-border-strong: #CDCCC6; /* stroke denso para cards */ /* ---------------------------------------------------------------------- 2. TOKENS SEMÂNTICOS DE COR (use ESTES no seu markup) ---------------------------------------------------------------------- */ /* Superfícies */ --color-bg: var(--cream-50); /* fundo padrão da página */ --color-surface: var(--cream-100); /* cards e painéis */ --color-surface-alt: var(--cream-200); /* realce/hover de superfície */ --color-bg-dark: var(--green-900); /* seções escuras full-bleed */ --color-bg-footer: var(--ink-900); /* rodapé */ /* Texto sobre claro */ --color-heading: var(--ink-900); --color-text: var(--ink-900); --color-text-muted: var(--stone-500); --color-text-subtle: var(--stone-400); /* Texto sobre escuro */ --color-title-on-dark: var(--on-dark-50); /* headings h1/h2/h3 sobre escuro */ --color-text-on-dark: var(--on-dark-100); --color-text-on-dark-muted: var(--on-dark-300); /* Eyebrows */ --color-eyebrow: var(--stone-450); /* eyebrow sobre fundo claro */ --color-eyebrow-on-dark: var(--sage-500); /* eyebrow sobre fundo escuro */ /* Botão sobre fundo escuro (CTA claro) */ --color-btn-on-dark-bg: var(--sage-200); --color-btn-on-dark-fg: var(--green-900); /* Destaque / interativo */ --color-accent: var(--sage-600); --color-accent-hover: var(--green-700); /* Bordas */ --color-border: var(--cream-border); --color-border-strong: var(--cream-border-strong); /* stroke de cards */ --color-border-on-dark: rgba(224, 222, 204, 0.22); /* pílulas outline no hero */ /* Foco (acessibilidade) */ --color-focus-ring: var(--sage-600); /* ---------------------------------------------------------------------- 3. TIPOGRAFIA Títulos: serifada com itálico nos destaques. Corpo: sans-serif humanista. Ajuste as famílias para as fontes reais do projeto; abaixo vão equivalentes web próximos à referência. ---------------------------------------------------------------------- */ --font-serif: "Gelasio", Georgia, "Times New Roman", serif; --font-sans: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: var(--font-serif); --font-body: var(--font-sans); /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Escala tipográfica (base 16px, ritmo ~1.2–1.25) */ --fs-eyebrow: 0.75rem; /* 12px — rótulos MAIÚSCULOS de seção */ --fs-sm: 0.875rem; /* 14px — legendas */ --fs-body: 1rem; /* 16px — corpo */ --fs-lead: 1.125rem; /* 18px — parágrafo de abertura */ --fs-h3: 1.375rem; /* 22px — título de card */ --fs-h2: 2rem; /* 32px — título de seção */ --fs-h1: 2.75rem; /* 44px — título do hero */ /* Altura de linha */ --lh-tight: 1.15; /* títulos */ --lh-snug: 1.35; --lh-normal: 1.6; /* corpo */ /* Espaçamento entre letras */ --ls-eyebrow: 0.14em; /* rótulos maiúsculos bem espaçados */ --ls-heading: -0.02em; /* títulos (Gelasio) — -2% */ --ls-body: 0.005em; /* textos corridos (Rethink Sans) — +0.5% */ /* ---------------------------------------------------------------------- 4. ESPAÇAMENTO (escala 4px) ---------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 7rem; /* 112px — respiro vertical entre seções */ /* ---------------------------------------------------------------------- 5. RAIO DE BORDA ---------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; /* cards */ --radius-lg: 24px; /* painéis grandes / imagens */ --radius-pill: 999px; /* botões e tags */ /* ---------------------------------------------------------------------- 6. SOMBRAS (discretas — o layout usa profundidade sutil) ---------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(36, 36, 34, 0.06); --shadow-md: 0 6px 20px rgba(36, 36, 34, 0.08); /* ---------------------------------------------------------------------- 7. LAYOUT ---------------------------------------------------------------------- */ --container-max: 1120px; --container-pad: var(--space-5); /* Transição padrão */ --transition: 160ms ease; } /* ========================================================================= CLASSES-BASE DE COMPONENTE Opcionais — mostram como os tokens se combinam nos padrões do layout. ========================================================================= */ /* Container centralizado */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Seção clara / escura */ .section { padding-block: var(--space-16); } .section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); } .section--dark .eyebrow { color: var(--on-dark-500); } /* Eyebrow — rótulo de seção em maiúsculas */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); } /* Títulos */ .h1 { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--color-heading); font-weight: var(--fw-regular); } .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--color-heading); font-weight: var(--fw-regular); } .h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); color: var(--color-heading); font-weight: var(--fw-medium); } /* Destaque em itálico dentro dos títulos (como na referência) */ .h1 em, .h2 em { font-style: italic; } /* Corpo */ .lead { font-size: var(--fs-lead); line-height: var(--lh-normal); letter-spacing: var(--ls-body); color: var(--color-text-muted); } .body { font-size: var(--fs-body); line-height: var(--lh-normal); letter-spacing: var(--ls-body); color: var(--color-text-muted); } /* Botão — pílula */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--transition), color var(--transition); } /* Primário sobre fundo claro: pílula escura */ .btn--primary { background: var(--ink-900); color: var(--cream-50); } .btn--primary:hover { background: var(--green-900); } /* Sobre fundo escuro: pílula sálvia */ .btn--on-dark { background: var(--sage-600); color: var(--cream-50); } .btn--on-dark:hover { background: var(--green-700); } /* Tag / chip outline (usado no hero) */ .tag { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-on-dark-muted); } /* Card — superfície creme quente */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); } .card__icon { color: var(--color-accent); margin-bottom: var(--space-4); } .card__title { margin-bottom: var(--space-3); } /* Foco visível para teclado */ :where(a, button, .btn):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }