/* Jors Consultoria — Design tokens Paleta, tipografia, resets e componentes base. Depende das fontes Sora/Manrope/JetBrains Mono carregadas via no . */ :root { --bg: #FAFBFA; --bg-alt: #F2F5F3; --surface: #FFFFFF; --surface-2: #F1F4F3; --border: rgba(19,26,23,0.09); --border-strong: rgba(19,26,23,0.16); --text: #131A17; --text-muted: #5B6864; --text-faint: #8A948F; --signal: #12B981; --signal-strong: #0B8C60; --signal-dim: #E1F3EB; --tick: #2F6FEB; --warn: #B4790A; --danger: #C4453F; --gold: #A68A4D; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-med: 300ms; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Sora', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; } .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; } a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 3px; border-radius: 6px; } .wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--space-4); position: relative; z-index: 1; } @media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 0.94rem; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn-primary { background: linear-gradient(155deg, var(--signal-strong), var(--signal)); color: #FFFFFF; box-shadow: 0 6px 20px -6px rgba(11,140,96,0.45); position: relative; overflow: hidden; } .btn-primary::before { content: ""; position: absolute; top: -40%; left: 0; width: 35%; height: 180%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent); transform: translateX(-120%) skewX(-15deg); pointer-events: none; } .btn-primary:hover::before { animation: shine 900ms ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(11,140,96,0.55); } .btn-primary:active { transform: translateY(0px) scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--signal); } .btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.88rem; } /* ---------- Cartões e superfícies ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); } .tag-pill { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .tag-pill:hover { border-color: var(--signal); color: var(--text); background: var(--signal-dim); } /* ---------- Keyframes compartilhados ---------- */ @keyframes shine { 0% { transform: translateX(-120%) skewX(-15deg); } 100% { transform: translateX(220%) skewX(-15deg); } } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 4px 18px -4px rgba(11,140,96,0.4); } 50% { box-shadow: 0 4px 26px -2px rgba(11,140,96,0.65); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }