/* ========================================================= Corner Brook Rapids Standard Bootstrap v4.6 Overrides ========================================================= */ :root { --cbr-navy: #303A5D; --cbr-navy-dark: #232B47; --cbr-navy-light: #EEF0F5; --cbr-red: #EA1F25; --cbr-red-dark: #C9181E; --cbr-red-light: #FDEBED; --cbr-light: #F7F8FA; --cbr-border: #DDE1E8; --cbr-text: #292E39; --cbr-muted: #6C757D; --cbr-logo: url("https://blob.poolq.net/cbsc/images/639218582507466676-rapids-logo-transparent.png"); } /* --------------------------------------------------------- Base --------------------------------------------------------- */ body { --cbr-heading-color: var(--cbr-navy-dark); color: var(--cbr-text); background-color: #ffffff; font-family: "Barlow", Arial, sans-serif; } a { color: var(--cbr-navy); } a:hover, a:focus { color: var(--cbr-navy-dark); } hr { border-top-color: var(--cbr-border); } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--cbr-heading-color); font-family: "Barlow Condensed", "Barlow", Arial, sans-serif; font-weight: 700; } h1, .h1, h2, .h2 { letter-spacing: 0.01em; } .navbar-brand { font-family: "Barlow Condensed", "Barlow", Arial, sans-serif; font-weight: 700; } .btn { font-family: "Barlow", Arial, sans-serif; font-weight: 600; } /* Contextual sections control their own heading colour. */ .bg-dark, .bg-primary, .bg-secondary, .text-light, .text-white { --cbr-heading-color: #ffffff; } /* Light components inside contextual sections return to dark headings. */ .card, .bg-light, .jumbotron, .alert-primary, .alert-info, .dropdown-menu { --cbr-heading-color: var(--cbr-navy-dark); } /* Contextual cards restore the appropriate heading colour. */ .card.bg-dark, .card.bg-primary, .card.bg-secondary { --cbr-heading-color: #ffffff; } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .navbar { border-bottom: 4px solid var(--cbr-red); } .navbar-dark.bg-primary, .navbar.bg-primary { --cbr-heading-color: #ffffff; background-color: var(--cbr-navy) !important; } .navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link { color: #ffffff; } .navbar-dark .navbar-nav .nav-link { font-weight: 500; } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .show .nav-link { color: #ffffff; text-decoration: none; } .navbar-dark .navbar-nav .active .nav-link, .navbar-dark .navbar-nav .nav-link.active { color: #ffffff; font-weight: 600; box-shadow: inset 0 -3px 0 var(--cbr-red); } .navbar-dark .navbar-toggler { color: #ffffff; border-color: rgba(255, 255, 255, 0.45); } /* Light navbar */ .navbar-light { background-color: #ffffff; border-bottom: 4px solid var(--cbr-red); } .navbar-light .navbar-brand { color: var(--cbr-navy-dark); font-weight: 700; } .navbar-light .navbar-nav .nav-link { color: var(--cbr-navy-dark); font-weight: 500; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .active .nav-link, .navbar-light .navbar-nav .nav-link.active { color: var(--cbr-red-dark); } /* --------------------------------------------------------- Dropdown Menus --------------------------------------------------------- */ .navbar .dropdown-menu, .dropdown-menu { background-color: #ffffff; border: 1px solid var(--cbr-border); border-top: 4px solid var(--cbr-red); box-shadow: 0 6px 16px rgba(48, 58, 93, 0.18); padding: 0.5rem 0; } .navbar .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-item, .navbar .dropdown-menu li a, .dropdown-menu li a { display: block; color: var(--cbr-navy-dark); background-color: #ffffff; font-weight: 400; text-decoration: none; } .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu li a:hover, .navbar .dropdown-menu li a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus { color: var(--cbr-navy-dark); background-color: var(--cbr-navy-light); text-decoration: none; } .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active, .navbar .dropdown-menu .active a, .dropdown-menu .active a { color: #ffffff; background-color: var(--cbr-navy); } .navbar .dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item.disabled, .navbar .dropdown-menu li.disabled a, .dropdown-menu li.disabled a { color: var(--cbr-muted); background-color: #ffffff; } .dropdown-divider { border-top-color: var(--cbr-border); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn-primary { color: #ffffff; background-color: var(--cbr-navy); border-color: var(--cbr-navy); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--cbr-navy-dark); border-color: var(--cbr-navy-dark); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(48, 58, 93, 0.25); } /* Slightly darker functional red provides better contrast for buttons. */ .btn-secondary { color: #ffffff; background-color: var(--cbr-red-dark); border-color: var(--cbr-red-dark); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: #AD141A; border-color: #AD141A; } .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(234, 31, 37, 0.25); } /* Outline buttons */ .btn-outline-primary { color: var(--cbr-navy); border-color: var(--cbr-navy); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--cbr-navy); border-color: var(--cbr-navy); } .btn-outline-secondary { color: var(--cbr-red-dark); border-color: var(--cbr-red); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--cbr-red-dark); border-color: var(--cbr-red-dark); } /* Disabled outline buttons */ .btn-outline-primary.disabled, .btn-outline-primary:disabled, .btn-outline-primary.disabled:hover, .btn-outline-primary:disabled:hover, .btn-outline-primary.disabled:focus, .btn-outline-primary:disabled:focus, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled, .btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover, .btn-outline-secondary.disabled:focus, .btn-outline-secondary:disabled:focus { color: var(--cbr-muted); background-color: #ffffff; border-color: var(--cbr-border); opacity: 1; } /* Link buttons */ .btn-link { color: var(--cbr-navy); } .btn-link:hover, .btn-link:focus { color: var(--cbr-navy-dark); } /* Primary buttons need contrast when placed on navy sections. */ .bg-dark .btn-primary, .bg-primary .btn-primary { color: #ffffff; background-color: var(--cbr-red-dark); border-color: var(--cbr-red-dark); } .bg-dark .btn-primary:hover, .bg-dark .btn-primary:focus, .bg-dark .btn-primary:active, .bg-primary .btn-primary:hover, .bg-primary .btn-primary:focus, .bg-primary .btn-primary:active { color: #ffffff; background-color: #AD141A; border-color: #AD141A; } /* --------------------------------------------------------- Cards and Content Blocks --------------------------------------------------------- */ .card { border-color: var(--cbr-border); box-shadow: 0 2px 8px rgba(48, 58, 93, 0.06); } .card-header { color: var(--cbr-heading-color); background-color: var(--cbr-light); border-bottom-color: var(--cbr-border); font-weight: 600; } .card-footer { background-color: var(--cbr-light); border-top-color: var(--cbr-border); } .card-title { color: var(--cbr-heading-color); } /* Contextual card headers */ .card-header.bg-primary, .card-header.bg-secondary, .card-header.bg-dark { --cbr-heading-color: #ffffff; color: #ffffff; } /* --------------------------------------------------------- List Groups --------------------------------------------------------- */ .list-group-item { border-color: var(--cbr-border); } .list-group-item-action { color: var(--cbr-text); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--cbr-navy-dark); background-color: var(--cbr-navy-light); } .list-group-item.active { color: #ffffff; background-color: var(--cbr-navy); border-color: var(--cbr-navy); } /* --------------------------------------------------------- Hero and Page Headers --------------------------------------------------------- */ .jumbotron { color: var(--cbr-text); background-color: var(--cbr-navy-light); border-bottom: 4px solid var(--cbr-red); } .jumbotron h1, .jumbotron .h1, .jumbotron h2, .jumbotron .h2 { color: var(--cbr-navy-dark); } .jumbotron p { color: var(--cbr-text); } /* --------------------------------------------------------- Badges --------------------------------------------------------- */ .badge-primary { color: #ffffff; background-color: var(--cbr-navy); } .badge-secondary { color: #ffffff; background-color: var(--cbr-red-dark); } .badge-info { color: #ffffff; background-color: var(--cbr-navy); } /* --------------------------------------------------------- Alerts --------------------------------------------------------- */ .alert-primary, .alert-info { color: var(--cbr-navy-dark); background-color: var(--cbr-navy-light); border-color: #D3D7E1; } .alert-primary hr, .alert-info hr { border-top-color: #BBC1CF; } .alert-primary .alert-link, .alert-info .alert-link { color: var(--cbr-navy-dark); font-weight: 700; text-decoration: underline; } .alert-primary .alert-link:hover, .alert-primary .alert-link:focus, .alert-info .alert-link:hover, .alert-info .alert-link:focus { color: var(--cbr-red-dark); text-decoration: underline; } .alert-primary .text-muted, .alert-info .text-muted { color: #596170 !important; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control { color: var(--cbr-text); border-color: #CED4DA; } .form-control:focus { color: var(--cbr-text); border-color: var(--cbr-navy); box-shadow: 0 0 0 0.2rem rgba(48, 58, 93, 0.22); } .form-control::placeholder { color: var(--cbr-muted); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cbr-navy); border-color: var(--cbr-navy); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(48, 58, 93, 0.22); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--cbr-navy); border-color: var(--cbr-navy); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table { color: var(--cbr-text); } .table thead th { color: var(--cbr-navy-dark); border-bottom-color: var(--cbr-border); } .table-bordered th, .table-bordered td { border-color: var(--cbr-border); } .table-hover tbody tr:hover { color: var(--cbr-text); background-color: var(--cbr-navy-light); } .table .thead-dark th { color: #ffffff; background-color: var(--cbr-navy-dark); border-color: var(--cbr-navy); } .table-primary, .table-primary td, .table-primary th { background-color: var(--cbr-navy-light); } /* --------------------------------------------------------- Pagination --------------------------------------------------------- */ .page-link { color: var(--cbr-navy); border-color: var(--cbr-border); } .page-link:hover { color: var(--cbr-navy-dark); background-color: var(--cbr-navy-light); border-color: var(--cbr-border); } .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(48, 58, 93, 0.22); } .page-item.active .page-link { color: #ffffff; background-color: var(--cbr-navy); border-color: var(--cbr-navy); } .page-item.disabled .page-link { color: var(--cbr-muted); background-color: #ffffff; border-color: var(--cbr-border); } /* --------------------------------------------------------- Breadcrumbs --------------------------------------------------------- */ .breadcrumb { background-color: var(--cbr-light); } .breadcrumb-item a { color: var(--cbr-navy); } .breadcrumb-item.active { color: var(--cbr-muted); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ /* Do not target the raw footer element here. Bootstrap itself uses semantic footer elements for things such as .blockquote-footer. Pool Queue footer blocks should use .site-footer or Bootstrap contextual background classes. */ .site-footer { --cbr-heading-color: #ffffff; color: #ffffff; background-color: var(--cbr-navy-dark); } .site-footer a { color: #ffffff; } .site-footer a:hover, .site-footer a:focus { color: #ffffff; text-decoration: underline; } /* --------------------------------------------------------- Bootstrap Utility Overrides --------------------------------------------------------- */ .text-primary { color: var(--cbr-navy) !important; } .text-secondary { color: var(--cbr-red-dark) !important; } .text-dark { color: var(--cbr-text) !important; } .bg-primary { --cbr-heading-color: #ffffff; background-color: var(--cbr-navy) !important; } .bg-secondary { --cbr-heading-color: #ffffff; background-color: var(--cbr-red-dark) !important; } .bg-dark { --cbr-heading-color: #ffffff; background-color: var(--cbr-navy-dark) !important; } .bg-light { --cbr-heading-color: var(--cbr-navy-dark); background-color: var(--cbr-light) !important; } .border-primary { border-color: var(--cbr-navy) !important; } .border-secondary { border-color: var(--cbr-red) !important; } /* --------------------------------------------------------- Mobile Refinements --------------------------------------------------------- */ @media (max-width: 767.98px) { .card { margin-bottom: 1rem; } .navbar { border-bottom-width: 3px; } .jumbotron { padding: 2rem 1rem; } h1, .h1 { font-size: 2.15rem; } h2, .h2 { font-size: 1.75rem; } } /* --------------------------------------------------------- Navbar Brand Logo --------------------------------------------------------- */ .navbar-brand { position: relative !important; display: inline-block !important; width: 300px; height: 52px; margin: 0; padding: 0; color: transparent !important; background-image: var(--cbr-logo); background-position: left center; background-repeat: no-repeat; background-size: contain; overflow: hidden; white-space: nowrap; } .navbar-brand:hover, .navbar-brand:focus { color: transparent !important; } /* Mobile navbar logo */ @media (max-width: 767.98px) { .navbar-brand { width: 240px; height: 42px; margin: 0; padding: 0; background-image: var(--cbr-logo); background-position: left center; background-repeat: no-repeat; background-size: contain; } }