/* ========================================================= Squamish Pirates Swim Club Standard Bootstrap v4.6 Overrides ========================================================= */ :root { --sp-red: #C41F32; --sp-red-dark: #A61628; --sp-red-light: #FBEAEC; --sp-black: #111111; --sp-charcoal: #25262A; --sp-charcoal-light: #34363B; --sp-light: #F7F7F8; --sp-border: #DDDEE2; --sp-text: #292A2E; --sp-muted: #6C757D; } /* --------------------------------------------------------- Base --------------------------------------------------------- */ body { --sp-heading-color: var(--sp-black); color: var(--sp-text); background-color: #ffffff; font-family: "Inter", Arial, sans-serif; } a { color: var(--sp-red-dark); } a:hover, a:focus { color: var(--sp-red); } hr { border-top-color: var(--sp-border); } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sp-heading-color); font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-weight: 600; } h1, .h1, h2, .h2 { letter-spacing: 0.015em; } .navbar-brand { font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-weight: 600; } .btn { font-family: "Inter", Arial, sans-serif; font-weight: 600; } /* Contextual sections control heading colour */ .bg-dark, .bg-primary, .bg-secondary, .text-light, .text-white { --sp-heading-color: #ffffff; } /* Light components inside contextual sections */ .card, .bg-light, .jumbotron, .alert-primary, .alert-info, .dropdown-menu { --sp-heading-color: var(--sp-black); } /* Contextual cards restore light headings */ .card.bg-dark, .card.bg-primary, .card.bg-secondary { --sp-heading-color: #ffffff; } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .navbar { border-bottom: 4px solid var(--sp-red); } /* Dark / primary navbar option */ .navbar-dark.bg-primary, .navbar.bg-primary { --sp-heading-color: #ffffff; background-color: var(--sp-red) !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: 700; box-shadow: inset 0 -3px 0 #ffffff; } .navbar-dark .navbar-toggler { color: #ffffff; border-color: rgba(255, 255, 255, 0.5); } /* Preferred light navbar */ .navbar-light { background-color: #ffffff; border-bottom: 4px solid var(--sp-red); } .navbar-light .navbar-brand { color: var(--sp-black); font-weight: 600; } .navbar-light .navbar-nav .nav-link { color: var(--sp-charcoal); font-weight: 500; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--sp-red-dark); } .navbar-light .navbar-nav .active .nav-link, .navbar-light .navbar-nav .nav-link.active { color: var(--sp-red-dark); font-weight: 700; box-shadow: inset 0 -3px 0 var(--sp-red); } /* --------------------------------------------------------- Dropdown Menus --------------------------------------------------------- */ .navbar .dropdown-menu, .dropdown-menu { background-color: #ffffff; border: 1px solid var(--sp-border); border-top: 4px solid var(--sp-red); box-shadow: 0 6px 18px rgba(17, 17, 17, 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(--sp-charcoal); 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(--sp-black); background-color: var(--sp-red-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(--sp-red); } .navbar .dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item.disabled, .navbar .dropdown-menu li.disabled a, .dropdown-menu li.disabled a { color: var(--sp-muted); background-color: #ffffff; } .dropdown-divider { border-top-color: var(--sp-border); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn-primary { color: #ffffff; background-color: var(--sp-red); border-color: var(--sp-red); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--sp-red-dark); border-color: var(--sp-red-dark); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(196, 31, 50, 0.25); } .btn-secondary { color: #ffffff; background-color: var(--sp-charcoal); border-color: var(--sp-charcoal); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active { color: #ffffff; background-color: var(--sp-black); border-color: var(--sp-black); } .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(37, 38, 42, 0.25); } /* Outline buttons */ .btn-outline-primary { color: var(--sp-red-dark); border-color: var(--sp-red); } .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(--sp-red); border-color: var(--sp-red); } .btn-outline-secondary { color: var(--sp-charcoal); border-color: var(--sp-charcoal); } .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(--sp-charcoal); border-color: var(--sp-charcoal); } /* 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(--sp-muted); background-color: #ffffff; border-color: var(--sp-border); opacity: 1; } /* Link buttons */ .btn-link { color: var(--sp-red-dark); } .btn-link:hover, .btn-link:focus { color: var(--sp-red); } /* Primary button sitting on a red section */ .bg-primary .btn-primary { color: #ffffff; background-color: var(--sp-black); border-color: var(--sp-black); } .bg-primary .btn-primary:hover, .bg-primary .btn-primary:focus, .bg-primary .btn-primary:active { color: var(--sp-black); background-color: #ffffff; border-color: #ffffff; } /* Red primary buttons remain appropriate on charcoal sections */ .bg-dark .btn-primary, .bg-secondary .btn-primary { color: #ffffff; background-color: var(--sp-red); border-color: var(--sp-red); } .bg-dark .btn-primary:hover, .bg-dark .btn-primary:focus, .bg-dark .btn-primary:active, .bg-secondary .btn-primary:hover, .bg-secondary .btn-primary:focus, .bg-secondary .btn-primary:active { color: #ffffff; background-color: var(--sp-red-dark); border-color: var(--sp-red-dark); } /* --------------------------------------------------------- Cards and Content Blocks --------------------------------------------------------- */ .card { border-color: var(--sp-border); box-shadow: 0 2px 8px rgba(17, 17, 17, 0.06); } .card-header { color: var(--sp-heading-color); background-color: var(--sp-light); border-bottom-color: var(--sp-border); font-weight: 600; } .card-footer { background-color: var(--sp-light); border-top-color: var(--sp-border); } .card-title { color: var(--sp-heading-color); } .card-header.bg-primary, .card-header.bg-secondary, .card-header.bg-dark { --sp-heading-color: #ffffff; color: #ffffff; } /* --------------------------------------------------------- List Groups --------------------------------------------------------- */ .list-group-item { border-color: var(--sp-border); } .list-group-item-action { color: var(--sp-text); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--sp-black); background-color: var(--sp-red-light); } .list-group-item.active { color: #ffffff; background-color: var(--sp-red); border-color: var(--sp-red); } /* --------------------------------------------------------- Hero and Page Headers --------------------------------------------------------- */ .jumbotron { color: var(--sp-text); background-color: var(--sp-light); border-bottom: 4px solid var(--sp-red); } .jumbotron h1, .jumbotron .h1, .jumbotron h2, .jumbotron .h2 { color: var(--sp-black); } .jumbotron p { color: var(--sp-text); } /* --------------------------------------------------------- Badges --------------------------------------------------------- */ .badge-primary { color: #ffffff; background-color: var(--sp-red); } .badge-secondary { color: #ffffff; background-color: var(--sp-charcoal); } .badge-info { color: #ffffff; background-color: var(--sp-charcoal); } /* --------------------------------------------------------- Alerts --------------------------------------------------------- */ .alert-primary, .alert-info { color: var(--sp-charcoal); background-color: var(--sp-red-light); border-color: #F0C8CE; } .alert-primary hr, .alert-info hr { border-top-color: #E4ABB4; } .alert-primary .alert-link, .alert-info .alert-link { color: var(--sp-red-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(--sp-black); text-decoration: underline; } .alert-primary .text-muted, .alert-info .text-muted { color: #555960 !important; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control { color: var(--sp-text); border-color: #CED4DA; } .form-control:focus { color: var(--sp-text); border-color: var(--sp-red); box-shadow: 0 0 0 0.2rem rgba(196, 31, 50, 0.20); } .form-control::placeholder { color: var(--sp-muted); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sp-red); border-color: var(--sp-red); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(196, 31, 50, 0.20); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--sp-red); border-color: var(--sp-red); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table { color: var(--sp-text); } .table thead th { color: var(--sp-black); border-bottom-color: var(--sp-border); } .table-bordered th, .table-bordered td { border-color: var(--sp-border); } .table-hover tbody tr:hover { color: var(--sp-text); background-color: var(--sp-red-light); } .table .thead-dark th { color: #ffffff; background-color: var(--sp-charcoal); border-color: var(--sp-charcoal-light); } .table-primary, .table-primary td, .table-primary th { background-color: var(--sp-red-light); } /* --------------------------------------------------------- Pagination --------------------------------------------------------- */ .page-link { color: var(--sp-red-dark); border-color: var(--sp-border); } .page-link:hover { color: var(--sp-red-dark); background-color: var(--sp-red-light); border-color: var(--sp-border); } .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(196, 31, 50, 0.20); } .page-item.active .page-link { color: #ffffff; background-color: var(--sp-red); border-color: var(--sp-red); } .page-item.disabled .page-link { color: var(--sp-muted); background-color: #ffffff; border-color: var(--sp-border); } /* --------------------------------------------------------- Breadcrumbs --------------------------------------------------------- */ .breadcrumb { background-color: var(--sp-light); } .breadcrumb-item a { color: var(--sp-red-dark); } .breadcrumb-item.active { color: var(--sp-muted); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ /* Deliberately do not target the raw footer element. Bootstrap uses semantic footer elements elsewhere. */ .site-footer { --sp-heading-color: #ffffff; color: #ffffff; background-color: var(--sp-black); } .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(--sp-red-dark) !important; } .text-secondary { color: var(--sp-charcoal) !important; } .text-dark { color: var(--sp-text) !important; } .bg-primary { --sp-heading-color: #ffffff; background-color: var(--sp-red) !important; } .bg-secondary { --sp-heading-color: #ffffff; background-color: var(--sp-charcoal) !important; } .bg-dark { --sp-heading-color: #ffffff; background-color: var(--sp-black) !important; } .bg-light { --sp-heading-color: var(--sp-black); background-color: var(--sp-light) !important; } .border-primary { border-color: var(--sp-red) !important; } .border-secondary { border-color: var(--sp-charcoal) !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-dark.bg-primary, .navbar.bg-primary { --sp-heading-color: #ffffff; background-color: var(--sp-charcoal) !important; } /* ========================================================= Squamish Pirates Brand Accents ========================================================= */ .pirate-divider { position: relative; height: 42px; overflow: hidden; line-height: 0; } .pirate-divider::before { content: ""; position: absolute; inset: 0; } .pirate-divider-red::before { background: var(--sp-red); clip-path: polygon( 0 55%, 10% 35%, 22% 58%, 37% 30%, 52% 52%, 67% 28%, 82% 52%, 100% 32%, 100% 100%, 0 100% ); } .pirate-divider-dark::before { background: var(--sp-black); clip-path: polygon( 0 45%, 14% 62%, 29% 34%, 45% 59%, 61% 31%, 77% 56%, 90% 35%, 100% 48%, 100% 100%, 0 100% ); } .pirate-kicker { letter-spacing: 0.12em; } .pirate-feature-card { transition: transform 0.18s ease, box-shadow 0.18s ease; } .pirate-feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(17, 17, 17, 0.18) !important; } .pirate-logo-feature { max-height: 430px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35)); } @media (max-width: 767.98px) { .pirate-divider { height: 28px; } .pirate-feature-card:hover { transform: none; } }