/** * login/templates/atelie/style.css — tema "Ateliê". * ───────────────────────────────────────────────────────────────────────────── * A CONTINUAÇÃO DA PÁGINA DE APRESENTAÇÃO * * Quem lê a apresentação e clica em "Entrar" não pode sentir que mudou de * produto. Este tema é a mesma língua: mesma malha de 48px, mesmo dourado, * mesma Jost leve, mesmos cantos retos. A diferença é que aqui o assunto é * entrar, então o volume abaixa. * * COMO ESTE ARQUIVO SE ENCAIXA NO SISTEMA DE DESIGN — três camadas, cada uma * com um dono, e nenhuma pisando na outra: * * 1. shared/css/marca.css ....... a MARCA. Cor, tipo, escala, ritmo. Vale em * qualquer página do produto. * 2. login/_shared/card-tokens.css o CARD. Largura, respiro e posição do * cartão de acesso, iguais em TODOS os temas. * Não foi tocado, e não deve ser: é ele que * impede o card de "pular" quando o tema é * sorteado, e são os --accent* dele que cada * arte tinge em tempo real. * 3. este arquivo ............... a ARTE e a pele dos campos deste tema só. * * As cores aqui saem de var(--ouro), var(--tinta-*) e var(--texto-*), que vêm * da camada 1. Mudar o dourado da marca num lugar muda apresentação, login e o * que vier depois — sem procurar hexadecimal solto em vinte arquivos. * * O painel da esquerda vive FORA do card, na área de arte, exatamente como os * temas com ilustração fazem. O card continua governado pelo card-tokens. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--fonte); font-weight: 300; min-height: 100dvh; color: var(--texto); background: radial-gradient(120% 120% at 78% 0%, hsl(42 20% 11%) 0%, hsl(42 24% 7%) 58%, var(--tinta-0) 100%); display: grid; grid-template-columns: 1.06fr 0.94fr; /* arte à esquerda, card à direita */ align-items: center; overflow-x: hidden; } /* A malha arquitetônica — a assinatura que amarra apresentação e login. Fixa e sem eventos de ponteiro: não repinta durante rolagem. */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--ouro-vapor) 1px, transparent 1px), linear-gradient(90deg, var(--ouro-vapor) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } /* Vinheta: fecha as bordas e empurra o olho para o centro. */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 36%, rgba(0,0,0,0.74) 100%); pointer-events: none; z-index: 0; } /* ══ PAINEL DE CONTEXTO (a "arte" deste tema) ═══════════════════════════ */ .atelie-painel { position: relative; z-index: 2; padding: clamp(28px, 5vw, 92px); max-width: 640px; margin-left: auto; } .atelie-rotulo { display: inline-flex; align-items: center; gap: 11px; font-size: var(--t-micro); letter-spacing: 0.30em; text-transform: uppercase; color: var(--texto-3); margin-bottom: clamp(18px, 3vh, 30px); } .atelie-rotulo::before { content: ''; width: clamp(20px, 3vw, 44px); height: 1px; background: var(--ouro-fraco); } .atelie-frase { font-size: clamp(23px, 2.4vw + 12px, 44px); font-weight: 200; line-height: 1.1; letter-spacing: -0.016em; color: var(--texto); text-wrap: balance; } .atelie-frase em { font-style: normal; color: var(--ouro); font-weight: 300; } .atelie-apoio { margin-top: clamp(14px, 2vh, 22px); font-size: var(--t-corpo); color: var(--texto-2); max-width: 42ch; } /* Desenho de linhas: uma "prancha" abstrata feita só de filetes, que se desenham sozinhos ao abrir a página. Nenhuma imagem — carrega instantâneo e fica nítido em qualquer tela. Primeira versão tinha 9px de intervalo e traço fraco: na tela renderizada viravam quatro riscos grudados que pareciam defeito, não desenho. Agora o espaçamento é largo e as larguras bem diferentes entre si — lê-se como intenção. */ .atelie-prancha { margin-top: clamp(30px, 4.5vh, 52px); display: grid; gap: clamp(13px, 1.6vh, 19px); max-width: 310px; } .atelie-prancha i { display: block; height: 1px; background: linear-gradient(90deg, var(--ouro) 0%, var(--ouro-fraco) 46%, transparent 100%); transform-origin: left; animation: risca 1.2s var(--curva) both; } .atelie-prancha i:nth-child(1) { width: 100%; animation-delay: 0.20s; } .atelie-prancha i:nth-child(2) { width: 58%; animation-delay: 0.34s; } .atelie-prancha i:nth-child(3) { width: 82%; animation-delay: 0.48s; } .atelie-prancha i:nth-child(4) { width: 34%; animation-delay: 0.62s; } @keyframes risca { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* ── Seletor de idioma ── Ele é compartilhado por todos os temas e traz o próprio estilo: cantos arredondados, borda branca, sombra e fonte do sistema. No ateliê tudo tem canto reto e fonte Jost — então ele ficava sendo o único elemento estrangeiro da tela, no canto superior direito, roubando atenção da própria entrada. Ajuste SÓ de aparência e SÓ neste tema: o arquivo compartilhado continua servindo os outros temas exatamente como está. Precisa de !important porque o