/* Hallmark · macrostructure: Workbench · tone: utilitario · anchor hue: 256 (azul) * theme: custom · vibe: "sabio, pragmatico, no femenino por cliche" * paper oklch(98.8% 0.001 106) · accent oklch(78.9% 0.071 247) * display: Sentient · body: Public Sans * axes: light paper / roman-serif display / cool accent */ :root{ /* superficie */ --color-papel: oklch(98.8% 0.001 106.4); --color-papel-2: oklch(96.4% 0.002 106.4); --color-tinta: oklch(20.0% 0.009 264.4); --color-linea: oklch(89.3% 0.005 106.5); /* 53% y no 54.4%: sobre --color-papel daba 4.80, de sobra, pero sobre --color-papel-2 se quedaba en 4.48 contra un mínimo de 4.5. Dos centésimas, y aparecían en cuatro páginas a la vez porque el que estaba corto era el token, no las páginas. A 53% da 5.09 y 4.75. */ --color-tenue: oklch(53% 0.009 260.7); --color-foco: oklch(45.0% 0.140 256.0); /* paleta D · azul a verde (Sanzo c106+c074), ampliada con los companeros que el propio Sanzo pone junto a estos colores en sus combinaciones */ --pal-d-fondo: oklch(19.8% 0.131 268.8); /* #06004f tinta azul · c106 */ --pal-d-luz: oklch(71.2% 0.132 169.1); /* #2dbc94 verde luz · c074 */ --pal-d-luz-2: oklch(58.3% 0.103 214.9); /* #008aa1 teal · c106 */ /* profundidades */ --d-sombra: oklch(22.0% 0.035 158.0); /* #0f261f verde casi negro · c271 con 2dbc94 */ --d-pizarra: oklch(31.5% 0.041 233.0); /* #1b3644 azul pizarra · c263 */ --d-medio: oklch(33.5% 0.169 271.0); /* #202d85 azul medio · c289 con 06004f */ /* luces */ --d-verde-seco: oklch(66.0% 0.055 163.0); /* #65a98f verde apagado · c293 */ --d-azul-papel: oklch(78.9% 0.071 247.5); /* #96bfe6 azul papel · c330 con 2dbc94 */ --d-hielo: oklch(94.0% 0.055 167.0); /* #bfffe6 verde hielo · c302 y c330 */ /* senal: el unico calido que Sanzo pone en duo directo con el teal */ --d-senal: oklch(78.5% 0.163 75.0); /* #ffab00 ambar · c114 con 008aa1 */ } /* azul a verde es la paleta de la marca; ya no hay alternativas */ :root{ --color-sombra:var(--d-sombra); --color-pizarra:var(--d-pizarra); --color-medio:var(--d-medio); --color-seco:var(--d-verde-seco); --color-azulp:var(--d-azul-papel); --color-hielo:var(--d-hielo); --color-senal:var(--d-senal); /* activa, la reescribe el riel */ /* tipografia */ --font-sentient: "Sentient", Georgia, serif; --font-sistema-mono: ui-monospace, "SF Mono", Menlo, monospace; --font-ibm: "IBM Plex Mono", ui-monospace, monospace; --font-mono: var(--font-ibm); /* cerrada */ /* escala: tres tamanos, no siete */ --text-display: clamp(2rem, 5.4vw, 3.4rem); --text-body: 1.125rem; --text-small: 0.8125rem; /* espacio 4pt */ --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --rule: 1px; --radius: 14px; --dur-fast: 120ms; --dur-base: 220ms; --ease-out: cubic-bezier(.22,.61,.36,1); } /* azul a verde es la paleta de la marca; ya no hay alternativas */ /* --- finalistas --- */ :root{ --font-publicsans:"Public Sans", -apple-system, system-ui, sans-serif; --font-display: var(--font-sentient); /* cerrada */ --peso-display: 300; --font-texto: var(--font-publicsans); /* cerrada */ } :root[data-peso="200"]{--peso-display:200} :root[data-peso="300"]{--peso-display:300} :root[data-peso="400"]{--peso-display:400} :root[data-peso="500"]{--peso-display:500} /* negrita del display, su propio paso */ :root{--peso-display-b:600} /* 500 no daba contraste suficiente */ :root[data-pdb="400"]{--peso-display-b:400} :root[data-pdb="500"]{--peso-display-b:500} :root[data-pdb="600"]{--peso-display-b:600} :root[data-pdb="700"]{--peso-display-b:700} /* peso del texto, su propio control */ :root{--peso-texto:300} /* zoom de las muestras, independiente del riel */ :root{ /* el acento vive en el brillo; el texto secundario es papel rebajado */ /* papel rebajado, NO mezclado con el fondo: mezclarlo le metia el tinte del azul y el texto salia lavanda */ --color-sub: color-mix(in oklch, var(--color-papel) 88%, transparent); --luz-1: color-mix(in oklch, var(--color-luz) 42%, transparent); --luz-2: color-mix(in oklch, var(--color-luz-2) 24%, transparent); --brillo: radial-gradient(120% 90% at 82% 4%, var(--luz-1) 0%, transparent 58%), radial-gradient(95% 78% at 8% 96%, var(--luz-2) 0%, transparent 60%); } :root{--zoom:1} :root[data-zoom="1"]{--zoom:1} :root[data-zoom="2"]{--zoom:1.7} :root[data-zoom="3"]{--zoom:2.6} :root[data-zoom="4"]{--zoom:100} :root[data-pt="300"]{--peso-texto:300} :root[data-pt="400"]{--peso-texto:400} :root[data-pt="500"]{--peso-texto:500} :root[data-pt="200"]{--peso-texto:200} /* negrita del texto */ :root{--peso-texto-b:600} :root[data-ptb="500"]{--peso-texto-b:500} :root[data-ptb="600"]{--peso-texto-b:600} :root[data-ptb="700"]{--peso-texto-b:700} /* la mono tiene peso y caja propios: antes heredaba el del texto y por eso parecia cambiar sola */ /* la mono vive en los eyebrows y va SIEMPRE en mayusculas */ :root{--peso-mono:400; --caja-mono:uppercase; --track-mono:.08em} :root[data-pm="300"]{--peso-mono:300} :root[data-pm="400"]{--peso-mono:400} :root[data-pm="500"]{--peso-mono:500} /* mono */ /* azul a verde pasa a ser la de casa */ :root{--color-fondo:var(--pal-d-fondo);--color-luz:var(--pal-d-luz);--color-luz-2:var(--pal-d-luz-2)} /* ───────────────────────────────────────────────────────────────────── RETICULA · metodo Müller-Brockmann La regla del libro: la unidad no se inventa, sale del interlineado del texto. Todo lo demas (filas, medianiles, margenes, tamanos) es multiplo entero de esa unidad, para que el texto siga cayendo en la linea base aunque cambie de campo. Aqui: cuerpo 26/36 → la unidad es 18px (media linea). 1080 = 108 margen + (5 filas x 144) + (4 canales x 36) + 108 margen 1920 = 114 margen + (12 col x 108) + (11 canales x 36) + 114 margen ───────────────────────────────────────────────────────────────────── */ :root{ --u: 18px; /* linea base */ --r-fila: 144px; /* 8u · alto de fila de campo */ --r-canal: 36px; /* 2u · medianil, igual a una linea de cuerpo */ --r-margen: 108px; /* 6u · margen superior e inferior */ --r-col: 108px; /* 6u · ancho de columna */ --r-lado: 114px; /* margen lateral (el sobrante) */ /* ESCALA · siete tamanos. Cada interlineado es multiplo entero de 18. El mayor mide exactamente una fila de campo. */ /* mono, pie, texto y lead (1u, 2u, 2u, 3u) viven en el bloque COMPACTA de abajo, con sus tallas */ --t-d1: 50px; --i-d1: 54px; /* 3u */ --t-d2: 68px; --i-d2: 72px; /* 4u */ --t-d3: 96px; --i-d3: 108px; /* 6u */ --t-d4: 136px; --i-d4: 144px; /* 8u · una fila de campo */ --t-d5: 184px; --i-d5: 198px; /* 11u · solo formato oral (TED) */ } /* ───────────────────────────────────────────────────────────────────── ESCALA DE LECTURA · tres tallas La COMPACTA es la puesta, y es la correcta para cómo se usa este deck: una sala de juntas con tres personas, o alguien abriéndolo en su laptop. La regla de «no bajar de 1/30 del alto» es de auditorio, con gente a diez metros; aplicarla aquí infla el texto sin motivo. Las otras dos existen para cuando el cuarto sea grande o el proyector malo. Cada talla trae también el alto de tarjeta y de retrato que le corresponde, porque esos los fija la proporción y no el texto: si sólo creciera la letra, el bloque dejaría de caber. PARA CAMBIAR DE TALLA, de más rápido a más definitivo: 1 · en la URL de cualquier deck: ?lectura=media | ?lectura=grande 2 · en el del deck: data-lectura="media" 3 · aquí abajo, mover los valores al bloque :root ───────────────────────────────────────────────────────────────────── */ :root{ /* COMPACTA · la puesta */ --t-mono: 21px; --i-mono: 24px; /* 1/51 · era 16 y en una videollamada caia a 8.3px: Cristina no lo leia */ --t-pie: 24px; --i-pie: 36px; /* 1/45 · manda la linea de portada y las etiquetas mono de las tarjetas */ --t-texto: 26px; --i-texto: 36px; /* 1/42 · el cuerpo */ --t-lead: 38px; --i-lead: 54px; /* 1/28 */ --pc-alto: 5; --pc-paso: 44px; /* tarjeta 4/5 */ --retrato: 468px; } :root[data-lectura="media"]{ --t-mono: 23px; --i-mono: 30px; /* 1/47 */ --t-pie: 26px; --i-pie: 38px; /* 1/42 */ --t-texto: 30px; --i-texto: 45px; /* 1/36 */ --t-lead: 40px; --i-lead: 54px; /* 1/27 */ --pc-alto: 4.5; --pc-paso: 30px; --retrato: 441px; } :root[data-lectura="grande"]{ /* sala grande o proyector malo */ --t-mono: 26px; --i-mono: 32px; /* 1/42 */ --t-pie: 28px; --i-pie: 40px; /* 1/39 */ --t-texto: 32px; --i-texto: 45px; /* 1/34 */ --t-lead: 42px; --i-lead: 54px; /* 1/26 */ --pc-alto: 4.5; --pc-paso: 27px; --retrato: 432px; }