/* ========================================================= BELAIR HILL JUNIOR SCHOOL NAV ARROW FILE: css/nav-arrow.css GOLD NAVIGATION ARROW TOP: ↓ One click = next section Double click = bottom BOTTOM: ↑ One click = previous section Double click = top ========================================================= */ /* ========================================================= NAV ARROW ========================================================= */ .nav-arrow { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 1px solid var(--gold, #d6a84f); border-radius: 50%; background: var(--gold, #d6a84f); color: var(--teal-deep, #045661); font-family: var(--font-body, "DM Sans", sans-serif); cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16); transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; } /* ========================================================= ARROW ICON ========================================================= */ .nav-arrow-icon { display: block; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1; transform: translateY(-1px); pointer-events: none; } /* ========================================================= HOVER ========================================================= */ .nav-arrow:hover { background: var(--gold, #d6a84f); color: var(--teal-deep, #045661); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20); } /* ========================================================= ACTIVE ========================================================= */ .nav-arrow:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); } /* ========================================================= EXPLANATION TOOLTIP ========================================================= */ .nav-arrow::after { content: attr(data-description); position: absolute; right: 54px; bottom: 50%; width: max-content; max-width: 245px; padding: 9px 13px; border-radius: 7px; background: var(--teal-deep, #045661); color: #ffffff; font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.72rem; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(50%) translateX(5px); box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } /* ========================================================= TOOLTIP ARROW ========================================================= */ .nav-arrow::before { content: ""; position: absolute; right: 48px; bottom: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid var(--teal-deep, #045661); opacity: 0; visibility: hidden; transform: translateY(50%); transition: opacity 0.2s ease, visibility 0.2s ease; } /* ========================================================= SHOW EXPLANATION ON HOVER ========================================================= */ .nav-arrow:hover::after, .nav-arrow:hover::before { opacity: 1; visibility: visible; } .nav-arrow:hover::after { transform: translateY(50%) translateX(0); } /* ========================================================= KEYBOARD FOCUS ========================================================= */ .nav-arrow:focus-visible { outline: 2px solid var(--gold, #d6a84f); outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .nav-arrow { right: 19px; bottom: 20px; width: 40px; height: 40px; } .nav-arrow-icon { font-size: 1.18rem; } .nav-arrow::after { right: 51px; max-width: 220px; font-size: 0.7rem; } .nav-arrow::before { right: 45px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 680px) { .nav-arrow { right: 15px; bottom: 17px; width: 38px; height: 38px; } .nav-arrow-icon { font-size: 1.1rem; } .nav-arrow::after { right: 48px; max-width: 190px; padding: 8px 11px; font-size: 0.68rem; } .nav-arrow::before { right: 42px; } } /* ========================================================= TOUCH DEVICES ========================================================= */ @media (hover: none) { .nav-arrow::after, .nav-arrow::before { display: none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .nav-arrow, .nav-arrow::before, .nav-arrow::after { transition: none !important; } }