/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Design System — Inspirali Pós Foundations as design tokens in three layers (primitives → semantic → component) plus brand @font-face. Loaded first so the custom properties (--ip-*, --color-*, --type-*, component tokens) are available to every rule below. See tokens/ and the Style Guide handoff for the full system. The HubSpot theme fields are bridged onto these tokens in theme-overrides.css. Brand fonts (museo, din-2014-rounded-variable) são AUTO-HOSPEDADAS via @font-face em generic/_fonts.css (incluído primeiro, abaixo). Não há mais dependência do Adobe Fonts/Typekit. */ /* Fontes da marca Inspirali Pós — AUTO-HOSPEDADAS no HubSpot (File Manager). Substituem o Adobe Fonts/Typekit: elimina um terceiro render-blocking no . `font-display: swap` pinta o texto na hora com fallback e troca quando a fonte chega. Nomes de família idênticos aos tokens (--ip-font-din / --ip-font-museo). Formato: .woff2 (primário, ~55-75% menor) + .otf (fallback). Enquanto o woff2 propaga no CDN o navegador usa o .otf; depois passa a usar o woff2 sozinho. */ /* ---- DIN Round Pro → família "din-2014-rounded-variable" (corpo) ---- */ @font-face { font-family: "din-2014-rounded-variable"; font-style: normal; font-weight: 300; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/dinroundpro-light.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/dinroundpro-light.otf") format("opentype"); } @font-face { font-family: "din-2014-rounded-variable"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/dinroundpro.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/dinroundpro.otf") format("opentype"); } @font-face { font-family: "din-2014-rounded-variable"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/dinroundpro-medi.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/dinroundpro-medi.otf") format("opentype"); } @font-face { font-family: "din-2014-rounded-variable"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/dinroundpro-bold.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/dinroundpro-bold.otf") format("opentype"); } @font-face { font-family: "din-2014-rounded-variable"; font-style: normal; font-weight: 900; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/dinroundpro-black.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/dinroundpro-black.otf") format("opentype"); } /* ---- Museo → família "museo" (títulos) ---- */ @font-face { font-family: "museo"; font-style: normal; font-weight: 300; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/Museo300-Regular.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/Museo300-Regular.otf") format("opentype"); } @font-face { font-family: "museo"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/51445302/Museo700-Regular.woff2") format("woff2"), url("https://51445302.fs1.hubspotusercontent-na1.net/hubfs/51445302/Museo700-Regular.otf") format("opentype"); } /* ============================================================ CAMADA 1 — TOKENS PRIMITIVOS Valores brutos. Nunca referenciados direto na UI; use os tokens semânticos (camada 2) ou de componente (camada 3). Nomenclatura: --ip-- ip = Inspirali Pós (prefixo de namespace do design system) ============================================================ */ :root { /* -------------------------------------------------------- CORES — escalas de tonalidade 50 (claro) → 900 (escuro) Âncoras extraídas do Manual de Identidade Visual (MIV) e normalizadas a partir da home no Figma. -------------------------------------------------------- */ /* Azul cinza (MIV) — PALETA INSTITUCIONAL ESTENDIDA, não prioritária. Presente na paleta ampla (pg.15) e na home do Figma, mas fora das cores preferenciais da Inspirali Pós (pg.16). Usar com parcimônia. Tons 300/400/500 confirmados nos gradientes da home. */ --ip-teal-50: #eef4f5; --ip-teal-100: #d8e6e8; --ip-teal-200: #b9d3d7; --ip-teal-300: #8dbcc4; /* rgb(141,188,196) — home */ --ip-teal-400: #7eacb4; /* rgb(126,172,180) — home */ --ip-teal-500: #679299; /* rgb(103,146,153) — home */ --ip-teal-600: #5e8f97; /* MIV "azul cinza" — canônico */ --ip-teal-700: #4e767d; --ip-teal-800: #3d5c61; --ip-teal-900: #2c4347; /* Sage / Cinza-esverdeado — COR DE APOIO / SECUNDÁRIA (MIV "cinza esverdeado" #818875, pg.16). Única cor de caráter na paleta preferencial. */ --ip-sage-50: #f3f4f1; --ip-sage-100: #e6e8e1; --ip-sage-200: #d2d5c9; --ip-sage-300: #bdc0b3; /* rgb(189,192,179) — home */ --ip-sage-400: #9da28d; --ip-sage-500: #848977; /* rgb(132,137,119) — home */ --ip-sage-600: #818875; /* MIV "cinza esverdeado" — canônico */ --ip-sage-700: #6f7464; --ip-sage-800: #50544a; --ip-sage-900: #34362f; /* Neutros frios — escala "tinta" da marca. Contém as cores PRINCIPAIS (MIV pg.16): cinza escuro #313032 (primária) e cinza gelo #E2E7E9. */ --ip-neutral-50: #f7f8f8; --ip-neutral-100: #e2e7e9; /* MIV "cinza gelo" */ --ip-neutral-200: #d9d9d9; /* rgb(217,217,217) — home */ --ip-neutral-300: #c2c3c5; --ip-neutral-400: #9a9a9c; --ip-neutral-500: #707072; --ip-neutral-600: #606060; /* rgb(96,96,96) — cor de texto mais usada */ --ip-neutral-700: #4a4a4b; --ip-neutral-800: #373737; /* rgb(55,55,55) — home */ --ip-neutral-900: #313032; /* MIV "cinza escuro" — tinta principal */ --ip-neutral-950: #1a1a1b; /* Neutros quentes / Stone — taupes da marca, cores PRINCIPAIS e de apoio (MIV pg.16): cinza médio #7A6F66 (principal), cinza bege #CCCAC0 (apoio), cinza quente #92867D. */ --ip-stone-50: #f6f4f2; --ip-stone-100: #ece9e5; --ip-stone-200: #dad5ce; --ip-stone-300: #cccac0; /* MIV "cinza bege" */ --ip-stone-400: #a99e94; --ip-stone-500: #92867d; /* MIV "cinza quente" */ --ip-stone-600: #7a6f66; /* MIV "cinza médio" */ --ip-stone-700: #565046; /* rgb(86,80,70) — home */ --ip-stone-800: #423d36; --ip-stone-900: #2c2924; /* -------------------------------------------------------- CORES FUNCIONAIS / SECUNDÁRIAS (MIV) Usadas como apoio e para estados do sistema. -------------------------------------------------------- */ --ip-green-600: #0f6e3f; /* MIV "verde" */ --ip-green-700: #007642; /* MIV variação escura */ --ip-green-100: #dceee4; --ip-orange-500: #f79520; /* MIV "laranja" */ --ip-orange-700: #aa5706; /* MIV área "burnt" */ --ip-orange-100: #fdecd5; --ip-mustard-500: #b19437; /* MIV "mostarda" */ --ip-mustard-100: #f3ecd3; --ip-purple-500: #876898; /* MIV "magenta escuro" */ --ip-blue-500: #4767d7; /* MIV área "azul" */ --ip-blue-100: #dde2f8; --ip-red-500: #ce3b2e; /* DERIVADO — ver decisões/premissas */ --ip-red-100: #f8dedb; /* Cores das 11 áreas do conhecimento (MIV pág. 17) */ --ip-area-crianca: #bc85de; /* Saúde da Criança e do Adolescente */ --ip-area-imagem: #4767d7; /* Saúde em Imagem e Diagnóstico */ --ip-area-mulher: #0d616e; /* Saúde da Mulher */ --ip-area-coracao: #f79520; /* Saúde do Coração */ --ip-area-pele: #92867d; /* Saúde da Pele e Estética */ --ip-area-metabolica: #818875; /* Saúde Metabólica e Performance */ --ip-area-digestiva: #b19437; /* Saúde Digestiva */ --ip-area-idoso: #aa5706; /* Saúde do Idoso */ --ip-area-gestao: #0f6e3f; /* Saúde focada em Gestão e Tecnologia */ --ip-area-clinica: #5e8f97; /* Saúde Clínica */ --ip-area-mental: #876898; /* Saúde Mental e Comportamental */ /* Branco / preto puros */ --ip-white: #ffffff; --ip-black: #000000; --ip-paper: #fefefe; /* rgb(254,254,254) — fundo de página no Figma */ /* -------------------------------------------------------- TIPOGRAFIA — primitivos -------------------------------------------------------- */ /* Fontes servidas via Adobe Fonts (Typekit, link no ). din-2014-rounded-variable = DIN Round Pro (variável 200–900); museo = Museo (300/700). */ --ip-font-din: "din-2014-rounded-variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ip-font-museo: "museo", Georgia, "Times New Roman", serif; --ip-weight-light: 300; --ip-weight-regular:400; --ip-weight-medium: 500; --ip-weight-bold: 700; --ip-weight-black: 900; /* Tamanhos base — nomenclatura Tailwind */ --ip-text-xs: 0.75rem; /* 12px */ --ip-text-sm: 0.875rem; /* 14px */ --ip-text-base: 1rem; /* 16px */ --ip-text-lg: 1.125rem; /* 18px */ --ip-text-xl: 1.25rem; /* 20px */ --ip-text-2xl: 1.5rem; /* 24px */ --ip-text-3xl: 1.875rem; /* 30px */ --ip-text-4xl: 2.5rem; /* 40px */ --ip-text-5xl: 3rem; /* 48px */ --ip-text-6xl: 3.75rem; /* 60px */ --ip-text-7xl: 4rem; /* 64px */ /* Altura de linha */ --ip-leading-none: 1; --ip-leading-tight: 1.1; --ip-leading-snug: 1.25; --ip-leading-normal: 1.4; --ip-leading-relaxed: 1.6; /* Espaçamento entre letras */ --ip-tracking-tighter: -0.02em; --ip-tracking-tight: -0.01em; --ip-tracking-normal: 0em; --ip-tracking-wide: 0.04em; --ip-tracking-wider: 0.12em; /* overline */ /* -------------------------------------------------------- ESPAÇAMENTO — escala base 4 -------------------------------------------------------- */ --ip-space-0: 0; --ip-space-1: 0.25rem; /* 4 */ --ip-space-2: 0.5rem; /* 8 */ --ip-space-3: 0.75rem; /* 12 */ --ip-space-4: 1rem; /* 16 */ --ip-space-5: 1.25rem; /* 20 */ --ip-space-6: 1.5rem; /* 24 */ --ip-space-8: 2rem; /* 32 */ --ip-space-10: 2.5rem; /* 40 */ --ip-space-12: 3rem; /* 48 */ --ip-space-16: 4rem; /* 64 */ --ip-space-20: 5rem; /* 80 */ --ip-space-24: 6rem; /* 96 */ --ip-space-32: 8rem; /* 128 */ /* -------------------------------------------------------- RAIO DE BORDA — extraído da home (13 / 20 / 28 / 40 / pill) -------------------------------------------------------- */ --ip-radius-xs: 6px; --ip-radius-sm: 8px; --ip-radius-md: 13px; /* inputs, cards pequenos */ --ip-radius-lg: 20px; /* cards, botões largos */ --ip-radius-xl: 28px; /* cards de destaque, imagens */ --ip-radius-2xl: 40px; /* blocos grandes */ --ip-radius-full: 9999px; /* pílulas, avatares */ /* -------------------------------------------------------- SOMBRA E ELEVAÇÃO — sombras suaves multicamada da home -------------------------------------------------------- */ --ip-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.06); --ip-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06); --ip-shadow-md: -7px 10px 7px 0 rgba(0,0,0,0.04), -3px 4px 6px 0 rgba(0,0,0,0.08), -1px 1px 3px 0 rgba(0,0,0,0.12); --ip-shadow-lg: -13px 18px 9px 0 rgba(0,0,0,0.03), -7px 10px 7px 0 rgba(0,0,0,0.10), -3px 4px 6px 0 rgba(0,0,0,0.17), -1px 1px 3px 0 rgba(0,0,0,0.20); --ip-shadow-xl: 15px 34px 22px 0 rgba(0,0,0,0.06), 7px 15px 16px 0 rgba(0,0,0,0.12), 2px 4px 9px 0 rgba(0,0,0,0.18); /* -------------------------------------------------------- GRID E BREAKPOINTS -------------------------------------------------------- */ --ip-container-sm: 640px; --ip-container-md: 768px; --ip-container-lg: 1024px; --ip-container-xl: 1280px; --ip-container-2xl: 1440px; /* teto full-bleed (faixas / fundos) */ --ip-content-max: 1390px; /* área de conteúdo (frame do Figma); tabela ≈1349 dentro com ~20px de respiro */ --ip-grid-columns: 12; /* @kind other */ --ip-grid-gutter: 24px; --ip-grid-margin: clamp(20px, 5vw, 96px); --ip-grid-gutter-cards: 74px; /* gutter de grids de 3 cards iguais (.grid-3). Exceções Figma: courses-showcase usa 69px (linha cards+CTA) e 43px (track de cursos) — ver modules-bundle.css */ /* Respiro lateral da área de conteúdo (.container/.content-wrapper) */ --ip-section-pad-x: var(--ip-space-5); /* 20px — desktop/tablet */ --ip-section-pad-x-mobile: var(--ip-space-6); /* 24px — aplicado localmente onde o frame mobile pede (ex.: footer) */ /* Breakpoints (para referência em media queries) */ --ip-bp-sm: 640px; --ip-bp-md: 768px; --ip-bp-lg: 1024px; --ip-bp-xl: 1280px; --ip-bp-2xl: 1536px; /* -------------------------------------------------------- TAMANHOS DE ÍCONE -------------------------------------------------------- */ --ip-icon-xs: 16px; --ip-icon-sm: 20px; --ip-icon-md: 24px; --ip-icon-lg: 32px; --ip-icon-xl: 48px; /* Glifo de seta-à-direita (Phosphor arrow-right) como SVG inline, para usar como mask-image onde não dá pra carregar a fonte de ícones (ex.: pseudo- elementos em CSS crítico, como a seta do CTA do header). A cor vem do elemento via background-color/currentColor. */ --ip-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32z'/%3E%3C/svg%3E"); /* -------------------------------------------------------- GRADIENTES DA MARCA ink = CTA principal (sóbrio, alinhado ao MIV). brand (sage + azul cinza) = apoio/estendido, herdado da home. -------------------------------------------------------- */ --ip-gradient-brand: linear-gradient(68deg, var(--ip-sage-500) -1%, var(--ip-sage-300) 119%), linear-gradient(77deg, var(--ip-teal-500) -14%, var(--ip-teal-300) 149%); --ip-gradient-brand-soft: linear-gradient(44deg, var(--ip-sage-500) -20%, var(--ip-sage-300) 143%); --ip-gradient-ink: linear-gradient(235deg, #3b3b3b 9%, var(--ip-neutral-900) 104%); --ip-gradient-ink-soft: linear-gradient(234deg, #6b6b6b 5%, var(--ip-neutral-900) 79%); /* selo = degradê tinta padrão dos selos promocionais "always on" (texto/ícone em laranja --ip-orange-500). Campanhas trocam o fundo por degradê ou PNG próprios via custom property inline no card. */ --ip-gradient-selo: linear-gradient(95deg, #1a1a1b 0%, #3a3a3d 100%); } /* ============================================================ CAMADA 2 — TOKENS SEMÂNTICOS (intenção de uso) Mapeiam primitivos para função. A UI consome ESTES tokens, nunca os primitivos diretamente. Nomenclatura: --color-[-] ============================================================ */ :root { /* ---- Marca ---- Hierarquia conforme MIV pg.16 ("Usos preferenciais de Cores"): cores principais = neutros (cinza escuro / médio / gelo); cor de apoio = cinza esverdeado (sage). O azul cinza NÃO é prioritário para a Inspirali Pós — fica como paleta estendida. */ --color-primary: var(--ip-neutral-900); /* cinza escuro #313032 */ --color-primary-hover: var(--ip-neutral-800); --color-primary-active: var(--ip-neutral-950); --color-primary-subtle: var(--ip-neutral-100); /* cinza gelo */ --color-primary-contrast: var(--ip-white); --color-secondary: var(--ip-sage-600); /* cinza esverdeado #818875 — apoio */ --color-secondary-hover: var(--ip-sage-700); --color-secondary-active: var(--ip-sage-800); --color-secondary-subtle: var(--ip-sage-50); --color-secondary-contrast: var(--ip-white); --color-accent: var(--ip-stone-600); /* cinza médio #7A6F66 — neutro quente de apoio */ --color-accent-hover: var(--ip-stone-700); --color-accent-subtle: var(--ip-stone-100); --color-accent-contrast: var(--ip-white); /* ---- Superfícies e fundos ---- */ --color-bg: var(--ip-paper); /* fundo de página */ --color-bg-subtle: var(--ip-neutral-50); /* seções alternadas claras */ --color-bg-inverse: var(--ip-neutral-900); /* seções escuras (hero, faixas) */ --color-surface: var(--ip-white); /* cards padrão */ --color-surface-subtle:var(--ip-neutral-50); --color-surface-sunken:var(--ip-neutral-100); /* gelo — inputs, trilhas */ --color-surface-inverse: var(--ip-neutral-800); /* cards sobre fundo escuro */ /* ---- Texto ---- */ --color-text: var(--ip-neutral-900); /* títulos / texto forte */ --color-text-body: var(--ip-neutral-600); /* corpo (#606060) */ --color-text-muted: var(--ip-neutral-500); /* secundário / legendas */ --color-text-subtle: var(--ip-neutral-400); /* placeholder, desabilitado */ --color-text-on-brand: var(--ip-white); --color-text-inverse: var(--ip-neutral-100); /* texto sobre fundo escuro */ --color-text-inverse-muted: var(--ip-stone-300); --color-link: var(--ip-stone-700); /* #565046 — 7.98:1 ✓ AAA */ --color-link-hover: var(--ip-neutral-900); /* ---- Bordas ---- */ --color-border: var(--ip-neutral-200); /* borda padrão */ --color-border-subtle: #ededed; /* divisórias leves */ --color-border-strong: var(--ip-neutral-400); --color-border-inverse: rgba(255,255,255,0.16); --color-focus-ring: var(--ip-sage-600); /* ---- Estados do sistema ---- */ --color-success: var(--ip-green-600); --color-success-subtle: var(--ip-green-100); --color-warning: var(--ip-orange-500); --color-warning-subtle: var(--ip-orange-100); --color-error: var(--ip-red-500); --color-error-subtle: var(--ip-red-100); --color-info: var(--ip-blue-500); --color-info-subtle: var(--ip-blue-100); /* ---- Gradientes semânticos ---- CTA principal = tinta (sóbrio, alinhado ao MIV). O gradiente sage+teal vira apoio/estendido. */ --gradient-cta: var(--ip-gradient-ink); --gradient-ink: var(--ip-gradient-ink); --gradient-accent: var(--ip-gradient-brand); /* sage + azul cinza — estendido */ --gradient-selo: var(--ip-gradient-selo); /* faixa padrão dos selos promocionais */ /* ---- Elevação semântica ---- */ --elevation-flat: none; --elevation-raised: var(--ip-shadow-md); --elevation-overlay:var(--ip-shadow-lg); --elevation-modal: var(--ip-shadow-xl); /* ---- HubSpot theme fields (exposição explícita) ---- */ --primary_color: var(--ip-neutral-900); /* cinza escuro #313032 */ --secondary_color: var(--ip-sage-600); /* cinza esverdeado #818875 */ --heading_font: var(--ip-font-museo); --body_font: var(--ip-font-din); } /* ============================================================ TIPOGRAFIA — escala modular (intenção) Famílias: títulos = Museo · corpo = DIN Round Pro Cada papel expõe família, tamanho, peso, altura e tracking. Nomes Tailwind-compatíveis nas observações. ============================================================ */ :root { /* Display — manifestos / hero gigante (Museo 700, text-7xl) */ --type-display-font: var(--ip-font-museo); --type-display-size: var(--ip-text-7xl); --type-display-weight: var(--ip-weight-bold); --type-display-leading: var(--ip-leading-tight); --type-display-tracking:var(--ip-tracking-tight); /* H1 (Museo 700, text-5xl) */ --type-h1-font: var(--ip-font-museo); --type-h1-size: var(--ip-text-5xl); --type-h1-weight: var(--ip-weight-bold); --type-h1-leading: var(--ip-leading-tight); --type-h1-tracking:var(--ip-tracking-tight); /* H2 (Museo 700, text-4xl) */ --type-h2-font: var(--ip-font-museo); --type-h2-size: var(--ip-text-4xl); --type-h2-weight: var(--ip-weight-bold); --type-h2-leading: var(--ip-leading-snug); --type-h2-tracking:var(--ip-tracking-tight); /* H3 (Museo 700, text-3xl) */ --type-h3-font: var(--ip-font-museo); --type-h3-size: var(--ip-text-3xl); --type-h3-weight: var(--ip-weight-bold); --type-h3-leading: var(--ip-leading-snug); --type-h3-tracking:var(--ip-tracking-normal); /* H4 (Museo 700, text-2xl) */ --type-h4-font: var(--ip-font-museo); --type-h4-size: var(--ip-text-2xl); --type-h4-weight: var(--ip-weight-bold); --type-h4-leading: var(--ip-leading-snug); --type-h4-tracking:var(--ip-tracking-normal); /* H5 (DIN 700, text-xl) */ --type-h5-font: var(--ip-font-din); --type-h5-size: var(--ip-text-xl); --type-h5-weight: var(--ip-weight-bold); --type-h5-leading: var(--ip-leading-snug); --type-h5-tracking:var(--ip-tracking-normal); /* H6 (DIN 700, text-lg) */ --type-h6-font: var(--ip-font-din); --type-h6-size: var(--ip-text-lg); --type-h6-weight: var(--ip-weight-bold); --type-h6-leading: var(--ip-leading-normal); --type-h6-tracking:var(--ip-tracking-normal); /* Corpo grande (DIN 400, text-xl) */ --type-body-lg-font: var(--ip-font-din); --type-body-lg-size: var(--ip-text-xl); --type-body-lg-weight: var(--ip-weight-regular); --type-body-lg-leading: var(--ip-leading-relaxed); --type-body-lg-tracking:var(--ip-tracking-normal); /* Corpo médio — padrão (DIN 400, text-lg) */ --type-body-md-font: var(--ip-font-din); --type-body-md-size: var(--ip-text-lg); --type-body-md-weight: var(--ip-weight-regular); --type-body-md-leading: var(--ip-leading-relaxed); --type-body-md-tracking:var(--ip-tracking-normal); /* Corpo pequeno (DIN 400, text-base) */ --type-body-sm-font: var(--ip-font-din); --type-body-sm-size: var(--ip-text-base); --type-body-sm-weight: var(--ip-weight-regular); --type-body-sm-leading: var(--ip-leading-normal); --type-body-sm-tracking:var(--ip-tracking-normal); /* Legenda (DIN 400, text-sm) */ --type-caption-font: var(--ip-font-din); --type-caption-size: var(--ip-text-sm); --type-caption-weight: var(--ip-weight-regular); --type-caption-leading: var(--ip-leading-normal); --type-caption-tracking:var(--ip-tracking-normal); /* Overline (DIN 500, text-xs, maiúsculas, tracking largo) */ --type-overline-font: var(--ip-font-din); --type-overline-size: var(--ip-text-xs); --type-overline-weight: var(--ip-weight-medium); --type-overline-leading: var(--ip-leading-normal); --type-overline-tracking:var(--ip-tracking-wider); } /* ---- Classes utilitárias (opcionais) ---- Atalhos para aplicar um papel tipográfico inteiro. */ .ip-display { font-family: var(--type-display-font); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); } .ip-h1 { font-family: var(--type-h1-font); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); } .ip-h2 { font-family: var(--type-h2-font); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); } .ip-h3 { font-family: var(--type-h3-font); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); } .ip-h4 { font-family: var(--type-h4-font); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-tracking); } .ip-h5 { font-family: var(--type-h5-font); font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-leading); letter-spacing: var(--type-h5-tracking); } .ip-h6 { font-family: var(--type-h6-font); font-size: var(--type-h6-size); font-weight: var(--type-h6-weight); line-height: var(--type-h6-leading); letter-spacing: var(--type-h6-tracking); } .ip-body-lg { font-family: var(--type-body-lg-font); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-leading); } .ip-body-md { font-family: var(--type-body-md-font); font-size: var(--type-body-md-size); font-weight: var(--type-body-md-weight); line-height: var(--type-body-md-leading); } .ip-body-sm { font-family: var(--type-body-sm-font); font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-leading); } .ip-caption { font-family: var(--type-caption-font); font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-leading); } .ip-overline { font-family: var(--type-overline-font); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); line-height: var(--type-overline-leading); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; } /* ============================================================ CAMADA 3 — TOKENS DE COMPONENTE Valores aplicados a componentes recorrentes, com todos os estados (padrão, hover, ativo, foco, desabilitado). Referenciam SEMPRE a camada semântica. Nomenclatura: ---[-] ============================================================ */ :root { /* ---------------- BOTÃO ---------------- */ /* Primário — tinta (sóbrio, cor principal #313032). CTA padrão da marca. */ --btn-primary-bg: var(--gradient-cta); --btn-primary-bg-hover: var(--ip-gradient-ink-soft); --btn-primary-text: var(--ip-neutral-100); --btn-primary-text-active: var(--ip-white); --btn-primary-shadow: var(--ip-shadow-md); --btn-primary-ring: var(--color-focus-ring); /* Acento — sage / cinza esverdeado (cor de apoio). */ --btn-accent-bg: var(--ip-sage-600); --btn-accent-bg-hover: var(--ip-sage-700); --btn-accent-text: var(--ip-white); /* Tinta sólida — alternativa chapada ao primário. */ --btn-ink-bg: var(--ip-neutral-900); --btn-ink-bg-hover: var(--ip-neutral-800); --btn-ink-text: var(--ip-neutral-100); /* Secundário — contorno */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--ip-neutral-50); --btn-secondary-border: var(--ip-stone-500); --btn-secondary-text: var(--ip-neutral-900); --btn-secondary-text-hover: var(--ip-stone-600); /* Fantasma / texto */ --btn-ghost-bg-hover: var(--ip-neutral-100); --btn-ghost-text: var(--ip-neutral-700); /* Desabilitado (todas as variações) */ --btn-disabled-bg: var(--ip-neutral-200); --btn-disabled-text: var(--ip-neutral-400); --btn-disabled-opacity: 0.55; /* @kind other */ /* Geometria do botão */ --btn-radius: var(--ip-radius-full); --btn-radius-square: var(--ip-radius-lg); --btn-font: var(--ip-font-din); --btn-weight: var(--ip-weight-medium); --btn-padding-y: 0.75rem; --btn-padding-x: 1.5rem; --btn-padding-y-sm: 0.5rem; --btn-padding-x-sm: 1rem; --btn-padding-y-lg: 1rem; --btn-padding-x-lg: 2rem; --btn-gap: 0.5rem; /* Tracking por tamanho (DS Botão: sm .01em · md .005em · lg 0) */ --btn-tracking-sm: 0.01em; --btn-tracking-md: 0.005em; --btn-tracking-lg: 0; /* Cores de área — sotaque do botão. Cada modificador .button--area- define estes três; o texto é escolhido para passar WCAG AA (ver README): --btn-area-color: cor da área (preenchimento / borda) --btn-area-text: texto no botão PREENCHIDO (tinta p/ áreas claras) --btn-area-outline-text: texto no botão de CONTORNO sobre branco */ --btn-area-color: var(--ip-sage-600); --btn-area-text: var(--ip-white); --btn-area-outline-text: var(--ip-neutral-900); --btn-area-hover-bright: 0.94; /* DS Button.jsx: hover de preenchido = brightness(.94) */ /* ---------------- INPUT / CAMPOS ---------------- */ --input-bg: var(--ip-white); --input-bg-disabled: var(--ip-neutral-100); --input-text: var(--ip-neutral-900); --input-placeholder: var(--ip-neutral-400); --input-border: var(--ip-neutral-200); /* #d9d9d9 */ --input-border-hover: var(--ip-stone-400); --input-border-focus: var(--ip-sage-600); --input-border-error: var(--ip-red-500); --input-ring-focus: rgba(129,136,117,0.28); --input-radius: var(--ip-radius-md); /* 13px */ --input-padding-y: 0.75rem; --input-padding-x: 1rem; --input-font: var(--ip-font-din); --input-shadow: inset 0 0 0 1px var(--input-border); --input-shadow-focus: inset 0 0 0 1px var(--input-border-focus), 0 0 0 3px var(--input-ring-focus); /* ---------------- CARD ---------------- */ --card-bg: var(--ip-white); --card-bg-inverse: var(--ip-neutral-800); --card-border: var(--ip-neutral-200); --card-radius: var(--ip-radius-xl); /* 28px */ --card-radius-sm: var(--ip-radius-md); --card-padding: var(--ip-space-8); --card-shadow: var(--ip-shadow-md); --card-shadow-hover: var(--ip-shadow-lg); /* ---------------- BADGE / TAG ---------------- */ --badge-radius: var(--ip-radius-full); --badge-font: var(--ip-font-din); --badge-weight: var(--ip-weight-medium); --badge-padding-y: 0.25rem; --badge-padding-x: 0.75rem; --badge-neutral-bg: var(--ip-neutral-100); --badge-neutral-text: var(--ip-neutral-700); --badge-brand-bg: var(--ip-sage-50); --badge-brand-text: var(--ip-sage-800); /* ---------------- NAV / HEADER ---------------- */ --nav-bg: var(--ip-neutral-900); --nav-text: var(--ip-neutral-100); --nav-text-hover: var(--ip-white); --nav-height: 80px; /* Header transparente sobre o hero → sólido ao rolar (ver _header.css + theme-overrides.css §Header). #313032 = tinta/ink do MIV. */ --nav-bg-solid: var(--ip-neutral-900); /* #313032 tinta */ --nav-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); --nav-text-idle: rgba(255, 255, 255, 0.78); /* link inativo */ --nav-text-active: var(--ip-white); /* link ativo */ --nav-underline: var(--ip-sage-300); /* sublinhado do ativo */ /* ---------------- AVATAR ---------------- */ --avatar-radius: var(--ip-radius-full); --avatar-ring: var(--ip-neutral-200); /* ---------------- TOOLTIP / DIALOG ---------------- */ --tooltip-bg: var(--ip-neutral-900); --tooltip-text: var(--ip-neutral-100); --tooltip-radius: var(--ip-radius-sm); --dialog-bg: var(--ip-white); --dialog-radius: var(--ip-radius-xl); --dialog-shadow: var(--ip-shadow-xl); --dialog-scrim: rgba(49,48,50,0.55); } /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* -------------------------------------------------------- CONTAINER — área de conteúdo (1390) centralizada .container é alias real de .content-wrapper: mesma régua, uma regra só. Faixas full-bleed (hero, faixas de tinta) NÃO passam por aqui — usam o fundo da .dnd-section e ficam na largura toda (até 1440). -------------------------------------------------------- */ .container, .content-wrapper { width: 100%; max-width: var(--ip-content-max); /* 1390 */ margin-inline: auto; padding-inline: var(--ip-section-pad-x); /* 20px — respiro mobile de 24px é local, não global */ } /* -------------------------------------------------------- GRID-3 — grids de 3 cards iguais (modalidade, professores, relacionados, depoimentos). Gutter Figma de 74px. -------------------------------------------------------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ip-grid-gutter-cards); /* 74 */ } @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .grid-3 { grid-template-columns: 1fr; } /* fallback seguro; módulo sobrescreve se precisar */ } /* As faixas full-bleed (hero, banner, etc.) usam width:100vw, e 100vw INCLUI a largura da barra de rolagem vertical — isso deixava cada faixa ~15px mais larga que a área visível e gerava uma barra de rolagem HORIZONTAL. overflow-x: clip recorta esse excesso no contêiner raiz; ao contrário de hidden/auto, clip NÃO cria contexto de rolagem, então o header position:sticky continua funcionando. */ .body-wrapper { overflow-x: clip; } /* .content-wrapper (margem auto + max-width 1390 + respiro lateral 20px) é definido junto com .container em css/objects/_layout.css — fonte única da régua. Faixas full-bleed (hero, tinta) usam o fundo da .dnd-section e não passam por aqui — continuam na largura toda (até 1440). */ .dnd-section > .row-fluid { margin: 0 auto; } /* Primeira faixa do conteúdo quando ela ABRE com um hero/faixa escura: sem recuo no topo. Por quê: no topo o header é TRANSPARENTE de propósito, para o hero escuro aparecer atrás dele (o .site-header-sticky puxa o
para cima com margin negativo — ver css/components/_header.css). Se esta primeira .dnd-section mantém o padding-top global do tema, o hero não encosta no topo e o que aparece sob a barra transparente é o fundo BRANCO da página — o header parece "sumido/branco" em vez de cinza. O seletor espelha de propósito o que o js/main.js procura para decidir a transparência ('#main-content .ip-hero, #main-content .ip-section-ink'): se o JS vai deixar a barra transparente, o hero TEM de chegar ao y=0. Manter os dois critérios iguais impede que CSS e JS discordem. Restrito ao 1º dnd-row da 1ª seção: .ip-section-ink também pinta faixas escuras no meio da página, que devem manter o recuo normal. */ .dnd-section:first-child:has(> .row-fluid > .dnd-column > .dnd-row:first-child .ip-hero), .dnd-section:first-child:has(> .row-fluid > .dnd-column > .dnd-row:first-child .ip-section-ink) { padding-top: 0; } .dnd-section .dnd-column { padding: 0 1rem; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* Elements Base HTML elements are styled in this section (,

, ,

,