/* =========================================================================== SOMA — sistema visual Cada valor de acá se puede rastrear hasta un archivo de marca medido o hasta una medición de las referencias (sancts.co, sightandsite.com). Nada elegido a ojo. Las relaciones de contraste están verificadas con scripts/contrast.py y anotadas al lado: si se toca un color, se vuelve a correr. ========================================================================= */ :root{ /* --- Superficies ------------------------------------------------------- El papel es el fondo computado del sitio de AVS. El travertino salió de la portada del deck; el oliva, de la papelería (sobre cerrado). */ --papel: #F6F3ED; --papel-hondo: #EDE7DB; /* alterna secciones sin cambiar de familia. OJO: al haber DOS fondos, cada color de texto tiene que pasar en los dos. El gris suave estaba derivado sólo contra --papel: daba 4.88 ahí y 4.39 acá, o sea que reprobaba en la mitad de las secciones del sitio. */ --travertino: #C0B090; --piedra: #A08870; --oliva: #7C7135; /* color de marca, superficie */ --tinta: #181808; /* wordmark: 100% de sus píxeles opacos */ /* --- Texto ------------------------------------------------------------- Medido sobre --papel. El oliva de marca da 4.44:1 y no llega a AA de texto: para leer se usa --oliva-txt, que conserva tono y saturación y sólo baja la luz. La diferencia no se ve; la accesibilidad sí. */ --txt: #181808; /* 16.17:1 AA */ --txt-medio: #4A4438; /* 8.72:1 AA */ --txt-suave: #6B675C; /* 5.07:1 sobre --papel · 4.58:1 sobre --papel-hondo */ --oliva-txt: #7A6F34; /* 4.57:1 AA */ /* Sobre --tinta: papel 16.17:1 · travertino 8.4:1 · piedra 5.33:1 — todos AA. PROHIBIDO: oliva sobre travertino da 2.31:1. Ahí sólo va forma, nunca texto. */ /* --- Líneas ------------------------------------------------------------ La decorativa es más tenue que el mínimo de 3:1 a propósito: separa, no comunica. Los bordes de formulario usan --linea-campo, que sí llega. */ --linea: rgba(24, 24, 8, .14); --linea-campo: rgba(24, 24, 8, .42); --linea-clara: rgba(246, 243, 237, .28); /* --- Tipografía -------------------------------------------------------- Dos voces, como el material impreso de SOMA: serif de alto contraste para el titular y geométrica para etiquetas y UI. Cormorant y Jost son las más cercanas disponibles a las del brochure; ambas variables y autoalojadas. */ --serif: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; /* Escala fluida. El titular baja hasta 3.25rem en 375px: medido, no supuesto. */ --d1: clamp(3.25rem, 8.5vw, 8.5rem); --d2: clamp(2.25rem, 5vw, 4.5rem); --d3: clamp(1.6rem, 3vw, 2.6rem); --cuerpo: clamp(1rem, 1.05vw, 1.0625rem); --etiqueta: .6875rem; --il-titular: .98; /* medido en la portada del brochure */ --il-cuerpo: 1.75; /* aire: el texto de SOMA es corto y quiere respirar */ --tr-titular: -.018em; --tr-etiqueta: .2em; /* --- Ritmo ------------------------------------------------------------- sancts.co respira 120px entre secciones. SOMA es más inmersivo y pide algo más; en mobile se corta a la mitad o la página se vuelve una sábana. */ --seccion: clamp(5.5rem, 9vw, 9rem); /* Margen más angosto y tope de contenido más ancho. El cuello de botella no era el margen: con el tope en 1240px, una pantalla de 1440 desperdiciaba 100px de cada lado aunque el margen fuera cero. */ --margen: clamp(1.25rem, 3.2vw, 3.5rem); --ancho-limite: 1560px; --ancho-txt: 46ch; /* longitud de línea cómoda para el cuerpo */ /* --- Movimiento -------------------------------------------------------- Curva única para todo el sitio: entra rápido y se posa. Las duraciones largas son para reveals de imagen; las cortas, para respuesta a un gesto. */ --curva: cubic-bezier(.22, .61, .36, 1); --curva-suave: cubic-bezier(.65, .05, .36, 1); /* La curva de los revelados. Arranca casi vertical y frena largo: el ojo registra el movimiento apenas empieza y el final se posa sin rebote. Es la diferencia entre una animación que se nota y una que se siente. */ --curva-fina: cubic-bezier(.16, .84, .24, 1); --t-corto: .32s; --t-medio: .7s; --t-largo: 1.25s; --t-revelar: 1.15s; } *, *::before, *::after { box-sizing: border-box; } body{ margin: 0; background: var(--papel); color: var(--txt); font-family: var(--sans); font-size: var(--cuerpo); font-weight: 300; line-height: var(--il-cuerpo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3{ font-family: var(--serif); font-weight: 300; line-height: var(--il-titular); letter-spacing: var(--tr-titular); margin: 0; } h1{ font-size: var(--d1); } h2{ font-size: var(--d2); } h3{ font-size: var(--d3); } p{ margin: 0 0 1.2em; max-width: var(--ancho-txt); } /* La etiqueta es la voz geométrica: chica, espaciada, en versalitas. Es lo que sostiene la jerarquía cuando el titular es puro aire. */ .etiqueta{ font-family: var(--sans); font-size: var(--etiqueta); font-weight: 400; letter-spacing: var(--tr-etiqueta); text-transform: uppercase; color: var(--txt-suave); line-height: 1; } /* height:auto no es decorativo: los atributos width/height del HTML —que van igual, para que el navegador reserve el espacio y no haya salto de layout— actúan como valor de presentación. Si en CSS se fija sólo el ancho, el alto del atributo gana y la imagen sale estirada. Se ve como una foto borrosa, no como un error de CSS, y por eso engaña. */ img{ max-width: 100%; height: auto; display: block; } /* Con display:contents el del se vuelve caja y rompe el layout. Bug silencioso: no falla, sólo descoloca. */ picture source{ display: none; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }