/* ========================================================= Orillia Channel Cats Standard Bootstrap v4.6 Overrides ========================================================= */ :root { --cats-black: #171717; --cats-black-dark: #0C0C0C; --cats-charcoal: #292929; --cats-gold: #F2C500; --cats-gold-dark: #D5AB00; --cats-gold-text: #876600; --cats-gold-light: #FFF7D1; --cats-light: #F7F7F4; --cats-border: #DEDED8; --cats-text: #292929; --cats-muted: #6C7075; } /* --------------------------------------------------------- Base --------------------------------------------------------- */ body { --cats-heading-color: var(--cats-black); color: var(--cats-text); background-color: #ffffff; font-family: "Lato", Arial, sans-serif; } a { color: var(--cats-black); } a:hover, a:focus { color: var(--cats-gold-text); } hr { border-top-color: var(--cats-border); } /* --------------------------------------------------------- Typography --------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--cats-heading-color); font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-weight: 600; } h1, .h1 { font-weight: 700; letter-spacing: -0.015em; } h2, .h2 { font-weight: 600; letter-spacing: -0.01em; } h3, .h3 { font-weight: 600; } .navbar-brand { font-family: "Oswald", "Arial Narrow", Arial, sans-serif; font-weight: 600; } .navbar-nav, .btn, .form-control, .dropdown-menu { font-family: "Lato", Arial, sans-serif; } .btn { font-weight: 700; } /* Contextual sections control their own heading colour */ .bg-dark, .bg-primary, .text-light, .text-white { --cats-heading-color: #ffffff; } .bg-secondary { --cats-heading-color: var(--cats-black); } /* Light components inside contextual sections return to dark headings */ .card, .bg-light, .jumbotron, .alert-primary, .alert-info, .dropdown-menu { --cats-heading-color: var(--cats-black); } /* Contextual cards restore appropriate headings */ .card.bg-dark, .card.bg-primary { --cats-heading-color: #ffffff; } .card.bg-secondary { --cats-heading-color: var(--cats-black); } /* --------------------------------------------------------- Navbar --------------------------------------------------------- */ .navbar { border-bottom: 4px solid var(--cats-gold); overflow: visible !important; } .navbar-dark.bg-primary, .navbar.bg-primary { --cats-heading-color: #ffffff; background-color: var(--cats-black) !important; } .navbar-dark .navbar-brand { color: #ffffff; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.90); font-weight: 700; } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: #ffffff; text-decoration: none; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .show .nav-link { color: var(--cats-gold); } .navbar-dark .navbar-nav .active .nav-link, .navbar-dark .navbar-nav .nav-link.active { color: var(--cats-gold); } .navbar-dark .navbar-toggler { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); } /* Light navbar option */ .navbar-light { background-color: #ffffff; border-bottom: 4px solid var(--cats-gold); } .navbar-light .navbar-brand { color: var(--cats-black); } .navbar-light .navbar-nav .nav-link { color: var(--cats-black); font-weight: 700; } .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(--cats-gold-text); } /* --------------------------------------------------------- Dropdown Menus --------------------------------------------------------- */ .navbar .dropdown-menu, .dropdown-menu { background-color: #ffffff; border: 1px solid var(--cats-border); border-top: 4px solid var(--cats-gold); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); 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(--cats-black); 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(--cats-black); background-color: var(--cats-gold-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: var(--cats-black); background-color: var(--cats-gold); } .navbar .dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item.disabled, .navbar .dropdown-menu li.disabled a, .dropdown-menu li.disabled a { color: var(--cats-muted); background-color: #ffffff; } .dropdown-divider { border-top-color: var(--cats-border); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn-primary { color: #ffffff; background-color: var(--cats-black); border-color: var(--cats-black); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { color: var(--cats-gold); background-color: var(--cats-black-dark); border-color: var(--cats-black-dark); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(23, 23, 23, 0.20); } /* Gold CTA */ .btn-secondary { color: var(--cats-black); background-color: var(--cats-gold); border-color: var(--cats-gold); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active { color: var(--cats-black); background-color: var(--cats-gold-dark); border-color: var(--cats-gold-dark); } .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(242, 197, 0, 0.28); } /* Outline buttons */ .btn-outline-primary { color: var(--cats-black); border-color: var(--cats-black); } .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(--cats-black); border-color: var(--cats-black); } .btn-outline-secondary { color: var(--cats-black); border-color: var(--cats-gold-dark); } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--cats-black); background-color: var(--cats-gold); border-color: var(--cats-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(--cats-muted); background-color: #ffffff; border-color: var(--cats-border); opacity: 1; } /* Link buttons */ .btn-link { color: var(--cats-black); } .btn-link:hover, .btn-link:focus { color: var(--cats-gold-text); } /* Black primary buttons need separation on dark sections */ .bg-dark .btn-primary, .bg-primary .btn-primary { color: var(--cats-black); background-color: var(--cats-gold); border-color: var(--cats-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(--cats-black); background-color: var(--cats-gold-dark); border-color: var(--cats-gold-dark); } /* Gold sections use black buttons for contrast */ .bg-secondary .btn-primary { color: #ffffff; background-color: var(--cats-black); border-color: var(--cats-black); } .bg-secondary .btn-primary:hover, .bg-secondary .btn-primary:focus, .bg-secondary .btn-primary:active { color: var(--cats-gold); background-color: var(--cats-black-dark); border-color: var(--cats-black-dark); } /* --------------------------------------------------------- Cards and Content Blocks --------------------------------------------------------- */ .card { border-color: var(--cats-border); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.055); } .card-header { color: var(--cats-heading-color); background-color: var(--cats-light); border-bottom-color: var(--cats-border); font-weight: 700; } .card-footer { background-color: var(--cats-light); border-top-color: var(--cats-border); } .card-title { color: var(--cats-heading-color); } /* Contextual card headers */ .card-header.bg-primary, .card-header.bg-dark { --cats-heading-color: #ffffff; color: #ffffff; } .card-header.bg-secondary { --cats-heading-color: var(--cats-black); color: var(--cats-black); } /* --------------------------------------------------------- List Groups --------------------------------------------------------- */ .list-group-item { border-color: var(--cats-border); } .list-group-item-action { color: var(--cats-text); } .list-group-item-action:hover, .list-group-item-action:focus { color: var(--cats-black); background-color: var(--cats-gold-light); } .list-group-item.active { color: var(--cats-black); background-color: var(--cats-gold); border-color: var(--cats-gold); } /* --------------------------------------------------------- Hero and Page Headers --------------------------------------------------------- */ .jumbotron { color: var(--cats-text); background-color: var(--cats-gold-light); border-bottom: 4px solid var(--cats-gold); } .jumbotron h1, .jumbotron .h1, .jumbotron h2, .jumbotron .h2 { color: var(--cats-black); } .jumbotron p { color: var(--cats-text); } /* --------------------------------------------------------- Badges --------------------------------------------------------- */ .badge-primary { color: #ffffff; background-color: var(--cats-black); } .badge-secondary { color: var(--cats-black); background-color: var(--cats-gold); } .badge-info { color: var(--cats-black); background-color: var(--cats-gold-light); } /* --------------------------------------------------------- Alerts --------------------------------------------------------- */ .alert-primary, .alert-info { color: var(--cats-black); background-color: var(--cats-gold-light); border-color: #EDDC8A; } .alert-primary hr, .alert-info hr { border-top-color: #DFC956; } .alert-primary .alert-link, .alert-info .alert-link { color: var(--cats-black); 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(--cats-gold-text); } .alert-primary .text-muted, .alert-info .text-muted { color: #585858 !important; } /* --------------------------------------------------------- Forms --------------------------------------------------------- */ .form-control { color: var(--cats-text); border-color: #CED4DA; } .form-control:focus { color: var(--cats-text); border-color: var(--cats-gold-dark); box-shadow: 0 0 0 0.2rem rgba(242, 197, 0, 0.22); } .form-control::placeholder { color: var(--cats-muted); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cats-black); border-color: var(--cats-black); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(242, 197, 0, 0.22); } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--cats-black); border-color: var(--cats-black); } /* --------------------------------------------------------- Tables --------------------------------------------------------- */ .table { color: var(--cats-text); } .table thead th { color: var(--cats-black); border-bottom-color: var(--cats-border); } .table-bordered th, .table-bordered td { border-color: var(--cats-border); } .table-hover tbody tr:hover { color: var(--cats-text); background-color: var(--cats-gold-light); } .table .thead-dark th { color: #ffffff; background-color: var(--cats-black); border-color: var(--cats-charcoal); } .table-primary, .table-primary td, .table-primary th { background-color: var(--cats-gold-light); } /* --------------------------------------------------------- Pagination --------------------------------------------------------- */ .page-link { color: var(--cats-black); border-color: var(--cats-border); } .page-link:hover { color: var(--cats-black); background-color: var(--cats-gold-light); border-color: var(--cats-border); } .page-link:focus { box-shadow: 0 0 0 0.2rem rgba(242, 197, 0, 0.22); } .page-item.active .page-link { color: var(--cats-black); background-color: var(--cats-gold); border-color: var(--cats-gold); } .page-item.disabled .page-link { color: var(--cats-muted); background-color: #ffffff; border-color: var(--cats-border); } /* --------------------------------------------------------- Breadcrumbs --------------------------------------------------------- */ .breadcrumb { background-color: var(--cats-light); } .breadcrumb-item a { color: var(--cats-black); } .breadcrumb-item a:hover, .breadcrumb-item a:focus { color: var(--cats-gold-text); } .breadcrumb-item.active { color: var(--cats-muted); } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ /* Intentionally target .site-footer rather than the raw footer element because Bootstrap uses semantic footer elements in other components. */ .site-footer { --cats-heading-color: #ffffff; color: #ffffff; background-color: var(--cats-black-dark); } .site-footer a { color: var(--cats-gold); } .site-footer a:hover, .site-footer a:focus { color: #ffffff; text-decoration: underline; } /* --------------------------------------------------------- Bootstrap Utility Overrides --------------------------------------------------------- */ .text-primary { color: var(--cats-black) !important; } .text-secondary { color: var(--cats-gold-text) !important; } .text-dark { color: var(--cats-text) !important; } .bg-primary { --cats-heading-color: #ffffff; background-color: var(--cats-black) !important; } .bg-secondary { --cats-heading-color: var(--cats-black); color: var(--cats-black); background-color: var(--cats-gold) !important; } .bg-dark { --cats-heading-color: #ffffff; background-color: var(--cats-black-dark) !important; } .bg-light { --cats-heading-color: var(--cats-black); background-color: var(--cats-light) !important; } .border-primary { border-color: var(--cats-black) !important; } .border-secondary { border-color: var(--cats-gold) !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; } } /* ========================================================= CHANNEL CATS NAVBAR CLAW TREATMENT ========================================================= */ .navbar-brand { position: relative; padding-left: 104px !important; overflow: visible !important; z-index: 2; } /* Decorative claw mark */ .navbar-brand::before { content: ""; position: absolute; width: 100px; height: 112px; left: -4px; top: 50%; /* Intentionally pushes the claw down so the lower portion breaks through the gold navbar rule. */ transform: translateY(-28%); background-image: url("https://blob.poolq.net/cats/images/639237105033048056-golden_wildcat_claw_emblem.png"); background-repeat: no-repeat; /* The source artwork is wider than the visible claw. Filling by height makes the actual claw much more prominent instead of shrinking the entire source image. */ background-size: auto 100%; background-position: center center; pointer-events: none; z-index: 4; } /* --------------------------------------------------------- Navbar Claw - Mobile --------------------------------------------------------- */ @media (max-width: 767.98px) { .navbar-brand { padding-left: 72px !important; font-size: 1rem; } .navbar-brand::before { width: 70px; height: 82px; left: -2px; top: 50%; transform: translateY(-30%); background-size: auto 100%; background-position: center center; } } /* ========================================================= CHANNEL CATS NAVBAR BRAND TEXT ========================================================= */ .navbar-brand { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; color: #ffffff !important; text-shadow: -1px 0 0 var(--cats-gold-dark), 1px 0 0 var(--cats-gold-dark), 0 -1px 0 var(--cats-gold-dark), 0 1px 0 var(--cats-gold-dark), 2px 2px 0 #000000; } /* Keep the mobile brand from becoming too large */ @media (max-width: 767.98px) { .navbar-brand { font-size: 1.15rem; letter-spacing: -0.015em; } }