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;
}
/* Dashboard card grid -- used on the Management dashboard, and reusable
anywhere else a plain list-group of links reads as flat (e.g. the
Directories landing page). Cream surface (not white) so cards read as
a distinct layer above the white "letterhead" main panel, not just
more white-on-white. Left-edge accent color is caller's choice (gold
for admin/reporting actions, accent green for directory/people
actions) via a modifier class -- see usage in Views/Management/Index. */
.dashboard-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.875rem;
}
.dashboard-card {
display: block;
background-color: var(--ottawa-cream);
border-radius: 10px;
border-left: 3px solid var(--ottawa-accent);
padding: 1rem 1.1rem;
text-decoration: none;
color: inherit;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dashboard-card:hover,
.dashboard-card:focus {
text-decoration: none;
color: inherit;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(24, 49, 40, 0.18);
}
.dashboard-card.accent-gold {
border-left-color: var(--ottawa-gold);
}
.dashboard-card-icon {
font-size: 1.4rem;
color: var(--ottawa-green);
}
.dashboard-card-title {
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: 1.02rem;
color: var(--ottawa-green);
margin-top: 0.6rem;
}
.dashboard-card-desc {
font-size: 0.8rem;
color: #5f5e5a;
margin-top: 0.15rem;
}
/* Initials avatar for directory list rows (Members, Staff, Punters).
Deliberately not used on Retired/inactive rows for name recognition --
greyed out instead, so the existing "Retired" badge (left untouched,
see note above main a: rule) stays the only signal that matters there,
rather than competing with a still-colorful avatar. */
.avatar-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--ottawa-accent);
color: var(--ottawa-green);
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: 0.78rem;
margin-right: 0.65rem;
flex-shrink: 0;
}
.avatar-circle.inactive {
background-color: #d3d1c7;
color: #5f5e5a;
}
/* 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;
}
}
/* ===== "Direct on green" page variant ===== */
/* A handful of screens (Reservation Create/Edit, ShootingRecords
BatchEntry) intentionally skip the white "letterhead" card above to
match the legacy production site, where content sat straight on the
dark green background -- same idea as .home-page's own opt-out, just
for interior form/grid pages instead of the home page. Wrap a view's
content in to opt in; body still supplies the
green (see "body { background-color: var(--ottawa-green); }" above),
so this only needs to recolor what the white-card rule would otherwise
have made legible via its white background -- heading, muted help
text, plaintext fields, table text, and plain content links. */
.green-page {
color: #fff;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 576px) {
.green-page {
margin-top: 1rem;
margin-bottom: 1rem;
}
}
.green-page h1,
.green-page h2,
.green-page h3 {
color: #fff;
font-family: 'Fraunces', serif;
font-weight: 600;
}
.green-page h1 {
display: inline-block;
padding-bottom: 0.4rem;
margin-bottom: 1.25rem;
border-bottom: 3px solid var(--ottawa-gold);
}
.green-page .form-text {
color: rgba(255, 255, 255, 0.75);
}
.green-page .form-control-plaintext {
color: #fff;
}
.green-page .table {
color: #fff;
}
/* Bootstrap's contextual row classes (e.g. BatchEntry's error rows) tint
the row background light, not dark -- so a row like this needs its
text color flipped back to dark, or it inherits .green-page .table's
white and goes near-illegible against its own pale background. */
.green-page .table-danger,
.green-page .table-success,
.green-page .table-warning {
color: #212529;
}
.green-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
color: var(--ottawa-accent);
}
.green-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
color: var(--ottawa-gold);
}
/* Buttons: .btn-primary and .btn-outline-primary are themed in club green
(see ".btn-primary" / ".btn-outline-primary" above) precisely so they'd
stand out against the white card -- on a .green-page, that same green
is now the page's own background color, so a green button (solid or
outline) disappears entirely. Re-themed here in gold/white instead,
which is the same "stands out against the green" role the gold accent
already plays elsewhere in the theme (nav underline, home page's
"Right Now" bar, dashboard-card gold accent). .btn-secondary keeps its
own Bootstrap gray, which already contrasts fine against green. */
.green-page .btn-primary {
background-color: var(--ottawa-gold);
border-color: var(--ottawa-gold);
color: var(--ottawa-green);
}
.green-page .btn-primary:hover,
.green-page .btn-primary:focus,
.green-page .btn-primary:active {
background-color: #e0ba00;
border-color: #e0ba00;
color: var(--ottawa-green);
}
.green-page .btn-outline-primary {
color: #fff;
border-color: #fff;
}
.green-page .btn-outline-primary:hover,
.green-page .btn-outline-primary:focus,
.green-page .btn-outline-primary:active {
background-color: #fff;
border-color: #fff;
color: var(--ottawa-green);
}
.green-page .btn-outline-secondary {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.green-page .btn-outline-secondary:hover,
.green-page .btn-outline-secondary:focus,
.green-page .btn-outline-secondary:active {
background-color: rgba(255, 255, 255, 0.15);
border-color: #fff;
color: #fff;
}
/* ===== Choices.js (searchable Member/Marsh/Punter pickers) ===== */
/* Choices' own CSS renders its dropdown popup as a plain white box with a
light-gray hover state, which breaks out of the theme wherever it's
used (currently only the ShootingRecords batch-entry grid, a
.green-page screen) -- restyled globally, not scoped to .green-page,
so any future picker built on Choices.js picks this up automatically
rather than needing the fix repeated. The closed control
(.choices__inner) is left as Choices' default plain light box, same as
every other plain input on these pages -- but unlike a plain input, it
doesn't set its own text color, so on a .green-page it silently
inherits that wrapper's color:#fff and renders white text on its own
near-white background. Given an explicit dark color below so it stays
legible regardless of what ancestor it's nested in. !important is
required here (not just specificity-matching selectors): the view that
uses Choices links its choices.min.css from within the body, after
this stylesheet's in , so on an equal-specificity tie
Choices' own same-specificity rule would otherwise win by simply
coming later in the cascade. */
.choices__inner,
.choices__inner .choices__item,
.choices__inner .choices__placeholder {
color: #212529 !important;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
background-color: var(--ottawa-green) !important;
border-color: var(--ottawa-accent) !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
color: #fff !important;
}
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input {
background-color: #0f1f19 !important;
color: #fff !important;
border-bottom: 1px solid var(--ottawa-accent) !important;
}
.choices__list--dropdown .choices__input::placeholder,
.choices__list[aria-expanded] .choices__input::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
opacity: 1 !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: var(--ottawa-accent) !important;
color: var(--ottawa-green) !important;
}
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
background-color: rgba(169, 194, 81, 0.25) !important;
}
/* The currently-selected item (e.g. the "--" placeholder option, selected
by default before a row has a real value) is *also* the first item
Choices highlights when the dropdown first opens -- so .is-selected and
.is-highlighted land on the same element together. Without this rule,
.is-selected's background above wins the tie (it's declared later at
equal specificity) while .is-highlighted's dark text survives, leaving
dark text on a barely-tinted dark background -- nearly unreadable. This
selector's higher specificity makes the combined state match ordinary
is-highlighted styling (solid accent background, dark text) instead. */
.choices__list--dropdown .choices__item--selectable.is-highlighted.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted.is-selected {
background-color: var(--ottawa-accent) !important;
color: var(--ottawa-green) !important;
}
.choices__list--dropdown .choices__placeholder,
.choices__list[aria-expanded] .choices__placeholder,
.choices__list--dropdown .choices__item--choice.has-no-results,
.choices__list[aria-expanded] .choices__item--choice.has-no-results {
color: rgba(255, 255, 255, 0.6) !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;
}
/* Header (H2/H3) is one of the Home Page Message editor's (Quill) toolbar
formats, and H1 could still show up via paste. All three need to not
pick up the directory-page h1 treatment (gold underline, inline-block
sizing) from the "main h1/h2/h3" rule above -- that rule also colors
headings var(--ottawa-green), which would be invisible against this
section's own dark green background, hence the color: #fff here. Kept
block (not inline) so consecutive headings/lines don't run together on
one line; margin is modest since these read as inline reference text,
not full page headings. */
.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: block;
border-bottom: none;
margin: 0 0 0.4rem;
padding: 0;
}