From e42a8ef5368c35d7d6a40b85d50c0183818edac3 Mon Sep 17 00:00:00 2001 From: Adam Baikie Date: Tue, 4 Aug 2026 10:33:51 +1200 Subject: [PATCH 1/3] Add interactive enroute sector map and styling for improved navigation --- docs/enroute/index.md | 80 ++++++++++- docs/stylesheets/extra.css | 279 ++++++++++++++++++++++++++++++++++++- 2 files changed, 356 insertions(+), 3 deletions(-) diff --git a/docs/enroute/index.md b/docs/enroute/index.md index 411fa89b..79b8114d 100644 --- a/docs/enroute/index.md +++ b/docs/enroute/index.md @@ -6,8 +6,84 @@ New Zealand has seven Enroute Sectors, six of which can be staffed routinely on VATNZ Controllers are able to staff all six permanent Enroute Sectors at once, in a situation known as Extended Services. [You can find out more about Sector Inheritance and Extended Services here](../controller-skills/inheritance-extending.md). - -![NZ FIR Airspace Sectors](../assets/nz-fir-airspace.png){width="100%"} +
+
+ NZ FIR Airspace Sectors + + + OCR + + + Auckland - Oceanic Radar (OCR) + NZAA_CTR | Auckland Control | 123.900 + Sequences NZAA and NZWP arrivals, with RAN, BAY and AA TMA inheritance when offline. + + + + RAN + + + Auckland - Raglan (RAN) + NZAA-R_CTR | Auckland Control | 126.000 + Event-only sector managing NZAA sequencing, departures and HN TMA traffic. + + + + BAY + + + Christchurch - Bays (BAY) + NZCH-B_CTR | Bay Approach | 119.500 + Manages East Coast flow into AA TMA and traffic crossing into OHA. + + + + OHA + + + Ohakea (OHA) + NZOH_CTR | Ohakea Control | 126.200 + Links prop and military traffic around OH TMA, NZAA and NZWN flows. + + + + NAK + + + Christchurch - Taranaki (NAK) + NZCH-T_CTR | Christchurch Control | 123.700 + Primary NZAA, NZCH, NZQN and NZWN flow sector, including WN TMA inheritance. + + + + KAI + + + Christchurch - Kaikoura (KAI) + NZCH-K_CTR | Christchurch Control | 129.400 + Manages northbound and southbound NZCH traffic, including CH TMA inheritance. + + + + STH + + + Christchurch - South (STH) + NZCH-S_CTR | Christchurch Control | 129.300 + Manages NZQN, NZDN, NZNV and western NZCH flows, with QN TMA inheritance. + +
+ +
+ OCRAuckland Control | 123.900 + RANAuckland Control | 126.000 + BAYBay Approach | 119.500 + OHAOhakea Control | 126.200 + NAKChristchurch Control | 123.700 + KAIChristchurch Control | 129.400 + STHChristchurch Control | 129.300 +
+
## General Rules of Thumb for ENR diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 8e4fe63d..e2cddaa3 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -142,4 +142,281 @@ h4 { .coldline { background-color: var(--coldline); -} \ No newline at end of file +} + +/* Enroute sector overview */ +.enroute-map { + margin: 1.5rem 0 2rem; +} + +.enroute-map__canvas { + position: relative; + width: min(100%, 810px); + margin: 0 auto; +} + +.enroute-map__canvas img { + display: block; + width: 100%; + height: auto; +} + +.enroute-map__hotspot { + --sector-color: rgba(81, 90, 109, 0.15); + --sector-border: rgba(255, 255, 255, 0.95); + position: absolute; + display: block; + border: 2px solid transparent; + background: transparent; + color: #0f172a; + text-decoration: none; + transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease; +} + +.enroute-map__hotspot:hover, +.enroute-map__hotspot:focus-visible { + background: var(--sector-color); + border-color: var(--sector-border); + color: #0f172a; + filter: drop-shadow(0 0 0.45rem rgba(15, 23, 42, 0.28)); + outline: none; + z-index: 5; +} + +.enroute-map__hotspot:focus-visible .enroute-map__label { + outline: 3px solid var(--md-typeset-a-color); + outline-offset: 3px; +} + +.enroute-map__label { + position: absolute; + left: 50%; + top: 50%; + padding: 0.18rem 0.45rem; + border-radius: 0.25rem; + background: rgba(255, 255, 255, 0.88); + box-shadow: 0 0.15rem 0.45rem rgba(15, 23, 42, 0.16); + color: #0f172a; + font-size: clamp(0.58rem, 1.2vw, 0.78rem); + font-weight: 700; + line-height: 1; + transform: translate(-50%, -50%); +} + +.enroute-map__panel { + position: absolute; + display: flex; + width: min(17rem, 46vw); + flex-direction: column; + gap: 0.25rem; + padding: 0.65rem 0.75rem; + border: 1px solid rgba(148, 163, 184, 0.35); + border-radius: 0.35rem; + background: var(--md-default-bg-color); + box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.24); + color: var(--md-primary-fg-color); + font-size: 0.68rem; + line-height: 1.35; + opacity: 0; + pointer-events: none; + transform: translateY(0.35rem); + transition: opacity 160ms ease, transform 160ms ease; + z-index: 10; +} + +.enroute-map__panel strong { + color: var(--md-primary-fg-color); + font-size: 0.74rem; +} + +.enroute-map__hotspot:hover + .enroute-map__panel, +.enroute-map__hotspot:focus-visible + .enroute-map__panel { + opacity: 1; + transform: translateY(0); +} + +.enroute-map__hotspot--ocr { + --sector-color: rgba(122, 166, 224, 0.3); + left: 37.5%; + top: 3.2%; + width: 49.5%; + height: 38.4%; + clip-path: polygon(30% 0, 68% 1%, 90% 15%, 100% 44%, 93% 52%, 74% 54%, 63% 66%, 57% 88%, 44% 100%, 22% 80%, 2% 58%, 0 39%, 10% 18%); +} + +.enroute-map__hotspot--ran { + --sector-color: rgba(93, 108, 202, 0.34); + left: 59.4%; + top: 27.6%; + width: 14.2%; + height: 12.4%; + clip-path: polygon(0 0, 62% 16%, 100% 44%, 86% 100%, 13% 100%, 4% 64%); +} + +.enroute-map__hotspot--bay { + --sector-color: rgba(226, 97, 194, 0.28); + left: 67.2%; + top: 20.8%; + width: 25.5%; + height: 20.4%; + clip-path: polygon(0 12%, 73% 0, 100% 31%, 86% 100%, 61% 74%, 23% 79%, 12% 55%); +} + +.enroute-map__hotspot--oha { + --sector-color: rgba(128, 234, 95, 0.3); + left: 70.2%; + top: 31.6%; + width: 19.2%; + height: 22.1%; + clip-path: polygon(20% 12%, 64% 8%, 100% 30%, 76% 100%, 36% 86%, 22% 58%, 0 15%); +} + +.enroute-map__hotspot--nak { + --sector-color: rgba(238, 174, 72, 0.32); + left: 48.2%; + top: 39.4%; + width: 32.2%; + height: 20.2%; + clip-path: polygon(10% 0, 66% 0, 83% 48%, 100% 75%, 68% 100%, 7% 100%, 0 65%, 1% 24%); +} + +.enroute-map__hotspot--kai { + --sector-color: rgba(229, 90, 89, 0.32); + left: 60.9%; + top: 52.2%; + width: 21.1%; + height: 17.6%; + clip-path: polygon(0 24%, 56% 0, 100% 12%, 79% 100%, 36% 88%, 0 40%); +} + +.enroute-map__hotspot--sth { + --sector-color: rgba(51, 217, 170, 0.3); + left: 36.9%; + top: 56.1%; + width: 38.5%; + height: 35.4%; + clip-path: polygon(22% 0, 57% 0, 83% 27%, 100% 34%, 61% 100%, 0 81%, 6% 58%, 0 44%, 9% 21%); +} + +.enroute-map__hotspot--ocr .enroute-map__label { + left: 58%; + top: 36%; +} + +.enroute-map__hotspot--ran .enroute-map__label { + left: 45%; + top: 48%; +} + +.enroute-map__hotspot--bay .enroute-map__label { + left: 56%; + top: 46%; +} + +.enroute-map__hotspot--oha .enroute-map__label { + left: 48%; + top: 50%; +} + +.enroute-map__hotspot--nak .enroute-map__label { + left: 50%; + top: 47%; +} + +.enroute-map__hotspot--kai .enroute-map__label { + left: 50%; + top: 46%; +} + +.enroute-map__hotspot--sth .enroute-map__label { + left: 55%; + top: 55%; +} + +.enroute-map__panel--ocr { + left: 23%; + top: 12%; +} + +.enroute-map__panel--ran { + left: 41%; + top: 29%; +} + +.enroute-map__panel--bay { + right: 5%; + top: 12%; +} + +.enroute-map__panel--oha { + right: 5%; + top: 40%; +} + +.enroute-map__panel--nak { + left: 19%; + top: 43%; +} + +.enroute-map__panel--kai { + right: 7%; + top: 55%; +} + +.enroute-map__panel--sth { + left: 19%; + bottom: 12%; +} + +.enroute-map__cards { + display: none; +} + +[data-md-color-scheme="slate"] .enroute-map__label { + background: rgba(15, 23, 42, 0.88); + color: #fff; +} + +@media screen and (max-width: 700px) { + .enroute-map__hotspot { + border: 0; + } + + .enroute-map__label { + padding: 0.14rem 0.28rem; + font-size: 0.56rem; + } + + .enroute-map__panel { + display: none; + } + + .enroute-map__cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); + gap: 0.5rem; + margin-top: 0.75rem; + } + + .enroute-map__cards a { + display: flex; + min-height: 3rem; + flex-direction: column; + justify-content: center; + padding: 0.55rem 0.65rem; + border: 1px solid rgba(148, 163, 184, 0.35); + border-radius: 0.35rem; + background: var(--md-card-a); + color: var(--md-primary-fg-color); + line-height: 1.2; + } + + .enroute-map__cards a:hover, + .enroute-map__cards a:focus-visible { + background: var(--md-card-a-hover); + } + + .enroute-map__cards span { + font-size: 0.7rem; + } +} From 8c6b50766c3d6881a04632e3c287b414a8b918b0 Mon Sep 17 00:00:00 2001 From: Adam Baikie Date: Tue, 4 Aug 2026 10:40:27 +1200 Subject: [PATCH 2/3] Refactor enroute map to use SVG overlays for sector links and improve styling --- docs/enroute/index.md | 49 +++++---- docs/stylesheets/extra.css | 212 ++++++++++++------------------------- 2 files changed, 92 insertions(+), 169 deletions(-) diff --git a/docs/enroute/index.md b/docs/enroute/index.md index 79b8114d..70383e85 100644 --- a/docs/enroute/index.md +++ b/docs/enroute/index.md @@ -10,63 +10,66 @@ VATNZ Controllers are able to staff all six permanent Enroute Sectors at once, i
NZ FIR Airspace Sectors - - OCR - + + + + + + + + + + + + + + + + + + + + + + + + Auckland - Oceanic Radar (OCR) NZAA_CTR | Auckland Control | 123.900 Sequences NZAA and NZWP arrivals, with RAN, BAY and AA TMA inheritance when offline. - - RAN - - Auckland - Raglan (RAN) + Auckland - Raglan (RAN) | EVENT ONLY NZAA-R_CTR | Auckland Control | 126.000 Event-only sector managing NZAA sequencing, departures and HN TMA traffic. - - BAY - Christchurch - Bays (BAY) NZCH-B_CTR | Bay Approach | 119.500 Manages East Coast flow into AA TMA and traffic crossing into OHA. - - OHA - Ohakea (OHA) NZOH_CTR | Ohakea Control | 126.200 Links prop and military traffic around OH TMA, NZAA and NZWN flows. - - NAK - Christchurch - Taranaki (NAK) NZCH-T_CTR | Christchurch Control | 123.700 Primary NZAA, NZCH, NZQN and NZWN flow sector, including WN TMA inheritance. - - KAI - Christchurch - Kaikoura (KAI) NZCH-K_CTR | Christchurch Control | 129.400 Manages northbound and southbound NZCH traffic, including CH TMA inheritance. - - STH - Christchurch - South (STH) NZCH-S_CTR | Christchurch Control | 129.300 @@ -76,7 +79,7 @@ VATNZ Controllers are able to staff all six permanent Enroute Sectors at once, i
OCRAuckland Control | 123.900 - RANAuckland Control | 126.000 + RAN | EVENT ONLYAuckland Control | 126.000 BAYBay Approach | 119.500 OHAOhakea Control | 126.200 NAKChristchurch Control | 123.700 diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index e2cddaa3..c10a8774 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -161,46 +161,66 @@ h4 { height: auto; } -.enroute-map__hotspot { - --sector-color: rgba(81, 90, 109, 0.15); - --sector-border: rgba(255, 255, 255, 0.95); +.enroute-map__overlay { position: absolute; - display: block; - border: 2px solid transparent; - background: transparent; - color: #0f172a; - text-decoration: none; - transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease; + inset: 0; + width: 100%; + height: 100%; } -.enroute-map__hotspot:hover, -.enroute-map__hotspot:focus-visible { - background: var(--sector-color); - border-color: var(--sector-border); - color: #0f172a; - filter: drop-shadow(0 0 0.45rem rgba(15, 23, 42, 0.28)); +.enroute-map__sector { + --sector-color: rgba(71, 85, 105, 0.28); + cursor: pointer; outline: none; - z-index: 5; } -.enroute-map__hotspot:focus-visible .enroute-map__label { - outline: 3px solid var(--md-typeset-a-color); - outline-offset: 3px; +.enroute-map__sector polygon { + fill: transparent; + pointer-events: all; + stroke: transparent; + stroke-linejoin: round; + stroke-width: 4px; + transition: fill 160ms ease, stroke 160ms ease, filter 160ms ease; } -.enroute-map__label { - position: absolute; - left: 50%; - top: 50%; - padding: 0.18rem 0.45rem; - border-radius: 0.25rem; - background: rgba(255, 255, 255, 0.88); - box-shadow: 0 0.15rem 0.45rem rgba(15, 23, 42, 0.16); - color: #0f172a; - font-size: clamp(0.58rem, 1.2vw, 0.78rem); - font-weight: 700; - line-height: 1; - transform: translate(-50%, -50%); +.enroute-map__sector:hover polygon, +.enroute-map__sector:focus-visible polygon { + fill: var(--sector-color); + filter: drop-shadow(0 0 0.45rem rgba(15, 23, 42, 0.22)); + stroke: rgba(255, 255, 255, 0.95); +} + +.enroute-map__sector:focus-visible polygon { + stroke: var(--md-typeset-a-color); + stroke-width: 6px; +} + +.enroute-map__sector--ocr { + --sector-color: rgba(71, 85, 105, 0.2); +} + +.enroute-map__sector--ran { + --sector-color: rgba(71, 85, 105, 0.32); +} + +.enroute-map__sector--bay { + --sector-color: rgba(71, 85, 105, 0.25); +} + +.enroute-map__sector--oha { + --sector-color: rgba(71, 85, 105, 0.25); +} + +.enroute-map__sector--nak { + --sector-color: rgba(71, 85, 105, 0.24); +} + +.enroute-map__sector--kai { + --sector-color: rgba(71, 85, 105, 0.27); +} + +.enroute-map__sector--sth { + --sector-color: rgba(71, 85, 105, 0.22); } .enroute-map__panel { @@ -229,110 +249,24 @@ h4 { font-size: 0.74rem; } -.enroute-map__hotspot:hover + .enroute-map__panel, -.enroute-map__hotspot:focus-visible + .enroute-map__panel { +.enroute-map__canvas:has(.enroute-map__sector--ocr:hover) .enroute-map__panel--ocr, +.enroute-map__canvas:has(.enroute-map__sector--ocr:focus-visible) .enroute-map__panel--ocr, +.enroute-map__canvas:has(.enroute-map__sector--ran:hover) .enroute-map__panel--ran, +.enroute-map__canvas:has(.enroute-map__sector--ran:focus-visible) .enroute-map__panel--ran, +.enroute-map__canvas:has(.enroute-map__sector--bay:hover) .enroute-map__panel--bay, +.enroute-map__canvas:has(.enroute-map__sector--bay:focus-visible) .enroute-map__panel--bay, +.enroute-map__canvas:has(.enroute-map__sector--oha:hover) .enroute-map__panel--oha, +.enroute-map__canvas:has(.enroute-map__sector--oha:focus-visible) .enroute-map__panel--oha, +.enroute-map__canvas:has(.enroute-map__sector--nak:hover) .enroute-map__panel--nak, +.enroute-map__canvas:has(.enroute-map__sector--nak:focus-visible) .enroute-map__panel--nak, +.enroute-map__canvas:has(.enroute-map__sector--kai:hover) .enroute-map__panel--kai, +.enroute-map__canvas:has(.enroute-map__sector--kai:focus-visible) .enroute-map__panel--kai, +.enroute-map__canvas:has(.enroute-map__sector--sth:hover) .enroute-map__panel--sth, +.enroute-map__canvas:has(.enroute-map__sector--sth:focus-visible) .enroute-map__panel--sth { opacity: 1; transform: translateY(0); } -.enroute-map__hotspot--ocr { - --sector-color: rgba(122, 166, 224, 0.3); - left: 37.5%; - top: 3.2%; - width: 49.5%; - height: 38.4%; - clip-path: polygon(30% 0, 68% 1%, 90% 15%, 100% 44%, 93% 52%, 74% 54%, 63% 66%, 57% 88%, 44% 100%, 22% 80%, 2% 58%, 0 39%, 10% 18%); -} - -.enroute-map__hotspot--ran { - --sector-color: rgba(93, 108, 202, 0.34); - left: 59.4%; - top: 27.6%; - width: 14.2%; - height: 12.4%; - clip-path: polygon(0 0, 62% 16%, 100% 44%, 86% 100%, 13% 100%, 4% 64%); -} - -.enroute-map__hotspot--bay { - --sector-color: rgba(226, 97, 194, 0.28); - left: 67.2%; - top: 20.8%; - width: 25.5%; - height: 20.4%; - clip-path: polygon(0 12%, 73% 0, 100% 31%, 86% 100%, 61% 74%, 23% 79%, 12% 55%); -} - -.enroute-map__hotspot--oha { - --sector-color: rgba(128, 234, 95, 0.3); - left: 70.2%; - top: 31.6%; - width: 19.2%; - height: 22.1%; - clip-path: polygon(20% 12%, 64% 8%, 100% 30%, 76% 100%, 36% 86%, 22% 58%, 0 15%); -} - -.enroute-map__hotspot--nak { - --sector-color: rgba(238, 174, 72, 0.32); - left: 48.2%; - top: 39.4%; - width: 32.2%; - height: 20.2%; - clip-path: polygon(10% 0, 66% 0, 83% 48%, 100% 75%, 68% 100%, 7% 100%, 0 65%, 1% 24%); -} - -.enroute-map__hotspot--kai { - --sector-color: rgba(229, 90, 89, 0.32); - left: 60.9%; - top: 52.2%; - width: 21.1%; - height: 17.6%; - clip-path: polygon(0 24%, 56% 0, 100% 12%, 79% 100%, 36% 88%, 0 40%); -} - -.enroute-map__hotspot--sth { - --sector-color: rgba(51, 217, 170, 0.3); - left: 36.9%; - top: 56.1%; - width: 38.5%; - height: 35.4%; - clip-path: polygon(22% 0, 57% 0, 83% 27%, 100% 34%, 61% 100%, 0 81%, 6% 58%, 0 44%, 9% 21%); -} - -.enroute-map__hotspot--ocr .enroute-map__label { - left: 58%; - top: 36%; -} - -.enroute-map__hotspot--ran .enroute-map__label { - left: 45%; - top: 48%; -} - -.enroute-map__hotspot--bay .enroute-map__label { - left: 56%; - top: 46%; -} - -.enroute-map__hotspot--oha .enroute-map__label { - left: 48%; - top: 50%; -} - -.enroute-map__hotspot--nak .enroute-map__label { - left: 50%; - top: 47%; -} - -.enroute-map__hotspot--kai .enroute-map__label { - left: 50%; - top: 46%; -} - -.enroute-map__hotspot--sth .enroute-map__label { - left: 55%; - top: 55%; -} - .enroute-map__panel--ocr { left: 23%; top: 12%; @@ -372,21 +306,7 @@ h4 { display: none; } -[data-md-color-scheme="slate"] .enroute-map__label { - background: rgba(15, 23, 42, 0.88); - color: #fff; -} - @media screen and (max-width: 700px) { - .enroute-map__hotspot { - border: 0; - } - - .enroute-map__label { - padding: 0.14rem 0.28rem; - font-size: 0.56rem; - } - .enroute-map__panel { display: none; } From 8bc1e75f33d79920812739f3e6bc209c7823d6be Mon Sep 17 00:00:00 2001 From: Adam Baikie Date: Tue, 4 Aug 2026 10:57:49 +1200 Subject: [PATCH 3/3] Enhance enroute sector map with interactive SVG elements and improved accessibility features --- docs/enroute/index.md | 198 ++++++++++++++++++++++--------------- docs/stylesheets/extra.css | 197 ------------------------------------ 2 files changed, 117 insertions(+), 278 deletions(-) diff --git a/docs/enroute/index.md b/docs/enroute/index.md index 70383e85..e7b0a8d3 100644 --- a/docs/enroute/index.md +++ b/docs/enroute/index.md @@ -6,87 +6,123 @@ New Zealand has seven Enroute Sectors, six of which can be staffed routinely on VATNZ Controllers are able to staff all six permanent Enroute Sectors at once, in a situation known as Extended Services. [You can find out more about Sector Inheritance and Extended Services here](../controller-skills/inheritance-extending.md). -
-
- NZ FIR Airspace Sectors - - - - - - - - - - - - - - - - - - - - - - - - - - - Auckland - Oceanic Radar (OCR) - NZAA_CTR | Auckland Control | 123.900 - Sequences NZAA and NZWP arrivals, with RAN, BAY and AA TMA inheritance when offline. - - - - Auckland - Raglan (RAN) | EVENT ONLY - NZAA-R_CTR | Auckland Control | 126.000 - Event-only sector managing NZAA sequencing, departures and HN TMA traffic. - - - - Christchurch - Bays (BAY) - NZCH-B_CTR | Bay Approach | 119.500 - Manages East Coast flow into AA TMA and traffic crossing into OHA. - - - - Ohakea (OHA) - NZOH_CTR | Ohakea Control | 126.200 - Links prop and military traffic around OH TMA, NZAA and NZWN flows. - - - - Christchurch - Taranaki (NAK) - NZCH-T_CTR | Christchurch Control | 123.700 - Primary NZAA, NZCH, NZQN and NZWN flow sector, including WN TMA inheritance. - - - - Christchurch - Kaikoura (KAI) - NZCH-K_CTR | Christchurch Control | 129.400 - Manages northbound and southbound NZCH traffic, including CH TMA inheritance. - - - - Christchurch - South (STH) - NZCH-S_CTR | Christchurch Control | 129.300 - Manages NZQN, NZDN, NZNV and western NZCH flows, with QN TMA inheritance. - -
- -
- OCRAuckland Control | 123.900 - RAN | EVENT ONLYAuckland Control | 126.000 - BAYBay Approach | 119.500 - OHAOhakea Control | 126.200 - NAKChristchurch Control | 123.700 - KAIChristchurch Control | 129.400 - STHChristchurch Control | 129.300 -
-
+ + NZ FIR Airspace Sectors + Interactive map of New Zealand FIR enroute sectors. Select a sector to open its page. + + + + + Auckland - Oceanic Radar (OCR) | NZAA_CTR | Auckland Control | 123.900 + + + + + + + + Auckland - Raglan (RAN) | EVENT ONLY | NZAA-R_CTR | Auckland Control | 126.000 + + + + + + + + Christchurch - Bays (BAY) | NZCH-B_CTR | Bay Approach | 119.500 + + + + + + + + Ohakea (OHA) | NZOH_CTR | Ohakea Control | 126.200 + + + + + + + + Christchurch - Taranaki (NAK) | NZCH-T_CTR | Christchurch Control | 123.700 + + + + + + + + Christchurch - Kaikoura (KAI) | NZCH-K_CTR | Christchurch Control | 129.400 + + + + + + + + Christchurch - South (STH) | NZCH-S_CTR | Christchurch Control | 129.300 + + + + + + + + Auckland - Oceanic Radar (OCR) + NZAA_CTR | Auckland Control | 123.900 + Sequences NZAA and NZWP arrivals. + + + + + + Auckland - Raglan (RAN) + EVENT ONLY + NZAA-R_CTR | Auckland Control | 126.000 + + + + + + Christchurch - Bays (BAY) + NZCH-B_CTR | Bay Approach | 119.500 + Manages East Coast flow into AA TMA and OHA. + + + + + + Ohakea (OHA) + NZOH_CTR | Ohakea Control | 126.200 + Links prop and military traffic around OH TMA. + + + + + + Christchurch - Taranaki (NAK) + NZCH-T_CTR | Christchurch Control | 123.700 + Primary NZAA, NZCH, NZQN and NZWN flow sector. + + + + + + Christchurch - Kaikoura (KAI) + NZCH-K_CTR | Christchurch Control | 129.400 + Manages northbound and southbound NZCH traffic. + + + + + + Christchurch - South (STH) + NZCH-S_CTR | Christchurch Control | 129.300 + Manages NZQN, NZDN, NZNV and western NZCH flows. + + + ## General Rules of Thumb for ENR diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index c10a8774..4f5e2b8c 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -143,200 +143,3 @@ h4 { .coldline { background-color: var(--coldline); } - -/* Enroute sector overview */ -.enroute-map { - margin: 1.5rem 0 2rem; -} - -.enroute-map__canvas { - position: relative; - width: min(100%, 810px); - margin: 0 auto; -} - -.enroute-map__canvas img { - display: block; - width: 100%; - height: auto; -} - -.enroute-map__overlay { - position: absolute; - inset: 0; - width: 100%; - height: 100%; -} - -.enroute-map__sector { - --sector-color: rgba(71, 85, 105, 0.28); - cursor: pointer; - outline: none; -} - -.enroute-map__sector polygon { - fill: transparent; - pointer-events: all; - stroke: transparent; - stroke-linejoin: round; - stroke-width: 4px; - transition: fill 160ms ease, stroke 160ms ease, filter 160ms ease; -} - -.enroute-map__sector:hover polygon, -.enroute-map__sector:focus-visible polygon { - fill: var(--sector-color); - filter: drop-shadow(0 0 0.45rem rgba(15, 23, 42, 0.22)); - stroke: rgba(255, 255, 255, 0.95); -} - -.enroute-map__sector:focus-visible polygon { - stroke: var(--md-typeset-a-color); - stroke-width: 6px; -} - -.enroute-map__sector--ocr { - --sector-color: rgba(71, 85, 105, 0.2); -} - -.enroute-map__sector--ran { - --sector-color: rgba(71, 85, 105, 0.32); -} - -.enroute-map__sector--bay { - --sector-color: rgba(71, 85, 105, 0.25); -} - -.enroute-map__sector--oha { - --sector-color: rgba(71, 85, 105, 0.25); -} - -.enroute-map__sector--nak { - --sector-color: rgba(71, 85, 105, 0.24); -} - -.enroute-map__sector--kai { - --sector-color: rgba(71, 85, 105, 0.27); -} - -.enroute-map__sector--sth { - --sector-color: rgba(71, 85, 105, 0.22); -} - -.enroute-map__panel { - position: absolute; - display: flex; - width: min(17rem, 46vw); - flex-direction: column; - gap: 0.25rem; - padding: 0.65rem 0.75rem; - border: 1px solid rgba(148, 163, 184, 0.35); - border-radius: 0.35rem; - background: var(--md-default-bg-color); - box-shadow: 0 0.75rem 1.75rem rgba(15, 23, 42, 0.24); - color: var(--md-primary-fg-color); - font-size: 0.68rem; - line-height: 1.35; - opacity: 0; - pointer-events: none; - transform: translateY(0.35rem); - transition: opacity 160ms ease, transform 160ms ease; - z-index: 10; -} - -.enroute-map__panel strong { - color: var(--md-primary-fg-color); - font-size: 0.74rem; -} - -.enroute-map__canvas:has(.enroute-map__sector--ocr:hover) .enroute-map__panel--ocr, -.enroute-map__canvas:has(.enroute-map__sector--ocr:focus-visible) .enroute-map__panel--ocr, -.enroute-map__canvas:has(.enroute-map__sector--ran:hover) .enroute-map__panel--ran, -.enroute-map__canvas:has(.enroute-map__sector--ran:focus-visible) .enroute-map__panel--ran, -.enroute-map__canvas:has(.enroute-map__sector--bay:hover) .enroute-map__panel--bay, -.enroute-map__canvas:has(.enroute-map__sector--bay:focus-visible) .enroute-map__panel--bay, -.enroute-map__canvas:has(.enroute-map__sector--oha:hover) .enroute-map__panel--oha, -.enroute-map__canvas:has(.enroute-map__sector--oha:focus-visible) .enroute-map__panel--oha, -.enroute-map__canvas:has(.enroute-map__sector--nak:hover) .enroute-map__panel--nak, -.enroute-map__canvas:has(.enroute-map__sector--nak:focus-visible) .enroute-map__panel--nak, -.enroute-map__canvas:has(.enroute-map__sector--kai:hover) .enroute-map__panel--kai, -.enroute-map__canvas:has(.enroute-map__sector--kai:focus-visible) .enroute-map__panel--kai, -.enroute-map__canvas:has(.enroute-map__sector--sth:hover) .enroute-map__panel--sth, -.enroute-map__canvas:has(.enroute-map__sector--sth:focus-visible) .enroute-map__panel--sth { - opacity: 1; - transform: translateY(0); -} - -.enroute-map__panel--ocr { - left: 23%; - top: 12%; -} - -.enroute-map__panel--ran { - left: 41%; - top: 29%; -} - -.enroute-map__panel--bay { - right: 5%; - top: 12%; -} - -.enroute-map__panel--oha { - right: 5%; - top: 40%; -} - -.enroute-map__panel--nak { - left: 19%; - top: 43%; -} - -.enroute-map__panel--kai { - right: 7%; - top: 55%; -} - -.enroute-map__panel--sth { - left: 19%; - bottom: 12%; -} - -.enroute-map__cards { - display: none; -} - -@media screen and (max-width: 700px) { - .enroute-map__panel { - display: none; - } - - .enroute-map__cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); - gap: 0.5rem; - margin-top: 0.75rem; - } - - .enroute-map__cards a { - display: flex; - min-height: 3rem; - flex-direction: column; - justify-content: center; - padding: 0.55rem 0.65rem; - border: 1px solid rgba(148, 163, 184, 0.35); - border-radius: 0.35rem; - background: var(--md-card-a); - color: var(--md-primary-fg-color); - line-height: 1.2; - } - - .enroute-map__cards a:hover, - .enroute-map__cards a:focus-visible { - background: var(--md-card-a-hover); - } - - .enroute-map__cards span { - font-size: 0.7rem; - } -}