/* ============================================================ TOKENS — único archivo que define la dirección visual. Jorge dicta los valores; nada de esto está decidido. Los valores actuales son PLACEHOLDER neutros. ============================================================ */ :root { /* --- COLOR ------------------------------------------------ */ --c-bg: #ffffff; /* fondo base BLANCO */ --c-bg-dark: #0a0a0a; /* secciones de ficción */ --c-bg-campaign: #c9c9c1; /* crudo verdoso de campaña */ --c-ink: #0a0a0a; --c-ink-inv: #f2f2f2; --c-rule: rgba(0,0,0,.35); --c-accent: #c0392b; /* rojo de anotación (3202) */ --c-brand: #ffffff; /* JORG ADOT sobre la foto */ /* Banda de la cabecera en móvil (referencia: hermes.com). Blanco translúcido con desenfoque: la foto se ve por debajo apagada, y JORG ADOT en blanco sigue leyéndose encima. Subir la opacidad aclara la banda y RESTA contraste al texto; bajarla la transparenta y se lo devuelve. */ --brand-band-bg: rgba(255,255,255,.13); --brand-band-blur: 22px; /* Banda de la cabecera una vez pasada la portada. Gris oscuro translúcido: el texto sigue en blanco y ahora contrasta contra el fondo claro que viene después de la foto. */ --brand-band-bg-pasada: rgba(26,26,26,.55); /* Holgura interna de la banda, arriba y abajo del texto. Es lo que decide su grosor. A un tercio del gutter la banda queda fina, ceñida a JORG ADOT. Súbelo y engorda. */ --band-pad: calc(var(--gutter) / 3); /* Alto total de la banda, DERIVADO de --band-pad: no hay que mantenerlo a mano. La foliación lo usa para arrancar por debajo y no montarse encima. 1.25rem ≈ la línea de JORG ADOT. */ --band-h: calc(env(safe-area-inset-top, 0px) + var(--band-pad) * 2 + 1.25rem); /* Margen de seguridad del hero, POR ENCIMA de la altura física ya medida. Debería bastar con 0. Súbelo sólo si en algún dispositivo concreto sigue asomando blanco. */ --hero-extra: 0px; /* --- TIPOGRAFÍA ------------------------------------------- */ --f-sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --f-mono: "Menlo", ui-monospace, "SF Mono", monospace; --fs-micro: 0.6875rem; /* 11px — foliación, pies */ --fs-small: 0.8125rem; /* 13px — cuerpo secundario */ --fs-body: 0.9375rem; /* 15px — cuerpo */ --fs-lead: 1.25rem; --fs-title: clamp(1.5rem, 3vw, 2.25rem); --fs-brand: clamp(0.75rem, 1vw, 1rem); /* Marca de portada: separación entre JORG y ADOT, y tracking interno. --brand-gap en ch se escala con el cuerpo de letra. */ --brand-gap: 12ch; --brand-track: 0.12em; --lh-tight: 1.15; --lh-body: 1.55; --ls-wide: 0.08em; --ls-micro: 0.12em; /* --- MÉTRICA / RETÍCULA ----------------------------------- */ --gutter: clamp(16px, 3vw, 40px); --col-fol: 46px; /* ancho de la columna de foliación */ --measure: 34ch; /* ancho máximo de párrafo */ --grid-cols: 12; /* --- ESPACIADO -------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 104px; /* --- LANDING ---------------------------------------------- */ /* Punto focal de la foto de portada. El primer valor es el eje X, el segundo el Y. 50% 42% deja la cara centrada y con aire arriba. */ --landing-focus: 50% 42%; --landing-focus-mobile: 50% 50%; /* móvil: centrada, recorta a los lados */ --landing-placeholder: #ffffff; /* blanco mientras carga */ /* TEMPORAL — altura del banco de pruebas para ver correr la foliación mientras no hay contenido. 800vh ≈ 8 pantallas. */ --test-scroll: 800vh; /* --- MOVIMIENTO ------------------------------------------- */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 680ms; /* --- FOLIACIÓN -------------------------------------------- */ /* Secuencia infinita. Impares izquierda, pares derecha. --fol-step px de scroll que hacen avanzar UN número. Es la "pantalla": súbelo para que avance despacio, bájalo para que corra. --fol-row alto de cada línea de la columna. Define cuántos números caben en pantalla. --fol-start primer número de la secuencia. */ --fol-step: 800px; --fol-row: 22px; --fol-start: 1; --fol-pad: 2; /* dígitos mínimos: 2 → 01, 3 → 001 */ --fol-dim: rgba(255,255,255,.45); /* números en reposo */ --fol-active: #ffffff; /* número activo */ /* Modo negativo: los números se restan del fondo, así que se invierten solos. Sobre foto oscura salen claros; sobre blanco, negros. difference → inversión dura, máximo contraste exclusion → lo mismo pero más suave en los medios tonos normal → lo desactiva y vuelven a ser blancos siempre OJO: sobre un gris del 50% la diferencia da otro gris del 50% y los números se desvanecen. Es el punto ciego del blend, no un fallo. */ --fol-blend: difference; /* Punto de la foto donde ARRANCA el fundido, en fracción de su alto: el momento en que la línea inferior de la cabecera lo alcanza. 0 → desde el primer píxel de scroll (actual) 0.20 → nacimiento del pelo 0.3333 → un tercio, altura de las cejas */ --fundido-ancla: 0; /* Cuánto scroll dura el fundido desde ese arranque. Súbelo para que el paso sea más lento y ceremonioso; bájalo y se vuelve brusco. */ --fundido-recorrido: 420px; /* recorrido de la inversión desde el arranque */ } /* Portada: fondo blanco. iOS tiñe las barras (estado y Safari) con el fondo del lienzo, así que ponerlo en html y body las deja blancas. */ html:has(body[data-page="home"]) { background: #fff; } body[data-page="home"] { background: #fff; } /* Inversión para secciones oscuras: basta con .is-dark en el contenedor */ .is-dark { --c-bg: var(--c-bg-dark); --c-ink: var(--c-ink-inv); --c-rule: rgba(255,255,255,.28); --fol-dim: rgba(255,255,255,.45); --fol-active: #ffffff; } .is-campaign { --c-bg: var(--c-bg-campaign); --c-ink: #17170f; }