/* ========================================================================== NapoGold — tokens.css Las decisiones de diseño, en un solo sitio. Nada de valores sueltos en el resto de hojas: si un color o un tamaño no está aquí, no existe. ========================================================================== */ /* --- Tipografía: Archivo, una sola familia variable ---------------------- Sustituye a Bodoni Moda + Manrope. Se eligió comparando ocho parejas compuestas a 375 px con cifras COP reales ($412.900, $2.064.500, $41.290.000). Por qué Archivo: · Las cifras. Un valor en pesos es largo (7–10 dígitos con puntos) y en un teléfono hay ~335 px. Archivo tiene eje de ANCHO: a 72 % la cifra "$2.064.500" cabe en 335 px con una altura de mayúscula ~10 % mayor que Bodoni en su ancho normal. Es el tamaño que el dinero necesita para ser protagonista en el móvil. · Dígitos tabulares (tnum) limpios, sin cero con punto ni barra (Mona Sans los pinta así: raro en un billete). · Carácter financiero, no de joyería. Bodoni es la letra de las revistas de moda y de las joyerías: justo lo que NapoGold no quiere parecer. Archivo es una grotesca de tradición periodística y bursátil. · Legible a 15–17 px con el ancho normal: sirve también para el texto, direcciones y tarifas. Una familia, jerarquía por ancho y peso. · Licencia OFL. Diseñada por Omnibus-Type (Buenos Aires). · Rendimiento: recortada a los ejes que se usan (ancho 70–100 %, peso 400–800) y a latín, pesa 47 KB. Las dos fuentes anteriores sumaban 51. Descartadas: Manrope/Inter/Space Grotesk/Fraunces/Instrument (la estética por defecto de las interfaces hechas con IA), Bodoni y Noto Serif Display (joyería), Big Shoulders (industrial, barata), Mona Sans (ceros con punto). ------------------------------------------------------------------------ */ @font-face { font-family: 'Archivo'; src: url('../assets/fonts/archivo-napogold.woff2') format('woff2'); font-weight: 400 800; font-stretch: 70% 100%; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192, U+2212; } :root { /* ====================================================================== SUPERFICIES Una sola base oscura de principio a fin. El contraste entre secciones lo da la luz y la escala, no cambiar el fondo de claro a oscuro. ====================================================================== */ --obsidiana: #08080A; /* fondo base de todo el sitio */ --carbon: #101014; /* superficie elevada: tarjetas, tablas */ --carbon-alto: #17171C; /* superficie sobre superficie */ --marfil-fondo: #F4F1EA; /* las contadas secciones de lectura larga */ /* ====================================================================== TEXTO Los tres niveles están verificados sobre --obsidiana: ivory 17.8:1 · dim 7.1:1 · faint 4.6:1 (mínimo AA para texto normal). No bajar --tinta-faint: el sitio anterior lo tenía en 2.9:1 y la tabla de precios era ilegible para mucha gente. ====================================================================== */ --tinta: #F5F2EC; --tinta-dim: #A9A49A; --tinta-faint: #837E74; --tinta-oscura: #14120E; /* texto sobre fondos claros o sobre oro */ /* ====================================================================== ORO — siempre gradiente, nunca plano El sitio anterior usaba #b8862e sólido como relleno de botón: leía como mostaza y además fallaba contraste (3.23:1 con texto blanco encima). Un metal necesita variación de luz para leerse como metal. ====================================================================== */ --oro-grad: linear-gradient(135deg, #7A5518 0%, #A8792B 18%, #E3C377 42%, #FBEFC9 52%, #D9A63F 68%, #8A6020 100%); --oro-grad-suave: linear-gradient(135deg, #A8792B 0%, #E3C377 50%, #A8792B 100%); --oro-linea: #A8792B; --oro-claro: #E3C377; --oro-brillo: rgba(227, 195, 119, .26); /* ====================================================================== DINERO Un verde jade sobrio, guiño al billete colombiano sin caer en literal. Se reserva para estados de valor confirmado: el resultado del simulador, el precio del día vigente, los checks de verificación. Nunca se usa como fondo grande ni compite con el oro. ====================================================================== */ --jade: #3DA47F; --jade-claro: #6FD4AC; --jade-tenue: rgba(61, 164, 127, .12); /* Estado de un dato vencido: el precio deja de ser "de hoy" */ --alerta: #D9A63F; /* Colores de Instagram: SOLO para la firma del desarrollo en el pie, que el cliente pidió así. El rosa es el de la marca y da 4,6:1 sobre --obsidiana (pasa AA para texto pequeño). */ --instagram-rosa: #E1306C; --instagram-degradado: linear-gradient(45deg, #FEDA75, #FA7E1E 28%, #D62976 52%, #962FBF 76%, #4F5BD5); /* ====================================================================== LÍNEAS ====================================================================== */ --linea: rgba(245, 242, 236, .09); --linea-fuerte: rgba(245, 242, 236, .18); --linea-oro: rgba(168, 121, 43, .38); /* ====================================================================== TIPOGRAFÍA — tres voces de una misma familia --display titulares y mensajes de impacto: estrecha y fuerte --sans texto, tarifas, direcciones: ancho normal Las cifras usan la voz display aún más estrecha (--ancho-cifra) para que el importe entre grande en 335 px. ====================================================================== */ --display: 'Archivo', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ancho-display: 80%; --ancho-cifra: 72%; --peso-display: 720; --peso-cifra: 700; --track-ancho: .16em; /* mayúsculas de etiqueta */ --track-medio: .06em; /* ====================================================================== RITMO VERTICAL — escala de 8 ====================================================================== */ --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 48px; --e6: 64px; --e7: 96px; --e8: 128px; /* Móvil primero: 72 px arriba y abajo en un teléfono, hasta 152 en escritorio. Antes eran 88 como mínimo y cada sección se sentía lejos de la anterior en una pantalla de 375. */ --seccion-pad: clamp(72px, 10vw, 152px); /* 20 px de canal lateral en móvil, y nunca menos que la zona segura del notch cuando el teléfono está en horizontal (viewport-fit=cover). */ --margen: max(20px, min(5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --alto-barra: 64px; --ancho-max: 1280px; --ancho-texto: 62ch; /* ====================================================================== MOVIMIENTO Curvas suaves, nunca lineales ni abruptas. ====================================================================== */ --ease-salida: cubic-bezier(.16, 1, .3, 1); /* entradas: rápido y asienta */ --ease-suave: cubic-bezier(.25, .1, .25, 1); --dur-rapida: .28s; --dur-base: .6s; --dur-lenta: .9s; /* ====================================================================== RADIOS Y ELEVACIÓN ====================================================================== */ --radio-s: 6px; --radio-m: 12px; --radio-l: 20px; --radio-pill: 999px; --sombra-carta: 0 1px 0 rgba(245,242,236,.04) inset, 0 24px 60px -30px rgba(0,0,0,.9); --sombra-oro: 0 0 40px -8px var(--oro-brillo); } /* -------------------------------------------------------------------------- Alturas de viewport en móvil. 100vh en un móvil incluye la barra del navegador, así que la primera pantalla queda cortada. svh mide el viewport pequeño (con barra visible), que es lo que el usuario ve de verdad al llegar. -------------------------------------------------------------------------- */ :root { --alto-pantalla: 100vh; } @supports (height: 100svh) { :root { --alto-pantalla: 100svh; } }