/* ========================================================= Pickering Swim Club Bootstrap 4.6 brand overrides ========================================================= */ :root { --psc-navy: #1f194e; --psc-navy-dark: #15113a; --psc-red: #d40100; --psc-red-dark: #ad0100; --psc-light: #f5f5f8; --psc-border: #dedde6; --psc-text: #292735; --psc-muted: #686674; } /* --------------------------------------------------------- Base typography --------------------------------------------------------- */ body { color: var(--psc-text); font-family: "League Spartan", Arial, sans-serif; font-size: 1rem; line-height: 1.6; } h1, h2 { color: var(--psc-navy); font-family: "Bebas Neue", "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: 0.035em; line-height: 1.05; } h1 { font-size: 3rem; } h2 { font-size: 2.35rem; } h3, h4, h5, h6 { color: var(--psc-navy); font-family: "League Spartan", Arial, sans-serif; font-weight: 700; line-height: 1.25; } .lead { font-size: 1.2rem; font-weight: 400; } .text-muted { color: var(--psc-muted) !important; } /* --------------------------------------------------------- Links --------------------------------------------------------- */ a { color: var(--psc-red); } a:hover, a:focus { color: var(--psc-red-dark); } /* --------------------------------------------------------- Primary navigation White navbar with navy and red brand bar Safe version with no child selectors --------------------------------------------------------- */ .navbar.navbar-light, .navbar.navbar-light.bg-primary, .navbar.navbar-light.bg-light { background-color: #fff !important; border-bottom: 6px solid transparent !important; background-image: linear-gradient( to bottom, transparent 0, transparent calc(100% - 6px), var(--psc-navy) calc(100% - 6px), var(--psc-navy) calc(100% - 3px), var(--psc-red) calc(100% - 3px), var(--psc-red) 100% ); background-repeat: no-repeat; box-shadow: 0 2px 12px rgba(31, 25, 78, 0.12); } .navbar.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link { color: var(--psc-navy); font-weight: 700; letter-spacing: 0.025em; } .navbar.navbar-light .navbar-nav .nav-link:hover, .navbar.navbar-light .navbar-nav .nav-link:focus, .navbar.navbar-light .navbar-nav .nav-link.active, .navbar.navbar-light .navbar-nav .active .nav-link, .navbar.navbar-light .navbar-nav .show .nav-link, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .active .nav-link, .navbar-light .navbar-nav .show .nav-link { color: var(--psc-red); } .navbar.navbar-light .navbar-toggler, .navbar-light .navbar-toggler { border-color: rgba(31, 25, 78, 0.25); } .navbar-brand img { height: auto; } /* --------------------------------------------------------- Buttons Red is the primary action colour --------------------------------------------------------- */ .btn { border-radius: 0.2rem; font-weight: 700; letter-spacing: 0.025em; padding: 0.65rem 1.15rem; } .btn-primary { background-color: var(--psc-red); border-color: var(--psc-red); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--psc-red-dark); border-color: var(--psc-red-dark); } .btn-secondary { background-color: var(--psc-navy); border-color: var(--psc-navy); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--psc-navy-dark); border-color: var(--psc-navy-dark); } .btn-outline-primary { color: var(--psc-red); border-color: var(--psc-red); } .btn-outline-primary:hover, .btn-outline-primary:focus { color: #fff; background-color: var(--psc-red); border-color: var(--psc-red); } .btn-outline-secondary { color: var(--psc-navy); border-color: var(--psc-navy); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { color: #fff; background-color: var(--psc-navy); border-color: var(--psc-navy); } /* --------------------------------------------------------- Page banners and feature areas --------------------------------------------------------- */ .jumbotron, .page-banner, .hero-banner { color: #fff; background-color: var(--psc-navy); border-radius: 0; } .jumbotron h1, .jumbotron h2, .jumbotron h3, .page-banner h1, .page-banner h2, .page-banner h3, .hero-banner h1, .hero-banner h2, .hero-banner h3 { color: #fff; } .jumbotron a:not(.btn), .page-banner a:not(.btn), .hero-banner a:not(.btn) { color: #fff; text-decoration: underline; } /* --------------------------------------------------------- Cards and content panels --------------------------------------------------------- */ .card { border: 1px solid var(--psc-border); border-radius: 0.25rem; box-shadow: 0 3px 14px rgba(31, 25, 78, 0.07); } .card-header { color: var(--psc-navy); background-color: var(--psc-light); border-bottom-color: var(--psc-border); font-weight: 700; } .card-title { color: var(--psc-navy); font-weight: 700; } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table thead th { color: #fff; background-color: var(--psc-navy); border-color: var(--psc-navy); font-weight: 700; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(31, 25, 78, 0.035); } .table-hover tbody tr:hover { background-color: rgba(212, 1, 0, 0.055); } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control { border-color: #c9c7d2; border-radius: 0.2rem; } .form-control:focus { border-color: var(--psc-navy); box-shadow: 0 0 0 0.2rem rgba(31, 25, 78, 0.16); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--psc-red); border-color: var(--psc-red); } /* --------------------------------------------------------- Badges and alerts --------------------------------------------------------- */ .badge-primary { background-color: var(--psc-red); } .badge-secondary { background-color: var(--psc-navy); } .alert-primary { color: var(--psc-navy-dark); background-color: #efedf8; border-color: #d8d5eb; } .alert-danger { color: #790000; background-color: #fdeaea; border-color: #f4c3c3; } /* --------------------------------------------------------- Breadcrumbs and pagination --------------------------------------------------------- */ .breadcrumb { background-color: var(--psc-light); border-radius: 0; } .breadcrumb-item.active { color: var(--psc-muted); } .page-link { color: var(--psc-navy); } .page-link:hover { color: var(--psc-red); } .page-item.active .page-link { background-color: var(--psc-red); border-color: var(--psc-red); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ footer, .site-footer { color: rgba(255, 255, 255, 0.85); background-color: var(--psc-navy); } footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #fff; } footer a, .site-footer a { color: #fff; } footer a:hover, .site-footer a:hover { color: #ff7776; } /* --------------------------------------------------------- Reusable branded content classes --------------------------------------------------------- */ .psc-section-light { background-color: var(--psc-light); } .psc-section-navy { color: #fff; background-color: var(--psc-navy); } .psc-section-red { color: #fff; background-color: var(--psc-red); } .psc-section-navy h1, .psc-section-navy h2, .psc-section-navy h3, .psc-section-red h1, .psc-section-red h2, .psc-section-red h3 { color: #fff; } .psc-accent-heading { position: relative; margin-bottom: 1.5rem; padding-bottom: 0.65rem; } .psc-accent-heading::after { position: absolute; bottom: 0; left: 0; width: 3.5rem; height: 4px; background-color: var(--psc-red); content: ""; } /* --------------------------------------------------------- Mobile adjustments --------------------------------------------------------- */ @media (max-width: 767.98px) { h1 { font-size: 2.35rem; } h2 { font-size: 1.95rem; } .navbar-brand img { max-width: 220px; height: auto; } .jumbotron { padding: 2.5rem 1.25rem; } }