/*! * Archivo del Desierto — design tokens * * The palette is taken from the materials the site is about: baryta paper gone warm, iron-gall * ink, the brass of a webbing buckle, Saharan earth, and the night. Nothing here is a stock * "military" colour. */ /* * «Pie de Álbum» — la letra del propio álbum. * * Las mayúsculas, la Ñ y las cifras 1 y 4 son trazos calcados de los pies de foto que el autor * escribió a mano en el reverso y en los márgenes de las láminas. El resto de cifras, la K, la W * y los signos no aparecen en ninguna lámina: se han compuesto con trozos de esas mismas letras. * Se usa sólo para rótulos cortos —nunca para leer—, así que va sin `unicode-range` y con `swap`. */ @font-face { font-family: "Pie de Album"; src: url("../fonts/pie-de-album.woff") format("woff"), url("../fonts/pie-de-album.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @layer tokens { :root { /* ── Colour ─────────────────────────────────────────────────────── */ --color-night: #0b0d10; --color-ink: #16181c; --color-charcoal: #2c2f36; --color-paper: #f7f4ee; --color-paper-warm: #efe9de; --color-sand: #ddd0b8; --color-sand-dark: #b9a888; --color-brass: #b08544; --color-oxidized-brass: #8a6a33; --color-olive: #5f6348; --color-military-muted: #7b7f68; --color-rust: #9b4a2f; --color-blood-earth: #7a3524; /* Darkened from #6d7076: it measured 4.14:1 on the warm paper surface, under the 4.5 AA threshold for body text. */ --color-muted: #5f6470; --color-muted-on-dark: #9aa0a8; --color-border: color-mix(in oklab, var(--color-ink) 14%, transparent); --color-border-strong: color-mix(in oklab, var(--color-ink) 26%, transparent); --color-border-on-dark: color-mix(in oklab, var(--color-paper) 18%, transparent); --color-highlight: color-mix(in oklab, var(--color-brass) 22%, transparent); /* * Brass is a metal, and at #b08544 it only reaches 3.04:1 on paper — fine for a rule * or an icon, not for the small labels this design uses it for. Text gets its own * darker value (5.5:1) and buttons get the oxidised tone (5.0:1 against white). */ --color-brass-text: #7d5f2d; /* Per-volume accent. Overridden on by the accent class. --accent decorative use: rules, dots, borders, icons --accent-deep interactive surfaces and links --accent-text small text on a light background (AA at 4.5:1) */ --accent: var(--color-brass); --accent-deep: var(--color-oxidized-brass); --accent-text: var(--color-brass-text); /* Semantic surfaces */ --surface: var(--color-paper); --surface-alt: var(--color-paper-warm); --surface-dark: var(--color-night); --on-surface: var(--color-ink); --on-surface-muted: var(--color-muted); --on-dark: var(--color-paper); --on-dark-muted: var(--color-muted-on-dark); /* ── Type ───────────────────────────────────────────────────────── */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-serif: "Playfair Display", Georgia, serif; /* Named --font-sans for continuity with the rest of the system, but deliberately a serif: Source Serif 4 is a text face with a large x-height and open counters, and it sits closer to the printed page these books came from than a grotesque does. */ --font-sans: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* La letra del álbum. Sólo mayúsculas: cualquier texto que la use tiene que ir en caja alta, y por eso `.hand` lleva su propio text-transform. */ --font-hand: "Pie de Album", "Bradley Hand", "Segoe Print", cursive; /* Fluid scale. The body size deliberately starts high: many readers of this site are in their eighties. 19px at desktop, never below 17px. */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --text-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); --text-lg: clamp(1.1875rem, 1.12rem + 0.36vw, 1.375rem); --text-xl: clamp(1.375rem, 1.24rem + 0.62vw, 1.75rem); --text-2xl: clamp(1.625rem, 1.36rem + 1.2vw, 2.375rem); --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); --text-4xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem); --text-5xl: clamp(3rem, 1.6rem + 5.8vw, 6.5rem); --leading-tight: 1.08; --leading-snug: 1.22; --leading-normal: 1.5; --leading-relaxed: 1.75; --leading-loose: 1.9; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.14em; --tracking-widest: 0.24em; /* Measure: the single most important readability control on the site. */ --measure: 68ch; --measure-narrow: 54ch; --measure-wide: 78ch; /* ── Space ──────────────────────────────────────────────────────── */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; --space-section: clamp(4rem, 9vw, 9rem); --space-gutter: clamp(1.25rem, 4vw, 3rem); /* ── Measure of the page ────────────────────────────────────────── */ --width-text: 46rem; --width-content: 72rem; --width-wide: 84rem; --width-full: 108rem; /* ── Radius ─────────────────────────────────────────────────────── */ /* Restrained on purpose: paper and photographic prints have sharp corners. Pills are reserved for controls, where they read as affordances rather than decoration. */ --radius-none: 0; --radius-xs: 2px; --radius-s: 3px; --radius-m: 6px; --radius-l: 10px; --radius-xl: 14px; --radius-pill: 999px; /* ── Elevation ──────────────────────────────────────────────────── */ --shadow-paper: 0 1px 1px color-mix(in oklab, var(--color-ink) 5%, transparent), 0 2px 6px color-mix(in oklab, var(--color-ink) 6%, transparent); --shadow-photograph: 0 1px 2px color-mix(in oklab, var(--color-ink) 10%, transparent), 0 8px 22px -8px color-mix(in oklab, var(--color-ink) 22%, transparent); --shadow-raised: 0 2px 4px color-mix(in oklab, var(--color-ink) 6%, transparent), 0 18px 40px -14px color-mix(in oklab, var(--color-ink) 30%, transparent); --shadow-modal: 0 40px 90px -20px rgb(0 0 0 / 0.7), 0 8px 24px -8px rgb(0 0 0 / 0.5); --shadow-inset-page: inset 0 0 40px -18px color-mix(in oklab, var(--color-ink) 40%, transparent); /* ── Motion ─────────────────────────────────────────────────────── */ --motion-fast: 140ms; --motion-normal: 280ms; --motion-slow: 620ms; --motion-page-turn: 420ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ── Chrome ─────────────────────────────────────────────────────── */ --header-height: 4.5rem; --focus-ring: 3px solid var(--color-brass); --focus-offset: 3px; color-scheme: light; accent-color: var(--color-brass); } /* Per-volume accents. Set on by the theme. */ .add--accent-brass { --accent: var(--color-brass); --accent-deep: var(--color-oxidized-brass); --accent-text: var(--color-brass-text); } .add--accent-olive { --accent: var(--color-olive); --accent-deep: #4a4e37; --accent-text: #4a4e37; } .add--accent-rust { --accent: var(--color-rust); --accent-deep: var(--color-blood-earth); --accent-text: var(--color-blood-earth); } /* Animatable custom properties, so gradients and reveals can be transitioned rather than swapped. Registered rather than declared so the browser interpolates them. */ @property --sweep { syntax: ""; inherits: false; initial-value: 0%; } /* * The angle the 3D book is turned at. Registered so it can be transitioned: an unregistered * custom property has no type, so the browser has nothing to interpolate and the book would * snap from one angle to the other instead of turning. */ @property --book-rot { syntax: ""; inherits: true; initial-value: 24deg; } /* La inclinación del libro, registrada para que interpole igual que el giro. */ @property --book-tilt { syntax: ""; inherits: true; initial-value: -8deg; } @property --draw { syntax: ""; inherits: false; initial-value: 0%; } }