/* TraceClose — CSS base compartilhado pelas peças da marca (guidelines, media kit, landing). * Depende de ../tokens/tokens.css (variáveis --tc-*). Fontes: Google Fonts (link no ): * https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400..800&family=Funnel+Sans:ital,wght@0,300..800;1,400&family=Geist+Mono:wght@400..600&display=swap */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--tc-bg); color: var(--tc-fg); font-family: var(--tc-font-sans); font-size: var(--tc-text-base); line-height: var(--tc-leading-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01' on; } img, svg { display: block; max-width: 100%; } a { color: var(--tc-primary-text); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--tc-ring); outline-offset: 2px; border-radius: var(--tc-radius-xs); } /* ---------- tipografia ---------- */ .tc-display { font-family: var(--tc-font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; } .tc-h1 { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(2.25rem, 5vw, var(--tc-text-6xl)); line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; margin: 0; } .tc-h2 { font-family: var(--tc-font-display); font-weight: 600; font-size: clamp(1.75rem, 3.4vw, var(--tc-text-4xl)); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; margin: 0; } .tc-h3 { font-family: var(--tc-font-display); font-weight: 600; font-size: var(--tc-text-xl); line-height: var(--tc-leading-xl); letter-spacing: -0.012em; margin: 0; } .tc-lead { font-size: var(--tc-text-lg); line-height: 1.55; color: var(--tc-fg-muted); max-width: 62ch; text-wrap: pretty; } .tc-muted { color: var(--tc-fg-muted); } .tc-num { font-family: var(--tc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ---------- botões ---------- */ .tc-btn { --h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px; border-radius: var(--tc-radius-md); border: 1px solid transparent; font: 600 14px/1 var(--tc-font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--tc-duration-fast) var(--tc-ease), border-color var(--tc-duration-fast) var(--tc-ease), transform var(--tc-duration-fast) var(--tc-ease); } .tc-btn svg { width: 16px; height: 16px; flex: none; } .tc-btn:active { transform: translateY(1px); } .tc-btn--sm { --h: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--tc-radius-sm); } .tc-btn--lg { --h: 48px; padding: 0 22px; font-size: 15px; border-radius: 10px; } .tc-btn--primary { background: var(--tc-primary); color: var(--tc-primary-on); } .tc-btn--primary:hover { background: var(--tc-primary-hover); } .tc-btn--secondary { background: var(--tc-surface); color: var(--tc-fg); border-color: var(--tc-border-strong); } .tc-btn--secondary:hover { background: var(--tc-bg-subtle); } .tc-btn--ghost { background: transparent; color: var(--tc-fg-muted); } .tc-btn--ghost:hover { background: var(--tc-bg-subtle); color: var(--tc-fg); } /* O botão "Vendeu": o único lugar da interface em Ouro sólido. */ .tc-btn--sold { background: var(--tc-accent); color: var(--tc-accent-on); box-shadow: inset 0 -1px 0 rgba(10, 15, 44, 0.18); } .tc-btn--sold:hover { background: var(--tc-accent-hover); } .tc-btn--danger { background: transparent; color: var(--tc-danger-text); border-color: color-mix(in srgb, var(--tc-danger) 40%, transparent); } /* ---------- badges ---------- */ .tc-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--tc-radius-sm); font: 500 12px/1 var(--tc-font-sans); white-space: nowrap; background: var(--tc-bg-subtle); color: var(--tc-fg-muted); border: 1px solid var(--tc-border); } .tc-badge svg { width: 12px; height: 12px; } .tc-badge--primary { background: var(--tc-primary-subtle); color: var(--tc-primary-text); border-color: transparent; } .tc-badge--sold { background: var(--tc-accent-subtle); color: var(--tc-accent-text); border-color: transparent; } .tc-badge--success { background: var(--tc-success-subtle); color: var(--tc-success-text); border-color: transparent; } .tc-badge--warning { background: var(--tc-warning-subtle); color: var(--tc-warning-text); border-color: transparent; } .tc-badge--danger { background: var(--tc-danger-subtle); color: var(--tc-danger-text); border-color: transparent; } .tc-badge--info { background: var(--tc-info-subtle); color: var(--tc-info-text); border-color: transparent; } .tc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* Etiqueta de origem: campanha › conjunto › anúncio. Assinatura do produto. */ .tc-origin { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 500 12px/1.2 var(--tc-font-sans); color: var(--tc-fg-muted); min-width: 0; } .tc-origin::before { content: ''; width: 14px; height: 8px; flex: none; background: radial-gradient(circle at 11px 4px, var(--tc-accent) 2.6px, transparent 3px), linear-gradient(var(--tc-primary-text), var(--tc-primary-text)) 0 3px / 9px 2px no-repeat; } .tc-origin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-origin b { font-weight: 600; color: var(--tc-fg); } /* ---------- superfícies ---------- */ .tc-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); box-shadow: var(--tc-shadow-xs); } .tc-panel { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-xl); box-shadow: var(--tc-shadow-md); } /* Card de métrica */ .tc-metric { padding: 16px 18px; display: grid; gap: 6px; } .tc-metric__label { font-size: 13px; color: var(--tc-fg-muted); display: flex; align-items: center; gap: 6px; } .tc-metric__value { font-family: var(--tc-font-mono); font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; } .tc-metric__delta { font: 500 12px/1 var(--tc-font-sans); display: inline-flex; align-items: center; gap: 4px; } .tc-up { color: var(--tc-success-text); } .tc-down { color: var(--tc-danger-text); } /* Avatar */ .tc-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--tc-font-sans); color: var(--tc-fg); background: var(--tc-surface-sunken); flex: none; } /* Ícones lucide: traço 1.75, 16/20 px */ .tc-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }