/* Ottawa Club color palette, pulled directly from the old site's style.css so the new site can match it. Defined as CSS variables so they're reusable as we extend theming to more pages later, not just Home. */ :root { --ottawa-green: #183128; --ottawa-accent: #A9C251; --ottawa-gold: #FECE1A; } /* Utility class: breaks an element out of Bootstrap's .container (which has fixed, stepped widths at each breakpoint, not truly fluid) so it spans the full browser viewport width and resizes continuously as the window resizes, rather than jumping between fixed sizes. Use on any element that needs to go edge-to-edge despite living inside the layout's .container wrapper. */ .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* ===== Site-wide nav bar theming ===== */ /* Unlike the rest of the theme (currently home-page-only), this section applies everywhere, since the nav bar is shared across every page via _Layout.cshtml. Uses !important because Bootstrap's own .text-dark utility class also uses !important -- this stylesheet loads after Bootstrap's in , so on the !important tie, ours wins. */ .site-navbar { background-color: var(--ottawa-green) !important; } .site-navbar .nav-link, .site-navbar .navbar-text, .site-navbar .navbar-brand, .site-navbar .btn-link { color: #fff !important; } .site-navbar .nav-link:hover, .site-navbar .dropdown-toggle:hover { color: var(--ottawa-gold) !important; } .site-navbar .dropdown-menu { background-color: var(--ottawa-green); border-color: var(--ottawa-accent); } .site-navbar .dropdown-item { color: #fff; } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { background-color: var(--ottawa-accent); color: var(--ottawa-green); } .site-navbar .navbar-toggler-icon { filter: invert(1); } .site-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.5); } .site-brand-logo { height: 44px; width: auto; } /* Thin gold line under the nav on every page -- the same green-to-gold transition the home page already uses at a bigger scale (nav -> gold "Right Now" bar), just carried through site-wide as a quiet signature rather than repeated in full on every page. */ .site-navbar { border-bottom: 4px solid var(--ottawa-gold); } /* ===== Site-wide page theming (everything outside the home page) ===== */ /* Scope is deliberately narrow: brand color goes on the chrome (headings, links, primary actions, table headers, footer, the Management list), not on tables, forms, or Bootstrap's contextual colors. Every page here is a data-entry or directory screen -- red/green/yellow badges and alerts already mean something specific (delete, active, scheduled, temporary password) and repainting them in club colors would blur that signal for no real benefit. */ body { font-family: 'Roboto', sans-serif; background-color: var(--ottawa-green); } /* Interior pages (everything except Home, which already manages its own full-bleed green sections) float their content in a white panel on top of the green body -- like a sheet of letterhead on a green field, the same idea as Home's photo/message sitting on green, just adapted for pages that are actually tables and forms and need to stay legible. Scoped off the .home-page wrapper so Home keeps its existing edge-to- edge treatment untouched. */ body:not(:has(.home-page)) main { background-color: #fff; border-radius: 8px; padding: 1.75rem 2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2); } @media print { body { background-color: #fff; } body:not(:has(.home-page)) main { background-color: transparent; box-shadow: none; border-radius: 0; margin: 0; padding: 0; } } @media (max-width: 576px) { body:not(:has(.home-page)) main { padding: 1.25rem 1rem; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; } } main h1, main h2, main h3 { color: var(--ottawa-green); } main h1 { display: inline-block; padding-bottom: 0.4rem; margin-bottom: 1.25rem; border-bottom: 3px solid var(--ottawa-gold); } /* Generic content links only -- buttons, nav links, dropdown items, and badges all set their own color already at higher specificity (multiple classes), so this can't leak into those without the :not() guards, but they're included for safety since a few links (Reservations' inline "Details | Edit | Delete", "Back to list" links, etc.) are plain tags with no class at all. */ main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color: var(--ottawa-green); } main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover { color: #8a6f00; } /* Primary actions (New Reservation, Save, Add Punter, etc.) */ .btn-primary { background-color: var(--ottawa-green); border-color: var(--ottawa-green); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #0f1f19; border-color: #0f1f19; } .btn-outline-primary { color: var(--ottawa-green); border-color: var(--ottawa-green); } .btn-outline-primary:hover { background-color: var(--ottawa-green); border-color: var(--ottawa-green); } /* Green table headers with a light accent tint on striped rows. Directory and report tables are the most-viewed screens in the app, so this is where the theme earns its keep -- but see the @media print block below, which resets this back to plain black-on-white for the Printing Dashboard's browser-print-to-PDF reports. */ .table thead th { background-color: var(--ottawa-green); color: #fff; border-color: var(--ottawa-green); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(169, 194, 81, 0.12); } /* Management dashboard links (and any other list-group-action list) */ .list-group-item-action { border-left: 3px solid transparent; } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--ottawa-green); color: #fff; border-left-color: var(--ottawa-gold); z-index: 1; } /* Form focus ring in club green instead of Bootstrap/site.css blue */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { border-color: var(--ottawa-accent); box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--ottawa-accent); } .card { border-color: rgba(24, 49, 40, 0.2); } footer.footer { background-color: var(--ottawa-green); color: rgba(255, 255, 255, 0.75); border-top-color: var(--ottawa-accent) !important; } footer.footer a { color: var(--ottawa-accent); } footer.footer a:hover { color: var(--ottawa-gold); } /* Printing Dashboard reports are produced via the browser's own Print/Save-as-PDF, with no server-side PDF library -- so anything printed has to survive the browser's print engine, which commonly strips background colors unless the page explicitly forces them. Rather than fight that, the green table-header theming above is turned back into plain black-on-white for print, which also saves ink on what's meant to be a printable paper report either way. */ @media print { .table thead th { background-color: transparent !important; color: #000 !important; border-color: #000 !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; } } /* ===== Home page theming ===== */ /* The real fix for the bottom gap: site.css sets "html { min-height: 100%; }", so on a short page, stretches to fill the leftover viewport space -- and since body has no background color of its own, that stretch was showing through as plain white. Coloring body itself (scoped to the home page via :has()) fixes it at the source, rather than trying to patch it with margins on child elements. */ body:has(.home-page) { background-color: var(--ottawa-green); margin-bottom: 0 !important; } .home-page { font-family: 'Roboto', sans-serif; /* Cancels the nav bar's mb-3 (1rem bottom margin, from _Layout.cshtml, shared by every page) so there's no white strip between the nav and the gold "Right Now" bar, and cancels

's default 1rem bottom padding so the green season section below reaches the footer with no white gap showing through. */ margin-top: -1rem; margin-bottom: -1rem; } .home-today-bar { background-color: var(--ottawa-gold); color: var(--ottawa-green); text-align: center; padding: 1rem 1.5rem; font-weight: 600; } .home-today-bar:empty { display: none; } .home-banner-wrap { background-color: var(--ottawa-green); } .home-banner-wrap img { width: 100%; height: auto; display: block; } .home-season-section { background-color: var(--ottawa-green); color: #fff; padding: 2.5rem 1.5rem; } .home-season-section a { color: var(--ottawa-accent); } .home-season-section h1, .home-season-section h2, .home-season-section h3 { color: #fff; } /* The Home Page Message editor is free-form rich text (Quill), so a heading could technically end up in there via paste. If it does, it should look like the rest of the season/today text, not pick up the directory-page h1 treatment (gold underline, inline-block sizing) from the "main h1/h2/h3" rule above. */ .home-today-bar h1, .home-today-bar h2, .home-today-bar h3, .home-season-section h1, .home-season-section h2, .home-season-section h3 { display: inline; border-bottom: none; margin: 0; padding: 0; }