5421080b04
Tokens de movimiento centralizados (duraciones y curvas únicas), feedback de pulsación visible e inmediato en tarjeta de tarea, TTS, chips, teclado y navegación; áreas táctiles mínimas de 44-48px en controles pequeños; tracking positivo en etiquetas en mayúsculas; touch-action manipulation para eliminar el retardo de doble-tap en la tablet kiosko.
110 lines
2.4 KiB
SCSS
110 lines
2.4 KiB
SCSS
:host {
|
|
display: block;
|
|
}
|
|
|
|
.profiles {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-6);
|
|
padding: var(--space-6) var(--space-4);
|
|
|
|
&__account {
|
|
all: unset;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 24px;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-card);
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
color: var(--text-1);
|
|
}
|
|
|
|
&__title {
|
|
margin: 0;
|
|
font-size: 2.4rem;
|
|
text-align: center;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
&__msg {
|
|
color: var(--text-1);
|
|
text-align: center;
|
|
}
|
|
|
|
&__grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-5);
|
|
justify-content: center;
|
|
}
|
|
|
|
&__parents {
|
|
all: unset;
|
|
cursor: pointer;
|
|
color: var(--text-3);
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
padding: 10px 18px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
&__parents:hover { color: var(--text-1); background: var(--surface-soft); }
|
|
}
|
|
|
|
// Tarjeta de niño: grande, con su color de acento, animación de entrada.
|
|
.kid {
|
|
all: unset;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
width: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-5);
|
|
background: var(--surface);
|
|
border: var(--card-border-width) solid color-mix(in srgb, var(--c) 35%, #fff);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-card);
|
|
transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-settle) var(--ease-out);
|
|
animation: slideUp 0.4s ease both;
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
// Mantiene la elevación del hover al pulsar: sin salto entre ambos estados.
|
|
&:active { transform: translateY(-2px) scale(0.97); }
|
|
|
|
&__mascot {
|
|
font-size: 84px;
|
|
line-height: 1;
|
|
animation: floatY 3s ease-in-out infinite;
|
|
}
|
|
&__name {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
color: var(--text-strong);
|
|
}
|
|
&__coins {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
color: var(--coin-text);
|
|
background: var(--coin-bg);
|
|
padding: 4px 14px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
&__age {
|
|
font-size: 0.9rem;
|
|
color: var(--text-3);
|
|
}
|
|
}
|