/*! * Archivo del Desierto — reveals and utilities * * Textures live in 05b-textures.css, in their own earlier layer. */ @layer utilities { /* ══════════════════════════════════════════════════════════════════════ Reveal on scroll ══════════════════════════════════════════════════════════════════════ Opt-in through the `js` class on , which the site script sets before first paint. With JavaScript off, disabled or broken, nothing here applies and every element is visible from the first render. That is a hard rule on this site: an earlier build hid whole sections when its observer failed to fire. */ .js .reveal { opacity: 0; translate: 0 22px; transition: opacity var(--motion-slow) var(--ease-cinematic), translate var(--motion-slow) var(--ease-cinematic); } .js .reveal.is-visible { opacity: 1; translate: none; } .js .reveal--stagger > * { opacity: 0; translate: 0 18px; transition: opacity var(--motion-slow) var(--ease-cinematic), translate var(--motion-slow) var(--ease-cinematic); } .js .reveal--stagger.is-visible > * { opacity: 1; translate: none; } .js .reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .js .reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; } .js .reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; } .js .reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; } .js .reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal--stagger > * { opacity: 1; translate: none; transition: none; } } /* ══════════════════════════════════════════════════════════════════════ Helpers ══════════════════════════════════════════════════════════════════════ */ .u-measure { max-width: var(--measure); } .u-measure-narrow { max-width: var(--measure-narrow); } .u-center { margin-inline: auto; } .u-text-center { text-align: center; } /* Text that sits on a night surface. Saves a run of inline style attributes in the templates, which were becoming the only place in the theme with hard-coded colour. */ .on-dark { color: var(--color-paper); } .on-dark-muted { color: var(--on-dark-muted); } .u-mt-l { margin-top: var(--space-l); } .u-mt-xl { margin-top: var(--space-xl); } .u-mt-2xl { margin-top: var(--space-2xl); } .u-mb-l { margin-bottom: var(--space-l); } .u-nowrap { white-space: nowrap; } .u-mono { font-family: var(--font-mono); } /* Locks scrolling behind a modal without the layout shifting as the bar disappears. */ .is-locked { overflow: hidden; padding-right: var(--scrollbar-width, 0px); } @media print { .site-header, .site-footer, .nav-drawer, .viewer, .archive-toolbar, .actions, .skip-link { display: none !important; } body { color: #000; background: #fff; font-size: 11pt; } .hero, .book-hero, .section--dark { background: #fff !important; color: #000 !important; } .hero__plate, .hero__scrim { display: none !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } } } @layer utilities { /* * La letra del álbum. La tipografía sólo tiene caja alta —el autor escribía en mayúsculas * de imprenta y no hay una sola minúscula en los ochenta y tres pies—, así que la clase * pone el text-transform ella misma en vez de fiarse de que quien la use lo recuerde. */ .hand { font-family: var(--font-hand); font-weight: 400; text-transform: uppercase; letter-spacing: 0.015em; font-synthesis: none; } }