114 lines
2.2 KiB
CSS
114 lines
2.2 KiB
CSS
:root {
|
||
--brand-blue: #002e5d;
|
||
--brand-orange: #ffa94d;
|
||
}
|
||
|
||
/* Cuerpo */
|
||
body {
|
||
background: var(--brand-blue);
|
||
color: #fff;
|
||
font-family: Inter, system-ui, sans-serif;
|
||
}
|
||
|
||
/*–– Botones ––*/
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 0.75rem 1.25rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
cursor: pointer;
|
||
}
|
||
.btn:hover {
|
||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||
}
|
||
.btn:focus {
|
||
outline: 2px solid rgba(255,255,255,0.6);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Botón principal */
|
||
.btn-primary {
|
||
background-color: var(--brand-orange);
|
||
color: #222;
|
||
border: none;
|
||
}
|
||
.btn-primary:hover {
|
||
background-color: #ee993f;
|
||
}
|
||
|
||
/* Botón secundario */
|
||
.btn-secondary {
|
||
background-color: transparent;
|
||
border: 2px solid var(--brand-orange);
|
||
color: var(--brand-orange);
|
||
}
|
||
.btn-secondary:hover {
|
||
background-color: var(--brand-orange);
|
||
color: #222;
|
||
}
|
||
|
||
/*–– Formularios ––*/
|
||
form {
|
||
max-width: 360px;
|
||
margin: 0 auto; /* centra el bloque del formulario */
|
||
width: 100%;
|
||
}
|
||
form label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
form input,
|
||
form select,
|
||
form textarea {
|
||
width: 100%;
|
||
padding: 0.5rem 1rem;
|
||
margin-bottom: 1rem;
|
||
border: none;
|
||
border-radius: 0.375rem;
|
||
background-color: #fff;
|
||
color: #333;
|
||
font-size: 1rem;
|
||
box-sizing: border-box;
|
||
}
|
||
form input:focus,
|
||
form select:focus,
|
||
form textarea:focus {
|
||
outline: 2px solid var(--brand-orange);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/*–– Animaciones hero ––*/
|
||
@keyframes scaleFade {
|
||
0% { opacity: 0; transform: scale(.7) }
|
||
100% { opacity: 1; transform: scale(1) }
|
||
}
|
||
.hero-appear { animation: scaleFade .6s ease-out both }
|
||
|
||
/*–– Logos ––*/
|
||
.logo-big { width: 60% }
|
||
.logo-small { width: 100px }
|
||
|
||
/*-- Texto matemático --*/
|
||
label sub,
|
||
label sup {
|
||
font-size: 0.75em;
|
||
vertical-align: baseline;
|
||
position: relative;
|
||
top: 0.25em;
|
||
}
|
||
|
||
/*–– Medallas ––*/
|
||
.text-gold { color: #FFD700 !important; }
|
||
.text-silver { color: #C0C0C0 !important; }
|
||
.text-bronze { color: #CD7F32 !important; }
|
||
|
||
/*–– Tabla animada ––*/
|
||
#ranking-table tbody tr {
|
||
transition: transform .4s ease, opacity .4s ease;
|
||
}
|