/* ========================================================================== CODE — design system do hub Compartilhado por /, /encontros, /acervo e /radar. As apresentações em /aiox e /hermes NÃO usam este arquivo — são material migrado e seguem autocontidas de propósito. Regras que sustentam o visual (quebrar qualquer uma destoa do resto): 1. Um acento só. Limon é a única cor viva. Verde/âmbar/azul só como estado semântico (ok / atenção / info), nunca decoração. 2. Label em mono, título em display. Toda seção abre com .rule-label. 3. Sem sombra colorida fora do hover. Glow é interação, não repouso. 4. Cantos de 4px em controles, 8px em cards. Nada de rounded-full exceto badges. ========================================================================== */ :root { --code-limon: #D1FF00; --code-void: #0A0A0B; --code-surface: #141416; --code-elevated: #1F1F23; --code-white: #F5F5F4; /* Estados semânticos. Existem no code-tailwind.js desde sempre; faltavam aqui, e .badge.warning / .badge.info usam var() — sem eles a cor era inválida e o texto herdava a do pai (badge âmbar saía cinza). */ --code-success: #00FF94; --code-warning: #FFB800; --code-info: #00B8FF; --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { background: var(--code-void); color: var(--code-white); font-family: 'Geist', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--code-void); } ::-webkit-scrollbar-thumb { background: rgba(245, 245, 244, 0.16); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--code-limon); } ::selection { background: var(--code-limon); color: var(--code-void); } .font-display { font-family: 'Space Grotesk', sans-serif; font-weight: 900; letter-spacing: -0.03em; } .font-mono-up { font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; } /* ---- Grid de fundo, ecoando o traçado da marca ---- */ .grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(245,245,244,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,245,244,0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%); } .glow-limon { position: absolute; pointer-events: none; width: 720px; height: 720px; border-radius: 9999px; background: radial-gradient(circle, rgba(209,255,0,0.10), transparent 65%); filter: blur(20px); } /* ---- Animações ---- */ @keyframes brandReveal { 0% { clip-path: inset(50% 0 50% 0); opacity: 0; transform: scale(0.96); } 60% { clip-path: inset(0); opacity: 1; transform: scale(1); filter: drop-shadow(0 0 28px var(--code-limon)); } 100% { clip-path: inset(0); opacity: 1; transform: scale(1); filter: none; } } @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .animate-brand-reveal { animation: brandReveal 2.2s var(--ease-smooth) both; } .pulse-dot { animation: pulseDot 2s ease-in-out infinite; } /* O estado oculto só existe quando o JS confirmou que está rodando (.js no ). Sem JS, ou se o observer falhar, o conteúdo aparece normalmente. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .js .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .animate-brand-reveal, .pulse-dot { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } } /* ---- Componentes ---- */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--code-limon); color: var(--code-void); font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.875rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; transition: all 0.15s var(--ease-out); } .btn-primary:hover { filter: drop-shadow(0 0 14px rgba(209,255,0,0.6)); transform: translateY(-1px); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--code-white); font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.875rem 1.5rem; border: 1px solid rgba(245,245,244,0.16); border-radius: 4px; cursor: pointer; transition: all 0.15s var(--ease-out); } .btn-secondary:hover { border-color: var(--code-limon); color: var(--code-limon); } /* Controle que ainda não tem destino (ex.: Drive antes da pasta existir). Fica visivelmente inerte em vez de virar link quebrado. */ .btn-secondary[data-pendente] { opacity: 0.45; cursor: not-allowed; } .btn-secondary[data-pendente]:hover { border-color: rgba(245,245,244,0.16); color: var(--code-white); } .badge { display: inline-flex; align-items: center; gap: 0.375rem; font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.3125rem 0.75rem; border-radius: 9999px; background: var(--code-elevated); color: rgba(245,245,244,0.6); } .badge.limon { background: rgba(209,255,0,0.12); color: var(--code-limon); } /* Estados semânticos — nunca decoração. */ .badge.warning { background: rgba(255,184,0,0.12); color: var(--code-warning); } .badge.info { background: rgba(0,184,255,0.12); color: var(--code-info); } .card { background: var(--code-surface); border: 1px solid rgba(245,245,244,0.08); border-radius: 8px; padding: 1.75rem; transition: all 0.3s var(--ease-out); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, transparent 55%, rgba(209,255,0,0.05)); opacity: 0; transition: opacity 0.3s; } .card:hover { border-color: rgba(209,255,0,0.5); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(209,255,0,0.08); } .card:hover::before { opacity: 1; } /* Card estático (não é link e não deve prometer interação). */ .card.card-flat:hover { border-color: rgba(245,245,244,0.08); transform: none; box-shadow: none; } .card.card-flat:hover::before { opacity: 0; } .card-num { font-family: 'Roboto Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--code-limon); } .terminal { background: #000; border: 1px solid rgba(245,245,244,0.16); border-radius: 6px; padding: 2.5rem 1.25rem 1.25rem; font-family: 'Roboto Mono', monospace; font-size: 0.75rem; line-height: 1.8; position: relative; overflow-x: auto; white-space: pre; text-align: left; } .terminal::before { content: '● ● ●'; position: absolute; top: 0.75rem; left: 1rem; color: rgba(245,245,244,0.4); letter-spacing: 4px; font-size: 0.75rem; } .terminal .prompt { color: var(--code-limon); } .terminal .cmt { color: rgba(245,245,244,0.35); } .terminal .ok { color: var(--code-success); } .rule-label { display: flex; align-items: center; gap: 1rem; font-family: 'Roboto Mono', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245,245,244,0.4); } .rule-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(245,245,244,0.16), transparent); } a:focus-visible, button:focus-visible { outline: 2px solid var(--code-limon); outline-offset: 3px; border-radius: 2px; } .nav-link { font-family: 'Roboto Mono', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(245,245,244,0.6); transition: color 0.15s; } .nav-link:hover { color: var(--code-limon); } .nav-link[aria-current="page"] { color: var(--code-limon); } /* ---- Timeline de encontros ---- */ .timeline { position: relative; } .timeline::before { content: ''; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 1px; background: linear-gradient(180deg, rgba(209,255,0,0.4), rgba(245,245,244,0.08)); } .timeline-item { position: relative; padding-left: 2rem; } .timeline-item::before { content: ''; position: absolute; left: -3px; top: 0.5rem; width: 7px; height: 7px; border-radius: 9999px; background: var(--code-limon); } /* Tabela larga nunca pode fazer o body rolar na horizontal. */ .table-scroll { overflow-x: auto; } /* ---- Busca por comando (⌘K) ---- Markup inteiro é injetado por code.js — nenhuma página tem HTML disso. Sem JS não existe gatilho nem overlay, e a navegação normal do header continua sendo o caminho completo. É atalho, nunca a única porta. */ .cmdk-trigger { display: none; align-items: center; gap: 0.5rem; background: transparent; color: rgba(245,245,244,0.6); border: 1px solid rgba(245,245,244,0.08); border-radius: 4px; padding: 0.375rem 0.625rem; cursor: pointer; transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out); } @media (min-width: 768px) { .cmdk-trigger { display: inline-flex; } } .cmdk-trigger:hover { border-color: var(--code-limon); color: var(--code-limon); } .cmdk-trigger svg { width: 0.875rem; height: 0.875rem; } .cmdk-kbd { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; letter-spacing: 0.04em; color: rgba(245,245,244,0.4); border: 1px solid rgba(245,245,244,0.08); border-radius: 3px; padding: 0.0625rem 0.3125rem; white-space: nowrap; } .cmdk-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1.5rem 1.5rem; background: rgba(10,10,11,0.8); backdrop-filter: blur(6px); } .cmdk-backdrop[hidden] { display: none; } .cmdk-panel { width: 100%; max-width: 34rem; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; background: var(--code-surface); border: 1px solid rgba(245,245,244,0.16); border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: cmdkIn 0.18s var(--ease-out) both; } @keyframes cmdkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .cmdk-field { display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; border-bottom: 1px solid rgba(245,245,244,0.08); } .cmdk-field > svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--code-limon); } .cmdk-input { flex: 1; background: transparent; border: none; outline: none; color: var(--code-white); font-family: 'Roboto Mono', monospace; font-size: 0.8125rem; padding: 1rem 0; } .cmdk-input::placeholder { color: rgba(245,245,244,0.4); } .cmdk-list { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; } .cmdk-group { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245,245,244,0.4); padding: 0.75rem 0.75rem 0.375rem; } .cmdk-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5625rem 0.75rem; border-radius: 4px; cursor: pointer; border-left: 2px solid transparent; } .cmdk-item[aria-selected="true"] { background: var(--code-elevated); border-left-color: var(--code-limon); } .cmdk-item-label { color: var(--code-white); font-size: 0.875rem; } .cmdk-item[aria-selected="true"] .cmdk-item-label { color: var(--code-limon); } .cmdk-item-hint { flex: 1; text-align: right; font-family: 'Roboto Mono', monospace; font-size: 0.625rem; color: rgba(245,245,244,0.4); white-space: nowrap; } .cmdk-empty { padding: 1.75rem 0.75rem; text-align: center; color: rgba(245,245,244,0.4); font-size: 0.875rem; } .cmdk-foot { display: flex; gap: 1rem; flex-wrap: wrap; padding: 0.625rem 1rem; border-top: 1px solid rgba(245,245,244,0.08); font-family: 'Roboto Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(245,245,244,0.4); } @media (prefers-reduced-motion: reduce) { .cmdk-panel { animation: none; } } [x-cloak] { display: none !important; }