/* ═══════════════════════════════════════════════════════════════ AZUL 360 · DESIGN SYSTEM — fonte única de verdade Linguagem: produto digital direto e tátil. Canvas branco, texto quase preto, títulos grandes e pesados com tracking fechado, e — a assinatura — botões com SOMBRA SÓLIDA de 3px, sem desfoque, que dá a eles cara de tecla física. Referência: whop.com, com o azul da marca no lugar do laranja. Os valores abaixo foram medidos no site real, não estimados: botão raio 24px · borda 1px na cor escura · sombra 0 3px 0 0 cartão fundo preto 6% · borda preto 15% · raio 24px · sem sombra h1 48px peso 700 tracking -0.03em line-height 1.0 texto #202020 · fonte Inter A cor escura (--acao-fundo) foi derivada do azul da marca na mesma proporção que o Whop usa no laranja: −18 pontos de luminosidade. Contrastes verificados: branco sobre #1053f1 ......... 5.95:1 (AA ✓) #202020 sobre branco ......... 16.29:1 (AAA ✓) #202020 sobre cartão #f0f0f0 . 14.30:1 (AAA ✓) ═══════════════════════════════════════════════════════════════ */ /* A fonte NÃO entra por @import aqui. Um @import só é descoberto depois que este arquivo termina de baixar, o que serializa três saltos de rede (html → tokens.css → css do Google → woff2). Em 4G isso dá 400–700ms de texto sem fonte no meio do funil. Cada página carrega o Inter com um próprio no , em paralelo com os CSS locais. */ :root{ /* ── Ação ── */ --acao: #1053f1; /* azul da marca (extraído da logo oficial) */ --acao-fundo: #0634a1; /* borda + sombra sólida — o "corpo" da tecla */ --acao-hover: #0c47d4; --acao-fraca: #eaf0fe; /* superfície azulada leve */ /* ── Tinta ── */ --tinta: #202020; /* texto principal — quase preto, nunca #000 */ --tinta-2: #5c5c5c; /* apoio */ --tinta-3: #8a8a8a; /* auxiliar curto */ /* ── Superfícies ── */ --branco: #ffffff; --cartao: #f4f4f4; /* preto a ~6% sobre branco */ --cartao-fio: #d9d9d9; /* borda do cartão (preto a ~15%) */ --fio: #e2e2e2; /* divisor */ --fio-forte: #c9c9c9; /* borda de campo e botão claro */ /* ── Estado ── */ --ok: #0b7a54; --ok-fundo: #e6f4ee; --erro: #c02a21; --erro-fundo: #fdeceb; --atencao: #8a5a00; --atencao-fundo: #fdf4e3; /* ── Tipografia — Inter ── */ --fonte: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --p-reg: 400; --p-med: 500; --p-semi: 600; --p-bold: 700; --p-black:800; /* escala — o tracking fecha conforme o tamanho cresce (assinatura) */ --t-legenda: 12px; --lh-legenda: 1.4; --ls-legenda: -0.12px; --t-corpo-sm: 14px; --lh-corpo-sm: 1.5; --ls-corpo-sm: -0.18px; --t-corpo: 16px; --lh-corpo: 1.5; --ls-corpo: -0.18px; --t-corpo-lg: 18px; --lh-corpo-lg: 1.4; --ls-corpo-lg: -0.18px; --t-subtitulo: 24px; --lh-subtitulo: 1.15; --ls-subtitulo: -0.6px; --t-titulo-sm: 32px; --lh-titulo-sm: 1.05; --ls-titulo-sm: -0.96px; --t-titulo: 40px; --lh-titulo: 1.0; --ls-titulo: -1.2px; --t-titulo-lg: 48px; --lh-titulo-lg: 1.0; --ls-titulo-lg: -1.44px; --t-display: 64px; --lh-display: 1.0; --ls-display: -2.24px; /* ── Espaçamento ── */ --e8:8px; --e12:12px; --e16:16px; --e24:24px; --e32:32px; --e40:40px; --e48:48px; --e64:64px; --e80:80px; --e96:96px; /* ── Layout ── */ --largura-max: 1180px; --gap-secao: 80px; --pad-cartao: 24px; /* ── Raios — 24px domina; 8px em detalhe; pílula em etiqueta ── */ --r: 24px; --r-medio: 14px; --r-mini: 8px; --r-pilula: 9999px; /* ── A sombra sólida: 3px, SEM desfoque. É o que dá o toque físico. Nunca troque por sombra difusa — descaracteriza o sistema. ── */ --tecla: 0 3px 0 0 var(--acao-fundo); --tecla-clara: 0 3px 0 0 var(--fio-forte); --tecla-press: 0 1px 0 0 var(--acao-fundo); color-scheme: light; } /* A escala nasce grande (64px). Num celular de 360px isso estoura — e 88% do tráfego é mobile. Aqui ela encolhe mantendo o peso e o tracking fechado, que são a identidade. */ @media (max-width: 640px){ :root{ --t-display: 36px; --ls-display: -1.26px; --t-titulo-lg: 32px; --ls-titulo-lg: -0.96px; --t-titulo: 28px; --ls-titulo: -0.84px; --t-titulo-sm: 24px; --ls-titulo-sm: -0.72px; --t-subtitulo: 20px; --ls-subtitulo: -0.5px; --gap-secao: 48px; --pad-cartao: 20px; --r: 20px; } } /* ═══ Reset ═══ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--branco); color:var(--tinta); font-family:var(--fonte); font-weight:var(--p-reg); font-size:var(--t-corpo); line-height:var(--lh-corpo); letter-spacing:var(--ls-corpo); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,svg{ max-width:100%; display:block; } button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; } button{ cursor:pointer; border:0; background:none; } h1,h2,h3,h4,p,ul,ol,figure{ margin:0; } ul,ol{ padding:0; list-style:none; } a{ color:var(--acao); } [hidden]{ display:none !important; } :focus-visible{ outline:2px solid var(--acao); outline-offset:2px; border-radius:var(--r-mini); } /* ═══ Tipografia ═══ */ .ds-display{ font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); font-weight:var(--p-bold); } .ds-t-lg{ font-size:var(--t-titulo-lg); line-height:var(--lh-titulo-lg); letter-spacing:var(--ls-titulo-lg); font-weight:var(--p-bold); } .ds-t{ font-size:var(--t-titulo); line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); font-weight:var(--p-bold); } .ds-t-sm{ font-size:var(--t-titulo-sm); line-height:var(--lh-titulo-sm); letter-spacing:var(--ls-titulo-sm); font-weight:var(--p-bold); } .ds-sub{ font-size:var(--t-subtitulo); line-height:var(--lh-subtitulo); letter-spacing:var(--ls-subtitulo); font-weight:var(--p-semi); } .ds-corpo-lg{font-size:var(--t-corpo-lg); line-height:var(--lh-corpo-lg); letter-spacing:var(--ls-corpo-lg); } .ds-corpo{ font-size:var(--t-corpo); line-height:var(--lh-corpo); letter-spacing:var(--ls-corpo); } .ds-corpo-sm{font-size:var(--t-corpo-sm); line-height:var(--lh-corpo-sm); letter-spacing:var(--ls-corpo-sm); } .ds-legenda{ font-size:var(--t-legenda); line-height:var(--lh-legenda); letter-spacing:var(--ls-legenda); color:var(--tinta-2); } .ds-apoio{ color:var(--tinta-2); } /* ═══ Botões — a tecla física ═══ */ .ds-bt{ display:inline-flex; align-items:center; justify-content:center; gap:var(--e8); min-height:52px; padding:14px 24px; font-size:var(--t-corpo); font-weight:var(--p-semi); letter-spacing:var(--ls-corpo); border-radius:var(--r); background:var(--acao); color:var(--branco); border:1px solid var(--acao-fundo); box-shadow:var(--tecla); transition:background .14s ease, transform .08s ease, box-shadow .08s ease; } .ds-bt:hover{ background:var(--acao-hover); } /* afunda a tecla: desce 2px e a sombra encurta */ .ds-bt:active{ transform:translateY(2px); box-shadow:var(--tecla-press); } .ds-bt:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:var(--tecla); } .ds-bt--claro{ background:var(--branco); color:var(--tinta); border-color:var(--fio-forte); box-shadow:var(--tecla-clara); } .ds-bt--claro:hover{ background:var(--cartao); } .ds-bt--claro:active{ transform:translateY(2px); box-shadow:0 1px 0 0 var(--fio-forte); } .ds-bt--largo{ width:100%; } /* ═══ Campos ═══ */ .ds-campo{ display:flex; flex-direction:column; gap:6px; } .ds-lbl{ font-size:var(--t-corpo-sm); font-weight:var(--p-semi); color:var(--tinta); } .ds-in{ width:100%; min-height:52px; padding:14px 16px; /* 16px evita o zoom automático do Safari no iPhone */ font-size:16px; font-weight:var(--p-reg); background:var(--branco); color:var(--tinta); border:1px solid var(--fio-forte); border-radius:var(--r-medio); transition:border-color .14s ease, box-shadow .14s ease; } .ds-in::placeholder{ color:var(--tinta-3); } .ds-in:focus{ outline:none; border-color:var(--acao); box-shadow:0 0 0 3px var(--acao-fraca); } .ds-in--erro{ border-color:var(--erro); } .ds-erro{ font-size:var(--t-corpo-sm); color:var(--erro); font-weight:var(--p-med); } select.ds-in{ cursor:pointer; appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:16px; } /* ═══ Superfícies ═══ */ .ds-pagina{ width:100%; max-width:var(--largura-max); margin-inline:auto; padding-inline:var(--e24); } @media (max-width:640px){ .ds-pagina{ padding-inline:var(--e16); } } /* Cartão: fundo levemente mais escuro que o canvas + fio. Sem sombra — aqui a sombra é exclusividade dos botões. */ .ds-cartao{ background:var(--cartao); border:1px solid var(--cartao-fio); border-radius:var(--r); padding:var(--pad-cartao); } .ds-cartao--branco{ background:var(--branco); } .ds-cartao--azul{ background:var(--acao-fraca); border-color:var(--acao); } .ds-tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pilula); font-size:var(--t-legenda); font-weight:var(--p-semi); letter-spacing:0; background:var(--cartao); color:var(--tinta-2); border:1px solid var(--cartao-fio); } .ds-tag--acao{ background:var(--acao-fraca); color:var(--acao); border-color:var(--acao); } .ds-tag--ok{ background:var(--ok-fundo); color:var(--ok); border-color:transparent; } .ds-tag--erro{ background:var(--erro-fundo); color:var(--erro); border-color:transparent; } .ds-tag--atencao{ background:var(--atencao-fundo); color:var(--atencao); border-color:transparent; } .ds-regua{ height:1px; background:var(--fio); border:0; margin:0; } /* ═══ Movimento ═══ */ @keyframes dsSobe{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .ds-entra{ animation:dsSobe .45s cubic-bezier(.22,.61,.36,1) both; } .ds-spin{ width:1em; height:1em; border-radius:50%; display:inline-block; border:2px solid currentColor; border-top-color:transparent; animation:dsGira .7s linear infinite; } @keyframes dsGira{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .ds-bt:active{ transform:none; } }