/* components part 10 of 11 — split for the host's 16KB FTP ceiling. Generated by split_for_ftp.py; edit the prototype, not this. */ /* The map runs flush to the top of the hero, the way the photograph does in the right column of a service page — only the copy column carries a top inset. The bottom cannot also be flush, and the arithmetic says why: at this column width the map is 422px tall while the copy column's CONTENT alone is 426px, so the row is always at least as tall as the copy, and the leftover under the map is exactly 4px + the copy's vertical padding. Zero padding would put the breadcrumb hard against the sticky header. So the top inset moved off the map entirely and the bottom padding went to 0, which is as close to flush as the proportions allow. */ .pf-hero .hero-map{align-self:start}@media(max-width:1100px){ .pf-hero .hero-row{display:flex;flex-direction:column;gap:0; grid-template-columns:none; padding-inline:clamp(16px,2.2vw,34px)} .pf-hero .hero-txt{display:contents} /* Only the map needs a rule. The prototype ALREADY dissolves .hero-txt here and numbers its children (.eyebrow 2, h1 3, .hero-sub 4, .checks 5, .hero-btns 6, .hero-scarce 7) — so the map just needs a slot in that sequence, and 5 puts it after the subtext and before the buttons. This page has no .checks, so 5 is free. Do NOT try to renumber the text via `.hero-row > .crumb` and friends: the child combinator walks the DOM, and display:contents does not reparent anything, so those selectors match nothing at all — the elements are still children of .hero-txt. Only .hero-map is a real child of .hero-row. */ /* Map directly under the H1 and above the subtext: "251 frames across these markets" is part of the claim the headline is making, so it should land before the prose that qualifies it, not after. The shared numbering gives .hero-sub 4, so the map takes 4 and the subtext moves to 5 — free here, since .checks does not exist on this page. Descendant selectors, not child: .hero-txt is display:contents at this width, which dissolves the box but does NOT reparent, so `.hero-row > .hero-sub` would match nothing. */ /* The shared prototype numbers these children at 1040, not 1100, so between the two widths the stack was unordered — every item at order 0 — and the map fell to the bottom behind the buttons. Restate the whole sequence here, scoped to .pf-hero at (0,3,0) so it outranks the prototype's (0,2,0) in both directions and the order is identical on either side of 1040. */ .pf-hero .hero-txt>.eyebrow{order:2} .pf-hero .hero-txt>h1{order:3} .pf-hero .hero-map{order:4;margin:6px 0 20px;align-self:stretch} .pf-hero .hero-sub{order:5} .pf-hero .hero-txt>.hero-btns{order:6}} /* The map is the market filter and it lives in the hero, running to the edge. */ .hero-map{align-self:center;padding:0;min-width:0} .mp{width:100%;height:auto;display:block} /* the compact build's three panels: a tinted window each, a hairline frame, a label */ .mp-sea{fill:#faf9f7;pointer-events:none} .mp-frame{fill:none;stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke; pointer-events:none} .mp-label{fill:var(--faint);font-family:var(--sans);font-size:11px;font-weight:700; letter-spacing:.13em;text-transform:uppercase} .mp-bg path{fill:var(--hair);stroke:var(--white);stroke-width:1;vector-effect:non-scaling-stroke} /* No markers. A dot sized to carry a count was wider than Estonia, Latvia and Austria put together, so the country fill is the whole display and the whole control; an invisible circle from make_map.py supplies a finger-sized hit area. */ /* The country FILL is the hit target, plus the invisible circle for the small ones. This used to be pointer-events:none, which left the circle as the only way to click anything: the USA renders 329x151px on a 1600px screen and its entire clickable area was a 25x25px disc — 0.6% of the country. Three probes inside the USA all missed it. Estonia is 15x7px, so the circle still earns its place; it just should not be the ONLY target. */ .mp-live path{fill:var(--accent);stroke:var(--white);stroke-width:.7; transition:fill .18s;vector-effect:non-scaling-stroke;pointer-events:auto} .mp-pin{cursor:pointer} .mp-hit{fill:transparent} /* Hover and selected must not look the same. Both were var(--ink), so hovering a country was indistinguishable from having chosen it. Hover is now a mid tone between the resting accent and the selected ink; .mp-pin.on keeps the full ink below. */ .mp-pin:hover path,.mp-pin:focus-visible path{fill:#8a6b41} .mp-pin.on path{fill:var(--ink)} /* :focus, NOT :focus-visible — this one word is the whole fix for the ring on click. The ring was never ours. Clicking a `` gives :focus but NOT :focus-visible, so the old `.mp-pin:focus-visible{outline:none}` never fired on a mouse click and the browser drew its own `-webkit-focus-ring-color auto 5px` — the OS accent, blue on a default Mac. Worse, an outline on a is drawn round the group's bounding box, so clicking the USA boxed everything from Alaska to Maine. hello-elementor's reset already handles this for real buttons (`button:focus:not(:focus-visible)`), but a is not a button. :focus is a superset, so this kills the UA ring on click AND on Tab, while the accent stroke below still marks keyboard focus. */ .mp-pin:focus{outline:none} .mp-pin:focus-visible path{fill:var(--ink);stroke:var(--accent);stroke-width:3} .mp-pin.dead{cursor:default;pointer-events:none} .mp-pin.dead path{fill:var(--hair);pointer-events:none} /* ---------------------------------------------------- browse by service (strip) The cards used to carry a photograph each, on a page that is already 233 photographs. Icons say "this is a category" instead of competing with the work, and a card without an image is short enough that six fit in one scrolling row. pfs-*, NOT svc-*. This component is private to the portfolio, and it used to reuse .svc-strip / .svc-card / .svc-more / .svc-head / .svc-ico -- names that already belong to the shared design system in interior-ref.html, where .svc-strip is a six-card GRID of photographs rather than a horizontal flex scroller. That was invisible until build_interior.py started splicing this stylesheet into /services/interior-rendering/, which appends it AFTER that page's own