/* ===================================================================== ORBIT DESIGN SYSTEM — TYPOGRAPHY Google Fonts: Space Grotesk (display) + Instrument Sans (body/UI) 12 text styles mapped 1:1 to Figma. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap'); /* -------------------------------------------------------------------- Reset mínimo — só o necessário pra um DS limpo -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; } body { font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; color: var(--color-text-primary); background: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, textarea, select { font: inherit; color: inherit; } a { color: var(--color-action-primary); text-decoration: none; transition: color 150ms ease; } a:hover { color: var(--color-action-primary-hover); } /* -------------------------------------------------------------------- Custom scrollbar — terracota da marca, global em todas as páginas -------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--color-action-primary); border-radius: var(--radius-full); /* borda na cor de fundo cria efeito "flutuante" — track parece transparente */ border: 2px solid var(--color-bg-primary); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--color-action-primary-hover); } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ html { scrollbar-width: thin; scrollbar-color: var(--color-action-primary) transparent; } /* -------------------------------------------------------------------- Embedded mode — quando uma screen tá dentro de iframe (na landing), demo.js adiciona .is-embedded no . Isso bloqueia scroll mas mantém toda interação (hover, click, focus). -------------------------------------------------------------------- */ html.is-embedded, html.is-embedded body { overflow: hidden !important; height: 100vh; } /* Internal scrollable areas (sidebar nav, comments panel) ficam livres */ html.is-embedded .sidebar__nav, html.is-embedded .comments-panel { overflow: hidden; } /* -------------------------------------------------------------------- TYPE SCALE — match com os 12 text styles do Figma -------------------------------------------------------------------- */ /* Display — Space Grotesk, tracking fechado */ .text-display-xl { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; } .text-display-lg { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; } .text-display-md { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2; letter-spacing: -0.02em; } .text-display-sm { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: -0.02em; } /* Heading — Instrument Sans */ .text-heading-lg { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; } .text-heading-md { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.4; } .text-heading-sm { font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.4; } /* Body */ .text-body-lg { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6; } .text-body-md { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; } .text-body-sm { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; } /* Utility */ .text-caption { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.4; } .text-overline { font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; } /* -------------------------------------------------------------------- Color utilities (texto) — atalhos pra usar os semantics -------------------------------------------------------------------- */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-tertiary { color: var(--color-text-tertiary); } .text-placeholder { color: var(--color-text-placeholder); } .text-inverse { color: var(--color-text-inverse); } .text-on-action { color: var(--color-text-on-action); } .text-accent { color: var(--color-accent-info); } .text-action { color: var(--color-action-primary); }