erikghandClaude Opus 5.5
89e54a6e84
Primitivas y contenido del rediseño (escala tipográfica, Revelar, MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero, sección Proceso de ocho etapas, lib/content.ts reestructurado en seis secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran. Encima, lo de esta sesión: - recorrido: creeer vuelve a responder cada situación en vez de repetirla (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos de las seis fotos de México. - contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0). - enlaces: lo externo abre en otra pestaña con noopener y aviso para lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan. - Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al hover lo que no es clicable. - Disciplinas: la frase «No son la promesa — son los medios» gana peso y se agrupa con título e ilustración; sin cortes huérfanos en móvil. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
61 lines
1.7 KiB
CSS
61 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
background-color: #FFFFFF;
|
|
color: #0A1D3D;
|
|
font-family: var(--font-open-sans), system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
::selection { background: #C4942E; color: #FFFFFF; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
/* The ring needs to contrast against the background it appears on, not
|
|
against the brand. The global gold gave 2.76:1 on white, below the 3:1
|
|
WCAG 2.2 requires for a focus indicator. Deep blue on white gives 16.7:1;
|
|
and on the two navy sections, where the navy would disappear, gold takes
|
|
over, which gives 6.07:1 there. */
|
|
a:focus-visible,
|
|
button:focus-visible {
|
|
outline: 3px solid #0a1d3d;
|
|
outline-offset: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.bg-azul-profundo a:focus-visible,
|
|
.bg-azul-profundo button:focus-visible {
|
|
outline-color: #c4942e;
|
|
}
|
|
}
|
|
|
|
/* The page's only motion gesture. The hidden state depends on `.js`, which an
|
|
inline script in <head> sets before first paint: without JavaScript the
|
|
class never lands, nothing is hidden, and the page reads in full. Anyone
|
|
who asked for less motion is also excluded here — the media query leaves
|
|
them out entirely rather than neutralising it afterwards. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.js [data-revelar] {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
.js [data-revelar][data-visible] {
|
|
animation: revelar 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
animation-delay: calc(var(--i, 0) * 60ms);
|
|
}
|
|
}
|
|
|
|
@keyframes revelar {
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|