/*! BaseBlue — sistema. Designed and developed by Luis Koepke — https://www.luiskoepke.com */
/* ==========================================================================
SISTEMA COMPARTIDO
Lo que todas las páginas tienen en común: superficies, tipografía,
rejilla, rótulos, botones, filetes, entradas y las dos piezas que el Home
y las páginas interiores comparten tal cual (el render a sangre `pbleed` y
las filas con enlace `prows`). Los valores salen de `base.css`.
========================================================================== */
/* ================================================================ Secciones */
/* Una capa de fondo por sección: papel, tinta o imagen a sangre. La
jerarquía la dan el aire y la tipografía, no los recuadros. */
.sec {
position: relative;
padding-block: var(--sec-pad);
scroll-margin-top: 0;
isolation: isolate;
}
.sec[data-surface="paper"] { background: var(--bb-paper); color: var(--bb-navy); --muted: var(--muted-paper); --text2: var(--text2-paper); --rule: var(--rule-paper); --accent: var(--bb-flood); --error: var(--error-paper); }
.sec[data-surface="ink"] { background: var(--bb-ink); color: var(--bb-pale); --muted: var(--muted-ink); --text2: var(--text2-ink); --rule: var(--rule-ink); --accent: var(--bb-sky); --error: var(--error-ink); }
/* Sobre el azul, los metadatos suben al 76 %: al 68 % no pasaban AA. */
.sec[data-surface="flood"] { background: var(--bb-flood); color: #fff; --muted: rgba(255, 255, 255, 0.76); --text2: rgba(255, 255, 255, 0.86); --rule: rgba(255, 255, 255, 0.22); --accent: #fff; --error: var(--error-ink); }
/* RITMO (RONDA4 §2.1), para el Home y las páginas por igual.
1. Distinta superficie: cada lado conserva su `--sec-pad`; el color ya
separa.
2. Misma superficie: la entrante arranca a `--sec-join` y dibuja un
filete de 1 px en la retícula (el `pline` automático), que se traza
al entrar (`is-joined`, lo pone site.js).
3. Tras un medio a sangre, relleno completo y sin filete: la imagen ya
es el corte.
Una sección que no deba unirse (escena fijada, medio a sangre arriba)
lleva `data-join="none"`. Especificidad de `.sec` a propósito: el CSS
propio de una sección siempre puede corregirlo. */
.sec:where(main > [data-surface="paper"] + [data-surface="paper"], main > [data-surface="ink"] + [data-surface="ink"]):not([data-join="none"]) {
padding-top: var(--sec-join);
}
.sec:where(main > [data-surface="paper"] + [data-surface="paper"], main > [data-surface="ink"] + [data-surface="ink"]):not([data-join="none"], .pline-sec, :has(> .pbleed:first-child))::before {
content: "";
position: absolute;
top: 0;
/* La retícula: el `--margin` dentro del tope `--max`, centrado. */
left: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
right: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
height: 1px;
background: var(--rule);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform var(--dur-4) var(--ease-io);
pointer-events: none;
}
.sec.is-joined::before { transform: none; }
.sec:where(main > .sec:has(> .pbleed:last-child) + .sec) { padding-top: var(--sec-pad); }
.sec:where(main > .sec:has(> .pbleed:last-child) + .sec)::before { content: none; }
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--margin);
}
.grid {
display: grid;
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
column-gap: var(--gutter);
}
@media (orientation: portrait), (max-width: 899px) {
.grid { --cols: 4; }
}
/* ================================================================== Rótulos */
/* El rótulo es una nota al margen, no una etiqueta de interfaz: en caja de
frase, sin tracking, sin cuadro, en la tinta apagada. Como mucho uno por
sección, y solo si dice algo que el titular no dice. */
.eyebrow {
display: inline-flex;
align-items: baseline;
gap: 0.6em;
font-size: var(--t-eyebrow);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
.eyebrow::before { content: none; }
/* La ÚNICA forma permitida de mayúsculas: el estado de un proyecto (una vez
por página) y las cabeceras de columna de una ficha técnica. Sin fondo,
sin borde y sin marcador. */
.caps {
font-size: var(--t-caps);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* ================================================================= Titulares */
/* Un titular es UNA afirmación de una o dos líneas: la continuación va en
el cuerpo, no en una segunda tinta. */
.display {
font-size: var(--t-display);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
max-width: 18ch;
}
.h2 {
font-size: var(--t-h2);
font-weight: 300;
line-height: 1.12;
letter-spacing: -0.016em;
text-wrap: balance;
max-width: 22ch;
}
.h3 {
font-size: var(--t-h3);
font-weight: 400;
line-height: 1.24;
letter-spacing: -0.008em;
}
.display em, .h2 em, .lead em { font-style: normal; color: inherit; }
.lead {
font-size: var(--t-lead);
font-weight: 300;
line-height: 1.42;
letter-spacing: -0.004em;
text-wrap: pretty;
max-width: 40ch;
}
/* El cuerpo se lee al 80 %; el 64 % queda para metadatos y pies. */
.body {
font-size: var(--t-body);
font-weight: 300;
line-height: 1.6;
color: var(--text2);
max-width: 56ch;
text-wrap: pretty;
}
.small {
font-size: var(--t-small);
font-weight: 300;
line-height: 1.5;
color: var(--muted);
}
/* Texto claro a 300 sobre tinta, a 16–17 px, se empasta: sube a 400. */
[data-surface="ink"] .body, [data-surface="ink"] .lead { font-weight: 400; }
/* Cifra: mismo peso que los titulares y sin interlineado negativo; es un
dato que se lee, no un grafismo. Aparece ya en su valor final: nunca se
anima con conteo (un contador enseña valores que no existen). */
.num {
font-size: var(--t-num);
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: lining-nums tabular-nums;
}
.num sup, .num .unit {
font-size: max(0.34em, 1.25rem);
font-weight: 300;
letter-spacing: 0;
vertical-align: top;
margin-left: 0.16em;
position: relative;
top: 0.2em;
}
/* Cabecera de sección: rótulo en las primeras columnas y la afirmación en
las ocho restantes, como en un informe técnico. El rótulo cuelga de la
altura de mayúsculas de la primera línea del titular: con Outfit
(ascendente 1, descendente 0,26, versal 0,676) la versal queda a
(lh / 2 − 0,306) × cuerpo del borde de la línea. */
.sec__head { row-gap: 2.4rem; align-items: start; --head-cap: calc(var(--t-display) * 0.234); }
.sec__head:has(> .h2) { --head-cap: calc(var(--t-h2) * 0.254); }
.sec__head:has(> .lead) { --head-cap: calc(var(--t-lead) * 0.404); }
.sec__head > .eyebrow {
grid-column: 1 / span 3;
padding-top: max(0px, calc(var(--head-cap) - var(--t-eyebrow) * 0.344));
}
.sec__head > .sec__title { grid-column: 5 / -1; }
.sec__head > .sec__body { grid-column: 5 / span 6; margin-top: calc(var(--head-gap) - 2.4rem); }
@media (orientation: portrait), (max-width: 899px) {
.sec__head { row-gap: 1.6rem; }
.sec__head > .eyebrow, .sec__head > .sec__title, .sec__head > .sec__body { grid-column: 1 / -1; padding-top: 0; margin-top: 0; }
}
/* ================================================================== Filetes */
.rule { display: block; height: 1px; background: var(--rule); border: 0; margin: 0; }
/* ================================================================== Botones */
.btn {
--btn-bg: var(--bb-flood);
--btn-fg: #fff;
position: relative;
display: inline-flex;
align-items: center;
gap: 1.2em;
padding: 1.15em 1.5em 1.15em 1.7em;
border-radius: var(--r-s);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--t-small);
font-weight: 400;
letter-spacing: 0.01em;
overflow: hidden;
isolation: isolate;
transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
/* El relleno entra desde abajo como una carga, no como un cambio de color:
es un gesto de forma, así que va en `--dur-2`. */
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--btn-hover, #0a1b2b);
transform: translateY(101%);
transition: transform var(--dur-2) var(--ease-out);
}
.btn:focus-visible::before { transform: none; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.btn:hover::before { transform: none; }
.btn:hover svg { transform: translateX(0.4rem); }
}
/* Pulsado (táctil y ratón): respuesta inmediata, en `--dur-1`. */
.btn:active { transform: scale(0.98); }
/* Ocupado (envío): mismo ancho, cursor de espera y un anillo en lugar de la flecha. */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] svg { opacity: 0; }
.btn[aria-busy="true"]::after {
content: "";
position: absolute;
right: 1.5em;
top: 50%;
width: 1.1em;
height: 1.1em;
margin-top: -0.55em;
border: 1.5px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: bb-spin 0.8s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: 0.6; } }
/* Botón claro para ir sobre tinta o sobre imagen: macizo y callado. */
.btn--paper { --btn-bg: var(--bb-paper); --btn-fg: var(--bb-navy); --btn-hover: #fff; }
/* Enlace con flecha en escuadra: «↳ Learn more». */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.8em;
font-size: var(--t-small);
font-weight: 400;
color: inherit;
}
.link-arrow svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out); }
.link-arrow:focus-visible span { background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) {
.link-arrow:hover svg { transform: translateX(0.4rem); }
.link-arrow:hover span { background-size: 100% 1px; }
}
/* Pulsado de los enlaces de texto: un apagado breve, igual en todo el sitio. */
.link-arrow, .foot__link, .menu__link, .menu__home, .menu__legal a, .foot__legal a, .phero__crumb a { -webkit-tap-highlight-color: transparent; }
.link-arrow:active, .foot__link:active, .menu__link:active, .menu__home:active, .menu__legal a:active, .foot__legal a:active, .phero__crumb a:active { opacity: 0.6; }
/* Táctil: los enlaces pequeños crecen hacia fuera hasta 44 px de alto sin
mover la maqueta (WCAG 2.5.8; HIG). */
@media (pointer: coarse) {
.link-arrow, .foot__link, .phero__crumb a, .foot__legal a, .menu__legal a, .hdr__brand {
padding-block: 1.2rem;
margin-block: -1.2rem;
}
}
/* ==================================================================== pbleed */
/* Un render (o un vídeo) protagonista, con su pie debajo: la misma pieza en
el Home y en las páginas. A sangre ocupa las 100vw; `--cols` lo lleva a
diez columnas (3–12) con su proporción nativa. Nunca va en tarjeta, en
miniatura ni con texto encima, y siempre en su color. El fondo papel-2 es
solo el marcador mientras carga. El foco de cada imagen va en `--pos`.