feat(escolinha): nova tela de login

This commit is contained in:
deploy
2026-08-20 14:35:16 +00:00
parent 91b4d8864f
commit 95a273dc91
+23 -1
View File
@@ -53,7 +53,20 @@ data:
}
a{color:inherit}
.stage{display:grid;grid-template-columns:56% 44%;min-height:100vh}
.stage{position:relative;display:grid;grid-template-columns:56% 44%;min-height:100vh}
/* Faixa pontilhada na costura: a foto nao vira branco liso, ela se desfaz
em pontos. Fica sobre as duas colunas, por isso pende de .stage e nao de
uma delas. As mascaras apagam as pontas para a faixa nao ter borda. */
.costura{
position:absolute;top:0;bottom:0;left:48%;
width:230px;transform:translateX(-50%);
pointer-events:none;z-index:1;opacity:.9;
background-image:radial-gradient(circle, var(--orange) 1.6px, transparent 1.6px);
background-size:9px 9px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 45%, #000 60%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 45%, #000 60%, transparent 100%);
}
/* ---------- Foto (esquerda) ---------- */
.foto{
@@ -179,6 +192,14 @@ data:
}
.painel{padding:32px 22px 44px;align-items:flex-start}
.pontos{display:none}
/* Na vertical a costura e horizontal: a faixa acompanha a borda da foto. */
.costura{
top:auto;bottom:auto;left:0;right:0;width:auto;
height:110px;transform:none;
margin-top:135px;
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 40%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 40%, transparent 100%);
}
.marca{margin-bottom:26px}
}
</style>
@@ -186,6 +207,7 @@ data:
<body>
<div class="stage">
<div class="foto" role="img" aria-label="Crianças jogando futebol"></div>
<span class="costura" aria-hidden="true"></span>
<main class="painel">
<span class="pontos topo" aria-hidden="true"></span>