/* ============================================================ Rizal Trophy — site header (navbar.php) Palette matches tp.php: cream bg, deep pine green, brass gold accent. ============================================================ */ :root { --rt-bg: #faf7f0; --rt-ink: #22271f; --rt-muted: #8a8577; --rt-pine: #17402e; --rt-pine-dark: #102d20; --rt-pine-soft: #e8efe9; --rt-brass: #b98a2f; --rt-brass-soft: #f6edd9; --rt-line: #e7e1d4; } /* ---------------- fixed header wrapper ---------------- */ /* Wraps the announcement strip + main navbar together and pins the whole thing to the viewport with position:fixed (NOT sticky) so it can't be knocked loose by a parent's height/flex layout the way position:sticky was. Since fixed elements are removed from normal flow, index.php adds matching top padding to via JS (see the header-height sync script there) so page content isn't hidden underneath it — except when a tall banner hero is present, in which case no padding is added on purpose, so the (initially transparent) header floats over the top of it instead of pushing it down. Starts fully transparent (just a soft dark gradient so text stays legible over whatever photo is behind it) and only gets a solid background once index.php's scroll listener adds .is-scrolled — or immediately, on pages with no banner to float over. */ .rt-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 100%); transition: background-color .25s ease, box-shadow .25s ease; } .rt-header.is-scrolled { background: var(--rt-pine-dark); box-shadow: 0 2px 16px rgba(0, 0, 0, .22); } /* ---------------- top announcement strip ---------------- */ /* Always solid, even while .rt-header itself is transparent — only the main navbar below fades in/out with scroll. */ .rt-topbar { background: linear-gradient(90deg, var(--rt-pine-dark), var(--rt-pine) 55%, var(--rt-pine-dark)); color: var(--rt-brass-soft); text-align: center; padding: 7px 12px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* ---------------- main navbar ---------------- */ .rt-navbar { background: transparent; padding: .55rem 0; transition: background .25s ease; } .rt-header.is-scrolled .rt-navbar { background: var(--rt-pine); } /* Fallback ONLY — shown until a logo is uploaded (tp-admin.php "Website Content" -> Site & Footer). Fixed 40px circle suits a single icon glyph, not a real logo, so the uploaded image below is NOT sized off this class — see .rt-logo-img-wrap. */ .rt-logo { width: 40px; height: 40px; border-radius: 50%; background: var(--rt-brass); color: var(--rt-pine); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; } /* Uploaded brand logo — the ONLY brand mark once one exists (no text name anywhere on the site). Sized by height only, width auto, so a normal wide/rectangular logo renders at its own aspect ratio instead of being force-cropped into the 40px circle above. */ .rt-logo-img-wrap { height: 64px; display: flex; align-items: center; flex: none; } .rt-logo-img { height: 100%; width: auto; max-width: 240px; object-fit: contain; } @media (max-width: 575.98px) { .rt-logo-img-wrap { height: 48px; } .rt-logo-img { max-width: 180px; } } .rt-navbar .nav-link { color: rgba(255, 255, 255, .82); font-weight: 600; font-size: .92rem; padding: .5rem .85rem; } .rt-navbar .nav-link:hover, .rt-navbar .nav-link:focus { color: #fff; } .rt-navbar .nav-link.active { color: var(--rt-brass); } .rt-navbar .dropdown-menu { border: 0; border-radius: .6rem; padding: .4rem; } .rt-navbar .dropdown-item { border-radius: .4rem; font-size: .9rem; padding: .5rem .75rem; } .rt-navbar .dropdown-item:hover, .rt-navbar .dropdown-item:focus { background: var(--rt-pine-soft); color: var(--rt-pine); } .rt-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .3); padding: .35rem .55rem; } .rt-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ---------------- search ---------------- */ .rt-search-wrap { position: relative; } .rt-search { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: .3rem .9rem; gap: .5rem; } .rt-search i { color: rgba(255, 255, 255, .6); font-size: .85rem; } .rt-search input { background: transparent; border: 0; color: #fff; font-size: .85rem; outline: none; width: 100%; } .rt-search input::placeholder { color: rgba(255, 255, 255, .5); } /* ---------------- search results dropdown ---------------- */ .nav-search-results { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, .22); max-height: 360px; overflow-y: auto; z-index: 2000; padding: 8px; text-align: left; } .nav-search-results.is-open { display: block; } .nav-search-group + .nav-search-group { margin-top: 6px; } .nav-search-group-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a8577; padding: 6px 10px 2px; } .nav-search-item { display: block; padding: 8px 10px; border-radius: 8px; color: #22271f; font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-search-item:hover, .nav-search-item.is-active { background: #e8efe9; color: #17402e; } .nav-search-empty, .nav-search-loading { padding: 10px; font-size: .85rem; color: #8a8577; } /* ---------------- contact CTA ---------------- */ .rt-btn-contact { background: var(--rt-brass); color: var(--rt-pine-dark); font-weight: 700; font-size: .88rem; border-radius: 999px; padding: .5rem 1.3rem; white-space: nowrap; border: 0; } .rt-btn-contact:hover, .rt-btn-contact:focus { background: #a67b28; color: #fff; } /* ---------------- responsive tweaks ---------------- */ @media (max-width: 991.98px) { .rt-navbar .navbar-collapse { background: var(--rt-pine); margin-top: .6rem; padding: .75rem 0 .25rem; border-top: 1px solid rgba(255, 255, 255, .12); } .rt-search-wrap { width: 100%; max-width: 100%; margin: .5rem 0; } .rt-search { width: 100%; } .rt-btn-contact { display: inline-block; width: 100%; text-align: center; } }