<!DOCTYPE html>
<html lang="en">
<head>
<!-- QST-version=1.10> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hawaii Opera Theatre</title>
<!-- CUSTOM FONT -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://production.tnew-assets.com/orgs/HOPT/quick-start-template/dist/css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- ========================================================= -->
<!-- NEW HOT WEBSITE–MATCHED NAVIGATION BAR (FULL REPLACE) -->
<!-- ========================================================= -->
<nav id="tn-qs-main-nav" class="hot-nav" aria-label="Main Navigation">
<div class="hot-nav-container">
<!-- LOGO -->
<a class="hot-nav-logo" href="https://www.hawaiiopera.org">
<img src="https://production.tnew-assets.com/orgs/HOPT/quick-start-template/images/logo.png" alt="Hawaii Opera Theatre">
</a>
<!-- Mobile Menu Button -->
<button id="hot-mobile-btn" type="button" onclick="mobileNavigationButton()">
<span></span><span></span><span></span>
</button>
<!-- NAVIGATION LINKS -->
<div class="hot-nav-links">
<ul class="hot-nav-primary">
<li><a href="https://tickets.hawaiiopera.org/">Tickets</a></li>
<li><a href="https://www.hawaiiopera.org/about/">About</a></li>
<li><a href="https://www.hawaiiopera.org/news-events/">News</a></li>
<li><a href="https://www.hawaiiopera.org/education-outreach/">Education</a></li>
<li><a href="https://www.hawaiiopera.org/contact/">Contact</a></li>
</ul>
<!-- ACTION BUTTONS -->
<div class="hot-nav-actions">
<a class="hot-btn hot-btn-subscribe" href="https://hawaiiopera.org/subscribe">Subscribe</a>
<a class="hot-btn hot-btn-donate" href="https://tickets.hawaiiopera.org/donate/contribute1">Donate</a>
</div>
</div>
</div>
</nav>
<!-- ========================================================= -->
<!-- ADDITIONAL HOT NAV CSS -->
<!-- ========================================================= -->
<style>
/* --- GENERAL LAYOUT --- */
.hot-nav {
background: #ffffff;
border-bottom: 1px solid #eee;
width: 100%;
position: relative;
z-index: 200;
}
.hot-nav-container {
max-width: 1380px;
margin: 0 auto;
padding: 0.75rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
}
/* --- LOGO --- */
.hot-nav-logo img {
height: 55px;
width: auto;
}
/* --- MOBILE TOGGLE BUTTON --- */
#hot-mobile-btn {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
}
#hot-mobile-btn span {
width: 22px;
height: 3px;
background: #000;
display: block;
}
/* --- NAV LINKS --- */
.hot-nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.hot-nav-primary {
display: flex;
gap: 1.75rem;
list-style: none;
}
.hot-nav-primary a {
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-size: 0.95rem;
color: #111;
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
}
.hot-nav-primary a:hover {
color: #c21726;
}
/* --- ACTION BUTTONS --- */
.hot-nav-actions {
display: flex;
gap: 1rem;
}
.hot-btn {
padding: 0.55rem 1.2rem;
border-radius: 4px;
font-size: 0.85rem;
letter-spacing: 0.08em;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
border: 2px solid transparent;
}
.hot-btn-subscribe {
background: #111;
color: #fff;
}
.hot-btn-subscribe:hover {
background: #333;
}
.hot-btn-donate {
background: #c21726; /* HOT red */
color: #fff;
}
.hot-btn-donate:hover {
background: #9f0f1e;
}
/* --- MOBILE STYLES --- */
@media (max-width: 900px) {
#hot-mobile-btn {
display: flex;
}
.hot-nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
flex-direction: column;
padding: 1.5rem 1.25rem;
gap: 1.5rem;
border-bottom: 1px solid #eee;
}
#tn-qs-main-nav.mobile-active .hot-nav-links {
display: flex;
}
.hot-nav-primary {
flex-direction: column;
gap: 1rem;
}
.hot-nav-actions {
flex-direction: column;
width: 100%;
}
.hot-btn {
width: 100%;
text-align: center;
}
}
</style>
<!-- ========================================================= -->
<!-- TNEW CONTENT AREA + FOOTER -->
<!-- ========================================================= -->
<div id="tn-qs-banner-image"></div>
<div id="TNEW-container" class="tn-qs-container">
<!-- TNEW CONTENT WILL LOAD HERE -->
</div>
<footer>
<div class="tn-qs-container">
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__logo">
<a class="tn-qs-footer-block__logo-link" href="/">
<span class="sr-only">Hawaii Opera Theatre</span>
<img src="https://production.tnew-assets.com/orgs/HOPT/quick-start-template/images/logo.png" alt="Hawaii Opera Theatre">
</a>
</div>
</div>
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__location">
<h3>ADDRESS</h3>
<address>
<span>848 South Beretania Street, #301</span>
<span>Honolulu, Hawaii 96813</span>
</address>
</div>
</div>
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__contact">
<h3>PHONE</h3>
<div><span class="anchor-label">Box Office: </span><a href="tel:+1-808-596-7858" aria-label="Box Office">(808) 596-7858</a></div>
<div><span class="anchor-label">Main Office:</span><a href="tel:+1-808-596-7372" aria-label="Main Office">(808) 596-7372</a></div>
<div><span class="anchor-label">Fax:</span><a href="tel:+1-808-596-0379" aria-label="Fax">(808) 596-0379</a></div>
</div>
</div>
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__links">
<h3>INFORMATION</h3>
<ul>
<li><a href="https://www.hawaiiopera.org/jobs-opportunities/">Jobs & Opportunities</a></li>
<li><a href="https://www.hawaiiopera.org/financials/">Financials</a></li>
<li><a href="https://www.hawaiiopera.org/privacy-policy/">Privacy Policy</a></li>
</ul>
</div>
</div>
<div id="tn-qs-copyright">
© <script>document.write(new Date().getFullYear())</script> Hawaii Opera Theatre
</div>
</div>
</footer>
<script src="https://production.tnew-assets.com/orgs/HOPT/quick-start-template/dist/js/scripts.js"></script>
</body>
</html>