/* --------------------------------------------------------------------------- Sistema visual da FasorX --------------------------------------------------------------------------- A casca e deliberadamente acromatica. As duas aplicacoes da casa ja tem identidade propria e madura: o FITradeoff e navy (#0b3261), um instrumento de medicao; o Atlas e lacre (#b43a52), um caderno de campo. Se este site escolhesse uma terceira cor de marca, ela brigaria com as duas em toda pagina de catalogo. Entao a regra e: a estrutura nao tem cor, e a unica cromia da pagina vem das proprias aplicacoes, aplicada em fio de 3px no cartao de cada uma. Mesma casa, comodos com identidade -- e espaco para a terceira aplicacao entrar sem redesenho. --------------------------------------------------------------------------- */ :root { color-scheme: light dark; --papel: #f4f3f0; --superficie: #ffffff; --superficie-2: #eceae6; /* Tinta. Os tres pesos foram medidos contra --papel, que e a superficie mais clara em que cada um aparece -- e, portanto, o pior caso do contraste: tinta 14,8:1 - tinta-2 6,0:1 - tinta-3 4,8:1. Todos passam em AA. */ --tinta: #16191c; --tinta-2: #585d63; --tinta-3: #666c73; --fio: #dcd9d3; --fio-forte: #c2beb6; /* Sem accent de marca: a enfase estrutural e a propria tinta. */ --enfase: #16191c; --enfase-tinta: #ffffff; --selo-obra: #8a6d1f; --selo-obra-fundo: #f7f0da; --sombra: 0 1px 2px rgba(22, 25, 28, .04), 0 8px 24px rgba(22, 25, 28, .06); --raio-painel: 14px; --raio-controle: 8px; --medida: 68ch; /* IBM Plex e a tipografia do Atlas, e amarra a casa. Como aquele projeto, a pagina nao pede fonte a ninguem: enquanto os .woff2 nao estiverem em estatico/assets/fontes/, a pilha de sistema assume. Ver README, "Fontes". */ --fonte-texto: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --fonte-titulo: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif; --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; } /* O modo escuro segue a preferencia do sistema, mas o seletor de tema na pagina vence: [data-tema="claro"] no trava o claro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --papel: #12151a; --superficie: #1a1f25; --superficie-2: #232931; --tinta: #e9ecef; --tinta-2: #b0b7bf; --tinta-3: #99a1aa; --fio: #2c333c; --fio-forte: #3d4651; --enfase: #e9ecef; --enfase-tinta: #12151a; --selo-obra: #e0c068; --selo-obra-fundo: #2e2717; --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); } } :root[data-tema="escuro"] { --papel: #12151a; --superficie: #1a1f25; --superficie-2: #232931; --tinta: #e9ecef; --tinta-2: #b0b7bf; --tinta-3: #99a1aa; --fio: #2c333c; --fio-forte: #3d4651; --enfase: #e9ecef; --enfase-tinta: #12151a; --selo-obra: #e0c068; --selo-obra-fundo: #2e2717; --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fonte-texto); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0; /* Caixa normal, como manda a direcao editorial do Atlas. Nada de versalete decorativo nem sequencia em caixa alta. */ text-transform: none; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--enfase); outline-offset: 3px; border-radius: 3px; } .envoltorio { width: 100%; max-width: 1080px; margin: 0 auto; /* 16px de respiro lateral no telefone e inegociavel: sem isso o texto encosta na borda da tela em qualquer aparelho estreito. */ padding: 0 16px; } /* --- cabecalho ---------------------------------------------------------- */ .topo { border-bottom: 1px solid var(--fio); background: color-mix(in srgb, var(--papel) 86%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; flex-wrap: wrap; } .marca { font-family: var(--fonte-titulo); font-size: 1.22rem; font-weight: 600; text-decoration: none; letter-spacing: -0.015em; white-space: nowrap; } .navegacao { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .navegacao a { text-decoration: none; color: var(--tinta-2); font-size: 0.93rem; padding: 7px 11px; border-radius: var(--raio-controle); transition: background-color .15s, color .15s; } .navegacao a:hover { background: var(--superficie-2); color: var(--tinta); } .navegacao a[aria-current="page"] { color: var(--tinta); font-weight: 600; } /* --- blocos de pagina --------------------------------------------------- */ .secao { padding: 64px 0; } .secao--estreita { max-width: var(--medida); } .editoria { font-family: var(--fonte-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 14px; } .titulo-capa { font-size: clamp(2rem, 5.5vw, 3.1rem); } .linha-fina { font-size: clamp(1.02rem, 2.2vw, 1.16rem); color: var(--tinta-2); max-width: var(--medida); margin: 18px 0 0; } .selo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fonte-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid currentColor; } .selo--obra { color: var(--selo-obra); background: var(--selo-obra-fundo); } /* --- grade de cartoes --------------------------------------------------- */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 32px; } .cartao { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--raio-painel); padding: 26px 24px 22px; overflow: hidden; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } /* O fio de cor da aplicacao. E a unica cromia da pagina, e vem do manifesto via --cor-app, nao daqui -- por isso o fallback e a propria tinta. */ .cartao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor-app, var(--tinta)); } a.cartao:hover { border-color: var(--fio-forte); box-shadow: var(--sombra); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .cartao { transition: none; } a.cartao:hover { transform: none; } } .cartao--inerte { opacity: .72; } .cartao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .cartao__nome { font-size: 1.24rem; } .cartao__resumo { color: var(--tinta-2); margin: 0 0 16px; font-size: 0.97rem; } .cartao__estado { font-family: var(--fonte-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; } .cartao__rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fio); font-family: var(--fonte-mono); font-size: 0.78rem; color: var(--tinta-3); display: flex; justify-content: space-between; gap: 10px; } /* --- rodape ------------------------------------------------------------- */ .rodape { border-top: 1px solid var(--fio); margin-top: 40px; padding: 34px 0; color: var(--tinta-3); font-size: 0.88rem; } .rodape__interno { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .rodape a { color: var(--tinta-2); } /* --- pagina de encerramento --------------------------------------------- */ .encerrada { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; text-align: center; } .encerrada__caixa { max-width: 54ch; } .encerrada__data { font-family: var(--fonte-mono); font-size: 0.82rem; color: var(--tinta-3); margin-top: 26px; } /* --- formulario --------------------------------------------------------- */ .formulario { margin-top: 34px; display: grid; gap: 18px; max-width: 52ch; } .campo { display: grid; gap: 6px; } .campo label { font-size: 0.93rem; font-weight: 600; } .campo__nota { font-weight: 400; color: var(--tinta-3); font-size: 0.85rem; } .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select, .campo textarea { font: inherit; font-size: 0.97rem; color: var(--tinta); background: var(--superficie); border: 1px solid var(--fio-forte); border-radius: var(--raio-controle); padding: 10px 12px; width: 100%; /* A area de digitacao e um buraco na superficie, nao um cartao erguido -- a mesma leitura que o FITradeoff usa nos campos dele. */ box-shadow: inset 0 1px 2px rgba(22, 25, 28, .05); } .campo textarea { resize: vertical; min-height: 96px; } .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--enfase); outline-offset: 1px; border-color: var(--enfase); } /* O navegador so marca :invalid depois que a pessoa mexeu no campo. Sem o :not(:placeholder-shown), um formulario recem-aberto apareceria todo vermelho, acusando a pessoa de erros que ela ainda nao teve chance de cometer. */ .campo input:invalid:not(:placeholder-shown), .campo select:invalid:not(:placeholder-shown) { border-color: #b91c1c; } .campo--consentimento label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 400; font-size: 0.9rem; color: var(--tinta-2); line-height: 1.5; } .campo--consentimento input { margin-top: 3px; } /* A armadilha anti-robo. Fora da tela, e nao display:none: alguns preenchedores automaticos pulam o que esta com display:none, e ai a armadilha nao pegaria ninguem. */ .armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .botao { font: inherit; font-weight: 600; font-size: 0.97rem; color: var(--enfase-tinta); background: var(--enfase); border: 1px solid var(--enfase); border-radius: var(--raio-controle); padding: 11px 22px; cursor: pointer; justify-self: start; transition: opacity .15s; } .botao:hover { opacity: .88; } .botao:disabled { opacity: .5; cursor: progress; } .botao--linha { display: inline-block; text-decoration: none; margin-left: 10px; } .formulario__aviso { margin: 0; font-size: 0.93rem; color: var(--tinta-2); } .formulario__aviso.erro { color: #b91c1c; font-weight: 600; } .formulario__aviso.ok { color: var(--tinta); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .formulario__aviso.erro { color: #f87171; } :root:not([data-tema="claro"]) .campo input:invalid:not(:placeholder-shown), :root:not([data-tema="claro"]) .campo select:invalid:not(:placeholder-shown) { border-color: #f87171; } } /* --- telas de conta ----------------------------------------------------- */ .provedores { margin-top: 30px; max-width: 52ch; } .provedores__lista { display: grid; gap: 10px; } .botao--provedor { text-decoration: none; text-align: center; background: var(--superficie); color: var(--tinta); border: 1px solid var(--fio-forte); justify-self: stretch; } .botao--provedor:hover { background: var(--superficie-2); opacity: 1; } /* Regra atras da palavra "ou", desenhada com gradiente em vez de duas divs vazias: um e um pseudo-elemento bastam, e nao ha marcacao sem conteudo para um leitor de tela anunciar. */ .separador { display: flex; align-items: center; gap: 12px; color: var(--tinta-3); font-size: 0.85rem; margin: 22px 0 0; } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--fio); } .ficha { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 30px 0 0; max-width: 52ch; align-items: baseline; } .ficha dt { font-family: var(--fonte-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); } .ficha dd { margin: 0; } .campo input[type="password"] { font: inherit; font-size: 0.97rem; color: var(--tinta); background: var(--superficie); border: 1px solid var(--fio-forte); border-radius: var(--raio-controle); padding: 10px 12px; width: 100%; box-shadow: inset 0 1px 2px rgba(22, 25, 28, .05); } .campo input[type="password"]:focus-visible { outline: 2px solid var(--enfase); outline-offset: 1px; border-color: var(--enfase); }