/* ========================================================= SOLARA · TOKENS Único archivo donde se escribe un color literal. El trinquete (gates/ratchet.mjs) cuenta los hex sueltos en el resto de css/ y falla si ese número crece. ========================================================= */ :root { /* --------------------------------------------------------- 1 · MARCA — OFICIAL Fuente: SOLARA_DECK BRAND.pdf, página 7, con Pantone. Estos tres NO se tocan sin volver al deck. --------------------------------------------------------- */ --marron: #463420; /* Pantone 2322 C · RGB 70 52 32 */ --naranja: #f1662d; /* Pantone 4012 C · RGB 241 102 45 */ --celeste: #b9cbdf; /* Pantone 2127 C · RGB 185 203 223 */ /* --------------------------------------------------------- 2 · ESCALA DERIVADA — PENDIENTE DE APROBACIÓN Tres colores no alcanzan para una web: hacen falta fondos, estados de foco, bordes y un degradé de atardecer. Todo lo de acá abajo es interpolación entre los tres oficiales, no es marca. Se aprueba o se corrige en fase 2. Lo que el deck NO respalda y por eso no está: el morado noche #2B1E3F, el dorado #D9A441 y la estructura dark-first que describía el documento maestro. El deck es claro-primero. --------------------------------------------------------- */ /* Arena — el fondo real del deck, muestreado de sus páginas. Los tres son también los tres pasos del "sunset scroll": la página baja de luz de arriba hacia abajo, como una tarde que cae. */ --arena: #efe5d8; /* paso 1 · hero y narrativa */ --arena-2: #e6d8c6; /* paso 2 · ritual y lugar */ --arena-3: #d8c4ac; /* paso 3 · cierre y pie */ /* Velo: aclara una sección sin agregar un color nuevo al sistema. Es lo que da ritmo ahora que el fondo es un degradé continuo y ya no se puede alternar entre dos fondos planos. */ --velo: rgba(251, 247, 240, 0.5); /* Velo oscuro para texto sobre foto. Van los dos extremos del MISMO color para que el degradé mueva solo la opacidad: `transparent → X` en sRGB pasa por gris en el medio. El extremo de arriba NO es transparente. Con 0 el velo recién empezaba a la mitad de la tarjeta y la fecha del line-up, que cae justo arriba de ese punto, quedaba sobre la foto cruda: medido sobre las 12 fotos reales, 7 de 12 tarjetas no llegaban a 4.5 y la peor daba 3.51. Son TRES paradas y no dos, y esa es la parte que importa. Con dos, la única forma de tapar donde está el texto era subir el velo entero, y eso apaga la foto de arriba para arreglar un problema de abajo. El texto de las tarjetas del line-up arranca al 44% de la altura en desktop, no al pie. Por eso la parada del medio va en 38%: para cuando el texto empieza, el velo ya subió a 0.72. Lo que enseñó medir esto: un velo de DOS paradas que pasa a un ancho puede fallar en otro, porque cambia el tamaño de la tarjeta y con él dónde cae el texto. Medido a 1280 con tarjetas de 290x171, la versión de dos paradas dejaba 7 de 12 abajo de 4.5 aunque a pantalla angosta pasaran las 12. Con estas tres pasan las doce en los dos anchos, peor caso 5.95, y encima se conserva MÁS foto arriba (71% del brillo original contra 75% de un velo plano que igual fallaba). */ --sombra-foto-0: rgba(24, 16, 9, 0.25); --sombra-foto-m: rgba(24, 16, 9, 0.72); --sombra-foto-1: rgba(24, 16, 9, 0.93); /* Marrón, escala */ --marron-2: #5d4830; /* bordes, texto secundario sobre arena */ --marron-3: #2e2115; /* fondo oscuro de sección */ /* Naranja, escala. Los dos primeros existen POR CONTRASTE MEDIDO, no por gusto. El naranja de marca #f1662d es precioso y no se puede leer: kicker naranja sobre arena ............ 2.53 (AA pide 4.5) blanco sobre CTA naranja .............. 2.94 (AA pide 4.5) marrón sobre CTA naranja .............. 3.77 (sigue sin pasar) Es la misma trampa que el documento maestro marcaba para el dorado ("nunca dorado como texto sobre claro") y que nadie había escrito para el naranja. Estos dos valores son el naranja mezclado hacia el marrón hasta que el contraste pasa, medido en el navegador: --naranja-texto 68% hacia marrón → 6.19 sobre arena, 4.56 sobre arena-3 --naranja-cta 34% hacia marrón → 4.53 con blanco encima El #f1662d puro NO desaparece: se sigue usando donde el contraste no aplica —ilustración, la greca, superficies grandes sin texto— que es exactamente donde el deck lo usa. */ --naranja-texto: #7d4424; /* naranja legible como TEXTO */ --naranja-cta: #b75529; /* fondo de CTA que aguanta blanco */ --naranja-2: #9a4520; /* hover del CTA: más oscuro todavía */ --naranja-3: #f8a071; /* tintes y glow, nunca texto */ --blanco: #fbf7f0; /* El verde de WhatsApp. Es el ÚNICO color del sistema que no sale de la marca, y está acá a propósito en vez de escondido en un SVG. Se usa el oficial y no una versión en la paleta porque acá el reconocimiento ES la función: un botón flotante verde en la esquina se entiende sin leerlo. Pintado de naranja pasaría a ser un botón cualquiera y habría que explicarlo. Medido: el blanco encima da 2.14, así que NO sirve para texto. El glifo es un gráfico, y contra el arena del fondo el círculo mide 2.34 —debajo de los 3.0 de SC 1.4.11— por eso lleva un aro claro alrededor que le da el borde que el verde solo no tiene. */ --whatsapp: #25d366; --whatsapp-alto: #1da851; /* El verde de reposo del boton flotante: el mismo tono y la misma luz que --whatsapp, con la saturacion bajada un 60% (de 70% a 28%). El boton tenia demasiada presencia y lo que sobraba era el verde, no el boton: desaturar en vez de seguir bajando la opacidad deja el control legible y le saca el grito. Al pasar el puntero o al enfocarlo vuelve el verde pleno. Medido, contra fondo arena y con la opacidad de reposo aplicada, este verde da 1.56 contra el fondo donde el verde pleno al 35% daba 1.22: mas apagado a la vista y mejor contrastado. */ --whatsapp-tenue: #599f73; /* --------------------------------------------------------- 3 · ROLES SEMÁNTICOS Las secciones y componentes usan SOLO estos, nunca los de arriba: cambiar la marca no debería obligar a tocar 40 reglas. --------------------------------------------------------- */ --bg: var(--arena); --bg-alt: var(--arena-2); --bg-oscuro: var(--marron-3); --texto: var(--marron); --texto-suave: var(--marron-2); --texto-sobre-oscuro: var(--arena); /* --acento es el que usan kickers, números y bordes: va la versión legible. El naranja puro tiene su propio rol, --acento-grafico, para que quede explícito que no se puede poner texto encima. */ --acento: var(--naranja-texto); --acento-grafico: var(--naranja); --acento-hover: var(--naranja-2); --frio: var(--celeste); --borde: var(--arena-3); --borde-oscuro: var(--marron-2); --cta-bg: var(--naranja-cta); /* El CTA del hero va translúcido al 70%, para que se vea la portada detrás. Es el MISMO naranja con alfa, no un color nuevo. Va como fondo translúcido y NO como `opacity` sobre el botón: la opacidad desvanecería también el texto, y ahí el contraste se cae de golpe. Con el fondo translúcido las letras siguen opacas y lo único que cambia es la superficie que tienen debajo. */ --cta-bg-velado: rgba(183, 85, 41, 0.5); --cta-texto: var(--blanco); /* El anillo de foco va DOBLE, y no es decoración: es lo que lo hace cumplir SC 1.4.11, que pide 3.0 de contraste contra lo adyacente. El naranja de marca solo no llega. Medido contra los fondos reales: sobre arena ....... 2.53 sobre velo ......... 2.73 sobre arena-2 ..... 2.25 sobre marrón-3 ..... 4.97 (único que pasa) sobre arena-3 ..... 1.86 Y 54 de los 75 elementos enfocables del sitio viven sobre fondo claro. Cambiar el token NO es la salida: --naranja-texto arregla el claro y rompe el oscuro, donde cae a 2.03. Por eso el naranja se queda —es el último lugar no-gráfico donde vive el #f1662d puro— y el contraste lo aporta un segundo anillo oscuro por fuera. El naranja contrasta contra ese anillo (4.97) y el anillo contra la página. Funciona igual en los dos contextos con una sola regla. */ --foco: var(--naranja); --foco-contorno: var(--marron-3); /* --------------------------------------------------------- 4 · TIPOGRAFÍA Oblivion y Nexa están en el deck (p. 4) pero su licencia webfont NO está confirmada. Van primeras en cada pila: el día que se licencien, se agrega el @font-face y el sitio cambia solo, sin tocar una línea de HTML. Mientras tanto, los fallbacks son los del sitio hermano (Naples): Fraunces para display, Inter para todo lo demás. Decisión del cliente, para que las dos propiedades compartan una sola pila tipográfica. Lo que NO se trajo de Naples: Dancing Script. Ahí aporta calidez de trattoria; acá una manuscrita no tiene de dónde agarrarse, y sería una fuente más para descargar sin uso. Deuda declarada: Inter es neogrotesca donde Nexa es geométrica. Con Inter el sitio se lee correcto pero no se lee como la marca. Si algún día se abre la decisión, Jost es el reemplazo más cercano a Nexa dentro de lo libre. --------------------------------------------------------- */ --ff-display: "Oblivion", "Fraunces", Georgia, serif; --ff-titulo: "Nexa Black", "Inter", system-ui, sans-serif; --ff-cuerpo: "Nexa Light", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-hero: clamp(2.5rem, 8vw, 6rem); --fs-h2: clamp(1.8rem, 4vw, 3rem); --fs-h3: clamp(1.2rem, 2vw, 1.6rem); --fs-cuerpo: clamp(1rem, 1.2vw, 1.125rem); --fs-kicker: 0.78rem; --fs-chico: 0.875rem; /* El claim del deck va en all-caps con tracking muy abierto */ --tracking-claim: 0.22em; --tracking-kicker: 0.18em; /* --------------------------------------------------------- 5 · LAYOUT Y MOVIMIENTO --------------------------------------------------------- */ --maxw: 1200px; --gap: clamp(1rem, 3vw, 2rem); --radio: 14px; --radio-sm: 8px; --sombra-sm: 0 4px 14px rgba(70, 52, 32, 0.08); --sombra-md: 0 14px 40px rgba(70, 52, 32, 0.14); /* Tercer nivel, para el bloque oscuro. Las dos de arriba son marron translucido: sobre el fondo oscuro componen a un marron MAS CLARO que el fondo, o sea que "elevar" una tarjeta ahi la aclaraba en vez de hundir su sombra. Mismo offset y blur que --sombra-md para que la escala sea una sola. */ --sombra-oscura: 0 14px 40px rgba(12, 8, 4, 0.55); --t-rapida: 180ms cubic-bezier(.2, .7, .3, 1); --t-media: 280ms cubic-bezier(.2, .7, .3, 1); --nav-alto: 76px; }