/* ============================================================ Meu Trade — Design tokens Tema claro: branco + azul "Facebook", com menu e rodapé em um azul-marinho mais escuro para dar contraste estrutural. ============================================================ */ :root{ /* superfícies — claras, estilo Facebook */ --bg-0: #F0F2F5; /* fundo geral da página */ --bg-1: #FFFFFF; /* cartões / superfícies */ --bg-2: #F7F8FA; /* superfície secundária (hover, skeleton) */ --bg-3: #ECEEF1; /* superfície terciária */ --border: #DADDE1; --border-soft: #E4E6EB; /* texto */ --text-hi: #1C1E21; --text-mid: #5B6470; --text-low: #8A8D91; /* marca / assinatura — azul "Facebook" */ --accent: #1877F2; --accent-hi: #4293FA; --accent-dim: #E7F0FE; /* menu e rodapé — azul-marinho mais escuro, não "pesado" */ --dark-surface: #12284B; --dark-surface-2: #16305A; --dark-text: #FFFFFF; --dark-text-mid: #C6D3E6; --dark-text-low: #8FA3C2; --dark-border: rgba(255,255,255,.10); /* semântica de resultado (financeiro, não decorativo) */ --gain: #1E9E5A; --gain-dim: #E6F7EE; --loss: #D64550; --loss-dim: #FCEAEC; /* tipografia */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-1: 0 1px 3px rgba(16,24,40,.08); --shadow-2: 0 10px 28px rgba(16,24,40,.12); --shadow-accent: 0 0 0 1px rgba(24,119,242,.25), 0 8px 20px rgba(24,119,242,.18); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; /* Evita rolagem horizontal acidental sem quebrar `position: sticky`. Aplicar overflow-x no transformaria o body em contexto de rolagem e faria o menu fixo parar de funcionar — por isso fica aqui. */ overflow-x: hidden; } body{ margin: 0; background: var(--bg-0); color: var(--text-hi); font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.5; } h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--text-hi); } a{ color: inherit; text-decoration: none; } .mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .container{ width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; } /* --- linha-de-razão: motivo estrutural recorrente --------------- Uma régua fina com célula de dado alinhada à direita, como uma linha de extrato/ledger. Usada em nav, listas de recursos e rodapé. */ .ledger-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-soft); padding: 18px 0; } .ledger-row:last-child{ border-bottom: none; } /* botões */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: linear-gradient(135deg, var(--accent-hi), var(--accent) 70%); color: #FFFFFF; box-shadow: var(--shadow-accent); } .btn-primary:hover{ filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(24,119,242,.35), 0 10px 24px rgba(24,119,242,.24); } .btn-ghost{ background: transparent; color: var(--text-hi); border-color: var(--border); } .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .btn-block{ width: 100%; } /* formulários */ .field{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .field label{ font-size: 13px; color: var(--text-mid); font-weight: 600; letter-spacing: .01em; } .field input, .field select, .field textarea{ background: var(--bg-1); border: 1px solid var(--border); color: var(--text-hi); padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14.5px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .field input::placeholder, .field textarea::placeholder{ color: var(--text-low); } .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(24,119,242,.14); } .field .hint{ font-size: 12.5px; color: var(--text-low); } .tag{ display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .tag-forex{ background: var(--accent-dim); color: var(--accent); } .tag-bolsa{ background: var(--gain-dim); color: var(--gain); } .tag-gain{ color: var(--gain); } .tag-loss{ color: var(--loss); } ::selection{ background: rgba(24,119,242,.22); } /* foco visível para acessibilidade de teclado */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* --- dropdown de navegação (usado pelo item "Contato") ------------ */ .nav-dropdown{ position: relative; } .nav-dropdown-toggle{ background: none; border: none; padding: 0; margin: 0; font-family: var(--font-body); font-size: 14px; color: var(--dark-text-mid); display: flex; align-items: center; gap: 6px; cursor: pointer; } .nav-dropdown-toggle:hover{ color: var(--dark-text); } .nav-dropdown-toggle svg{ width: 12px; height: 12px; transition: transform .15s ease; } .nav-dropdown.open .nav-dropdown-toggle svg{ transform: rotate(180deg); } .nav-dropdown-menu{ position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(6px); background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 8px; min-width: 210px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 80; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; font-size: 13.5px; color: var(--text-hi); font-weight: 500; } .nav-dropdown-menu a svg{ width: 16px; height: 16px; flex: none; color: var(--accent); } .nav-dropdown-menu a:hover{ background: var(--bg-2); color: var(--text-hi); } .nav-dropdown-menu .divider{ height: 1px; background: var(--border-soft); margin: 6px 4px; } .skeleton{ background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-loading{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }