/* ========================================================= St. Stephen Shark Attack Bootstrap 4.6 Brand Overrides ========================================================= */ :root { --ssa-blue: #0d96df; --ssa-blue-dark: #0873ad; --ssa-blue-darker: #075985; --ssa-blue-light: #e8f6fc; --ssa-red: #c62832; --ssa-red-dark: #9f1f27; --ssa-red-light: #fae9eb; --ssa-black: #09070a; --ssa-charcoal: #202a32; --ssa-charcoal-light: #34424d; --ssa-light: #f4f8fb; --ssa-white: #ffffff; --ssa-border: #d9e4eb; --ssa-text: #202c35; --ssa-muted: #667782; --ssa-shadow: 0 0.35rem 1.25rem rgba(18, 43, 58, 0.10); --ssa-shadow-lg: 0 0.75rem 2rem rgba(18, 43, 58, 0.16); } /* ========================================================= Base Typography ========================================================= */ html { scroll-behavior: smooth; } body { background-color: var(--ssa-white); color: var(--ssa-text); font-family: "Inter", Arial, sans-serif; font-size: 1rem; line-height: 1.65; } h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 { color: var(--ssa-black); font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 700; letter-spacing: 0.015em; line-height: 1.1; } h1, .display-1, .display-2, .display-3, .display-4 { text-transform: uppercase; } h1 { font-size: 2.75rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.7rem; } h4 { font-size: 1.4rem; } p { margin-bottom: 1.15rem; } small, .small { line-height: 1.5; } .text-muted { color: var(--ssa-muted) !important; } .lead { color: #475965; font-size: 1.15rem; font-weight: 400; line-height: 1.7; } hr { border-top-color: var(--ssa-border); } /* ========================================================= Links ========================================================= */ a { color: var(--ssa-blue-dark); font-weight: 500; text-decoration: none; } a:hover, a:focus { color: var(--ssa-blue-darker); text-decoration: underline; } a:focus, button:focus, .btn:focus, .form-control:focus, .custom-select:focus { outline: 0; } /* ========================================================= Navbar ========================================================= */ .navbar { background: linear-gradient(135deg, var(--ssa-black) 0%, var(--ssa-charcoal) 100%) !important; border: 0; border-bottom: 4px solid var(--ssa-blue); box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22); padding-bottom: 0.65rem; padding-top: 0.65rem; } .navbar.bg-primary, .navbar-dark.bg-primary { background: linear-gradient(135deg, var(--ssa-black) 0%, var(--ssa-charcoal) 100%) !important; } .navbar-brand { color: var(--ssa-white) !important; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 1.65rem; font-weight: 700; letter-spacing: 0.035em; line-height: 1; text-decoration: none; text-transform: uppercase; } .navbar-brand:hover, .navbar-brand:focus { color: var(--ssa-blue) !important; text-decoration: none; } .navbar-brand img { height: auto; max-height: 68px; max-width: 230px; width: auto; } .navbar-dark .navbar-nav .nav-link, .navbar .navbar-nav .nav-link { border-radius: 0.25rem; color: rgba(255, 255, 255, 0.92) !important; font-family: "Inter", Arial, sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.025em; margin: 0 0.1rem; padding: 0.65rem 0.8rem; text-decoration: none; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus { background-color: rgba(13, 150, 223, 0.18); color: var(--ssa-white) !important; text-decoration: none; } .navbar-dark .navbar-nav .active .nav-link, .navbar-dark .navbar-nav .show .nav-link, .navbar .navbar-nav .active .nav-link, .navbar .navbar-nav .show .nav-link { background-color: var(--ssa-blue); color: var(--ssa-white) !important; } .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0.25rem; padding: 0.4rem 0.55rem; } .navbar-toggler:hover, .navbar-toggler:focus { background-color: rgba(255, 255, 255, 0.1); border-color: var(--ssa-blue); } .navbar-dark .navbar-toggler-icon { opacity: 1; } /* ========================================================= Dropdown Menus ========================================================= */ .dropdown-menu { background-color: var(--ssa-white); border: 1px solid var(--ssa-border); border-radius: 0.35rem; box-shadow: var(--ssa-shadow-lg); margin-top: 0.45rem; min-width: 13rem; padding: 0.4rem; } .dropdown-item { border-radius: 0.25rem; color: var(--ssa-text); font-size: 0.92rem; font-weight: 500; padding: 0.65rem 0.8rem; text-decoration: none; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--ssa-blue-light); color: var(--ssa-blue-darker); text-decoration: none; } .dropdown-item.active, .dropdown-item:active { background-color: var(--ssa-blue); color: var(--ssa-white); } .dropdown-divider { border-top-color: var(--ssa-border); } /* ========================================================= Buttons ========================================================= */ .btn { border-radius: 0.3rem; font-family: "Inter", Arial, sans-serif; font-size: 0.93rem; font-weight: 700; letter-spacing: 0.015em; padding: 0.6rem 1.15rem; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background-color: var(--ssa-red); border-color: var(--ssa-red); color: var(--ssa-white); box-shadow: 0 0.2rem 0.6rem rgba(198, 40, 50, 0.2); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--ssa-red-dark); border-color: var(--ssa-red-dark); color: var(--ssa-white); } .btn-primary.disabled, .btn-primary:disabled { background-color: #c98287; border-color: #c98287; color: var(--ssa-white); opacity: 1; } .btn-secondary { background-color: var(--ssa-charcoal); border-color: var(--ssa-charcoal); color: var(--ssa-white); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--ssa-black); border-color: var(--ssa-black); color: var(--ssa-white); } .btn-outline-primary { border-color: var(--ssa-red); color: var(--ssa-red); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--ssa-red); border-color: var(--ssa-red); color: var(--ssa-white); } .btn-outline-secondary { border-color: var(--ssa-charcoal-light); color: var(--ssa-charcoal); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active { background-color: var(--ssa-charcoal); border-color: var(--ssa-charcoal); color: var(--ssa-white); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { background-color: var(--ssa-light); border-color: #9baab4; color: #63727c; opacity: 1; } .btn-link { color: var(--ssa-blue-dark); box-shadow: none; } .btn-link:hover, .btn-link:focus { color: var(--ssa-blue-darker); text-decoration: underline; transform: none; } .btn-danger { background-color: var(--ssa-red); border-color: var(--ssa-red); } .btn-danger:hover, .btn-danger:focus { background-color: var(--ssa-red-dark); border-color: var(--ssa-red-dark); } .btn-info { background-color: var(--ssa-blue); border-color: var(--ssa-blue); color: var(--ssa-white); } .btn-info:hover, .btn-info:focus { background-color: var(--ssa-blue-dark); border-color: var(--ssa-blue-dark); color: var(--ssa-white); } .btn-sm { padding: 0.4rem 0.75rem; } .btn-lg { font-size: 1rem; padding: 0.8rem 1.5rem; } /* ========================================================= Background and Text Utilities ========================================================= */ .bg-primary { background-color: var(--ssa-blue) !important; } .bg-secondary { background-color: var(--ssa-charcoal) !important; } .bg-dark { background-color: var(--ssa-black) !important; } .bg-light { background-color: var(--ssa-light) !important; } .text-primary { color: var(--ssa-blue-dark) !important; } .text-secondary { color: var(--ssa-charcoal) !important; } .text-danger { color: var(--ssa-red-dark) !important; } /* ========================================================= Cards and Content Panels ========================================================= */ .card { background-color: var(--ssa-white); border: 1px solid var(--ssa-border); border-radius: 0.45rem; box-shadow: 0 0.25rem 1rem rgba(18, 43, 58, 0.07); overflow: hidden; } .card-header { background-color: var(--ssa-light); border-bottom: 1px solid var(--ssa-border); color: var(--ssa-black); font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; } .card-footer { background-color: var(--ssa-light); border-top: 1px solid var(--ssa-border); } .card-title { color: var(--ssa-black); font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 1.55rem; font-weight: 700; } .card-subtitle { color: var(--ssa-muted); } .card-img-top { object-fit: cover; } .shadow-sm { box-shadow: var(--ssa-shadow) !important; } .rounded, .rounded-lg { border-radius: 0.45rem !important; } /* ========================================================= Hero and Jumbotron ========================================================= */ .jumbotron { background-color: var(--ssa-charcoal); background-image: linear-gradient(135deg, rgba(9, 7, 10, 0.97), rgba(8, 115, 173, 0.9)); border-radius: 0; color: var(--ssa-white); margin-bottom: 0; padding-bottom: 5rem; padding-top: 5rem; } .jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron h5, .jumbotron h6 { color: var(--ssa-white); } .jumbotron .lead, .jumbotron p { color: rgba(255, 255, 255, 0.88); } .jumbotron a:not(.btn) { color: var(--ssa-white); } /* ========================================================= Carousel ========================================================= */ .carousel { background-color: var(--ssa-black); } .carousel-item img { object-fit: cover; } .carousel-caption { background: linear-gradient(90deg, rgba(9, 7, 10, 0.88), rgba(9, 7, 10, 0.2)); border-left: 5px solid var(--ssa-blue); bottom: 2rem; left: 8%; max-width: 650px; padding: 1.25rem 1.5rem; right: auto; text-align: left; } .carousel-caption h1, .carousel-caption h2, .carousel-caption h3, .carousel-caption h4, .carousel-caption h5, .carousel-caption h6 { color: var(--ssa-white); } .carousel-caption p { color: rgba(255, 255, 255, 0.9); } .carousel-indicators li { background-color: rgba(255, 255, 255, 0.65); height: 4px; } .carousel-indicators .active { background-color: var(--ssa-blue); } /* ========================================================= Forms ========================================================= */ label { color: var(--ssa-charcoal); font-size: 0.92rem; font-weight: 700; } .form-control, .custom-select { background-color: var(--ssa-white); border: 1px solid #bdcbd4; border-radius: 0.3rem; color: var(--ssa-text); min-height: calc(1.5em + 0.9rem + 2px); } .form-control:focus, .custom-select:focus { border-color: var(--ssa-blue); box-shadow: 0 0 0 0.2rem rgba(13, 150, 223, 0.18); } .form-control::placeholder { color: #85949e; } .form-control:disabled, .form-control[readonly], .custom-select:disabled { background-color: #edf2f5; color: #667782; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ssa-blue); border-color: var(--ssa-blue); } .input-group-text { background-color: var(--ssa-light); border-color: #bdcbd4; color: var(--ssa-charcoal); font-weight: 600; } /* ========================================================= Alerts ========================================================= */ .alert { border-radius: 0.4rem; border-width: 1px; } .alert-primary, .alert-info { background-color: var(--ssa-blue-light); border-color: #9bd6f1; color: #164e6b; } .alert-primary a, .alert-info a, .alert-primary .alert-link, .alert-info .alert-link { color: #064b70; } .alert-primary .text-muted, .alert-info .text-muted { color: #3b6579 !important; } .alert-danger { background-color: var(--ssa-red-light); border-color: #e7aeb2; color: #742027; } .alert-danger .text-muted { color: #7e4e52 !important; } .alert-warning { background-color: #fff6dd; border-color: #eed28a; color: #6b5311; } .alert-warning .text-muted { color: #766634 !important; } .alert-success { background-color: #e8f5ec; border-color: #a9d6b5; color: #245d34; } .alert-success .text-muted { color: #4a7255 !important; } /* ========================================================= Badges ========================================================= */ .badge { border-radius: 0.25rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.38em 0.58em; } .badge-primary { background-color: var(--ssa-blue); color: var(--ssa-white); } .badge-secondary { background-color: var(--ssa-charcoal); color: var(--ssa-white); } .badge-danger { background-color: var(--ssa-red); } .badge-light { background-color: var(--ssa-light); border: 1px solid var(--ssa-border); color: var(--ssa-charcoal); } /* ========================================================= Tables ========================================================= */ .table { color: var(--ssa-text); } .table thead th { background-color: var(--ssa-charcoal); border-bottom: 0; border-color: #3d4b55; color: var(--ssa-white); font-family: "Inter", Arial, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; vertical-align: middle; } .table th, .table td { border-color: var(--ssa-border); vertical-align: middle; } .table-striped tbody tr:nth-of-type(odd) { background-color: #f6fafc; } .table-hover tbody tr:hover { background-color: var(--ssa-blue-light); } .table-primary, .table-primary th, .table-primary td { background-color: var(--ssa-blue-light); } /* ========================================================= List Groups ========================================================= */ .list-group-item { background-color: var(--ssa-white); border-color: var(--ssa-border); color: var(--ssa-text); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--ssa-blue-light); color: var(--ssa-blue-darker); } .list-group-item.active { background-color: var(--ssa-blue); border-color: var(--ssa-blue); color: var(--ssa-white); } /* ========================================================= Breadcrumbs ========================================================= */ .breadcrumb { background-color: var(--ssa-light); border: 1px solid var(--ssa-border); border-radius: 0.35rem; font-size: 0.9rem; } .breadcrumb-item a { color: var(--ssa-blue-dark); } .breadcrumb-item.active { color: var(--ssa-muted); } /* ========================================================= Pagination ========================================================= */ .page-link { border-color: var(--ssa-border); color: var(--ssa-blue-dark); font-weight: 600; } .page-link:hover, .page-link:focus { background-color: var(--ssa-blue-light); border-color: #9bd6f1; color: var(--ssa-blue-darker); } .page-item.active .page-link { background-color: var(--ssa-blue); border-color: var(--ssa-blue); color: var(--ssa-white); } .page-item.disabled .page-link { background-color: var(--ssa-light); border-color: var(--ssa-border); color: #8997a0; } /* ========================================================= Tabs and Pills ========================================================= */ .nav-tabs { border-bottom-color: var(--ssa-border); } .nav-tabs .nav-link { color: var(--ssa-charcoal); font-weight: 600; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: var(--ssa-border); color: var(--ssa-blue-dark); text-decoration: none; } .nav-tabs .nav-link.active { border-color: var(--ssa-border) var(--ssa-border) var(--ssa-white); color: var(--ssa-blue-dark); } .nav-pills .nav-link { color: var(--ssa-charcoal); font-weight: 600; } .nav-pills .nav-link.active, .nav-pills .show .nav-link { background-color: var(--ssa-blue); color: var(--ssa-white); } /* ========================================================= Modals ========================================================= */ .modal-content { border: 0; border-radius: 0.5rem; box-shadow: var(--ssa-shadow-lg); } .modal-header { background-color: var(--ssa-charcoal); border-bottom: 4px solid var(--ssa-blue); color: var(--ssa-white); } .modal-title { color: var(--ssa-white); font-size: 1.55rem; } .modal-header .close { color: var(--ssa-white); opacity: 0.8; text-shadow: none; } .modal-header .close:hover { color: var(--ssa-white); opacity: 1; } .modal-footer { background-color: var(--ssa-light); border-top-color: var(--ssa-border); } /* ========================================================= Progress ========================================================= */ .progress { background-color: #dfe8ed; border-radius: 1rem; } .progress-bar { background-color: var(--ssa-blue); } /* ========================================================= Footer ========================================================= */ footer, .footer { background-color: var(--ssa-black); border-top: 5px solid var(--ssa-blue); color: rgba(255, 255, 255, 0.78); } footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: var(--ssa-white); } footer a, .footer a { color: #8dd7f7; } footer a:hover, footer a:focus, .footer a:hover, .footer a:focus { color: var(--ssa-white); } footer .text-muted, .footer .text-muted { color: rgba(255, 255, 255, 0.62) !important; } /* ========================================================= Common Pool Queue Components ========================================================= */ .cms-content img, .CMSComponent img { height: auto; max-width: 100%; } .event-card, .program-card, .registration-card { background-color: var(--ssa-white); border: 1px solid var(--ssa-border); border-radius: 0.45rem; box-shadow: var(--ssa-shadow); } .event-card:hover, .program-card:hover, .registration-card:hover { box-shadow: var(--ssa-shadow-lg); } .fa, .fas, .far, .fal, .fad, .fa-solid, .fa-regular, .fa-light, .fa-duotone { text-rendering: auto; } /* ========================================================= Responsive Adjustments ========================================================= */ @media (max-width: 991.98px) { .navbar-collapse { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 0.65rem; padding-top: 0.65rem; } .navbar-dark .navbar-nav .nav-link, .navbar .navbar-nav .nav-link { margin-bottom: 0.2rem; margin-left: 0; margin-right: 0; padding: 0.7rem 0.8rem; } .dropdown-menu { background-color: rgba(255, 255, 255, 0.96); border: 0; box-shadow: none; margin-bottom: 0.5rem; margin-top: 0; } .navbar-brand img { max-height: 56px; max-width: 190px; } .jumbotron { padding-bottom: 3.5rem; padding-top: 3.5rem; } } @media (max-width: 767.98px) { body { font-size: 0.96rem; } h1 { font-size: 2.2rem; } h2 { font-size: 1.9rem; } h3 { font-size: 1.5rem; } .display-1, .display-2, .display-3, .display-4 { font-size: 2.5rem; } .lead { font-size: 1.05rem; } .carousel-caption { border-left-width: 4px; bottom: 1rem; left: 1rem; max-width: calc(100% - 2rem); padding: 0.9rem 1rem; right: 1rem; } .carousel-caption p { font-size: 0.9rem; margin-bottom: 0.5rem; } .btn { white-space: normal; } .card { margin-bottom: 1rem; } .table-responsive { border: 1px solid var(--ssa-border); border-radius: 0.35rem; } } /* ========================================================= Corrected Button Colours Primary: Blue Secondary: Charcoal Danger: Red ========================================================= */ .btn-primary { background-color: var(--ssa-blue) !important; border-color: var(--ssa-blue) !important; color: var(--ssa-white) !important; box-shadow: 0 0.2rem 0.6rem rgba(13, 150, 223, 0.22); } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--ssa-blue-dark) !important; border-color: var(--ssa-blue-dark) !important; color: var(--ssa-white) !important; } .btn-primary.disabled, .btn-primary:disabled { background-color: #71bde5 !important; border-color: #71bde5 !important; color: var(--ssa-white) !important; opacity: 1; } .btn-outline-primary { background-color: transparent !important; border-color: var(--ssa-blue) !important; color: var(--ssa-blue-dark) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--ssa-blue) !important; border-color: var(--ssa-blue) !important; color: var(--ssa-white) !important; } .btn-secondary { background-color: var(--ssa-charcoal) !important; border-color: var(--ssa-charcoal) !important; color: var(--ssa-white) !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--ssa-black) !important; border-color: var(--ssa-black) !important; color: var(--ssa-white) !important; } .btn-danger { background-color: var(--ssa-red) !important; border-color: var(--ssa-red) !important; color: var(--ssa-white) !important; } .btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active { background-color: var(--ssa-red-dark) !important; border-color: var(--ssa-red-dark) !important; color: var(--ssa-white) !important; }