/* Hallmark · tokens de la portada de novaris.run * theme: custom · vibe: "cronometraje deportivo, marino, oro en bloque" * paper: #0F1F3A oklch(24% 0.056 260) · accent: #C8A44D oklch(73% 0.114 87) * display: Space Grotesk · body: IBM Plex Sans · outlier: IBM Plex Mono * axes: dark / geometric-sans / warm * * Esta hoja es EL sistema. `portada.css` no puede escribir un color ni una * familia tipográfica que no salga de aquí; si hace falta un valor nuevo, se * añade como token con nombre y se referencia. Es lo que impide que a la * tercera edición la página tenga ocho colores en vez de tres. * * NOTA SOBRE EL TINTE. El manual dice teñir los neutros hacia el tono del * acento. Aquí NO: el papel se tiñe hacia el azul 260 porque el marino es la * marca, y el oro es la señal, no el ambiente. Es una desviación deliberada, * escrita aquí para que se vea que es una decisión y no un descuido. */ /* --- Tipografías, servidas desde el propio dominio -------------------------- Sin Google Fonts ni ningún CDN: el proyecto entero se sostiene sin recursos ajenos, y una portada que depende de un tercero se cae cuando ese tercero se cae. Los tres archivos pesan 83 kB juntos y sólo traen el juego latino. Space Grotesk e IBM Plex Sans son variables: un archivo cubre todos los pesos del rango. Licencia SIL Open Font License 1.1 (ver fuentes/LEEME.md). `font-display: swap` para que el texto se lea antes de que llegue la fuente. */ @font-face { font-family: "Space Grotesk"; src: url("fuentes/space-grotesk-var.woff2") format("woff2-variations"), url("fuentes/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("fuentes/ibm-plex-sans-var.woff2") format("woff2-variations"), url("fuentes/ibm-plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fuentes/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* --- Color ------------------------------------------------------------- Cuatro capas: papel (el fondo y sus elevaciones), tinta (el texto), neutros (las reglas y lo apagado) y UN acento. Ni un negro puro ni un blanco puro en toda la hoja: los dos se leen como sintéticos. */ /* LOS COLORES NO SE INVENTAN AQUÍ. Salen de `app-pc/web/estilo.css`, la hoja de la app de PC (rama `jessac/srs-andamiaje`), que es donde vive la paleta de marca de Novaris. Se copian sus valores exactos, no aproximaciones, para que la web y la app sean el mismo producto y no dos parecidos. El OKLCH va al lado de cada uno, medido, porque es lo que permite razonar sobre claridad y saturación; el hexadecimal es el que manda, porque es el que hay que poder comparar con la app de un vistazo. De la app se toman tal cual: --azul #162B4E el azul de la marca, y el fondo que traen los PNG --azul-hondo #0F1F3A --azul-medio #24406B --azul-tenue #EDF1F8 --oro #C8A44D reservado a la acción principal y al podio --oro-claro #E0BE6A Los estados de la app (#0E7A5F verde · #A9650B ámbar · #B3261E rojo) no aparecen en esta página porque aquí no hay nada que pueda estar en un estado; si algún día lo hay, salen de ahí y no de otro sitio. LA DIFERENCIA CON LA APP, Y POR QUÉ. La app de PC es clara (papel blanco sobre #F1F3F7) porque es un instrumento que se mira a pleno sol en la meta. Esta página es oscura porque es una presentación y se mira de noche, en un teléfono, en el sofá. Los colores son los mismos; lo que cambia es cuál hace de fondo y cuál de tinta. */ /* Papel. Se eleva subiendo la claridad, nunca con sombra: una sombra sobre fondo oscuro no es profundidad, es un halo. */ --color-paper: #0F1F3A; /* azul-hondo · oklch(24% 0.056 260) */ --color-paper-2: #162B4E; /* EL azul de la marca · oklch(29% 0.070 260) */ --color-paper-3: #24406B; /* azul-medio · oklch(37% 0.082 259) */ /* Reglas y neutros. Derivados entre el azul de marca y el azul-medio: la app no trae filetes para fondo oscuro porque no tiene fondo oscuro. */ --color-rule: #2B4A78; --color-rule-2: #1E3559; --color-neutral: #5E6B84; /* --tenue de la app · oklch(53% 0.043 263) */ --color-muted: #93A6C4; /* derivado; 6.0:1 sobre el azul-medio */ /* Tinta. Los dos claros de la app, sin blanco puro en ninguna parte. */ --color-ink: #EDF1F8; /* azul-tenue · 14.5:1 sobre el papel */ /* El mismo azul-tenue, usado como PAPEL en las pantallas claras. Apple alterna blanco y gris claro entre secciones; aquí se alterna el marino con este, que ya es de la marca. Las fotos de producto sobre fondo blanco se funden con él en vez de recortarse como un parche. */ --color-papel-claro: #EDF1F8; --color-tinta-clara: #162B4E; /* el texto sobre ese papel */ --color-ink-2: #B9C6DC; /* el mismo gris azulado de su barra · 9.5:1 */ /* Acento. Uno solo, el oro de la marca. El macizo va con `--color-accent` y el texto de acento con el claro, que sobre azul se lee a 9.2:1. */ --color-accent: #C8A44D; /* --oro · oklch(73% 0.114 87) */ --color-accent-claro: #E0BE6A; /* --oro-claro · oklch(81% 0.110 88) */ --color-accent-2: var(--color-accent-claro); --color-accent-ink: #0F1F3A; /* texto SOBRE el bloque de oro · 6.95:1 */ /* El oro de marca sobre papel claro da 2.1:1 y no se lee: sirve de relleno, no de tinta. Cuando una cifra o un titular tienen que ir en oro sobre claro, va este, que es el mismo tono bajado de luminosidad hasta 4.3:1. */ --color-accent-tinta: #8F6E15; --color-focus: #E0BE6A; /* --- Tipografía -------------------------------------------------------- Tres familias, que es el techo: una de titulares, una de texto y una monoespaciada que sólo aparece en dos sitios (el reloj y los ordinales de los pasos). Ninguna es Inter, Roboto, Poppins ni Montserrat. */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Escala de tercera mayor (1.25) desde 16 px. Cinco tamaños en uso; más jerarquía se saca con peso y color, no con otro tamaño. */ --text-xs: 0.8rem; /* 12.8 px */ --text-sm: 0.875rem; /* 14 px */ --text-base: 1rem; /* 16 px */ --text-md: 1.125rem; /* 18 px */ --text-lg: 1.5625rem; /* 25 px */ --text-xl: 1.9531rem; /* 31.25 px */ --text-2xl: 2.4414rem; /* 39 px */ --text-3xl: 3.0518rem; /* 49 px */ /* El titular del hero mide 29 caracteres y usa `display`. La primera versión medía 63 y había que bajarla a `display-s`, porque un titular largo a tamaño máximo es el delator más fiable que existe. Se acortó el texto en vez de encoger la letra, que es el orden correcto de los arreglos. */ --text-display: clamp(2.75rem, 5vw + 0.75rem, 4.75rem); --text-display-s: clamp(2rem, 2.5vw + 0.7rem, 3.125rem); --text-reloj: clamp(3rem, 9vw, 7rem); /* --- La escala de la referencia, medida en su CSS ------------------------- Apple usa una sola familia, DOS pesos (400 y 600) y estos tamaños. El espaciado entre letras es negativo en los grandes y positivo en los pequeños; el interlineado baja conforme sube el tamaño. Ninguna mayúscula en ningún titular. Aquí se toman los valores y se sirven con Space Grotesk, que es variable y tiene el 600. */ --ap-titular-portada: clamp(2.5rem, 4.4vw, 4rem); /* 64 px */ --ap-titular-seccion: clamp(2rem, 3.3vw, 3rem); /* 48 px · lh 1,083 · ls -0,003em */ --ap-tarjeta: 1.75rem; /* 28 px · lh 1,142 · ls +0,007em */ --ap-etiqueta: 1.5rem; /* 24 px */ --ap-antetitulo: 1.3125rem; /* 21 px · lh 1 */ --ap-cuerpo: 1.0625rem; /* 17 px · lh 1,235 · ls -0,022em */ --ap-cuerpo-menor: 0.875rem; /* 14 px · lh 1,428 */ --ap-pie: 0.75rem; /* 12 px · lh 1,333 */ --peso-titular: 600; --peso-cuerpo: 400; /* --- Espacio ----------------------------------------------------------- Base de 4 pt, nueve escalones, nombrados por papel y no por tamaño. */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; /* --- La retícula, copiada del sistema de Apple --------------------------- Medido en `apple.com/iphone-duo`, no aproximado. Su caja es: .viewport-content { margin-inline: auto; width: 87.5%; max-width: var(--global-content-max-width); } Lo que cambia la sensación no es el ancho máximo, es el `87.5%`: el margen lateral es PROPORCIONAL, así que en un monitor de 1920 px quedan 120 px de aire a cada lado en vez de los 56 fijos que había aquí. Una caja que se pega a los bordes en pantalla grande es lo que hacía que esto se leyera como un documento y no como una página de producto. El hero va más ancho que el resto, también como ellos. */ --caja-ancho: 87.5%; --ancho: 78.75rem; /* 1260 px, su --global-content-max-width */ --ancho-hero: 105rem; /* 1680 px, su --global-content-max-width-hero */ --gutter: clamp(1.25rem, 6.25vw, 7.5rem); /* Paddings de sección, con los valores suyos: el de abajo SIEMPRE mayor que el de arriba (144 arriba / 224 abajo en pantalla grande). Ese desequilibrio es lo que hace que cada sección respire hacia la siguiente. */ --pad-seccion: clamp(4rem, 9vw, 9rem); /* 64 → 144 px */ --pad-seccion-final: clamp(6rem, 14vw, 14rem); /* 96 → 224 px */ /* --- Reglas y cantos --------------------------------------------------- Radio cero en toda la página, y es la decisión más visible de todas: la esquina recta es lo que separa a esto de una plantilla. */ --rule: 1px; --rule-2: 2px; --radius: 0; /* --- Movimiento -------------------------------------------------------- Tres duraciones y tres curvas. La curva por defecto del navegador (`ease`) no se usa: se nota que nadie la eligió. */ --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* --- Capas ------------------------------------------------------------- Seis niveles con nombre. Nada de `z-index: 9999`. */ --z-base: 1; --z-raised: 10; --z-sticky: 200; /* Alto de la barra fija. Vive aquí y no suelto en la hoja porque lo usan tres sitios: la propia barra, la pista del corredor que cuelga debajo y el desplazamiento de las anclas (`scroll-padding-top`). Cuando eran dos barras este número era 96 px repartido en reglas distintas, y cambiar una sin la otra descuadraba todos los enlaces internos. */ --alto-barra: 64px; }