/* ========================================================= Cape Breton Dorados Standard Bootstrap v4.6 Overrides ========================================================= */ :root { /* Official brand colours */ --cbd-navy: #002060; --cbd-blue: #A6C9EC; --cbd-blue-mid: #DAE9F8; --cbd-blue-light: #F0F9FF; --cbd-gold: #FFC000; --cbd-gold-light: #FFF0C1; /* Functional extensions of the official palette */ --cbd-navy-dark: #001747; --cbd-navy-deep: #001238; --cbd-gold-dark: #D9A300; --cbd-gold-text: #755900; --cbd-light: #F7FAFD; --cbd-border: #D8E3EF; --cbd-text: #202B3A; --cbd-muted: #687688; --cbd-logo: url("https://blob.poolq.net/cbd/images/639227489963855921-Logo%20PNG%20Gold.png"); --nav-margin: 7rem; } /* --------------------------------------------------------- Base --------------------------------------------------------- */ body { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-text); background-color: #ffffff; font-family: "Raleway", "Aptos", "Segoe UI", Arial, sans-serif; font-weight: 400; } a { color: var(--cbd-navy); } a:hover, a:focus { color: var(--cbd-navy-dark); } hr { border-top-color: var(--cbd-border); } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--cbd-heading-color); font-family: "Raleway", "Aptos", "Segoe UI", Arial, sans-serif; font-weight: 700; } h1, .h1 { font-weight: 800; letter-spacing: -0.02em; } h2, .h2 { font-weight: 800; letter-spacing: -0.015em; } h3, .h3 { font-weight: 700; } .navbar-brand { font-family: "Raleway", "Aptos", "Segoe UI", Arial, sans-serif; } .navbar-nav .nav-link { font-family: "Raleway", "Aptos", "Segoe UI", Arial, sans-serif; font-weight: 600; } .btn { font-family: "Raleway", "Aptos", "Segoe UI", Arial, sans-serif; font-weight: 700; } /* Dark contextual sections */ .bg-dark, .bg-primary, .text-light, .text-white { --cbd-heading-color: #ffffff; } /* Gold sections use navy headings */ .bg-secondary { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-navy-dark); } /* Light components inside contextual sections */ .card, .bg-light, .jumbotron, .alert-primary, .alert-info, .dropdown-menu { --cbd-heading-color: var(--cbd-navy-dark); } /* Contextual cards */ .card.bg-primary, .card.bg-dark { --cbd-heading-color: #ffffff; } .card.bg-secondary { --cbd-heading-color: var(--cbd-navy-dark); } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .navbar { min-height: 96px; border-bottom: 5px solid var(--cbd-gold); } /* Primary dark navbar */ .navbar-dark.bg-primary, .navbar.bg-primary { --cbd-heading-color: #ffffff; background-color: var(--cbd-navy) !important; } /* --------------------------------------------------------- Navbar Logo --------------------------------------------------------- */ .navbar-brand { display: block; width: 160px; height: 76px; padding: 0; margin-top: 0; margin-bottom: 0; margin-right: 2rem; background-image: var(--cbd-logo); background-repeat: no-repeat; background-position: left center; background-size: contain; color: transparent !important; font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap; flex-shrink: 0; } .navbar-brand:hover, .navbar-brand:focus { color: transparent !important; text-decoration: none; } /* --------------------------------------------------------- Dark Navbar Links --------------------------------------------------------- */ .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.88); } .navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .show .nav-link { color: #ffffff; } .navbar-dark .navbar-nav .active .nav-link, .navbar-dark .navbar-nav .nav-link.active { color: #ffffff; font-weight: 700; box-shadow: inset 0 -3px 0 var(--cbd-gold); } .navbar-dark .navbar-toggler { color: #ffffff; border-color: rgba(255, 255, 255, 0.45); } /* --------------------------------------------------------- Light Navbar --------------------------------------------------------- */ .navbar-light { background-color: #ffffff; border-bottom: 5px solid var(--cbd-gold); } .navbar-light .navbar-nav .nav-link { color: var(--cbd-navy-dark); } .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(--cbd-navy); font-weight: 700; } /* --------------------------------------------------------- Dropdown Menus --------------------------------------------------------- */ .navbar .dropdown-menu, .dropdown-menu { --cbd-heading-color: var(--cbd-navy-dark); background-color: #ffffff; border: 1px solid var(--cbd-border); border-top: 4px solid var(--cbd-gold); box-shadow: 0 8px 22px rgba(0, 32, 96, 0.16); 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(--cbd-navy-dark); background-color: #ffffff; font-weight: 500; 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(--cbd-navy-dark); background-color: var(--cbd-blue-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(--cbd-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(--cbd-muted); background-color: #ffffff; } .dropdown-divider { border-top-color: var(--cbd-border); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn-primary { color: #ffffff; background-color: var(--cbd-navy); border-color: var(--cbd-navy); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--cbd-navy-dark); border-color: var(--cbd-navy-dark); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 32, 96, 0.24); } /* Official gold is intentionally paired with navy text. White text on #FFC000 does not have enough contrast. */ .btn-secondary { color: var(--cbd-navy-dark); background-color: var(--cbd-gold); border-color: var(--cbd-gold); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active { color: var(--cbd-navy-dark); background-color: var(--cbd-gold-dark); border-color: var(--cbd-gold-dark); } .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(255, 192, 0, 0.28); } /* Outline buttons */ .btn-outline-primary { color: var(--cbd-navy); border-color: var(--cbd-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(--cbd-navy); border-color: var(--cbd-navy); } .btn-outline-secondary { color: var(--cbd-navy-dark); border-color: var(--cbd-gold); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--cbd-navy-dark); background-color: var(--cbd-gold); border-color: var(--cbd-gold); } /* 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(--cbd-muted); background-color: #ffffff; border-color: var(--cbd-border); opacity: 1; } /* Link buttons */ .btn-link { color: var(--cbd-navy); } .btn-link:hover, .btn-link:focus { color: var(--cbd-navy-dark); } /* A navy primary button disappears on a navy section, so primary CTA buttons become gold in dark sections. */ .bg-dark .btn-primary, .bg-primary .btn-primary { color: var(--cbd-navy-dark); background-color: var(--cbd-gold); border-color: var(--cbd-gold); } .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: var(--cbd-navy-dark); background-color: var(--cbd-gold-dark); border-color: var(--cbd-gold-dark); } /* --------------------------------------------------------- Cards --------------------------------------------------------- */ .card { border-color: var(--cbd-border); box-shadow: 0 3px 12px rgba(0, 32, 96, 0.07); } .card-header { color: var(--cbd-heading-color); background-color: var(--cbd-light); border-bottom-color: var(--cbd-border); font-weight: 700; } .card-footer { background-color: var(--cbd-light); border-top-color: var(--cbd-border); } .card-title { color: var(--cbd-heading-color); } /* Contextual card headers */ .card-header.bg-primary, .card-header.bg-dark { --cbd-heading-color: #ffffff; color: #ffffff; } .card-header.bg-secondary { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-navy-dark); } /* --------------------------------------------------------- List Groups --------------------------------------------------------- */ .list-group-item { border-color: var(--cbd-border); } .list-group-item-action { color: var(--cbd-text); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--cbd-navy-dark); background-color: var(--cbd-blue-light); } .list-group-item.active { color: #ffffff; background-color: var(--cbd-navy); border-color: var(--cbd-navy); } /* --------------------------------------------------------- Hero / Jumbotron --------------------------------------------------------- */ .jumbotron { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-text); background-color: var(--cbd-blue-light); border-bottom: 5px solid var(--cbd-gold); } .jumbotron h1, .jumbotron .h1, .jumbotron h2, .jumbotron .h2 { color: var(--cbd-navy-dark); } .jumbotron p { color: var(--cbd-text); } /* --------------------------------------------------------- Badges --------------------------------------------------------- */ .badge-primary { color: #ffffff; background-color: var(--cbd-navy); } .badge-secondary { color: var(--cbd-navy-dark); background-color: var(--cbd-gold); } .badge-info { color: var(--cbd-navy-dark); background-color: var(--cbd-blue); } /* --------------------------------------------------------- Alerts --------------------------------------------------------- */ .alert-primary, .alert-info { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-navy-dark); background-color: var(--cbd-blue-light); border-color: var(--cbd-blue); } .alert-primary hr, .alert-info hr { border-top-color: var(--cbd-blue); } .alert-primary .alert-link, .alert-info .alert-link { color: var(--cbd-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(--cbd-navy); text-decoration: underline; } /* Keep muted text readable inside Pool Queue alert panels. */ .alert-primary .text-muted, .alert-info .text-muted { color: #50647A !important; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control { color: var(--cbd-text); border-color: #CAD5E0; } .form-control:focus { color: var(--cbd-text); border-color: var(--cbd-navy); box-shadow: 0 0 0 0.2rem rgba(0, 32, 96, 0.20); } .form-control::placeholder { color: var(--cbd-muted); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cbd-navy); border-color: var(--cbd-navy); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(0, 32, 96, 0.20); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--cbd-navy); border-color: var(--cbd-navy); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table { color: var(--cbd-text); } .table thead th { color: var(--cbd-navy-dark); border-bottom-color: var(--cbd-border); } .table-bordered th, .table-bordered td { border-color: var(--cbd-border); } .table-hover tbody tr:hover { color: var(--cbd-text); background-color: var(--cbd-blue-light); } .table .thead-dark th { color: #ffffff; background-color: var(--cbd-navy-dark); border-color: var(--cbd-navy); } .table-primary, .table-primary td, .table-primary th { background-color: var(--cbd-blue-mid); } /* --------------------------------------------------------- Pagination --------------------------------------------------------- */ .page-link { color: var(--cbd-navy); border-color: var(--cbd-border); } .page-link:hover { color: var(--cbd-navy-dark); background-color: var(--cbd-blue-light); border-color: var(--cbd-border); } .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(0, 32, 96, 0.20); } .page-item.active .page-link { color: #ffffff; background-color: var(--cbd-navy); border-color: var(--cbd-navy); } .page-item.disabled .page-link { color: var(--cbd-muted); background-color: #ffffff; border-color: var(--cbd-border); } /* --------------------------------------------------------- Breadcrumbs --------------------------------------------------------- */ .breadcrumb { background-color: var(--cbd-light); } .breadcrumb-item a { color: var(--cbd-navy); } .breadcrumb-item.active { color: var(--cbd-muted); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ /* Do not target the raw footer element. Bootstrap uses semantic footer elements elsewhere. Pool Queue footer blocks should use .site-footer. */ .site-footer { --cbd-heading-color: #ffffff; color: #ffffff; background-color: var(--cbd-navy-deep); } .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #ffffff; } .site-footer a { color: #ffffff; } .site-footer a:hover, .site-footer a:focus { color: var(--cbd-gold); text-decoration: none; } .site-footer .text-muted, .site-footer .text-white-50 { color: rgba(255, 255, 255, 0.72) !important; } /* --------------------------------------------------------- Bootstrap Utility Overrides --------------------------------------------------------- */ .text-primary { color: var(--cbd-navy) !important; } /* Bright brand gold is not suitable as body text on white. */ .text-secondary { color: var(--cbd-gold-text) !important; } .text-dark { color: var(--cbd-text) !important; } /* Backgrounds */ .bg-primary { --cbd-heading-color: #ffffff; color: #ffffff; background-color: var(--cbd-navy) !important; } .bg-secondary { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-navy-dark); background-color: var(--cbd-gold) !important; } .bg-dark { --cbd-heading-color: #ffffff; color: #ffffff; background-color: var(--cbd-navy-deep) !important; } .bg-light { --cbd-heading-color: var(--cbd-navy-dark); background-color: var(--cbd-light) !important; } /* Borders */ .border-primary { border-color: var(--cbd-navy) !important; } .border-secondary { border-color: var(--cbd-gold) !important; } /* --------------------------------------------------------- Selection --------------------------------------------------------- */ ::selection { color: var(--cbd-navy-dark); background-color: var(--cbd-gold-light); } /* --------------------------------------------------------- Tablet Refinements --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199.98px) { .navbar-brand { width: 142px; height: 70px; margin-right: 1.25rem; } .navbar-nav .nav-link { font-size: 0.94rem; } } /* --------------------------------------------------------- Mobile Refinements --------------------------------------------------------- */ @media (max-width: 767.98px) { .navbar { min-height: 82px; padding-left: 1rem; padding-right: 1rem; border-bottom-width: 4px; } .navbar-brand { width: 132px; height: 68px; margin-right: 1rem; } #pqNavbar { max-height: calc(100vh - 82px); overflow-y: auto; } .navbar-nav .nav-link { padding-top: 0.7rem; padding-bottom: 0.7rem; } .card { margin-bottom: 1rem; } .jumbotron { padding: 2.25rem 1.25rem; } h1, .h1 { font-size: 2.1rem; } h2, .h2 { font-size: 1.7rem; } } /* --------------------------------------------------------- Very Small Screens --------------------------------------------------------- */ @media (max-width: 359.98px) { .navbar-brand { width: 112px; height: 62px; } h1, .h1 { font-size: 1.9rem; } } .navbar-nav .nav-link { font-family: "Raleway", "Aptos", "Segoe UI", Arial, sans-serif; font-weight: 600; letter-spacing: 0.01em; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.92); } .card { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-text); background-color: #ffffff; border-color: var(--cbd-border); box-shadow: 0 3px 12px rgba(0, 32, 96, 0.07); } /* Contextual cards */ .card.bg-primary, .card.bg-dark { --cbd-heading-color: #ffffff; color: #ffffff; } .card.bg-secondary { --cbd-heading-color: var(--cbd-navy-dark); color: var(--cbd-navy-dark); }