/* ========================================================= Belleville Beast Swim Team Bootswatch Pulse / Bootstrap 4.6 overrides ========================================================= */ :root { /* Brand colours */ --belleville-purple: #5E2590; --belleville-purple-rgb: 94, 37, 144; --belleville-purple-dark: #481C70; --belleville-purple-darker: #351453; --belleville-purple-light: #EEE5F5; --belleville-purple-soft: #F7F3FA; --belleville-charcoal: #231F20; --belleville-charcoal-rgb: 35, 31, 32; --belleville-charcoal-light: #393436; --belleville-white: #FFFFFF; --belleville-white-rgb: 255, 255, 255; --belleville-light: #F7F7F8; --belleville-surface: var(--belleville-white); --belleville-surface-soft: var(--belleville-light); --belleville-text: var(--belleville-charcoal); --belleville-muted: #6C6670; /* Supporting interface colours */ --belleville-border: #DDD9E1; --belleville-border-strong: #BFB8C3; --belleville-border-hover: #9B929F; --belleville-border-accent: #C8BBCF; --belleville-outline-secondary-border: #8D858A; --belleville-placeholder: #807882; --belleville-disabled-text: #6A6468; --belleville-disabled-bg: #F1EFF2; --belleville-disabled-border: #C8C3CB; --belleville-alert-border: #D8C5E5; /* Typography */ --belleville-font-body: "Inter", Arial, sans-serif; --belleville-font-heading: "Roboto Slab", Georgia, serif; /* Logo assets */ --belleville-logo-wordmark: url("https://blob.poolq.net/bbst/images/639204647819359612-belleville-wordmark-web.svg"); --belleville-logo-compact: url("https://blob.poolq.net/bbst/images/639204647787684258-belleville-crest-web.svg"); /* Shared UI values */ --belleville-radius-sm: 0.25rem; --belleville-radius: 0.3rem; --belleville-radius-menu: 0.35rem; --belleville-radius-md: 0.4rem; --belleville-radius-card: 0.45rem; --belleville-radius-lg: 0.5rem; --belleville-transition-fast: 0.15s ease; --belleville-focus-ring-purple: 0 0 0 0.2rem rgba(var(--belleville-purple-rgb), 0.25); --belleville-shadow-navbar: 0 5px 18px rgba(var(--belleville-charcoal-rgb), 0.18); --belleville-shadow-dropdown: 0 12px 30px rgba(var(--belleville-charcoal-rgb), 0.2); --belleville-shadow-card: 0 3px 14px rgba(var(--belleville-charcoal-rgb), 0.07); } html { scroll-behavior: smooth; } body { background-color: var(--belleville-white); color: var(--belleville-text); font-family: var(--belleville-font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--belleville-charcoal); font-family: var(--belleville-font-heading); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } h1, .h1 { font-weight: 800; } a { color: var(--belleville-purple); text-decoration-color: rgba(var(--belleville-purple-rgb), 0.35); text-underline-offset: 0.15em; } a:hover, a:focus { color: var(--belleville-purple-dark); } ::selection { background-color: var(--belleville-purple); color: var(--belleville-white); } .text-primary { color: var(--belleville-purple) !important; } .text-dark { color: var(--belleville-charcoal) !important; } .text-muted { color: var(--belleville-muted) !important; } .bg-primary { background-color: var(--belleville-purple) !important; } .bg-dark { background-color: var(--belleville-charcoal) !important; } .bg-light { background-color: var(--belleville-light) !important; } .border-primary { border-color: var(--belleville-purple) !important; } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .navbar.navbar-dark.bg-primary { min-height: 68px; padding-top: 0.45rem; padding-bottom: 0.45rem; background-color: var(--belleville-charcoal) !important; border-bottom: 3px solid var(--belleville-purple); box-shadow: var(--belleville-shadow-navbar); } .navbar-brand { position: relative; display: inline-block; flex: 0 0 215px; width: 215px; height: 48px; margin-right: 1.25rem; padding: 0; overflow: hidden; color: transparent !important; font-size: 0; line-height: 0; white-space: nowrap; background-image: var(--belleville-logo-wordmark); background-repeat: no-repeat; background-position: left center; background-size: contain; } .navbar-brand:hover, .navbar-brand:focus { color: transparent !important; } .navbar-brand:focus-visible { border-radius: var(--belleville-radius-sm); outline: 3px solid rgba(var(--belleville-white-rgb), 0.9); outline-offset: 3px; } .navbar-dark .navbar-nav .nav-link { margin: 0 0.08rem; padding: 0.7rem 0.68rem; color: rgba(var(--belleville-white-rgb), 0.9) !important; border-radius: var(--belleville-radius); font-size: 0.91rem; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color var(--belleville-transition-fast), color var(--belleville-transition-fast); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .show .nav-link { color: var(--belleville-white) !important; background-color: var(--belleville-purple); } .navbar-dark .navbar-nav .active .nav-link { color: var(--belleville-white) !important; background-color: var(--belleville-purple-dark); } .navbar-dark .navbar-toggler { padding: 0.45rem 0.55rem; border: 2px solid rgba(var(--belleville-white-rgb), 0.7); border-radius: var(--belleville-radius); } .navbar-dark .navbar-toggler:hover, .navbar-dark .navbar-toggler:focus { border-color: var(--belleville-white); background-color: var(--belleville-purple); outline: 0; box-shadow: 0 0 0 0.2rem rgba(var(--belleville-white-rgb), 0.22); } .navbar .dropdown-menu { min-width: 14rem; margin-top: 0.45rem; padding: 0.4rem 0; background-color: var(--belleville-white); border: 0; border-top: 4px solid var(--belleville-purple); border-radius: 0 0 var(--belleville-radius-md) var(--belleville-radius-md); box-shadow: var(--belleville-shadow-dropdown); } .navbar .dropdown-item { padding: 0.65rem 1rem; color: var(--belleville-charcoal); font-size: 0.92rem; font-weight: 600; line-height: 1.3; white-space: normal; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { color: var(--belleville-purple-dark); background-color: var(--belleville-purple-light); } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: var(--belleville-white); background-color: var(--belleville-purple); } .navbar .dropdown-divider { border-top-color: var(--belleville-border); } #pq-nav-more-toggle .fa-solid { margin-right: 0.3rem; } .navbar .ml-auto .nav-link { font-size: 0.85rem; } @media (min-width: 768px) and (max-width: 1199.98px) { .navbar-brand { flex-basis: 50px; width: 50px; height: 50px; margin-right: 0.75rem; background-image: var(--belleville-logo-compact); background-position: center; } .navbar-dark .navbar-nav .nav-link { padding-right: 0.54rem; padding-left: 0.54rem; font-size: 0.86rem; } } @media (max-width: 767.98px) { .navbar.navbar-dark.bg-primary { min-height: 66px; padding-right: 1rem; padding-left: 1rem; } .navbar-brand { flex-basis: 190px; width: 190px; height: 45px; margin-right: 0.5rem; background-image: var(--belleville-logo-wordmark); } #pqNavbar { max-height: calc(100vh - 66px); margin-top: 0.55rem; padding-top: 0.7rem; padding-bottom: 0.85rem; overflow-y: auto; border-top: 1px solid rgba(var(--belleville-white-rgb), 0.18); } .navbar-dark .navbar-nav .nav-link { margin: 0.08rem 0; padding: 0.75rem 0.8rem; font-size: 0.96rem; } .navbar .dropdown-menu { min-width: 0; margin: 0.15rem 0.65rem 0.45rem; padding: 0.25rem; background-color: rgba(var(--belleville-white-rgb), 0.07); border: 0; border-radius: var(--belleville-radius-menu); box-shadow: none; } .navbar .dropdown-item { padding: 0.62rem 0.8rem; color: rgba(var(--belleville-white-rgb), 0.88); border-radius: var(--belleville-radius-sm); font-size: 0.9rem; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus, .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: var(--belleville-white); background-color: var(--belleville-purple); } .navbar .dropdown-divider { border-top-color: rgba(var(--belleville-white-rgb), 0.18); } .navbar .ml-auto { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid rgba(var(--belleville-white-rgb), 0.14); } } @media (max-width: 359.98px) { .navbar-brand { flex-basis: 46px; width: 46px; height: 46px; background-image: var(--belleville-logo-compact); background-position: center; } } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { border-width: 2px; border-radius: var(--belleville-radius); font-weight: 700; letter-spacing: 0.01em; box-shadow: none; transition: background-color var(--belleville-transition-fast), border-color var(--belleville-transition-fast), color var(--belleville-transition-fast), transform var(--belleville-transition-fast); } .btn:hover { transform: translateY(-1px); } .btn:focus, .btn.focus { box-shadow: var(--belleville-focus-ring-purple); } .btn-primary { color: var(--belleville-white); background-color: var(--belleville-purple); border-color: var(--belleville-purple); } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { color: var(--belleville-white); background-color: var(--belleville-purple-dark); border-color: var(--belleville-purple-dark); } .btn-secondary { color: var(--belleville-white); background-color: var(--belleville-charcoal); border-color: var(--belleville-charcoal); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active { color: var(--belleville-white); background-color: var(--belleville-charcoal-light); border-color: var(--belleville-charcoal-light); } .btn-outline-primary { color: var(--belleville-purple); border-color: var(--belleville-purple); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active { color: var(--belleville-white); background-color: var(--belleville-purple); border-color: var(--belleville-purple); } .btn-outline-secondary { color: var(--belleville-charcoal); border-color: var(--belleville-outline-secondary-border); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.focus, .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active { color: var(--belleville-white); background-color: var(--belleville-charcoal); border-color: var(--belleville-charcoal); } .btn.disabled, .btn:disabled, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: var(--belleville-disabled-text); background-color: var(--belleville-disabled-bg); border-color: var(--belleville-disabled-border); opacity: 1; transform: none; } .btn-link { color: var(--belleville-purple); font-weight: 700; } .btn-link:hover, .btn-link:focus { color: var(--belleville-purple-dark); } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control, .custom-select { color: var(--belleville-text); background-color: var(--belleville-white); border-color: var(--belleville-border-strong); border-radius: var(--belleville-radius); } .form-control:hover, .custom-select:hover { border-color: var(--belleville-border-hover); } .form-control:focus, .custom-select:focus { color: var(--belleville-text); background-color: var(--belleville-white); border-color: var(--belleville-purple); box-shadow: 0 0 0 0.2rem rgba(var(--belleville-purple-rgb), 0.18); } .form-control::placeholder { color: var(--belleville-placeholder); opacity: 1; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--belleville-purple); border-color: var(--belleville-purple); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(var(--belleville-purple-rgb), 0.2); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--belleville-purple); } /* --------------------------------------------------------- Cards and content surfaces --------------------------------------------------------- */ .card { color: var(--belleville-text); background-color: var(--belleville-surface); border: 1px solid var(--belleville-border); border-radius: var(--belleville-radius-card); box-shadow: var(--belleville-shadow-card); } .card-header { color: var(--belleville-charcoal); background-color: var(--belleville-purple-soft); border-bottom-color: var(--belleville-border); font-family: var(--belleville-font-heading); font-weight: 700; } .card-footer { color: var(--belleville-text); background-color: var(--belleville-surface-soft); border-top-color: var(--belleville-border); } .jumbotron { background-color: var(--belleville-purple-soft); border-radius: var(--belleville-radius-lg); } .list-group-item { color: var(--belleville-text); background-color: var(--belleville-surface); border-color: var(--belleville-border); } .list-group-item-action { color: var(--belleville-text); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--belleville-charcoal); background-color: var(--belleville-purple-soft); } .list-group-item.disabled, .list-group-item:disabled { color: var(--belleville-disabled-text); background-color: var(--belleville-disabled-bg); } .list-group-item.active { color: var(--belleville-white); background-color: var(--belleville-purple); border-color: var(--belleville-purple); } /* --------------------------------------------------------- Tables, pagination, badges and alerts --------------------------------------------------------- */ .table { color: var(--belleville-text); } .table thead th { color: var(--belleville-charcoal); background-color: var(--belleville-purple-soft); border-top: 0; border-bottom: 2px solid var(--belleville-purple); font-weight: 700; } .table td, .table th { border-top-color: var(--belleville-border); } .table-hover tbody tr:hover { background-color: rgba(var(--belleville-purple-rgb), 0.055); } .page-link { color: var(--belleville-purple); border-color: var(--belleville-border); } .page-link:hover, .page-link:focus { color: var(--belleville-purple-dark); background-color: var(--belleville-purple-light); border-color: var(--belleville-border-accent); box-shadow: none; } .page-item.active .page-link { color: var(--belleville-white); background-color: var(--belleville-purple); border-color: var(--belleville-purple); } .badge-primary { color: var(--belleville-white); background-color: var(--belleville-purple); } .badge-dark { color: var(--belleville-white); background-color: var(--belleville-charcoal); } .alert-primary { color: var(--belleville-purple-darker); background-color: var(--belleville-purple-light); border-color: var(--belleville-alert-border); } .alert-primary .alert-link { color: var(--belleville-purple-darker); } .dropdown-item.active, .dropdown-item:active { color: var(--belleville-white); background-color: var(--belleville-purple); } .progress-bar { background-color: var(--belleville-purple); } hr { border-top-color: var(--belleville-border); } :focus-visible { outline-color: var(--belleville-purple); }