/* ========================================================================== Heeraa Financials — hero illustration layer Etched, single-ink architectural line drawings that sit BEHIND the hero type. Everything about how they read — position, scale, and above all opacity — is owned by `.hero-art` in theme.css; this file only chooses which drawing each page gets. The art is a CSS background-image, so it is decorative by construction: it is never in the accessibility tree, it is never a link target, and if a file fails to load nothing but the parchment shows through and the hero reads exactly as it would have. The drawings are static — there is no motion here to reduce, so `prefers-reduced-motion` needs no branch. Ink is baked as --navy (#10314F): a background image is an isolated document and cannot inherit `currentColor`. Hue stays constant, and the whole layer is dialled back by the opacity already set in theme.css. Source: tools/art.mjs · run `node tools/art.mjs` to regenerate. ========================================================================== */ /* Default — the house: gopuram beside the institution's elevation. Also the fallback for any page that has a hero but no page hook. */ .hero-art{ background-image:url("/assets/img/art/gopuram-house.svg"); } /* Per-page. Requires `data-page="${pageId}"` on in layout.mjs; until that attribute exists these rules simply never match and the default above stands, so this file is safe to ship either way. */ body[data-page="home"] .hero-art{ background-image:url("/assets/img/art/gopuram-house.svg"); } body[data-page="about"] .hero-art, body[data-page="legacy"] .hero-art, body[data-page="founders"] .hero-art, body[data-page="group"] .hero-art{ background-image:url("/assets/img/art/ledger.svg"); } body[data-page="lending"] .hero-art, body[data-page="product"] .hero-art{ background-image:url("/assets/img/art/colonnade.svg"); } body[data-page="calculators"] .hero-art, body[data-page="faq"] .hero-art{ background-image:url("/assets/img/art/compass.svg"); } body[data-page="contact"] .hero-art{ background-image:url("/assets/img/art/institution.svg"); } /* The rose is square and radial where the rest are wide elevations, so it needs its own placement to stay off the type rather than under it. */ body[data-page="calculators"] .hero-art, body[data-page="faq"] .hero-art{ background-position:center 78%; background-size:min(520px,86%) auto; } @media (min-width:1000px){ body[data-page="calculators"] .hero-art, body[data-page="faq"] .hero-art{ background-position:right 4% bottom -22%; background-size:auto min(112%,470px); } } /* The ledger is the widest and lowest-contrast piece; let it sit lower so the lede never lands on the ruled lines. */ body[data-page="about"] .hero-art, body[data-page="legacy"] .hero-art, body[data-page="founders"] .hero-art, body[data-page="group"] .hero-art{ background-position:center 84%; } /* Windows High Contrast / forced colours: decoration only, so drop it rather than have it render as a solid block behind the text. */ @media (forced-colors:active){ .hero-art{background-image:none} }