/* ══════════════════════════════════════════════════════════════ Código Atómico · CAPA DE TIPOGRAFÍA Independiente de la piel. Se pone y se quita por separado. INSTALACIÓN · en , DESPUÉS de atomico-skin.css: Y cambiar el enlace de Google Fonts de la línea 39 por éste: REVERSA · borrar la línea del y devolver el enlace viejo. ─────────────────────────────────────────────────────────────── QUÉ ARREGLA Y POR QUÉ ES CHICO Las familias YA ESTÁN BIEN. La app usa Cormorant Garamond y Zen Kaku Gothic New desde siempre. No hay nada que sustituir. Lo que está mal son tres cosas concretas: 1. PESO 300, TREINTA Y CINCO VECES. La app pide 300 en el body, en los títulos, en las cifras grandes, en los nombres de hábito. El sistema sirve Cormorant 400 y 600, y Zen Kaku 400 y 500. El 300 no existe: hoy lo está pidiendo a Google Fonts, que sí lo manda, y por eso la app se ve más delgada y más pálida que el resto de la casa. La cifra de 132px del contador de nicotina es donde más se nota. 2. DM SANS, OCHO VECES, Y NO ESTÁ CARGADA. Aparece en el CSS pero no está en el enlace de Google Fonts. O sea que hoy esos ocho elementos se están pintando en Helvetica o Arial, que es la fuente prohibida número uno del sistema. Es un error silencioso: nadie lo ve porque parece una sans cualquiera. 3. RÓTULOS A 10px. Nueve elementos. El piso de rótulo del sistema es 11, y para versalitas con tracking de .3em, 10px en un teléfono es ilegible con presbicia. auth-shell.css ya está migrada: usa var(--body), var(--serif), var(--oro) y radio 0. No se toca. Es compartida con Programa 21 y Libertos, y tocarla repinta las tres. ══════════════════════════════════════════════════════════════ */ /* ── 1 · PESO ─────────────────────────────────────────────────── 300 → 400 en todo lo que lo declara. Uno por uno, por nombre: no hay forma de seleccionar por valor en CSS, y una regla global aplastaría los 500 y los 600 que sí son intencionales. */ body, .header h1, .header h1 em, .stat-value, .stat-row-solo .stat-value, .habit-name, .habit-name-input, .streak-num, .briefing-quote, .level-display .level-tier, .mobile-habit-name, .mobile-pct, .weekly-name, .quote-text, .auth-title, .auth-welcome-q, .auth-input, .evolution-side-pct, .evolution-divider, .evolution-arrow, .evolution-delta, .evolution-note, .brand-band h1, .nicotine-hero .nh-count, .nh-sub, .nh-nota, .nh-frase, .resp-crono{ font-weight:400; } /* Las cabeceras de día se pintan desde JS con font-weight en el atributo style, así que solo un !important las alcanza. El día de hoy conserva su 600: es señal, y se queda. */ .day-header-row th{ font-weight:400 !important; } .day-header-row th.is-today-col{ font-weight:600 !important; } .zero-day-header{ font-weight:400 !important; } /* Cormorant itálica solo existe en 400 y 500. Donde se pedía 300 itálica, el navegador la fabricaba inclinando la redonda. */ .briefing-quote, .quote-text, .stat-row-solo .stat-sub, .lb-title, .footer-tagline{ font-style:italic; font-weight:400; } /* ── 1b · MENOS CORMORANT, MÁS ZEN ────────────────────────────── Cormorant es de lectura y de despliegue: títulos grandes, citas y cifras que son prueba. En la app se estaba usando también para nombres de hábito, campos, botones y notas de trece píxeles, y ahí una serif de trazo fino se lee peor y hace que todo parezca un folleto en vez de una herramienta. Se queda en Cormorant lo que es despliegue o cita: .brand-band h1 · .auth-title · .header h1 .nicotine-hero .nh-count · .resp-fin-atomos .briefing-quote · .quote-text · .footer-tagline .stat-value · .stat-row-solo .stat-value · .evolution-side-pct .evolution-delta · .mobile-pct · .streak-num Todo lo demás pasa a Zen Kaku. */ .habit-name, .habit-name-input, .mobile-habit-name, .weekly-name, .add-habit-btn, .mobile-add-btn, .auth-input, .auth-back, .auth-error, .auth-forgot, .auth-info, .auth-welcome-q, .streak-cell, .pct-cell, .lb-title, .stat-row-solo .stat-sub, .evolution-divider, .evolution-arrow, .evolution-note, .nh-sub, .nh-nota, .nh-frase, .nh-solohoy, .nh-eyebrow, .nh-name, .resp-fin-molecula, .resp-fin-record{ font-family:'Zen Kaku Gothic New', sans-serif; font-style:normal; } /* Zen Kaku no tiene itálica: donde el diseño pedía énfasis, se hace con peso 500, no inclinando la redonda a la fuerza. */ .lb-title, .stat-row-solo .stat-sub, .nh-nota, .nh-solohoy, .auth-welcome-q{ font-weight:500; } /* Los nombres de hábito son la columna que más se lee de la app. Zen 400 a 15px, sin cursiva y sin adelgazar. */ .habit-name, .mobile-habit-name, .weekly-name{ font-size:15px; letter-spacing:.01em; } /* ── 1c · FUERA EL KANJI Y LA FIRMA ───────────────────────────── Los cuatro sitios donde salía 習慣 武道 y "Carlos Alberto". Se esconden por CSS para que esta hoja siga siendo reversible; el borrado de verdad va en el markup, y está listado al final. */ .kana, .briefing-kana, .section-kanji, .kanji-footer, .brand-band-row1{ display:none !important; } /* La pantalla de carga lo lleva en un style inline, así que no tiene clase a la que agarrarse. Es el primer hijo de su caja. */ #loadingScreen > div > div:first-child{ display:none !important; } /* ── 1d · EL TRIFORCE ─────────────────────────────────────────── Sube al brand-band, en oro sobre el azul, encima del nombre. Entra como fondo de ::before para que esta hoja no tenga que tocar el markup y se siga quitando con una línea. El ::after del brand-band es el filete de abajo y no se toca. Requiere /logo.svg en la raíz. Va en oro #e0c48a, y el triforce no se encierra en ninguna forma: sin caja, sin círculo, sin radio. */ .brand-band{ padding-top:30px; } .brand-band::before{ content:''; display:block; width:38px; height:33px; margin-bottom:16px; background:url('/logo.svg') no-repeat center / contain; } @media (max-width:480px){ .brand-band{ padding-top:26px; } .brand-band::before{ width:32px; height:28px; margin-bottom:13px; } } /* ── 2 · DM SANS FUERA ────────────────────────────────────────── Nunca se cargó. Estos ocho elementos llevan meses en Helvetica. Pasan a Zen Kaku, que es la sans de la casa y ya está cargada. */ .atomos-total-row, .mobile-streak-mini, .resp-fin-unidad, .resp-fin-total, .nh-pause, .nh-liberation, .dormant-note{ font-family:'Zen Kaku Gothic New', sans-serif; } /* ── 3 · PISO DE RÓTULO ───────────────────────────────────────── De 10 a 11px. Son versalitas con tracking ancho: a 10px, en un teléfono y con presbicia, no se leen. Once tampoco es generoso, pero es el piso del sistema y no mueve ninguna caja. */ .stat-label, .stat-row-solo .stat-label, .lb-tier, .tab, .day-header-row th, .streak-label, .week-check-btn, .logout-btn{ font-size:11px; } /* ── 4 · OFICIO ───────────────────────────────────────────────── Interlineado y tracking de los títulos, según el sistema. No se toca ningún tamaño: cambiar tamaños mueve cajas, y eso ya no es tipografía, es layout. */ .header h1{ line-height:1.04; letter-spacing:-.012em; } .auth-title{ line-height:1.04; letter-spacing:-.012em; } .brand-band h1{ letter-spacing:-.006em; } /* Los campos a 17px, que es donde Safari en iPhone deja de hacer zoom solo al tocarlos. auth-shell ya lo hace; éstos no. */ .habit-name-input{ font-size:17px; } /* Foco único del sistema. La app hoy no tiene ninguno visible en varios controles, y con teclado se navega a ciegas. */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{ outline:none; box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #1b3a63; } /* ══════════════════════════════════════════════════════════════ LO QUE ESTA HOJA NO HACE No cambia ni una familia: ya estaban bien. No cambia ningún tamaño salvo los nueve rótulos de 10px y el campo de nombre de hábito. Nada mueve una caja. No toca la rejilla ni sus tres capas. No toca auth-shell.css, que es compartida por tres apps. EL BORRADO DE VERDAD, cuando se quiera dejar de esconder por CSS: línea 2461 ·
習慣 武道 · Carlos Alberto
línea 2545 · 習慣 武道 · Método Holístico línea 2566 · Carlos Alberto · 習慣 武道 y los .section-kanji y .kanji-footer que se pintan desde JS. Y el logo, que aquí entra por ::before, ahí sería un dentro del .brand-band, antes del

. PENDIENTE PARA LA FASE B, no es tipografía: la línea 260 tiene .lb-oro{color:#c9a96e}. Ese es el oro viejo, el que está muerto. Es la medalla de oro del leaderboard. Hay tres más al lado (#a8794f bronce, #9aa3ad plata, #7fa8b0 platino, #6db4d6 diamante, #4a3a5c obsidiana) que son escala propia y sí tienen sentido como señal. Solo el oro hay que cambiarlo. ══════════════════════════════════════════════════════════════ */