/* * Compass rose, shared by every map (2026-08-13). An instrument face, not a toy: a machined dial * with real tick marks, a needle that settles rather than snapping, and a legible bearing readout. * Motion here represents something physical, which is the rule for every animation in this project, * so it moves only when the phone actually turns. */ .blr-compass { position: fixed; z-index: 25; width: 74px; height: 74px; display: none; /* only shown once the sensor genuinely reports */ align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(23,28,41,0.96), rgba(11,14,20,0.96)); border: 1px solid #232A3D; box-shadow: 0 6px 22px rgba(0,0,0,0.5), inset 0 0 18px rgba(34,211,238,0.05); backdrop-filter: blur(8px); user-select: none; cursor: grab; touch-action: none; } .blr-compass.on { display: flex; } .blr-compass.dragging { cursor: grabbing; transition: none; } /* The shared navigation expands into map space. The compass is useful only while it does not compete with the menu, so the menu always wins and the dial returns when it closes. */ body.blenav-open .blr-compass { opacity: 0; pointer-events: none; transform: translateY(12px); } .blr-compass { transition: opacity .18s ease, transform .18s ease; } /* The dial follows the phone's travel direction, matching the purple map cone. */ .blr-compass .dial { position: absolute; inset: 5px; border-radius: 50%; transition: transform 120ms linear; } .blr-compass .dial svg { width: 100%; height: 100%; display: block; } /* The device's own heading, fixed at the top, so the gap between it and N is the turn you must make. */ .blr-compass .fix { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #22D3EE; } .blr-compass .readout { position: absolute; bottom: 9px; left: 0; right: 0; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: #8B93A7; letter-spacing: .02em; pointer-events: none; } .blr-compass.uncalibrated { border-color: #F59E0B; } .blr-compass.uncalibrated .readout { color: #F59E0B; } /* Bearing to a chosen thing. Drawn inside the same dial so one glance answers both "where is north" and "which way is my bike". */ .blr-compass .target { position: absolute; inset: 5px; border-radius: 50%; transition: transform 120ms linear; display: none; } .blr-compass.has-target .target { display: block; } .blr-compass .target .needle { position: absolute; left: 50%; top: 6px; width: 0; height: 0; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 11px solid #34D399; filter: drop-shadow(0 0 5px rgba(52,211,153,.8)); } .blr-compass-note { position: fixed; z-index: 25; font-size: 9.5px; color: #5A6273; text-align: center; width: 96px; pointer-events: none; display: none; } .blr-compass-note.on { display: block; } @media (prefers-reduced-motion: reduce) { .blr-compass, .blr-compass .dial, .blr-compass .target { transition: none; } } /* * Heading cone on the "you are here" dot (2026-08-13), the same idea every maps app uses: the * wedge shows which way the phone is pointed, so the map answers "which way am I facing" and not * only "where am I". * * Driven by --blr-heading, published once on by the compass widget, so every map on the page * shares one source of truth and cannot drift out of step with the dial. */ .you-cone { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; pointer-events: none; transform: rotate(var(--blr-heading, 0deg)); transition: transform 120ms linear; background: conic-gradient(from -24deg at 50% 50%, rgba(139,92,246,0.50), rgba(139,92,246,0.16) 26deg, rgba(139,92,246,0) 48deg); clip-path: circle(50% at 50% 50%); opacity: 0; /* hidden until a heading genuinely arrives */ } html.blr-has-heading .you-cone { opacity: 1; } @media (prefers-reduced-motion: reduce) { .you-cone { transition: none; } }