/* Image-hotspot prototype Each screen is a full-width image with transparent clickable zones positioned as percentages, so everything scales responsively. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* animated jump for on-page anchor links */ } html, body { margin: 0; padding: 0; background: #fff; } .screen { position: relative; display: block; width: 100%; /* full browser width, no side gutters */ margin: 0 auto; background: #fff; } .screen__img { display: block; width: 100%; height: auto; } /* A hotspot is an anchor sitting over the image. Fully transparent, no hover change. */ .hotspot { position: absolute; display: block; background: transparent; cursor: pointer; } /* Keyboard accessibility only: a thin outline on keyboard focus. This does NOT trigger on mouse hover or click. */ .hotspot:focus-visible { outline: 3px solid #1d5996; outline-offset: 2px; } /* Hover recolour: a copy of the whole slice's width, so it scales pixel-for-pixel with the base image. Only the link/button area is painted; the rest is transparent. Instant swap means the colour just changes - no move, no bolding. */ .hover-strip { position: absolute; left: 0; width: 100%; height: auto; opacity: 0; pointer-events: none; } .hotspot--link:hover + .hover-strip, .hotspot--link:active + .hover-strip, .hotspot--link:focus-visible + .hover-strip, .hotspot--btn:hover + .hover-strip, .hotspot--btn:active + .hover-strip, .hotspot--btn:focus-visible + .hover-strip { opacity: 1; } /* Section nav links: no text change - a thick, square navy bar. Every nav hotspot's bottom edge is aligned to the grey divider line, and the bar sits on that bottom edge, so all bars rest on the line at the same height. */ .hotspot--anchor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.24vw; background: #23366F; opacity: 0; transition: opacity .1s ease; pointer-events: none; } .hotspot--anchor:hover::after, .hotspot--anchor:focus-visible::after, .hotspot--anchor.is-active::after { opacity: 1; } /* Sticky section-nav strip: sliced out of the page so it can stick to the top of the viewport while scrolling, making sections easy to jump between. */ .navbar { position: sticky; top: 0; z-index: 20; background: #fff; line-height: 0; } .navbar > img { display: block; width: 100%; height: auto; } /* Invisible scroll targets for on-page anchor navigation. scroll-margin keeps the section clear of the sticky nav bar. */ .anchor { position: absolute; left: 0; width: 1px; height: 1px; scroll-margin-top: 3.6vw; } /* A "slice" is a positioned wrapper around one image section (e.g. the top of the how-to page) so its hotspots can be placed as % of that slice. */ .slice { position: relative; display: block; } /* FAQ accordion: each item is a full-width button holding two stacked images - the collapsed question row and the expanded question+answer. Toggling which image is hidden reflows the page, pushing everything below up or down. */ .faqs { position: relative; } .faq-item { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .faq-item img { display: block; width: 100%; height: auto; } .faq-item:focus-visible { outline: 3px solid #1d5996; outline-offset: -3px; } [hidden] { display: none !important; } /* Placement helper: add class "debug" to to reveal every zone so you can nudge the numbers, then remove it. */ body.debug .hotspot { background: rgba(37, 99, 235, 0.28); outline: 1px dashed #1d4ed8; }