/* Binaria — base mínima + utilitats reutilitzables (tokens/base.css). */ *, *::before, *::after { box-sizing: border-box; } html, body { /* clip i no hidden: hidden trenca position: sticky (README §5.6) */ overflow-x: clip; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--accent-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--forest-deep); text-decoration: underline; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } ::selection { background: var(--forest-tint); } /* Etiqueta eyebrow */ .b-eyebrow { font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); } /* Fade-up esglaonat en carregar (només elements que NO són el LCP: el H1 del hero mai arrenca amb opacity: 0 — README §6) */ @media (prefers-reduced-motion: no-preference) { .b-fade-up { animation: binaria-fade-up var(--duration-slow) var(--ease-out) both; } .b-fade-up:nth-child(2) { animation-delay: 80ms; } .b-fade-up:nth-child(3) { animation-delay: 160ms; } .b-fade-up:nth-child(4) { animation-delay: 240ms; } .b-fade-up:nth-child(5) { animation-delay: 320ms; } .b-fade-up:nth-child(6) { animation-delay: 400ms; } } /* Fade-up en entrar al viewport (activat per JS amb IntersectionObserver). Sense JS (o amb reduced-motion) els elements queden visibles: només s'amaguen quan porta la classe .js. */ @media (prefers-reduced-motion: no-preference) { html.js .b-io { opacity: 0; } html.js .b-io.is-in { animation: binaria-fade-up var(--duration-slow) var(--ease-out) both; animation-delay: var(--stagger, 0ms); } }