/* ============================================================================ MONUMENTOS / SIPA — site layer Loaded AFTER /brand/v1/brand.css. Everything here either re-binds a brand token or defines something genuinely specific to this site. The pages were written against their own variable names (--bg-panel, --text, --border …), each page carrying its own copy of the palette. Rather than rewrite ~67 KB of rules across 13 files, those names are bridged onto brand tokens below — so the rules keep working and the palette now has one source. ========================================================================= */ /* Bound on :root AND body. The theme flag lives on , so a binding made only at :root would resolve var(--ink-2) against the *light* palette and ship #333 text onto a black ground. Declaring both means whichever element carries data-theme resolves these correctly. */ :root, body{ /* ---- the serif voice ------------------------------------------------- Monumentos keeps a serif display face, but Fraunces rather than DM Serif Display: it is already part of the brand type system and self-hosted, so these pages stop calling Google Fonts (which the rest of the estate deliberately avoids). Swap this one line to change the face. */ --f-display: "Fraunces", Georgia, "Times New Roman", serif; /* ---- legacy names → brand tokens -------------------------------------- */ --bg-panel: var(--bg-2); --bg-card: color-mix(in srgb, var(--ink) 5%, var(--bg)); --bg-hover: color-mix(in srgb, var(--ink) 9%, var(--bg)); --border: var(--rule); --text: var(--ink-2); --text-dim: var(--ink-3); --text-bright: var(--ink); --accent-dim: color-mix(in srgb, var(--accent) 58%, var(--bg)); /* --bg and --accent come straight from brand.css — same names, no bridge. */ /* ---- categorical data colours ---------------------------------------- These encode meaning in the visualisations (chronology vs intervention, elements vs materials, and so on), so they are NOT brand colours and are deliberately left as they were. Change them only with the charts open. */ --link: #6b8cce; --link-hover: #92b4e8; --green: #5b8a72; --red: #c45050; --orange: #e8944a; --purple: #8b6bb5; } /* Headings take the display face; the pages ask for it by name in places, so the token is what those declarations now resolve to. */ h1, h2, h3, h4, .page-title, .card-title{ font-family: var(--f-display); font-weight: 400; letter-spacing: -0.005em; } /* Metadata voice, matching the rest of the estate. */ .stat, .meta, .mono{ font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; color: var(--text-dim); } /* Panels and cards read as one family across the estate: square corners, hairline rules, a quiet lift on hover. */ a.card, .card, .panel{ background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast); } a.card:hover, .card:hover{ background: var(--bg-hover); border-color: var(--accent); color: var(--text-bright); transform: translateY(-1px); }