/* Te Pae Christchurch unique styles --- V2 "Liquid Glass"
=======================================================
A fundamental design direction distinct from v1:
- Desktop: floating glass CARD (rounded, detached from screen edges).
- Mobile: floating glass SHEET from the top (not a full-screen takeover).
- Dark translucent surfaces with heavy backdrop blur + saturate.
- Chevron indicator (rotating SVG), scoped so it can't collide with v1 plus/cross.
- Suisse Intl typography, Blue River accents, White logo variant.
ALL rules are scoped under `body.v2` so this file never fights v1.
The PHP `$theme` constant switches the and the .
Palette (TEP0002 Brand Guidelines)
----------------------------------
Primary --- Black #000000, White #ffffff, Blue River #00adb7
Secondary --- Charcoal #545759, Deep Teal #005556, Grey Blue #9db6c5,
Plum #910e6b, Gold #dcaa0b, Silver #f0f0f0
Typeface --- Suisse Int'l (Regular / SemiBold / Thin)
*/
/* ------------------------------------------------------------------ */
/* Fonts --- Suisse Intl self-hosted (same files as v1) */
/* ------------------------------------------------------------------ */
@font-face {
font-family: "Suisse Intl";
src: url("fonts/SuisseIntl-Regular.otf") format("opentype"),
url("fonts/SuisseIntl-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Suisse Intl";
src: url("fonts/SuisseIntl-SemiBold.otf") format("opentype"),
url("fonts/SuisseIntl-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Suisse Intl";
src: url("fonts/SuisseIntl-Thin.otf") format("opentype"),
url("fonts/SuisseIntl-Thin.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Suisse Intl";
src: url("fonts/SuisseIntl-ThinIt.otf") format("opentype"),
url("fonts/SuisseIntl-ThinIt.ttf") format("truetype");
font-weight: 200;
font-style: italic;
font-display: swap;
}
/* ================================================================== */
/* HAMBURGER BUTTON --- FA icons, matched to the Fullscreen button */
/* ================================================================== */
/* The button is a circular glass pill, visually identical to #fullscreenButton
(same icon set: Font Awesome, same shadow/inner-hairline recipe). We swap
`fa-bars` <-> `fa-times` based on the hidden checkbox's state.
IMPORTANT: no backdrop-filter on #menuToggle. Any filter/blur/transform
on this element creates a new CSS containing block, which traps the
position:fixed #menu descendant inside the 52px button and squashes
the mobile full-screen menu to button width. The more opaque background
+ inner hairline still reads as a clean glass chip against the tour. */
body.v2 #menuToggle {
top: 16px;
right: 16px;
width: 42px;
height: 42px;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(20, 20, 22, 0.62);
color: #ffffff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.12) inset;
font-size: 1.3rem;
opacity: 0; /* revealed by JS after SDK connects */
transition: background-color .3s ease, opacity .3s ease,
box-shadow .3s ease, color .3s ease,
transform .35s ease;
cursor: pointer;
}
body.v2 #menuToggle:hover {
background-color: rgba(20, 20, 22, 0.85);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
/* Icons stay white in every state (hover included) for visual consistency
with the fullscreen button + NEXT/BACK controls. A coloured hover was
also sticking on mobile (tap-hover persists on touch devices), which
made the bars render aqua after the first tap. */
body.v2 #menuToggle:hover .v2-menu-icon,
body.v2 #menuToggle:focus .v2-menu-icon,
body.v2 #menuToggle:active .v2-menu-icon {
color: #ffffff;
}
body.v2 #menuToggle input {
/* The clickable overlay --- keep it aligned to the round button. */
width: 42px !important;
height: 42px !important;
top: 0 !important;
left: 0 !important;
cursor: pointer;
}
/* v1 hamburger bars are inert in v2. Hide them entirely so they don't peek
through underneath the FA glyph. */
body.v2 #menuToggle > span {
display: none;
}
/* "MENU" legacy text: hidden in v2 (tooltip handles the label on desktop,
and on mobile an underlined "Close" label takes over when the sheet is open). */
body.v2 #burger-button-text {
display: none;
}
/* FA icon layering: fa-bars visible when closed, fa-times when checked.
Absolute positioning keeps both glyphs optically centred regardless of
FA's intrinsic baseline metrics. */
body.v2 #menuToggle .v2-menu-icon {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
color: #ffffff;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease, color .3s ease;
}
body.v2 #menuToggle .v2-menu-icon-close,
body.v2 #menuToggle input:checked ~ .v2-menu-icon-bars {
opacity: 0;
transform: translate(-50%, -50%) scale(.85);
}
body.v2 #menuToggle .v2-menu-icon-bars,
body.v2 #menuToggle input:checked ~ .v2-menu-icon-close {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Underlined "Close" text --- desktop stays icon-only, so hide by default.
IMPORTANT: common stylesheet has `#menuToggle input:checked~span {
transform: rotate(45deg); margin-top: 5px; margin-left: 3px }` and
`span:nth-last-child(2) { transform: rotate(-45deg) }`. Our Close label
IS a , so it inherits those transforms and shows up rotated unless
we forcibly reset them. */
body.v2 #menuToggle .v2-menu-close-label {
display: none;
transform: none !important;
margin: 0 !important;
opacity: 1 !important;
}
/* ---- Tooltip ("Menu" / "Close"), mirror of #fullscreenButton tooltip ---- */
body.v2 #menuToggle::before {
content: "Menu";
position: absolute;
top: calc(100% + 12px);
right: 0;
background-color: rgba(0, 0, 0, 0.85);
color: #ffffff;
padding: 6px 12px;
border-radius: 6px;
font-family: "Suisse Intl", Arial, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.57;
letter-spacing: 0.3px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 100000;
}
body.v2 #menuToggle::after {
content: '';
position: absolute;
top: calc(100% + 7px);
right: 14px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(0, 0, 0, 0.85);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 100000;
}
/* Auto-hide after ~5s even if :hover persists (mobile emulators and
some touch browsers keep hover active after a tap, which would otherwise
leave the tooltip stuck on screen). Animation plays once per hover-enter
and ends at opacity:0 via `forwards`. */
body.v2 #menuToggle:hover::before,
body.v2 #menuToggle:hover::after {
animation: v2TooltipFlash 5.5s ease-out 1 forwards;
}
@keyframes v2TooltipFlash {
0% { opacity: 0; }
6% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
/* Tooltip label swaps to "Close" when the menu is open. Uses :has() so we
can update the parent pseudo from the inner checkbox --- supported in
Chrome 105+ / Safari 15.4+ / Firefox 121+ (all current evergreen). */
body.v2 #menuToggle:has(input:checked)::before {
content: "Close";
}
/* ================================================================== */
/* MENU PANEL --- floating glass card (desktop default) */
/* ================================================================== */
body.v2 #menu {
font-family: "Suisse Intl", aktiv-grotesk, Arial, sans-serif;
font-weight: 400;
font-style: normal;
color: #ffffff;
font-size: 16px;
/* Floating card geometry. Card sits NEXT TO the icon button (to its left),
top edges aligned, so the two elements read as a clean pair rather
than overlapping. Card top at 16px gives maximum vertical real
estate for iframe-embedded usage. */
position: fixed;
top: 16px;
right: 72px; /* 16 (edge) + 42 (button) + 14 (gap) */
left: auto;
width: 320px;
max-width: calc(100vw - 88px);
height: auto;
max-height: calc(100vh - 32px);
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
/* Reset v1 half-rounded corners; use a single rounded radius. */
border-top-left-radius: 22px;
border-top-right-radius: 22px;
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
/* Override common's !important paddings. */
padding: 12px 4px 10px 4px !important;
background: rgba(18, 18, 20, 0.66);
-webkit-backdrop-filter: blur(30px) saturate(180%);
backdrop-filter: blur(30px) saturate(180%);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.08) inset;
display: block; /* v2 is a simple vertical list, no flex wrap */
/* Starting (closed) state --- scaled down + shifted slightly + transparent. */
transform: translate(18px, -8px) scale(0.97);
opacity: 0;
pointer-events: none;
transition: transform .45s cubic-bezier(.2, .8, .2, 1),
opacity .35s ease;
}
body.v2 #menuToggle input:checked ~ #menu {
transform: translate(0, 0) scale(1);
opacity: 1;
pointer-events: auto;
}
/* Force layout of list items --- override common flex quirks. */
body.v2 #menu li {
padding: 0;
width: 100%;
display: block;
}
/* -------- Logo inside the panel -------- */
body.v2 .topLogo {
padding: 8px 10px 14px 10px;
text-align: left;
}
body.v2 .topLogo img {
width: 150px;
padding: 0;
margin: 0;
display: block;
}
/* -------- Top-level item dividers + spacing -------- */
body.v2 #menu > .menu-list,
body.v2 #menu > li.cont {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.v2 #menu > .menu-list:last-of-type,
body.v2 #menu > li.cont:last-of-type {
border-bottom: none;
}
/* -------- Top-level link typography -------- */
body.v2 #menu .sub_men_content_itm,
body.v2 #menu > li.cont > a {
font-weight: 600;
font-size: 16px;
letter-spacing: 0.15px;
color: #ffffff;
padding: 14px 44px 14px 16px; /* right padding leaves room for chevron */
display: block;
position: relative;
transition: color .18s ease;
}
body.v2 #menu > li.cont > a {
padding-right: 18px; /* no chevron on matterport links */
}
/* -------- Sub-item typography (Grey Blue --- White on hover) -------- */
body.v2 .menu-submenu {
padding: 2px 0 10px 0;
}
body.v2 .menu-submenu li {
padding: 0 !important;
}
body.v2 .menu-submenu li a {
color: #9db6c5;
font-weight: 400;
font-size: 14.5px;
letter-spacing: 0.1px;
padding: 8px 16px 8px 22px;
display: block;
transition: color .18s ease, padding-left .18s ease, background-color .18s ease;
border-radius: 8px;
}
body.v2 .menu-submenu li a:hover,
body.v2 .menu-submenu li a:focus-visible {
color: #ffffff;
padding-left: 28px;
background-color: rgba(255, 255, 255, 0.04);
}
/* General hover for top-level links (keeps the common selector working under v2). */
body.v2 #menu a:hover:not(.sub_men_content_itm.active):not(.BtomClick a) {
color: #00adb7;
}
/* ================================================================== */
/* CHEVRON INDICATOR (replaces v1 plus/cross) */
/* Scoped under body.v2 so common/v1 pseudo-elements are untouched. */
/* ================================================================== */
/* Kill the v1 "before" line but keep "after" available to host the chevron. */
body.v2 .accordion-toggle a::before {
display: none;
}
/* Redefine the "after" pseudo as a rotating SVG chevron.
We redeclare every property the common stylesheet sets so ordering is explicit. */
body.v2 .accordion-toggle a::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 18px !important; /* matches common's !important */
width: 11px;
height: 11px;
margin-top: -6px;
/* Inline-SVG chevron in Blue River. */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: transparent; /* override common's coloured line */
opacity: 1;
transform: rotate(0deg);
transform-origin: 50% 50%;
transition: transform .25s ease-out;
pointer-events: none;
}
body.v2 .accordion-toggle a.active::after {
transform: rotate(180deg);
opacity: 1; /* override common's `opacity: 0` on .active::after */
}
/* Drop the v1 solid-fill "active-tab" treatment --- v2 uses chevron + text colour only. */
body.v2 .accordion-toggle.active-tab {
background-color: transparent;
color: #ffffff;
}
/* On mobile, common hides both pseudo-elements. Re-enable the chevron for v2. */
@media (max-width: 599px) {
body.v2 .accordion-toggle a::after {
display: block;
}
body.v2 .accordion-toggle a::before {
display: none;
}
}
/* ================================================================== */
/* STAGGERED ITEM ENTRANCE */
/* ================================================================== */
body.v2 #menu > .topLogo,
body.v2 #menu > .menu-list,
body.v2 #menu > li.cont,
body.v2 #menu > .BtomClick {
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s ease;
}
body.v2 #menuToggle input:checked ~ #menu > * {
opacity: 1;
transform: translateY(0);
}
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(1) { transition-delay: .08s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(2) { transition-delay: .11s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(3) { transition-delay: .14s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(4) { transition-delay: .17s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(5) { transition-delay: .20s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(6) { transition-delay: .23s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(7) { transition-delay: .26s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(8) { transition-delay: .29s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(9) { transition-delay: .32s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(10) { transition-delay: .35s; }
/* On mobile the items rise further (text-rise effect) and only start moving
AFTER the background has dropped down. On close there's no delay --- items
and background retract together (the default state has no transition-delay). */
@media (max-width: 599px) {
body.v2 #menu > .topLogo,
body.v2 #menu > .menu-list,
body.v2 #menu > li.cont,
body.v2 #menu > .BtomClick {
transform: translateY(30px);
transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(1) { transition-delay: .28s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(2) { transition-delay: .33s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(3) { transition-delay: .38s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(4) { transition-delay: .43s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(5) { transition-delay: .48s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(6) { transition-delay: .53s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(7) { transition-delay: .58s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(8) { transition-delay: .63s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(9) { transition-delay: .68s; }
body.v2 #menuToggle input:checked ~ #menu > *:nth-child(10) { transition-delay: .73s; }
}
/* ================================================================== */
/* CTA ("Te Pae Website") --- glass pill */
/* ================================================================== */
body.v2 .BtomClick {
padding: 14px 10px 10px 10px;
margin: 0;
}
body.v2 .BtomClick a {
background: linear-gradient(180deg, #00bec8 0%, #00adb7 100%);
color: #ffffff;
border-radius: 999px;
padding: 11px 20px;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 6px 18px rgba(0, 173, 183, 0.28);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.v2 .BtomClick a:hover {
background: linear-gradient(180deg, #00c7d1 0%, #00b9c3 100%);
box-shadow: 0 8px 22px rgba(0, 173, 183, 0.4);
transform: translateY(-1px);
}
/* ================================================================== */
/* FOCUS-VISIBLE (keyboard navigation, a11y) */
/* ================================================================== */
/* Keyboard-focus outlines only --- never on mouse click. Each element keeps
its own border-radius so outlines follow the natural shape (circles stay
circles). #menuToggle uses :has(input:focus-visible) so the outline only
appears on keyboard focus of the underlying checkbox, not on mouse down. */
body.v2 #menu a:focus-visible,
body.v2 .nav-buttons button:focus-visible,
body.v2 #fullscreenButton:focus-visible {
outline: 2px solid #00adb7;
outline-offset: 2px;
}
body.v2 #menuToggle:has(input:focus-visible) {
outline: 2px solid #00adb7;
outline-offset: 2px;
}
/* ================================================================== */
/* SPLASH SCREEN --- dark palette */
/* ================================================================== */
body.v2 .splash-content {
color: #ffffff;
max-width: 600px;
padding: 20px;
}
body.v2 .splash-content h1 { font-size: 2em; }
body.v2 .splash-content p { font-size: 1em; }
body.v2 .splashLogo img {
width: 500px;
padding-top: 10px;
opacity: 1;
}
body.v2 #splashScreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 9999;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
text-align: center;
transition: opacity 2s ease;
padding-top: 15vh;
}
body.v2 #splashScreen.fade-out {
opacity: 0;
pointer-events: none;
}
body.v2 #splashScreen .splash-content {
max-width: 80%;
padding: 20px;
display: block;
}
body.v2 .splash-logo {
max-width: 450px;
margin-bottom: 20px;
height: auto;
}
body.v2 #splashScreen h1 {
font-size: 2rem;
margin-bottom: 10px;
color: #ffffff;
font-family: "Suisse Intl", Arial, sans-serif;
font-weight: 600;
}
body.v2 #splashScreen p {
font-size: 1.2rem;
color: #9db6c5;
font-family: "Suisse Intl", Arial, sans-serif;
margin-bottom: 30px;
}
body.v2 .splash-cta {
background-color: #00adb7;
color: #ffffff;
padding: 15px 30px;
text-decoration: none;
font-weight: bold;
display: inline-block;
border-radius: 999px;
transition: background-color 0.3s ease, transform .18s ease;
}
body.v2 .splash-cta:hover {
background-color: #005556;
color: #ffffff;
box-shadow: 0 0 0 1px #005556 inset;
transform: translateY(-1px);
}
/* ================================================================== */
/* MATTERPORT LOADING OVERLAY */
/* ================================================================== */
body.v2 #matterportLoadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
opacity: 1;
pointer-events: all;
transition: opacity 0.5s ease;
}
body.v2 #matterportLoadingOverlay.hidden {
opacity: 0;
pointer-events: none;
}
body.v2 .loading-content {
max-width: 80%;
padding: 20px;
}
/* Tile Progress loader --- indeterminate horizontal track of Te Pae river-tile
triangles. 240x28 frame; three .dev pairs stagger -0.6s/-1.2s to keep tiles in
continuous flow. Markup lives in the PHP. */
body.v2 .tile-progress {
position: relative;
width: 240px;
height: 28px;
margin: 20px auto;
overflow: hidden;
}
body.v2 .tile-progress .frame {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.25);
}
body.v2 .tile-progress .dev {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 28px;
display: flex;
gap: 2px;
animation: tp-slide 2s cubic-bezier(.6, .05, .35, 1) infinite;
}
body.v2 .tile-progress .dev .tt {
width: 13px;
height: 28px;
background: #fff;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
body.v2 .tile-progress .dev .tt.lo {
opacity: 0.3;
clip-path: polygon(0 0, 0 100%, 100% 100%);
}
@keyframes tp-slide {
0% { transform: translateX(-120%); }
100% { transform: translateX(420%); }
}
body.v2 .loading-content p {
font-size: 1.1rem;
color: #ffffff;
margin-top: 10px;
font-family: "Suisse Intl", Arial, sans-serif;
font-weight: 400;
opacity: 0.5;
}
/* ================================================================== */
/* FULLSCREEN BUTTON --- circular glass */
/* ================================================================== */
body.v2 #fullscreenButton {
position: fixed !important;
right: 21px !important;
bottom: 50px !important;
width: 42px;
height: 42px;
background-color: rgba(20, 20, 22, 0.62);
color: #ffffff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer !important;
z-index: 1 !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
transition: all 0.3s ease;
font-size: 1.3rem;
opacity: 0; /* revealed by JS after SDK connects */
}
body.v2 #fullscreenButton:hover {
background-color: rgba(20, 20, 22, 0.85);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
body.v2 #fullscreenButton:hover i {
color: #00adb7;
}
body.v2 #fullscreenButton i {
pointer-events: none;
transition: color 0.3s ease;
}
body.v2 #fullscreenButton::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.85);
color: #ffffff;
padding: 6px 12px;
border-radius: 6px;
font-family: "Suisse Intl", Arial, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.57;
letter-spacing: 0.3px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 100000;
}
body.v2 #fullscreenButton::after {
content: '';
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(0, 0, 0, 0.85);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 100000;
}
body.v2 #fullscreenButton:hover::before,
body.v2 #fullscreenButton:hover::after {
opacity: 1;
}
/* ================================================================== */
/* MOBILE --- floating glass sheet from the top */
/* ================================================================== */
@media (max-width: 599px) {
/* Mobile button: same 42px glass pill as desktop; nudge away from the
notch with safe-area. */
body.v2 #menuToggle {
top: calc(14px + env(safe-area-inset-top, 0));
right: 14px;
width: 42px;
height: 42px;
}
body.v2 #menuToggle input {
width: 42px !important;
height: 42px !important;
}
/* Mobile tooltip: flip to the LEFT of the button so it doesn't overlap
the NEXT/BACK quick-nav stack directly below. */
body.v2 #menuToggle::before {
top: 50%;
right: calc(100% + 12px);
left: auto;
transform: translateY(-50%);
}
body.v2 #menuToggle::after {
top: 50%;
right: calc(100% + 7px);
left: auto;
transform: translateY(-50%);
/* Arrow points right (toward the button). */
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(0, 0, 0, 0.85);
border-right: none;
}
/* Common sets .nav-buttons at `right: -4px` --- align to the menu button's
`right: 14px` so the quick-nav column visually aligns with the hamburger. */
body.v2 .nav-buttons {
right: 14px;
}
body.v2 .nav-buttons button {
/* Uniform right alignment inside the column. */
align-self: flex-end;
}
/* ---- Mobile OPEN state: button shape disappears, only the underlined
"Close" text remains. Matches tepae.co.nz footer/menu close style. ---- */
body.v2 #menuToggle:has(input:checked) {
background-color: transparent;
box-shadow: none;
width: auto;
height: auto;
padding: 4px 2px;
/* Keep the right edge roughly where the button was, so the text
reads as a clean top-right close affordance. */
right: 20px;
top: calc(18px + env(safe-area-inset-top, 0));
}
body.v2 #menuToggle:has(input:checked) .v2-menu-icon-close {
display: none;
}
body.v2 #menuToggle:has(input:checked) .v2-menu-close-label {
display: block;
/* MUST be a positioned element with z-index above #menu (z:99-100).
#menuToggle creates a stacking context (z-index:2 from common);
inside it, the static label paints BEHIND any positioned child
with z-index >= 1 --- and #menu, a sibling of the label, has
its own z-index and a solid dark background, so it paints over
the label and the text appears invisible without this lift. */
position: relative;
z-index: 200;
color: #ffffff;
font-family: "Suisse Intl", Arial, sans-serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.3px;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
cursor: pointer;
/* Label doesn't need its own margin/transform reset now that it's
a