/* ========================================================= Upper Canada River Otters Bootstrap 4.6 Brand Overrides ========================================================= */ :root { --ucro-navy: #06344A; --ucro-navy-dark: #032838; --ucro-navy-light: #EAF1F4; --ucro-blue: #127CC0; --ucro-blue-dark: #0B669F; --ucro-blue-light: #E8F4FB; --ucro-brown: #924F22; --ucro-brown-dark: #713B17; --ucro-brown-light: #F5ECE6; --ucro-light: #F6F9FA; --ucro-border: #D7E1E6; --ucro-text: #21343E; --ucro-muted: #667781; --ucro-brown: var(--ucro-blue); --ucro-brown-dark: var(--ucro-blue-dark); --ucro-brown-light: var(--ucro-blue-light); } /* --------------------------------------------------------- Base --------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background-color: #FFFFFF; color: var(--ucro-text); font-family: "Inter", Arial, sans-serif; font-size: 1rem; line-height: 1.65; } ::selection { background-color: var(--ucro-blue); color: #FFFFFF; } h1, h2, h3, h4, h5, h6 { color: var(--ucro-navy); font-family: "Roboto Slab", Georgia, serif; font-weight: 700; line-height: 1.25; } h1 { margin-bottom: 1.25rem; } h2 { margin-bottom: 1rem; } h3, h4 { margin-bottom: 0.75rem; } p { margin-bottom: 1rem; } small, .small { color: var(--ucro-muted); } hr { border-top-color: var(--ucro-border); } blockquote, .blockquote { border-left: 0.3rem solid var(--ucro-blue); color: var(--ucro-text); padding-left: 1.25rem; } /* --------------------------------------------------------- Links --------------------------------------------------------- */ a { color: var(--ucro-blue-dark); text-decoration: none; } a:hover, a:focus { color: var(--ucro-navy); text-decoration: underline; } a:focus, button:focus, .btn:focus, .form-control:focus, .custom-select:focus { outline: none; } /* --------------------------------------------------------- Brand utility colours --------------------------------------------------------- */ .bg-primary { background-color: var(--ucro-navy) !important; } .bg-secondary { background-color: var(--ucro-brown) !important; } .bg-info { background-color: var(--ucro-blue) !important; } .bg-light { background-color: var(--ucro-light) !important; } .bg-dark { background-color: var(--ucro-navy-dark) !important; } .text-primary { color: var(--ucro-navy) !important; } .text-secondary { color: var(--ucro-brown) !important; } .text-info { color: var(--ucro-blue-dark) !important; } .text-muted { color: var(--ucro-muted) !important; } .border-primary { border-color: var(--ucro-navy) !important; } .border-secondary { border-color: var(--ucro-brown) !important; } .border-info { border-color: var(--ucro-blue) !important; } /* --------------------------------------------------------- Public navbar --------------------------------------------------------- */ .navbar { font-family: "Inter", Arial, sans-serif; } .navbar.bg-primary, .navbar-dark { background-color: var(--ucro-navy) !important; } .navbar-brand { color: #FFFFFF; font-family: "Roboto Slab", Georgia, serif; font-weight: 700; } .navbar-brand:hover, .navbar-brand:focus { color: #FFFFFF; text-decoration: none; } .navbar-brand img { height: auto; max-height: 58px; width: auto; } .navbar-dark .navbar-nav .nav-link { border-radius: 0.25rem; color: rgba(255, 255, 255, 0.88); font-weight: 600; padding-left: 0.8rem; padding-right: 0.8rem; transition: background-color 0.15s ease, color 0.15s ease; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { background-color: rgba(255, 255, 255, 0.12); color: #FFFFFF; text-decoration: none; } .navbar-dark .navbar-nav .active .nav-link, .navbar-dark .navbar-nav .show .nav-link, .navbar-dark .navbar-nav .nav-link.active { background-color: var(--ucro-blue); color: #FFFFFF; } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.45); } .navbar-dark .navbar-toggler { border-color: rgba(255, 255, 255, 0.45); } .navbar-dark .navbar-toggler:hover, .navbar-dark .navbar-toggler:focus { background-color: rgba(255, 255, 255, 0.1); } /* --------------------------------------------------------- Dropdown menus --------------------------------------------------------- */ .dropdown-menu { background-color: #FFFFFF; border: 1px solid var(--ucro-border); border-radius: 0.3rem; box-shadow: 0 0.5rem 1.25rem rgba(3, 40, 56, 0.16); padding: 0.4rem; } .dropdown-item { border-radius: 0.2rem; color: var(--ucro-text); font-weight: 500; padding: 0.55rem 0.85rem; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--ucro-blue-light); color: var(--ucro-navy); text-decoration: none; } .dropdown-item.active, .dropdown-item:active { background-color: var(--ucro-blue); color: #FFFFFF; } .dropdown-item.disabled, .dropdown-item:disabled { color: var(--ucro-muted); } .dropdown-divider { border-top-color: var(--ucro-border); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { border-radius: 0.3rem; font-family: "Inter", Arial, sans-serif; font-weight: 700; letter-spacing: 0.01em; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .btn:hover, .btn:focus { text-decoration: none; } .btn-primary { background-color: var(--ucro-navy); border-color: var(--ucro-navy); color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus { background-color: var(--ucro-navy-dark); border-color: var(--ucro-navy-dark); color: #FFFFFF; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show .btn-primary.dropdown-toggle { background-color: var(--ucro-navy-dark); border-color: var(--ucro-navy-dark); color: #FFFFFF; } .btn-secondary { background-color: var(--ucro-brown); border-color: var(--ucro-brown); color: #FFFFFF; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus { background-color: var(--ucro-brown-dark); border-color: var(--ucro-brown-dark); color: #FFFFFF; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show .btn-secondary.dropdown-toggle { background-color: var(--ucro-brown-dark); border-color: var(--ucro-brown-dark); color: #FFFFFF; } .btn-info { background-color: var(--ucro-blue); border-color: var(--ucro-blue); color: #FFFFFF; } .btn-info:hover, .btn-info:focus, .btn-info.focus { background-color: var(--ucro-blue-dark); border-color: var(--ucro-blue-dark); color: #FFFFFF; } .btn-outline-primary { border-color: var(--ucro-navy); color: var(--ucro-navy); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--ucro-navy); border-color: var(--ucro-navy); color: #FFFFFF; } .btn-outline-secondary { border-color: var(--ucro-brown); color: var(--ucro-brown-dark); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--ucro-brown); border-color: var(--ucro-brown); color: #FFFFFF; } .btn-outline-info { border-color: var(--ucro-blue); color: var(--ucro-blue-dark); } .btn-outline-info:hover, .btn-outline-info:focus { background-color: var(--ucro-blue); border-color: var(--ucro-blue); color: #FFFFFF; } .btn-link { color: var(--ucro-blue-dark); font-weight: 600; } .btn-link:hover, .btn-link:focus { color: var(--ucro-navy); } .btn.disabled, .btn:disabled, .btn-outline-primary.disabled, .btn-outline-primary:disabled, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled, .btn-outline-info.disabled, .btn-outline-info:disabled { background-color: #EDF1F3; border-color: #C8D2D7; color: #667781; opacity: 1; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ label { color: var(--ucro-text); font-weight: 600; } .form-control, .custom-select { background-color: #FFFFFF; border-color: #BFCBD1; border-radius: 0.3rem; color: var(--ucro-text); } .form-control:focus, .custom-select:focus { border-color: var(--ucro-blue); box-shadow: 0 0 0 0.2rem rgba(18, 124, 192, 0.2); } .form-control::placeholder { color: #82919A; } .form-control:disabled, .form-control[readonly], .custom-select:disabled { background-color: #EDF2F4; color: var(--ucro-muted); } .input-group-text { background-color: var(--ucro-navy-light); border-color: #BFCBD1; color: var(--ucro-navy); font-weight: 600; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ucro-blue); border-color: var(--ucro-blue); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(18, 124, 192, 0.2); } /* --------------------------------------------------------- Cards and content panels --------------------------------------------------------- */ .card { border-color: var(--ucro-border); border-radius: 0.4rem; box-shadow: 0 0.2rem 0.75rem rgba(3, 40, 56, 0.07); } .card-header { background-color: var(--ucro-navy-light); border-bottom-color: var(--ucro-border); color: var(--ucro-navy); font-weight: 700; } .card-header:first-child { border-radius: 0.4rem 0.4rem 0 0; } .card-footer { background-color: var(--ucro-light); border-top-color: var(--ucro-border); } .card-title { color: var(--ucro-navy); } .card-link { color: var(--ucro-blue-dark); font-weight: 600; } /* --------------------------------------------------------- Jumbotron and feature areas --------------------------------------------------------- */ .jumbotron { background-color: var(--ucro-navy-light); border: 1px solid var(--ucro-border); border-radius: 0.5rem; color: var(--ucro-text); } .jumbotron h1, .jumbotron h2, .jumbotron h3 { color: var(--ucro-navy); } /* --------------------------------------------------------- List groups --------------------------------------------------------- */ .list-group-item { background-color: #FFFFFF; border-color: var(--ucro-border); color: var(--ucro-text); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--ucro-blue-light); color: var(--ucro-navy); text-decoration: none; } .list-group-item.active { background-color: var(--ucro-navy); border-color: var(--ucro-navy); color: #FFFFFF; } /* --------------------------------------------------------- Navigation tabs and pills --------------------------------------------------------- */ .nav-tabs { border-bottom-color: var(--ucro-border); } .nav-tabs .nav-link { color: var(--ucro-blue-dark); font-weight: 600; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: var(--ucro-border); color: var(--ucro-navy); text-decoration: none; } .nav-tabs .nav-link.active { background-color: #FFFFFF; border-color: var(--ucro-border) var(--ucro-border) #FFFFFF; color: var(--ucro-navy); } .nav-pills .nav-link { color: var(--ucro-blue-dark); font-weight: 600; } .nav-pills .nav-link:hover, .nav-pills .nav-link:focus { background-color: var(--ucro-blue-light); color: var(--ucro-navy); text-decoration: none; } .nav-pills .nav-link.active, .nav-pills .show .nav-link { background-color: var(--ucro-navy); color: #FFFFFF; } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table { color: var(--ucro-text); } .table thead th { background-color: var(--ucro-navy); border-color: var(--ucro-navy); color: #FFFFFF; font-weight: 700; vertical-align: middle; } .table td, .table th { border-top-color: var(--ucro-border); } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--ucro-border); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--ucro-light); } .table-hover tbody tr:hover { background-color: var(--ucro-blue-light); } /* --------------------------------------------------------- Alerts --------------------------------------------------------- */ .alert { border-radius: 0.35rem; } .alert-primary { background-color: var(--ucro-navy-light); border-color: #BDD0D9; color: var(--ucro-navy); } .alert-secondary { background-color: var(--ucro-brown-light); border-color: #DFC5B4; color: var(--ucro-brown-dark); } .alert-info { background-color: var(--ucro-blue-light); border-color: #B8DAEF; color: #075B8D; } .alert-success { color: #245B37; } .alert-warning { color: #694F05; } .alert-danger { color: #7A2630; } .alert-link { color: inherit; font-weight: 700; } /* --------------------------------------------------------- Badges --------------------------------------------------------- */ .badge-primary { background-color: var(--ucro-navy); color: #FFFFFF; } .badge-secondary { background-color: var(--ucro-brown); color: #FFFFFF; } .badge-info { background-color: var(--ucro-blue); color: #FFFFFF; } .badge-light { background-color: var(--ucro-navy-light); color: var(--ucro-navy); } /* --------------------------------------------------------- Breadcrumbs and pagination --------------------------------------------------------- */ .breadcrumb { background-color: var(--ucro-light); border: 1px solid var(--ucro-border); border-radius: 0.35rem; } .breadcrumb-item a { color: var(--ucro-blue-dark); } .breadcrumb-item.active { color: var(--ucro-muted); } .page-link { border-color: var(--ucro-border); color: var(--ucro-blue-dark); } .page-link:hover, .page-link:focus { background-color: var(--ucro-blue-light); border-color: var(--ucro-border); color: var(--ucro-navy); box-shadow: none; text-decoration: none; } .page-item.active .page-link { background-color: var(--ucro-navy); border-color: var(--ucro-navy); color: #FFFFFF; } .page-item.disabled .page-link { background-color: var(--ucro-light); color: var(--ucro-muted); } /* --------------------------------------------------------- Modals --------------------------------------------------------- */ .modal-content { border: 0; border-radius: 0.45rem; box-shadow: 0 1rem 3rem rgba(3, 40, 56, 0.25); } .modal-header { background-color: var(--ucro-navy); border-bottom: 0; color: #FFFFFF; } .modal-header .modal-title { color: #FFFFFF; } .modal-header .close { color: #FFFFFF; opacity: 0.85; text-shadow: none; } .modal-header .close:hover, .modal-header .close:focus { color: #FFFFFF; opacity: 1; } .modal-footer { background-color: var(--ucro-light); border-top-color: var(--ucro-border); } /* --------------------------------------------------------- Progress bars --------------------------------------------------------- */ .progress { background-color: var(--ucro-navy-light); } .progress-bar { background-color: var(--ucro-blue); } /* --------------------------------------------------------- Callouts --------------------------------------------------------- */ .bs-callout { background-color: var(--ucro-light); border-color: var(--ucro-border); border-left-color: var(--ucro-blue); border-radius: 0.3rem; } .bs-callout h1, .bs-callout h2, .bs-callout h3, .bs-callout h4, .bs-callout h5, .bs-callout h6 { color: var(--ucro-navy); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ footer, .footer { background-color: var(--ucro-navy-dark); color: rgba(255, 255, 255, 0.82); } footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: #FFFFFF; } footer a, .footer a { color: #FFFFFF; font-weight: 600; } footer a:hover, footer a:focus, .footer a:hover, .footer a:focus { color: #FFFFFF; text-decoration: underline; } footer .text-muted, .footer .text-muted { color: rgba(255, 255, 255, 0.65) !important; } /* --------------------------------------------------------- Responsive adjustments --------------------------------------------------------- */ @media (max-width: 991.98px) { .navbar-dark .navbar-nav { padding-bottom: 0.75rem; padding-top: 0.75rem; } .navbar-dark .navbar-nav .nav-link { margin-bottom: 0.15rem; padding-bottom: 0.65rem; padding-top: 0.65rem; } .navbar .dropdown-menu { border: 0; box-shadow: none; margin-bottom: 0.5rem; } } @media (max-width: 575.98px) { body { font-size: 0.975rem; } h1 { font-size: 2rem; } h2 { font-size: 1.65rem; } .jumbotron { padding: 2rem 1.25rem; } .btn { white-space: normal; } } .alert-info .text-muted { color: #315E73 !important; } .alert-info .btn-link.text-muted:hover, .alert-info .btn-link.text-muted:focus { color: var(--ucro-navy) !important; }