/*
* assets/mocca.css — MOCCA:Lab
*
* ══════════════════════════════════════════════════════════════════════
* LA HOJA CORTA
* ══════════════════════════════════════════════════════════════════════
*
* Se carga DESPUÉS de theme.css y home.css y no repite nada de las dos.
* De home.css salen ya la barra, los botones, las fichas, la rejilla,
* los titulares de apartado y el pie; de theme.css, los colores y las
* tipografías. Aquí está sólo lo que en mocca.html es nuevo:
*
* 1 · la barra, que sale sólida y con dos marcas en vez de una
* 2 · la portada sin vídeo
* 3 · las tres líneas de investigación y los proyectos
* 4 · el equipo
* 5 · las publicaciones
*
* Todo en tokens del tema. La página se sirve con dataramslight fijo,
* como el resto del sitio, pero nada de aquí dentro tiene un color
* escrito a mano salvo donde se explica por qué.
*/
/* ══════════════════════════════════════════════════════════════════════
1 · BARRA
══════════════════════════════════════════════════════════════════════
La barra de home.css es fixed y en la portada se solapa con el hero,
que es un bloque de 92 vh puesto ahí para recibirla. Aquí no hay hero
que la sostenga, así que el hueco se lo hace el cuerpo. El número es
el alto de la barra, y sale de home.css: si allí cambia, aquí también. */
body.mocca {
padding-top: 68px;
/* El papel de esta página no es el gris del tema (#e9e7e1) sino una
crema de avena. Se hace redefiniendo --bg en el cuerpo y no pintando
un background: así lo heredan por igual el propio cuerpo y todo lo
que en las hojas compartidas lee ese token, sin tener que buscar
quién lo usa.
El tono está escogido contra DOS blancos a la vez, que es la
restricción de verdad: el de la baldosa del logotipo (#fff) y el
--surface de los apartados .alt (#fbfaf7). Una crema más clara se
confunde con el segundo y la alternancia de la página desaparece;
una más amarilla —el #f0ead6 del propio logotipo, por ejemplo— tira
a sobre de manila y le vira a verdoso el azul de marca que lleva al
lado el nombre desplegado.
La banda oscura de contacto no se entera de nada de esto. */
--bg: #f3ece2;
}
/* El separador entre las dos marcas. Es la misma pieza que lleva
qumeriq.html en app.css, repetida aquí porque home.css no la tiene:
la portada no necesita separar nada, sólo lleva un logotipo. */
.topbar-sep {
width: 1px;
height: 22px;
margin-inline: 12px 2px;
flex: 0 0 auto;
background: var(--border);
}
.mocca-brand {
display: inline-flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
padding: 8px 4px;
color: var(--text);
}
.mocca-brand-mark { width: 28px; height: 28px; flex: 0 0 auto; }
.mocca-brand-name {
font-family: var(--font-display, var(--font));
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
}
/* Los dos puntos del nombre son parte de él y no puntuación: separan las
siglas del sufijo igual que en QUMERIQ separa la marca del producto.
Se le baja el peso y se le da el azul para que se lea como una junta
y no como el final de una frase. */
.mocca-colon { color: var(--brand); font-weight: 500; }
.mocca-nav { margin-left: 18px; }
/* El botón de vuelta a la casa. No usa .btn-primary —que es blanco sobre
blanco, porque está pensado para el hero oscuro de la portada— sino un
contorno sobre el papel claro de la barra. */
.btn-outline {
border-color: var(--border);
color: var(--text);
background: transparent;
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.mocca-back { padding: 9px 18px; font-size: var(--fs-sm); }
/* La dirección de correo escrita como texto del enlace. Antes de que el
guion del final la junte, va partida —"diazsantos [at] zaalen [dot]
com"— y con el tamaño normal se leería como una frase rota. En
monoespaciado se lee como lo que es: una dirección. */
.mocca-mail { font-family: var(--font-mono, monospace); }
/* ── La barra en pantalla estrecha ─────────────────────────────────────
El corte es 1000 px porque es el de home.css: allí, por debajo de esa
anchura, .topnav se esconde entera y los apartados se van al cajón
lateral que abre la hamburguesa. Aquí no hay cajón —no hay JavaScript
que lo abra—, así que hay que DESHACER aquel display:none y darle otro
sitio al menú: la barra se parte en dos líneas y los cinco apartados
ocupan la segunda a lo ancho.
Se ve todo y no cuesta un botón que habría que programar para cinco
enlaces. Lo que cuesta son unos 40 px más de barra, que el cuerpo
compensa con su relleno superior, o el primer titular quedaría debajo. */
@media (max-width: 1000px) {
body.mocca { padding-top: 106px; }
html { scroll-padding-top: 118px; }
.topbar { height: auto; flex-wrap: wrap; padding-block: 9px; padding-inline: 16px; }
.topbar .mocca-nav {
display: flex;
order: 3;
width: 100%;
margin-left: 0;
margin-top: 2px;
justify-content: flex-start;
/* Cinco apartados en un móvil estrecho no caben ni en una línea
entera: que rueden en horizontal antes que romper la barra en
tres pisos. La barra de desplazamiento se oculta porque aquí es
ruido; el gesto de arrastrar sigue estando. */
overflow-x: auto;
scrollbar-width: none;
}
.topbar .mocca-nav::-webkit-scrollbar { display: none; }
.topbar-spacer { display: none; }
.topbar-actions { margin-left: auto; }
}
@media (max-width: 520px) {
.mocca-brand-name { display: none; }
.mocca-back { padding: 8px 14px; }
}
/* ══════════════════════════════════════════════════════════════════════
2 · PORTADA
══════════════════════════════════════════════════════════════════════
Un apartado normal, no un hero: mismo relleno vertical que los demás y
sin fondo propio. La diferencia con el resto está en el cuerpo de
letra, que es el de una portada, y en que el logotipo va delante del
título en lugar de a un lado. */
.mocca-hero { padding-bottom: clamp(48px, 6vw, 84px); }
.mocca-hero .wrap { max-width: 900px; }
/* ── La pareja marca + nombre ──────────────────────────────────────────
Icono a un lado, nombre y qué es al otro, como en el hero de
qumeriq.html. flex-wrap y no una rejilla de dos columnas: cuando el
sitio se acaba, la baldosa se sube sola encima del nombre y no hay que
escribir una segunda composición para el móvil. */
.mocca-lockup {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(18px, 2.6vw, 34px);
margin-bottom: clamp(22px, 3vw, 36px);
}
/* flex-basis 300 px y no auto: con auto, la base del bloque de texto es
su ancho máximo —el nombre desplegado en una sola línea, 709 px— y
entre la baldosa y ese número no cabía nada, así que el texto se caía
debajo. Con la base en 300 px ocupa el hueco que queda y el nombre
desplegado se parte en dos líneas, que es lo que tiene que hacer; por
debajo de esos 300 px de hueco sí se va abajo, que es cuando toca. */
.mocca-lockup-text { flex: 1 1 300px; min-width: 0; }
/* La baldosa. Blanca y fija, no var(--surface): el mosaico dibuja la taza
con puntos color hueso (#f0ead6, la clase .p-mug del fichero) y sobre
cualquier crema —la de esta página incluida— esos puntos pierden
cuerpo y la taza se queda en el contorno khaki. El blanco es lo único
que la sostiene entera, y de paso es lo que separa la marca del papel.
El redondeo se escribe a mano y no con var(--radius-lg) a propósito:
en dataramslight ese token vale 3 px —el lenguaje Braun no redondea— y
lo que se ha pedido aquí es una baldosa de esquinas redondeadas. Va
proporcional al lado para que a cualquier tamaño se vea el mismo
redondeo relativo. */
.mocca-tile {
display: grid;
place-items: center;
flex: 0 0 auto;
width: clamp(104px, 14vw, 168px);
aspect-ratio: 1;
padding: clamp(10px, 1.4vw, 18px);
background: #fff;
border-radius: clamp(16px, 2.2vw, 26px);
}
.mocca-tile img { width: 100%; height: auto; }
.mocca-hero-title {
margin: 0 0 8px;
font-size: clamp(2.4rem, 5.4vw, 4rem);
line-height: 1;
letter-spacing: -0.035em;
}
/* El nombre desplegado. Va en versalitas espaciadas y no en cuerpo
grande: es una glosa de las siglas, no un segundo titular, y a cuerpo
grande competiría con el de arriba. Los del HTML atan las
parejas que no deben partirse ("Mathematical Modeling",
"Computational Cancer Analytics"). */
.mocca-hero-expanded {
margin: 0;
font-size: var(--fs-base);
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
line-height: 1.5;
color: var(--brand);
}
.mocca-hero-lead { max-width: 68ch; }
.mocca-hero-note {
margin: 18px 0 0;
padding-left: 16px;
border-left: 2px solid var(--brand-mid);
max-width: 60ch;
font-size: var(--fs-base);
color: var(--text-2);
}
.mocca-hero-actions { margin-top: 32px; }
/* ══════════════════════════════════════════════════════════════════════
3 · LÍNEAS DE INVESTIGACIÓN Y PROYECTOS
══════════════════════════════════════════════════════════════════════ */
/* El número de línea, en grande y apagado. Es la única cifra decorativa
de la página y hace el trabajo de un icono sin tener que dibujar tres
metáforas de "modelo matemático", que siempre salen mal. */
.mocca-line-no {
font-family: var(--font-mono, monospace);
font-size: 1.9rem;
font-weight: 700;
line-height: 1;
color: var(--brand-mid);
}
.mocca-line h3 { margin-top: 2px; }
/* Un subtitular dentro del apartado, por debajo del h2 y por encima de
los h3 de las fichas. */
.mocca-sub {
margin: clamp(40px, 5vw, 64px) 0 18px;
font-size: var(--fs-xl);
letter-spacing: -0.015em;
}
/* Los proyectos: nombre a la izquierda, qué es a la derecha. En columna
por debajo de 700 px, que es donde el nombre y el texto dejan de
caber uno al lado del otro sin partirse. */
.mocca-projects { margin: 0; display: grid; gap: 1px; background: var(--border-dim); }
.mocca-project {
display: grid;
grid-template-columns: 190px 1fr;
gap: 6px 28px;
padding: 18px 2px;
background: var(--surface);
}
.mocca-project dt {
font-family: var(--font-mono, monospace);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--brand);
}
.mocca-project dd { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text-2); }
.section.alt .mocca-project { background: var(--surface); }
@media (max-width: 700px) {
.mocca-project { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════════════════════════════
4 · EQUIPO
══════════════════════════════════════════════════════════════════════
Dos fichas anchas, retrato y texto. Con dos personas, una rejilla de
tarjetas cuadradas dejaría media sección vacía; así cada uno tiene
sitio para tres párrafos, que es lo que se lee en un laboratorio
pequeño —y lo que hacen las páginas que sirvieron de referencia. */
.mocca-team { display: grid; gap: 18px; }
.mocca-member {
display: grid;
grid-template-columns: 260px 1fr;
gap: clamp(22px, 3vw, 40px);
align-items: start;
padding: clamp(22px, 2.6vw, 32px);
background: var(--surface);
border: 1px solid var(--border-dim);
border-radius: var(--radius-md);
}
/* El retrato lleva la proporción escrita en el CSS y no sólo en los
atributos width/height del HTML: así el hueco está reservado desde la
primera pintura y la ficha no da un salto cuando la imagen llega.
object-fit recorta al encuadre en vez de deformar la cara, que es lo
que pasaría con una foto vertical metida en una caja 4:5. */
.mocca-portrait {
width: 100%;
/* height:auto es obligatorio y no cosmético: el ![]()
lleva width y
height escritos como atributos —hacen falta ahí para que el navegador
reserve el hueco antes de bajar la imagen— y ese height presentacional
gana a aspect-ratio, que sólo entra cuando una de las dos dimensiones
es automática. Sin esta línea la foto salía con sus 1235 px de alto
naturales dentro de una columna de 260. */
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 28%;
border-radius: var(--radius-md);
background: var(--surface-2);
}
.mocca-member-body h3 { margin: 0 0 4px; font-size: var(--fs-xl); letter-spacing: -0.015em; }
.mocca-member-degrees {
margin: 0 0 2px;
font-family: var(--font-mono, monospace);
font-size: var(--fs-sm);
color: var(--brand);
}
.mocca-member-role {
margin: 0 0 16px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-3);
}
.mocca-member-body p { margin: 0 0 12px; font-size: var(--fs-base); line-height: 1.65; color: var(--text-2); }
.mocca-member-body p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
.mocca-member { grid-template-columns: 1fr; }
/* En columna, el retrato a tamaño completo ocuparía una pantalla entera
antes de llegar al texto. Se le pone tope y se alinea al principio. */
.mocca-portrait { max-width: 230px; }
}
/* ══════════════════════════════════════════════════════════════════════
5 · PUBLICACIONES
══════════════════════════════════════════════════════════════════════
Un sin numerar: el orden importa —van de más reciente a más
antigua— pero la cifra no aporta nada, y una lista numerada de nueve
entradas invita a contarlas, que es justo la lectura que no interesa
en un grupo joven. El año hace de ancla a la izquierda. */
.mocca-pubs { margin: 0; padding: 0; list-style: none; }
.mocca-pub {
display: grid;
grid-template-columns: 90px 1fr;
gap: 4px 24px;
padding: 22px 0;
border-top: 1px solid var(--border-dim);
}
.mocca-pub:last-child { border-bottom: 1px solid var(--border-dim); }
.mocca-pub-year {
font-family: var(--font-mono, monospace);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--brand);
line-height: 1.3;
}
/* La etiqueta de tipo. Es lo que distingue un artículo revisado por
pares de un póster de congreso, y ponerla delante del título evita la
trampa habitual de estos listados: que todo parezca lo mismo. */
.mocca-pub-kind {
display: inline-block;
margin-bottom: 7px;
padding: 3px 9px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.05em;
color: var(--text-3);
}
.mocca-pub h3 {
margin: 0 0 6px;
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
}
.mocca-pub-where { margin: 0 0 6px; font-size: var(--fs-base); color: var(--text-2); }
/* La lista de autores es la letra pequeña de la entrada: se lee cuando
se busca un nombre, no cuando se recorre el listado. */
.mocca-pub-authors { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-3); }
.mocca-pub-authors strong { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
.mocca-pub { grid-template-columns: 1fr; gap: 8px; }
.mocca-pub-year { font-size: var(--fs-base); }
}
/* ══════════════════════════════════════════════════════════════════════
6 · CONTACTO
══════════════════════════════════════════════════════════════════════
El logotipo encabeza la banda oscura igual que el de zaalen encabeza
NOSOTROS en la portada, y con la misma clase para heredar su escala.
La única diferencia es que éste es un ![]()
y no un