/* Confusão — CSS único (fontes latinas variáveis + tokens do DS) */ @font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-moda-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-moda-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ============================================ Confusão — Cores Cor de marca: #1537ff (azul elétrico) Paleta monocromática azul + branco + tinta, mais um conjunto semântico para os domínios do ecossistema Cynefin (diagramas). ============================================ */ :root { /* --- Azul de marca (primário) --- */ --blue-50: #eef1ff; --blue-100: #dce1ff; --blue-200: #b9c3ff; --blue-300: #8b9bff; --blue-400: #4d63ff; --blue-500: #1537ff; /* MARCA */ --blue-600: #0f2ad6; --blue-700: #0c20a6; --blue-800: #0a1878; --blue-900: #0a1550; /* --- Tinta / neutros frios --- */ --ink: #0a1550; /* azul-quase-preto, texto forte */ --ink-soft: #23284a; --white: #ffffff; --paper: #f6f7fc; /* superfície levemente fria */ --gray-50: #f5f6fa; --gray-100: #edeff5; --gray-200: #e0e3ef; --gray-300: #c9cee0; --gray-400: #a3aac4; --gray-500: #767ea0; --gray-600: #565d7c; --gray-700: #3c4260; --gray-800: #262a42; --gray-900: #14172a; /* --- Domínios Cynefin (uso em diagramas/frameworks) --- */ --domain-clear: #f2b705; /* Claro / Óbvio */ --domain-complicated:#1537ff; /* Complicado (marca) */ --domain-complex: #17b890; /* Complexo */ --domain-chaotic: #ff5436; /* Caótico */ --domain-confusion: #767ea0; /* Confusão (centro / aporético) */ /* ---------- Aliases semânticos ---------- */ --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-active: var(--blue-700); --text-strong: var(--ink); --text-body: #2b3050; --text-muted: var(--gray-500); --text-on-accent: var(--white); --text-inverse: var(--white); --surface-page: var(--white); --surface-card: var(--white); --surface-tint: var(--blue-50); --surface-sunken: var(--gray-50); --surface-invert: var(--blue-500); --surface-ink: var(--ink); --border: var(--gray-200); --border-strong: var(--gray-300); --border-accent: var(--blue-500); --focus-ring: var(--blue-400); } /* ============================================ Confusão — Tipografia Título/display: Bodoni Moda — as VOGAIS ficam em itálico enquanto as consoantes ficam romanas. Ver .conf-vowels / utilitário no guia. Parágrafo: Inter. ============================================ */ :root { --font-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Pesos */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ /* peso padrão do título */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* Escala de display (Bodoni Moda) */ --display-2xl: 96px; --display-xl: 72px; --display-lg: 56px; --display-md: 44px; --display-sm: 34px; /* Escala de texto (Inter) */ --text-2xl: 28px; --text-xl: 22px; --text-lg: 18px; --text-md: 16px; --text-sm: 14px; --text-xs: 12px; /* Altura de linha */ --lh-tight: 1.04; /* @kind font */ --lh-snug: 1.18; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.65; /* @kind font */ /* Espaçamento entre letras */ --tracking-tight: -0.02em; /* @kind font */ --tracking-normal: 0; /* @kind font */ --tracking-wide: 0.04em; /* @kind font */ --tracking-caps: 0.14em; /* @kind font */ /* rótulos em caixa alta */ } /* ============================================ Confusão — Espaçamento, raios e camadas Base de 4px. ============================================ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Raios de canto — a marca é sóbria: cantos discretos */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* Larguras de conteúdo */ --measure: 66ch; /* largura ideal de leitura */ --container: 1200px; --container-narrow: 760px; } /* ============================================ Confusão — Sombras, transições, foco Sombras discretas e frias (base azul-tinta). ============================================ */ :root { --shadow-xs: 0 1px 2px rgba(10, 21, 80, 0.06); --shadow-sm: 0 1px 3px rgba(10, 21, 80, 0.08), 0 1px 2px rgba(10, 21, 80, 0.06); --shadow-md: 0 4px 14px rgba(10, 21, 80, 0.10); --shadow-lg: 0 12px 34px rgba(10, 21, 80, 0.14); --shadow-xl: 0 24px 60px rgba(10, 21, 80, 0.18); /* Realce azul (para elementos de marca) */ --shadow-accent: 0 12px 34px rgba(21, 55, 255, 0.28); /* Transições */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 380ms; /* @kind other */ /* Anel de foco */ --focus-shadow: 0 0 0 3px rgba(77, 99, 255, 0.45); } /* ============================================================ Confusão — Base / elementos & utilitários de marca ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Bodoni Moda: fixa o corte Medium (desliga opsz display fino) ---- Aplica-se a qualquer elemento cujo estilo inline use a fonte display, cobrindo componentes React, UI kits e o template. */ [style*="--font-display"], [style*="Bodoni Moda"] { font-optical-sizing: none; } /* ---- Títulos display (Bodoni Moda) ---- */ .conf-display { font-family: var(--font-display); font-weight: var(--fw-medium); font-optical-sizing: none; /* fonte variável local: deixa o font-weight controlar o eixo wght (um 'wght' fixo aqui sobrescreveria os 600 dos títulos) */ font-variation-settings: normal; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--text-strong); margin: 0; } /* Tratamento de marca: vogais em itálico dentro de um título. Envolva as vogais em (ou use a classe .v) para obter o efeito da logo Confusão. Ex.: Confusão */ .conf-display i, .conf-display .v { font-style: italic; font-weight: inherit; } /* ---- Rótulo / kicker em caixa alta ---- */ .conf-kicker { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); } /* ---- Links ---- */ a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } /* ---- Corpo de texto legível ---- */ .conf-prose { max-width: var(--measure); line-height: var(--lh-relaxed); color: var(--text-body); } .conf-prose p { margin: 0 0 var(--space-5); } /* ---- Seleção ---- */ ::selection { background: var(--blue-500); color: var(--white); }