/* NCRM site header — from .design/assets/ncrm.css (header + buttons + container) */ :root { --ncrm-cream: #F0EEE9; --ncrm-ink: #16171a; --ncrm-rust: #af3c34; --ncrm-rust-deep: #8c2d27; --ncrm-teal: #96C3BF; --ncrm-gold: #F5C86B; --ncrm-charcoal: #2D2E31; --ncrm-border: #DAD6CD; --ncrm-white: #FFFFFF; --ncrm-maxw: 1440px; --ncrm-radius-sm: 7px; --ncrm-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ncrm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ncrm-dark-grad-img: linear-gradient(135deg, #303135 0%, #1d1e22 52%, #121316 100%); --site-header-height: 135px; } .ncrm-site-header .container { width: 100%; max-width: var(--ncrm-maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } .ncrm-site-header { /* Reset Hello Elementor `.site-header { display:flex }` collision */ display: block; flex-wrap: nowrap; justify-content: initial; padding-block: 0; padding-inline: 0; width: 100%; max-width: none; box-sizing: border-box; font-family: "Nunito Sans", system-ui, sans-serif; position: relative; top: 0; z-index: 1; background: var(--ncrm-cream); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ncrm-border); transition: transform 0.32s var(--ncrm-ease-out), background 0.25s var(--ncrm-ease-out), box-shadow 0.25s var(--ncrm-ease-out), border-color 0.25s var(--ncrm-ease-out); will-change: transform; } .ncrm-site-header.is-scrolled { background: var(--ncrm-cream); border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 12px -8px rgba(0, 0, 0, 0.22); } /* On pages with a sticky sub-nav pinned directly beneath the header, the masthead's drop shadow would fall onto that sub-nav. Suppress the downward shadow here (the sub-nav carries its own bottom shadow) and keep a hairline so the two pinned bars read cleanly. */ .ncrm-subnav-locked .ncrm-site-header.is-scrolled { box-shadow: none; border-bottom-color: var(--ncrm-border); } .ncrm-site-header.is-hidden { transform: translateY(-100%); } /* The header location wrapper is a direct child of , so its containing block spans the whole page. Sticking it here (rather than the inner header, whose containing block is only header-height) makes the masthead pin correctly and stack above page content. */ .elementor-location-header { position: sticky; top: -51px; z-index: 60; /* Transparent wrapper: let clicks pass through empty areas (e.g. the thin strip left pinned while the header is hidden) so it never blocks the filter bar or content beneath it. The visible header re-enables events. */ pointer-events: none; } .elementor-location-header .ncrm-site-header { pointer-events: auto; } .ncrm-site-header__bar { transition: height 0.28s var(--ncrm-ease-out); } .brand-logo { transition: height 0.28s var(--ncrm-ease-out); } .ncrm-site-header.is-scrolled .ncrm-site-header__bar { height: 62px; } .ncrm-site-header.is-scrolled .brand-logo { height: 46px; } .ncrm-site-header__top { border-bottom: 1px solid var(--ncrm-border); background: var(--ncrm-cream); } .ncrm-site-header__topbar { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding-block: 7px; gap: 1rem; } .ncrm-site-header .social { display: flex; gap: 0.55rem; align-items: center; } .ncrm-site-header .social a { color: var(--ncrm-charcoal); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; transition: color 0.2s var(--ncrm-ease-out), background 0.2s var(--ncrm-ease-out); text-decoration: none; } .ncrm-site-header .social a:hover { color: var(--ncrm-rust); } .ncrm-site-header .social i { font-size: 15px; line-height: 1; } .ncrm-site-header__bar { display: flex; align-items: center; gap: 1.5rem; height: 84px; } .ncrm-site-header .brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; text-decoration: none; } .ncrm-site-header .brand-logo { height: 70px; width: auto; display: block; } .ncrm-site-header .nav { display: flex; align-items: stretch; gap: 2.3rem; margin-left: auto; align-self: stretch; } .ncrm-site-header .nav a.navlink { font-weight: 600; font-size: 1.02rem; color: var(--ncrm-ink); position: relative; display: flex; align-items: center; text-decoration: none; gap: 0.35rem; } .ncrm-site-header .nav a.navlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 5px; background: var(--ncrm-rust); transition: right 0.25s var(--ncrm-ease-out); } .ncrm-site-header .nav a.navlink:hover::after, .ncrm-site-header .nav a.navlink.is-active::after { right: 0; } .ncrm-site-header .nav a.navlink.is-active { color: var(--ncrm-rust); } .ncrm-site-header .header-cta { display: flex; align-items: center; gap: 0.7rem; } @media (min-width: 1041px) { /* CTAs live in the top bar on desktop; nav copies are for mobile overlay only */ .ncrm-site-header .nav > .header-cta { display: none; } } .ncrm-site-header .header-cta .btn { padding-block: 0.68rem; } .ncrm-site-header .btn { --btn-bg: var(--ncrm-teal); --btn-fg: var(--ncrm-ink); --btn-bg-hover: var(--ncrm-teal); --btn-fg-hover: var(--ncrm-ink); display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1rem; line-height: 1; padding: 0.72rem 1.7rem; border: none; border-radius: var(--ncrm-radius-sm); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: background 0.25s var(--ncrm-ease-out), color 0.25s var(--ncrm-ease-out), transform 0.16s var(--ncrm-ease-out), box-shadow 0.25s var(--ncrm-ease-out); white-space: nowrap; text-decoration: none; } .ncrm-site-header .btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); } .ncrm-site-header .btn:active { transform: scale(0.97); } .ncrm-site-header .btn--sm { padding: 0.5rem 1.2rem; font-size: 0.9rem; } .ncrm-site-header .btn--ticket { --btn-bg: var(--ncrm-rust); --btn-fg: #fff; --btn-bg-hover: var(--ncrm-gold); --btn-fg-hover: var(--ncrm-ink); box-shadow: inset 0 0 0 1.5px var(--ncrm-rust); } .ncrm-site-header .btn--ticket:hover { box-shadow: inset 0 0 0 1.5px var(--ncrm-gold); } .ncrm-site-header .btn--visit { --btn-bg: var(--ncrm-ink); --btn-fg: #fff; --btn-bg-hover: var(--ncrm-charcoal); --btn-fg-hover: #fff; box-shadow: inset 0 0 0 1.5px var(--ncrm-ink); } .ncrm-site-header .btn--visit:hover { box-shadow: inset 0 0 0 1.5px var(--ncrm-charcoal); } .ncrm-site-header .btn--donate { --btn-bg: var(--ncrm-teal); --btn-fg: var(--ncrm-ink); --btn-bg-hover: var(--ncrm-gold); --btn-fg-hover: var(--ncrm-ink); } .ncrm-site-header .nav-toggle { display: none; background: var(--ncrm-rust); color: #fff; border: none; width: 44px; height: 44px; cursor: pointer; border-radius: var(--ncrm-radius-sm); place-items: center; } .ncrm-site-header .nav-toggle svg { margin: auto; } .ncrm-site-header .nav-item { display: flex; align-items: stretch; position: static; } .ncrm-site-header .navcaret { font-size: 0.72rem; line-height: 1; transition: transform 0.2s var(--ncrm-ease-out); display: inline-block; } .ncrm-site-header .has-mega:hover .navcaret { transform: rotate(180deg); } .ncrm-site-header .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--ncrm-cream); border-top: 1px solid var(--ncrm-border); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s var(--ncrm-ease-out), transform 0.2s var(--ncrm-ease-out), visibility 0.2s; z-index: 70; } .ncrm-site-header .has-mega:hover .mega, .ncrm-site-header .mega:hover { opacity: 1; visibility: visible; transform: translateY(0); } .ncrm-site-header .mega__inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 2.5rem; max-width: var(--ncrm-maxw); margin: 0 auto; padding: 3.25rem clamp(1.25rem, 4vw, 3rem); min-height: 380px; } .ncrm-site-header .mega__col h6 { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ncrm-rust); margin: 0 0 0.9rem; } .ncrm-site-header .mega__col a { display: block; font-weight: 700; font-size: 0.95rem; color: var(--ncrm-ink); padding: 0.38rem 0; transition: color 0.15s var(--ncrm-ease-out); text-decoration: none; } .ncrm-site-header .mega__col a:hover { color: var(--ncrm-rust); } .ncrm-site-header .mega__promo { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem; padding: 1.5rem; border-radius: 12px; color: var(--ncrm-cream); background-color: #2a2b2f; background-image: var(--ncrm-dark-grad-img); text-decoration: none; } .ncrm-site-header .mega__promo-tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ncrm-gold); } .ncrm-site-header .mega__promo-title { font-size: 1.3rem; font-weight: 800; line-height: 1.12; color: var(--ncrm-cream); } .ncrm-site-header .mega__promo-sub { font-size: 0.88rem; color: #d6c2c2; } .ncrm-site-header .mega__promo-link { margin-top: 0.5rem; font-weight: 700; font-size: 0.88rem; color: var(--ncrm-gold); } @media (max-width: 1040px) { .ncrm-site-header .mega { display: none; } .ncrm-site-header .nav-item { display: block; } .ncrm-site-header .navcaret { display: none; } .ncrm-site-header .nav { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ncrm-charcoal); padding: 0.5rem 0; margin: 0; transform: translateY(-120%); transition: transform 0.3s var(--ncrm-ease-in-out); max-height: calc(100vh - 76px); overflow-y: auto; } .ncrm-site-header .nav.is-open { transform: translateY(0); } .ncrm-site-header .nav a.navlink { color: var(--ncrm-cream); padding: 0.9rem clamp(1.25rem, 4vw, 3rem); font-size: 1.05rem; } .ncrm-site-header .nav a.navlink::after { display: none; } .ncrm-site-header .nav a.navlink.is-active { color: var(--ncrm-gold); } .ncrm-site-header .nav .header-cta { padding: 0.8rem clamp(1.25rem, 4vw, 3rem) 1rem; gap: 0.7rem; flex-direction: column; align-items: stretch; } .ncrm-site-header .header-cta.desktop-only { display: none; } .ncrm-site-header .nav-toggle { display: grid; margin-left: auto; } } /* Elementor header wrapper — strip default padding */ .ncrm-header-wrap.elementor-element { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; } .ncrm-header-wrap > .e-con-inner { padding: 0 !important; max-width: none !important; } /* Full-bleed Elementor theme builder header shell */ .elementor-location-header, .elementor-location-header .elementor-3607, .elementor-location-header .e-con-full { width: 100% !important; max-width: none !important; } .elementor-location-header .elementor-widget-ncrm_site_header > .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* Neutralize Elementor kit global link/button styles inside the header */ .elementor-location-header .ncrm-site-header a:not(.btn):not(.mega__promo) { color: inherit; text-decoration: none; } .elementor-location-header .ncrm-site-header .btn { font-family: "Nunito Sans", system-ui, sans-serif; letter-spacing: normal; text-transform: none; line-height: 1; }