/* locations.css: the thirteen location pages. Deliberately thin: the hero is css/hero.css and everything else composes layout.css + components.css. Only what is true of location pages and of nothing else lands here. Before adding a rule, check it is not a shared style wearing a location-page costume. If a service page would also want it, it belongs in components.css. */ /* IMG_1355 is a job in progress, not a finished-product shot, on purpose. The url() must stay in CSS, not an inline style, or "../" breaks. Every page's preload must name this same file: it is the LCP element and the preload scanner cannot see a CSS background. Per-city photos and why none is set: agent/hero.md. */ .hero--location { --hero-photo: url("../images/gallery/IMG_1355.jpeg"); } /* -------------------------------------------------------------------------- The service-area block: the communities inside THIS city that this page claims. Only carried by pages whose municipality is a real amalgamation of separately-named settlements; on a single-core town it would be padding. -------------------------------------------------------------------------- */ /* It follows a .checklist, which leaves nothing between itself and a following heading, and h3's own margin is tuned for a heading inside prose. */ .area-block { margin-top: var(--space-7); } /* Not a .checklist (those are benefit ticks, these are places) and not a nav (a statement of coverage, not a set of links). auto-fit would stretch three communities across a full row and make a short list look padded. */ .area-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); list-style: none; } .area-list li { padding: 0.35em 0.9em; /* em: tracks the item's own font-size */ background: var(--blue-wash); border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--blue-text); /* 5.93:1 on --blue-wash */ } /* -------------------------------------------------------------------------- The map panel. components.css owns .map-embed (the responsive iframe); this is only the frame around it. -------------------------------------------------------------------------- */ .map-panel { display: flex; flex-direction: column; gap: var(--space-4); } /* The wrapper clips, not the iframe: an iframe does not reliably clip its own corners. */ .map-panel__frame { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); } /* The map is decorative context, not a control. The caption says what the pin means so the panel is not a floating rectangle of Google. */ .map-panel__caption { font-size: var(--text-sm); color: var(--ink-muted); /* 7.13:1 on --surface */ } /* 40rem of map is right beside a column of prose; stacked under it on a phone it becomes a wall. */ @media (max-width: 900px) { .map-panel .map-embed { min-height: 28rem; } }