/* =============================================================================== PROPRIETARY SOFTWARE NOTICE =============================================================================== This website, including its source code, database structure, administrative systems, scripts, functions, design components, and related software, was developed by Pro Star CMS Development. This software is proprietary and confidential intellectual property. Unauthorized copying, modification, distribution, disclosure, reverse engineering, reproduction, resale, or reuse of this source code, in whole or in part, is strictly prohibited without prior written authorization. Developed by: Pro Star CMS Development Chad Sanders Phone: 256-550-1988 All rights reserved. =============================================================================== */ /* =========================================================================== THE NAV BAR, ON ITS OWN. reddevilsports.net needs the same menu OnWard has - same look, same behaviour, same hamburger. The obvious move was to load site.css over there, and it is the wrong one: site.css is the whole OnWard design system, and dropping it on the Red Devil site would restyle every heading, card, button and section on it. The brief was explicit that the Red Devil site is not to be redesigned. So this file carries the nav and NOTHING else. GENERATED, NOT HAND-WRITTEN. It is extracted from site.css and omnia.css by scratchpad/buildnavcss.py, which walks those stylesheets and keeps the rules whose selectors touch .nav / .nav-* / .has-sub / .sub / .btn. Editing this file by hand works until the next regeneration overwrites it - change site.css and re-run the script instead, and both sites move together. The variables below are the handful site.css defines on :root that the nav actually reads. They are scoped to .nav rather than :root deliberately: custom properties inherit, so every descendant gets them, while the rest of the Red Devil page keeps its own theme untouched. =========================================================================== */ .nav { --c-bg: #0d0f0e; --c-line: #2a312d; --c-text: #e8ece9; --c-muted: #9aa39c; --c-accent: #c9a24a; --t-med: 280ms; --e: cubic-bezier(.2,.7,.2,1); --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2); --shadow-2: 0 4px 14px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.32); --container: 1180px; --r-lg: 14px; --r-xl: 20px; } /* ---------- from site.css ---------- */ /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.6em; border-radius: 999px; font-weight: 600; font-size: .98rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--t-fast) var(--e), background var(--t-fast) var(--e), border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), color var(--t-fast) var(--e); line-height: 1; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%); color: #fff; box-shadow: 0 6px 18px rgba(45,186,99,.25); } .btn-primary:hover { color:#fff; box-shadow: 0 10px 26px rgba(45,186,99,.35); } .btn-ghost { background: transparent; border-color: rgba(255,255,255,.40); color: var(--c-text); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } .btn-gold { background: linear-gradient(135deg, #c9a24a 0%, #f3cf72 100%); color: #1a1a1a; } .btn-block { width: 100%; justify-content: center; } /* ---------- Accessibility ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-brand-2); color: #fff; padding: .8em 1.4em; z-index: 9999; border-radius: 0 0 var(--r-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; outline: 2px solid #fff; outline-offset: 2px; } /* ---------- Navbar ---------- */ .nav { position: sticky; top: 0; /* Definitive dark gradient — unaffected by page background color */ background: linear-gradient(180deg, #0a1020 0%, #0d1428 60%, #0a1020 100%); backdrop-filter: saturate(200%) blur(18px); -webkit-backdrop-filter: saturate(200%) blur(18px); border-bottom: 2px solid rgba(201,162,74,.30); box-shadow: 0 1px 0 rgba(201,162,74,.15), 0 8px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); z-index: 100; transition: background var(--t-med) var(--e), border-color var(--t-med) var(--e), box-shadow var(--t-med) var(--e); } /* Scan-line texture overlay */ .nav::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5px ); z-index: 0; } .nav.is-scrolled { background: linear-gradient(180deg, #060c18 0%, #0a1022 100%); box-shadow: 0 12px 36px rgba(0,0,0,.65), 0 1px 0 rgba(201,162,74,.22); border-bottom-color: rgba(201,162,74,.40); } .nav-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 6px 22px; max-width: var(--container); margin: 0 auto; transition: padding var(--t-med) var(--e); } .nav.is-scrolled .nav-inner { padding-top: 4px; padding-bottom: 4px; } .nav-brand { display: flex; align-items: center; gap: .8rem; color: var(--c-text); font-weight: 700; letter-spacing: -.01em; } .nav-brand img { height: 104px; width: auto; transition: height var(--t-med) var(--e), transform var(--t-fast) var(--e); filter: drop-shadow(0 3px 12px rgba(45,186,99,.30)) drop-shadow(0 0 6px rgba(0,0,0,.8)); } .nav.is-scrolled .nav-brand img { height: 72px; } @media (max-width: 700px) { .nav-brand img { height: 62px; } .nav.is-scrolled .nav-brand img { height: 50px; } /* The bar itself closes up around the smaller mark. */ .nav-inner { padding: 4px 14px; gap: .7rem; } .nav.is-scrolled .nav-inner { padding-top: 3px; padding-bottom: 3px; } } @media (max-width: 400px) { .nav-brand img { height: 54px; } .nav.is-scrolled .nav-brand img { height: 46px; } .nav-inner { padding: 4px 11px; } } .nav-brand:hover img { transform: scale(1.04); } .nav-brand:hover { color: var(--c-text); } .nav-links { display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; } .nav-links a { color: var(--nav-link-color, var(--c-text)); padding: .6em 1em; border-radius: var(--r-sm); font-weight: 500; font-size: .95rem; position: relative; white-space: nowrap; } /* ── Full-nav link metrics ──────────────────────────────────────────────────── Tightened padding and type for the whole desktop range. THIS MUST STAY BELOW the .nav-links a block above. It used to sit ABOVE it, scoped 961-1200px, where it silently did nothing at all: both selectors are plain `.nav-links a`, so the later declaration wins and the base padding of .6em 1em was what actually rendered. Moving it here is what finally makes the ten-item row fit; putting it back above would re-break the nav without any visible warning. The upper bound is gone for the same reason: .nav-inner is capped, the row is nowrap, so the links must fit at EVERY desktop width - a wider monitor grants no extra room on its own. */ @media (min-width: 961px) { .nav-links a { padding: .55em .6em; font-size: .9rem; } /* The two CTAs are the widest items in the row, so trimming their side padding and leading margin buys back the most space for the least visible change. */ .nav-links a.nav-cta { padding: .55em .8em; margin-left: .3rem; } } .nav-links a:hover { color: var(--nav-link-hover-text, var(--c-brand-2)); background: var(--nav-link-hover-bg, rgba(45,186,99,.08)); } .nav-links a.is-active { color: var(--c-brand-2); background: rgba(45,186,99,.14); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(45,186,99,.28), 0 0 10px rgba(45,186,99,.08); } .nav-links .has-sub { position: relative; } /* Built for every dropdown but only ever shown in the mobile panel - the desktop menu opens on hover and needs no button. */ .nav-sub-toggle { display: none; } .nav-links .sub { position: absolute; top: 100%; left: 0; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: .35rem; min-width: 230px; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-fast) var(--e), transform var(--t-fast) var(--e), visibility var(--t-fast) var(--e); } .nav-links .has-sub:hover .sub, .nav-links .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav-links .sub a { display:block; padding: .5em .8em; } .nav-cta { margin-left: .4rem; } /* The dark-red CTA button is .btn-primary (gradient bg, color:#fff). The generic .nav-links a:hover rule below uses the `background:` shorthand, which wipes the gradient (background-image gets reset) and also re-colors the text via --nav-link-hover-text. Both effects make the phone number illegible on hover. Pin the CTA's gradient, white text, and a slight lift-on-hover so it still feels interactive. */ .nav-links a.nav-cta, .nav-links a.nav-cta:hover, .nav-links a.nav-cta:focus, .nav-links a.nav-cta:active { color: #fff; background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%); } .nav-links a.nav-cta:hover, .nav-links a.nav-cta:focus { filter: brightness(1.12); box-shadow: 0 6px 18px rgba(102, 0, 0, .35); } /* ── Red Devil Sports Network button ────────────────────────────────────────── Sits beside the Listen / Watch Live CTA and goes to reddevilsports.net. It wears the RDSN red rather than the OnWard brand gradient on purpose: it leaves this site, and a button that leaves should not look identical to one that does not. Three classes deep so it outranks the .nav-links a.nav-cta gradient rule above without needing !important. ─────────────────────────────────────────── */ .nav-links a.nav-cta.nav-cta--rdsn, .nav-links a.nav-cta.nav-cta--rdsn:hover, .nav-links a.nav-cta.nav-cta--rdsn:focus, .nav-links a.nav-cta.nav-cta--rdsn:active { color: #fff; background: linear-gradient(135deg, #d81f31 0%, #8f121f 100%); border: 1px solid rgba(255,255,255,.14); } .nav-links a.nav-cta.nav-cta--rdsn:hover, .nav-links a.nav-cta.nav-cta--rdsn:focus { filter: brightness(1.12); box-shadow: 0 6px 18px rgba(216, 31, 49, .38); } .nav-toggle { display: none; cursor: pointer; font-size: 1.1rem; background: linear-gradient(145deg, #1e2840, #131c30); border: 1px solid rgba(201,162,74,.35); color: #c9a24a; padding: .45em .6em; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); transition: background .15s, border-color .15s, box-shadow .15s; line-height: 1; } .nav-toggle:hover { background: linear-gradient(145deg, #263050, #1a2440); border-color: rgba(201,162,74,.65); box-shadow: 0 4px 14px rgba(201,162,74,.25), inset 0 1px 0 rgba(255,255,255,.12); } /* ---------- Mobile "Scores" shortcut in the nav bar ---------- Desktop hides it: the full nav already has the link, and the bar should not carry a duplicate. It only appears once the links collapse behind the hamburger, which is exactly when the shortcut earns its place. */ .nav-scores { display: none; } /* 1100px, not 960px. The nav bar needs roughly 1095px for the brand, the full link row and the CTA. At 960px it was already overflowing the viewport and forcing a horizontal scrollbar in the 960-1095px band - a pre-existing bug, made more visible by the longer "Listen / Watch Live" label. Collapsing to the hamburger before the content outgrows the bar fixes both. */ /* Collapse to the hamburger at 1140px rather than 1100px. BUDGET: .nav-links measures 1039px with the tightened metrics above and ten items in the row. The space available to it is the viewport (capped by .nav-inner at --container, 1180px) minus 44px of padding and the 24px brand gap - so 1032px at the old 1100px breakpoint, 7px short, which cropped the last CTA rather than wrapping. 1140px leaves roughly 34px of slack at the narrowest full-nav width. If nav labels are lengthened in Admin -> Navigation Manager, re-measure .nav-links against that budget: the row is nowrap and crops silently. */ @media (max-width: 1140px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; } .nav-scores { display: inline-flex; align-items: center; justify-content: center; gap: .38em; margin-left: auto; /* pushes the pair to the right of the logo */ margin-right: .5rem; /* Sized for a thumb, not a mouse pointer. Padding alone left it 26px tall; min-height/min-width bring it to a comfortable tap target. */ min-height: 40px; min-width: 44px; padding: 0 .85em 0 .72em; font-size: .84rem; font-weight: 800; letter-spacing: .02em; text-decoration: none; white-space: nowrap; color: #0b1220; background: linear-gradient(145deg, #ffd35c, #c9a24a); border: 1px solid rgba(255,226,150,.5); border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .14s, box-shadow .14s, filter .14s; } .nav-scores:hover, .nav-scores:focus-visible { color: #0b1220; filter: brightness(1.06); box-shadow: 0 3px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); } .nav-scores:active { transform: translateY(1px); } .nav-scores__ico { font-size: .95em; line-height: 1; } /* Already on the scoreboard: keep it visible but stop it shouting. */ .nav-scores.is-current { color: #ffd35c; background: rgba(201,162,74,.14); border-color: rgba(201,162,74,.45); box-shadow: none; } /* Only genuinely tiny screens drop the word. The first cut of this used 380px, which hid the label on a stock 375px iPhone - the single most common phone width - leaving a bare icon exactly where the label matters most. There is ~168px of clear bar between the logo and the hamburger at 375px, so the text fits comfortably; 330px is the real squeeze point. */ @media (max-width: 330px) { .nav-scores { padding: 0 .6em; } .nav-scores__txt { display: none; } } .nav.is-open .nav-links { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-panel); border-top: 1px solid var(--c-line); padding: 1rem; gap: .25rem; /* ── THE PANEL HAS TO BE ITS OWN SCROLL CONTAINER ──────────────────── Without these three lines the menu is an absolutely positioned box with no height limit: a list longer than the screen simply runs off the bottom with no way to reach it, and a finger dragged across it scrolls the PAGE behind instead - which is exactly what was reported. max-height stops it at the bottom of the screen, measuring down from the bottom edge of the nav bar. --om-nav-h is published by site.js on open because that bar changes height when it condenses on scroll (116px down to 62px), so a hard-coded number would be wrong half the time. dvh is listed after vh so a phone that supports it wins: with plain vh the panel is sized to the address-bar-retracted viewport and its last item hides behind the browser chrome. overscroll-behavior: contain is what stops the page moving. It blocks scroll CHAINING - reaching the end of the menu no longer hands the gesture to the document - and it does that even when the menu is short enough not to scroll at all. */ max-height: calc(100vh - var(--om-nav-h, 116px)); max-height: calc(100dvh - var(--om-nav-h, 116px)); overflow-y: auto; -webkit-overflow-scrolling: touch; /* momentum on older iOS */ overscroll-behavior: contain; } /* ── One rhythm for every row ──────────────────────────────────────────── The dropdown parents are
wrapping an , while the plain items ARE the . Those two were not building the same box: the plain links measured 50px tall, but a .has-sub wrapper collapsed to 26px while the link inside it rendered 45px and overflowed - so Services and About sat on top of each other and the column looked ragged. The cause is the anchor's display. As an inline box its vertical padding paints but contributes nothing to the parent's height, so the wrapper only ever counted the 26px line box. Making both the wrapper and its anchor block-level means every row measures the same way, and the flex `gap` then does what it was always supposed to. */ .nav.is-open .nav-links > a, .nav.is-open .nav-links > .has-sub > a { display: block; padding: .85em 1em; } .nav.is-open .nav-links > .has-sub { display: block; position: relative; } .nav.is-open .nav-links .sub a { padding: .6em 1em; } /* An even 6px between every row. The old value was .25rem but the overlapping boxes above were eating most of it, which is why the spacing read as random rather than tight. */ .nav.is-open .nav-links { gap: 6px; } /* The two call-to-action buttons are the one place a bigger gap is wanted - they are a different kind of thing from the nav links. Given a rule of their own rather than an inherited margin so the separation is deliberate and equal above both. */ .nav.is-open .nav-links .nav-cta { margin: 0; } .nav.is-open .nav-links .nav-cta:first-of-type { margin-top: .7rem; } /* ── Mobile sub-menus: COLLAPSED until tapped ──────────────────────────── These used to be forced permanently open here - opacity:1, visibility: visible - so every child of every dropdown was stacked into the panel the moment the hamburger was pressed. That is what made the menu 1147px tall on a 700px screen: not a long menu, an entirely expanded one. Now each parent gets its own caret button (built by site.js) and starts shut, so opening the hamburger shows the top level only. */ .nav-links .sub { position: static; transform: none; box-shadow: none; padding-left: 1rem; border: none; background: transparent; opacity: 1; visibility: visible; display: none; /* the collapse */ } .nav-links .has-sub.is-open > .sub { display: block; } /* The caret is its own tap target, deliberately. The parent is a real link to a real page (/rdsn, /services), and hijacking it to mean "expand" would take that page away from anyone on a phone. Tap the label to go, tap the caret to open. */ .nav-links .has-sub > a::after { content: ''; } .nav-sub-toggle { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 46px; padding: .85em 0; background: none; border: 0; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1.2; opacity: .7; } .nav-sub-toggle::before { content: '▾'; transition: transform .2s ease; } .has-sub.is-open > .nav-sub-toggle::before { transform: rotate(180deg); } .nav-sub-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; } .nav-cta { margin: .5rem 0 0; } } .btn-glow { position: relative; box-shadow: 0 8px 24px rgba(45,186,99,.4), 0 0 0 0 rgba(45,186,99,.7); animation: btnGlow 2.4s ease-out infinite; } /* Buttons carry their own fill, so keep theirs tighter and less smoky. */ .btn.om-lit, .btn.om-lit-strong, .btn.om-lit-soft { text-shadow: 0 1px 2px rgba(0,0,0,.45); } /* ---- Per-item overrides still win ---- The Visual Editor writes a positional selector for one specific node, which is more specific than these single-class rules, so a deliberate one-off tweak to an individual record continues to take precedence. Shared style is the default; individual override remains possible. ============================================================================ */ /* ---- Top-level nav link colour comes from the COMPONENT --------------------- The nav bar is dark, so its top-level links must be light. That colour used to come only from per-link Visual Editor overrides pinned to nav > a:nth-of-type(N) - so any newly added nav item (e.g. Gallery) rendered dark-on-dark until it was hand-recoloured, and inserting a link mid-list re-pointed every later override onto the wrong anchor. Declaring it here means new nav items are correct automatically. Dropdown items (.sub a) are excluded - they sit on light panels and keep their own dark text. The admin "Nav link text color" setting still wins, as it emits !important. */ .nav .nav-links > a { color: var(--nav-top-link-color, #fff); } .nav .nav-links > .has-sub > a { color: var(--nav-top-link-color, #fff); } /* ---------- from omnia.css (mobile dropdown overrides; this file uses !important throughout and wins over site.css, so it has to come after) --- */ /* Dispatch / Customer Portal link in the nav: distinct outline pill */ .nav-portal { border: 1.5px solid var(--c-accent); color: var(--c-brand) !important; border-radius: 999px; padding: .35rem .85rem !important; font-weight: 700; } /* Hover/focus: .nav-links a:hover in site.css is more specific than .nav-portal:hover (0,2,1 > 0,2,0) and uses the `background:` shorthand, which paints a faint maroon over our gold fill and combined with the white text (forced via !important here) leaves the label unreadable. Match the specificity by qualifying with .nav-links a.nav-portal so our gold fill actually wins. */ .nav-links a.nav-portal:hover, .nav-links a.nav-portal:focus, .nav-portal:hover, .nav-portal:focus { background: var(--c-accent) !important; color: #fff !important; border-color: var(--c-accent); } @media (max-width: 960px) { /* Hamburger contrast: the nav panel can be light (default pages) or maroon (home, set via the editor), so a fixed color can't read on all of them. A white glyph on a translucent dark rounded chip darkens whatever is behind it, so the icon stays high-contrast on ANY header background. */ .nav .nav-toggle { color: #fff !important; background: rgba(18, 6, 6, 0.48) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; border-radius: 10px !important; padding: .26em .44em !important; line-height: 1 !important; } .nav .nav-toggle:hover, .nav .nav-toggle:focus-visible { background: rgba(18, 6, 6, 0.66) !important; } /* Pretty, on-brand mobile dropdown - matches the maroon header + gold accents instead of the plain light panel. White links, gold hover/active, indented sub-items on a darker inset, a standout gold call button. */ .nav.is-open .nav-links { background: linear-gradient(180deg, #660000 0%, #4a0000 100%) !important; border-top: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 22px 44px rgba(0, 0, 0, .40) !important; padding: .6rem .7rem 1rem !important; /* 6px, not .12rem. At .12rem (1.9px) the rows read as one solid slab rather than a list - and this file wins over site.css because every declaration here carries !important, so the spacing has to be set at this end or not at all. */ gap: 6px !important; animation: omniaMenuIn .26s ease both; } .nav.is-open .nav-links a { color: #fff !important; padding: .85em 1em !important; border-radius: 10px !important; font-weight: 600 !important; } .nav.is-open .nav-links a:hover, .nav.is-open .nav-links a:focus, .nav.is-open .nav-links a.is-active { background: rgba(255, 255, 255, .12) !important; color: var(--c-accent) !important; } .nav.is-open .nav-links .has-sub > a::after { color: var(--c-accent); } .nav.is-open .nav-links .sub { background: rgba(0, 0, 0, .22) !important; border-radius: 10px !important; margin: .1rem .15rem .4rem !important; padding: .2rem .35rem !important; border: none !important; } .nav.is-open .nav-links .sub a { color: rgba(255, 255, 255, .9) !important; font-weight: 500 !important; font-size: .94rem !important; padding: .6em 1em !important; } .nav.is-open .nav-links .nav-portal { border: 1px solid rgba(255, 255, 255, .45) !important; text-align: center; margin-top: .45rem; } .nav.is-open .nav-links .nav-cta { background: var(--c-accent) !important; color: #1a1208 !important; text-align: center; justify-content: center; margin-top: .5rem; } }