/* ============================================================================= CeiscTech — Design System Todas as classes usam o prefixo .ct- para conviver com outros CSS. Ordem do arquivo: 1 tokens · 2 base · 3 layout · 4 componentes · 5 utilidades Fontes esperadas (carregar no da página): Archivo (display, eixo wdth) · IBM Plex Sans (corpo) · IBM Plex Mono (rótulos) ============================================================================= */ /* ============================ 1. TOKENS ==================================== */ :root { /* --- paleta bruta: escalas, não usar direto em componentes novos --- */ --ct-navy-900: #071230; --ct-navy-800: #0b1a3e; --ct-navy-700: #132a5e; --ct-blue-600: #1d4ed8; --ct-blue-500: #2f6bff; --ct-blue-400: #4a80ff; --ct-blue-300: #8fb0ff; --ct-blue-050: #eef3fe; --ct-amber-400: #f2b544; --ct-amber-ink: #3a2600; --ct-ink-900: #0d1526; --ct-ink-700: #1b2436; --ct-ink-500: #4c5670; --ct-ink-400: #6b7689; --ct-paper: #f5f7fc; --ct-white: #ffffff; --ct-line: #dde3f0; /* --- papéis semânticos: é o que os componentes consomem --- .ct-dark redefine estes valores para fundos navy (ver seção 2). */ --ct-bg: var(--ct-paper); --ct-surface: var(--ct-white); --ct-text: var(--ct-ink-900); --ct-text-body: var(--ct-ink-500); --ct-text-subtle: var(--ct-ink-400); --ct-border: var(--ct-line); --ct-link: var(--ct-blue-500); --ct-accent: var(--ct-amber-400); --ct-label-color: var(--ct-blue-500); /* --- tipografia --- */ --ct-font-display: 'Archivo', system-ui, -apple-system, sans-serif; --ct-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --ct-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* larguras do eixo variável do Archivo: display largo = mais institucional */ --ct-wdth-display: 108; --ct-wdth-heading: 112; --ct-display-xl: clamp(2.15rem, 5.2vw, 3.5rem); --ct-display-lg: clamp(1.85rem, 5vw, 2.5rem); --ct-display-md: clamp(1.6rem, 3.6vw, 2.2rem); --ct-display-sm: clamp(1.35rem, 3vw, 1.6rem); --ct-heading: 1.2rem; --ct-subheading: 1rem; --ct-text-lg: 1.05rem; --ct-text-base: 1rem; --ct-text-sm: 0.92rem; --ct-text-xs: 0.82rem; --ct-text-2xs: 0.72rem; --ct-text-3xs: 0.66rem; --ct-leading-tight: 1.12; --ct-leading-body: 1.65; --ct-leading-doc: 1.7; --ct-tracking-display: -0.015em; --ct-tracking-label: 0.16em; /* --- espaçamento (base 4px) --- */ --ct-space-1: 0.25rem; --ct-space-2: 0.5rem; --ct-space-3: 0.75rem; --ct-space-4: 1rem; --ct-space-5: 1.25rem; --ct-space-6: 1.5rem; --ct-space-8: 2rem; --ct-space-10: 2.5rem; --ct-space-12: 3rem; --ct-space-16: 4rem; --ct-band-y: clamp(3.5rem, 7vw, 5.5rem); --ct-gutter: clamp(1.25rem, 4vw, 2.5rem); /* --- formas e profundidade --- */ --ct-radius-sm: 6px; --ct-radius-md: 8px; --ct-radius-lg: 14px; --ct-radius-pill: 999px; --ct-shadow-card: 0 12px 40px rgba(11, 26, 62, 0.08); --ct-shadow-raised: 0 24px 60px rgba(3, 8, 22, 0.45); --ct-hairline: 1px solid var(--ct-border); /* --- larguras de leitura --- */ --ct-shell-max: 1120px; --ct-doc-max: 780px; --ct-measure: 60ch; /* --- movimento --- */ --ct-ease: cubic-bezier(0.2, 0.9, 0.3, 1); --ct-duration: 0.2s; } /* ============================ 2. BASE ====================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--ct-font-body); font-size: var(--ct-text-base); line-height: var(--ct-leading-body); background: var(--ct-bg); color: var(--ct-text-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--ct-font-display); font-variation-settings: 'wdth' var(--ct-wdth-heading); font-weight: 700; letter-spacing: var(--ct-tracking-display); line-height: var(--ct-leading-tight); color: var(--ct-text); } a { color: inherit; } img { max-width: 100%; display: block; } strong { color: var(--ct-text); font-weight: 600; } :focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 3px; border-radius: 3px; } /* Inverte os papéis semânticos para uso sobre navy. Aplique em qualquer seção de fundo escuro: os componentes se adaptam. */ .ct-dark { --ct-surface: rgba(11, 26, 62, 0.72); --ct-text: var(--ct-white); --ct-text-body: #b9c8e6; --ct-text-subtle: #8ba3cc; --ct-border: rgba(143, 176, 255, 0.18); --ct-link: var(--ct-blue-300); --ct-label-color: var(--ct-accent); background: var(--ct-navy-900); color: var(--ct-text-body); } .ct-dark--brand { background: var(--ct-navy-800); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================ 3. LAYOUT ==================================== */ .ct-shell { max-width: var(--ct-shell-max); margin: 0 auto; padding: 0 var(--ct-gutter); } .ct-shell--doc { max-width: var(--ct-doc-max); } .ct-band { padding: var(--ct-band-y) 0; } .ct-band--flush-top { padding-top: 0; } .ct-band--flush-bottom { padding-bottom: 0; } /* Seções escuras recebem uma bolha desfocada de luz azul no canto. É o único ornamento do sistema: use uma vez por tela, no máximo. */ .ct-glow { position: relative; overflow: hidden; } .ct-glow > * { position: relative; z-index: 1; } .ct-glow::before { content: ''; position: absolute; z-index: 0; width: 620px; height: 620px; top: -300px; right: -180px; border-radius: 50%; background: rgba(47, 107, 255, 0.28); filter: blur(90px); pointer-events: none; } /* Duas colunas com texto à esquerda: usada no hero e em pares texto+visual. */ .ct-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; } .ct-split > * { min-width: 0; } /* ============================ 4. COMPONENTES =============================== */ /* --- 4.1 Rótulo mono (eyebrow) ------------------------------------------- */ .ct-label { font-family: var(--ct-font-mono); font-size: var(--ct-text-2xs); font-weight: 500; letter-spacing: var(--ct-tracking-label); text-transform: uppercase; color: var(--ct-label-color); } /* --- 4.2 Marca ------------------------------------------------------------ */ .ct-brand { display: inline-flex; align-items: center; gap: var(--ct-space-3); text-decoration: none; } .ct-brand img { width: 96px; } .ct-brand--lg img { width: 112px; max-width: 40vw; } .ct-brand__tag { font-family: var(--ct-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ct-blue-300); padding-left: var(--ct-space-3); border-left: 1px solid rgba(143, 176, 255, 0.28); } /* --- 4.3 Barra de topo --------------------------------------------------- */ .ct-topbar { border-bottom: 1px solid rgba(143, 176, 255, 0.14); } .ct-topbar .ct-shell { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-space-6); min-height: 74px; } .ct-topbar__nav { display: flex; gap: 1.75rem; } .ct-topbar__nav a { font-size: var(--ct-text-sm); color: var(--ct-text-body); text-decoration: none; transition: color var(--ct-duration); } .ct-topbar__nav a:hover { color: var(--ct-white); } /* --- 4.4 Títulos e blocos de texto -------------------------------------- */ .ct-display { font-size: var(--ct-display-xl); font-variation-settings: 'wdth' var(--ct-wdth-display); margin: var(--ct-space-5) 0 var(--ct-space-5); } .ct-display em { font-style: normal; color: var(--ct-blue-300); } .ct-title { font-size: var(--ct-display-md); margin: var(--ct-space-4) 0 var(--ct-space-5); max-width: 24ch; } .ct-subtitle { font-size: var(--ct-heading); margin-bottom: var(--ct-space-3); } .ct-lead { font-size: var(--ct-text-lg); color: var(--ct-text-body); max-width: var(--ct-measure); } .ct-prose p + p { margin-top: 0.85rem; } .ct-prose ul, .ct-prose ol { margin: 0.85rem 0 0 1.35rem; } .ct-prose li + li { margin-top: var(--ct-space-2); } .ct-prose a { color: var(--ct-link); text-decoration: none; } .ct-prose a:hover { text-decoration: underline; } .ct-note { margin-top: 0.9rem; font-size: var(--ct-text-sm); color: var(--ct-text-subtle); } /* --- 4.5 Botões --------------------------------------------------------- */ .ct-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: var(--ct-space-8); } .ct-btn { display: inline-block; font-family: var(--ct-font-body); font-size: var(--ct-text-sm); font-weight: 500; line-height: 1.4; padding: 0.8rem 1.5rem; border: 1px solid transparent; border-radius: var(--ct-radius-md); text-decoration: none; cursor: pointer; transition: background var(--ct-duration), border-color var(--ct-duration), transform var(--ct-duration); } .ct-btn--solid { background: var(--ct-blue-500); color: var(--ct-white); } .ct-btn--solid:hover { background: var(--ct-blue-400); transform: translateY(-1px); } .ct-btn--ghost { border-color: rgba(143, 176, 255, 0.35); color: #dbe5f8; } .ct-btn--ghost:hover { border-color: var(--ct-blue-300); } /* --- 4.6 Superfícies ---------------------------------------------------- */ .ct-card { background: var(--ct-surface); border: var(--ct-hairline); border-radius: var(--ct-radius-lg); padding: clamp(1.5rem, 4vw, 3rem); } .ct-card--doc { box-shadow: var(--ct-shadow-card); } .ct-card--raised { box-shadow: var(--ct-shadow-raised); padding: var(--ct-space-5); } /* Destaque com barra lateral. Âmbar = informação sobre dados/permissões; azul = observação de contexto. */ .ct-callout { margin-top: var(--ct-space-5); background: var(--ct-blue-050); border-left: 3px solid var(--ct-blue-500); border-radius: 0 var(--ct-radius-lg) var(--ct-radius-lg) 0; padding: 1.15rem 1.35rem; color: #24406e; } .ct-callout p, .ct-callout li { color: inherit; } .ct-callout--accent { background: var(--ct-white); border: var(--ct-hairline); border-left: 3px solid var(--ct-accent); color: var(--ct-text-body); padding: clamp(1.5rem, 4vw, 2.25rem); } /* --- 4.7 Cabeçalho de documento (páginas legais) ----------------------- */ .ct-doc-head { padding: var(--ct-space-12) var(--ct-gutter) 5.5rem; } .ct-doc-head .ct-brand { margin-bottom: 2.75rem; } .ct-doc-head__inner { max-width: var(--ct-doc-max); margin: 0 auto; } .ct-doc-head h1 { font-size: var(--ct-display-lg); font-variation-settings: 'wdth' var(--ct-wdth-display); } .ct-doc-head__meta { margin-top: var(--ct-space-5); font-size: 0.9rem; color: var(--ct-text-subtle); } /* O corpo do documento sobe sobre o cabeçalho escuro. */ .ct-doc-body { max-width: var(--ct-doc-max); margin: -3.5rem auto var(--ct-space-16); padding: 0 var(--ct-gutter); position: relative; z-index: 2; line-height: var(--ct-leading-doc); } /* Seções numeradas: use só quando a numeração for referência real ("conforme a cláusula 7"), nunca como decoração. */ .ct-doc-body h2 { font-size: var(--ct-heading); color: var(--ct-navy-800); margin: 2.75rem 0 0.85rem; display: flex; align-items: baseline; gap: 0.6rem; } .ct-doc-body h3 { font-size: var(--ct-subheading); font-variation-settings: 'wdth' var(--ct-wdth-display); color: var(--ct-ink-700); margin: var(--ct-space-6) 0 var(--ct-space-2); } .ct-num { font-family: var(--ct-font-mono); font-size: 0.78rem; font-weight: 500; color: var(--ct-blue-500); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* --- 4.8 Lista de definições com hairlines ---------------------------- */ .ct-rows { margin-top: 2.75rem; border-top: var(--ct-hairline); } .ct-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--ct-space-2) var(--ct-space-10); padding: 1.6rem 0; border-bottom: var(--ct-hairline); } .ct-row dt { font-family: var(--ct-font-mono); font-size: var(--ct-text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ct-navy-700); padding-top: 0.2rem; } .ct-row dd { color: var(--ct-text-body); } /* --- 4.9 Lista com marcador quadrado --------------------------------- */ .ct-list { list-style: none; margin: var(--ct-space-5) 0 0; display: grid; gap: 0.7rem; } .ct-list li { position: relative; padding-left: 1.15rem; font-size: var(--ct-text-sm); color: var(--ct-text-body); } .ct-list li::before { content: ''; position: absolute; left: 0; top: 0.62rem; width: 7px; height: 7px; border-radius: 2px; background: var(--ct-blue-500); } /* --- 4.10 Código inline ---------------------------------------------- */ .ct-code { font-family: var(--ct-font-mono); font-size: 0.86em; color: var(--ct-blue-600); background: var(--ct-blue-050); padding: 0.1em 0.4em; border-radius: 4px; } /* --- 4.10b Bloco de código ------------------------------------------- */ .ct-pre { margin-top: var(--ct-space-4); background: var(--ct-navy-900); color: #cfe0ff; border-radius: var(--ct-radius-md); padding: var(--ct-space-4) var(--ct-space-5); overflow-x: auto; font-family: var(--ct-font-mono); font-size: 0.78rem; line-height: 1.6; } .ct-pre code { font: inherit; color: inherit; background: none; padding: 0; } /* --- 4.11 Tabela ------------------------------------------------------ */ .ct-table-wrap { overflow-x: auto; margin-top: var(--ct-space-4); } .ct-table { width: 100%; border-collapse: collapse; font-size: var(--ct-text-sm); min-width: 460px; } .ct-table th, .ct-table td { text-align: left; padding: 0.8rem 0.9rem; border-bottom: var(--ct-hairline); vertical-align: top; } .ct-table th { background: var(--ct-paper); color: var(--ct-navy-800); font-family: var(--ct-font-mono); font-weight: 500; font-size: var(--ct-text-xs); letter-spacing: 0.03em; text-transform: uppercase; } .ct-table td { color: var(--ct-text-body); } /* --- 4.12 Linha de links ---------------------------------------------- */ .ct-links { margin-top: var(--ct-space-6); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: var(--ct-text-sm); } .ct-links a { color: var(--ct-link); text-decoration: none; } .ct-links a:hover { text-decoration: underline; } .ct-mail { font-family: var(--ct-font-mono); font-size: var(--ct-text-base); color: var(--ct-blue-300); text-decoration: none; border-bottom: 1px solid rgba(143, 176, 255, 0.4); padding-bottom: 2px; } .ct-mail:hover { color: var(--ct-white); border-color: var(--ct-white); } /* --- 4.13 Grade de cronograma (elemento de assinatura) --------------- Representa a semana de estudos sincronizada com a agenda. É o único componente ilustrativo do sistema; não replicar em várias telas. */ .ct-schedule { background: var(--ct-surface); border: var(--ct-hairline); border-radius: var(--ct-radius-lg); padding: var(--ct-space-5); box-shadow: var(--ct-shadow-raised); } .ct-schedule__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-space-4); padding-bottom: 0.9rem; margin-bottom: var(--ct-space-4); border-bottom: 1px solid rgba(143, 176, 255, 0.16); } .ct-schedule__head .ct-label { color: var(--ct-text-subtle); } .ct-sync { font-family: var(--ct-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ct-accent); display: flex; align-items: center; gap: 0.45rem; } .ct-sync::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ct-accent); animation: ct-pulse 2.4s ease-in-out infinite; } .ct-schedule__scroll { overflow-x: auto; } .ct-schedule__grid { display: grid; grid-template-columns: 2.5rem repeat(6, minmax(56px, 1fr)); grid-auto-rows: 42px; gap: 5px; min-width: 420px; } .ct-schedule__day, .ct-schedule__hour { font-family: var(--ct-font-mono); font-size: var(--ct-text-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: #7e93bb; display: flex; align-items: center; } .ct-schedule__day { justify-content: center; height: 1.5rem; } .ct-schedule__hour { justify-content: flex-end; padding-right: var(--ct-space-2); } .ct-slot { border-radius: var(--ct-radius-sm); background: rgba(143, 176, 255, 0.06); } .ct-block { border-radius: var(--ct-radius-sm); padding: 0.3rem 0.45rem; font-family: var(--ct-font-mono); font-size: 0.62rem; line-height: 1.25; display: flex; align-items: center; overflow: hidden; opacity: 0; transform: scale(0.9); animation: ct-drop 0.5s var(--ct-ease) forwards; animation-delay: var(--ct-delay, 0s); } .ct-block--class { background: var(--ct-blue-500); color: var(--ct-white); } .ct-block--review { background: var(--ct-accent); color: var(--ct-amber-ink); } .ct-block--test { border: 1px dashed rgba(143, 176, 255, 0.5); color: var(--ct-blue-300); } .ct-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; margin-top: 1.15rem; padding-top: 0.95rem; border-top: 1px solid rgba(143, 176, 255, 0.16); font-family: var(--ct-font-mono); font-size: var(--ct-text-3xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ct-text-subtle); } .ct-legend span { display: flex; align-items: center; gap: 0.4rem; } .ct-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; } @keyframes ct-drop { to { opacity: 1; transform: scale(1); } } @keyframes ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .ct-block { opacity: 1; transform: none; } } /* --- 4.14 Faixa de contato ------------------------------------------- */ .ct-cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ct-space-8); } .ct-cta .ct-title { margin-bottom: 0; max-width: 26ch; font-size: var(--ct-display-sm); } /* --- 4.15 Rodapé ------------------------------------------------------ */ .ct-footer { color: #7d8fb3; padding: 1.75rem 0; font-size: 0.85rem; border-top: 1px solid rgba(143, 176, 255, 0.12); } .ct-footer .ct-shell { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; justify-content: space-between; align-items: center; } .ct-footer nav { display: flex; flex-wrap: wrap; gap: 1.4rem; } .ct-footer a { text-decoration: none; transition: color var(--ct-duration); } .ct-footer a:hover { color: #dbe5f8; } /* Rodapé claro, para páginas de documento. */ .ct-footer--light { max-width: var(--ct-doc-max); margin: 0 auto; padding: 0 var(--ct-gutter) 3.5rem; border-top: 0; color: #7d8aa0; font-size: 0.88rem; } .ct-footer--light a:hover { color: var(--ct-link); text-decoration: underline; } /* ============================ 5. UTILIDADES ================================ */ .ct-rule { border: 0; border-top: var(--ct-hairline); margin: var(--ct-space-10) 0 0; } .ct-measure { max-width: var(--ct-measure); } .ct-stack-4 > * + * { margin-top: var(--ct-space-4); } .ct-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================ 6. RESPONSIVO ================================ */ @media (max-width: 900px) { .ct-split { grid-template-columns: 1fr; } .ct-row { grid-template-columns: 1fr; gap: 0.35rem; } } @media (max-width: 620px) { .ct-cta { align-items: flex-start; } .ct-topbar .ct-shell { flex-wrap: wrap; padding-top: 0.9rem; padding-bottom: 0.9rem; min-height: 0; } .ct-topbar__nav { gap: 1.15rem; width: 100%; } .ct-topbar__nav a { font-size: var(--ct-text-xs); } }